diff --git a/app/admin/[character]/[page]/page.tsx b/app/admin/[character]/[page]/page.tsx
index 6713c9f..1e0b385 100644
--- a/app/admin/[character]/[page]/page.tsx
+++ b/app/admin/[character]/[page]/page.tsx
@@ -10,9 +10,9 @@ import { AdminHeader } from "@/components/admin/admin-header";
 import { EditorPresence } from "@/components/admin/editor-presence";
 import { Button } from "@/components/ui/button";
 import { getAdminSession } from "@/lib/auth/server";
+import { getCachedCatalogOptions } from "@/lib/cache/catalog";
 import { toTeamDraft } from "@/lib/guides/team-draft";
 import {
-  getCatalogOptions,
   getAdminGuideContent,
   getGuideEditorHeader,
 } from "@/lib/guides/queries";
@@ -54,7 +54,7 @@ export default async function StructuredEditorPage({
     ?? guide.sections.find((section) => section.slug === page)?.title
     ?? page;
   const [catalog, content] = await Promise.all([
-    getCatalogOptions(),
+    getCachedCatalogOptions(),
     getAdminGuideContent(guide.slug, page),
   ]);
   if (!catalog || !content) notFound();
diff --git a/app/admin/[character]/comment/page.tsx b/app/admin/[character]/comment/page.tsx
new file mode 100644
index 0000000..7b95143
--- /dev/null
+++ b/app/admin/[character]/comment/page.tsx
@@ -0,0 +1,57 @@
+import { Suspense } from "react";
+import Link from "next/link";
+import { ArrowLeftIcon } from "lucide-react";
+import { notFound, redirect } from "next/navigation";
+import { connection } from "next/server";
+
+import { AdminHeader } from "@/components/admin/admin-header";
+import { GuideSectionNav } from "@/components/admin/guide-section-nav";
+import { CommentBoardContent } from "@/components/comments/comment-board-content";
+import { CommentBoardSkeleton } from "@/components/comments/comment-skeleton";
+import { Button } from "@/components/ui/button";
+import Image from "@/components/ui/resilient-image";
+import { getAdminSession } from "@/lib/auth/server";
+import { getGuideEditorHeader } from "@/lib/guides/queries";
+
+export const instant = false;
+
+export default async function GuideCommentPage({
+  params,
+}: {
+  params: Promise<{ character: string }>;
+}) {
+  await connection();
+  if (!(await getAdminSession())) redirect("/auth/login?next=%2Fadmin");
+  const { character } = await params;
+  const guide = await getGuideEditorHeader(character);
+  if (!guide) notFound();
+  const extras = guide.sections
+    .filter((section) => section.kind === "extra")
+    .map(({ id, slug, title }) => ({ id, slug, title }));
+
+  return (
+    <div className="min-h-svh">
+      <AdminHeader />
+      <main lang="en" className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 pb-4 sm:px-6 sm:pb-6 lg:px-8 lg:pb-8">
+        <div className="flex flex-col">
+          <header className="flex items-center gap-4">
+            <Button variant="ghost" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="Back to dashboard">
+              <ArrowLeftIcon />
+            </Button>
+            <div className="relative size-16 shrink-0 overflow-hidden rounded-lg border">
+              <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-sm text-muted-foreground">{guide.name}</p>
+              <h1 className="font-heading text-3xl font-semibold">Comment</h1>
+            </div>
+          </header>
+          <GuideSectionNav guideId={guide.id} characterKey={guide.characterKey} current="comment" extras={extras} />
+        </div>
+        <Suspense fallback={<CommentBoardSkeleton />}>
+          <CommentBoardContent target={`guide:${guide.id}`} />
+        </Suspense>
+      </main>
+    </div>
+  );
+}
diff --git a/app/admin/actions.test.ts b/app/admin/actions.test.ts
new file mode 100644
index 0000000..e66e90f
--- /dev/null
+++ b/app/admin/actions.test.ts
@@ -0,0 +1,57 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({ admin: vi.fn(), updateTag: vi.fn(), save: vi.fn() }));
+vi.mock("next/cache", () => ({ updateTag: mocks.updateTag }));
+vi.mock("@/lib/auth/server", () => ({ requireAdmin: mocks.admin }));
+vi.mock("@/lib/audit-log", () => ({ auditActor: () => ({ id: "admin", label: "Admin" }) }));
+vi.mock("@/lib/glossary-repository", () => ({ createGlossaryAlias: vi.fn(), deleteGlossaryAlias: vi.fn() }));
+vi.mock("@/lib/catalog/sync", () => ({ cancelCatalogSyncJob: vi.fn(), getCatalogSyncJob: vi.fn(), startCatalogSyncJob: vi.fn() }));
+vi.mock("@/lib/guides/queries", () => ({
+  getAdminGuideContentById: vi.fn(), getAdminTeamImportGuide: vi.fn(),
+  listAdminTeamImportsForCharacter: vi.fn(), listAdminTeamImportGuides: vi.fn(),
+}));
+vi.mock("@/lib/guides/mutations", () => ({
+  createExtraSection: mocks.save, createGuide: mocks.save, deleteExtraSection: mocks.save,
+  permanentlyDeleteGuide: mocks.save, reorderExtraSections: mocks.save, restoreGuide: mocks.save,
+  saveArtifacts: mocks.save, saveConstellations: mocks.save, saveExtraSection: mocks.save,
+  saveTeams: mocks.save, setGuideVisibility: mocks.save, saveWeapons: mocks.save,
+  trashGuide: mocks.save, updateGuideBasics: mocks.save,
+  GuideVersionConflictError: class extends Error { currentVersion = 9; },
+}));
+
+import { moveGuideToTrash, restoreStructuredGuide, saveArtifactSection, saveGuideExtra, saveGuideOverview, saveWeaponSection } from "./actions";
+import { GuideVersionConflictError } from "@/lib/guides/mutations";
+
+beforeEach(() => {
+  vi.resetAllMocks();
+  mocks.admin.mockResolvedValue({ user: { id: "admin" } });
+  mocks.save.mockResolvedValue({ version: 10 });
+});
+
+describe("guide save cache freshness", () => {
+  const guideId = "550e8400-e29b-41d4-a716-446655440000";
+  it.each([saveArtifactSection, saveGuideOverview, saveWeaponSection, moveGuideToTrash, restoreStructuredGuide])(
+    "expires the public page immediately after a successful action", async (action) => {
+      expect(await action(guideId, {})).toMatchObject({ status: "saved", version: 10 });
+      expect(mocks.updateTag).toHaveBeenCalledWith(`buzz:page:${guideId}`);
+    },
+  );
+  it("invalidates custom extras without changing their section id or version input", async () => {
+    const sectionId = "550e8400-e29b-41d4-a716-446655440001";
+    const input = { expectedVersion: 9 };
+    await saveGuideExtra(guideId, sectionId, input);
+    expect(mocks.save).toHaveBeenCalledWith(guideId, sectionId, input, expect.any(Object));
+    expect(mocks.updateTag).toHaveBeenCalledWith(`buzz:page:${guideId}`);
+  });
+  it("preserves conflicts without invalidating or reporting a save", async () => {
+    mocks.save.mockRejectedValue(new GuideVersionConflictError(9));
+    expect(await saveArtifactSection(guideId, {})).toMatchObject({ status: "conflict", currentVersion: 9 });
+    expect(mocks.updateTag).not.toHaveBeenCalled();
+  });
+  it("authorizes before writes or cache invalidation", async () => {
+    mocks.admin.mockRejectedValue(new Error("unauthorized"));
+    await expect(saveArtifactSection(guideId, {})).rejects.toThrow("unauthorized");
+    expect(mocks.save).not.toHaveBeenCalled();
+    expect(mocks.updateTag).not.toHaveBeenCalled();
+  });
+});
diff --git a/app/admin/actions.ts b/app/admin/actions.ts
index f0b6ee1..1769ac9 100644
--- a/app/admin/actions.ts
+++ b/app/admin/actions.ts
@@ -3,7 +3,7 @@
 import { updateTag } from "next/cache";
 import * as z from "zod";
 
-import { GLOSSARY_CACHE_TAG, pageCacheTag } from "@/lib/cache/tags";
+import { DIRECTORY_CACHE_TAG, GLOSSARY_CACHE_TAG, pageCacheTag } from "@/lib/cache/tags";
 import {
   createGlossaryAlias,
   deleteGlossaryAlias,
@@ -56,9 +56,11 @@ function mutationContext(
   return { actor: auditActor(admin.user), overwrite: intent?.overwrite };
 }
 
-async function runGuideAction(action: () => Promise<{ version?: number }>): Promise<GuideActionResult> {
+async function runGuideAction(action: () => Promise<{ version?: number }>, guideId: string): Promise<GuideActionResult> {
   try {
     const result = await action();
+    updateTag(pageCacheTag(guideId));
+    updateTag(DIRECTORY_CACHE_TAG);
     return { status: "saved", version: result.version };
   } catch (cause) {
     if (cause instanceof GuideVersionConflictError) {
@@ -75,6 +77,8 @@ export async function createStructuredGuide(input: unknown): Promise<CreateGuide
   const admin = await requireAdmin();
   try {
     const guide = await createGuide(input, mutationContext(admin));
+    updateTag(pageCacheTag(guide.id));
+    updateTag(DIRECTORY_CACHE_TAG);
     return { status: "saved", version: guide.version, location: `/admin/${guide.characterKey}` };
   } catch (cause) {
     return { status: "error", message: cause instanceof Error ? cause.message : "สร้าง Guide ไม่สำเร็จ" };
@@ -83,27 +87,27 @@ export async function createStructuredGuide(input: unknown): Promise<CreateGuide
 
 export async function saveWeaponSection(guideId: string, input: unknown, intent?: SaveIntent) {
   const admin = await requireAdmin();
-  return runGuideAction(() => saveWeapons(guideId, input, mutationContext(admin, intent)));
+  return runGuideAction(() => saveWeapons(guideId, input, mutationContext(admin, intent)), guideId);
 }
 
 export async function saveGuideOverview(guideId: string, input: unknown, intent?: SaveIntent) {
   const admin = await requireAdmin();
-  return runGuideAction(() => updateGuideBasics(guideId, input, mutationContext(admin, intent)));
+  return runGuideAction(() => updateGuideBasics(guideId, input, mutationContext(admin, intent)), guideId);
 }
 
 export async function saveArtifactSection(guideId: string, input: unknown, intent?: SaveIntent) {
   const admin = await requireAdmin();
-  return runGuideAction(() => saveArtifacts(guideId, input, mutationContext(admin, intent)));
+  return runGuideAction(() => saveArtifacts(guideId, input, mutationContext(admin, intent)), guideId);
 }
 
 export async function saveConstellationSection(guideId: string, input: unknown, intent?: SaveIntent) {
   const admin = await requireAdmin();
-  return runGuideAction(() => saveConstellations(guideId, input, mutationContext(admin, intent)));
+  return runGuideAction(() => saveConstellations(guideId, input, mutationContext(admin, intent)), guideId);
 }
 
 export async function saveTeamSection(guideId: string, input: unknown, intent?: SaveIntent) {
   const admin = await requireAdmin();
-  return runGuideAction(() => saveTeams(guideId, input, mutationContext(admin, intent)));
+  return runGuideAction(() => saveTeams(guideId, input, mutationContext(admin, intent)), guideId);
 }
 
 export async function listTeamImportGuides(currentGuideId: string) {
@@ -157,6 +161,7 @@ export async function createGuideExtra(guideId: string, input: unknown) {
       mutationContext(admin),
     );
     updateTag(pageCacheTag(guideId));
+    updateTag(DIRECTORY_CACHE_TAG);
     return {
       status: "saved" as const,
       version: section.version,
@@ -185,8 +190,8 @@ export async function saveGuideExtra(
   const parsedSectionId = z.string().uuid().parse(sectionId);
   const result = await runGuideAction(() =>
     saveExtraSection(parsedGuideId, parsedSectionId, input, mutationContext(admin, intent)),
+    guideId,
   );
-  if (result.status === "saved") updateTag(pageCacheTag(guideId));
   return result;
 }
 
@@ -198,8 +203,8 @@ export async function deleteGuideExtra(guideId: string, sectionId: string) {
       z.string().uuid().parse(sectionId),
       mutationContext(admin),
     ),
+    guideId,
   );
-  if (result.status === "saved") updateTag(pageCacheTag(guideId));
   return result;
 }
 
@@ -211,19 +216,19 @@ export async function reorderGuideExtras(guideId: string, input: unknown) {
       input,
       mutationContext(admin),
     ),
+    guideId,
   );
-  if (result.status === "saved") updateTag(pageCacheTag(guideId));
   return result;
 }
 
 export async function moveGuideToTrash(guideId: string) {
   const admin = await requireAdmin();
-  return runGuideAction(() => trashGuide(guideId, mutationContext(admin)));
+  return runGuideAction(() => trashGuide(guideId, mutationContext(admin)), guideId);
 }
 
 export async function restoreStructuredGuide(guideId: string) {
   const admin = await requireAdmin();
-  return runGuideAction(() => restoreGuide(guideId, mutationContext(admin)));
+  return runGuideAction(() => restoreGuide(guideId, mutationContext(admin)), guideId);
 }
 
 export async function setStructuredGuideVisibility(
@@ -237,7 +242,7 @@ export async function setStructuredGuideVisibility(
   }).safeParse(input);
   if (!parsed.success) return { status: "error" as const, message: "ข้อมูลการเผยแพร่ไม่ถูกต้อง" };
   if (!parsed.data.isPublic) {
-    return runGuideAction(() => setGuideVisibility(guideId, parsed.data, mutationContext(admin)));
+    return runGuideAction(() => setGuideVisibility(guideId, parsed.data, mutationContext(admin)), guideId);
   }
 
   const guide = await getAdminGuideContentById(guideId);
@@ -252,12 +257,12 @@ export async function setStructuredGuideVisibility(
   if (issues.length) {
     return { status: "error" as const, message: issues.join(" • "), issues };
   }
-  return runGuideAction(() => setGuideVisibility(guideId, parsed.data, mutationContext(admin)));
+  return runGuideAction(() => setGuideVisibility(guideId, parsed.data, mutationContext(admin)), guideId);
 }
 
 export async function deleteStructuredGuide(guideId: string) {
   const admin = await requireAdmin();
-  return runGuideAction(() => permanentlyDeleteGuide(guideId, mutationContext(admin)));
+  return runGuideAction(() => permanentlyDeleteGuide(guideId, mutationContext(admin)), guideId);
 }
 
 export async function startCatalogSync() {
diff --git a/app/admin/comments/page.tsx b/app/admin/comments/page.tsx
index 61495dd..83669e2 100644
--- a/app/admin/comments/page.tsx
+++ b/app/admin/comments/page.tsx
@@ -12,8 +12,8 @@ export default async function AdminCommentsPage({ searchParams }: { searchParams
   const initialTarget = query.target;
   const initialComment = initialTarget && query.comment && /^[0-9a-f-]{36}$/i.test(query.comment) ? query.comment : undefined;
   const [initial, targets] = await Promise.all([listComments({ viewer, inbox: true, grouped: true, target: initialTarget }), listCommentTargets()]);
-  return <><AdminHeader /><main className="mx-auto flex w-full max-w-7xl flex-col gap-6 p-4 sm:p-6 lg:p-8">
-    <header><h1 className="font-heading text-3xl font-semibold">ความคิดเห็น</h1><p className="mt-2 text-muted-foreground">ตอบกลับและจัดการความคิดเห็นจากทุกไกด์</p></header>
+  return <><AdminHeader /><main lang="en" className="mx-auto flex w-full max-w-7xl flex-col gap-6 p-4 sm:p-6 lg:p-8">
+    <header><h1 className="font-heading text-3xl font-semibold">Comments</h1><p className="mt-2 text-muted-foreground">Reply to and manage comments from every guide</p></header>
     <AdminCommentInbox key={`${initialTarget ?? "all"}:${initialComment ?? ""}`} initialTarget={initialTarget} initialComment={initialComment} initial={initial} targets={targets} />
   </main></>;
 }
diff --git a/app/admin/create/page.tsx b/app/admin/create/page.tsx
index d78f871..38ef623 100644
--- a/app/admin/create/page.tsx
+++ b/app/admin/create/page.tsx
@@ -7,13 +7,14 @@ import { CreateGuideFlow } from "@/components/admin/create-guide-flow";
 import { AdminHeader } from "@/components/admin/admin-header";
 import { Button } from "@/components/ui/button";
 import { getAdminSession } from "@/lib/auth/server";
-import { getActiveCatalog, listGuideCards } from "@/lib/guides/queries";
+import { getCachedCatalogOptions } from "@/lib/cache/catalog";
+import { listGuideCards } from "@/lib/guides/queries";
 
 export default async function CreateGuidePage() {
   await connection();
   if (!(await getAdminSession())) redirect("/auth/login?next=%2Fadmin");
   const [catalog, guides] = await Promise.all([
-    getActiveCatalog(),
+    getCachedCatalogOptions(),
     listGuideCards(),
   ]);
   if (!catalog) redirect("/admin?sync=required");
diff --git a/app/admin/glossary/page.tsx b/app/admin/glossary/page.tsx
index 34620be..75d4229 100644
--- a/app/admin/glossary/page.tsx
+++ b/app/admin/glossary/page.tsx
@@ -5,13 +5,13 @@ import { AdminHeader } from "@/components/admin/admin-header";
 import { GlossaryManager } from "@/components/admin/glossary-manager";
 import { getAdminSession } from "@/lib/auth/server";
 import { listGlossaryAliases } from "@/lib/glossary-repository";
-import { getCatalogOptions } from "@/lib/guides/queries";
+import { getCachedCatalogOptions } from "@/lib/cache/catalog";
 
 export default async function GlossaryPage() {
   await connection();
   if (!(await getAdminSession())) redirect("/auth/login?next=%2Fadmin");
   const [catalog, aliases] = await Promise.all([
-    getCatalogOptions(),
+    getCachedCatalogOptions(),
     listGlossaryAliases(),
   ]);
   if (!catalog) redirect("/admin");
diff --git a/app/admin/image/constellation/page.tsx b/app/admin/image/constellation/page.tsx
index 95a11d3..5227b1c 100644
--- a/app/admin/image/constellation/page.tsx
+++ b/app/admin/image/constellation/page.tsx
@@ -2,12 +2,12 @@ import { redirect } from "next/navigation";
 import { connection } from "next/server";
 
 import { ConstellationImageGenerator } from "@/components/admin/constellation-image-generator";
-import { getActiveCatalog } from "@/lib/guides/queries";
+import { getCachedCatalogOptions } from "@/lib/cache/catalog";
 
 export default async function ConstellationImagePage() {
   await connection();
 
-  const catalog = await getActiveCatalog();
+  const catalog = await getCachedCatalogOptions();
   if (!catalog) redirect("/admin?sync=required");
 
   return (
diff --git a/app/admin/image/overview/page.tsx b/app/admin/image/overview/page.tsx
index 912fc35..283f1f8 100644
--- a/app/admin/image/overview/page.tsx
+++ b/app/admin/image/overview/page.tsx
@@ -2,13 +2,13 @@ import { redirect } from "next/navigation";
 import { connection } from "next/server";
 
 import { OverviewImageGenerator } from "@/components/admin/overview-image-generator";
-import { getActiveCatalog } from "@/lib/guides/queries";
+import { getCachedActiveCatalog } from "@/lib/cache/catalog";
 import { elementOrder } from "@/lib/overview-image";
 
 export default async function OverviewImagePage() {
   await connection();
 
-  const catalog = await getActiveCatalog();
+  const catalog = await getCachedActiveCatalog();
   if (!catalog) redirect("/admin?sync=required");
 
   const elementIconUrls = Object.fromEntries(
diff --git a/app/admin/image/team/page.tsx b/app/admin/image/team/page.tsx
index f7c246c..9bcccd2 100644
--- a/app/admin/image/team/page.tsx
+++ b/app/admin/image/team/page.tsx
@@ -2,12 +2,12 @@ import { redirect } from "next/navigation";
 import { connection } from "next/server";
 
 import { TeamImageGenerator } from "@/components/admin/team-image-generator";
-import { getActiveCatalog } from "@/lib/guides/queries";
+import { getCachedCatalogOptions } from "@/lib/cache/catalog";
 
 export default async function TeamImagePage() {
   await connection();
 
-  const catalog = await getActiveCatalog();
+  const catalog = await getCachedCatalogOptions();
   if (!catalog) redirect("/admin?sync=required");
 
   return (
diff --git a/app/admin/image/weapon/page.tsx b/app/admin/image/weapon/page.tsx
index 778b382..3d86dc8 100644
--- a/app/admin/image/weapon/page.tsx
+++ b/app/admin/image/weapon/page.tsx
@@ -2,12 +2,12 @@ import { redirect } from "next/navigation";
 import { connection } from "next/server";
 
 import { WeaponImageGenerator } from "@/components/admin/weapon-image-generator";
-import { getActiveCatalog } from "@/lib/guides/queries";
+import { getCachedCatalogOptions } from "@/lib/cache/catalog";
 
 export default async function WeaponImagePage() {
   await connection();
 
-  const catalog = await getActiveCatalog();
+  const catalog = await getCachedCatalogOptions();
   if (!catalog) redirect("/admin?sync=required");
 
   return (
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index d8304f5..3fefbb1 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 
+import { CommentLocaleProvider } from "@/components/comments/comment-locale";
 import { AdminUnreadCommentsProvider } from "@/components/comments/admin-unread-comments";
 import { TooltipProvider } from "@/components/ui/tooltip";
 
@@ -13,7 +14,7 @@ export default function AdminLayout({ children }: LayoutProps<"/admin">) {
           </main>
         }
       >
-        <AdminUnreadCommentsProvider>{children}</AdminUnreadCommentsProvider>
+        <CommentLocaleProvider locale="en"><AdminUnreadCommentsProvider>{children}</AdminUnreadCommentsProvider></CommentLocaleProvider>
       </Suspense>
     </TooltipProvider>
   );
diff --git a/app/admin/loading.tsx b/app/admin/loading.tsx
new file mode 100644
index 0000000..72246f3
--- /dev/null
+++ b/app/admin/loading.tsx
@@ -0,0 +1,10 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminLoading() {
+  return <main role="status" aria-label="Loading admin page" className="mx-auto flex w-full max-w-7xl flex-col gap-6 p-4 sm:p-6 lg:p-8">
+    <span className="sr-only">Loading admin page…</span>
+    <Skeleton className="h-10 w-64 max-w-full" />
+    <Skeleton className="h-12 w-full" />
+    <Skeleton className="h-64 w-full" />
+  </main>;
+}
diff --git a/app/admin/stygian/page.tsx b/app/admin/stygian/page.tsx
index 46f6708..f140e80 100644
--- a/app/admin/stygian/page.tsx
+++ b/app/admin/stygian/page.tsx
@@ -6,7 +6,7 @@ import { StygianEditor } from "@/components/admin/stygian-editor";
 import { StygianSyncButton } from "@/components/admin/stygian-sync-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { getAdminSession } from "@/lib/auth/server";
-import { getActiveCatalog } from "@/lib/guides/queries";
+import { getCachedCatalogOptions } from "@/lib/cache/catalog";
 import { getStygianSchedule, listStygianSchedules } from "@/lib/stygian/repository";
 
 export default async function AdminStygianPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
@@ -16,7 +16,7 @@ export default async function AdminStygianPage({ searchParams }: { searchParams:
   const schedules = await listStygianSchedules();
   const raw = Array.isArray(query.schedule) ? query.schedule[0] : query.schedule;
   const selectedId = Number(raw) || schedules[0]?.scheduleId;
-  const [schedule, catalog] = await Promise.all([selectedId ? getStygianSchedule(selectedId) : null, getActiveCatalog()]);
+  const [schedule, catalog] = await Promise.all([selectedId ? getStygianSchedule(selectedId) : null, getCachedCatalogOptions()]);
   return (
     <div className="min-h-svh"><AdminHeader /><main className="mx-auto flex w-full max-w-7xl flex-col gap-8 p-4 sm:p-6 lg:p-8">
       <header><p className="text-sm font-medium text-primary">Stygian Onslaught</p><h1 className="font-heading text-4xl font-semibold">Stygian Guide</h1></header>
diff --git a/app/stygian/page.tsx b/app/stygian/page.tsx
index 6751e58..0634bb2 100644
--- a/app/stygian/page.tsx
+++ b/app/stygian/page.tsx
@@ -11,7 +11,7 @@ import { CommentBoardSkeleton } from "@/components/comments/comment-skeleton";
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
 import { buttonVariants } from "@/components/ui/button";
 import { getCachedStygianSchedule, getCachedStygianSchedules } from "@/lib/cache/stygian";
-import { getActiveCatalog } from "@/lib/guides/queries";
+import { getCachedCatalogOptions } from "@/lib/cache/catalog";
 
 export const instant = false;
 
@@ -22,7 +22,7 @@ export default async function StygianPage({ searchParams }: { searchParams: Prom
   const rawSchedule = Array.isArray(query.schedule) ? query.schedule[0] : query.schedule;
   const requestedId = Number(rawSchedule);
   const selectedId = schedules.some((entry) => entry.scheduleId === requestedId) ? requestedId : schedules[0]?.scheduleId;
-  const [schedule, catalog] = await Promise.all([selectedId ? getCachedStygianSchedule(selectedId) : null, getActiveCatalog()]);
+  const [schedule, catalog] = await Promise.all([selectedId ? getCachedStygianSchedule(selectedId) : null, getCachedCatalogOptions()]);
   return (
     <div className="flex min-h-svh flex-col bg-background">
       <LiveRefresh endpoint="/api/events/stygian" />
diff --git a/components/admin/admin-header.tsx b/components/admin/admin-header.tsx
index 133455e..e79b77c 100644
--- a/components/admin/admin-header.tsx
+++ b/components/admin/admin-header.tsx
@@ -10,6 +10,7 @@ import {
   BookOpenIcon,
   ClipboardListIcon,
   MessagesSquareIcon,
+  MessageSquareIcon,
   SwordsIcon,
 } from "lucide-react";
 
@@ -33,8 +34,8 @@ export function AdminHeader() {
         </Link>
         <nav aria-label="เมนูแอดมิน" className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto sm:justify-end">
           <Button variant={pathname.startsWith("/admin/comments") ? "secondary" : "ghost"} size="sm" nativeButton={false}
-            render={<Link href="/admin/comments" prefetch={false} />} aria-label="ความคิดเห็น">
-            <Image src="/icon/nav/Comment.webp" alt="" width={20} height={20} className="size-5 object-contain" /><span className="hidden xl:inline">ความคิดเห็น</span>
+            render={<Link href="/admin/comments" prefetch={false} />} aria-label="Comments">
+            <MessageSquareIcon data-icon="inline-start" /><span className="hidden xl:inline">Comments</span>
           </Button>
           <Button variant={pathname.startsWith("/admin/commission") ? "secondary" : "ghost"}
             size="sm" nativeButton={false} render={<Link href="/admin/commission" />} aria-label="Commission">
diff --git a/components/admin/editors/artifact-editor.tsx b/components/admin/editors/artifact-editor.tsx
new file mode 100644
index 0000000..813af8c
--- /dev/null
+++ b/components/admin/editors/artifact-editor.tsx
@@ -0,0 +1,1010 @@
+"use client";
+
+import Image from "@/components/ui/resilient-image";
+import { GripVerticalIcon, HeartPulseIcon, PlusIcon, SparklesIcon, Trash2Icon } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
+import { arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { saveArtifactSection } from "@/app/admin/actions";
+import { AutosaveStatus } from "@/components/admin/autosave-status";
+import { DeleteConfirmationDialog } from "@/components/admin/ui/delete-confirmation-dialog";
+import { ArtifactSelect } from "@/components/admin/ui/catalog-select";
+import { Button } from "@/components/ui/button";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox";
+import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet } from "@/components/ui/field";
+import { ClearableInput as Input } from "@/components/admin/ui/clearable-input";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { useAutosave } from "@/hooks/use-autosave";
+import { adminDraftKey } from "@/lib/editor/local-draft";
+import { artifactSectionSchema, mainStatOptions, substatOptions, talentLevelOptions } from "@/lib/guides/schemas";
+import { normalizeTargetStat, recommendedStatElement, recommendedStatIconName, recommendedStatOptionConflicts, targetStatDefaults, targetStatIconName, targetStatOptions, statPriorityColorClass } from "@/lib/guides/stats";
+import { elementIconFilter } from "@/lib/catalog/element";
+import { normalizeTalentPriorities, reorderTalentPriorities, type TalentPriority, type TalentRelation } from "@/lib/guides/talents";
+import { finalizePercentInput, normalizePercentInput } from "@/lib/guides/percent-input";
+import { formatGuideValidationIssues } from "@/lib/guides/validation-messages";
+import { cn } from "@/lib/utils";
+import { type CatalogTalent, type EditorBase, hasIssuePrefix, parseEditorDraft, createClientId, ConditionControls, reorderConditions, ConditionRenameDialog, SELECTED_TOGGLE_CLASS } from "./shared";
+
+
+export function StatSelect({
+  label,
+  options,
+  value,
+  onChange,
+  elementIconUrls,
+  priorityColors = false,
+}: {
+  label: string;
+  options: readonly string[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  elementIconUrls: Record<string, string>;
+  priorityColors?: boolean;
+}) {
+  return (
+    <Field>
+      <FieldLabel>{label}</FieldLabel>
+      <Select
+        multiple
+        value={value}
+        onValueChange={onChange}
+      >
+        <SelectTrigger className="w-full">
+          <StatIcons values={value} elementIconUrls={elementIconUrls} />
+          <SelectValue placeholder="Select recommended stats…">
+            {priorityColors && value.length
+              ? () => value.map((selected, index) => (
+                  <span key={selected} className={statPriorityColorClass(index)}>
+                    {selected}{index < value.length - 1 ? "," : ""}
+                  </span>
+                ))
+              : undefined}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent className="w-max min-w-(--anchor-width) max-w-(--available-width)">
+          <SelectGroup>
+            {options.map((option) => (
+              <SelectItem
+                key={option}
+                value={option}
+                disabled={recommendedStatOptionConflicts(option, value)}
+                className={priorityColors && value.includes(option)
+                  ? statPriorityColorClass(value.indexOf(option))
+                  : undefined}
+              >
+                <StatIcons values={[option]} elementIconUrls={elementIconUrls} />
+                {option}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </Field>
+  );
+}
+
+
+export function StatIcons({
+  values,
+  elementIconUrls = {},
+}: {
+  values: readonly string[];
+  elementIconUrls?: Record<string, string>;
+}) {
+  const icons = values.flatMap((value) => {
+    const element = recommendedStatElement(value);
+    if (element && elementIconUrls[element]) {
+      return [{ name: element, src: elementIconUrls[element], element }];
+    }
+    const targetIcon = targetStatIconName(value);
+    if (targetIcon) {
+      return [{ name: targetIcon, src: `/icon/stats/${targetIcon}.webp` }];
+    }
+    const recommendedIcon = recommendedStatIconName(value);
+    return recommendedIcon
+      ? [{
+          name: recommendedIcon,
+          src: `/icon/stats/${recommendedIcon}.${recommendedIcon === "elemental-bonus" ? "svg" : "webp"}`,
+        }]
+      : [];
+  });
+  if (!icons.length) return null;
+  return (
+    <span className="flex shrink-0 items-center gap-0.5" aria-hidden="true">
+      {icons.map((icon) => (
+        <StatIcon key={icon.name} {...icon} />
+      ))}
+    </span>
+  );
+}
+
+
+export function StatIcon({
+  name,
+  src,
+  element,
+}: {
+  name: string;
+  src: string;
+  element?: string;
+}) {
+  const [hasError, setHasError] = useState(false);
+  if (hasError) {
+    const PlaceholderIcon =
+      name === "healing-bonus" ? HeartPulseIcon : SparklesIcon;
+    return (
+      <PlaceholderIcon
+        className="size-5 text-muted-foreground"
+        aria-hidden="true"
+      />
+    );
+  }
+  return (
+    <Image
+      src={src}
+      alt=""
+      width={20}
+      height={20}
+      className={cn("size-5 object-contain", !element && "brightness-0 invert")}
+      style={element ? { filter: elementIconFilter(element) } : undefined}
+      onError={() => setHasError(true)}
+    />
+  );
+}
+
+
+export 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
+      />
+      <ComboboxContent>
+        <ComboboxEmpty>ไม่พบระดับ</ComboboxEmpty>
+        <ComboboxList>
+          {(level) => (
+            <ComboboxItem key={level} value={level}>
+              ระดับ {level}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
+
+export function SortableTalentCard({
+  talent,
+  catalogTalent,
+  onLevelChange,
+}: {
+  talent: TalentPriority;
+  catalogTalent?: CatalogTalent;
+  onLevelChange: (level?: string) => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: talent.type });
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn("w-full shrink-0 sm:w-56", isDragging && "opacity-60")}
+    >
+      <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>
+          <CardAction>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              className="touch-none"
+              {...attributes}
+              {...listeners}
+            >
+              <GripVerticalIcon />
+              <span className="sr-only">
+                ลากเพื่อจัดลำดับ {catalogTalent?.name ?? talent.type}
+              </span>
+            </Button>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          <Field>
+            <FieldLabel>ระดับเป้าหมาย</FieldLabel>
+            <TalentLevelPicker value={talent.level} onChange={onLevelChange} />
+          </Field>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+
+export function SortableArtifactRow({
+  id,
+  children,
+}: {
+  id: string;
+  children: (dragHandle: ReactNode) => ReactNode;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn(isDragging && "opacity-60")}
+    >
+      {children(
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          className="touch-none"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVerticalIcon />
+          <span className="sr-only">ลากเพื่อจัดลำดับ Artifact</span>
+        </Button>,
+      )}
+    </div>
+  );
+}
+
+
+export function ArtifactEditor({
+  guide,
+  artifacts,
+  initial,
+  catalogTalents,
+  characters,
+}: EditorBase) {
+  const profile = initial.artifactProfile;
+  const elementIconUrls = Object.fromEntries(
+    characters.flatMap((character) =>
+      character.element && character.elementIconUrl
+        ? [[character.element, character.elementIconUrl] as const]
+        : [],
+    ),
+  );
+  const artifactSensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+  const talentSensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+  const [groups, setGroups] = useState(() => {
+    const source = initial.artifactGroups.length ? initial.artifactGroups : [{ id: "artifact-condition-default", name: null, note: null, iconMediaId: null, iconUrl: null, tiers: [] }];
+    return source.map((condition, conditionIndex) => ({
+      clientId: condition.id,
+      name: condition.name ?? "",
+      note: condition.note ?? "",
+      iconMediaId: condition.iconMediaId ?? null,
+      iconUrl: condition.iconUrl ?? null,
+      tiers: (["Late Game", "Early Game"] as const).map((name, tierIndex) => ({
+        name,
+        rows: condition.tiers[tierIndex]?.rows.map((row, rowIndex) => ({ ...row, clientId: `${conditionIndex}-${name}-${rowIndex}` })) ?? [],
+      })),
+    }));
+  });
+  const [activeArtifactGroupIndex, setActiveArtifactGroupIndex] = useState(0);
+  const [renamingArtifactGroupIndex, setRenamingArtifactGroupIndex] = useState<number | null>(null);
+  const artifactTiers = groups[activeArtifactGroupIndex]?.tiers ?? [];
+  const setArtifactTierRows = (
+    tierIndex: number,
+    update: (rows: (typeof artifactTiers)[number]["rows"]) => (typeof artifactTiers)[number]["rows"],
+  ) => setGroups((current) => current.map((condition, conditionIndex) => conditionIndex === activeArtifactGroupIndex
+    ? { ...condition, tiers: condition.tiers.map((tier, index) => index === tierIndex ? { ...tier, rows: update(tier.rows) } : tier) }
+    : condition));
+  const [recommendedGroups, setRecommendedGroups] = useState(() => {
+    const source = profile?.recommendedConditions.length
+      ? profile.recommendedConditions
+      : [{ name: null, note: null, iconMediaId: null, iconUrl: null, sands: profile?.sands ?? [], goblet: profile?.goblet ?? [], circlet: profile?.circlet ?? [], substats: profile?.substats ?? [] }];
+    return source.map((group, index) => ({ ...group, clientId: `recommended-condition-${index}`, name: group.name ?? "", note: group.note ?? "", iconMediaId: group.iconMediaId ?? null, iconUrl: group.iconUrl ?? null }));
+  });
+  const [activeRecommendedGroupIndex, setActiveRecommendedGroupIndex] = useState(0);
+  const [renamingRecommendedGroupIndex, setRenamingRecommendedGroupIndex] = useState<number | null>(null);
+  const recommended = recommendedGroups[activeRecommendedGroupIndex];
+  const { sands, goblet, circlet, substats } = recommended;
+  const setRecommendedStat = (slot: "sands" | "goblet" | "circlet" | "substats", values: string[]) =>
+    setRecommendedGroups((current) => current.map((group, index) => index === activeRecommendedGroupIndex ? { ...group, [slot]: values } : group));
+  const [targetGroups, setTargetGroups] = useState(() => {
+    const source = profile?.targetConditions.length
+      ? profile.targetConditions
+      : [{ name: null, note: null, iconMediaId: null, iconUrl: null, rows: profile?.targets ?? [] }];
+    return source.map((group, index) => {
+      const existing = new Map(group.rows.flatMap((target) => {
+        const stat = normalizeTargetStat(target.stat);
+        return stat ? [[stat, target.value] as const] : [];
+      }));
+      return {
+        clientId: `target-condition-${index}`,
+        name: group.name ?? "",
+        note: group.note ?? "",
+        iconMediaId: group.iconMediaId ?? null,
+        iconUrl: group.iconUrl ?? null,
+        rows: targetStatDefaults.map((target) => ({ stat: target.stat, value: existing.get(target.stat) ?? target.value })),
+      };
+    });
+  });
+  const [activeTargetGroupIndex, setActiveTargetGroupIndex] = useState(0);
+  const [renamingTargetGroupIndex, setRenamingTargetGroupIndex] = useState<number | null>(null);
+  const targets = targetGroups[activeTargetGroupIndex]?.rows ?? [];
+  const setTargets = (rows: typeof targets) => setTargetGroups((current) => current.map((group, index) => index === activeTargetGroupIndex ? { ...group, rows } : group));
+  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,
+      })),
+    );
+  });
+  const [note, setNote] = useState(profile?.note ?? "");
+  const value = {
+    groups: groups.map((group) => ({
+      name: group.name.trim() || null,
+      note: group.note.trim() || null,
+      iconMediaId: group.iconMediaId,
+      tiers: group.tiers.map((tier) => ({
+        name: tier.name,
+        rows: tier.rows.map((row) => ({
+          firstArtifactKey: row.firstArtifactKey,
+          secondArtifactKey: row.secondArtifactKey,
+          percent: Number(row.percent),
+          note: row.note?.trim() || null,
+        })),
+      })),
+    })),
+    sands: recommendedGroups[0].sands,
+    goblet: recommendedGroups[0].goblet,
+    circlet: recommendedGroups[0].circlet,
+    substats: recommendedGroups[0].substats,
+    recommendedGroups: recommendedGroups.map(({ name, note, iconMediaId, sands, goblet, circlet, substats }) => ({ name: name.trim() || null, note: note.trim() || null, iconMediaId, sands, goblet, circlet, substats })),
+    targetGroups: targetGroups.map((group) => ({
+      name: group.name.trim() || null,
+      note: group.note.trim() || null,
+      iconMediaId: group.iconMediaId,
+      rows: group.rows.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 artifactIssue = (...path: (string | number)[]) =>
+    !validation.success && hasIssuePrefix(validation.error.issues, ...path);
+  const localDraft = {
+    groups,
+    activeArtifactGroupIndex,
+    sands,
+    goblet,
+    circlet,
+    substats,
+    recommendedGroups,
+    activeRecommendedGroupIndex,
+    targetGroups,
+    activeTargetGroupIndex,
+    talents,
+    note,
+  };
+  const autosave = useAutosave({
+    guideId: guide.id,
+    scope: "artifact",
+    value,
+    valid: validation.success,
+    initialVersion: guide.version,
+    persist: (next, expectedVersion, intent) =>
+      saveArtifactSection(guide.id, { ...next, expectedVersion }, intent),
+    storageKey: adminDraftKey(guide.id, "artifact"),
+    localDraft,
+    parseLocalDraft: (candidate) =>
+      parseEditorDraft<typeof localDraft>(
+        candidate,
+        [
+          "groups",
+          "sands",
+          "goblet",
+          "circlet",
+          "substats",
+          "targetGroups",
+          "talents",
+        ],
+        ["note"],
+      ),
+    restoreLocalDraft: (draft) => {
+      setGroups(draft.groups);
+      setActiveArtifactGroupIndex(draft.activeArtifactGroupIndex ?? 0);
+      setRecommendedGroups(draft.recommendedGroups?.length ? draft.recommendedGroups : [{ clientId: createClientId("recommended-condition"), name: "", note: "", iconMediaId: null, iconUrl: null, sands: draft.sands, goblet: draft.goblet, circlet: draft.circlet, substats: draft.substats }]);
+      setActiveRecommendedGroupIndex(Math.min(draft.activeRecommendedGroupIndex ?? 0, Math.max(0, (draft.recommendedGroups?.length ?? 1) - 1)));
+      setTargetGroups(draft.targetGroups.map((group) => ({ ...group, name: group.name ?? "" })));
+      setActiveTargetGroupIndex(draft.activeTargetGroupIndex ?? 0);
+      setTalents(draft.talents);
+      setNote(draft.note);
+    },
+  });
+  const orderedTalents = normalizeTalentPriorities(talents);
+  const handleArtifactDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return;
+    const activeTierIndex = artifactTiers.findIndex((group) =>
+      group.rows.some((row) => row.clientId === active.id),
+    );
+    const overTierIndex = artifactTiers.findIndex((group) =>
+      group.rows.some((row) => row.clientId === over.id),
+    );
+    if (activeTierIndex === -1 || activeTierIndex !== overTierIndex) return;
+    setGroups((current) =>
+      current.map((condition, conditionIndex) => {
+        if (conditionIndex !== activeArtifactGroupIndex) return condition;
+        return { ...condition, tiers: condition.tiers.map((group, groupIndex) => {
+          if (groupIndex !== activeTierIndex) 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"],
+      ),
+    );
+  };
+  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">
+      <div className="grid items-start gap-6 xl:grid-cols-2">
+      <Card className="order-1">
+        <CardHeader>
+          <CardTitle>Artifact tier list</CardTitle>
+          <CardDescription>
+            จัดชุด Artifact ในกลุ่ม Late Game และ Early Game
+            ระบบจะบันทึกอัตโนมัติ
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-5">
+          <ConditionControls
+            ariaLabel="เลือกเงื่อนไขอาร์ติแฟกต์"
+            items={groups}
+            activeIndex={activeArtifactGroupIndex}
+            onActiveIndexChange={setActiveArtifactGroupIndex}
+            onRename={setRenamingArtifactGroupIndex}
+            onReorder={(from, to) => {
+              const reordered = reorderConditions(groups, activeArtifactGroupIndex, from, to);
+              setGroups(reordered.items);
+              setActiveArtifactGroupIndex(reordered.activeIndex);
+            }}
+            onAdd={(details) => {
+              setGroups([...groups, { clientId: createClientId("artifact-condition"), ...details, note: "", tiers: [{ name: "Late Game", rows: [] }, { name: "Early Game", rows: [] }] }]);
+              setActiveArtifactGroupIndex(groups.length);
+            }}
+            onDuplicate={() => {
+              const source = groups[activeArtifactGroupIndex];
+              if (!source) return;
+              setGroups([...groups, { ...source, clientId: createClientId("artifact-condition"), tiers: source.tiers.map((tier) => ({ ...tier, rows: tier.rows.map((row) => ({ ...row, clientId: createClientId("artifact") })) })) }]);
+              setActiveArtifactGroupIndex(groups.length);
+            }}
+            onDelete={() => {
+              const next = groups.filter((_, index) => index !== activeArtifactGroupIndex);
+              setGroups(next);
+              setActiveArtifactGroupIndex(Math.min(activeArtifactGroupIndex, next.length - 1));
+            }}
+          />
+          <ConditionRenameDialog
+            open={renamingArtifactGroupIndex !== null}
+            fallback={`Condition ${(renamingArtifactGroupIndex ?? 0) + 1}`}
+            value={renamingArtifactGroupIndex === null ? "" : groups[renamingArtifactGroupIndex]?.name ?? ""}
+            iconUrl={renamingArtifactGroupIndex === null ? null : groups[renamingArtifactGroupIndex]?.iconUrl ?? null}
+            onOpenChange={(open) => { if (!open) setRenamingArtifactGroupIndex(null); }}
+            onChange={(name) => setGroups(groups.map((group, index) => index === renamingArtifactGroupIndex ? { ...group, name } : group))}
+            onIconChange={(icon) => setGroups(groups.map((group, index) => index === renamingArtifactGroupIndex ? { ...group, ...icon } : group))}
+          />
+          <Field>
+            <FieldLabel htmlFor={`artifact-condition-note-${groups[activeArtifactGroupIndex]?.clientId}`}>Condition note (optional)</FieldLabel>
+            <Textarea id={`artifact-condition-note-${groups[activeArtifactGroupIndex]?.clientId}`} value={groups[activeArtifactGroupIndex]?.note ?? ""} onChange={(event) => setGroups(groups.map((group, index) => index === activeArtifactGroupIndex ? { ...group, note: event.target.value } : group))} />
+          </Field>
+          {artifactTiers.map((group, groupIndex) => (
+            <Card key={group.name} size="sm">
+              <CardHeader>
+                <CardTitle>{group.name}</CardTitle>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-3">
+                <DndContext
+                  sensors={artifactSensors}
+                  collisionDetection={closestCenter}
+                  onDragEnd={handleArtifactDragEnd}
+                >
+                  <SortableContext
+                    items={group.rows.map((row) => row.clientId)}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    <div className="flex flex-col gap-3">
+                      {group.rows.map((row, rowIndex) => (
+                        <SortableArtifactRow
+                          key={row.clientId}
+                          id={row.clientId}
+                        >
+                          {(dragHandle) => (
+                            <div
+                              className={cn(
+                                "flex items-start gap-2 rounded-lg border p-3",
+                                rowIndex % 2 === 0
+                                  ? "bg-muted/60"
+                                  : "bg-muted/20",
+                                artifactIssue("groups", activeArtifactGroupIndex, "tiers", groupIndex, "rows", rowIndex) && "border-destructive",
+                              )}
+                            >
+                              {dragHandle}
+                              <div className="flex min-w-0 flex-1 flex-col gap-3">
+                                <div className="grid gap-3 lg:grid-cols-[1fr_1fr_4rem_auto]">
+                                  <ArtifactSelect
+                                    items={artifacts}
+                                    value={row.firstArtifactKey}
+                                    invalid={artifactIssue("groups", activeArtifactGroupIndex, "tiers", groupIndex, "rows", rowIndex, "firstArtifactKey")}
+                                    placeholder="ค้นหาชุด Artifact แรก…"
+                                    rarityBackground
+                                    showSelectedImage
+                                    onValueChange={(firstArtifactKey) =>
+                                      setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, firstArtifactKey } : candidate))
+                                    }
+                                  />
+                                  <ArtifactSelect
+                                    items={artifacts}
+                                    value={row.secondArtifactKey ?? ""}
+                                    placeholder="ค้นหาชุดที่สอง (ถ้ามี)…"
+                                    rarityBackground
+                                    showSelectedImage
+                                    onValueChange={(secondArtifactKey) =>
+                                      setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, secondArtifactKey: secondArtifactKey || null } : candidate))
+                                    }
+                                  />
+                                  <Input
+                                    type="text"
+                                    inputMode="decimal"
+                                    aria-label="Artifact percent"
+                                    value={row.percent}
+                                    aria-invalid={artifactIssue("groups", activeArtifactGroupIndex, "tiers", groupIndex, "rows", rowIndex)}
+                                    onChange={(event) =>
+                                      setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: normalizePercentInput(event.target.value, candidate.percent) } : candidate))
+                                    }
+                                    onBlur={() =>
+                                      setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: finalizePercentInput(candidate.percent) } : candidate))
+                                    }
+                                  />
+                                  <DeleteConfirmationDialog
+                                    trigger={
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                      />
+                                    }
+                                    title={`ลบ Artifact อันดับ ${rowIndex + 1}?`}
+                                    description={`รายการ Artifact ในกลุ่ม ${group.name} และเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide`}
+                                    onConfirm={() =>
+                                      setArtifactTierRows(groupIndex, (rows) => rows.filter((_, inner) => inner !== rowIndex))
+                                    }
+                                  >
+                                    <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) =>
+                                      setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, note: event.target.value } : candidate))
+                                    }
+                                  />
+                                </Field>
+                              </div>
+                            </div>
+                          )}
+                        </SortableArtifactRow>
+                      ))}
+                    </div>
+                  </SortableContext>
+                </DndContext>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() =>
+                    setArtifactTierRows(groupIndex, (rows) => [...rows, { clientId: createClientId("artifact"), firstArtifactKey: "", secondArtifactKey: null, percent: "100", note: "" }])
+                  }
+                >
+                  <PlusIcon data-icon="inline-start" />
+                  เพิ่มชุด Artifact
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </CardContent>
+      </Card>
+      <Card className="order-3 overflow-hidden pt-0">
+        <CardHeader className="bg-primary py-4 text-center text-primary-foreground">
+          <CardTitle className="text-2xl">Recommended Stats</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <FieldGroup>
+            <ConditionControls
+              ariaLabel="เลือกเงื่อนไขค่าสถานะแนะนำ"
+              items={recommendedGroups}
+              activeIndex={activeRecommendedGroupIndex}
+              onActiveIndexChange={setActiveRecommendedGroupIndex}
+              onRename={setRenamingRecommendedGroupIndex}
+              onReorder={(from, to) => {
+                const reordered = reorderConditions(recommendedGroups, activeRecommendedGroupIndex, from, to);
+                setRecommendedGroups(reordered.items);
+                setActiveRecommendedGroupIndex(reordered.activeIndex);
+              }}
+              onAdd={(details) => {
+                setRecommendedGroups([...recommendedGroups, { clientId: createClientId("recommended-condition"), ...details, note: "", sands: [], goblet: [], circlet: [], substats: [] }]);
+                setActiveRecommendedGroupIndex(recommendedGroups.length);
+              }}
+              onDuplicate={() => {
+                const source = recommendedGroups[activeRecommendedGroupIndex];
+                if (!source) return;
+                setRecommendedGroups([...recommendedGroups, { clientId: createClientId("recommended-condition"), name: source.name, note: source.note, iconMediaId: source.iconMediaId, iconUrl: source.iconUrl, sands: [...source.sands], goblet: [...source.goblet], circlet: [...source.circlet], substats: [...source.substats] }]);
+                setActiveRecommendedGroupIndex(recommendedGroups.length);
+              }}
+              onDelete={() => {
+                setRecommendedGroups(recommendedGroups.filter((_, index) => index !== activeRecommendedGroupIndex));
+                setActiveRecommendedGroupIndex(Math.max(0, activeRecommendedGroupIndex - 1));
+              }}
+            />
+            <ConditionRenameDialog
+              open={renamingRecommendedGroupIndex !== null}
+              fallback={`Condition ${(renamingRecommendedGroupIndex ?? 0) + 1}`}
+              value={renamingRecommendedGroupIndex === null ? "" : recommendedGroups[renamingRecommendedGroupIndex]?.name ?? ""}
+              iconUrl={renamingRecommendedGroupIndex === null ? null : recommendedGroups[renamingRecommendedGroupIndex]?.iconUrl ?? null}
+              onOpenChange={(open) => { if (!open) setRenamingRecommendedGroupIndex(null); }}
+              onChange={(name) => setRecommendedGroups(recommendedGroups.map((group, index) => index === renamingRecommendedGroupIndex ? { ...group, name } : group))}
+              onIconChange={(icon) => setRecommendedGroups(recommendedGroups.map((group, index) => index === renamingRecommendedGroupIndex ? { ...group, ...icon } : group))}
+            />
+            <Field>
+              <FieldLabel htmlFor={`recommended-condition-note-${recommendedGroups[activeRecommendedGroupIndex]?.clientId}`}>Condition note (optional)</FieldLabel>
+              <Textarea id={`recommended-condition-note-${recommendedGroups[activeRecommendedGroupIndex]?.clientId}`} value={recommendedGroups[activeRecommendedGroupIndex]?.note ?? ""} onChange={(event) => setRecommendedGroups(recommendedGroups.map((group, index) => index === activeRecommendedGroupIndex ? { ...group, note: event.target.value } : group))} />
+            </Field>
+
+            <div className="grid gap-4 sm:grid-cols-3">
+              <StatSelect
+                label="Sands / นาฬิกา"
+                options={mainStatOptions.sands}
+                value={sands}
+                onChange={(values) => setRecommendedStat("sands", values)}
+                elementIconUrls={elementIconUrls}
+                priorityColors
+              />
+              <StatSelect
+                label="Goblet / ถ้วย"
+                options={mainStatOptions.goblet}
+                value={goblet}
+                onChange={(values) => setRecommendedStat("goblet", values)}
+                elementIconUrls={elementIconUrls}
+                priorityColors
+              />
+              <StatSelect
+                label="Circlet / หมวก"
+                options={mainStatOptions.circlet}
+                value={circlet}
+                onChange={(values) => setRecommendedStat("circlet", values)}
+                elementIconUrls={elementIconUrls}
+                priorityColors
+              />
+            </div>
+            <StatSelect
+              label="Substats"
+              options={substatOptions}
+              value={substats}
+              onChange={(values) => setRecommendedStat("substats", values)}
+              elementIconUrls={elementIconUrls}
+              priorityColors
+            />
+          </FieldGroup>
+        </CardContent>
+      </Card>
+      <Card className="order-2 xl:row-span-2 xl:h-full">
+        <CardHeader>
+          <CardTitle>Target Stats</CardTitle>
+          <CardDescription>
+            ตั้งค่าเป้าหมายค่าสถานะสำหรับแต่ละ Condition
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <FieldGroup>
+            <FieldSet>
+              <FieldLegend>Target Stats</FieldLegend>
+              <ConditionControls
+                ariaLabel="เลือกเงื่อนไขค่าสถานะเป้าหมาย"
+                items={targetGroups}
+                activeIndex={activeTargetGroupIndex}
+                onActiveIndexChange={setActiveTargetGroupIndex}
+                onRename={setRenamingTargetGroupIndex}
+                onReorder={(from, to) => {
+                  const reordered = reorderConditions(targetGroups, activeTargetGroupIndex, from, to);
+                  setTargetGroups(reordered.items);
+                  setActiveTargetGroupIndex(reordered.activeIndex);
+                }}
+                onAdd={(details) => {
+                  setTargetGroups([...targetGroups, { clientId: createClientId("target-condition"), ...details, note: "", rows: targetStatDefaults.map((target) => ({ ...target })) }]);
+                  setActiveTargetGroupIndex(targetGroups.length);
+                }}
+                onDuplicate={() => {
+                  const source = targetGroups[activeTargetGroupIndex];
+                  if (!source) return;
+                  setTargetGroups([...targetGroups, { clientId: createClientId("target-condition"), name: source.name, note: source.note, iconMediaId: source.iconMediaId, iconUrl: source.iconUrl, rows: source.rows.map((row) => ({ ...row })) }]);
+                  setActiveTargetGroupIndex(targetGroups.length);
+                }}
+                onDelete={() => {
+                  setTargetGroups(targetGroups.filter((_, index) => index !== activeTargetGroupIndex));
+                  setActiveTargetGroupIndex(Math.max(0, activeTargetGroupIndex - 1));
+                }}
+              />
+              <ConditionRenameDialog
+                open={renamingTargetGroupIndex !== null}
+                fallback={`Condition ${(renamingTargetGroupIndex ?? 0) + 1}`}
+                value={renamingTargetGroupIndex === null ? "" : targetGroups[renamingTargetGroupIndex]?.name ?? ""}
+                iconUrl={renamingTargetGroupIndex === null ? null : targetGroups[renamingTargetGroupIndex]?.iconUrl ?? null}
+                onOpenChange={(open) => { if (!open) setRenamingTargetGroupIndex(null); }}
+                onChange={(name) => setTargetGroups(targetGroups.map((group, index) => index === renamingTargetGroupIndex ? { ...group, name } : group))}
+                onIconChange={(icon) => setTargetGroups(targetGroups.map((group, index) => index === renamingTargetGroupIndex ? { ...group, ...icon } : group))}
+              />
+              <Field>
+                <FieldLabel htmlFor={`target-condition-note-${targetGroups[activeTargetGroupIndex]?.clientId}`}>Condition note (optional)</FieldLabel>
+                <Textarea id={`target-condition-note-${targetGroups[activeTargetGroupIndex]?.clientId}`} value={targetGroups[activeTargetGroupIndex]?.note ?? ""} onChange={(event) => setTargetGroups(targetGroups.map((group, index) => index === activeTargetGroupIndex ? { ...group, note: event.target.value } : group))} />
+              </Field>
+              <div className="grid gap-5 sm:grid-cols-2">
+                {[
+                  targetStatOptions.slice(0, 4),
+                  targetStatOptions.slice(4),
+                ].map((column) => (
+                  <div key={column[0]} className="flex flex-col gap-3">
+                    {column.map((stat) => {
+                      const target = targets.find((item) => item.stat === stat);
+                      return (
+                        <Field
+                          key={stat}
+                          orientation="horizontal"
+                          className="items-center rounded-md bg-muted/40 px-3 py-2"
+                        >
+                          <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>
+            </FieldSet>
+          </FieldGroup>
+        </CardContent>
+      </Card>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Talent Upgrade</CardTitle>
+          <CardDescription>
+            จัดลำดับ Talent เลือกระดับเป้าหมาย และกำหนดความสำคัญ
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <FieldGroup>
+            <FieldSet>
+              <FieldLegend>Talent Priority</FieldLegend>
+              <DndContext
+                sensors={talentSensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleTalentDragEnd}
+              >
+                <SortableContext
+                  items={orderedTalents.map((talent) => talent.type)}
+                  strategy={rectSortingStrategy}
+                >
+                  <div className="flex min-w-0 flex-col items-stretch gap-3 sm:flex-row sm:items-start sm:overflow-x-auto sm:pb-1">
+                    {orderedTalents.map((talent, index) => {
+                      const catalogTalent = catalogTalents.find(
+                        (item) => item.type === talent.type,
+                      );
+                      return (
+                        <div
+                          key={talent.type}
+                          className="flex w-full shrink-0 flex-col items-stretch gap-3 sm:w-auto sm:flex-row sm:items-center"
+                        >
+                          <SortableTalentCard
+                            talent={talent}
+                            catalogTalent={catalogTalent}
+                            onLevelChange={(level) =>
+                              setTalents(
+                                orderedTalents.map((item) =>
+                                  item.type === talent.type
+                                    ? { ...item, level }
+                                    : item,
+                                ),
+                              )
+                            }
+                          />
+                          {index < orderedTalents.length - 1 ? (
+                            <ToggleGroup
+                              variant="outline"
+                              spacing={0}
+                              value={[talent.relationToNext ?? "gt"]}
+                              onValueChange={(selected) => {
+                                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>
+                            </ToggleGroup>
+                          ) : null}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </SortableContext>
+              </DndContext>
+            </FieldSet>
+          </FieldGroup>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="artifact-note">Note (optional)</FieldLabel>
+              <Textarea
+                id="artifact-note"
+                value={note}
+                onChange={(event) => setNote(event.target.value)}
+              />
+            </Field>
+          </FieldGroup>
+        </CardContent>
+        <CardFooter className="justify-end">
+          <AutosaveStatus
+            state={autosave.state}
+            conflictVersion={autosave.conflictVersion}
+            canOverwrite={autosave.canOverwrite}
+            onReloadLatest={autosave.reloadLatest}
+            onOverwrite={autosave.overwrite}
+            issues={
+              validation.success
+                ? []
+                : formatGuideValidationIssues(
+                    "artifact",
+                    validation.error.issues,
+                  )
+            }
+            onSave={autosave.saveNow}
+          />
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/components/admin/editors/constellation-editor.tsx b/components/admin/editors/constellation-editor.tsx
new file mode 100644
index 0000000..6996a80
--- /dev/null
+++ b/components/admin/editors/constellation-editor.tsx
@@ -0,0 +1,331 @@
+"use client";
+
+import Image from "@/components/ui/resilient-image";
+import { SparklesIcon } from "lucide-react";
+import { useState } from "react";
+import { saveConstellationSection } from "@/app/admin/actions";
+import { AutosaveStatus } from "@/components/admin/autosave-status";
+import { LunarisText } from "@/components/public/lunaris-text";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { ClearableInput as Input } from "@/components/admin/ui/clearable-input";
+import { Textarea } from "@/components/ui/textarea";
+import { Toggle } from "@/components/ui/toggle";
+import { useAutosave } from "@/hooks/use-autosave";
+import { adminDraftKey } from "@/lib/editor/local-draft";
+import { constellationSectionSchema } from "@/lib/guides/schemas";
+import { finalizePercentInput, normalizePercentInput } from "@/lib/guides/percent-input";
+import { formatGuideValidationIssues } from "@/lib/guides/validation-messages";
+import { cn } from "@/lib/utils";
+import { type EditorBase, type ConstellationValue, hasIssuePrefix, parseEditorDraft, ConditionControls, reorderConditions, createClientId, ConditionRenameDialog, SELECTED_TOGGLE_CLASS } from "./shared";
+
+export const DEFAULT_CONSTELLATION_CONDITION_NOTE = "C0 = 100%";
+
+
+export 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 ?? "",
+          descriptionNodes: undefined,
+          iconUrl: null,
+        }));
+    return source.map((constellation) => {
+      const saved = savedRows.find((row) => row.level === constellation.level);
+      return {
+        ...constellation,
+        cumulativePercent: saved?.cumulativePercent ?? "",
+        isGreat: saved?.isGreat ?? false,
+      };
+    });
+  };
+  const [groups, setGroups] = useState(() => {
+    const source = initial.constellationGroups.length
+      ? initial.constellationGroups
+      : [{ id: "constellation-condition-default", name: null, note: DEFAULT_CONSTELLATION_CONDITION_NOTE, iconMediaId: null, iconUrl: null, rows: [] }];
+    return source.map((group) => ({
+      clientId: group.id,
+      name: group.name ?? "",
+      note: group.note ?? "",
+      iconMediaId: group.iconMediaId ?? null,
+      iconUrl: group.iconUrl ?? null,
+      rows: makeRows(group.rows),
+    }));
+  });
+  const [activeConstellationGroupIndex, setActiveConstellationGroupIndex] = useState(0);
+  const [renamingConstellationGroupIndex, setRenamingConstellationGroupIndex] = useState<number | null>(null);
+  const value = {
+    note: note.trim() || null,
+    groups: groups.map((group) => ({
+      name: group.name.trim() || null,
+      note: group.note.trim() || null,
+      iconMediaId: group.iconMediaId,
+      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 constellationIssue = (...path: (string | number)[]) =>
+    !validation.success && hasIssuePrefix(validation.error.issues, ...path);
+  const localDraft = { note, groups };
+  const autosave = useAutosave({
+    guideId: guide.id,
+    scope: "constellations",
+    value,
+    valid: validation.success,
+    initialVersion: guide.version,
+    persist: (next, expectedVersion, intent) =>
+      saveConstellationSection(guide.id, { ...next, expectedVersion }, intent),
+    storageKey: adminDraftKey(guide.id, "constellations"),
+    localDraft,
+    parseLocalDraft: (candidate) =>
+      parseEditorDraft<typeof localDraft>(candidate, ["groups"], ["note"]),
+    restoreLocalDraft: (draft) => {
+      setNote(draft.note);
+      setGroups(draft.groups.map((group) => ({ ...group, name: group.name ?? "" })));
+    },
+  });
+  return (
+    <Card>
+      <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>
+        <ConditionControls
+          ariaLabel="เลือกเงื่อนไขกลุ่มดาว"
+          items={groups}
+          activeIndex={activeConstellationGroupIndex}
+          onActiveIndexChange={setActiveConstellationGroupIndex}
+          onRename={setRenamingConstellationGroupIndex}
+          onReorder={(from, to) => {
+            const reordered = reorderConditions(groups, activeConstellationGroupIndex, from, to);
+            setGroups(reordered.items);
+            setActiveConstellationGroupIndex(reordered.activeIndex);
+          }}
+          onAdd={(details) => {
+            setGroups([
+              ...groups,
+              {
+                clientId: createClientId("constellation-condition"),
+                ...details,
+                note: DEFAULT_CONSTELLATION_CONDITION_NOTE,
+                rows: makeRows(),
+              },
+            ]);
+            setActiveConstellationGroupIndex(groups.length);
+          }}
+          onDelete={() => {
+            setGroups(groups.filter((_, index) => index !== activeConstellationGroupIndex));
+            setActiveConstellationGroupIndex(Math.max(0, activeConstellationGroupIndex - 1));
+          }}
+        />
+        <ConditionRenameDialog
+          open={renamingConstellationGroupIndex !== null}
+          fallback={`Condition ${(renamingConstellationGroupIndex ?? 0) + 1}`}
+          value={renamingConstellationGroupIndex === null ? "" : groups[renamingConstellationGroupIndex]?.name ?? ""}
+          iconUrl={renamingConstellationGroupIndex === null ? null : groups[renamingConstellationGroupIndex]?.iconUrl ?? null}
+          onOpenChange={(open) => { if (!open) setRenamingConstellationGroupIndex(null); }}
+          onChange={(name) => setGroups(groups.map((group, index) => index === renamingConstellationGroupIndex ? { ...group, name } : group))}
+          onIconChange={(icon) => setGroups(groups.map((group, index) => index === renamingConstellationGroupIndex ? { ...group, ...icon } : group))}
+        />
+        {groups[activeConstellationGroupIndex] ? [groups[activeConstellationGroupIndex]].map((group) => {
+          const groupIndex = activeConstellationGroupIndex;
+          return (
+          <Card key={group.clientId} size="sm">
+            <CardHeader>
+              <CardTitle>Condition {groupIndex + 1}</CardTitle>
+              <CardDescription>
+                ใช้ note เพื่ออธิบายอาวุธ ทีม หรือเงื่อนไขที่ใช้เปรียบเทียบ
+              </CardDescription>
+            </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"
+                    className={cn(
+                      constellationIssue("groups", groupIndex, "rows", rowIndex) && "border-destructive",
+                    )}
+                  >
+                    <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 className="whitespace-pre-line">
+                        <LunarisText nodes={row.descriptionNodes} fallback={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}
+                          aria-invalid={constellationIssue("groups", groupIndex, "rows", rowIndex, "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>
+        );}) : null}
+      </CardContent>
+      <CardFooter className="justify-end">
+        <AutosaveStatus
+          state={autosave.state}
+          conflictVersion={autosave.conflictVersion}
+          canOverwrite={autosave.canOverwrite}
+          onReloadLatest={autosave.reloadLatest}
+          onOverwrite={autosave.overwrite}
+          issues={
+            validation.success
+              ? []
+              : formatGuideValidationIssues(
+                  "constellations",
+                  validation.error.issues,
+                )
+          }
+          onSave={autosave.saveNow}
+        />
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/components/admin/editors/extra-editor.tsx b/components/admin/editors/extra-editor.tsx
new file mode 100644
index 0000000..a36736a
--- /dev/null
+++ b/components/admin/editors/extra-editor.tsx
@@ -0,0 +1,915 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import Image from "@/components/ui/resilient-image";
+import { useRouter } from "next/navigation";
+import { GripVerticalIcon, PlusIcon, RefreshCcwIcon, Trash2Icon, XIcon } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { toast } from "sonner";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
+import { arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { deleteGuideExtra, saveGuideExtra } from "@/app/admin/actions";
+import { AutosaveStatus } from "@/components/admin/autosave-status";
+import { DeleteConfirmationDialog } from "@/components/admin/ui/delete-confirmation-dialog";
+import { CatalogDropdown } from "@/components/admin/ui/catalog-select";
+import { MediaUploader } from "@/components/admin/media-uploader";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { ColorPicker, ColorPickerEyeDropper, ColorPickerHue, ColorPickerSelection } from "@/components/ui/color-picker";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet } from "@/components/ui/field";
+import { ClearableInput as Input } from "@/components/admin/ui/clearable-input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useAutosave } from "@/hooks/use-autosave";
+import { adminDraftKey } from "@/lib/editor/local-draft";
+import { extraSectionSchema } from "@/lib/guides/schemas";
+import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { finalizePercentInput, normalizePercentInput } from "@/lib/guides/percent-input";
+import { formatGuideValidationIssues } from "@/lib/guides/validation-messages";
+import { normalizeExtraRichText } from "@/lib/rich-text";
+import { createExtraSheet } from "@/lib/guides/extra-sheet";
+import { cn } from "@/lib/utils";
+import { type ExtraCatalogItem, type CatalogItem, type EditorBase, hasIssuePrefix, parseEditorDraft, createClientId } from "./shared";
+
+export const DEFAULT_EXTRA_BACKGROUND_COLOR = "#24232C";
+
+export const RichTextEditor = dynamic(
+  () => import("@/components/rich-text-editor").then((module) => module.RichTextEditor),
+  {
+    ssr: false,
+    loading: () => <Skeleton className="h-36 w-full" />,
+  },
+);
+
+export const ExtraSheetEditor = dynamic(
+  () => import("@/components/admin/extra-sheet-editor").then((module) => module.ExtraSheetEditor),
+  {
+    ssr: false,
+    loading: () => <Skeleton className="h-48 w-full" />,
+  },
+);
+
+
+export function SortableExtraItem({
+  id,
+  label,
+  children,
+}: {
+  id: string;
+  label: string;
+  children: (dragHandle: ReactNode) => ReactNode;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn(isDragging && "opacity-60")}
+    >
+      {children(
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          className="touch-none"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVerticalIcon />
+          <span className="sr-only">{label}</span>
+        </Button>,
+      )}
+    </div>
+  );
+}
+
+
+export function ExtraCatalogItemsEditor({
+  value,
+  characters,
+  weapons,
+  artifacts,
+  onChange,
+}: {
+  value: ExtraCatalogItem[];
+  characters: CatalogItem[];
+  weapons: CatalogItem[];
+  artifacts: CatalogItem[];
+  onChange: (value: ExtraCatalogItem[]) => void;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+  const [kind, setKind] = useState<ExtraCatalogItem["kind"]>("character");
+  const [key, setKey] = useState("");
+  const catalogs = { character: characters, weapon: weapons, artifact: artifacts };
+  const labels = { character: "ตัวละคร", weapon: "อาวุธ", artifact: "อาร์ติแฟกต์" };
+  const items = catalogs[kind];
+  const itemId = (item: ExtraCatalogItem) => `${item.kind}:${item.key}`;
+  const handleDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return;
+    const from = value.findIndex((item) => itemId(item) === active.id);
+    const to = value.findIndex((item) => itemId(item) === over.id);
+    if (from !== -1 && to !== -1) onChange(arrayMove(value, from, to));
+  };
+
+  return (
+    <Field>
+      <FieldLabel>ตัวละคร อาวุธ และอาร์ติแฟกต์</FieldLabel>
+      <div className="flex flex-col gap-3">
+        {value.length ? (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={value.map(itemId)}
+              strategy={rectSortingStrategy}
+            >
+              <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+                {value.map((reference, index) => {
+                  const item = catalogs[reference.kind].find(
+                    (candidate) => candidate.key === reference.key,
+                  );
+                  const label = item?.name ?? reference.key;
+                  return (
+                    <SortableExtraItem
+                      key={itemId(reference)}
+                      id={itemId(reference)}
+                      label={`ลากเพื่อจัดลำดับ ${label}`}
+                    >
+                      {(dragHandle) => (
+                        <Card size="sm">
+                          <CardContent className="flex items-center gap-3">
+                            {item ? (
+                              <div className={cn("relative size-12 shrink-0 overflow-hidden rounded-md", rarityGradientClass(item.rarity))}>
+                                <Image src={item.imageUrl} alt="" fill sizes="48px" className="object-contain" />
+                              </div>
+                            ) : null}
+                            <div className="min-w-0 flex-1">
+                              <p className="truncate font-medium">{label}</p>
+                              <p className="text-sm text-muted-foreground">{labels[reference.kind]}</p>
+                            </div>
+                            {dragHandle}
+                            <Button type="button" variant="ghost" size="icon-sm" onClick={() => onChange(value.filter((_, itemIndex) => itemIndex !== index))} aria-label={`ลบ ${label}`}>
+                              <XIcon />
+                            </Button>
+                          </CardContent>
+                        </Card>
+                      )}
+                    </SortableExtraItem>
+                  );
+                })}
+              </div>
+            </SortableContext>
+          </DndContext>
+        ) : null}
+        <div className="flex flex-wrap items-center gap-2">
+          <Select value={kind} onValueChange={(next) => { setKind(next as ExtraCatalogItem["kind"]); setKey(""); }}>
+            <SelectTrigger className="w-40"><SelectValue /></SelectTrigger>
+            <SelectContent><SelectGroup>
+              <SelectItem value="character">ตัวละคร</SelectItem>
+              <SelectItem value="weapon">อาวุธ</SelectItem>
+              <SelectItem value="artifact">อาร์ติแฟกต์</SelectItem>
+            </SelectGroup></SelectContent>
+          </Select>
+          <div className="min-w-64 flex-1">
+            <CatalogDropdown
+              items={items}
+              value={key}
+              onValueChange={(nextKey) => {
+                if (
+                  nextKey &&
+                  !value.some(
+                    (item) => item.kind === kind && item.key === nextKey,
+                  )
+                ) {
+                  onChange([...value, { kind, key: nextKey }]);
+                }
+                setKey("");
+              }}
+              placeholder={`เลือก${labels[kind]}`}
+              showSelectedImage
+              rarityBackground
+              characterBackground={kind === "character"}
+            />
+          </div>
+        </div>
+      </div>
+    </Field>
+  );
+}
+
+
+export function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, artifacts }: EditorBase) {
+  const router = useRouter();
+  const sectionId = extraSectionId ?? initial.extras[0]?.id ?? "";
+  const extraSensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+  const [sections, setSections] = useState(() =>
+    initial.extras.map((section) => ({
+      ...section,
+      clientId: section.id,
+      rows: section.rows.map((row) => ({
+        ...row,
+        body: normalizeExtraRichText(row.body, row.highlights),
+        highlights: [],
+        clientId: row.id,
+      })),
+    })),
+  );
+  const [openRowIds, setOpenRowIds] = useState(() =>
+    initial.extras.flatMap((section) => section.rows.map((row) => row.id)),
+  );
+  const value = {
+    sections: sections.map((section) => ({
+      title: section.title,
+      rows: section.rows.map((row) => ({
+        mediaId: row.mediaId,
+        heading: row.heading,
+        body: row.body,
+        percent:
+          row.percent === null || row.percent === ""
+            ? null
+            : Number(row.percent),
+        backgroundColor: row.backgroundColor,
+        textColor: row.textColor,
+        sheet: row.sheet,
+        catalogItems: row.catalogItems,
+        highlights: [],
+      })),
+    })),
+  };
+  const validation = extraSectionSchema.safeParse({
+    ...value,
+    expectedVersion: guide.version,
+  });
+  const extraIssue = (...path: (string | number)[]) =>
+    !validation.success && hasIssuePrefix(validation.error.issues, ...path);
+  const localDraft = { sections };
+  const autosave = useAutosave({
+    guideId: guide.id,
+    scope: `extra:${sectionId}`,
+    value,
+    valid: validation.success,
+    initialVersion: guide.version,
+    persist: (next, expectedVersion, intent) =>
+      saveGuideExtra(guide.id, sectionId, {
+        section: next.sections[0],
+        expectedVersion,
+      }, intent),
+    storageKey: adminDraftKey(guide.id, `extra:${sectionId}`),
+    localDraft,
+    parseLocalDraft: (candidate) =>
+      parseEditorDraft<typeof localDraft>(candidate, ["sections"]),
+    restoreLocalDraft: (draft) => {
+      const restoredSections = draft.sections.map((section) => ({
+        ...section,
+        id: section.id || createClientId("extra-section-record"),
+        clientId: section.clientId || createClientId("extra-section"),
+        rows: section.rows.map((row) => ({
+          ...row,
+          id: row.id || createClientId("extra-row-record"),
+          body: normalizeExtraRichText(row.body, row.highlights ?? []),
+          backgroundColor: row.backgroundColor ?? null,
+          textColor: row.textColor ?? null,
+          sheet: row.sheet ?? null,
+          catalogItems: row.catalogItems ?? [],
+          highlights: [],
+          clientId: row.clientId || createClientId("extra-row"),
+        })),
+      }));
+      setSections(restoredSections);
+      setOpenRowIds(
+        restoredSections.flatMap((section) =>
+          section.rows.map((row) => row.clientId),
+        ),
+      );
+    },
+  });
+  const handleRowDragEnd = (sectionId: string, { active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return;
+    setSections((current) => current.map((section) => {
+      if (section.clientId !== sectionId) return section;
+      const from = section.rows.findIndex((row) => row.clientId === active.id);
+      const to = section.rows.findIndex((row) => row.clientId === over.id);
+      return from === -1 || to === -1
+        ? section
+        : { ...section, rows: arrayMove(section.rows, from, to) };
+    }));
+  };
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{sections[0]?.title ?? "Extra section"}</CardTitle>
+        <CardDescription>
+          เพิ่มส่วนเสริมแบบภาพ หัวข้อ ข้อความที่จัดรูปแบบได้ และเปอร์เซ็นต์
+          ระบบจะบันทึกอัตโนมัติ
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-5">
+        {sections.map((section, sectionIndex) => (
+          <Card
+            key={section.clientId}
+            size="sm"
+            className={cn(
+              extraIssue("sections", sectionIndex, "title") && "border-destructive",
+            )}
+          >
+            <CardHeader>
+              <CardTitle>
+                <Input
+                  value={section.title}
+                  aria-label="ชื่อ Extra section"
+                  aria-invalid={extraIssue("sections", sectionIndex, "title")}
+                  onChange={(event) =>
+                    setSections(
+                      sections.map((item, index) =>
+                        index === sectionIndex
+                          ? { ...item, title: event.target.value }
+                          : item,
+                      ),
+                    )
+                  }
+                />
+              </CardTitle>
+              <CardAction className="flex items-center gap-1">
+                <DeleteConfirmationDialog
+                  trigger={
+                    <Button type="button" variant="ghost" size="icon-sm" />
+                  }
+                  title={`ลบ ${section.title || `Extra section ${sectionIndex + 1}`}?`}
+                  description="แถว ข้อความ รูปภาพ และเปอร์เซ็นต์ทั้งหมดในส่วนนี้จะถูกลบออกจาก Guide"
+                  showSuccessToast={false}
+                  onConfirm={async () => {
+                    const result = await deleteGuideExtra(guide.id, section.id);
+                    if (result.status !== "saved") {
+                      toast.error(result.message);
+                      return;
+                    }
+                    window.localStorage.removeItem(adminDraftKey(guide.id, `extra:${section.id}`));
+                    toast.success("ลบ Extra แล้ว");
+                    router.push(`/admin/${guide.characterKey}`);
+                    router.refresh();
+                  }}
+                >
+                  <Trash2Icon />
+                  <span className="sr-only">ลบส่วน</span>
+                </DeleteConfirmationDialog>
+              </CardAction>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-4">
+              <DndContext
+                sensors={extraSensors}
+                collisionDetection={closestCenter}
+                onDragEnd={(event) => handleRowDragEnd(section.clientId, event)}
+              >
+                <SortableContext
+                  items={section.rows.map((row) => row.clientId)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <Accordion
+                    multiple
+                    value={openRowIds}
+                    onValueChange={setOpenRowIds}
+                    className="gap-4"
+                  >
+                  {section.rows.map((row, rowIndex) => (
+                    <SortableExtraItem
+                      key={row.clientId}
+                      id={row.clientId}
+                      label={`ลากเพื่อจัดลำดับ ${row.heading || `แถว ${rowIndex + 1}`}`}
+                    >
+                      {(rowDragHandle) => (
+                <AccordionItem value={row.clientId} className="border-0">
+                <Card
+                  size="sm"
+                  className={cn(
+                    extraIssue("sections", sectionIndex, "rows", rowIndex) &&
+                      "border-destructive",
+                  )}
+                >
+                  <CardHeader>
+                    <CardTitle>
+                      {row.heading || `แถว ${rowIndex + 1}`}
+                    </CardTitle>
+                    <CardAction className="flex items-center gap-1">
+                      {rowDragHandle}
+                      <DeleteConfirmationDialog
+                        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,
+                            ),
+                          )
+                        }
+                      >
+                        <Trash2Icon />
+                        <span className="sr-only">ลบแถว</span>
+                      </DeleteConfirmationDialog>
+                      <AccordionTrigger
+                        className="size-8 flex-none items-center justify-center p-0 hover:no-underline"
+                        headerClassName="flex-none"
+                        aria-label={`${openRowIds.includes(row.clientId) ? "ซ่อน" : "แสดง"} ${row.heading || `แถว ${rowIndex + 1}`}`}
+                        title={openRowIds.includes(row.clientId) ? "ซ่อนส่วนนี้" : "แสดงส่วนนี้"}
+                      />
+                    </CardAction>
+                  </CardHeader>
+                  <AccordionContent className="pb-0">
+                  <CardContent>
+                    <FieldGroup>
+                      {row.imageUrl ? (
+                        <div
+                          className="relative overflow-hidden rounded-lg border"
+                          style={{
+                            aspectRatio:
+                              row.imageWidth && row.imageHeight
+                                ? `${row.imageWidth} / ${row.imageHeight}`
+                                : "16 / 9",
+                          }}
+                        >
+                          <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="ลบภาพ"
+                              />
+                            }
+                            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,
+                                                  imageWidth: null,
+                                                  imageHeight: 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,
+                                            imageWidth: asset.width,
+                                            imageHeight: asset.height,
+                                          }
+                                        : candidate,
+                                    ),
+                                  }
+                                : item,
+                            ),
+                          )
+                        }
+                      />
+                      <ExtraCatalogItemsEditor
+                        value={row.catalogItems}
+                        characters={characters}
+                        weapons={weapons}
+                        artifacts={artifacts}
+                        onChange={(catalogItems) =>
+                          setSections(
+                            sections.map((item, index) =>
+                              index === sectionIndex
+                                ? {
+                                    ...item,
+                                    rows: item.rows.map((candidate, inner) =>
+                                      inner === rowIndex
+                                        ? { ...candidate, catalogItems }
+                                        : candidate,
+                                    ),
+                                  }
+                                : item,
+                            ),
+                          )
+                        }
+                      />
+                      <Field>
+                        <FieldLabel>หัวข้อ</FieldLabel>
+                        <Input
+                          value={row.heading}
+                          aria-invalid={extraIssue(
+                            "sections",
+                            sectionIndex,
+                            "rows",
+                            rowIndex,
+                            "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>
+                        <RichTextEditor
+                          value={row.body}
+                          showBubbleMenu={false}
+                          invalid={extraIssue(
+                            "sections",
+                            sectionIndex,
+                            "rows",
+                            rowIndex,
+                            "body",
+                          )}
+                          onChange={(body) =>
+                            setSections(
+                              sections.map((item, index) =>
+                                index === sectionIndex
+                                  ? {
+                                      ...item,
+                                      rows: item.rows.map((candidate, inner) =>
+                                        inner === rowIndex
+                                          ? {
+                                              ...candidate,
+                                              body,
+                                              highlights: [],
+                                            }
+                                          : candidate,
+                                      ),
+                                    }
+                                  : item,
+                              ),
+                            )
+                          }
+                        />
+                      </Field>
+                      <Field>
+                        <FieldLabel>ตารางข้อมูล (optional)</FieldLabel>
+                        {row.sheet ? (
+                          <ExtraSheetEditor
+                            value={row.sheet}
+                            createId={createClientId}
+                            onChange={(sheet) =>
+                              setSections(
+                                sections.map((item, index) =>
+                                  index === sectionIndex
+                                    ? {
+                                        ...item,
+                                        rows: item.rows.map((candidate, inner) =>
+                                          inner === rowIndex
+                                            ? { ...candidate, sheet }
+                                            : candidate,
+                                        ),
+                                      }
+                                    : item,
+                                ),
+                              )
+                            }
+                            onRemove={() =>
+                              setSections(
+                                sections.map((item, index) =>
+                                  index === sectionIndex
+                                    ? {
+                                        ...item,
+                                        rows: item.rows.map((candidate, inner) =>
+                                          inner === rowIndex
+                                            ? { ...candidate, sheet: null }
+                                            : candidate,
+                                        ),
+                                      }
+                                    : item,
+                                ),
+                              )
+                            }
+                          />
+                        ) : (
+                          <Button
+                            type="button"
+                            variant="outline"
+                            onClick={() =>
+                              setSections(
+                                sections.map((item, index) =>
+                                  index === sectionIndex
+                                    ? {
+                                        ...item,
+                                        rows: item.rows.map((candidate, inner) =>
+                                          inner === rowIndex
+                                            ? { ...candidate, sheet: createExtraSheet(createClientId) }
+                                            : candidate,
+                                        ),
+                                      }
+                                    : item,
+                                ),
+                              )
+                            }
+                          >
+                            <PlusIcon data-icon="inline-start" />
+                            เพิ่มตาราง 4 × 6
+                          </Button>
+                        )}
+                      </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>
+                      <FieldSet>
+                        <FieldLegend>สีพื้นหลังการ์ด (optional)</FieldLegend>
+                        <FieldDescription>
+                          สีจะใช้เฉพาะการ์ดนี้บนหน้า Guide
+                        </FieldDescription>
+                        <Field
+                          data-invalid={extraIssue(
+                            "sections",
+                            sectionIndex,
+                            "rows",
+                            rowIndex,
+                            "backgroundColor",
+                          ) || undefined}
+                        >
+                          <FieldLabel>สีพื้นหลัง</FieldLabel>
+                          <Popover>
+                            <PopoverTrigger
+                              render={
+                                <Button
+                                  type="button"
+                                  variant="outline"
+                                  size="icon"
+                                  aria-label="เลือกสีพื้นหลังการ์ด"
+                                  aria-invalid={extraIssue(
+                                    "sections",
+                                    sectionIndex,
+                                    "rows",
+                                    rowIndex,
+                                    "backgroundColor",
+                                  )}
+                                >
+                                  <span
+                                    className="size-5 rounded-sm border"
+                                    style={{
+                                      backgroundColor:
+                                        row.backgroundColor ?? DEFAULT_EXTRA_BACKGROUND_COLOR,
+                                    }}
+                                  />
+                                </Button>
+                              }
+                            />
+                            <PopoverContent align="start" className="w-64">
+                              <ColorPicker
+                                value={row.backgroundColor ?? DEFAULT_EXTRA_BACKGROUND_COLOR}
+                                className="h-auto"
+                                onChange={(color) => {
+                                  if (!Array.isArray(color)) return;
+                                  const backgroundColor = `#${color
+                                    .slice(0, 3)
+                                    .map((channel) =>
+                                      Math.round(channel).toString(16).padStart(2, "0"),
+                                    )
+                                    .join("")}`.toUpperCase();
+                                  setSections(
+                                    sections.map((item, index) =>
+                                      index === sectionIndex
+                                        ? {
+                                            ...item,
+                                            rows: item.rows.map((candidate, inner) =>
+                                              inner === rowIndex
+                                                ? { ...candidate, backgroundColor }
+                                                : candidate,
+                                            ),
+                                          }
+                                        : item,
+                                    ),
+                                  );
+                                }}
+                              >
+                                <ColorPickerSelection className="h-32" />
+                                <ColorPickerHue />
+                                <ColorPickerEyeDropper aria-label="ดูดสีจากหน้าจอ" />
+                              </ColorPicker>
+                            </PopoverContent>
+                          </Popover>
+                        </Field>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          disabled={row.backgroundColor === null}
+                          onClick={() =>
+                            setSections(
+                              sections.map((item, index) =>
+                                index === sectionIndex
+                                  ? {
+                                      ...item,
+                                      rows: item.rows.map((candidate, inner) =>
+                                        inner === rowIndex
+                                          ? { ...candidate, backgroundColor: null }
+                                          : candidate,
+                                      ),
+                                    }
+                                  : item,
+                              ),
+                            )
+                          }
+                        >
+                          <RefreshCcwIcon data-icon="inline-start" />
+                          ใช้สีตามธีม
+                        </Button>
+                      </FieldSet>
+                    </FieldGroup>
+                  </CardContent>
+                  </AccordionContent>
+                </Card>
+                </AccordionItem>
+                      )}
+                    </SortableExtraItem>
+                  ))}
+                  </Accordion>
+                </SortableContext>
+              </DndContext>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  const clientId = createClientId("extra-row");
+                  setOpenRowIds((current) => [...current, clientId]);
+                  setSections(
+                    sections.map((item, index) =>
+                      index === sectionIndex
+                        ? {
+                            ...item,
+                            rows: [
+                              ...item.rows,
+                              {
+                                id: createClientId("extra-row-record"),
+                                mediaId: null,
+                                imageUrl: null,
+                                imageWidth: null,
+                                imageHeight: null,
+                                heading: "",
+                                body: "",
+                                percent: null,
+                                backgroundColor: null,
+                                textColor: null,
+                                sheet: null,
+                                catalogItems: [],
+                                highlights: [],
+                                clientId,
+                              },
+                            ],
+                          }
+                      : item,
+                    ),
+                  );
+                }}
+              >
+                <PlusIcon data-icon="inline-start" />
+                เพิ่มแถว
+              </Button>
+            </CardContent>
+          </Card>
+        ))}
+      </CardContent>
+      <CardFooter className="flex-wrap justify-end gap-3">
+        <AutosaveStatus
+          state={autosave.state}
+          conflictVersion={autosave.conflictVersion}
+          canOverwrite={autosave.canOverwrite}
+          onReloadLatest={autosave.reloadLatest}
+          onOverwrite={autosave.overwrite}
+          issues={
+            validation.success
+              ? []
+              : formatGuideValidationIssues("extra", validation.error.issues)
+          }
+          onSave={autosave.saveNow}
+        />
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/components/admin/editors/shared.tsx b/components/admin/editors/shared.tsx
new file mode 100644
index 0000000..5964487
--- /dev/null
+++ b/components/admin/editors/shared.tsx
@@ -0,0 +1,530 @@
+"use client";
+
+import Image from "@/components/ui/resilient-image";
+import { CopyIcon, GripVerticalIcon, PencilIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import { useState, type ComponentProps } from "react";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { DeleteConfirmationDialog } from "@/components/admin/ui/delete-confirmation-dialog";
+import { MediaUploader } from "@/components/admin/media-uploader";
+import { ConditionTabIcon } from "@/components/public/condition-switcher";
+import { ScrollableNav } from "@/components/public/scrollable-nav";
+import { SimpleTooltip } from "@/components/tooltip";
+import type { CatalogTextNode } from "@/lib/catalog/lunaris";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { ClearableInput as Input } from "@/components/admin/ui/clearable-input";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { type TalentPriority } from "@/lib/guides/talents";
+import { type ExtraSheet } from "@/lib/guides/extra-sheet";
+import { cn } from "@/lib/utils";
+
+
+export type CatalogItem = {
+  key: string;
+  name: string;
+  aliases?: string[];
+  imageUrl: string;
+  rarity?: number | null;
+  weaponType?: string | null;
+  element?: string | null;
+  elementIconUrl?: string | null;
+};
+
+export type ExtraCatalogItem = {
+  kind: "character" | "weapon" | "artifact";
+  key: string;
+};
+
+export type Guide = {
+  id: string;
+  characterKey: string;
+  version: number;
+  name: string;
+};
+
+export type WeaponValue = {
+  id: string;
+  weaponKey: string;
+  refinement: string;
+  overallPercent: string | null;
+  personalPercent: string | null;
+  note: string | null;
+  weapon: CatalogItem;
+};
+
+export type WeaponGroupValue = {
+  id: string;
+  name: string | null;
+  note: string | null;
+  iconMediaId: string | null;
+  iconUrl: string | null;
+  rows: WeaponValue[];
+};
+
+export type ArtifactTierValue = {
+  id: string;
+  name: string;
+  rows: Array<{
+    firstArtifactKey: string;
+    secondArtifactKey: string | null;
+    percent: string;
+    note: string | null;
+  }>;
+};
+
+export type ArtifactValue = {
+  id: string;
+  name: string | null;
+  note: string | null;
+  iconMediaId: string | null;
+  iconUrl: string | null;
+  tiers: ArtifactTierValue[];
+};
+
+export type ArtifactProfile = {
+  sands: string[];
+  goblet: string[];
+  circlet: string[];
+  substats: string[];
+  recommendedConditions: Array<{
+    name?: string | null;
+    note: string | null;
+    iconMediaId: string | null;
+    iconUrl: string | null;
+    sands: string[];
+    goblet: string[];
+    circlet: string[];
+    substats: string[];
+  }>;
+  targets: Array<{ stat: string; value: string }>;
+  targetConditions: Array<{
+    name?: string | null;
+    note: string | null;
+    iconMediaId: string | null;
+    iconUrl: string | null;
+    rows: Array<{ stat: string; value: string }>;
+  }>;
+  talents: TalentPriority[];
+  note: string | null;
+} | null;
+
+export type ConstellationValue = {
+  level: number;
+  detail: string;
+  cumulativePercent: string;
+  isGreat: boolean;
+};
+
+export type ConstellationGroupValue = {
+  id: string;
+  name: string | null;
+  note: string | null;
+  iconMediaId: string | null;
+  iconUrl: string | null;
+  rows: ConstellationValue[];
+};
+
+export type CatalogConstellation = {
+  level: number;
+  name: string;
+  description: string;
+  descriptionNodes?: CatalogTextNode[];
+  iconUrl: string | null;
+};
+
+export type CatalogTalent = {
+  type: "NA" | "E" | "Q";
+  name: string;
+  iconUrl: string | null;
+};
+
+export type TeamValue = {
+  id: string;
+  title: string;
+  rotationSeconds: string;
+  combo: string;
+  members: Array<{
+    characterKey: string;
+    weaponKey: string | null;
+    artifactKey: string | null;
+    secondArtifactKey: string | null;
+    constellation: string;
+    refinement: string;
+    damage: string;
+  }>;
+};
+
+export type TeamGroupValue = {
+  id: string;
+  name: string | null;
+  note: string | null;
+  iconMediaId: string | null;
+  iconUrl: string | null;
+  teams: TeamValue[];
+};
+
+
+export let clientIdCounter = 0;
+
+
+export function createClientId(prefix: string): string {
+  const browserCrypto = globalThis.crypto;
+  if (typeof browserCrypto?.randomUUID === "function")
+    return `${prefix}-${browserCrypto.randomUUID()}`;
+  clientIdCounter += 1;
+  return `${prefix}-${Date.now()}-${clientIdCounter}`;
+}
+
+
+export function ConditionRenameDialog({
+  open,
+  fallback,
+  value,
+  iconUrl,
+  onOpenChange,
+  onChange,
+  onIconChange,
+}: {
+  open: boolean;
+  fallback: string;
+  value: string;
+  iconUrl: string | null;
+  onOpenChange: (open: boolean) => void;
+  onChange: (value: string) => void;
+  onIconChange: (icon: { iconMediaId: string | null; iconUrl: string | null }) => void;
+}) {
+  const [uploading, setUploading] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={(next) => { if (!uploading) onOpenChange(next); }}>
+      <DialogContent showCloseButton={!uploading}>
+        <DialogHeader>
+          <DialogTitle>Edit condition</DialogTitle>
+          <DialogDescription>
+            Leave blank to use {fallback}.
+          </DialogDescription>
+        </DialogHeader>
+        <Field>
+          <FieldLabel htmlFor="condition-name">Condition name</FieldLabel>
+          <Input
+            id="condition-name"
+            autoFocus
+            maxLength={120}
+            placeholder={fallback}
+            value={value}
+            onChange={(event) => onChange(event.target.value)}
+          />
+        </Field>
+        <ConditionIconField iconUrl={iconUrl} onChange={onIconChange} onUploadingChange={setUploading} />
+        <DialogFooter>
+          <Button type="button" disabled={uploading} onClick={() => onOpenChange(false)}>Done</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+
+export function ConditionIconField({ iconUrl, onChange, onUploadingChange }: {
+  iconUrl: string | null;
+  onChange: (icon: { iconMediaId: string | null; iconUrl: string | null }) => void;
+  onUploadingChange?: (uploading: boolean) => void;
+}) {
+  return <div className="flex flex-col gap-3">
+    {iconUrl ? <div className="flex items-center gap-3">
+      <Image src={iconUrl} alt="" width={40} height={40} className="size-10 object-contain" />
+      <Button type="button" variant="outline" size="sm" onClick={() => onChange({ iconMediaId: null, iconUrl: null })}>Remove icon</Button>
+    </div> : null}
+    <MediaUploader onReady={(asset) => onChange({ iconMediaId: asset.id, iconUrl: asset.url })} onUploadingChange={onUploadingChange} />
+  </div>;
+}
+
+
+export 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;
+  if (stringKeys.some((key) => typeof record[key] !== "string")) return null;
+  return value as Draft;
+}
+
+
+export function hasIssuePrefix(
+  issues: readonly { path: readonly PropertyKey[] }[],
+  ...path: (string | number)[]
+): boolean {
+  return issues.some((issue) => path.every((part, index) => issue.path[index] === part));
+}
+
+
+export interface GuideSectionEditorProps {
+  section: "weapon" | "artifact" | "constellations" | "team" | "extra";
+  extraSectionId?: string;
+  guide: Guide;
+  weapons: CatalogItem[];
+  artifacts: CatalogItem[];
+  characters: CatalogItem[];
+  catalogConstellations: CatalogConstellation[];
+  catalogTalents: CatalogTalent[];
+  initial: {
+    sectionNote: string | null;
+    weaponGroups: WeaponGroupValue[];
+    artifactGroups: ArtifactValue[];
+    artifactProfile: ArtifactProfile;
+    constellationGroups: ConstellationGroupValue[];
+    teams: TeamValue[];
+    teamGroups: TeamGroupValue[];
+    extras: Array<{
+      id: string;
+      title: string;
+      rows: Array<{
+        id: string;
+        mediaId: string | null;
+        heading: string;
+        body: string;
+        percent: string | null;
+        backgroundColor: string | null;
+        textColor: string | null;
+        sheet: ExtraSheet | null;
+        catalogItems: ExtraCatalogItem[];
+        highlights: Array<{ text: string; color: string }>;
+        imageUrl: string | null;
+        imageWidth: number | null;
+        imageHeight: number | null;
+      }>;
+    }>;
+  };
+}
+
+
+export const SELECTED_TOGGLE_CLASS =
+  "aria-pressed:border-primary aria-pressed:ring-2 aria-pressed:ring-primary/30";
+
+
+export type ConditionNavItem = {
+  clientId: string;
+  name: string;
+  iconMediaId: string | null;
+  iconUrl: string | null;
+};
+
+
+export function SortableConditionTab({
+  item,
+  index,
+  active,
+  onSelect,
+  onRename,
+}: {
+  item: ConditionNavItem;
+  index: number;
+  active: boolean;
+  onSelect: () => void;
+  onRename: () => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: item.clientId });
+  const label = item.name.trim() || `Condition ${index + 1}`;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn("flex shrink-0 items-center rounded-md", isDragging && "z-10 opacity-60")}
+    >
+      {index > 0 ? <Separator orientation="vertical" aria-hidden="true" className="mx-1 h-6" /> : null}
+      <TabsTrigger
+        value={item.clientId}
+        onClick={onSelect}
+        onDoubleClick={onRename}
+      >
+        <ConditionTabIcon iconUrl={item.iconUrl} />
+        <span className="text-base">{label}</span>
+        {index === 0 ? <Badge variant={active ? "secondary" : "outline"}>Default</Badge> : null}
+      </TabsTrigger>
+      <SimpleTooltip text={`ลากเพื่อจัดลำดับ ${label}`}>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          className="touch-none rounded-l-none"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVerticalIcon />
+          <span className="sr-only">ลากเพื่อจัดลำดับ {label}</span>
+        </Button>
+      </SimpleTooltip>
+    </div>
+  );
+}
+
+
+export function SortableConditionSwitcher({
+  ariaLabel,
+  items,
+  activeIndex,
+  onActiveIndexChange,
+  onReorder,
+  onRename,
+}: {
+  ariaLabel: string;
+  items: ConditionNavItem[];
+  activeIndex: number;
+  onActiveIndexChange: (index: number) => void;
+  onReorder: (from: number, to: number) => void;
+  onRename: (index: number) => void;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+  const activeId = items[activeIndex]?.clientId;
+
+  return (
+    <ScrollableNav ariaLabel={ariaLabel} className="min-w-0 flex-1">
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={({ active, over }) => {
+          if (!over || active.id === over.id) return;
+          const from = items.findIndex((item) => item.clientId === active.id);
+          const to = items.findIndex((item) => item.clientId === over.id);
+          if (from !== -1 && to !== -1) onReorder(from, to);
+        }}
+      >
+        <SortableContext items={items.map((item) => item.clientId)} strategy={rectSortingStrategy}>
+          <Tabs value={activeId} onValueChange={(value) => {
+            const index = items.findIndex((item) => item.clientId === value);
+            if (index !== -1) onActiveIndexChange(index);
+          }}>
+            <TabsList aria-label={ariaLabel} className="shrink-0 gap-1">
+              {items.map((item, index) => (
+                <SortableConditionTab
+                  key={item.clientId}
+                  item={item}
+                  index={index}
+                  active={item.clientId === activeId}
+                  onSelect={() => onActiveIndexChange(index)}
+                  onRename={() => onRename(index)}
+                />
+              ))}
+            </TabsList>
+          </Tabs>
+        </SortableContext>
+      </DndContext>
+    </ScrollableNav>
+  );
+}
+
+
+export function ConditionControls({
+  onAdd,
+  onDuplicate,
+  onDelete,
+  ...switcherProps
+}: ComponentProps<typeof SortableConditionSwitcher> & {
+  onAdd: (details: { name: string; iconMediaId: string | null; iconUrl: string | null }) => void;
+  onDuplicate?: () => void;
+  onDelete: () => void;
+}) {
+  const { items, activeIndex } = switcherProps;
+  const atLimit = items.length >= 20;
+  const [createOpen, setCreateOpen] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [newIcon, setNewIcon] = useState<{ iconMediaId: string | null; iconUrl: string | null }>({ iconMediaId: null, iconUrl: null });
+  const [uploading, setUploading] = useState(false);
+  const closeCreate = () => {
+    if (uploading) return;
+    setCreateOpen(false);
+    setNewName("");
+    setNewIcon({ iconMediaId: null, iconUrl: null });
+  };
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      <SortableConditionSwitcher {...switcherProps} />
+      <SimpleTooltip text="เพิ่ม Condition">
+        <Button type="button" size="icon" variant="outline" aria-label="เพิ่ม Condition" disabled={atLimit} onClick={() => setCreateOpen(true)}>
+          <PlusIcon />
+        </Button>
+      </SimpleTooltip>
+      <Dialog open={createOpen} onOpenChange={(open) => { if (open) setCreateOpen(true); else closeCreate(); }}>
+        <DialogContent showCloseButton={!uploading}>
+          <DialogHeader>
+            <DialogTitle>Create condition</DialogTitle>
+            <DialogDescription>Enter a name and optionally upload an icon.</DialogDescription>
+          </DialogHeader>
+          <Field>
+            <FieldLabel htmlFor="new-condition-name">Condition name</FieldLabel>
+            <Input id="new-condition-name" autoFocus maxLength={120} value={newName} onChange={(event) => setNewName(event.target.value)} />
+          </Field>
+          <ConditionIconField iconUrl={newIcon.iconUrl} onChange={setNewIcon} onUploadingChange={setUploading} />
+          <DialogFooter>
+            <Button type="button" variant="outline" disabled={uploading} onClick={closeCreate}>Cancel</Button>
+            <Button type="button" disabled={!newName.trim() || uploading} onClick={() => {
+              onAdd({ name: newName.trim(), ...newIcon });
+              closeCreate();
+            }}>Create</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <SimpleTooltip text="Edit Condition">
+        <Button type="button" size="icon" variant="outline" aria-label="Edit Condition" disabled={!items[activeIndex]} onClick={() => switcherProps.onRename(activeIndex)}>
+          <PencilIcon />
+        </Button>
+      </SimpleTooltip>
+      {onDuplicate ? (
+        <SimpleTooltip text="Duplicate Condition">
+          <Button type="button" size="icon" variant="outline" aria-label="Duplicate Condition" disabled={atLimit || !items[activeIndex]} onClick={onDuplicate}>
+            <CopyIcon />
+          </Button>
+        </SimpleTooltip>
+      ) : null}
+      {items.length > 1 ? (
+        <DeleteConfirmationDialog
+          trigger={<Button type="button" size="icon" variant="outline" aria-label="ลบ Condition นี้" />}
+          triggerTooltip="ลบ Condition นี้"
+          type="Condition"
+          description="ข้อมูลทั้งหมดใน Condition นี้จะถูกลบออก"
+          onConfirm={onDelete}
+        >
+          <Trash2Icon />
+          <span className="sr-only">ลบ Condition นี้</span>
+        </DeleteConfirmationDialog>
+      ) : null}
+    </div>
+  );
+}
+
+
+export function reorderConditions<T extends ConditionNavItem>(
+  items: T[],
+  activeIndex: number,
+  from: number,
+  to: number,
+) {
+  const activeId = items[activeIndex]?.clientId;
+  const reordered = arrayMove(items, from, to);
+  return {
+    items: reordered,
+    activeIndex: Math.max(0, reordered.findIndex((item) => item.clientId === activeId)),
+  };
+}
+
+
+export type EditorBase = GuideSectionEditorProps;
diff --git a/components/admin/editors/team-editor.tsx b/components/admin/editors/team-editor.tsx
new file mode 100644
index 0000000..f22434d
--- /dev/null
+++ b/components/admin/editors/team-editor.tsx
@@ -0,0 +1,1872 @@
+"use client";
+
+import { searchItems } from "@/lib/search";
+import Image from "@/components/ui/resilient-image";
+import { ArrowLeftIcon, BookOpenIcon, ClipboardCopyIcon, ClipboardPasteIcon, CopyIcon, GripVerticalIcon, MousePointerClickIcon, PlusIcon, SearchIcon, Trash2Icon, XIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState, type ReactNode, type SetStateAction } from "react";
+import { toast } from "sonner";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
+import { arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { listTeamImportGuides, listTeamImportsForCharacter, loadTeamImportGuide, saveTeamSection } from "@/app/admin/actions";
+import { AutosaveStatus } from "@/components/admin/autosave-status";
+import { DeleteConfirmationDialog } from "@/components/admin/ui/delete-confirmation-dialog";
+import { ArtifactSelect, CatalogDropdown, CharacterSelect, WeaponSelect } from "@/components/admin/ui/catalog-select";
+import { ConstellationSelect, RefinementSelect } from "@/components/admin/ui/option-select";
+import { ScrollableNav } from "@/components/public/scrollable-nav";
+import { TeamArtifactIcon } from "@/components/public/team-search";
+import { SimpleTooltip } from "@/components/tooltip";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+import { Field, FieldGroup, FieldLabel, FieldLegend, FieldSet } from "@/components/ui/field";
+import { ClearableInput as Input } from "@/components/admin/ui/clearable-input";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { useAutosave } from "@/hooks/use-autosave";
+import { adminDraftKey } from "@/lib/editor/local-draft";
+import { teamSectionSchema } from "@/lib/guides/schemas";
+import { elementBackgroundColor } from "@/lib/catalog/element";
+import { supportsWeaponType } from "@/lib/catalog/lunaris";
+import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
+import { isCustomTravelerKey } from "@/lib/catalog/travelers";
+import { toTeamDraft } from "@/lib/guides/team-draft";
+import { applyPresetFields, applyTeamFields, cloneTeamImports, filterTeamImportsByName, findInvalidTeamCatalogReference, findUnsupportedTeamWeapon, limitPresets, parseTeamPresets, parseTeamTransfer, serializeTeamTransfer, teamConstellationLabel, teamRefinementLabel, teamTransferFileName, teamPresetCookieKey, teamPresetStorageKey, type TeamApplySelection, type TeamMemberApplyField, type TeamToolMember, type TeamPreset, type TeamToolValue } from "@/lib/guides/team-tools";
+import { searchTeams, type TeamSearchTarget } from "@/lib/guides/team-search";
+import { formatGuideValidationIssues } from "@/lib/guides/validation-messages";
+import { cn } from "@/lib/utils";
+import { type CatalogItem, type EditorBase, createClientId, parseEditorDraft, ConditionControls, reorderConditions, ConditionRenameDialog } from "./shared";
+
+export const teamSearchTargetLabels: Record<TeamSearchTarget, string> = {
+  all: "ทั้งหมด",
+  team: "ชื่อทีม",
+  character: "ตัวละคร",
+  weapon: "อาวุธ",
+  artifact: "อาร์ติแฟกต์",
+};
+
+export const teamMemberApplyOptions = [
+  ["characterKey", "Character"],
+  ["weaponKey", "Weapon"],
+  ["artifactKey", "Artifact 1"],
+  ["secondArtifactKey", "Artifact 2"],
+  ["constellation", "C"],
+  ["refinement", "R"],
+  ["damage", "Damage"],
+] as const satisfies readonly (readonly [TeamMemberApplyField, string])[];
+
+export const multipleApplyStorageKey = (guideId: string) =>
+  `buzz-sheet:team-multiple-apply:${guideId}`;
+
+
+export function SortableTeamItem({
+  id,
+  children,
+}: {
+  id: string;
+  children: (dragHandle: ReactNode) => ReactNode;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn("min-w-0", isDragging && "opacity-60")}
+    >
+      {children(
+        <SimpleTooltip text="ลากเพื่อจัดลำดับ Team">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="touch-none"
+            {...attributes}
+            {...listeners}
+          >
+            <GripVerticalIcon />
+            <span className="sr-only">ลากเพื่อจัดลำดับ Team</span>
+          </Button>
+        </SimpleTooltip>,
+      )}
+    </div>
+  );
+}
+
+
+export function SortableTeamMember({
+  id,
+  children,
+}: {
+  id: string;
+  children: (dragHandle: ReactNode) => ReactNode;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn(isDragging && "opacity-60")}
+    >
+      {children(
+        <SimpleTooltip text="ลากเพื่อย้ายตำแหน่งตัวละคร">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="touch-none"
+            {...attributes}
+            {...listeners}
+          >
+            <GripVerticalIcon />
+            <span className="sr-only">ลากเพื่อย้ายตำแหน่งตัวละคร</span>
+          </Button>
+        </SimpleTooltip>,
+      )}
+    </div>
+  );
+}
+
+
+export type TeamImportGuide = {
+  id: string;
+  name: string;
+  groups: Array<{
+    id: string;
+    name: string | null;
+    teams: Array<{
+      id: string;
+      title: string;
+      rotationSeconds: string;
+      combo: string;
+      members: Array<TeamToolValue["members"][number] & { characterName: string }>;
+    }>;
+  }>;
+};
+
+
+export type TeamEverywhereImport = {
+  id: string;
+  title: string;
+  rotationSeconds: string;
+  combo: string;
+  guideName: string;
+  conditionName: string | null;
+  members: Array<TeamToolValue["members"][number] & { characterName: string }>;
+};
+
+
+export function TeamImportPreviewCard({
+  team,
+  characters,
+  weapons,
+  artifacts,
+  checked,
+  checkboxId,
+  onCheckedChange,
+  sourceLabel,
+  disabled = false,
+}: {
+  team: TeamImportGuide["groups"][number]["teams"][number];
+  characters: CatalogItem[];
+  weapons: CatalogItem[];
+  artifacts: CatalogItem[];
+  checked: boolean;
+  checkboxId: string;
+  onCheckedChange: (checked: boolean) => void;
+  sourceLabel?: string;
+  disabled?: boolean;
+}) {
+  const total = team.members.reduce((sum, member) => sum + Number(member.damage), 0);
+  const seconds = Number(team.rotationSeconds);
+
+  return (
+    <Card className={cn(checked && "ring-2 ring-primary")}>
+      <CardHeader>
+        <CardTitle>{team.title}</CardTitle>
+        <CardDescription>โรเทชั่น {seconds} วิ{sourceLabel ? ` - ${sourceLabel}` : ""}</CardDescription>
+        <CardAction>
+          <Field orientation="horizontal">
+            <Checkbox id={checkboxId} checked={checked} disabled={disabled} onCheckedChange={(value) => onCheckedChange(value === true)} />
+            <FieldLabel htmlFor={checkboxId}>{disabled ? "ชื่อซ้ำ" : "เลือก"}</FieldLabel>
+          </Field>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div className="grid grid-cols-4 gap-2">
+          {team.members.map((member, index) => {
+            const character = characters.find((item) => item.key === member.characterKey);
+            const weapon = weapons.find((item) => item.key === member.weaponKey);
+            const artifact = artifacts.find((item) => item.key === member.artifactKey);
+            const secondArtifact = artifacts.find((item) => item.key === member.secondArtifactKey);
+            return (
+              <div key={`${member.characterKey}-${index}`} className="min-w-0 text-center">
+                <div className="flex items-center justify-center gap-2">
+                  <div className={cn("relative size-16 shrink-0 overflow-hidden rounded-lg bg-muted", characterRarityGradientClass(member.characterKey, isCustomTravelerKey(member.characterKey) ? 5 : character?.rarity))}>
+                    {character ? <Image src={character.imageUrl} alt={character.name} fill sizes="64px" className="object-contain" /> : null}
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    {weapon ? (
+                      <div className={cn("relative size-7 overflow-hidden rounded-md", rarityGradientClass(weapon.rarity))}>
+                        <Image src={weapon.imageUrl} alt={weapon.name} fill sizes="28px" className="object-contain p-0.5" />
+                      </div>
+                    ) : null}
+                    {artifact || secondArtifact ? (
+                      <TeamArtifactIcon
+                        first={artifact ? { ...artifact, rarity: artifact.rarity ?? null } : null}
+                        second={secondArtifact ? { ...secondArtifact, rarity: secondArtifact.rarity ?? null } : null}
+                        sizes="28px"
+                        className="size-7 shrink-0 scale-100"
+                      />
+                    ) : null}
+                  </div>
+                </div>
+                <div className="mt-2 flex items-center justify-center gap-1">
+                  <Badge variant="secondary">{teamConstellationLabel(member.constellation)}</Badge>
+                  <Badge variant="secondary">{teamRefinementLabel(member.refinement)}</Badge>
+                </div>
+                <p className="mt-1 truncate text-sm font-medium">{character?.name ?? member.characterName}</p>
+                <p className="mt-1 text-sm font-semibold">{Number(member.damage).toLocaleString()}</p>
+                <p className="text-xs text-muted-foreground">{total ? ((Number(member.damage) / total) * 100).toFixed(1) : "0.0"}%</p>
+              </div>
+            );
+          })}
+        </div>
+        <Separator />
+        <div className="flex items-end justify-between gap-4">
+          <div><p className="text-sm text-muted-foreground">ดาเมจรวม</p><p className="font-semibold">{total.toLocaleString()}</p></div>
+          <div className="text-right"><p className="text-sm text-muted-foreground">DPS</p><p className="text-3xl font-semibold text-primary">{seconds > 0 ? (total / seconds).toLocaleString(undefined, { maximumFractionDigits: 0 }) : "0"}</p></div>
+        </div>
+        <p className="rounded-lg bg-muted p-3 text-sm leading-6">{team.combo}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+
+export 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,
+    }),
+  );
+  const memberSortableIds = useRef(new WeakMap<TeamToolMember, string>());
+  const getMemberSortableId = (member: TeamToolMember) => {
+    const existingId = memberSortableIds.current.get(member);
+    if (existingId) return existingId;
+    const id = createClientId("team-member");
+    memberSortableIds.current.set(member, id);
+    return id;
+  };
+  const [teamGroups, setTeamGroups] = useState(() => initial.teamGroups.length
+    ? initial.teamGroups.map((group) => ({ clientId: group.id, name: group.name ?? "", note: group.note ?? "", iconMediaId: group.iconMediaId ?? null, iconUrl: group.iconUrl ?? null, teams: group.teams.map(({ id, ...team }) => ({ clientId: id, ...team })) }))
+    : [{ clientId: "team-condition-default", name: "", note: "", iconMediaId: null, iconUrl: null, teams: [] as TeamToolValue[] }]);
+  const [activeTeamGroupIndex, setActiveTeamGroupIndex] = useState(0);
+  const [renamingTeamGroupIndex, setRenamingTeamGroupIndex] = useState<number | null>(null);
+  const teams = useMemo(() => teamGroups[activeTeamGroupIndex]?.teams ?? [], [activeTeamGroupIndex, teamGroups]);
+  const setTeams = (update: SetStateAction<TeamToolValue[]>) => setTeamGroups((current) => current.map((group, index) => index === activeTeamGroupIndex ? { ...group, teams: typeof update === "function" ? update(group.teams) : update } : group));
+  const [selectedTeamIds, setSelectedTeamIds] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const [sourceTeamId, setSourceTeamId] = useState(teams[0]?.clientId ?? "");
+  const [applyOpen, setApplyOpen] = useState(false);
+  const [presetOpen, setPresetOpen] = useState(false);
+  const [importOpen, setImportOpen] = useState(false);
+  const [importFiles, setImportFiles] = useState<File[]>([]);
+  const [guideImportOpen, setGuideImportOpen] = useState(false);
+  const [everywhereImportOpen, setEverywhereImportOpen] = useState(false);
+  const everywhereSearchId = useRef(0);
+  const [everywhereCharacterKey, setEverywhereCharacterKey] = useState("");
+  const [everywhereSearchedKey, setEverywhereSearchedKey] = useState("");
+  const [everywhereTeams, setEverywhereTeams] = useState<TeamEverywhereImport[]>([]);
+  const [everywhereLoading, setEverywhereLoading] = useState(false);
+  const [everywhereError, setEverywhereError] = useState<string | null>(null);
+  const [everywhereSelectedIds, setEverywhereSelectedIds] = useState<Set<string>>(() => new Set());
+  const [ignoreSameName, setIgnoreSameName] = useState(true);
+  const [importGuides, setImportGuides] = useState<Array<{ id: string; name: string; characterKey: string; coverUrl: string }> | null>(null);
+  const [activeImportGuide, setActiveImportGuide] = useState<TeamImportGuide | null>(null);
+  const [selectedImports, setSelectedImports] = useState<Record<string, Omit<TeamToolValue, "clientId">>>({});
+  const [guideImportLoading, setGuideImportLoading] = useState<"guides" | "teams" | null>(null);
+  const [guideImportError, setGuideImportError] = useState<string | null>(null);
+  const [guideImportCondition, setGuideImportCondition] = useState("0");
+  const [guideTeamQuery, setGuideTeamQuery] = useState("");
+  const [guideTeamSearchTarget, setGuideTeamSearchTarget] = useState<TeamSearchTarget>("all");
+  const [guideListQuery, setGuideListQuery] = useState("");
+  const [presetName, setPresetName] = useState("");
+  const [presets, setPresets] = useState<TeamPreset[]>([]);
+  const [presetsHydrated, setPresetsHydrated] = useState(false);
+  const [presetsGuideId, setPresetsGuideId] = useState<string | null>(null);
+  const [applyFields, setApplyFields] = useState<TeamApplySelection[]>([]);
+  const [multipleApplyGuideId, setMultipleApplyGuideId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchTarget, setSearchTarget] = useState<TeamSearchTarget>("all");
+  const teamSearch = useMemo(() => {
+    const characterNames = new Map(characters.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
+    const weaponNames = new Map(weapons.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
+    const artifactNames = new Map(artifacts.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
+
+    return searchTeams(teams.map((team, teamIndex) => ({ team, teamIndex })), ({ team }) => ({
+        team: [team.title],
+        character: team.members.flatMap((member) => {
+          const name = characterNames.get(member.characterKey);
+          return name ?? [];
+        }),
+        weapon: team.members.flatMap((member) => {
+          const name = member.weaponKey
+            ? weaponNames.get(member.weaponKey)
+            : undefined;
+          return name ?? [];
+        }),
+        artifact: team.members.flatMap((member) =>
+          [member.artifactKey, member.secondArtifactKey].flatMap((key) => {
+            const name = key ? artifactNames.get(key) : undefined;
+            return name ?? [];
+          }),
+        ),
+      }), searchQuery, searchTarget);
+  }, [artifacts, characters, searchQuery, searchTarget, teams, weapons]);
+  const activeImportGroup = activeImportGuide?.groups[Number(guideImportCondition)]
+    ?? activeImportGuide?.groups[0];
+  const importTeamSearch = useMemo(() => {
+    const characterNames = new Map(characters.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
+    const weaponNames = new Map(weapons.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
+    const artifactNames = new Map(artifacts.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
+    return searchTeams(activeImportGroup?.teams ?? [], (team) => ({
+      team: [team.title],
+      character: team.members.flatMap((member) => characterNames.get(member.characterKey) ?? [member.characterName]),
+      weapon: team.members.flatMap((member) => member.weaponKey ? weaponNames.get(member.weaponKey) ?? [] : []),
+      artifact: team.members.flatMap((member) => [member.artifactKey, member.secondArtifactKey].flatMap((key) => key ? artifactNames.get(key) ?? [] : [])),
+    }), guideTeamQuery, guideTeamSearchTarget);
+  }, [activeImportGroup, artifacts, characters, guideTeamQuery, guideTeamSearchTarget, weapons]);
+  const importGuideSearch = useMemo(() => {
+    return searchItems(importGuides ?? [], guideListQuery,
+      (sourceGuide) => `${sourceGuide.name} ${sourceGuide.characterKey}`,
+      (sourceGuide) => [sourceGuide.name]);
+  }, [guideListQuery, importGuides]);
+  const filteredTeams = teamSearch.items;
+  const filteredImportTeams = importTeamSearch.items;
+  const filteredImportGuides = importGuideSearch.items;
+  const eligibleEverywhereTeams = filterTeamImportsByName(teams, everywhereTeams, ignoreSameName);
+  const eligibleEverywhereIds = new Set(eligibleEverywhereTeams.map((team) => team.id));
+  const selectedEverywhereTeams = eligibleEverywhereTeams.filter((team) => everywhereSelectedIds.has(team.id));
+  const allEverywhereTeamsSelected = eligibleEverywhereTeams.length > 0
+    && eligibleEverywhereTeams.every((team) => everywhereSelectedIds.has(team.id));
+  const value = {
+    groups: teamGroups.map((group) => ({ name: group.name.trim() || null, note: group.note.trim() || null, iconMediaId: group.iconMediaId, teams: group.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 teamFieldInvalid = (teamIndex: number, field: string) =>
+    !validation.success && validation.error.issues.some((issue) =>
+      issue.path[0] === "groups" && issue.path[1] === activeTeamGroupIndex && issue.path[2] === "teams" && issue.path[3] === teamIndex && issue.path[4] === field,
+    );
+  const memberFieldInvalid = (teamIndex: number, memberIndex: number, field: string) =>
+    !validation.success && validation.error.issues.some((issue) =>
+      issue.path[0] === "groups" && issue.path[1] === activeTeamGroupIndex && issue.path[2] === "teams" && issue.path[3] === teamIndex && issue.path[4] === "members" &&
+      issue.path[5] === memberIndex && issue.path[6] === field,
+    );
+  const localDraft = { teamGroups, activeTeamGroupIndex };
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      try {
+        setPresets(parseTeamPresets(window.localStorage.getItem(teamPresetStorageKey(guide.id))));
+      } catch {
+        setPresets([]);
+      }
+      setPresetsHydrated(true);
+      setPresetsGuideId(guide.id);
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [guide.id]);
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      try {
+        const stored = JSON.parse(
+          window.localStorage.getItem(multipleApplyStorageKey(guide.id)) ?? "null",
+        ) as { selectedTeamIds?: unknown; applyFields?: unknown } | null;
+        const teamIds = new Set(initial.teamGroups.flatMap((group) => group.teams.map((team) => team.id)));
+        setSelectedTeamIds(new Set(
+          Array.isArray(stored?.selectedTeamIds)
+            ? stored.selectedTeamIds.filter(
+                (id): id is string => typeof id === "string" && teamIds.has(id),
+              )
+            : [],
+        ));
+        setApplyFields(
+          Array.isArray(stored?.applyFields)
+            ? stored.applyFields.filter(
+                (field): field is TeamApplySelection => typeof field === "string",
+              )
+            : [],
+        );
+      } catch {
+        setSelectedTeamIds(new Set());
+        setApplyFields([]);
+      }
+      setMultipleApplyGuideId(guide.id);
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [guide.id, initial.teamGroups]);
+  useEffect(() => {
+    if (multipleApplyGuideId !== guide.id) return;
+    try {
+      window.localStorage.setItem(
+        multipleApplyStorageKey(guide.id),
+        JSON.stringify({
+          selectedTeamIds: [...selectedTeamIds],
+          applyFields,
+        }),
+      );
+    } catch {
+      // Browser storage is optional; multiple apply remains usable without it.
+    }
+  }, [applyFields, guide.id, multipleApplyGuideId, selectedTeamIds]);
+  useEffect(() => {
+    if (!presetsHydrated || presetsGuideId !== guide.id) return;
+    try {
+      window.localStorage.setItem(teamPresetStorageKey(guide.id), JSON.stringify(presets));
+      document.cookie = `${teamPresetCookieKey(guide.id)}=${encodeURIComponent(JSON.stringify(presets.map(({ id, name, createdAt }) => ({ id, name, createdAt })) ))}; path=/; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`;
+    } catch {
+      // Browser storage is optional; the editor remains usable without it.
+    }
+  }, [guide.id, presets, presetsGuideId, presetsHydrated]);
+  const autosave = useAutosave({
+    guideId: guide.id,
+    scope: "team",
+    value,
+    valid: validation.success,
+    initialVersion: guide.version,
+    persist: (next, expectedVersion, intent) =>
+      saveTeamSection(guide.id, { ...next, expectedVersion }, intent),
+    storageKey: adminDraftKey(guide.id, "team"),
+    localDraft,
+    parseLocalDraft: (candidate) =>
+      parseEditorDraft<typeof localDraft>(candidate, ["teamGroups"]),
+    restoreLocalDraft: (draft) => {
+      setTeamGroups(draft.teamGroups.map((group) => ({ ...group, name: group.name ?? "" })));
+      setActiveTeamGroupIndex(draft.activeTeamGroupIndex ?? 0);
+    },
+  });
+  const handleTeamDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return;
+    setTeams((current) => {
+      const from = current.findIndex((team) => team.clientId === active.id);
+      const to = current.findIndex((team) => team.clientId === over.id);
+      return from === -1 || to === -1 ? current : arrayMove(current, from, to);
+    });
+  };
+  const handleTeamMemberDragEnd = (
+    teamId: string,
+    { active, over }: DragEndEvent,
+  ) => {
+    if (!over || active.id === over.id) return;
+    setTeams((current) =>
+      current.map((team) => {
+        if (team.clientId !== teamId) return team;
+        const memberIds = team.members.map(getMemberSortableId);
+        const from = memberIds.indexOf(String(active.id));
+        const to = memberIds.indexOf(String(over.id));
+        return from === -1 || to === -1
+          ? team
+          : { ...team, members: arrayMove(team.members, from, to) };
+      }),
+    );
+  };
+  const updateTeam = (
+    teamIndex: number,
+    update: Partial<Omit<TeamToolValue, "clientId" | "members">>,
+  ) => {
+    setTeams((current) =>
+      current.map((team, index) =>
+        index === teamIndex ? { ...team, ...update } : team,
+      ),
+    );
+  };
+  const updateTeamMember = (
+    teamIndex: number,
+    memberIndex: number,
+    update: Partial<TeamToolValue["members"][number]>,
+  ) => {
+    setTeams((current) =>
+      current.map((team, index) =>
+        index === teamIndex
+          ? {
+              ...team,
+              members: team.members.map((member, innerIndex) => {
+                if (innerIndex !== memberIndex) return member;
+                const nextMember = { ...member, ...update };
+                memberSortableIds.current.set(
+                  nextMember,
+                  getMemberSortableId(member),
+                );
+                return nextMember;
+              }),
+            }
+          : team,
+      ),
+    );
+  };
+  const toggleTeamSelection = (teamId: string, checked: boolean) => {
+    setSelectedTeamIds((current) => {
+      const next = new Set(current);
+      if (checked) next.add(teamId);
+      else next.delete(teamId);
+      return next;
+    });
+  };
+  const toggleApplyField = (field: TeamApplySelection, checked: boolean) => {
+    setApplyFields((current) => {
+      const next = new Set(current);
+      if (checked) next.add(field);
+      else next.delete(field);
+      return [...next];
+    });
+  };
+  const applyChanges = () => {
+    if (!sourceTeamId || !selectedTeamIds.size || !applyFields.length) return;
+    const nextTeams = applyTeamFields(
+      teams,
+      sourceTeamId,
+      selectedTeamIds,
+      applyFields,
+    );
+    const unsupported = findUnsupportedTeamWeapon(
+      nextTeams,
+      selectedTeamIds,
+      characters,
+      weapons,
+    );
+    if (unsupported) {
+      toast.error(
+        `${unsupported.characterName} ไม่รองรับอาวุธ ${unsupported.weaponName}`,
+      );
+      return;
+    }
+    setTeams(nextTeams);
+    setSelectedTeamIds(new Set());
+    setApplyOpen(false);
+  };
+  const savePreset = () => {
+    const source = teams.find((team) => team.clientId === sourceTeamId);
+    const name = presetName.trim();
+    if (!source || !name) return;
+    const preset: TeamPreset = {
+      id: createClientId("preset"),
+      name,
+      createdAt: new Date().toISOString(),
+      team: {
+        title: source.title,
+        rotationSeconds: source.rotationSeconds,
+        combo: source.combo,
+        members: source.members.map((member) => ({ ...member })),
+      },
+    };
+    setPresets((current) => limitPresets([preset, ...current]));
+    setPresetName("");
+    setPresetOpen(false);
+  };
+  const applyPreset = (preset: TeamPreset) => {
+    if (!selectedTeamIds.size || !applyFields.length) return;
+    const nextTeams = applyPresetFields(
+      teams,
+      preset,
+      selectedTeamIds,
+      applyFields,
+    );
+    const unsupported = findUnsupportedTeamWeapon(
+      nextTeams,
+      selectedTeamIds,
+      characters,
+      weapons,
+    );
+    if (unsupported) {
+      toast.error(
+        `${unsupported.characterName} ไม่รองรับอาวุธ ${unsupported.weaponName}`,
+      );
+      return;
+    }
+    setTeams(nextTeams);
+    setSelectedTeamIds(new Set());
+  };
+  const exportTeam = async (team: TeamToolValue) => {
+    let serialized: string;
+    try {
+      serialized = serializeTeamTransfer(team);
+    } catch {
+      toast.error("Export Team ไม่สำเร็จ กรุณาตรวจสอบข้อมูล Team");
+      return;
+    }
+    const url = URL.createObjectURL(new Blob([serialized], { type: "application/json" }));
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = teamTransferFileName(team.title);
+    link.click();
+    URL.revokeObjectURL(url);
+    try {
+      await navigator.clipboard.writeText(serialized);
+      toast.success(`คัดลอกและดาวน์โหลด ${team.title} แล้ว`);
+    } catch {
+      toast.success(`ดาวน์โหลด ${teamTransferFileName(team.title)} แล้ว`);
+    }
+  };
+  const appendImportedTeams = (importedTeams: Array<Omit<TeamToolValue, "clientId">>) => {
+    if (!importedTeams.length) return false;
+    for (const imported of importedTeams) {
+      const catalogIssue = findInvalidTeamCatalogReference(
+        imported,
+        characters,
+        weapons,
+        artifacts,
+      );
+      if (catalogIssue) {
+        toast.error(catalogIssue);
+        return false;
+      }
+    }
+    setTeams((current) => [
+      ...current,
+      ...cloneTeamImports(importedTeams, () => createClientId("team")),
+    ]);
+    return true;
+  };
+  const importTeamFiles = async () => {
+    try {
+      const serializedTeams = await Promise.all(importFiles.map((file) => file.text()));
+      if (!serializedTeams.length) return;
+      const importedTeams = serializedTeams.map(parseTeamTransfer);
+      if (!appendImportedTeams(importedTeams)) return;
+      setImportFiles([]);
+      setImportOpen(false);
+      toast.success(`Import ${importedTeams.length} Team แล้ว`);
+    } catch {
+      toast.error("มีไฟล์ Team ที่ไม่ถูกต้องหรือเป็นเวอร์ชันที่ไม่รองรับ");
+    }
+  };
+  const openGuideImport = async () => {
+    setImportOpen(false);
+    setGuideImportOpen(true);
+    setActiveImportGuide(null);
+    setSelectedImports({});
+    setGuideListQuery("");
+    setGuideImportError(null);
+    setGuideImportLoading("guides");
+    const result = await listTeamImportGuides(guide.id);
+    setGuideImportLoading(null);
+    if (result.status === "success") setImportGuides(result.guides);
+    else setGuideImportError(result.message);
+  };
+  const openEverywhereImport = () => {
+    everywhereSearchId.current += 1;
+    setImportOpen(false);
+    setEverywhereImportOpen(true);
+    setEverywhereCharacterKey("");
+    setEverywhereSearchedKey("");
+    setEverywhereTeams([]);
+    setEverywhereSelectedIds(new Set());
+    setIgnoreSameName(true);
+    setEverywhereError(null);
+    setEverywhereLoading(false);
+  };
+  const searchEverywhereTeams = async (characterKey: string) => {
+    const searchId = ++everywhereSearchId.current;
+    setEverywhereSearchedKey("");
+    setEverywhereTeams([]);
+    setEverywhereSelectedIds(new Set());
+    setEverywhereError(null);
+    setEverywhereLoading(true);
+    const result = await listTeamImportsForCharacter(guide.id, characterKey);
+    if (searchId !== everywhereSearchId.current) return;
+    setEverywhereLoading(false);
+    if (result.status === "success") {
+      setEverywhereTeams(result.teams);
+      setEverywhereSearchedKey(characterKey);
+    } else setEverywhereError(result.message);
+  };
+  const importEverywhereTeams = (sourceTeams: TeamEverywhereImport[]) => {
+    if (!sourceTeams.length) return;
+    const importedTeams = sourceTeams.map(toTeamDraft);
+    if (!appendImportedTeams(importedTeams)) return;
+    setEverywhereImportOpen(false);
+    setEverywhereSelectedIds(new Set());
+    toast.success(`Import ${importedTeams.length} Team แล้ว`);
+  };
+  const enterImportGuide = async (guideId: string) => {
+    setGuideImportError(null);
+    setGuideImportLoading("teams");
+    const result = await loadTeamImportGuide(guideId);
+    setGuideImportLoading(null);
+    if (result.status === "success") {
+      setGuideImportCondition("0");
+      setGuideTeamQuery("");
+      setGuideTeamSearchTarget("all");
+      setActiveImportGuide(result.guide);
+    }
+    else setGuideImportError(result.message);
+  };
+  const confirmGuideImport = () => {
+    const importedTeams = Object.values(selectedImports);
+    if (!appendImportedTeams(importedTeams)) return;
+    setGuideImportOpen(false);
+    setSelectedImports({});
+    toast.success(`Import ${importedTeams.length} Team แล้ว`);
+  };
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Team Calc</CardTitle>
+        <CardDescription>
+          ลากเพื่อเรียง Team แล้วใส่ความเสียหายของตัวละคร 4 ตัว
+          ระบบจะแสดงสัดส่วนและ Total DPS และบันทึกอัตโนมัติ
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <ConditionControls
+          ariaLabel="เลือกเงื่อนไข Team"
+          items={teamGroups}
+          activeIndex={activeTeamGroupIndex}
+          onActiveIndexChange={(nextIndex) => {
+            const group = teamGroups[nextIndex];
+            if (!group) return;
+            setActiveTeamGroupIndex(nextIndex);
+            setSelectedTeamIds(new Set());
+            setSourceTeamId(group.teams[0]?.clientId ?? "");
+          }}
+          onRename={setRenamingTeamGroupIndex}
+          onReorder={(from, to) => {
+            const reordered = reorderConditions(teamGroups, activeTeamGroupIndex, from, to);
+            setTeamGroups(reordered.items);
+            setActiveTeamGroupIndex(reordered.activeIndex);
+          }}
+          onAdd={(details) => {
+            setTeamGroups([...teamGroups, { clientId: createClientId("team-condition"), ...details, note: "", teams: [] }]);
+            setActiveTeamGroupIndex(teamGroups.length);
+            setSelectedTeamIds(new Set());
+            setSourceTeamId("");
+          }}
+          onDuplicate={() => {
+            const source = teamGroups[activeTeamGroupIndex];
+            if (!source) return;
+            const copiedTeams = source.teams.map((team) => ({ ...team, clientId: createClientId("team"), members: team.members.map((member) => ({ ...member })) }));
+            setTeamGroups([...teamGroups, { clientId: createClientId("team-condition"), name: source.name, note: source.note, iconMediaId: source.iconMediaId, iconUrl: source.iconUrl, teams: copiedTeams }]);
+            setActiveTeamGroupIndex(teamGroups.length);
+            setSelectedTeamIds(new Set());
+            setSourceTeamId(copiedTeams[0]?.clientId ?? "");
+          }}
+          onDelete={() => {
+            setTeamGroups(teamGroups.filter((_, index) => index !== activeTeamGroupIndex));
+            setActiveTeamGroupIndex(Math.max(0, activeTeamGroupIndex - 1));
+            setSelectedTeamIds(new Set());
+          }}
+        />
+        <ConditionRenameDialog
+          open={renamingTeamGroupIndex !== null}
+          fallback={`Condition ${(renamingTeamGroupIndex ?? 0) + 1}`}
+          value={renamingTeamGroupIndex === null ? "" : teamGroups[renamingTeamGroupIndex]?.name ?? ""}
+          iconUrl={renamingTeamGroupIndex === null ? null : teamGroups[renamingTeamGroupIndex]?.iconUrl ?? null}
+          onOpenChange={(open) => { if (!open) setRenamingTeamGroupIndex(null); }}
+          onChange={(name) => setTeamGroups(teamGroups.map((group, index) => index === renamingTeamGroupIndex ? { ...group, name } : group))}
+          onIconChange={(icon) => setTeamGroups(teamGroups.map((group, index) => index === renamingTeamGroupIndex ? { ...group, ...icon } : group))}
+        />
+        <Field>
+          <FieldLabel htmlFor={`team-condition-note-${teamGroups[activeTeamGroupIndex]?.clientId}`}>Condition note (optional)</FieldLabel>
+          <Textarea id={`team-condition-note-${teamGroups[activeTeamGroupIndex]?.clientId}`} value={teamGroups[activeTeamGroupIndex]?.note ?? ""} onChange={(event) => setTeamGroups(teamGroups.map((group, index) => index === activeTeamGroupIndex ? { ...group, note: event.target.value } : group))} />
+        </Field>
+        <div className="flex min-w-0 flex-wrap items-center gap-2 rounded-lg border bg-muted/30 p-3">
+          <Checkbox
+            checked={selectedTeamIds.size === teams.length && teams.length > 0}
+            onCheckedChange={(checked) => setSelectedTeamIds(checked ? new Set(teams.map((team) => team.clientId)) : new Set())}
+            aria-label="เลือกทุก Team"
+          />
+          <span className="text-sm font-medium">เลือก Team สำหรับ Multiple Apply</span>
+          <Select value={sourceTeamId} onValueChange={(value) => { if (value) setSourceTeamId(value); }}>
+            <SelectTrigger className="w-full basis-full"><span>{teams.find((team) => team.clientId === sourceTeamId)?.title || "Source Team"}</span></SelectTrigger>
+            <SelectContent>
+              <SelectGroup>{teams.map((team) => <SelectItem key={team.clientId} value={team.clientId}>{team.title || "Untitled Team"}</SelectItem>)}</SelectGroup>
+            </SelectContent>
+          </Select>
+          <Button type="button" size="sm" disabled={!selectedTeamIds.size} onClick={() => setApplyOpen(true)}>Multiple Apply</Button>
+          <Button type="button" variant="outline" size="sm" disabled={!sourceTeamId} onClick={() => setPresetOpen(true)}>Save preset</Button>
+          {presets.map((preset) => (
+            <div key={preset.id} className="flex min-w-0 max-w-full items-center gap-1">
+              <Button className="min-w-0 max-w-full truncate" type="button" variant="ghost" size="sm" disabled={!selectedTeamIds.size} onClick={() => applyPreset(preset)}>{preset.name}</Button>
+              <SimpleTooltip text={`ลบ preset ${preset.name}`}>
+                <Button type="button" variant="ghost" size="icon-sm" onClick={() => setPresets((current) => current.filter((item) => item.id !== preset.id))} aria-label={`ลบ preset ${preset.name}`}><XIcon /></Button>
+              </SimpleTooltip>
+            </div>
+          ))}
+        </div>
+        <FieldGroup className="mt-4">
+          <Field>
+            <FieldLabel htmlFor="team-search">ค้นหา Team</FieldLabel>
+
+            <div className="relative">
+              <SearchIcon
+                aria-hidden="true"
+                className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
+              />
+              <Input
+                id="team-search"
+                className="pl-9"
+                placeholder="ค้นหาชื่อทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+                value={searchQuery}
+                onValueChange={setSearchQuery}
+              />
+            </div>
+          </Field>
+          <Field>
+            <FieldLabel>ค้นหาใน</FieldLabel>
+            <ToggleGroup
+              aria-label="เลือกประเภทข้อมูลที่ต้องการค้นหา"
+              className="max-w-full flex-wrap justify-start"
+              variant="outline"
+              size="sm"
+              value={[searchTarget]}
+              onValueChange={(value) => {
+                const target = value[0] as TeamSearchTarget | undefined;
+                if (target) setSearchTarget(target);
+              }}
+            >
+              <ToggleGroupItem value="all">ทั้งหมด</ToggleGroupItem>
+              <ToggleGroupItem value="team">ชื่อทีม</ToggleGroupItem>
+              <ToggleGroupItem value="character">ตัวละคร</ToggleGroupItem>
+              <ToggleGroupItem value="weapon">อาวุธ</ToggleGroupItem>
+              <ToggleGroupItem value="artifact">อาร์ติแฟกต์</ToggleGroupItem>
+            </ToggleGroup>
+          </Field>
+        </FieldGroup>
+        <DndContext
+          sensors={teamSensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleTeamDragEnd}
+        >
+          <SortableContext
+            items={filteredTeams.map(({ team }) => team.clientId)}
+            strategy={rectSortingStrategy}
+          >
+            {filteredTeams.length ? (
+              <div className="grid gap-5 xl:grid-cols-2">
+                {filteredTeams.map(({ team, teamIndex }) => {
+                  const total = team.members.reduce(
+                    (sum, member) => sum + (Number(member.damage) || 0),
+                    0,
+                  );
+                  const seconds = Number(team.rotationSeconds);
+                  const dps = seconds > 0 ? total / seconds : 0;
+                  return (
+                    <SortableTeamItem key={team.clientId} id={team.clientId}>
+                      {(dragHandle) => (
+                        <Card
+                          className="h-full"
+                          size="sm"
+                          data-invalid={teamFieldInvalid(teamIndex, "members")}
+                        >
+                          <CardHeader>
+                            <CardTitle>
+                              <Field data-invalid={teamFieldInvalid(teamIndex, "title")}>
+                                <FieldLabel className="sr-only" htmlFor={`team-title-${team.clientId}`}>
+                                  ชื่อ Team
+                                </FieldLabel>
+                                <Input
+                                  id={`team-title-${team.clientId}`}
+                                  value={team.title}
+                                  placeholder={`Team ${teamIndex + 1}`}
+                                  aria-invalid={teamFieldInvalid(teamIndex, "title")}
+                                  onChange={(event) =>
+                                    updateTeam(teamIndex, { title: event.target.value })
+                                  }
+                                />
+                              </Field>
+                            </CardTitle>
+                            <CardDescription>
+                              <Field
+                                className="w-fit justify-start"
+                                orientation="horizontal"
+                                data-invalid={teamFieldInvalid(teamIndex, "rotationSeconds")}
+                              >
+                                <FieldLabel
+                                  className="flex-none"
+                                  htmlFor={`team-rotation-${team.clientId}`}
+                                >
+                                  Rotation
+                                </FieldLabel>
+                                <Input
+                                  id={`team-rotation-${team.clientId}`}
+                                  className="w-24 text-foreground"
+                                  type="number"
+                                  min="0.01"
+                                  step="0.5"
+                                  value={team.rotationSeconds}
+                                  aria-invalid={teamFieldInvalid(teamIndex, "rotationSeconds")}
+                                  onChange={(event) =>
+                                    updateTeam(teamIndex, {
+                                      rotationSeconds: event.target.value,
+                                    })
+                                  }
+                                />
+                                <span>วินาที</span>
+                              </Field>
+                            </CardDescription>
+                            <CardAction className="flex max-w-44 flex-wrap justify-end gap-1">
+                              <Checkbox
+                                checked={selectedTeamIds.has(team.clientId)}
+                                onCheckedChange={(checked) =>
+                                  toggleTeamSelection(team.clientId, checked === true)
+                                }
+                                aria-label={`เลือก ${team.title || `Team ${teamIndex + 1}`}`}
+                              />
+                              {dragHandle}
+                              <SimpleTooltip text="Export Team">
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  onClick={() => void exportTeam(team)}
+                                >
+                                  <ClipboardCopyIcon />
+                                  <span className="sr-only">
+                                    Export {team.title || `Team ${teamIndex + 1}`}
+                                  </span>
+                                </Button>
+                              </SimpleTooltip>
+                              <SimpleTooltip text="ทำสำเนา Team">
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  onClick={() =>
+                                    setTeams((current) => {
+                                      const sourceIndex = current.findIndex(
+                                        (item) => item.clientId === team.clientId,
+                                      );
+                                      if (sourceIndex === -1)
+                                        return current;
+                                      const source = current[sourceIndex];
+                                      const title = source.title.trim()
+                                        ? `${source.title.slice(0, 153)} (Copy)`
+                                        : `Team ${sourceIndex + 1} (Copy)`;
+                                      return current.toSpliced(sourceIndex + 1, 0, {
+                                        ...source,
+                                        clientId: createClientId("team"),
+                                        title,
+                                        members: source.members.map((member) => ({
+                                          ...member,
+                                        })),
+                                      });
+                                    })
+                                  }
+                                >
+                                  <CopyIcon />
+                                  <span className="sr-only">ทำสำเนา Team</span>
+                                </Button>
+                              </SimpleTooltip>
+                              <DeleteConfirmationDialog
+                                triggerTooltip="ลบ Team"
+                                trigger={
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon-sm"
+                                  />
+                                }
+                                type="Team"
+                                description="ข้อมูล Team และตัวละครทั้ง 4 คนจะถูกลบออกจาก Guide"
+                                confirmLabel="ยืนยันลบ Team"
+                                onConfirm={() =>
+                                  setTeams(
+                                    teams.filter(
+                                      (item) => item.clientId !== team.clientId,
+                                    ),
+                                  )
+                                }
+                              >
+                                <Trash2Icon />
+                                <span className="sr-only">ลบ Team</span>
+                              </DeleteConfirmationDialog>
+                            </CardAction>
+                          </CardHeader>
+                          <CardContent className="flex flex-col gap-4">
+                            <DndContext
+                              sensors={teamSensors}
+                              collisionDetection={closestCenter}
+                              onDragEnd={(event) =>
+                                handleTeamMemberDragEnd(team.clientId, event)
+                              }
+                            >
+                              <SortableContext
+                                items={team.members.map(getMemberSortableId)}
+                                strategy={rectSortingStrategy}
+                              >
+                                <div className="grid grid-cols-4 gap-1 sm:gap-3">
+                                  {team.members.map((member, memberIndex) => {
+                                    const character = characters.find(
+                                      (item) => item.key === member.characterKey,
+                                    );
+                                    const compatibleWeapons = weapons.filter(
+                                      (weapon) =>
+                                        supportsWeaponType(
+                                          character?.weaponType,
+                                          weapon.weaponType,
+                                        ),
+                                    );
+                                    const selectedWeapon = compatibleWeapons.find(
+                                      (weapon) => weapon.key === member.weaponKey,
+                                    );
+                                    const share = total
+                                      ? ((Number(member.damage) || 0) / total) * 100
+                                      : 0;
+                                    return (
+                                      <SortableTeamMember
+                                        key={getMemberSortableId(member)}
+                                        id={getMemberSortableId(member)}
+                                      >
+                                        {(memberDragHandle) => (
+                                          <div
+                                            className={cn(
+                                              "flex min-w-0 flex-col rounded-lg p-0.5 text-center sm:p-1",
+                                              !character && "bg-muted/40",
+                                            )}
+                                            style={
+                                              character?.element
+                                                ? {
+                                                    backgroundColor:
+                                                      elementBackgroundColor(
+                                                        character.element,
+                                                      ),
+                                                  }
+                                                : undefined
+                                            }
+                                          >
+                                            <div className="flex items-center justify-between">
+                                              <span className="text-xs text-muted-foreground">
+                                                #{memberIndex + 1}
+                                              </span>
+                                              {memberDragHandle}
+                                            </div>
+                                            <div className="flex flex-col gap-1 sm:grid sm:grid-cols-3">
+                                              <div className="sm:col-span-2 sm:row-span-2">
+                                                <CharacterSelect
+                                                  presentation="slot"
+                                                  items={characters}
+                                                  value={member.characterKey}
+                                                  label={`เลือกตัวละครตำแหน่ง ${memberIndex + 1}`}
+                                                  placeholder="ค้นหาชื่อตัวละคร…"
+                                                  rarityBackground
+                                                  invalid={memberFieldInvalid(
+                                                    teamIndex,
+                                                    memberIndex,
+                                                    "characterKey",
+                                                  )}
+                                                  className="rounded-lg border-0 [&>img]:object-cover [&>img]:p-0"
+                                                  onValueChange={(characterKey) =>
+                                                    updateTeamMember(
+                                                      teamIndex,
+                                                      memberIndex,
+                                                      {
+                                                        characterKey,
+                                                        weaponKey: null,
+                                                        artifactKey: null,
+                                                        secondArtifactKey: null,
+                                                        constellation: "0",
+                                                        refinement: "1",
+                                                      },
+                                                    )
+                                                  }
+                                                />
+                                              </div>
+                                              <div className="grid min-w-0 grid-cols-2 gap-1 sm:row-span-2 sm:grid-cols-1">
+                                                <WeaponSelect
+                                                  presentation="slot"
+                                                  items={compatibleWeapons}
+                                                  value={member.weaponKey ?? ""}
+                                                  label={`เลือกอาวุธของตัวละครตำแหน่ง ${memberIndex + 1}`}
+                                                  placeholder="ค้นหาอาวุธที่รองรับ…"
+                                                  rarityBackground
+                                                  invalid={memberFieldInvalid(
+                                                    teamIndex,
+                                                    memberIndex,
+                                                    "weaponKey",
+                                                  )}
+                                                  onValueChange={(weaponKey) =>
+                                                    updateTeamMember(
+                                                      teamIndex,
+                                                      memberIndex,
+                                                      {
+                                                        weaponKey:
+                                                          weaponKey || null,
+                                                        refinement: "1",
+                                                      },
+                                                    )
+                                                  }
+                                                />
+                                                <ArtifactSelect
+                                                  multiple
+                                                  items={artifacts}
+                                                  values={[
+                                                    member.artifactKey,
+                                                    member.secondArtifactKey,
+                                                  ].filter(
+                                                    (key): key is string => Boolean(key),
+                                                  )}
+                                                  label={`เลือก Artifact สูงสุด 2 ชุดของตัวละครตำแหน่ง ${memberIndex + 1}`}
+                                                  invalid={memberFieldInvalid(
+                                                    teamIndex,
+                                                    memberIndex,
+                                                    "artifactKey",
+                                                  )}
+                                                  placeholder="ค้นหาชุด Artifact…"
+                                                  onValuesChange={(artifactKeys) =>
+                                                    updateTeamMember(
+                                                      teamIndex,
+                                                      memberIndex,
+                                                      {
+                                                        artifactKey:
+                                                          artifactKeys[0] ?? null,
+                                                        secondArtifactKey:
+                                                          artifactKeys[1] ?? null,
+                                                      },
+                                                    )
+                                                  }
+                                                />
+                                              </div>
+                                            </div>
+                                            <div className="mt-1 flex min-w-0 gap-1">
+                                              <ConstellationSelect
+                                                value={String(member.constellation)}
+                                                includeRange
+                                                disabled={!character}
+                                                onValueChange={(value) =>
+                                                  updateTeamMember(
+                                                    teamIndex,
+                                                    memberIndex,
+                                                    { constellation: value },
+                                                  )
+                                                }
+                                                aria-label={`Constellation ของตัวละครตำแหน่ง ${memberIndex + 1}`}
+                                                triggerProps={{
+                                                  size: "sm",
+                                                  className: "h-6 min-w-0 flex-1 justify-center px-1 text-xs [&>svg]:hidden",
+                                                }}
+                                              />
+                                              <RefinementSelect
+                                                value={String(member.refinement)}
+                                                includeRange
+                                                disabled={!selectedWeapon}
+                                                onValueChange={(value) =>
+                                                  updateTeamMember(
+                                                    teamIndex,
+                                                    memberIndex,
+                                                    { refinement: value },
+                                                  )
+                                                }
+                                                aria-label={`Refinement ของอาวุธตำแหน่ง ${memberIndex + 1}`}
+                                                triggerProps={{
+                                                  size: "sm",
+                                                  className: "h-6 min-w-0 flex-1 justify-center px-1 text-xs [&>svg]:hidden",
+                                                }}
+                                              />
+                                            </div>
+                                            <Field
+                                              data-invalid={memberFieldInvalid(
+                                                teamIndex,
+                                                memberIndex,
+                                                "damage",
+                                              )}
+                                            >
+                                              <FieldLabel
+                                                className="sr-only"
+                                                htmlFor={`team-${team.clientId}-damage-${memberIndex}`}
+                                              >
+                                                Damage ของตัวละครตำแหน่ง {memberIndex + 1}
+                                              </FieldLabel>
+                                              <Input
+                                                id={`team-${team.clientId}-damage-${memberIndex}`}
+                                                className="h-7 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                                type="number"
+                                                min="0"
+                                                step="1"
+                                                value={member.damage}
+                                                aria-invalid={memberFieldInvalid(
+                                                  teamIndex,
+                                                  memberIndex,
+                                                  "damage",
+                                                )}
+                                                onChange={(event) =>
+                                                  updateTeamMember(
+                                                    teamIndex,
+                                                    memberIndex,
+                                                    {
+                                                      damage: event.target.value,
+                                                    },
+                                                  )
+                                                }
+                                              />
+                                            </Field>
+                                            <p className="mt-0.5 text-xs text-muted-foreground">
+                                              {share.toFixed(2)}%
+                                            </p>
+                                          </div>
+                                        )}
+                                      </SortableTeamMember>
+                                    );
+                                  })}
+                                </div>
+                              </SortableContext>
+                            </DndContext>
+                            <Separator />
+                            <div className="flex items-end justify-between gap-4">
+                              <div>
+                                <p className="text-sm text-muted-foreground">
+                                  ดาเมจรวม
+                                </p>
+                                <p className="font-semibold">
+                                  {total.toLocaleString()}
+                                </p>
+                              </div>
+                              <div className="text-right">
+                                <p className="text-sm text-muted-foreground">DPS</p>
+                                <p className="text-3xl font-semibold text-primary">
+                                  {dps.toLocaleString(undefined, {
+                                    maximumFractionDigits: 0,
+                                  })}
+                                </p>
+                              </div>
+                            </div>
+                            <Field data-invalid={teamFieldInvalid(teamIndex, "combo")}>
+                              <FieldLabel
+                                className="sr-only"
+                                htmlFor={`team-combo-${team.clientId}`}
+                              >
+                                Combo
+                              </FieldLabel>
+                              <Textarea
+                                id={`team-combo-${team.clientId}`}
+                                value={team.combo}
+                                placeholder="ใส่ลำดับ Combo…"
+                                aria-invalid={teamFieldInvalid(teamIndex, "combo")}
+                                onChange={(event) =>
+                                  updateTeam(teamIndex, {
+                                    combo: event.target.value,
+                                  })
+                                }
+                              />
+                            </Field>
+                          </CardContent>
+                        </Card>
+                      )}
+                    </SortableTeamItem>
+                  );
+                })}
+              </div>
+            ) : (
+              <Empty>
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">
+                    <SearchIcon />
+                  </EmptyMedia>
+                  <EmptyTitle>
+                    {teams.length
+                      ? "ไม่พบ Team ที่ตรงกับคำค้นหา"
+                      : "ยังไม่มี Team ใน Condition นี้"}
+                  </EmptyTitle>
+                  <EmptyDescription>
+                    {teams.length
+                      ? "ลองเปลี่ยนคำค้นหาหรือประเภทข้อมูล"
+                      : "เพิ่ม Team เพื่อเริ่มจัดตัวละครและคำนวณ DPS"}
+                  </EmptyDescription>
+                </EmptyHeader>
+                {!teams.length ? (
+                  <EmptyContent>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      disabled={characters.length < 4}
+                      onClick={() =>
+                        setTeams([
+                          ...teams,
+                          {
+                            clientId: createClientId("team"),
+                            title: "",
+                            rotationSeconds: "20",
+                            combo: "",
+                            members: fallbackMembers.map((member) => ({
+                              ...member,
+                            })),
+                          },
+                        ])
+                      }
+                    >
+                      <PlusIcon data-icon="inline-start" />
+                      เพิ่ม Team
+                    </Button>
+                  </EmptyContent>
+                ) : null}
+              </Empty>
+            )}
+          </SortableContext>
+        </DndContext>
+      </CardContent>
+      <CardFooter className="flex-wrap justify-between gap-3">
+        <div className="flex flex-wrap gap-3">
+          <Button
+            variant="outline"
+            disabled={characters.length < 4}
+            onClick={() =>
+              setTeams([
+                ...teams,
+                {
+                  clientId: createClientId("team"),
+                  title: "",
+                  rotationSeconds: "20",
+                  combo: "",
+                  members: fallbackMembers.map((member) => ({ ...member })),
+                },
+              ])
+            }
+          >
+            <PlusIcon data-icon="inline-start" />
+            เพิ่ม Team
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setImportOpen(true)}
+          >
+            <ClipboardPasteIcon data-icon="inline-start" />
+            Import Team
+          </Button>
+        </div>
+        <AutosaveStatus
+          state={autosave.state}
+          conflictVersion={autosave.conflictVersion}
+          canOverwrite={autosave.canOverwrite}
+          onReloadLatest={autosave.reloadLatest}
+          onOverwrite={autosave.overwrite}
+          issues={
+            validation.success
+              ? []
+              : formatGuideValidationIssues("team", validation.error.issues, {
+                  teamNames: teams.map((team) => team.title),
+                })
+          }
+          onSave={autosave.saveNow}
+        />
+      </CardFooter>
+      <Dialog open={applyOpen} onOpenChange={setApplyOpen}>
+        <DialogContent className="max-h-[90svh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>Multiple Apply</DialogTitle>
+            <DialogDescription className="wrap-break-word">คัดลอกค่าจาก {teams.find((team) => team.clientId === sourceTeamId)?.title || "Source Team"} ไปยัง {selectedTeamIds.size} Team ที่เลือก: {[...selectedTeamIds].map((id) => teams.find((team) => team.clientId === id)?.title || "Untitled Team").join(", ")}</DialogDescription>
+          </DialogHeader>
+          <div className="flex min-h-0 flex-col gap-5 overflow-y-auto pr-1">
+            {teams.find((team) => team.clientId === sourceTeamId)?.members.map((member, memberIndex) => {
+              const characterName = characters.find((character) => character.key === member.characterKey)?.name || "No character";
+              return (
+                <FieldSet key={memberIndex}>
+                  <FieldLegend>{characterName} (char{memberIndex + 1})</FieldLegend>
+                  <div className="grid gap-3 sm:grid-cols-4">
+                    {teamMemberApplyOptions.map(([field, label]) => {
+                      const selection = `member:${memberIndex}:${field}` as TeamApplySelection;
+                      const id = `apply-${memberIndex}-${field}`;
+                      return (
+                        <Field key={field} orientation="horizontal">
+                          <Checkbox id={id} checked={applyFields.includes(selection)} onCheckedChange={(checked) => toggleApplyField(selection, checked === true)} />
+                          <FieldLabel htmlFor={id}>{label}{field === "refinement" ? ` (${teamRefinementLabel(member.refinement)})` : ""}</FieldLabel>
+                        </Field>
+                      );
+                    })}
+                  </div>
+                </FieldSet>
+              );
+            })}
+            <FieldSet>
+              <FieldLegend>Team fields</FieldLegend>
+              <div className="grid gap-3 sm:grid-cols-2">
+                {(["rotation", "combo"] as const).map((field) => {
+                  const id = `apply-${field}`;
+                  return (
+                    <Field key={field} orientation="horizontal">
+                      <Checkbox id={id} checked={applyFields.includes(field)} onCheckedChange={(checked) => toggleApplyField(field, checked === true)} />
+                      <FieldLabel htmlFor={id}>{field === "rotation" ? "Rotation" : "Combo"}</FieldLabel>
+                    </Field>
+                  );
+                })}
+              </div>
+            </FieldSet>
+          </div>
+          <DialogFooter><Button type="button" variant="outline" onClick={() => setApplyOpen(false)}>ยกเลิก</Button><Button type="button" disabled={!applyFields.length} onClick={applyChanges}>ยืนยันการคัดลอก</Button></DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={importOpen} onOpenChange={setImportOpen}>
+        <DialogContent className="max-h-[90svh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Import Team</DialogTitle>
+            <DialogDescription>
+              เลือก Team จาก Guide อื่น หรืออัปโหลดไฟล์ JSON ที่เคย Export ไว้
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex min-h-0 flex-col gap-4 overflow-y-auto pr-1">
+            <Card size="sm">
+              <CardHeader>
+                <CardTitle>Import Everywhere</CardTitle>
+                <CardDescription>เลือกตัวละคร แล้วค้นหา Team จาก Guide อื่นที่มีตัวละครนั้นอยู่ในทีม</CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Button type="button" variant="outline" onClick={openEverywhereImport}>
+                  <SearchIcon data-icon="inline-start" />
+                  เลือกตัวละคร
+                </Button>
+              </CardFooter>
+            </Card>
+            <Card size="sm">
+              <CardHeader>
+                <CardTitle>เลือกจาก Guide</CardTitle>
+                <CardDescription>เลือก Team ที่บันทึกอยู่ใน Guide อื่นได้โดยไม่ต้องดาวน์โหลดไฟล์</CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Button type="button" variant="outline" onClick={() => void openGuideImport()}>
+                  <BookOpenIcon data-icon="inline-start" />
+                  เปิดรายการ Guide
+                </Button>
+              </CardFooter>
+            </Card>
+            <Card size="sm">
+              <CardHeader>
+                <CardTitle>อัปโหลดไฟล์ JSON</CardTitle>
+                <CardDescription>เลือกหลายไฟล์เพื่อ Import หลาย Team พร้อมกันได้</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Field>
+                  <FieldLabel htmlFor="team-import-files">ไฟล์ Team JSON</FieldLabel>
+                  <Input
+                    id="team-import-files"
+                    type="file"
+                    accept=".json,application/json"
+                    multiple
+                    onChange={(event) => setImportFiles(Array.from(event.target.files ?? []))}
+                  />
+                </Field>
+              </CardContent>
+              <CardFooter>
+                <Button type="button" disabled={!importFiles.length} onClick={() => void importTeamFiles()}>
+                  Import {importFiles.length || ""} Team
+                </Button>
+              </CardFooter>
+            </Card>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setImportOpen(false)}>
+              ปิด
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={everywhereImportOpen} onOpenChange={(open) => {
+        setEverywhereImportOpen(open);
+        if (!open) {
+          everywhereSearchId.current += 1;
+          setEverywhereLoading(false);
+        }
+      }}>
+        <DialogContent className="max-h-[90svh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-5xl">
+          <DialogHeader>
+            <DialogTitle>Import Everywhere</DialogTitle>
+            <DialogDescription>
+              เลือกตัวละครเพื่อค้นหา Team จาก Guide อื่น แล้วดูตัวอย่างก่อนนำเข้า Condition ปัจจุบัน
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex min-h-0 flex-col gap-4 overflow-y-auto pr-1">
+            <Field>
+              <FieldLabel>ตัวละครใน Team</FieldLabel>
+              <CatalogDropdown
+                items={characters}
+                value={everywhereCharacterKey}
+                onValueChange={(key) => {
+                  setEverywhereCharacterKey(key);
+                  if (key) void searchEverywhereTeams(key);
+                  else {
+                    everywhereSearchId.current += 1;
+                    setEverywhereSearchedKey("");
+                    setEverywhereTeams([]);
+                    setEverywhereSelectedIds(new Set());
+                    setEverywhereError(null);
+                    setEverywhereLoading(false);
+                  }
+                }}
+                placeholder="เลือกตัวละคร"
+                label="เลือกตัวละครที่อยู่ใน Team"
+                showSelectedImage
+                rarityBackground
+                characterBackground
+              />
+            </Field>
+            <Field orientation="horizontal">
+              <Switch id="ignore-same-team-name" checked={ignoreSameName} onCheckedChange={setIgnoreSameName} />
+              <FieldLabel htmlFor="ignore-same-team-name">Ignore same name</FieldLabel>
+            </Field>
+            {everywhereError ? (
+              <Alert variant="destructive"><AlertTitle>โหลดข้อมูลไม่สำเร็จ</AlertTitle><AlertDescription>{everywhereError}</AlertDescription></Alert>
+            ) : null}
+            {everywhereLoading ? (
+              <div aria-busy="true" aria-label="กำลังโหลด Team" className="grid gap-4 lg:grid-cols-2">
+                {Array.from({ length: 4 }, (_, index) => <Skeleton key={index} className="h-72 rounded-xl" />)}
+              </div>
+            ) : everywhereSearchedKey && everywhereTeams.length ? (
+              <>
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <p className="text-sm text-muted-foreground">
+                    พบ {everywhereTeams.length} Team - เลือกได้ {eligibleEverywhereTeams.length} Team
+                  </p>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    disabled={!eligibleEverywhereTeams.length}
+                    onClick={() => setEverywhereSelectedIds(
+                      allEverywhereTeamsSelected ? new Set() : new Set(eligibleEverywhereIds),
+                    )}
+                  >
+                    {allEverywhereTeamsSelected ? "ยกเลิกเลือกทั้งหมด" : "เลือกทั้งหมด"}
+                  </Button>
+                </div>
+                <div className="grid gap-4 lg:grid-cols-2">
+                  {everywhereTeams.map((team) => {
+                    const eligible = eligibleEverywhereIds.has(team.id);
+                    return (
+                      <TeamImportPreviewCard
+                        key={team.id}
+                        team={team}
+                        characters={characters}
+                        weapons={weapons}
+                        artifacts={artifacts}
+                        checked={eligible && everywhereSelectedIds.has(team.id)}
+                        checkboxId={`everywhere-team-${team.id}`}
+                        sourceLabel={`${team.guideName}${team.conditionName ? ` - ${team.conditionName}` : ""}`}
+                        disabled={!eligible}
+                        onCheckedChange={(checked) => setEverywhereSelectedIds((current) => {
+                          const next = new Set(current);
+                          if (checked) next.add(team.id);
+                          else next.delete(team.id);
+                          return next;
+                        })}
+                      />
+                    );
+                  })}
+                </div>
+              </>
+            ) : everywhereSearchedKey && !everywhereError ? (
+              <Empty><EmptyHeader><EmptyTitle>ไม่พบ Team</EmptyTitle><EmptyDescription>ยังไม่มี Team จาก Guide อื่นที่มีตัวละครนี้</EmptyDescription></EmptyHeader></Empty>
+            ) : null}
+          </div>
+          <DialogFooter className="flex-wrap">
+            <Button type="button" variant="outline" onClick={() => setEverywhereImportOpen(false)}>ปิด</Button>
+            <Button type="button" variant="outline" disabled={!eligibleEverywhereTeams.length} onClick={() => importEverywhereTeams(eligibleEverywhereTeams)}>
+              Import All {eligibleEverywhereTeams.length} Team
+            </Button>
+            <Button type="button" disabled={!selectedEverywhereTeams.length} onClick={() => importEverywhereTeams(selectedEverywhereTeams)}>
+              Import Selected {selectedEverywhereTeams.length} Team
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={guideImportOpen} onOpenChange={setGuideImportOpen}>
+        <DialogContent className="max-h-[90svh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-5xl">
+          <DialogHeader>
+            <DialogTitle>{activeImportGuide ? activeImportGuide.name : "เลือก Guide"}</DialogTitle>
+            <DialogDescription>
+              {activeImportGuide
+                ? "เลือก Team ที่ต้องการ สามารถย้อนกลับไปเลือกจาก Guide อื่นเพิ่มได้"
+                : "ค้นหาและเปิด Guide เพื่อเลือก Team ที่ต้องการ Import"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="min-h-0 overflow-hidden">
+            {guideImportError ? (
+              <Alert variant="destructive">
+                <AlertTitle>โหลดข้อมูลไม่สำเร็จ</AlertTitle>
+                <AlertDescription>{guideImportError}</AlertDescription>
+              </Alert>
+            ) : null}
+            {guideImportLoading ? (
+              guideImportLoading === "guides" ? (
+                <div
+                  className="flex h-full min-h-0 flex-col gap-4"
+                  aria-label="กำลังโหลดรายการ Guide"
+                  aria-busy="true"
+                >
+                  <Skeleton className="h-8 w-full" />
+                  <div className="min-h-0 overflow-y-auto pr-1">
+                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                      {Array.from({ length: 6 }, (_, index) => (
+                        <Card key={index} className="overflow-hidden py-0">
+                          <Skeleton className="aspect-4/3 rounded-b-none" />
+                          <CardHeader className="pt-4">
+                            <CardTitle><Skeleton className="h-5 w-2/3" /></CardTitle>
+                            <CardDescription><Skeleton className="h-4 w-1/2" /></CardDescription>
+                            <CardAction><Skeleton className="h-5 w-16" /></CardAction>
+                          </CardHeader>
+                          <CardFooter className="pb-4">
+                            <Skeleton className="h-7 w-20" />
+                          </CardFooter>
+                        </Card>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div
+                  className="flex h-full min-h-0 flex-col gap-3"
+                  aria-label="กำลังโหลดรายการ Team"
+                  aria-busy="true"
+                >
+                  <Skeleton className="h-8 w-32" />
+                  <div className="flex min-w-0 items-center gap-2">
+                    <Skeleton className="h-8 min-w-0 flex-1" />
+                    <Skeleton className="h-8 w-32 shrink-0" />
+                  </div>
+                  <div className="min-h-0 overflow-y-auto pr-1">
+                    <div className="grid gap-4 lg:grid-cols-2">
+                      {Array.from({ length: 4 }, (_, index) => (
+                        <Card key={index}>
+                          <CardHeader>
+                            <CardTitle><Skeleton className="h-5 w-1/3" /></CardTitle>
+                            <CardDescription><Skeleton className="h-4 w-24" /></CardDescription>
+                            <CardAction><Skeleton className="h-5 w-12" /></CardAction>
+                          </CardHeader>
+                          <CardContent className="flex flex-col gap-4">
+                            <div className="grid grid-cols-4 gap-2">
+                              {Array.from({ length: 4 }, (_, memberIndex) => (
+                                <div key={memberIndex} className="flex min-w-0 flex-col items-center gap-2">
+                                  <Skeleton className="size-16 rounded-lg" />
+                                  <Skeleton className="h-4 w-full" />
+                                  <Skeleton className="h-4 w-2/3" />
+                                </div>
+                              ))}
+                            </div>
+                            <Separator />
+                            <div className="flex items-end justify-between gap-4">
+                              <Skeleton className="h-10 w-24" />
+                              <Skeleton className="h-12 w-28" />
+                            </div>
+                            <Skeleton className="h-12 w-full" />
+                          </CardContent>
+                        </Card>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )
+            ) : activeImportGuide ? (
+              <div className="flex h-full min-h-0 flex-col gap-3">
+                <Button type="button" variant="ghost" className="self-start" onClick={() => setActiveImportGuide(null)}>
+                  <ArrowLeftIcon data-icon="inline-start" />
+                  กลับไปเลือก Guide
+                </Button>
+                {activeImportGuide.groups.length > 1 ? (
+                  <ScrollableNav ariaLabel="เลือกเงื่อนไขทีม" className="w-full min-w-0">
+                    <Tabs value={guideImportCondition} onValueChange={setGuideImportCondition}>
+                      <TabsList aria-label="เลือกเงื่อนไขทีม">
+                        {activeImportGuide.groups.map((group, index) => (
+                          <TabsTrigger key={group.id} value={String(index)}>
+                            <MousePointerClickIcon aria-hidden="true" data-icon="inline-start" />
+                            {group.name || `Condition ${index + 1}`}
+                          </TabsTrigger>
+                        ))}
+                      </TabsList>
+                    </Tabs>
+                  </ScrollableNav>
+                ) : null}
+                <div className="flex min-w-0 items-center gap-2">
+                  <div className="relative min-w-0 flex-1">
+                    <SearchIcon aria-hidden="true" className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      aria-label="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+                      className="pl-9"
+                      placeholder="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+                      value={guideTeamQuery}
+                      onValueChange={setGuideTeamQuery}
+                    />
+                  </div>
+                  <Select value={guideTeamSearchTarget} onValueChange={(value) => {
+                    if (value) setGuideTeamSearchTarget(value as TeamSearchTarget);
+                  }}>
+                    <SelectTrigger
+                      aria-label="เลือกประเภทข้อมูลที่ต้องการค้นหา"
+                      className="w-32 shrink-0"
+                    >
+                      <SelectValue>{teamSearchTargetLabels[guideTeamSearchTarget]}</SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="all">ทั้งหมด</SelectItem>
+                        <SelectItem value="team">ชื่อทีม</SelectItem>
+                        <SelectItem value="character">ตัวละคร</SelectItem>
+                        <SelectItem value="weapon">อาวุธ</SelectItem>
+                        <SelectItem value="artifact">อาร์ติแฟกต์</SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="min-h-0 overflow-y-auto pr-1">
+
+                  {filteredImportTeams.length ? (
+                    <div className="grid gap-4 lg:grid-cols-2">
+                      {filteredImportTeams.map((team) => (
+                        <TeamImportPreviewCard
+                          key={team.id}
+                          team={team}
+                          characters={characters}
+                          weapons={weapons}
+                          artifacts={artifacts}
+                          checked={Boolean(selectedImports[team.id])}
+                          checkboxId={`guide-team-${team.id}`}
+                          onCheckedChange={(checked) => setSelectedImports((current) => {
+                            if (checked) {
+                              return { ...current, [team.id]: toTeamDraft(team) };
+                            }
+                            const next = { ...current };
+                            delete next[team.id];
+                            return next;
+                          })}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <Empty>
+                      <EmptyHeader>
+                        <EmptyTitle>{activeImportGroup?.teams.length ? "ไม่พบ Team ที่ตรงกับคำค้นหา" : "Condition นี้ยังไม่มี Team"}</EmptyTitle>
+                        <EmptyDescription>{activeImportGroup?.teams.length ? "ลองเปลี่ยนคำค้นหาหรือประเภทข้อมูล" : "เลือก Condition หรือ Guide อื่นเพื่อ Import"}</EmptyDescription>
+                      </EmptyHeader>
+                    </Empty>
+                  )}
+                </div>
+              </div>
+            ) : importGuides?.length ? (
+              <div className="flex h-full min-h-0 flex-col gap-4">
+                <div className="relative">
+                  <SearchIcon aria-hidden="true" className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    aria-label="ค้นหา Guide"
+                    className="pl-9"
+                    placeholder="ค้นหาชื่อ Guide หรือตัวละคร…"
+                    value={guideListQuery}
+                    onValueChange={setGuideListQuery}
+                  />
+                </div>
+                <div className="min-h-0 overflow-y-auto pr-1">
+
+                  {filteredImportGuides.length ? (
+                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                      {filteredImportGuides.map((sourceGuide) => (
+                        <Card key={sourceGuide.id} className="relative overflow-hidden py-0 transition-colors hover:bg-muted/50">
+                          <button
+                            type="button"
+                            aria-label={`เปิด Guide ${sourceGuide.name}`}
+                            className="absolute inset-0 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                            onClick={() => void enterImportGuide(sourceGuide.id)}
+                          />
+                          <div className="relative aspect-4/3 bg-muted">
+                            <Image
+                              src={sourceGuide.coverUrl}
+                              alt={`Guide ${sourceGuide.name}`}
+                              fill
+                              sizes="(min-width: 1024px) 30vw, (min-width: 640px) 45vw, 90vw"
+                              className="object-cover"
+                            />
+                          </div>
+                          <CardHeader className="pt-4">
+                            <CardTitle>{sourceGuide.name}</CardTitle>
+                            <CardDescription>{sourceGuide.characterKey}</CardDescription>
+                          </CardHeader>
+                          <CardFooter className="relative pb-4">
+                            <Button type="button" size="xs" variant="outline" onClick={() => void enterImportGuide(sourceGuide.id)}>
+                              เปิด Guide
+                            </Button>
+                          </CardFooter>
+                        </Card>
+                      ))}
+                    </div>
+                  ) : (
+                    <Empty>
+                      <EmptyHeader>
+                        <EmptyTitle>ไม่พบ Guide ที่ตรงกับคำค้นหา</EmptyTitle>
+                        <EmptyDescription>ลองค้นหาด้วยชื่อ Guide หรือตัวละครอื่น</EmptyDescription>
+                      </EmptyHeader>
+                    </Empty>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <Empty>
+                <EmptyHeader>
+                  <EmptyMedia variant="icon"><BookOpenIcon /></EmptyMedia>
+                  <EmptyTitle>ไม่มี Guide อื่นให้เลือก</EmptyTitle>
+                  <EmptyDescription>สร้างหรือบันทึก Team ใน Guide อื่นก่อน</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            )}
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setGuideImportOpen(false)}>ยกเลิก</Button>
+            <Button type="button" disabled={!Object.keys(selectedImports).length} onClick={confirmGuideImport}>
+              Import {Object.keys(selectedImports).length || ""} Team
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={presetOpen} onOpenChange={setPresetOpen}>
+        <DialogContent>
+          <DialogHeader><DialogTitle>Save team preset</DialogTitle><DialogDescription>บันทึก Source Team นี้ไว้ใช้กับ Guide นี้ในเบราว์เซอร์นี้</DialogDescription></DialogHeader>
+          <Field><FieldLabel htmlFor="team-preset-name">ชื่อ Preset</FieldLabel><Input id="team-preset-name" value={presetName} onChange={(event) => setPresetName(event.target.value)} /></Field>
+          <DialogFooter><Button type="button" variant="outline" onClick={() => setPresetOpen(false)}>ยกเลิก</Button><Button type="button" disabled={!presetName.trim()} onClick={savePreset}>บันทึก</Button></DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  );
+}
diff --git a/components/admin/editors/weapon-editor.tsx b/components/admin/editors/weapon-editor.tsx
new file mode 100644
index 0000000..92b34c8
--- /dev/null
+++ b/components/admin/editors/weapon-editor.tsx
@@ -0,0 +1,506 @@
+"use client";
+
+import Image from "@/components/ui/resilient-image";
+import { GripVerticalIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { saveWeaponSection } from "@/app/admin/actions";
+import { AutosaveStatus } from "@/components/admin/autosave-status";
+import { DeleteConfirmationDialog } from "@/components/admin/ui/delete-confirmation-dialog";
+import { WeaponSelect } from "@/components/admin/ui/catalog-select";
+import { Button } from "@/components/ui/button";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { ClearableInput as Input } from "@/components/admin/ui/clearable-input";
+import { Textarea } from "@/components/ui/textarea";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { useAutosave } from "@/hooks/use-autosave";
+import { adminDraftKey } from "@/lib/editor/local-draft";
+import { weaponSectionSchema } from "@/lib/guides/schemas";
+import { supportsWeaponType } from "@/lib/catalog/lunaris";
+import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { finalizePercentInput, normalizePercentInput } from "@/lib/guides/percent-input";
+import { formatGuideValidationIssues } from "@/lib/guides/validation-messages";
+import { cn } from "@/lib/utils";
+import { type EditorBase, hasIssuePrefix, parseEditorDraft, ConditionControls, reorderConditions, createClientId, ConditionRenameDialog, SELECTED_TOGGLE_CLASS } from "./shared";
+
+
+export function SortableWeaponCard({
+  id,
+  children,
+}: {
+  id: string;
+  children: (dragHandle: ReactNode) => ReactNode;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn(isDragging && "opacity-60")}
+    >
+      {children(
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          className="touch-none"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVerticalIcon />
+          <span className="sr-only">ลากเพื่อจัดลำดับอาวุธ</span>
+        </Button>,
+      )}
+    </div>
+  );
+}
+
+
+export 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 weaponSensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+  const [note, setNote] = useState(initial.sectionNote ?? "");
+  const [groups, setGroups] = useState(() => {
+    const source = initial.weaponGroups.length
+      ? initial.weaponGroups
+      : [{ id: "weapon-condition-default", name: null, note: null, iconMediaId: null, iconUrl: null, rows: [] }];
+    return source.map((group) => ({
+      clientId: group.id,
+      name: group.name ?? "",
+      note: group.note ?? "",
+      iconMediaId: group.iconMediaId ?? null,
+      iconUrl: group.iconUrl ?? null,
+      rows: group.rows.map((row) => ({
+      clientId: row.id,
+      weaponKey: row.weaponKey,
+      refinement: row.refinement,
+      overallPercent: row.overallPercent ?? "",
+      personalPercent: row.personalPercent ?? "",
+      note: row.note ?? "",
+      })),
+    }));
+  });
+  const [activeGroupIndex, setActiveGroupIndex] = useState(0);
+  const [renamingWeaponGroupIndex, setRenamingWeaponGroupIndex] = useState<number | null>(null);
+  const rows = groups[activeGroupIndex]?.rows ?? [];
+  const setRows = (update: typeof rows | ((current: typeof rows) => typeof rows)) =>
+    setGroups((current) => current.map((group, index) => index === activeGroupIndex
+      ? { ...group, rows: typeof update === "function" ? update(group.rows) : update }
+      : group));
+  const value = {
+    note: note.trim() || null,
+    groups: groups.map((group) => ({
+      name: group.name.trim() || null,
+      note: group.note.trim() || null,
+      iconMediaId: group.iconMediaId,
+      rows: group.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 weaponIssue = (...path: (string | number)[]) =>
+    !validation.success && hasIssuePrefix(validation.error.issues, ...path);
+  const localDraft = { note, groups, activeGroupIndex };
+  const autosave = useAutosave({
+    guideId: guide.id,
+    scope: "weapon",
+    value,
+    valid: validation.success,
+    initialVersion: guide.version,
+    persist: (next, expectedVersion, intent) =>
+      saveWeaponSection(guide.id, { ...next, expectedVersion }, intent),
+    storageKey: adminDraftKey(guide.id, "weapon"),
+    localDraft,
+    parseLocalDraft: (candidate) =>
+      parseEditorDraft<typeof localDraft>(candidate, ["groups"], ["note"]),
+    restoreLocalDraft: (draft) => {
+      setNote(draft.note);
+      setGroups(draft.groups.map((group) => ({ ...group, name: group.name ?? "" })));
+      setActiveGroupIndex(draft.activeGroupIndex ?? 0);
+    },
+  });
+  const handleWeaponDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return;
+    setRows((current) => {
+      const from = current.findIndex((row) => row.clientId === active.id);
+      const to = current.findIndex((row) => row.clientId === over.id);
+      return from === -1 || to === -1 ? current : arrayMove(current, from, to);
+    });
+  };
+  return (
+    <Card>
+      <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>
+        <ConditionControls
+          ariaLabel="เลือกเงื่อนไขอาวุธ"
+          items={groups}
+          activeIndex={activeGroupIndex}
+          onActiveIndexChange={setActiveGroupIndex}
+          onRename={setRenamingWeaponGroupIndex}
+          onReorder={(from, to) => {
+            const reordered = reorderConditions(groups, activeGroupIndex, from, to);
+            setGroups(reordered.items);
+            setActiveGroupIndex(reordered.activeIndex);
+          }}
+          onAdd={(details) => {
+            setGroups([...groups, { clientId: createClientId("weapon-condition"), ...details, note: "", rows: [] }]);
+            setActiveGroupIndex(groups.length);
+          }}
+          onDuplicate={() => {
+            const source = groups[activeGroupIndex];
+            if (!source) return;
+            setGroups([
+              ...groups,
+              {
+                clientId: createClientId("weapon-condition"),
+                name: source.name,
+                note: source.note,
+                iconMediaId: source.iconMediaId,
+                iconUrl: source.iconUrl,
+                rows: source.rows.map((row) => ({
+                  ...row,
+                  clientId: createClientId("weapon"),
+                })),
+              },
+            ]);
+            setActiveGroupIndex(groups.length);
+          }}
+          onDelete={() => {
+            const next = groups.filter((_, index) => index !== activeGroupIndex);
+            setGroups(next);
+            setActiveGroupIndex(Math.min(activeGroupIndex, next.length - 1));
+          }}
+        />
+        <ConditionRenameDialog
+          open={renamingWeaponGroupIndex !== null}
+          fallback={`Condition ${(renamingWeaponGroupIndex ?? 0) + 1}`}
+          value={renamingWeaponGroupIndex === null ? "" : groups[renamingWeaponGroupIndex]?.name ?? ""}
+          iconUrl={renamingWeaponGroupIndex === null ? null : groups[renamingWeaponGroupIndex]?.iconUrl ?? null}
+          onOpenChange={(open) => { if (!open) setRenamingWeaponGroupIndex(null); }}
+          onChange={(name) => setGroups(groups.map((group, index) => index === renamingWeaponGroupIndex ? { ...group, name } : group))}
+          onIconChange={(icon) => setGroups(groups.map((group, index) => index === renamingWeaponGroupIndex ? { ...group, ...icon } : group))}
+        />
+        <Field>
+          <FieldLabel htmlFor={`weapon-condition-note-${groups[activeGroupIndex]?.clientId}`}>
+            Condition note (optional)
+          </FieldLabel>
+          <Textarea
+            id={`weapon-condition-note-${groups[activeGroupIndex]?.clientId}`}
+            value={groups[activeGroupIndex]?.note ?? ""}
+            onChange={(event) => setGroups(groups.map((group, index) => index === activeGroupIndex ? { ...group, note: event.target.value } : group))}
+          />
+        </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
+                                  sizes="40px"
+                                  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" data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex, "weaponKey")}>
+                                <FieldLabel>อาวุธ</FieldLabel>
+                                <WeaponSelect
+                                  items={compatibleWeapons}
+                                  value={row.weaponKey}
+                                  invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex, "weaponKey")}
+                                  placeholder="ค้นหาชื่ออาวุธ…"
+                                  rarityBackground
+                                  onValueChange={(weaponKey) =>
+                                    setRows(
+                                      rows.map((item) =>
+                                        item.clientId === row.clientId
+                                          ? { ...item, weaponKey }
+                                          : item,
+                                      ),
+                                    )
+                                  }
+                                />
+                              </Field>
+                              <Field className="shrink-0" data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}>
+                                <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: next.slice(1),
+                                              }
+                                            : item,
+                                        ),
+                                      );
+                                  }}
+                                >
+                                  {["1", "2", "3", "4", "5", "1-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 data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}>
+                                <FieldLabel>Overall %</FieldLabel>
+                                <Input
+                                  type="text"
+                                  inputMode="decimal"
+                                  value={row.overallPercent}
+                                  aria-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}
+                                  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 data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}>
+                                <FieldLabel>Personal %</FieldLabel>
+                                <Input
+                                  type="text"
+                                  inputMode="decimal"
+                                  value={row.personalPercent}
+                                  aria-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}
+                                  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}
+          conflictVersion={autosave.conflictVersion}
+          canOverwrite={autosave.canOverwrite}
+          onReloadLatest={autosave.reloadLatest}
+          onOverwrite={autosave.overwrite}
+          issues={
+            validation.success
+              ? []
+              : formatGuideValidationIssues("weapon", validation.error.issues)
+          }
+          onSave={autosave.saveNow}
+        />
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index 8f8190f..506592b 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -1,5154 +1,27 @@
 "use client";
 
-import { searchItems } from "@/lib/search";
-
 import dynamic from "next/dynamic";
-import Image from "@/components/ui/resilient-image";
-import { useRouter } from "next/navigation";
-import {
-  ArrowLeftIcon,
-  BookOpenIcon,
-  ClipboardCopyIcon,
-  ClipboardPasteIcon,
-  CopyIcon,
-  GripVerticalIcon,
-  HeartPulseIcon,
-  MousePointerClickIcon,
-  PencilIcon,
-  PlusIcon,
-  RefreshCcwIcon,
-  SearchIcon,
-  SparklesIcon,
-  Trash2Icon,
-  XIcon,
-} from "lucide-react";
-import { useEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode, type SetStateAction } from "react";
-import { toast } from "sonner";
-import {
-  closestCenter,
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-} from "@dnd-kit/core";
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-
-import {
-  deleteGuideExtra,
-  saveArtifactSection,
-  saveConstellationSection,
-  saveGuideExtra,
-  listTeamImportGuides,
-  listTeamImportsForCharacter,
-  loadTeamImportGuide,
-  saveTeamSection,
-  saveWeaponSection,
-} from "@/app/admin/actions";
-import { AutosaveStatus } from "@/components/admin/autosave-status";
-import { DeleteConfirmationDialog } from "@/components/admin/ui/delete-confirmation-dialog";
-import {
-  ArtifactSelect,
-  CatalogDropdown,
-  CharacterSelect,
-  WeaponSelect,
-} from "@/components/admin/ui/catalog-select";
-import { ConstellationSelect, RefinementSelect } from "@/components/admin/ui/option-select";
-import { MediaUploader } from "@/components/admin/media-uploader";
-import { ConditionTabIcon } from "@/components/public/condition-switcher";
-import { ScrollableNav } from "@/components/public/scrollable-nav";
-import { LunarisText } from "@/components/public/lunaris-text";
-import { TeamArtifactIcon } from "@/components/public/team-search";
-import { SimpleTooltip } from "@/components/tooltip";
-import type { CatalogTextNode } from "@/lib/catalog/lunaris";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  ColorPicker,
-  ColorPickerEyeDropper,
-  ColorPickerHue,
-  ColorPickerSelection,
-} from "@/components/ui/color-picker";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-} from "@/components/ui/combobox";
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/components/ui/empty";
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from "@/components/ui/field";
-import { ClearableInput as Input } from "@/components/admin/ui/clearable-input";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
-import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Switch } from "@/components/ui/switch";
-import { Toggle } from "@/components/ui/toggle";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { useAutosave } from "@/hooks/use-autosave";
-import { adminDraftKey } from "@/lib/editor/local-draft";
-import {
-  artifactSectionSchema,
-  constellationSectionSchema,
-  extraSectionSchema,
-  mainStatOptions,
-  substatOptions,
-  talentLevelOptions,
-  teamSectionSchema,
-  weaponSectionSchema,
-} from "@/lib/guides/schemas";
-import {
-  normalizeTargetStat,
-  recommendedStatElement,
-  recommendedStatIconName,
-  recommendedStatOptionConflicts,
-  targetStatDefaults,
-  targetStatIconName,
-  targetStatOptions,
-  statPriorityColorClass,
-} from "@/lib/guides/stats";
-import { elementBackgroundColor, elementIconFilter } from "@/lib/catalog/element";
-import { supportsWeaponType } from "@/lib/catalog/lunaris";
-import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
-import { isCustomTravelerKey } from "@/lib/catalog/travelers";
-import { toTeamDraft } from "@/lib/guides/team-draft";
-import {
-  applyPresetFields,
-  applyTeamFields,
-  cloneTeamImports,
-  filterTeamImportsByName,
-  findInvalidTeamCatalogReference,
-  findUnsupportedTeamWeapon,
-  limitPresets,
-  parseTeamPresets,
-  parseTeamTransfer,
-  serializeTeamTransfer,
-  teamConstellationLabel,
-  teamRefinementLabel,
-  teamTransferFileName,
-  teamPresetCookieKey,
-  teamPresetStorageKey,
-  type TeamApplySelection,
-  type TeamMemberApplyField,
-  type TeamToolMember,
-  type TeamPreset,
-  type TeamToolValue,
-} from "@/lib/guides/team-tools";
-import {
-  searchTeams,
-  type TeamSearchTarget,
-} from "@/lib/guides/team-search";
-import {
-  normalizeTalentPriorities,
-  reorderTalentPriorities,
-  type TalentPriority,
-  type TalentRelation,
-} from "@/lib/guides/talents";
-import {
-  finalizePercentInput,
-  normalizePercentInput,
-} from "@/lib/guides/percent-input";
-import { formatGuideValidationIssues } from "@/lib/guides/validation-messages";
-import { normalizeExtraRichText } from "@/lib/rich-text";
-import { createExtraSheet, type ExtraSheet } from "@/lib/guides/extra-sheet";
-import { cn } from "@/lib/utils";
+import type { GuideSectionEditorProps } from "./editors/shared";
 
-type CatalogItem = {
-  key: string;
-  name: string;
-  aliases?: string[];
-  imageUrl: string;
-  rarity?: number | null;
-  weaponType?: string | null;
-  element?: string | null;
-  elementIconUrl?: string | null;
-};
-const teamSearchTargetLabels: Record<TeamSearchTarget, string> = {
-  all: "ทั้งหมด",
-  team: "ชื่อทีม",
-  character: "ตัวละคร",
-  weapon: "อาวุธ",
-  artifact: "อาร์ติแฟกต์",
-};
-type ExtraCatalogItem = {
-  kind: "character" | "weapon" | "artifact";
-  key: string;
-};
-const teamMemberApplyOptions = [
-  ["characterKey", "Character"],
-  ["weaponKey", "Weapon"],
-  ["artifactKey", "Artifact 1"],
-  ["secondArtifactKey", "Artifact 2"],
-  ["constellation", "C"],
-  ["refinement", "R"],
-  ["damage", "Damage"],
-] as const satisfies readonly (readonly [TeamMemberApplyField, string])[];
-const multipleApplyStorageKey = (guideId: string) =>
-  `buzz-sheet:team-multiple-apply:${guideId}`;
-const DEFAULT_CONSTELLATION_CONDITION_NOTE = "C0 = 100%";
-type Guide = {
-  id: string;
-  characterKey: string;
-  version: number;
-  name: string;
-};
-type WeaponValue = {
-  id: string;
-  weaponKey: string;
-  refinement: string;
-  overallPercent: string | null;
-  personalPercent: string | null;
-  note: string | null;
-  weapon: CatalogItem;
-};
-type WeaponGroupValue = {
-  id: string;
-  name: string | null;
-  note: string | null;
-  iconMediaId: string | null;
-  iconUrl: string | null;
-  rows: WeaponValue[];
-};
-type ArtifactTierValue = {
-  id: string;
-  name: string;
-  rows: Array<{
-    firstArtifactKey: string;
-    secondArtifactKey: string | null;
-    percent: string;
-    note: string | null;
-  }>;
-};
-type ArtifactValue = {
-  id: string;
-  name: string | null;
-  note: string | null;
-  iconMediaId: string | null;
-  iconUrl: string | null;
-  tiers: ArtifactTierValue[];
-};
-type ArtifactProfile = {
-  sands: string[];
-  goblet: string[];
-  circlet: string[];
-  substats: string[];
-  recommendedConditions: Array<{
-    name?: string | null;
-    note: string | null;
-    iconMediaId: string | null;
-    iconUrl: string | null;
-    sands: string[];
-    goblet: string[];
-    circlet: string[];
-    substats: string[];
-  }>;
-  targets: Array<{ stat: string; value: string }>;
-  targetConditions: Array<{
-    name?: string | null;
-    note: string | null;
-    iconMediaId: string | null;
-    iconUrl: string | null;
-    rows: 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;
-  name: string | null;
-  note: string | null;
-  iconMediaId: string | null;
-  iconUrl: string | null;
-  rows: ConstellationValue[];
-};
-type CatalogConstellation = {
-  level: number;
-  name: string;
-  description: string;
-  descriptionNodes?: CatalogTextNode[];
-  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: string;
-    refinement: string;
-    damage: string;
-  }>;
-};
-type TeamGroupValue = {
-  id: string;
-  name: string | null;
-  note: string | null;
-  iconMediaId: string | null;
-  iconUrl: string | null;
-  teams: TeamValue[];
-};
-
-let clientIdCounter = 0;
-const DEFAULT_EXTRA_BACKGROUND_COLOR = "#24232C";
-const RichTextEditor = dynamic(
-  () => import("@/components/rich-text-editor").then((module) => module.RichTextEditor),
-  {
-    ssr: false,
-    loading: () => <Skeleton className="h-36 w-full" />,
-  },
-);
-const ExtraSheetEditor = dynamic(
-  () => import("@/components/admin/extra-sheet-editor").then((module) => module.ExtraSheetEditor),
-  {
-    ssr: false,
-    loading: () => <Skeleton className="h-48 w-full" />,
-  },
-);
-
-function createClientId(prefix: string): string {
-  const browserCrypto = globalThis.crypto;
-  if (typeof browserCrypto?.randomUUID === "function")
-    return `${prefix}-${browserCrypto.randomUUID()}`;
-  clientIdCounter += 1;
-  return `${prefix}-${Date.now()}-${clientIdCounter}`;
+function EditorLoading() {
+  return <Skeleton className="h-64 w-full" aria-label="Loading editor" />;
 }
 
-function ConditionRenameDialog({
-  open,
-  fallback,
-  value,
-  iconUrl,
-  onOpenChange,
-  onChange,
-  onIconChange,
-}: {
-  open: boolean;
-  fallback: string;
-  value: string;
-  iconUrl: string | null;
-  onOpenChange: (open: boolean) => void;
-  onChange: (value: string) => void;
-  onIconChange: (icon: { iconMediaId: string | null; iconUrl: string | null }) => void;
-}) {
-  const [uploading, setUploading] = useState(false);
-  return (
-    <Dialog open={open} onOpenChange={(next) => { if (!uploading) onOpenChange(next); }}>
-      <DialogContent showCloseButton={!uploading}>
-        <DialogHeader>
-          <DialogTitle>Edit condition</DialogTitle>
-          <DialogDescription>
-            Leave blank to use {fallback}.
-          </DialogDescription>
-        </DialogHeader>
-        <Field>
-          <FieldLabel htmlFor="condition-name">Condition name</FieldLabel>
-          <Input
-            id="condition-name"
-            autoFocus
-            maxLength={120}
-            placeholder={fallback}
-            value={value}
-            onChange={(event) => onChange(event.target.value)}
-          />
-        </Field>
-        <ConditionIconField iconUrl={iconUrl} onChange={onIconChange} onUploadingChange={setUploading} />
-        <DialogFooter>
-          <Button type="button" disabled={uploading} onClick={() => onOpenChange(false)}>Done</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function ConditionIconField({ iconUrl, onChange, onUploadingChange }: {
-  iconUrl: string | null;
-  onChange: (icon: { iconMediaId: string | null; iconUrl: string | null }) => void;
-  onUploadingChange?: (uploading: boolean) => void;
-}) {
-  return <div className="flex flex-col gap-3">
-    {iconUrl ? <div className="flex items-center gap-3">
-      <Image src={iconUrl} alt="" width={40} height={40} className="size-10 object-contain" />
-      <Button type="button" variant="outline" size="sm" onClick={() => onChange({ iconMediaId: null, iconUrl: null })}>Remove icon</Button>
-    </div> : null}
-    <MediaUploader onReady={(asset) => onChange({ iconMediaId: asset.id, iconUrl: asset.url })} onUploadingChange={onUploadingChange} />
-  </div>;
-}
-
-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;
-  if (stringKeys.some((key) => typeof record[key] !== "string")) return null;
-  return value as Draft;
-}
-
-function hasIssuePrefix(
-  issues: readonly { path: readonly PropertyKey[] }[],
-  ...path: (string | number)[]
-): boolean {
-  return issues.some((issue) => path.every((part, index) => issue.path[index] === part));
-}
-
-export interface GuideSectionEditorProps {
-  section: "weapon" | "artifact" | "constellations" | "team" | "extra";
-  extraSectionId?: string;
-  guide: Guide;
-  weapons: CatalogItem[];
-  artifacts: CatalogItem[];
-  characters: CatalogItem[];
-  catalogConstellations: CatalogConstellation[];
-  catalogTalents: CatalogTalent[];
-  initial: {
-    sectionNote: string | null;
-    weaponGroups: WeaponGroupValue[];
-    artifactGroups: ArtifactValue[];
-    artifactProfile: ArtifactProfile;
-    constellationGroups: ConstellationGroupValue[];
-    teams: TeamValue[];
-    teamGroups: TeamGroupValue[];
-    extras: Array<{
-      id: string;
-      title: string;
-      rows: Array<{
-        id: string;
-        mediaId: string | null;
-        heading: string;
-        body: string;
-        percent: string | null;
-        backgroundColor: string | null;
-        textColor: string | null;
-        sheet: ExtraSheet | null;
-        catalogItems: ExtraCatalogItem[];
-        highlights: Array<{ text: string; color: string }>;
-        imageUrl: string | null;
-        imageWidth: number | null;
-        imageHeight: number | null;
-      }>;
-    }>;
-  };
-}
-
-const SELECTED_TOGGLE_CLASS =
-  "aria-pressed:border-primary aria-pressed:ring-2 aria-pressed:ring-primary/30";
-
-function StatSelect({
-  label,
-  options,
-  value,
-  onChange,
-  elementIconUrls,
-  priorityColors = false,
-}: {
-  label: string;
-  options: readonly string[];
-  value: string[];
-  onChange: (value: string[]) => void;
-  elementIconUrls: Record<string, string>;
-  priorityColors?: boolean;
-}) {
-  return (
-    <Field>
-      <FieldLabel>{label}</FieldLabel>
-      <Select
-        multiple
-        value={value}
-        onValueChange={onChange}
-      >
-        <SelectTrigger className="w-full">
-          <StatIcons values={value} elementIconUrls={elementIconUrls} />
-          <SelectValue placeholder="Select recommended stats…">
-            {priorityColors && value.length
-              ? () => value.map((selected, index) => (
-                  <span key={selected} className={statPriorityColorClass(index)}>
-                    {selected}{index < value.length - 1 ? "," : ""}
-                  </span>
-                ))
-              : undefined}
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent className="w-max min-w-(--anchor-width) max-w-(--available-width)">
-          <SelectGroup>
-            {options.map((option) => (
-              <SelectItem
-                key={option}
-                value={option}
-                disabled={recommendedStatOptionConflicts(option, value)}
-                className={priorityColors && value.includes(option)
-                  ? statPriorityColorClass(value.indexOf(option))
-                  : undefined}
-              >
-                <StatIcons values={[option]} elementIconUrls={elementIconUrls} />
-                {option}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </Field>
-  );
-}
-
-function StatIcons({
-  values,
-  elementIconUrls = {},
-}: {
-  values: readonly string[];
-  elementIconUrls?: Record<string, string>;
-}) {
-  const icons = values.flatMap((value) => {
-    const element = recommendedStatElement(value);
-    if (element && elementIconUrls[element]) {
-      return [{ name: element, src: elementIconUrls[element], element }];
-    }
-    const targetIcon = targetStatIconName(value);
-    if (targetIcon) {
-      return [{ name: targetIcon, src: `/icon/stats/${targetIcon}.webp` }];
-    }
-    const recommendedIcon = recommendedStatIconName(value);
-    return recommendedIcon
-      ? [{
-          name: recommendedIcon,
-          src: `/icon/stats/${recommendedIcon}.${recommendedIcon === "elemental-bonus" ? "svg" : "webp"}`,
-        }]
-      : [];
-  });
-  if (!icons.length) return null;
-  return (
-    <span className="flex shrink-0 items-center gap-0.5" aria-hidden="true">
-      {icons.map((icon) => (
-        <StatIcon key={icon.name} {...icon} />
-      ))}
-    </span>
-  );
-}
-
-function StatIcon({
-  name,
-  src,
-  element,
-}: {
-  name: string;
-  src: string;
-  element?: string;
-}) {
-  const [hasError, setHasError] = useState(false);
-  if (hasError) {
-    const PlaceholderIcon =
-      name === "healing-bonus" ? HeartPulseIcon : SparklesIcon;
-    return (
-      <PlaceholderIcon
-        className="size-5 text-muted-foreground"
-        aria-hidden="true"
-      />
-    );
-  }
-  return (
-    <Image
-      src={src}
-      alt=""
-      width={20}
-      height={20}
-      className={cn("size-5 object-contain", !element && "brightness-0 invert")}
-      style={element ? { filter: elementIconFilter(element) } : undefined}
-      onError={() => setHasError(true)}
-    />
-  );
-}
-
-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
-      />
-      <ComboboxContent>
-        <ComboboxEmpty>ไม่พบระดับ</ComboboxEmpty>
-        <ComboboxList>
-          {(level) => (
-            <ComboboxItem key={level} value={level}>
-              ระดับ {level}
-            </ComboboxItem>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  );
-}
-
-function SortableTalentCard({
-  talent,
-  catalogTalent,
-  onLevelChange,
-}: {
-  talent: TalentPriority;
-  catalogTalent?: CatalogTalent;
-  onLevelChange: (level?: string) => void;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: talent.type });
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(transform), transition }}
-      className={cn("w-full shrink-0 sm:w-56", isDragging && "opacity-60")}
-    >
-      <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>
-          <CardAction>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              className="touch-none"
-              {...attributes}
-              {...listeners}
-            >
-              <GripVerticalIcon />
-              <span className="sr-only">
-                ลากเพื่อจัดลำดับ {catalogTalent?.name ?? talent.type}
-              </span>
-            </Button>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <Field>
-            <FieldLabel>ระดับเป้าหมาย</FieldLabel>
-            <TalentLevelPicker value={talent.level} onChange={onLevelChange} />
-          </Field>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-function SortableWeaponCard({
-  id,
-  children,
-}: {
-  id: string;
-  children: (dragHandle: ReactNode) => ReactNode;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id });
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(transform), transition }}
-      className={cn(isDragging && "opacity-60")}
-    >
-      {children(
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
-          className="touch-none"
-          {...attributes}
-          {...listeners}
-        >
-          <GripVerticalIcon />
-          <span className="sr-only">ลากเพื่อจัดลำดับอาวุธ</span>
-        </Button>,
-      )}
-    </div>
-  );
-}
-
-function SortableArtifactRow({
-  id,
-  children,
-}: {
-  id: string;
-  children: (dragHandle: ReactNode) => ReactNode;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id });
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(transform), transition }}
-      className={cn(isDragging && "opacity-60")}
-    >
-      {children(
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
-          className="touch-none"
-          {...attributes}
-          {...listeners}
-        >
-          <GripVerticalIcon />
-          <span className="sr-only">ลากเพื่อจัดลำดับ Artifact</span>
-        </Button>,
-      )}
-    </div>
-  );
-}
-
-function SortableTeamItem({
-  id,
-  children,
-}: {
-  id: string;
-  children: (dragHandle: ReactNode) => ReactNode;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id });
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(transform), transition }}
-      className={cn("min-w-0", isDragging && "opacity-60")}
-    >
-      {children(
-        <SimpleTooltip text="ลากเพื่อจัดลำดับ Team">
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-sm"
-            className="touch-none"
-            {...attributes}
-            {...listeners}
-          >
-            <GripVerticalIcon />
-            <span className="sr-only">ลากเพื่อจัดลำดับ Team</span>
-          </Button>
-        </SimpleTooltip>,
-      )}
-    </div>
-  );
-}
-
-function SortableTeamMember({
-  id,
-  children,
-}: {
-  id: string;
-  children: (dragHandle: ReactNode) => ReactNode;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id });
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(transform), transition }}
-      className={cn(isDragging && "opacity-60")}
-    >
-      {children(
-        <SimpleTooltip text="ลากเพื่อย้ายตำแหน่งตัวละคร">
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-sm"
-            className="touch-none"
-            {...attributes}
-            {...listeners}
-          >
-            <GripVerticalIcon />
-            <span className="sr-only">ลากเพื่อย้ายตำแหน่งตัวละคร</span>
-          </Button>
-        </SimpleTooltip>,
-      )}
-    </div>
-  );
-}
-
-function SortableExtraItem({
-  id,
-  label,
-  children,
-}: {
-  id: string;
-  label: string;
-  children: (dragHandle: ReactNode) => ReactNode;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id });
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(transform), transition }}
-      className={cn(isDragging && "opacity-60")}
-    >
-      {children(
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
-          className="touch-none"
-          {...attributes}
-          {...listeners}
-        >
-          <GripVerticalIcon />
-          <span className="sr-only">{label}</span>
-        </Button>,
-      )}
-    </div>
-  );
-}
-
-type ConditionNavItem = {
-  clientId: string;
-  name: string;
-  iconMediaId: string | null;
-  iconUrl: string | null;
-};
-
-function SortableConditionTab({
-  item,
-  index,
-  active,
-  onSelect,
-  onRename,
-}: {
-  item: ConditionNavItem;
-  index: number;
-  active: boolean;
-  onSelect: () => void;
-  onRename: () => void;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: item.clientId });
-  const label = item.name.trim() || `Condition ${index + 1}`;
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(transform), transition }}
-      className={cn("flex shrink-0 items-center rounded-md", isDragging && "z-10 opacity-60")}
-    >
-      {index > 0 ? <Separator orientation="vertical" aria-hidden="true" className="mx-1 h-6" /> : null}
-      <TabsTrigger
-        value={item.clientId}
-        onClick={onSelect}
-        onDoubleClick={onRename}
-      >
-        <ConditionTabIcon iconUrl={item.iconUrl} />
-        <span className="text-base">{label}</span>
-        {index === 0 ? <Badge variant={active ? "secondary" : "outline"}>Default</Badge> : null}
-      </TabsTrigger>
-      <SimpleTooltip text={`ลากเพื่อจัดลำดับ ${label}`}>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
-          className="touch-none rounded-l-none"
-          {...attributes}
-          {...listeners}
-        >
-          <GripVerticalIcon />
-          <span className="sr-only">ลากเพื่อจัดลำดับ {label}</span>
-        </Button>
-      </SimpleTooltip>
-    </div>
-  );
-}
-
-function SortableConditionSwitcher({
-  ariaLabel,
-  items,
-  activeIndex,
-  onActiveIndexChange,
-  onReorder,
-  onRename,
-}: {
-  ariaLabel: string;
-  items: ConditionNavItem[];
-  activeIndex: number;
-  onActiveIndexChange: (index: number) => void;
-  onReorder: (from: number, to: number) => void;
-  onRename: (index: number) => void;
-}) {
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  );
-  const activeId = items[activeIndex]?.clientId;
-
-  return (
-    <ScrollableNav ariaLabel={ariaLabel} className="min-w-0 flex-1">
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={({ active, over }) => {
-          if (!over || active.id === over.id) return;
-          const from = items.findIndex((item) => item.clientId === active.id);
-          const to = items.findIndex((item) => item.clientId === over.id);
-          if (from !== -1 && to !== -1) onReorder(from, to);
-        }}
-      >
-        <SortableContext items={items.map((item) => item.clientId)} strategy={rectSortingStrategy}>
-          <Tabs value={activeId} onValueChange={(value) => {
-            const index = items.findIndex((item) => item.clientId === value);
-            if (index !== -1) onActiveIndexChange(index);
-          }}>
-            <TabsList aria-label={ariaLabel} className="shrink-0 gap-1">
-              {items.map((item, index) => (
-                <SortableConditionTab
-                  key={item.clientId}
-                  item={item}
-                  index={index}
-                  active={item.clientId === activeId}
-                  onSelect={() => onActiveIndexChange(index)}
-                  onRename={() => onRename(index)}
-                />
-              ))}
-            </TabsList>
-          </Tabs>
-        </SortableContext>
-      </DndContext>
-    </ScrollableNav>
-  );
-}
-
-function ConditionControls({
-  onAdd,
-  onDuplicate,
-  onDelete,
-  ...switcherProps
-}: ComponentProps<typeof SortableConditionSwitcher> & {
-  onAdd: (details: { name: string; iconMediaId: string | null; iconUrl: string | null }) => void;
-  onDuplicate?: () => void;
-  onDelete: () => void;
-}) {
-  const { items, activeIndex } = switcherProps;
-  const atLimit = items.length >= 20;
-  const [createOpen, setCreateOpen] = useState(false);
-  const [newName, setNewName] = useState("");
-  const [newIcon, setNewIcon] = useState<{ iconMediaId: string | null; iconUrl: string | null }>({ iconMediaId: null, iconUrl: null });
-  const [uploading, setUploading] = useState(false);
-  const closeCreate = () => {
-    if (uploading) return;
-    setCreateOpen(false);
-    setNewName("");
-    setNewIcon({ iconMediaId: null, iconUrl: null });
-  };
-
-  return (
-    <div className="flex flex-wrap gap-2">
-      <SortableConditionSwitcher {...switcherProps} />
-      <SimpleTooltip text="เพิ่ม Condition">
-        <Button type="button" size="icon" variant="outline" aria-label="เพิ่ม Condition" disabled={atLimit} onClick={() => setCreateOpen(true)}>
-          <PlusIcon />
-        </Button>
-      </SimpleTooltip>
-      <Dialog open={createOpen} onOpenChange={(open) => { if (open) setCreateOpen(true); else closeCreate(); }}>
-        <DialogContent showCloseButton={!uploading}>
-          <DialogHeader>
-            <DialogTitle>Create condition</DialogTitle>
-            <DialogDescription>Enter a name and optionally upload an icon.</DialogDescription>
-          </DialogHeader>
-          <Field>
-            <FieldLabel htmlFor="new-condition-name">Condition name</FieldLabel>
-            <Input id="new-condition-name" autoFocus maxLength={120} value={newName} onChange={(event) => setNewName(event.target.value)} />
-          </Field>
-          <ConditionIconField iconUrl={newIcon.iconUrl} onChange={setNewIcon} onUploadingChange={setUploading} />
-          <DialogFooter>
-            <Button type="button" variant="outline" disabled={uploading} onClick={closeCreate}>Cancel</Button>
-            <Button type="button" disabled={!newName.trim() || uploading} onClick={() => {
-              onAdd({ name: newName.trim(), ...newIcon });
-              closeCreate();
-            }}>Create</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <SimpleTooltip text="Edit Condition">
-        <Button type="button" size="icon" variant="outline" aria-label="Edit Condition" disabled={!items[activeIndex]} onClick={() => switcherProps.onRename(activeIndex)}>
-          <PencilIcon />
-        </Button>
-      </SimpleTooltip>
-      {onDuplicate ? (
-        <SimpleTooltip text="Duplicate Condition">
-          <Button type="button" size="icon" variant="outline" aria-label="Duplicate Condition" disabled={atLimit || !items[activeIndex]} onClick={onDuplicate}>
-            <CopyIcon />
-          </Button>
-        </SimpleTooltip>
-      ) : null}
-      {items.length > 1 ? (
-        <DeleteConfirmationDialog
-          trigger={<Button type="button" size="icon" variant="outline" aria-label="ลบ Condition นี้" />}
-          triggerTooltip="ลบ Condition นี้"
-          type="Condition"
-          description="ข้อมูลทั้งหมดใน Condition นี้จะถูกลบออก"
-          onConfirm={onDelete}
-        >
-          <Trash2Icon />
-          <span className="sr-only">ลบ Condition นี้</span>
-        </DeleteConfirmationDialog>
-      ) : null}
-    </div>
-  );
-}
-
-function reorderConditions<T extends ConditionNavItem>(
-  items: T[],
-  activeIndex: number,
-  from: number,
-  to: number,
-) {
-  const activeId = items[activeIndex]?.clientId;
-  const reordered = arrayMove(items, from, to);
-  return {
-    items: reordered,
-    activeIndex: Math.max(0, reordered.findIndex((item) => item.clientId === activeId)),
-  };
-}
+const WeaponEditor = dynamic(() => import("./editors/weapon-editor").then((module) => module.WeaponEditor), { loading: EditorLoading });
+const ArtifactEditor = dynamic(() => import("./editors/artifact-editor").then((module) => module.ArtifactEditor), { loading: EditorLoading });
+const ConstellationEditor = dynamic(() => import("./editors/constellation-editor").then((module) => module.ConstellationEditor), { loading: EditorLoading });
+const TeamEditor = dynamic(() => import("./editors/team-editor").then((module) => module.TeamEditor), { loading: EditorLoading });
+const ExtraEditor = dynamic(() => import("./editors/extra-editor").then((module) => module.ExtraEditor), { loading: EditorLoading });
 
 export function GuideSectionEditor(props: GuideSectionEditorProps) {
   return (
     <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>
   );
 }
-
-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 weaponSensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-  const [note, setNote] = useState(initial.sectionNote ?? "");
-  const [groups, setGroups] = useState(() => {
-    const source = initial.weaponGroups.length
-      ? initial.weaponGroups
-      : [{ id: "weapon-condition-default", name: null, note: null, iconMediaId: null, iconUrl: null, rows: [] }];
-    return source.map((group) => ({
-      clientId: group.id,
-      name: group.name ?? "",
-      note: group.note ?? "",
-      iconMediaId: group.iconMediaId ?? null,
-      iconUrl: group.iconUrl ?? null,
-      rows: group.rows.map((row) => ({
-      clientId: row.id,
-      weaponKey: row.weaponKey,
-      refinement: row.refinement,
-      overallPercent: row.overallPercent ?? "",
-      personalPercent: row.personalPercent ?? "",
-      note: row.note ?? "",
-      })),
-    }));
-  });
-  const [activeGroupIndex, setActiveGroupIndex] = useState(0);
-  const [renamingWeaponGroupIndex, setRenamingWeaponGroupIndex] = useState<number | null>(null);
-  const rows = groups[activeGroupIndex]?.rows ?? [];
-  const setRows = (update: typeof rows | ((current: typeof rows) => typeof rows)) =>
-    setGroups((current) => current.map((group, index) => index === activeGroupIndex
-      ? { ...group, rows: typeof update === "function" ? update(group.rows) : update }
-      : group));
-  const value = {
-    note: note.trim() || null,
-    groups: groups.map((group) => ({
-      name: group.name.trim() || null,
-      note: group.note.trim() || null,
-      iconMediaId: group.iconMediaId,
-      rows: group.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 weaponIssue = (...path: (string | number)[]) =>
-    !validation.success && hasIssuePrefix(validation.error.issues, ...path);
-  const localDraft = { note, groups, activeGroupIndex };
-  const autosave = useAutosave({
-    guideId: guide.id,
-    scope: "weapon",
-    value,
-    valid: validation.success,
-    initialVersion: guide.version,
-    persist: (next, expectedVersion, intent) =>
-      saveWeaponSection(guide.id, { ...next, expectedVersion }, intent),
-    storageKey: adminDraftKey(guide.id, "weapon"),
-    localDraft,
-    parseLocalDraft: (candidate) =>
-      parseEditorDraft<typeof localDraft>(candidate, ["groups"], ["note"]),
-    restoreLocalDraft: (draft) => {
-      setNote(draft.note);
-      setGroups(draft.groups.map((group) => ({ ...group, name: group.name ?? "" })));
-      setActiveGroupIndex(draft.activeGroupIndex ?? 0);
-    },
-  });
-  const handleWeaponDragEnd = ({ active, over }: DragEndEvent) => {
-    if (!over || active.id === over.id) return;
-    setRows((current) => {
-      const from = current.findIndex((row) => row.clientId === active.id);
-      const to = current.findIndex((row) => row.clientId === over.id);
-      return from === -1 || to === -1 ? current : arrayMove(current, from, to);
-    });
-  };
-  return (
-    <Card>
-      <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>
-        <ConditionControls
-          ariaLabel="เลือกเงื่อนไขอาวุธ"
-          items={groups}
-          activeIndex={activeGroupIndex}
-          onActiveIndexChange={setActiveGroupIndex}
-          onRename={setRenamingWeaponGroupIndex}
-          onReorder={(from, to) => {
-            const reordered = reorderConditions(groups, activeGroupIndex, from, to);
-            setGroups(reordered.items);
-            setActiveGroupIndex(reordered.activeIndex);
-          }}
-          onAdd={(details) => {
-            setGroups([...groups, { clientId: createClientId("weapon-condition"), ...details, note: "", rows: [] }]);
-            setActiveGroupIndex(groups.length);
-          }}
-          onDuplicate={() => {
-            const source = groups[activeGroupIndex];
-            if (!source) return;
-            setGroups([
-              ...groups,
-              {
-                clientId: createClientId("weapon-condition"),
-                name: source.name,
-                note: source.note,
-                iconMediaId: source.iconMediaId,
-                iconUrl: source.iconUrl,
-                rows: source.rows.map((row) => ({
-                  ...row,
-                  clientId: createClientId("weapon"),
-                })),
-              },
-            ]);
-            setActiveGroupIndex(groups.length);
-          }}
-          onDelete={() => {
-            const next = groups.filter((_, index) => index !== activeGroupIndex);
-            setGroups(next);
-            setActiveGroupIndex(Math.min(activeGroupIndex, next.length - 1));
-          }}
-        />
-        <ConditionRenameDialog
-          open={renamingWeaponGroupIndex !== null}
-          fallback={`Condition ${(renamingWeaponGroupIndex ?? 0) + 1}`}
-          value={renamingWeaponGroupIndex === null ? "" : groups[renamingWeaponGroupIndex]?.name ?? ""}
-          iconUrl={renamingWeaponGroupIndex === null ? null : groups[renamingWeaponGroupIndex]?.iconUrl ?? null}
-          onOpenChange={(open) => { if (!open) setRenamingWeaponGroupIndex(null); }}
-          onChange={(name) => setGroups(groups.map((group, index) => index === renamingWeaponGroupIndex ? { ...group, name } : group))}
-          onIconChange={(icon) => setGroups(groups.map((group, index) => index === renamingWeaponGroupIndex ? { ...group, ...icon } : group))}
-        />
-        <Field>
-          <FieldLabel htmlFor={`weapon-condition-note-${groups[activeGroupIndex]?.clientId}`}>
-            Condition note (optional)
-          </FieldLabel>
-          <Textarea
-            id={`weapon-condition-note-${groups[activeGroupIndex]?.clientId}`}
-            value={groups[activeGroupIndex]?.note ?? ""}
-            onChange={(event) => setGroups(groups.map((group, index) => index === activeGroupIndex ? { ...group, note: event.target.value } : group))}
-          />
-        </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
-                                  sizes="40px"
-                                  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" data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex, "weaponKey")}>
-                                <FieldLabel>อาวุธ</FieldLabel>
-                                <WeaponSelect
-                                  items={compatibleWeapons}
-                                  value={row.weaponKey}
-                                  invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex, "weaponKey")}
-                                  placeholder="ค้นหาชื่ออาวุธ…"
-                                  rarityBackground
-                                  onValueChange={(weaponKey) =>
-                                    setRows(
-                                      rows.map((item) =>
-                                        item.clientId === row.clientId
-                                          ? { ...item, weaponKey }
-                                          : item,
-                                      ),
-                                    )
-                                  }
-                                />
-                              </Field>
-                              <Field className="shrink-0" data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}>
-                                <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: next.slice(1),
-                                              }
-                                            : item,
-                                        ),
-                                      );
-                                  }}
-                                >
-                                  {["1", "2", "3", "4", "5", "1-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 data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}>
-                                <FieldLabel>Overall %</FieldLabel>
-                                <Input
-                                  type="text"
-                                  inputMode="decimal"
-                                  value={row.overallPercent}
-                                  aria-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}
-                                  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 data-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}>
-                                <FieldLabel>Personal %</FieldLabel>
-                                <Input
-                                  type="text"
-                                  inputMode="decimal"
-                                  value={row.personalPercent}
-                                  aria-invalid={weaponIssue("groups", activeGroupIndex, "rows", rowIndex)}
-                                  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}
-          conflictVersion={autosave.conflictVersion}
-          canOverwrite={autosave.canOverwrite}
-          onReloadLatest={autosave.reloadLatest}
-          onOverwrite={autosave.overwrite}
-          issues={
-            validation.success
-              ? []
-              : formatGuideValidationIssues("weapon", validation.error.issues)
-          }
-          onSave={autosave.saveNow}
-        />
-      </CardFooter>
-    </Card>
-  );
-}
-
-function ArtifactEditor({
-  guide,
-  artifacts,
-  initial,
-  catalogTalents,
-  characters,
-}: EditorBase) {
-  const profile = initial.artifactProfile;
-  const elementIconUrls = Object.fromEntries(
-    characters.flatMap((character) =>
-      character.element && character.elementIconUrl
-        ? [[character.element, character.elementIconUrl] as const]
-        : [],
-    ),
-  );
-  const artifactSensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-  const talentSensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-  const [groups, setGroups] = useState(() => {
-    const source = initial.artifactGroups.length ? initial.artifactGroups : [{ id: "artifact-condition-default", name: null, note: null, iconMediaId: null, iconUrl: null, tiers: [] }];
-    return source.map((condition, conditionIndex) => ({
-      clientId: condition.id,
-      name: condition.name ?? "",
-      note: condition.note ?? "",
-      iconMediaId: condition.iconMediaId ?? null,
-      iconUrl: condition.iconUrl ?? null,
-      tiers: (["Late Game", "Early Game"] as const).map((name, tierIndex) => ({
-        name,
-        rows: condition.tiers[tierIndex]?.rows.map((row, rowIndex) => ({ ...row, clientId: `${conditionIndex}-${name}-${rowIndex}` })) ?? [],
-      })),
-    }));
-  });
-  const [activeArtifactGroupIndex, setActiveArtifactGroupIndex] = useState(0);
-  const [renamingArtifactGroupIndex, setRenamingArtifactGroupIndex] = useState<number | null>(null);
-  const artifactTiers = groups[activeArtifactGroupIndex]?.tiers ?? [];
-  const setArtifactTierRows = (
-    tierIndex: number,
-    update: (rows: (typeof artifactTiers)[number]["rows"]) => (typeof artifactTiers)[number]["rows"],
-  ) => setGroups((current) => current.map((condition, conditionIndex) => conditionIndex === activeArtifactGroupIndex
-    ? { ...condition, tiers: condition.tiers.map((tier, index) => index === tierIndex ? { ...tier, rows: update(tier.rows) } : tier) }
-    : condition));
-  const [recommendedGroups, setRecommendedGroups] = useState(() => {
-    const source = profile?.recommendedConditions.length
-      ? profile.recommendedConditions
-      : [{ name: null, note: null, iconMediaId: null, iconUrl: null, sands: profile?.sands ?? [], goblet: profile?.goblet ?? [], circlet: profile?.circlet ?? [], substats: profile?.substats ?? [] }];
-    return source.map((group, index) => ({ ...group, clientId: `recommended-condition-${index}`, name: group.name ?? "", note: group.note ?? "", iconMediaId: group.iconMediaId ?? null, iconUrl: group.iconUrl ?? null }));
-  });
-  const [activeRecommendedGroupIndex, setActiveRecommendedGroupIndex] = useState(0);
-  const [renamingRecommendedGroupIndex, setRenamingRecommendedGroupIndex] = useState<number | null>(null);
-  const recommended = recommendedGroups[activeRecommendedGroupIndex];
-  const { sands, goblet, circlet, substats } = recommended;
-  const setRecommendedStat = (slot: "sands" | "goblet" | "circlet" | "substats", values: string[]) =>
-    setRecommendedGroups((current) => current.map((group, index) => index === activeRecommendedGroupIndex ? { ...group, [slot]: values } : group));
-  const [targetGroups, setTargetGroups] = useState(() => {
-    const source = profile?.targetConditions.length
-      ? profile.targetConditions
-      : [{ name: null, note: null, iconMediaId: null, iconUrl: null, rows: profile?.targets ?? [] }];
-    return source.map((group, index) => {
-      const existing = new Map(group.rows.flatMap((target) => {
-        const stat = normalizeTargetStat(target.stat);
-        return stat ? [[stat, target.value] as const] : [];
-      }));
-      return {
-        clientId: `target-condition-${index}`,
-        name: group.name ?? "",
-        note: group.note ?? "",
-        iconMediaId: group.iconMediaId ?? null,
-        iconUrl: group.iconUrl ?? null,
-        rows: targetStatDefaults.map((target) => ({ stat: target.stat, value: existing.get(target.stat) ?? target.value })),
-      };
-    });
-  });
-  const [activeTargetGroupIndex, setActiveTargetGroupIndex] = useState(0);
-  const [renamingTargetGroupIndex, setRenamingTargetGroupIndex] = useState<number | null>(null);
-  const targets = targetGroups[activeTargetGroupIndex]?.rows ?? [];
-  const setTargets = (rows: typeof targets) => setTargetGroups((current) => current.map((group, index) => index === activeTargetGroupIndex ? { ...group, rows } : group));
-  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,
-      })),
-    );
-  });
-  const [note, setNote] = useState(profile?.note ?? "");
-  const value = {
-    groups: groups.map((group) => ({
-      name: group.name.trim() || null,
-      note: group.note.trim() || null,
-      iconMediaId: group.iconMediaId,
-      tiers: group.tiers.map((tier) => ({
-        name: tier.name,
-        rows: tier.rows.map((row) => ({
-          firstArtifactKey: row.firstArtifactKey,
-          secondArtifactKey: row.secondArtifactKey,
-          percent: Number(row.percent),
-          note: row.note?.trim() || null,
-        })),
-      })),
-    })),
-    sands: recommendedGroups[0].sands,
-    goblet: recommendedGroups[0].goblet,
-    circlet: recommendedGroups[0].circlet,
-    substats: recommendedGroups[0].substats,
-    recommendedGroups: recommendedGroups.map(({ name, note, iconMediaId, sands, goblet, circlet, substats }) => ({ name: name.trim() || null, note: note.trim() || null, iconMediaId, sands, goblet, circlet, substats })),
-    targetGroups: targetGroups.map((group) => ({
-      name: group.name.trim() || null,
-      note: group.note.trim() || null,
-      iconMediaId: group.iconMediaId,
-      rows: group.rows.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 artifactIssue = (...path: (string | number)[]) =>
-    !validation.success && hasIssuePrefix(validation.error.issues, ...path);
-  const localDraft = {
-    groups,
-    activeArtifactGroupIndex,
-    sands,
-    goblet,
-    circlet,
-    substats,
-    recommendedGroups,
-    activeRecommendedGroupIndex,
-    targetGroups,
-    activeTargetGroupIndex,
-    talents,
-    note,
-  };
-  const autosave = useAutosave({
-    guideId: guide.id,
-    scope: "artifact",
-    value,
-    valid: validation.success,
-    initialVersion: guide.version,
-    persist: (next, expectedVersion, intent) =>
-      saveArtifactSection(guide.id, { ...next, expectedVersion }, intent),
-    storageKey: adminDraftKey(guide.id, "artifact"),
-    localDraft,
-    parseLocalDraft: (candidate) =>
-      parseEditorDraft<typeof localDraft>(
-        candidate,
-        [
-          "groups",
-          "sands",
-          "goblet",
-          "circlet",
-          "substats",
-          "targetGroups",
-          "talents",
-        ],
-        ["note"],
-      ),
-    restoreLocalDraft: (draft) => {
-      setGroups(draft.groups);
-      setActiveArtifactGroupIndex(draft.activeArtifactGroupIndex ?? 0);
-      setRecommendedGroups(draft.recommendedGroups?.length ? draft.recommendedGroups : [{ clientId: createClientId("recommended-condition"), name: "", note: "", iconMediaId: null, iconUrl: null, sands: draft.sands, goblet: draft.goblet, circlet: draft.circlet, substats: draft.substats }]);
-      setActiveRecommendedGroupIndex(Math.min(draft.activeRecommendedGroupIndex ?? 0, Math.max(0, (draft.recommendedGroups?.length ?? 1) - 1)));
-      setTargetGroups(draft.targetGroups.map((group) => ({ ...group, name: group.name ?? "" })));
-      setActiveTargetGroupIndex(draft.activeTargetGroupIndex ?? 0);
-      setTalents(draft.talents);
-      setNote(draft.note);
-    },
-  });
-  const orderedTalents = normalizeTalentPriorities(talents);
-  const handleArtifactDragEnd = ({ active, over }: DragEndEvent) => {
-    if (!over || active.id === over.id) return;
-    const activeTierIndex = artifactTiers.findIndex((group) =>
-      group.rows.some((row) => row.clientId === active.id),
-    );
-    const overTierIndex = artifactTiers.findIndex((group) =>
-      group.rows.some((row) => row.clientId === over.id),
-    );
-    if (activeTierIndex === -1 || activeTierIndex !== overTierIndex) return;
-    setGroups((current) =>
-      current.map((condition, conditionIndex) => {
-        if (conditionIndex !== activeArtifactGroupIndex) return condition;
-        return { ...condition, tiers: condition.tiers.map((group, groupIndex) => {
-          if (groupIndex !== activeTierIndex) 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"],
-      ),
-    );
-  };
-  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">
-      <div className="grid items-start gap-6 xl:grid-cols-2">
-      <Card className="order-1">
-        <CardHeader>
-          <CardTitle>Artifact tier list</CardTitle>
-          <CardDescription>
-            จัดชุด Artifact ในกลุ่ม Late Game และ Early Game
-            ระบบจะบันทึกอัตโนมัติ
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-5">
-          <ConditionControls
-            ariaLabel="เลือกเงื่อนไขอาร์ติแฟกต์"
-            items={groups}
-            activeIndex={activeArtifactGroupIndex}
-            onActiveIndexChange={setActiveArtifactGroupIndex}
-            onRename={setRenamingArtifactGroupIndex}
-            onReorder={(from, to) => {
-              const reordered = reorderConditions(groups, activeArtifactGroupIndex, from, to);
-              setGroups(reordered.items);
-              setActiveArtifactGroupIndex(reordered.activeIndex);
-            }}
-            onAdd={(details) => {
-              setGroups([...groups, { clientId: createClientId("artifact-condition"), ...details, note: "", tiers: [{ name: "Late Game", rows: [] }, { name: "Early Game", rows: [] }] }]);
-              setActiveArtifactGroupIndex(groups.length);
-            }}
-            onDuplicate={() => {
-              const source = groups[activeArtifactGroupIndex];
-              if (!source) return;
-              setGroups([...groups, { ...source, clientId: createClientId("artifact-condition"), tiers: source.tiers.map((tier) => ({ ...tier, rows: tier.rows.map((row) => ({ ...row, clientId: createClientId("artifact") })) })) }]);
-              setActiveArtifactGroupIndex(groups.length);
-            }}
-            onDelete={() => {
-              const next = groups.filter((_, index) => index !== activeArtifactGroupIndex);
-              setGroups(next);
-              setActiveArtifactGroupIndex(Math.min(activeArtifactGroupIndex, next.length - 1));
-            }}
-          />
-          <ConditionRenameDialog
-            open={renamingArtifactGroupIndex !== null}
-            fallback={`Condition ${(renamingArtifactGroupIndex ?? 0) + 1}`}
-            value={renamingArtifactGroupIndex === null ? "" : groups[renamingArtifactGroupIndex]?.name ?? ""}
-            iconUrl={renamingArtifactGroupIndex === null ? null : groups[renamingArtifactGroupIndex]?.iconUrl ?? null}
-            onOpenChange={(open) => { if (!open) setRenamingArtifactGroupIndex(null); }}
-            onChange={(name) => setGroups(groups.map((group, index) => index === renamingArtifactGroupIndex ? { ...group, name } : group))}
-            onIconChange={(icon) => setGroups(groups.map((group, index) => index === renamingArtifactGroupIndex ? { ...group, ...icon } : group))}
-          />
-          <Field>
-            <FieldLabel htmlFor={`artifact-condition-note-${groups[activeArtifactGroupIndex]?.clientId}`}>Condition note (optional)</FieldLabel>
-            <Textarea id={`artifact-condition-note-${groups[activeArtifactGroupIndex]?.clientId}`} value={groups[activeArtifactGroupIndex]?.note ?? ""} onChange={(event) => setGroups(groups.map((group, index) => index === activeArtifactGroupIndex ? { ...group, note: event.target.value } : group))} />
-          </Field>
-          {artifactTiers.map((group, groupIndex) => (
-            <Card key={group.name} size="sm">
-              <CardHeader>
-                <CardTitle>{group.name}</CardTitle>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-3">
-                <DndContext
-                  sensors={artifactSensors}
-                  collisionDetection={closestCenter}
-                  onDragEnd={handleArtifactDragEnd}
-                >
-                  <SortableContext
-                    items={group.rows.map((row) => row.clientId)}
-                    strategy={verticalListSortingStrategy}
-                  >
-                    <div className="flex flex-col gap-3">
-                      {group.rows.map((row, rowIndex) => (
-                        <SortableArtifactRow
-                          key={row.clientId}
-                          id={row.clientId}
-                        >
-                          {(dragHandle) => (
-                            <div
-                              className={cn(
-                                "flex items-start gap-2 rounded-lg border p-3",
-                                rowIndex % 2 === 0
-                                  ? "bg-muted/60"
-                                  : "bg-muted/20",
-                                artifactIssue("groups", activeArtifactGroupIndex, "tiers", groupIndex, "rows", rowIndex) && "border-destructive",
-                              )}
-                            >
-                              {dragHandle}
-                              <div className="flex min-w-0 flex-1 flex-col gap-3">
-                                <div className="grid gap-3 lg:grid-cols-[1fr_1fr_4rem_auto]">
-                                  <ArtifactSelect
-                                    items={artifacts}
-                                    value={row.firstArtifactKey}
-                                    invalid={artifactIssue("groups", activeArtifactGroupIndex, "tiers", groupIndex, "rows", rowIndex, "firstArtifactKey")}
-                                    placeholder="ค้นหาชุด Artifact แรก…"
-                                    rarityBackground
-                                    showSelectedImage
-                                    onValueChange={(firstArtifactKey) =>
-                                      setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, firstArtifactKey } : candidate))
-                                    }
-                                  />
-                                  <ArtifactSelect
-                                    items={artifacts}
-                                    value={row.secondArtifactKey ?? ""}
-                                    placeholder="ค้นหาชุดที่สอง (ถ้ามี)…"
-                                    rarityBackground
-                                    showSelectedImage
-                                    onValueChange={(secondArtifactKey) =>
-                                      setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, secondArtifactKey: secondArtifactKey || null } : candidate))
-                                    }
-                                  />
-                                  <Input
-                                    type="text"
-                                    inputMode="decimal"
-                                    aria-label="Artifact percent"
-                                    value={row.percent}
-                                    aria-invalid={artifactIssue("groups", activeArtifactGroupIndex, "tiers", groupIndex, "rows", rowIndex)}
-                                    onChange={(event) =>
-                                      setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: normalizePercentInput(event.target.value, candidate.percent) } : candidate))
-                                    }
-                                    onBlur={() =>
-                                      setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: finalizePercentInput(candidate.percent) } : candidate))
-                                    }
-                                  />
-                                  <DeleteConfirmationDialog
-                                    trigger={
-                                      <Button
-                                        type="button"
-                                        variant="ghost"
-                                        size="icon"
-                                      />
-                                    }
-                                    title={`ลบ Artifact อันดับ ${rowIndex + 1}?`}
-                                    description={`รายการ Artifact ในกลุ่ม ${group.name} และเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide`}
-                                    onConfirm={() =>
-                                      setArtifactTierRows(groupIndex, (rows) => rows.filter((_, inner) => inner !== rowIndex))
-                                    }
-                                  >
-                                    <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) =>
-                                      setArtifactTierRows(groupIndex, (rows) => rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, note: event.target.value } : candidate))
-                                    }
-                                  />
-                                </Field>
-                              </div>
-                            </div>
-                          )}
-                        </SortableArtifactRow>
-                      ))}
-                    </div>
-                  </SortableContext>
-                </DndContext>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() =>
-                    setArtifactTierRows(groupIndex, (rows) => [...rows, { clientId: createClientId("artifact"), firstArtifactKey: "", secondArtifactKey: null, percent: "100", note: "" }])
-                  }
-                >
-                  <PlusIcon data-icon="inline-start" />
-                  เพิ่มชุด Artifact
-                </Button>
-              </CardContent>
-            </Card>
-          ))}
-        </CardContent>
-      </Card>
-      <Card className="order-3 overflow-hidden pt-0">
-        <CardHeader className="bg-primary py-4 text-center text-primary-foreground">
-          <CardTitle className="text-2xl">Recommended Stats</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <FieldGroup>
-            <ConditionControls
-              ariaLabel="เลือกเงื่อนไขค่าสถานะแนะนำ"
-              items={recommendedGroups}
-              activeIndex={activeRecommendedGroupIndex}
-              onActiveIndexChange={setActiveRecommendedGroupIndex}
-              onRename={setRenamingRecommendedGroupIndex}
-              onReorder={(from, to) => {
-                const reordered = reorderConditions(recommendedGroups, activeRecommendedGroupIndex, from, to);
-                setRecommendedGroups(reordered.items);
-                setActiveRecommendedGroupIndex(reordered.activeIndex);
-              }}
-              onAdd={(details) => {
-                setRecommendedGroups([...recommendedGroups, { clientId: createClientId("recommended-condition"), ...details, note: "", sands: [], goblet: [], circlet: [], substats: [] }]);
-                setActiveRecommendedGroupIndex(recommendedGroups.length);
-              }}
-              onDuplicate={() => {
-                const source = recommendedGroups[activeRecommendedGroupIndex];
-                if (!source) return;
-                setRecommendedGroups([...recommendedGroups, { clientId: createClientId("recommended-condition"), name: source.name, note: source.note, iconMediaId: source.iconMediaId, iconUrl: source.iconUrl, sands: [...source.sands], goblet: [...source.goblet], circlet: [...source.circlet], substats: [...source.substats] }]);
-                setActiveRecommendedGroupIndex(recommendedGroups.length);
-              }}
-              onDelete={() => {
-                setRecommendedGroups(recommendedGroups.filter((_, index) => index !== activeRecommendedGroupIndex));
-                setActiveRecommendedGroupIndex(Math.max(0, activeRecommendedGroupIndex - 1));
-              }}
-            />
-            <ConditionRenameDialog
-              open={renamingRecommendedGroupIndex !== null}
-              fallback={`Condition ${(renamingRecommendedGroupIndex ?? 0) + 1}`}
-              value={renamingRecommendedGroupIndex === null ? "" : recommendedGroups[renamingRecommendedGroupIndex]?.name ?? ""}
-              iconUrl={renamingRecommendedGroupIndex === null ? null : recommendedGroups[renamingRecommendedGroupIndex]?.iconUrl ?? null}
-              onOpenChange={(open) => { if (!open) setRenamingRecommendedGroupIndex(null); }}
-              onChange={(name) => setRecommendedGroups(recommendedGroups.map((group, index) => index === renamingRecommendedGroupIndex ? { ...group, name } : group))}
-              onIconChange={(icon) => setRecommendedGroups(recommendedGroups.map((group, index) => index === renamingRecommendedGroupIndex ? { ...group, ...icon } : group))}
-            />
-            <Field>
-              <FieldLabel htmlFor={`recommended-condition-note-${recommendedGroups[activeRecommendedGroupIndex]?.clientId}`}>Condition note (optional)</FieldLabel>
-              <Textarea id={`recommended-condition-note-${recommendedGroups[activeRecommendedGroupIndex]?.clientId}`} value={recommendedGroups[activeRecommendedGroupIndex]?.note ?? ""} onChange={(event) => setRecommendedGroups(recommendedGroups.map((group, index) => index === activeRecommendedGroupIndex ? { ...group, note: event.target.value } : group))} />
-            </Field>
-
-            <div className="grid gap-4 sm:grid-cols-3">
-              <StatSelect
-                label="Sands / นาฬิกา"
-                options={mainStatOptions.sands}
-                value={sands}
-                onChange={(values) => setRecommendedStat("sands", values)}
-                elementIconUrls={elementIconUrls}
-                priorityColors
-              />
-              <StatSelect
-                label="Goblet / ถ้วย"
-                options={mainStatOptions.goblet}
-                value={goblet}
-                onChange={(values) => setRecommendedStat("goblet", values)}
-                elementIconUrls={elementIconUrls}
-                priorityColors
-              />
-              <StatSelect
-                label="Circlet / หมวก"
-                options={mainStatOptions.circlet}
-                value={circlet}
-                onChange={(values) => setRecommendedStat("circlet", values)}
-                elementIconUrls={elementIconUrls}
-                priorityColors
-              />
-            </div>
-            <StatSelect
-              label="Substats"
-              options={substatOptions}
-              value={substats}
-              onChange={(values) => setRecommendedStat("substats", values)}
-              elementIconUrls={elementIconUrls}
-              priorityColors
-            />
-          </FieldGroup>
-        </CardContent>
-      </Card>
-      <Card className="order-2 xl:row-span-2 xl:h-full">
-        <CardHeader>
-          <CardTitle>Target Stats</CardTitle>
-          <CardDescription>
-            ตั้งค่าเป้าหมายค่าสถานะสำหรับแต่ละ Condition
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <FieldGroup>
-            <FieldSet>
-              <FieldLegend>Target Stats</FieldLegend>
-              <ConditionControls
-                ariaLabel="เลือกเงื่อนไขค่าสถานะเป้าหมาย"
-                items={targetGroups}
-                activeIndex={activeTargetGroupIndex}
-                onActiveIndexChange={setActiveTargetGroupIndex}
-                onRename={setRenamingTargetGroupIndex}
-                onReorder={(from, to) => {
-                  const reordered = reorderConditions(targetGroups, activeTargetGroupIndex, from, to);
-                  setTargetGroups(reordered.items);
-                  setActiveTargetGroupIndex(reordered.activeIndex);
-                }}
-                onAdd={(details) => {
-                  setTargetGroups([...targetGroups, { clientId: createClientId("target-condition"), ...details, note: "", rows: targetStatDefaults.map((target) => ({ ...target })) }]);
-                  setActiveTargetGroupIndex(targetGroups.length);
-                }}
-                onDuplicate={() => {
-                  const source = targetGroups[activeTargetGroupIndex];
-                  if (!source) return;
-                  setTargetGroups([...targetGroups, { clientId: createClientId("target-condition"), name: source.name, note: source.note, iconMediaId: source.iconMediaId, iconUrl: source.iconUrl, rows: source.rows.map((row) => ({ ...row })) }]);
-                  setActiveTargetGroupIndex(targetGroups.length);
-                }}
-                onDelete={() => {
-                  setTargetGroups(targetGroups.filter((_, index) => index !== activeTargetGroupIndex));
-                  setActiveTargetGroupIndex(Math.max(0, activeTargetGroupIndex - 1));
-                }}
-              />
-              <ConditionRenameDialog
-                open={renamingTargetGroupIndex !== null}
-                fallback={`Condition ${(renamingTargetGroupIndex ?? 0) + 1}`}
-                value={renamingTargetGroupIndex === null ? "" : targetGroups[renamingTargetGroupIndex]?.name ?? ""}
-                iconUrl={renamingTargetGroupIndex === null ? null : targetGroups[renamingTargetGroupIndex]?.iconUrl ?? null}
-                onOpenChange={(open) => { if (!open) setRenamingTargetGroupIndex(null); }}
-                onChange={(name) => setTargetGroups(targetGroups.map((group, index) => index === renamingTargetGroupIndex ? { ...group, name } : group))}
-                onIconChange={(icon) => setTargetGroups(targetGroups.map((group, index) => index === renamingTargetGroupIndex ? { ...group, ...icon } : group))}
-              />
-              <Field>
-                <FieldLabel htmlFor={`target-condition-note-${targetGroups[activeTargetGroupIndex]?.clientId}`}>Condition note (optional)</FieldLabel>
-                <Textarea id={`target-condition-note-${targetGroups[activeTargetGroupIndex]?.clientId}`} value={targetGroups[activeTargetGroupIndex]?.note ?? ""} onChange={(event) => setTargetGroups(targetGroups.map((group, index) => index === activeTargetGroupIndex ? { ...group, note: event.target.value } : group))} />
-              </Field>
-              <div className="grid gap-5 sm:grid-cols-2">
-                {[
-                  targetStatOptions.slice(0, 4),
-                  targetStatOptions.slice(4),
-                ].map((column) => (
-                  <div key={column[0]} className="flex flex-col gap-3">
-                    {column.map((stat) => {
-                      const target = targets.find((item) => item.stat === stat);
-                      return (
-                        <Field
-                          key={stat}
-                          orientation="horizontal"
-                          className="items-center rounded-md bg-muted/40 px-3 py-2"
-                        >
-                          <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>
-            </FieldSet>
-          </FieldGroup>
-        </CardContent>
-      </Card>
-      </div>
-      <Card>
-        <CardHeader>
-          <CardTitle>Talent Upgrade</CardTitle>
-          <CardDescription>
-            จัดลำดับ Talent เลือกระดับเป้าหมาย และกำหนดความสำคัญ
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <FieldGroup>
-            <FieldSet>
-              <FieldLegend>Talent Priority</FieldLegend>
-              <DndContext
-                sensors={talentSensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleTalentDragEnd}
-              >
-                <SortableContext
-                  items={orderedTalents.map((talent) => talent.type)}
-                  strategy={rectSortingStrategy}
-                >
-                  <div className="flex min-w-0 flex-col items-stretch gap-3 sm:flex-row sm:items-start sm:overflow-x-auto sm:pb-1">
-                    {orderedTalents.map((talent, index) => {
-                      const catalogTalent = catalogTalents.find(
-                        (item) => item.type === talent.type,
-                      );
-                      return (
-                        <div
-                          key={talent.type}
-                          className="flex w-full shrink-0 flex-col items-stretch gap-3 sm:w-auto sm:flex-row sm:items-center"
-                        >
-                          <SortableTalentCard
-                            talent={talent}
-                            catalogTalent={catalogTalent}
-                            onLevelChange={(level) =>
-                              setTalents(
-                                orderedTalents.map((item) =>
-                                  item.type === talent.type
-                                    ? { ...item, level }
-                                    : item,
-                                ),
-                              )
-                            }
-                          />
-                          {index < orderedTalents.length - 1 ? (
-                            <ToggleGroup
-                              variant="outline"
-                              spacing={0}
-                              value={[talent.relationToNext ?? "gt"]}
-                              onValueChange={(selected) => {
-                                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>
-                            </ToggleGroup>
-                          ) : null}
-                        </div>
-                      );
-                    })}
-                  </div>
-                </SortableContext>
-              </DndContext>
-            </FieldSet>
-          </FieldGroup>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardContent>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="artifact-note">Note (optional)</FieldLabel>
-              <Textarea
-                id="artifact-note"
-                value={note}
-                onChange={(event) => setNote(event.target.value)}
-              />
-            </Field>
-          </FieldGroup>
-        </CardContent>
-        <CardFooter className="justify-end">
-          <AutosaveStatus
-            state={autosave.state}
-            conflictVersion={autosave.conflictVersion}
-            canOverwrite={autosave.canOverwrite}
-            onReloadLatest={autosave.reloadLatest}
-            onOverwrite={autosave.overwrite}
-            issues={
-              validation.success
-                ? []
-                : formatGuideValidationIssues(
-                    "artifact",
-                    validation.error.issues,
-                  )
-            }
-            onSave={autosave.saveNow}
-          />
-        </CardFooter>
-      </Card>
-    </div>
-  );
-}
-
-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 ?? "",
-          descriptionNodes: undefined,
-          iconUrl: null,
-        }));
-    return source.map((constellation) => {
-      const saved = savedRows.find((row) => row.level === constellation.level);
-      return {
-        ...constellation,
-        cumulativePercent: saved?.cumulativePercent ?? "",
-        isGreat: saved?.isGreat ?? false,
-      };
-    });
-  };
-  const [groups, setGroups] = useState(() => {
-    const source = initial.constellationGroups.length
-      ? initial.constellationGroups
-      : [{ id: "constellation-condition-default", name: null, note: DEFAULT_CONSTELLATION_CONDITION_NOTE, iconMediaId: null, iconUrl: null, rows: [] }];
-    return source.map((group) => ({
-      clientId: group.id,
-      name: group.name ?? "",
-      note: group.note ?? "",
-      iconMediaId: group.iconMediaId ?? null,
-      iconUrl: group.iconUrl ?? null,
-      rows: makeRows(group.rows),
-    }));
-  });
-  const [activeConstellationGroupIndex, setActiveConstellationGroupIndex] = useState(0);
-  const [renamingConstellationGroupIndex, setRenamingConstellationGroupIndex] = useState<number | null>(null);
-  const value = {
-    note: note.trim() || null,
-    groups: groups.map((group) => ({
-      name: group.name.trim() || null,
-      note: group.note.trim() || null,
-      iconMediaId: group.iconMediaId,
-      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 constellationIssue = (...path: (string | number)[]) =>
-    !validation.success && hasIssuePrefix(validation.error.issues, ...path);
-  const localDraft = { note, groups };
-  const autosave = useAutosave({
-    guideId: guide.id,
-    scope: "constellations",
-    value,
-    valid: validation.success,
-    initialVersion: guide.version,
-    persist: (next, expectedVersion, intent) =>
-      saveConstellationSection(guide.id, { ...next, expectedVersion }, intent),
-    storageKey: adminDraftKey(guide.id, "constellations"),
-    localDraft,
-    parseLocalDraft: (candidate) =>
-      parseEditorDraft<typeof localDraft>(candidate, ["groups"], ["note"]),
-    restoreLocalDraft: (draft) => {
-      setNote(draft.note);
-      setGroups(draft.groups.map((group) => ({ ...group, name: group.name ?? "" })));
-    },
-  });
-  return (
-    <Card>
-      <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>
-        <ConditionControls
-          ariaLabel="เลือกเงื่อนไขกลุ่มดาว"
-          items={groups}
-          activeIndex={activeConstellationGroupIndex}
-          onActiveIndexChange={setActiveConstellationGroupIndex}
-          onRename={setRenamingConstellationGroupIndex}
-          onReorder={(from, to) => {
-            const reordered = reorderConditions(groups, activeConstellationGroupIndex, from, to);
-            setGroups(reordered.items);
-            setActiveConstellationGroupIndex(reordered.activeIndex);
-          }}
-          onAdd={(details) => {
-            setGroups([
-              ...groups,
-              {
-                clientId: createClientId("constellation-condition"),
-                ...details,
-                note: DEFAULT_CONSTELLATION_CONDITION_NOTE,
-                rows: makeRows(),
-              },
-            ]);
-            setActiveConstellationGroupIndex(groups.length);
-          }}
-          onDelete={() => {
-            setGroups(groups.filter((_, index) => index !== activeConstellationGroupIndex));
-            setActiveConstellationGroupIndex(Math.max(0, activeConstellationGroupIndex - 1));
-          }}
-        />
-        <ConditionRenameDialog
-          open={renamingConstellationGroupIndex !== null}
-          fallback={`Condition ${(renamingConstellationGroupIndex ?? 0) + 1}`}
-          value={renamingConstellationGroupIndex === null ? "" : groups[renamingConstellationGroupIndex]?.name ?? ""}
-          iconUrl={renamingConstellationGroupIndex === null ? null : groups[renamingConstellationGroupIndex]?.iconUrl ?? null}
-          onOpenChange={(open) => { if (!open) setRenamingConstellationGroupIndex(null); }}
-          onChange={(name) => setGroups(groups.map((group, index) => index === renamingConstellationGroupIndex ? { ...group, name } : group))}
-          onIconChange={(icon) => setGroups(groups.map((group, index) => index === renamingConstellationGroupIndex ? { ...group, ...icon } : group))}
-        />
-        {groups[activeConstellationGroupIndex] ? [groups[activeConstellationGroupIndex]].map((group) => {
-          const groupIndex = activeConstellationGroupIndex;
-          return (
-          <Card key={group.clientId} size="sm">
-            <CardHeader>
-              <CardTitle>Condition {groupIndex + 1}</CardTitle>
-              <CardDescription>
-                ใช้ note เพื่ออธิบายอาวุธ ทีม หรือเงื่อนไขที่ใช้เปรียบเทียบ
-              </CardDescription>
-            </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"
-                    className={cn(
-                      constellationIssue("groups", groupIndex, "rows", rowIndex) && "border-destructive",
-                    )}
-                  >
-                    <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 className="whitespace-pre-line">
-                        <LunarisText nodes={row.descriptionNodes} fallback={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}
-                          aria-invalid={constellationIssue("groups", groupIndex, "rows", rowIndex, "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>
-        );}) : null}
-      </CardContent>
-      <CardFooter className="justify-end">
-        <AutosaveStatus
-          state={autosave.state}
-          conflictVersion={autosave.conflictVersion}
-          canOverwrite={autosave.canOverwrite}
-          onReloadLatest={autosave.reloadLatest}
-          onOverwrite={autosave.overwrite}
-          issues={
-            validation.success
-              ? []
-              : formatGuideValidationIssues(
-                  "constellations",
-                  validation.error.issues,
-                )
-          }
-          onSave={autosave.saveNow}
-        />
-      </CardFooter>
-    </Card>
-  );
-}
-
-type TeamImportGuide = {
-  id: string;
-  name: string;
-  groups: Array<{
-    id: string;
-    name: string | null;
-    teams: Array<{
-      id: string;
-      title: string;
-      rotationSeconds: string;
-      combo: string;
-      members: Array<TeamToolValue["members"][number] & { characterName: string }>;
-    }>;
-  }>;
-};
-
-type TeamEverywhereImport = {
-  id: string;
-  title: string;
-  rotationSeconds: string;
-  combo: string;
-  guideName: string;
-  conditionName: string | null;
-  members: Array<TeamToolValue["members"][number] & { characterName: string }>;
-};
-
-function TeamImportPreviewCard({
-  team,
-  characters,
-  weapons,
-  artifacts,
-  checked,
-  checkboxId,
-  onCheckedChange,
-  sourceLabel,
-  disabled = false,
-}: {
-  team: TeamImportGuide["groups"][number]["teams"][number];
-  characters: CatalogItem[];
-  weapons: CatalogItem[];
-  artifacts: CatalogItem[];
-  checked: boolean;
-  checkboxId: string;
-  onCheckedChange: (checked: boolean) => void;
-  sourceLabel?: string;
-  disabled?: boolean;
-}) {
-  const total = team.members.reduce((sum, member) => sum + Number(member.damage), 0);
-  const seconds = Number(team.rotationSeconds);
-
-  return (
-    <Card className={cn(checked && "ring-2 ring-primary")}>
-      <CardHeader>
-        <CardTitle>{team.title}</CardTitle>
-        <CardDescription>โรเทชั่น {seconds} วิ{sourceLabel ? ` - ${sourceLabel}` : ""}</CardDescription>
-        <CardAction>
-          <Field orientation="horizontal">
-            <Checkbox id={checkboxId} checked={checked} disabled={disabled} onCheckedChange={(value) => onCheckedChange(value === true)} />
-            <FieldLabel htmlFor={checkboxId}>{disabled ? "ชื่อซ้ำ" : "เลือก"}</FieldLabel>
-          </Field>
-        </CardAction>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <div className="grid grid-cols-4 gap-2">
-          {team.members.map((member, index) => {
-            const character = characters.find((item) => item.key === member.characterKey);
-            const weapon = weapons.find((item) => item.key === member.weaponKey);
-            const artifact = artifacts.find((item) => item.key === member.artifactKey);
-            const secondArtifact = artifacts.find((item) => item.key === member.secondArtifactKey);
-            return (
-              <div key={`${member.characterKey}-${index}`} className="min-w-0 text-center">
-                <div className="flex items-center justify-center gap-2">
-                  <div className={cn("relative size-16 shrink-0 overflow-hidden rounded-lg bg-muted", characterRarityGradientClass(member.characterKey, isCustomTravelerKey(member.characterKey) ? 5 : character?.rarity))}>
-                    {character ? <Image src={character.imageUrl} alt={character.name} fill sizes="64px" className="object-contain" /> : null}
-                  </div>
-                  <div className="flex flex-col gap-1">
-                    {weapon ? (
-                      <div className={cn("relative size-7 overflow-hidden rounded-md", rarityGradientClass(weapon.rarity))}>
-                        <Image src={weapon.imageUrl} alt={weapon.name} fill sizes="28px" className="object-contain p-0.5" />
-                      </div>
-                    ) : null}
-                    {artifact || secondArtifact ? (
-                      <TeamArtifactIcon
-                        first={artifact ? { ...artifact, rarity: artifact.rarity ?? null } : null}
-                        second={secondArtifact ? { ...secondArtifact, rarity: secondArtifact.rarity ?? null } : null}
-                        sizes="28px"
-                        className="size-7 shrink-0 scale-100"
-                      />
-                    ) : null}
-                  </div>
-                </div>
-                <div className="mt-2 flex items-center justify-center gap-1">
-                  <Badge variant="secondary">{teamConstellationLabel(member.constellation)}</Badge>
-                  <Badge variant="secondary">{teamRefinementLabel(member.refinement)}</Badge>
-                </div>
-                <p className="mt-1 truncate text-sm font-medium">{character?.name ?? member.characterName}</p>
-                <p className="mt-1 text-sm font-semibold">{Number(member.damage).toLocaleString()}</p>
-                <p className="text-xs text-muted-foreground">{total ? ((Number(member.damage) / total) * 100).toFixed(1) : "0.0"}%</p>
-              </div>
-            );
-          })}
-        </div>
-        <Separator />
-        <div className="flex items-end justify-between gap-4">
-          <div><p className="text-sm text-muted-foreground">ดาเมจรวม</p><p className="font-semibold">{total.toLocaleString()}</p></div>
-          <div className="text-right"><p className="text-sm text-muted-foreground">DPS</p><p className="text-3xl font-semibold text-primary">{seconds > 0 ? (total / seconds).toLocaleString(undefined, { maximumFractionDigits: 0 }) : "0"}</p></div>
-        </div>
-        <p className="rounded-lg bg-muted p-3 text-sm leading-6">{team.combo}</p>
-      </CardContent>
-    </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",
-  }));
-  const teamSensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-  const memberSortableIds = useRef(new WeakMap<TeamToolMember, string>());
-  const getMemberSortableId = (member: TeamToolMember) => {
-    const existingId = memberSortableIds.current.get(member);
-    if (existingId) return existingId;
-    const id = createClientId("team-member");
-    memberSortableIds.current.set(member, id);
-    return id;
-  };
-  const [teamGroups, setTeamGroups] = useState(() => initial.teamGroups.length
-    ? initial.teamGroups.map((group) => ({ clientId: group.id, name: group.name ?? "", note: group.note ?? "", iconMediaId: group.iconMediaId ?? null, iconUrl: group.iconUrl ?? null, teams: group.teams.map(({ id, ...team }) => ({ clientId: id, ...team })) }))
-    : [{ clientId: "team-condition-default", name: "", note: "", iconMediaId: null, iconUrl: null, teams: [] as TeamToolValue[] }]);
-  const [activeTeamGroupIndex, setActiveTeamGroupIndex] = useState(0);
-  const [renamingTeamGroupIndex, setRenamingTeamGroupIndex] = useState<number | null>(null);
-  const teams = useMemo(() => teamGroups[activeTeamGroupIndex]?.teams ?? [], [activeTeamGroupIndex, teamGroups]);
-  const setTeams = (update: SetStateAction<TeamToolValue[]>) => setTeamGroups((current) => current.map((group, index) => index === activeTeamGroupIndex ? { ...group, teams: typeof update === "function" ? update(group.teams) : update } : group));
-  const [selectedTeamIds, setSelectedTeamIds] = useState<Set<string>>(
-    () => new Set(),
-  );
-  const [sourceTeamId, setSourceTeamId] = useState(teams[0]?.clientId ?? "");
-  const [applyOpen, setApplyOpen] = useState(false);
-  const [presetOpen, setPresetOpen] = useState(false);
-  const [importOpen, setImportOpen] = useState(false);
-  const [importFiles, setImportFiles] = useState<File[]>([]);
-  const [guideImportOpen, setGuideImportOpen] = useState(false);
-  const [everywhereImportOpen, setEverywhereImportOpen] = useState(false);
-  const everywhereSearchId = useRef(0);
-  const [everywhereCharacterKey, setEverywhereCharacterKey] = useState("");
-  const [everywhereSearchedKey, setEverywhereSearchedKey] = useState("");
-  const [everywhereTeams, setEverywhereTeams] = useState<TeamEverywhereImport[]>([]);
-  const [everywhereLoading, setEverywhereLoading] = useState(false);
-  const [everywhereError, setEverywhereError] = useState<string | null>(null);
-  const [everywhereSelectedIds, setEverywhereSelectedIds] = useState<Set<string>>(() => new Set());
-  const [ignoreSameName, setIgnoreSameName] = useState(true);
-  const [importGuides, setImportGuides] = useState<Array<{ id: string; name: string; characterKey: string; coverUrl: string }> | null>(null);
-  const [activeImportGuide, setActiveImportGuide] = useState<TeamImportGuide | null>(null);
-  const [selectedImports, setSelectedImports] = useState<Record<string, Omit<TeamToolValue, "clientId">>>({});
-  const [guideImportLoading, setGuideImportLoading] = useState<"guides" | "teams" | null>(null);
-  const [guideImportError, setGuideImportError] = useState<string | null>(null);
-  const [guideImportCondition, setGuideImportCondition] = useState("0");
-  const [guideTeamQuery, setGuideTeamQuery] = useState("");
-  const [guideTeamSearchTarget, setGuideTeamSearchTarget] = useState<TeamSearchTarget>("all");
-  const [guideListQuery, setGuideListQuery] = useState("");
-  const [presetName, setPresetName] = useState("");
-  const [presets, setPresets] = useState<TeamPreset[]>([]);
-  const [presetsHydrated, setPresetsHydrated] = useState(false);
-  const [presetsGuideId, setPresetsGuideId] = useState<string | null>(null);
-  const [applyFields, setApplyFields] = useState<TeamApplySelection[]>([]);
-  const [multipleApplyGuideId, setMultipleApplyGuideId] = useState<string | null>(null);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [searchTarget, setSearchTarget] = useState<TeamSearchTarget>("all");
-  const teamSearch = useMemo(() => {
-    const characterNames = new Map(characters.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
-    const weaponNames = new Map(weapons.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
-    const artifactNames = new Map(artifacts.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
-
-    return searchTeams(teams.map((team, teamIndex) => ({ team, teamIndex })), ({ team }) => ({
-        team: [team.title],
-        character: team.members.flatMap((member) => {
-          const name = characterNames.get(member.characterKey);
-          return name ?? [];
-        }),
-        weapon: team.members.flatMap((member) => {
-          const name = member.weaponKey
-            ? weaponNames.get(member.weaponKey)
-            : undefined;
-          return name ?? [];
-        }),
-        artifact: team.members.flatMap((member) =>
-          [member.artifactKey, member.secondArtifactKey].flatMap((key) => {
-            const name = key ? artifactNames.get(key) : undefined;
-            return name ?? [];
-          }),
-        ),
-      }), searchQuery, searchTarget);
-  }, [artifacts, characters, searchQuery, searchTarget, teams, weapons]);
-  const activeImportGroup = activeImportGuide?.groups[Number(guideImportCondition)]
-    ?? activeImportGuide?.groups[0];
-  const importTeamSearch = useMemo(() => {
-    const characterNames = new Map(characters.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
-    const weaponNames = new Map(weapons.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
-    const artifactNames = new Map(artifacts.map((item) => [item.key, [item.name, ...(item.aliases ?? [])]]));
-    return searchTeams(activeImportGroup?.teams ?? [], (team) => ({
-      team: [team.title],
-      character: team.members.flatMap((member) => characterNames.get(member.characterKey) ?? [member.characterName]),
-      weapon: team.members.flatMap((member) => member.weaponKey ? weaponNames.get(member.weaponKey) ?? [] : []),
-      artifact: team.members.flatMap((member) => [member.artifactKey, member.secondArtifactKey].flatMap((key) => key ? artifactNames.get(key) ?? [] : [])),
-    }), guideTeamQuery, guideTeamSearchTarget);
-  }, [activeImportGroup, artifacts, characters, guideTeamQuery, guideTeamSearchTarget, weapons]);
-  const importGuideSearch = useMemo(() => {
-    return searchItems(importGuides ?? [], guideListQuery,
-      (sourceGuide) => `${sourceGuide.name} ${sourceGuide.characterKey}`,
-      (sourceGuide) => [sourceGuide.name]);
-  }, [guideListQuery, importGuides]);
-  const filteredTeams = teamSearch.items;
-  const filteredImportTeams = importTeamSearch.items;
-  const filteredImportGuides = importGuideSearch.items;
-  const eligibleEverywhereTeams = filterTeamImportsByName(teams, everywhereTeams, ignoreSameName);
-  const eligibleEverywhereIds = new Set(eligibleEverywhereTeams.map((team) => team.id));
-  const selectedEverywhereTeams = eligibleEverywhereTeams.filter((team) => everywhereSelectedIds.has(team.id));
-  const allEverywhereTeamsSelected = eligibleEverywhereTeams.length > 0
-    && eligibleEverywhereTeams.every((team) => everywhereSelectedIds.has(team.id));
-  const value = {
-    groups: teamGroups.map((group) => ({ name: group.name.trim() || null, note: group.note.trim() || null, iconMediaId: group.iconMediaId, teams: group.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 teamFieldInvalid = (teamIndex: number, field: string) =>
-    !validation.success && validation.error.issues.some((issue) =>
-      issue.path[0] === "groups" && issue.path[1] === activeTeamGroupIndex && issue.path[2] === "teams" && issue.path[3] === teamIndex && issue.path[4] === field,
-    );
-  const memberFieldInvalid = (teamIndex: number, memberIndex: number, field: string) =>
-    !validation.success && validation.error.issues.some((issue) =>
-      issue.path[0] === "groups" && issue.path[1] === activeTeamGroupIndex && issue.path[2] === "teams" && issue.path[3] === teamIndex && issue.path[4] === "members" &&
-      issue.path[5] === memberIndex && issue.path[6] === field,
-    );
-  const localDraft = { teamGroups, activeTeamGroupIndex };
-  useEffect(() => {
-    const timer = window.setTimeout(() => {
-      try {
-        setPresets(parseTeamPresets(window.localStorage.getItem(teamPresetStorageKey(guide.id))));
-      } catch {
-        setPresets([]);
-      }
-      setPresetsHydrated(true);
-      setPresetsGuideId(guide.id);
-    }, 0);
-    return () => window.clearTimeout(timer);
-  }, [guide.id]);
-  useEffect(() => {
-    const timer = window.setTimeout(() => {
-      try {
-        const stored = JSON.parse(
-          window.localStorage.getItem(multipleApplyStorageKey(guide.id)) ?? "null",
-        ) as { selectedTeamIds?: unknown; applyFields?: unknown } | null;
-        const teamIds = new Set(initial.teamGroups.flatMap((group) => group.teams.map((team) => team.id)));
-        setSelectedTeamIds(new Set(
-          Array.isArray(stored?.selectedTeamIds)
-            ? stored.selectedTeamIds.filter(
-                (id): id is string => typeof id === "string" && teamIds.has(id),
-              )
-            : [],
-        ));
-        setApplyFields(
-          Array.isArray(stored?.applyFields)
-            ? stored.applyFields.filter(
-                (field): field is TeamApplySelection => typeof field === "string",
-              )
-            : [],
-        );
-      } catch {
-        setSelectedTeamIds(new Set());
-        setApplyFields([]);
-      }
-      setMultipleApplyGuideId(guide.id);
-    }, 0);
-    return () => window.clearTimeout(timer);
-  }, [guide.id, initial.teamGroups]);
-  useEffect(() => {
-    if (multipleApplyGuideId !== guide.id) return;
-    try {
-      window.localStorage.setItem(
-        multipleApplyStorageKey(guide.id),
-        JSON.stringify({
-          selectedTeamIds: [...selectedTeamIds],
-          applyFields,
-        }),
-      );
-    } catch {
-      // Browser storage is optional; multiple apply remains usable without it.
-    }
-  }, [applyFields, guide.id, multipleApplyGuideId, selectedTeamIds]);
-  useEffect(() => {
-    if (!presetsHydrated || presetsGuideId !== guide.id) return;
-    try {
-      window.localStorage.setItem(teamPresetStorageKey(guide.id), JSON.stringify(presets));
-      document.cookie = `${teamPresetCookieKey(guide.id)}=${encodeURIComponent(JSON.stringify(presets.map(({ id, name, createdAt }) => ({ id, name, createdAt })) ))}; path=/; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`;
-    } catch {
-      // Browser storage is optional; the editor remains usable without it.
-    }
-  }, [guide.id, presets, presetsGuideId, presetsHydrated]);
-  const autosave = useAutosave({
-    guideId: guide.id,
-    scope: "team",
-    value,
-    valid: validation.success,
-    initialVersion: guide.version,
-    persist: (next, expectedVersion, intent) =>
-      saveTeamSection(guide.id, { ...next, expectedVersion }, intent),
-    storageKey: adminDraftKey(guide.id, "team"),
-    localDraft,
-    parseLocalDraft: (candidate) =>
-      parseEditorDraft<typeof localDraft>(candidate, ["teamGroups"]),
-    restoreLocalDraft: (draft) => {
-      setTeamGroups(draft.teamGroups.map((group) => ({ ...group, name: group.name ?? "" })));
-      setActiveTeamGroupIndex(draft.activeTeamGroupIndex ?? 0);
-    },
-  });
-  const handleTeamDragEnd = ({ active, over }: DragEndEvent) => {
-    if (!over || active.id === over.id) return;
-    setTeams((current) => {
-      const from = current.findIndex((team) => team.clientId === active.id);
-      const to = current.findIndex((team) => team.clientId === over.id);
-      return from === -1 || to === -1 ? current : arrayMove(current, from, to);
-    });
-  };
-  const handleTeamMemberDragEnd = (
-    teamId: string,
-    { active, over }: DragEndEvent,
-  ) => {
-    if (!over || active.id === over.id) return;
-    setTeams((current) =>
-      current.map((team) => {
-        if (team.clientId !== teamId) return team;
-        const memberIds = team.members.map(getMemberSortableId);
-        const from = memberIds.indexOf(String(active.id));
-        const to = memberIds.indexOf(String(over.id));
-        return from === -1 || to === -1
-          ? team
-          : { ...team, members: arrayMove(team.members, from, to) };
-      }),
-    );
-  };
-  const updateTeam = (
-    teamIndex: number,
-    update: Partial<Omit<TeamToolValue, "clientId" | "members">>,
-  ) => {
-    setTeams((current) =>
-      current.map((team, index) =>
-        index === teamIndex ? { ...team, ...update } : team,
-      ),
-    );
-  };
-  const updateTeamMember = (
-    teamIndex: number,
-    memberIndex: number,
-    update: Partial<TeamToolValue["members"][number]>,
-  ) => {
-    setTeams((current) =>
-      current.map((team, index) =>
-        index === teamIndex
-          ? {
-              ...team,
-              members: team.members.map((member, innerIndex) => {
-                if (innerIndex !== memberIndex) return member;
-                const nextMember = { ...member, ...update };
-                memberSortableIds.current.set(
-                  nextMember,
-                  getMemberSortableId(member),
-                );
-                return nextMember;
-              }),
-            }
-          : team,
-      ),
-    );
-  };
-  const toggleTeamSelection = (teamId: string, checked: boolean) => {
-    setSelectedTeamIds((current) => {
-      const next = new Set(current);
-      if (checked) next.add(teamId);
-      else next.delete(teamId);
-      return next;
-    });
-  };
-  const toggleApplyField = (field: TeamApplySelection, checked: boolean) => {
-    setApplyFields((current) => {
-      const next = new Set(current);
-      if (checked) next.add(field);
-      else next.delete(field);
-      return [...next];
-    });
-  };
-  const applyChanges = () => {
-    if (!sourceTeamId || !selectedTeamIds.size || !applyFields.length) return;
-    const nextTeams = applyTeamFields(
-      teams,
-      sourceTeamId,
-      selectedTeamIds,
-      applyFields,
-    );
-    const unsupported = findUnsupportedTeamWeapon(
-      nextTeams,
-      selectedTeamIds,
-      characters,
-      weapons,
-    );
-    if (unsupported) {
-      toast.error(
-        `${unsupported.characterName} ไม่รองรับอาวุธ ${unsupported.weaponName}`,
-      );
-      return;
-    }
-    setTeams(nextTeams);
-    setSelectedTeamIds(new Set());
-    setApplyOpen(false);
-  };
-  const savePreset = () => {
-    const source = teams.find((team) => team.clientId === sourceTeamId);
-    const name = presetName.trim();
-    if (!source || !name) return;
-    const preset: TeamPreset = {
-      id: createClientId("preset"),
-      name,
-      createdAt: new Date().toISOString(),
-      team: {
-        title: source.title,
-        rotationSeconds: source.rotationSeconds,
-        combo: source.combo,
-        members: source.members.map((member) => ({ ...member })),
-      },
-    };
-    setPresets((current) => limitPresets([preset, ...current]));
-    setPresetName("");
-    setPresetOpen(false);
-  };
-  const applyPreset = (preset: TeamPreset) => {
-    if (!selectedTeamIds.size || !applyFields.length) return;
-    const nextTeams = applyPresetFields(
-      teams,
-      preset,
-      selectedTeamIds,
-      applyFields,
-    );
-    const unsupported = findUnsupportedTeamWeapon(
-      nextTeams,
-      selectedTeamIds,
-      characters,
-      weapons,
-    );
-    if (unsupported) {
-      toast.error(
-        `${unsupported.characterName} ไม่รองรับอาวุธ ${unsupported.weaponName}`,
-      );
-      return;
-    }
-    setTeams(nextTeams);
-    setSelectedTeamIds(new Set());
-  };
-  const exportTeam = async (team: TeamToolValue) => {
-    let serialized: string;
-    try {
-      serialized = serializeTeamTransfer(team);
-    } catch {
-      toast.error("Export Team ไม่สำเร็จ กรุณาตรวจสอบข้อมูล Team");
-      return;
-    }
-    const url = URL.createObjectURL(new Blob([serialized], { type: "application/json" }));
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = teamTransferFileName(team.title);
-    link.click();
-    URL.revokeObjectURL(url);
-    try {
-      await navigator.clipboard.writeText(serialized);
-      toast.success(`คัดลอกและดาวน์โหลด ${team.title} แล้ว`);
-    } catch {
-      toast.success(`ดาวน์โหลด ${teamTransferFileName(team.title)} แล้ว`);
-    }
-  };
-  const appendImportedTeams = (importedTeams: Array<Omit<TeamToolValue, "clientId">>) => {
-    if (!importedTeams.length) return false;
-    for (const imported of importedTeams) {
-      const catalogIssue = findInvalidTeamCatalogReference(
-        imported,
-        characters,
-        weapons,
-        artifacts,
-      );
-      if (catalogIssue) {
-        toast.error(catalogIssue);
-        return false;
-      }
-    }
-    setTeams((current) => [
-      ...current,
-      ...cloneTeamImports(importedTeams, () => createClientId("team")),
-    ]);
-    return true;
-  };
-  const importTeamFiles = async () => {
-    try {
-      const serializedTeams = await Promise.all(importFiles.map((file) => file.text()));
-      if (!serializedTeams.length) return;
-      const importedTeams = serializedTeams.map(parseTeamTransfer);
-      if (!appendImportedTeams(importedTeams)) return;
-      setImportFiles([]);
-      setImportOpen(false);
-      toast.success(`Import ${importedTeams.length} Team แล้ว`);
-    } catch {
-      toast.error("มีไฟล์ Team ที่ไม่ถูกต้องหรือเป็นเวอร์ชันที่ไม่รองรับ");
-    }
-  };
-  const openGuideImport = async () => {
-    setImportOpen(false);
-    setGuideImportOpen(true);
-    setActiveImportGuide(null);
-    setSelectedImports({});
-    setGuideListQuery("");
-    setGuideImportError(null);
-    setGuideImportLoading("guides");
-    const result = await listTeamImportGuides(guide.id);
-    setGuideImportLoading(null);
-    if (result.status === "success") setImportGuides(result.guides);
-    else setGuideImportError(result.message);
-  };
-  const openEverywhereImport = () => {
-    everywhereSearchId.current += 1;
-    setImportOpen(false);
-    setEverywhereImportOpen(true);
-    setEverywhereCharacterKey("");
-    setEverywhereSearchedKey("");
-    setEverywhereTeams([]);
-    setEverywhereSelectedIds(new Set());
-    setIgnoreSameName(true);
-    setEverywhereError(null);
-    setEverywhereLoading(false);
-  };
-  const searchEverywhereTeams = async (characterKey: string) => {
-    const searchId = ++everywhereSearchId.current;
-    setEverywhereSearchedKey("");
-    setEverywhereTeams([]);
-    setEverywhereSelectedIds(new Set());
-    setEverywhereError(null);
-    setEverywhereLoading(true);
-    const result = await listTeamImportsForCharacter(guide.id, characterKey);
-    if (searchId !== everywhereSearchId.current) return;
-    setEverywhereLoading(false);
-    if (result.status === "success") {
-      setEverywhereTeams(result.teams);
-      setEverywhereSearchedKey(characterKey);
-    } else setEverywhereError(result.message);
-  };
-  const importEverywhereTeams = (sourceTeams: TeamEverywhereImport[]) => {
-    if (!sourceTeams.length) return;
-    const importedTeams = sourceTeams.map(toTeamDraft);
-    if (!appendImportedTeams(importedTeams)) return;
-    setEverywhereImportOpen(false);
-    setEverywhereSelectedIds(new Set());
-    toast.success(`Import ${importedTeams.length} Team แล้ว`);
-  };
-  const enterImportGuide = async (guideId: string) => {
-    setGuideImportError(null);
-    setGuideImportLoading("teams");
-    const result = await loadTeamImportGuide(guideId);
-    setGuideImportLoading(null);
-    if (result.status === "success") {
-      setGuideImportCondition("0");
-      setGuideTeamQuery("");
-      setGuideTeamSearchTarget("all");
-      setActiveImportGuide(result.guide);
-    }
-    else setGuideImportError(result.message);
-  };
-  const confirmGuideImport = () => {
-    const importedTeams = Object.values(selectedImports);
-    if (!appendImportedTeams(importedTeams)) return;
-    setGuideImportOpen(false);
-    setSelectedImports({});
-    toast.success(`Import ${importedTeams.length} Team แล้ว`);
-  };
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Team Calc</CardTitle>
-        <CardDescription>
-          ลากเพื่อเรียง Team แล้วใส่ความเสียหายของตัวละคร 4 ตัว
-          ระบบจะแสดงสัดส่วนและ Total DPS และบันทึกอัตโนมัติ
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <ConditionControls
-          ariaLabel="เลือกเงื่อนไข Team"
-          items={teamGroups}
-          activeIndex={activeTeamGroupIndex}
-          onActiveIndexChange={(nextIndex) => {
-            const group = teamGroups[nextIndex];
-            if (!group) return;
-            setActiveTeamGroupIndex(nextIndex);
-            setSelectedTeamIds(new Set());
-            setSourceTeamId(group.teams[0]?.clientId ?? "");
-          }}
-          onRename={setRenamingTeamGroupIndex}
-          onReorder={(from, to) => {
-            const reordered = reorderConditions(teamGroups, activeTeamGroupIndex, from, to);
-            setTeamGroups(reordered.items);
-            setActiveTeamGroupIndex(reordered.activeIndex);
-          }}
-          onAdd={(details) => {
-            setTeamGroups([...teamGroups, { clientId: createClientId("team-condition"), ...details, note: "", teams: [] }]);
-            setActiveTeamGroupIndex(teamGroups.length);
-            setSelectedTeamIds(new Set());
-            setSourceTeamId("");
-          }}
-          onDuplicate={() => {
-            const source = teamGroups[activeTeamGroupIndex];
-            if (!source) return;
-            const copiedTeams = source.teams.map((team) => ({ ...team, clientId: createClientId("team"), members: team.members.map((member) => ({ ...member })) }));
-            setTeamGroups([...teamGroups, { clientId: createClientId("team-condition"), name: source.name, note: source.note, iconMediaId: source.iconMediaId, iconUrl: source.iconUrl, teams: copiedTeams }]);
-            setActiveTeamGroupIndex(teamGroups.length);
-            setSelectedTeamIds(new Set());
-            setSourceTeamId(copiedTeams[0]?.clientId ?? "");
-          }}
-          onDelete={() => {
-            setTeamGroups(teamGroups.filter((_, index) => index !== activeTeamGroupIndex));
-            setActiveTeamGroupIndex(Math.max(0, activeTeamGroupIndex - 1));
-            setSelectedTeamIds(new Set());
-          }}
-        />
-        <ConditionRenameDialog
-          open={renamingTeamGroupIndex !== null}
-          fallback={`Condition ${(renamingTeamGroupIndex ?? 0) + 1}`}
-          value={renamingTeamGroupIndex === null ? "" : teamGroups[renamingTeamGroupIndex]?.name ?? ""}
-          iconUrl={renamingTeamGroupIndex === null ? null : teamGroups[renamingTeamGroupIndex]?.iconUrl ?? null}
-          onOpenChange={(open) => { if (!open) setRenamingTeamGroupIndex(null); }}
-          onChange={(name) => setTeamGroups(teamGroups.map((group, index) => index === renamingTeamGroupIndex ? { ...group, name } : group))}
-          onIconChange={(icon) => setTeamGroups(teamGroups.map((group, index) => index === renamingTeamGroupIndex ? { ...group, ...icon } : group))}
-        />
-        <Field>
-          <FieldLabel htmlFor={`team-condition-note-${teamGroups[activeTeamGroupIndex]?.clientId}`}>Condition note (optional)</FieldLabel>
-          <Textarea id={`team-condition-note-${teamGroups[activeTeamGroupIndex]?.clientId}`} value={teamGroups[activeTeamGroupIndex]?.note ?? ""} onChange={(event) => setTeamGroups(teamGroups.map((group, index) => index === activeTeamGroupIndex ? { ...group, note: event.target.value } : group))} />
-        </Field>
-        <div className="flex min-w-0 flex-wrap items-center gap-2 rounded-lg border bg-muted/30 p-3">
-          <Checkbox
-            checked={selectedTeamIds.size === teams.length && teams.length > 0}
-            onCheckedChange={(checked) => setSelectedTeamIds(checked ? new Set(teams.map((team) => team.clientId)) : new Set())}
-            aria-label="เลือกทุก Team"
-          />
-          <span className="text-sm font-medium">เลือก Team สำหรับ Multiple Apply</span>
-          <Select value={sourceTeamId} onValueChange={(value) => { if (value) setSourceTeamId(value); }}>
-            <SelectTrigger className="w-full basis-full"><span>{teams.find((team) => team.clientId === sourceTeamId)?.title || "Source Team"}</span></SelectTrigger>
-            <SelectContent>
-              <SelectGroup>{teams.map((team) => <SelectItem key={team.clientId} value={team.clientId}>{team.title || "Untitled Team"}</SelectItem>)}</SelectGroup>
-            </SelectContent>
-          </Select>
-          <Button type="button" size="sm" disabled={!selectedTeamIds.size} onClick={() => setApplyOpen(true)}>Multiple Apply</Button>
-          <Button type="button" variant="outline" size="sm" disabled={!sourceTeamId} onClick={() => setPresetOpen(true)}>Save preset</Button>
-          {presets.map((preset) => (
-            <div key={preset.id} className="flex min-w-0 max-w-full items-center gap-1">
-              <Button className="min-w-0 max-w-full truncate" type="button" variant="ghost" size="sm" disabled={!selectedTeamIds.size} onClick={() => applyPreset(preset)}>{preset.name}</Button>
-              <SimpleTooltip text={`ลบ preset ${preset.name}`}>
-                <Button type="button" variant="ghost" size="icon-sm" onClick={() => setPresets((current) => current.filter((item) => item.id !== preset.id))} aria-label={`ลบ preset ${preset.name}`}><XIcon /></Button>
-              </SimpleTooltip>
-            </div>
-          ))}
-        </div>
-        <FieldGroup className="mt-4">
-          <Field>
-            <FieldLabel htmlFor="team-search">ค้นหา Team</FieldLabel>
-
-            <div className="relative">
-              <SearchIcon
-                aria-hidden="true"
-                className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
-              />
-              <Input
-                id="team-search"
-                className="pl-9"
-                placeholder="ค้นหาชื่อทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
-                value={searchQuery}
-                onValueChange={setSearchQuery}
-              />
-            </div>
-          </Field>
-          <Field>
-            <FieldLabel>ค้นหาใน</FieldLabel>
-            <ToggleGroup
-              aria-label="เลือกประเภทข้อมูลที่ต้องการค้นหา"
-              className="max-w-full flex-wrap justify-start"
-              variant="outline"
-              size="sm"
-              value={[searchTarget]}
-              onValueChange={(value) => {
-                const target = value[0] as TeamSearchTarget | undefined;
-                if (target) setSearchTarget(target);
-              }}
-            >
-              <ToggleGroupItem value="all">ทั้งหมด</ToggleGroupItem>
-              <ToggleGroupItem value="team">ชื่อทีม</ToggleGroupItem>
-              <ToggleGroupItem value="character">ตัวละคร</ToggleGroupItem>
-              <ToggleGroupItem value="weapon">อาวุธ</ToggleGroupItem>
-              <ToggleGroupItem value="artifact">อาร์ติแฟกต์</ToggleGroupItem>
-            </ToggleGroup>
-          </Field>
-        </FieldGroup>
-        <DndContext
-          sensors={teamSensors}
-          collisionDetection={closestCenter}
-          onDragEnd={handleTeamDragEnd}
-        >
-          <SortableContext
-            items={filteredTeams.map(({ team }) => team.clientId)}
-            strategy={rectSortingStrategy}
-          >
-            {filteredTeams.length ? (
-              <div className="grid gap-5 xl:grid-cols-2">
-                {filteredTeams.map(({ team, teamIndex }) => {
-                  const total = team.members.reduce(
-                    (sum, member) => sum + (Number(member.damage) || 0),
-                    0,
-                  );
-                  const seconds = Number(team.rotationSeconds);
-                  const dps = seconds > 0 ? total / seconds : 0;
-                  return (
-                    <SortableTeamItem key={team.clientId} id={team.clientId}>
-                      {(dragHandle) => (
-                        <Card
-                          className="h-full"
-                          size="sm"
-                          data-invalid={teamFieldInvalid(teamIndex, "members")}
-                        >
-                          <CardHeader>
-                            <CardTitle>
-                              <Field data-invalid={teamFieldInvalid(teamIndex, "title")}>
-                                <FieldLabel className="sr-only" htmlFor={`team-title-${team.clientId}`}>
-                                  ชื่อ Team
-                                </FieldLabel>
-                                <Input
-                                  id={`team-title-${team.clientId}`}
-                                  value={team.title}
-                                  placeholder={`Team ${teamIndex + 1}`}
-                                  aria-invalid={teamFieldInvalid(teamIndex, "title")}
-                                  onChange={(event) =>
-                                    updateTeam(teamIndex, { title: event.target.value })
-                                  }
-                                />
-                              </Field>
-                            </CardTitle>
-                            <CardDescription>
-                              <Field
-                                className="w-fit justify-start"
-                                orientation="horizontal"
-                                data-invalid={teamFieldInvalid(teamIndex, "rotationSeconds")}
-                              >
-                                <FieldLabel
-                                  className="flex-none"
-                                  htmlFor={`team-rotation-${team.clientId}`}
-                                >
-                                  Rotation
-                                </FieldLabel>
-                                <Input
-                                  id={`team-rotation-${team.clientId}`}
-                                  className="w-24 text-foreground"
-                                  type="number"
-                                  min="0.01"
-                                  step="0.5"
-                                  value={team.rotationSeconds}
-                                  aria-invalid={teamFieldInvalid(teamIndex, "rotationSeconds")}
-                                  onChange={(event) =>
-                                    updateTeam(teamIndex, {
-                                      rotationSeconds: event.target.value,
-                                    })
-                                  }
-                                />
-                                <span>วินาที</span>
-                              </Field>
-                            </CardDescription>
-                            <CardAction className="flex max-w-44 flex-wrap justify-end gap-1">
-                              <Checkbox
-                                checked={selectedTeamIds.has(team.clientId)}
-                                onCheckedChange={(checked) =>
-                                  toggleTeamSelection(team.clientId, checked === true)
-                                }
-                                aria-label={`เลือก ${team.title || `Team ${teamIndex + 1}`}`}
-                              />
-                              {dragHandle}
-                              <SimpleTooltip text="Export Team">
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="icon-sm"
-                                  onClick={() => void exportTeam(team)}
-                                >
-                                  <ClipboardCopyIcon />
-                                  <span className="sr-only">
-                                    Export {team.title || `Team ${teamIndex + 1}`}
-                                  </span>
-                                </Button>
-                              </SimpleTooltip>
-                              <SimpleTooltip text="ทำสำเนา Team">
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="icon-sm"
-                                  onClick={() =>
-                                    setTeams((current) => {
-                                      const sourceIndex = current.findIndex(
-                                        (item) => item.clientId === team.clientId,
-                                      );
-                                      if (sourceIndex === -1)
-                                        return current;
-                                      const source = current[sourceIndex];
-                                      const title = source.title.trim()
-                                        ? `${source.title.slice(0, 153)} (Copy)`
-                                        : `Team ${sourceIndex + 1} (Copy)`;
-                                      return current.toSpliced(sourceIndex + 1, 0, {
-                                        ...source,
-                                        clientId: createClientId("team"),
-                                        title,
-                                        members: source.members.map((member) => ({
-                                          ...member,
-                                        })),
-                                      });
-                                    })
-                                  }
-                                >
-                                  <CopyIcon />
-                                  <span className="sr-only">ทำสำเนา Team</span>
-                                </Button>
-                              </SimpleTooltip>
-                              <DeleteConfirmationDialog
-                                triggerTooltip="ลบ Team"
-                                trigger={
-                                  <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="icon-sm"
-                                  />
-                                }
-                                type="Team"
-                                description="ข้อมูล Team และตัวละครทั้ง 4 คนจะถูกลบออกจาก Guide"
-                                confirmLabel="ยืนยันลบ Team"
-                                onConfirm={() =>
-                                  setTeams(
-                                    teams.filter(
-                                      (item) => item.clientId !== team.clientId,
-                                    ),
-                                  )
-                                }
-                              >
-                                <Trash2Icon />
-                                <span className="sr-only">ลบ Team</span>
-                              </DeleteConfirmationDialog>
-                            </CardAction>
-                          </CardHeader>
-                          <CardContent className="flex flex-col gap-4">
-                            <DndContext
-                              sensors={teamSensors}
-                              collisionDetection={closestCenter}
-                              onDragEnd={(event) =>
-                                handleTeamMemberDragEnd(team.clientId, event)
-                              }
-                            >
-                              <SortableContext
-                                items={team.members.map(getMemberSortableId)}
-                                strategy={rectSortingStrategy}
-                              >
-                                <div className="grid grid-cols-4 gap-1 sm:gap-3">
-                                  {team.members.map((member, memberIndex) => {
-                                    const character = characters.find(
-                                      (item) => item.key === member.characterKey,
-                                    );
-                                    const compatibleWeapons = weapons.filter(
-                                      (weapon) =>
-                                        supportsWeaponType(
-                                          character?.weaponType,
-                                          weapon.weaponType,
-                                        ),
-                                    );
-                                    const selectedWeapon = compatibleWeapons.find(
-                                      (weapon) => weapon.key === member.weaponKey,
-                                    );
-                                    const share = total
-                                      ? ((Number(member.damage) || 0) / total) * 100
-                                      : 0;
-                                    return (
-                                      <SortableTeamMember
-                                        key={getMemberSortableId(member)}
-                                        id={getMemberSortableId(member)}
-                                      >
-                                        {(memberDragHandle) => (
-                                          <div
-                                            className={cn(
-                                              "flex min-w-0 flex-col rounded-lg p-0.5 text-center sm:p-1",
-                                              !character && "bg-muted/40",
-                                            )}
-                                            style={
-                                              character?.element
-                                                ? {
-                                                    backgroundColor:
-                                                      elementBackgroundColor(
-                                                        character.element,
-                                                      ),
-                                                  }
-                                                : undefined
-                                            }
-                                          >
-                                            <div className="flex items-center justify-between">
-                                              <span className="text-xs text-muted-foreground">
-                                                #{memberIndex + 1}
-                                              </span>
-                                              {memberDragHandle}
-                                            </div>
-                                            <div className="flex flex-col gap-1 sm:grid sm:grid-cols-3">
-                                              <div className="sm:col-span-2 sm:row-span-2">
-                                                <CharacterSelect
-                                                  presentation="slot"
-                                                  items={characters}
-                                                  value={member.characterKey}
-                                                  label={`เลือกตัวละครตำแหน่ง ${memberIndex + 1}`}
-                                                  placeholder="ค้นหาชื่อตัวละคร…"
-                                                  rarityBackground
-                                                  invalid={memberFieldInvalid(
-                                                    teamIndex,
-                                                    memberIndex,
-                                                    "characterKey",
-                                                  )}
-                                                  className="rounded-lg border-0 [&>img]:object-cover [&>img]:p-0"
-                                                  onValueChange={(characterKey) =>
-                                                    updateTeamMember(
-                                                      teamIndex,
-                                                      memberIndex,
-                                                      {
-                                                        characterKey,
-                                                        weaponKey: null,
-                                                        artifactKey: null,
-                                                        secondArtifactKey: null,
-                                                        constellation: "0",
-                                                        refinement: "1",
-                                                      },
-                                                    )
-                                                  }
-                                                />
-                                              </div>
-                                              <div className="grid min-w-0 grid-cols-2 gap-1 sm:row-span-2 sm:grid-cols-1">
-                                                <WeaponSelect
-                                                  presentation="slot"
-                                                  items={compatibleWeapons}
-                                                  value={member.weaponKey ?? ""}
-                                                  label={`เลือกอาวุธของตัวละครตำแหน่ง ${memberIndex + 1}`}
-                                                  placeholder="ค้นหาอาวุธที่รองรับ…"
-                                                  rarityBackground
-                                                  invalid={memberFieldInvalid(
-                                                    teamIndex,
-                                                    memberIndex,
-                                                    "weaponKey",
-                                                  )}
-                                                  onValueChange={(weaponKey) =>
-                                                    updateTeamMember(
-                                                      teamIndex,
-                                                      memberIndex,
-                                                      {
-                                                        weaponKey:
-                                                          weaponKey || null,
-                                                        refinement: "1",
-                                                      },
-                                                    )
-                                                  }
-                                                />
-                                                <ArtifactSelect
-                                                  multiple
-                                                  items={artifacts}
-                                                  values={[
-                                                    member.artifactKey,
-                                                    member.secondArtifactKey,
-                                                  ].filter(
-                                                    (key): key is string => Boolean(key),
-                                                  )}
-                                                  label={`เลือก Artifact สูงสุด 2 ชุดของตัวละครตำแหน่ง ${memberIndex + 1}`}
-                                                  invalid={memberFieldInvalid(
-                                                    teamIndex,
-                                                    memberIndex,
-                                                    "artifactKey",
-                                                  )}
-                                                  placeholder="ค้นหาชุด Artifact…"
-                                                  onValuesChange={(artifactKeys) =>
-                                                    updateTeamMember(
-                                                      teamIndex,
-                                                      memberIndex,
-                                                      {
-                                                        artifactKey:
-                                                          artifactKeys[0] ?? null,
-                                                        secondArtifactKey:
-                                                          artifactKeys[1] ?? null,
-                                                      },
-                                                    )
-                                                  }
-                                                />
-                                              </div>
-                                            </div>
-                                            <div className="mt-1 flex min-w-0 gap-1">
-                                              <ConstellationSelect
-                                                value={String(member.constellation)}
-                                                includeRange
-                                                disabled={!character}
-                                                onValueChange={(value) =>
-                                                  updateTeamMember(
-                                                    teamIndex,
-                                                    memberIndex,
-                                                    { constellation: value },
-                                                  )
-                                                }
-                                                aria-label={`Constellation ของตัวละครตำแหน่ง ${memberIndex + 1}`}
-                                                triggerProps={{
-                                                  size: "sm",
-                                                  className: "h-6 min-w-0 flex-1 justify-center px-1 text-xs [&>svg]:hidden",
-                                                }}
-                                              />
-                                              <RefinementSelect
-                                                value={String(member.refinement)}
-                                                includeRange
-                                                disabled={!selectedWeapon}
-                                                onValueChange={(value) =>
-                                                  updateTeamMember(
-                                                    teamIndex,
-                                                    memberIndex,
-                                                    { refinement: value },
-                                                  )
-                                                }
-                                                aria-label={`Refinement ของอาวุธตำแหน่ง ${memberIndex + 1}`}
-                                                triggerProps={{
-                                                  size: "sm",
-                                                  className: "h-6 min-w-0 flex-1 justify-center px-1 text-xs [&>svg]:hidden",
-                                                }}
-                                              />
-                                            </div>
-                                            <Field
-                                              data-invalid={memberFieldInvalid(
-                                                teamIndex,
-                                                memberIndex,
-                                                "damage",
-                                              )}
-                                            >
-                                              <FieldLabel
-                                                className="sr-only"
-                                                htmlFor={`team-${team.clientId}-damage-${memberIndex}`}
-                                              >
-                                                Damage ของตัวละครตำแหน่ง {memberIndex + 1}
-                                              </FieldLabel>
-                                              <Input
-                                                id={`team-${team.clientId}-damage-${memberIndex}`}
-                                                className="h-7 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                                                type="number"
-                                                min="0"
-                                                step="1"
-                                                value={member.damage}
-                                                aria-invalid={memberFieldInvalid(
-                                                  teamIndex,
-                                                  memberIndex,
-                                                  "damage",
-                                                )}
-                                                onChange={(event) =>
-                                                  updateTeamMember(
-                                                    teamIndex,
-                                                    memberIndex,
-                                                    {
-                                                      damage: event.target.value,
-                                                    },
-                                                  )
-                                                }
-                                              />
-                                            </Field>
-                                            <p className="mt-0.5 text-xs text-muted-foreground">
-                                              {share.toFixed(2)}%
-                                            </p>
-                                          </div>
-                                        )}
-                                      </SortableTeamMember>
-                                    );
-                                  })}
-                                </div>
-                              </SortableContext>
-                            </DndContext>
-                            <Separator />
-                            <div className="flex items-end justify-between gap-4">
-                              <div>
-                                <p className="text-sm text-muted-foreground">
-                                  ดาเมจรวม
-                                </p>
-                                <p className="font-semibold">
-                                  {total.toLocaleString()}
-                                </p>
-                              </div>
-                              <div className="text-right">
-                                <p className="text-sm text-muted-foreground">DPS</p>
-                                <p className="text-3xl font-semibold text-primary">
-                                  {dps.toLocaleString(undefined, {
-                                    maximumFractionDigits: 0,
-                                  })}
-                                </p>
-                              </div>
-                            </div>
-                            <Field data-invalid={teamFieldInvalid(teamIndex, "combo")}>
-                              <FieldLabel
-                                className="sr-only"
-                                htmlFor={`team-combo-${team.clientId}`}
-                              >
-                                Combo
-                              </FieldLabel>
-                              <Textarea
-                                id={`team-combo-${team.clientId}`}
-                                value={team.combo}
-                                placeholder="ใส่ลำดับ Combo…"
-                                aria-invalid={teamFieldInvalid(teamIndex, "combo")}
-                                onChange={(event) =>
-                                  updateTeam(teamIndex, {
-                                    combo: event.target.value,
-                                  })
-                                }
-                              />
-                            </Field>
-                          </CardContent>
-                        </Card>
-                      )}
-                    </SortableTeamItem>
-                  );
-                })}
-              </div>
-            ) : (
-              <Empty>
-                <EmptyHeader>
-                  <EmptyMedia variant="icon">
-                    <SearchIcon />
-                  </EmptyMedia>
-                  <EmptyTitle>
-                    {teams.length
-                      ? "ไม่พบ Team ที่ตรงกับคำค้นหา"
-                      : "ยังไม่มี Team ใน Condition นี้"}
-                  </EmptyTitle>
-                  <EmptyDescription>
-                    {teams.length
-                      ? "ลองเปลี่ยนคำค้นหาหรือประเภทข้อมูล"
-                      : "เพิ่ม Team เพื่อเริ่มจัดตัวละครและคำนวณ DPS"}
-                  </EmptyDescription>
-                </EmptyHeader>
-                {!teams.length ? (
-                  <EmptyContent>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      disabled={characters.length < 4}
-                      onClick={() =>
-                        setTeams([
-                          ...teams,
-                          {
-                            clientId: createClientId("team"),
-                            title: "",
-                            rotationSeconds: "20",
-                            combo: "",
-                            members: fallbackMembers.map((member) => ({
-                              ...member,
-                            })),
-                          },
-                        ])
-                      }
-                    >
-                      <PlusIcon data-icon="inline-start" />
-                      เพิ่ม Team
-                    </Button>
-                  </EmptyContent>
-                ) : null}
-              </Empty>
-            )}
-          </SortableContext>
-        </DndContext>
-      </CardContent>
-      <CardFooter className="flex-wrap justify-between gap-3">
-        <div className="flex flex-wrap gap-3">
-          <Button
-            variant="outline"
-            disabled={characters.length < 4}
-            onClick={() =>
-              setTeams([
-                ...teams,
-                {
-                  clientId: createClientId("team"),
-                  title: "",
-                  rotationSeconds: "20",
-                  combo: "",
-                  members: fallbackMembers.map((member) => ({ ...member })),
-                },
-              ])
-            }
-          >
-            <PlusIcon data-icon="inline-start" />
-            เพิ่ม Team
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => setImportOpen(true)}
-          >
-            <ClipboardPasteIcon data-icon="inline-start" />
-            Import Team
-          </Button>
-        </div>
-        <AutosaveStatus
-          state={autosave.state}
-          conflictVersion={autosave.conflictVersion}
-          canOverwrite={autosave.canOverwrite}
-          onReloadLatest={autosave.reloadLatest}
-          onOverwrite={autosave.overwrite}
-          issues={
-            validation.success
-              ? []
-              : formatGuideValidationIssues("team", validation.error.issues, {
-                  teamNames: teams.map((team) => team.title),
-                })
-          }
-          onSave={autosave.saveNow}
-        />
-      </CardFooter>
-      <Dialog open={applyOpen} onOpenChange={setApplyOpen}>
-        <DialogContent className="max-h-[90svh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-3xl">
-          <DialogHeader>
-            <DialogTitle>Multiple Apply</DialogTitle>
-            <DialogDescription className="wrap-break-word">คัดลอกค่าจาก {teams.find((team) => team.clientId === sourceTeamId)?.title || "Source Team"} ไปยัง {selectedTeamIds.size} Team ที่เลือก: {[...selectedTeamIds].map((id) => teams.find((team) => team.clientId === id)?.title || "Untitled Team").join(", ")}</DialogDescription>
-          </DialogHeader>
-          <div className="flex min-h-0 flex-col gap-5 overflow-y-auto pr-1">
-            {teams.find((team) => team.clientId === sourceTeamId)?.members.map((member, memberIndex) => {
-              const characterName = characters.find((character) => character.key === member.characterKey)?.name || "No character";
-              return (
-                <FieldSet key={memberIndex}>
-                  <FieldLegend>{characterName} (char{memberIndex + 1})</FieldLegend>
-                  <div className="grid gap-3 sm:grid-cols-4">
-                    {teamMemberApplyOptions.map(([field, label]) => {
-                      const selection = `member:${memberIndex}:${field}` as TeamApplySelection;
-                      const id = `apply-${memberIndex}-${field}`;
-                      return (
-                        <Field key={field} orientation="horizontal">
-                          <Checkbox id={id} checked={applyFields.includes(selection)} onCheckedChange={(checked) => toggleApplyField(selection, checked === true)} />
-                          <FieldLabel htmlFor={id}>{label}{field === "refinement" ? ` (${teamRefinementLabel(member.refinement)})` : ""}</FieldLabel>
-                        </Field>
-                      );
-                    })}
-                  </div>
-                </FieldSet>
-              );
-            })}
-            <FieldSet>
-              <FieldLegend>Team fields</FieldLegend>
-              <div className="grid gap-3 sm:grid-cols-2">
-                {(["rotation", "combo"] as const).map((field) => {
-                  const id = `apply-${field}`;
-                  return (
-                    <Field key={field} orientation="horizontal">
-                      <Checkbox id={id} checked={applyFields.includes(field)} onCheckedChange={(checked) => toggleApplyField(field, checked === true)} />
-                      <FieldLabel htmlFor={id}>{field === "rotation" ? "Rotation" : "Combo"}</FieldLabel>
-                    </Field>
-                  );
-                })}
-              </div>
-            </FieldSet>
-          </div>
-          <DialogFooter><Button type="button" variant="outline" onClick={() => setApplyOpen(false)}>ยกเลิก</Button><Button type="button" disabled={!applyFields.length} onClick={applyChanges}>ยืนยันการคัดลอก</Button></DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog open={importOpen} onOpenChange={setImportOpen}>
-        <DialogContent className="max-h-[90svh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle>Import Team</DialogTitle>
-            <DialogDescription>
-              เลือก Team จาก Guide อื่น หรืออัปโหลดไฟล์ JSON ที่เคย Export ไว้
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex min-h-0 flex-col gap-4 overflow-y-auto pr-1">
-            <Card size="sm">
-              <CardHeader>
-                <CardTitle>Import Everywhere</CardTitle>
-                <CardDescription>เลือกตัวละคร แล้วค้นหา Team จาก Guide อื่นที่มีตัวละครนั้นอยู่ในทีม</CardDescription>
-              </CardHeader>
-              <CardFooter>
-                <Button type="button" variant="outline" onClick={openEverywhereImport}>
-                  <SearchIcon data-icon="inline-start" />
-                  เลือกตัวละคร
-                </Button>
-              </CardFooter>
-            </Card>
-            <Card size="sm">
-              <CardHeader>
-                <CardTitle>เลือกจาก Guide</CardTitle>
-                <CardDescription>เลือก Team ที่บันทึกอยู่ใน Guide อื่นได้โดยไม่ต้องดาวน์โหลดไฟล์</CardDescription>
-              </CardHeader>
-              <CardFooter>
-                <Button type="button" variant="outline" onClick={() => void openGuideImport()}>
-                  <BookOpenIcon data-icon="inline-start" />
-                  เปิดรายการ Guide
-                </Button>
-              </CardFooter>
-            </Card>
-            <Card size="sm">
-              <CardHeader>
-                <CardTitle>อัปโหลดไฟล์ JSON</CardTitle>
-                <CardDescription>เลือกหลายไฟล์เพื่อ Import หลาย Team พร้อมกันได้</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Field>
-                  <FieldLabel htmlFor="team-import-files">ไฟล์ Team JSON</FieldLabel>
-                  <Input
-                    id="team-import-files"
-                    type="file"
-                    accept=".json,application/json"
-                    multiple
-                    onChange={(event) => setImportFiles(Array.from(event.target.files ?? []))}
-                  />
-                </Field>
-              </CardContent>
-              <CardFooter>
-                <Button type="button" disabled={!importFiles.length} onClick={() => void importTeamFiles()}>
-                  Import {importFiles.length || ""} Team
-                </Button>
-              </CardFooter>
-            </Card>
-          </div>
-          <DialogFooter>
-            <Button type="button" variant="outline" onClick={() => setImportOpen(false)}>
-              ปิด
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog open={everywhereImportOpen} onOpenChange={(open) => {
-        setEverywhereImportOpen(open);
-        if (!open) {
-          everywhereSearchId.current += 1;
-          setEverywhereLoading(false);
-        }
-      }}>
-        <DialogContent className="max-h-[90svh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-5xl">
-          <DialogHeader>
-            <DialogTitle>Import Everywhere</DialogTitle>
-            <DialogDescription>
-              เลือกตัวละครเพื่อค้นหา Team จาก Guide อื่น แล้วดูตัวอย่างก่อนนำเข้า Condition ปัจจุบัน
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex min-h-0 flex-col gap-4 overflow-y-auto pr-1">
-            <Field>
-              <FieldLabel>ตัวละครใน Team</FieldLabel>
-              <CatalogDropdown
-                items={characters}
-                value={everywhereCharacterKey}
-                onValueChange={(key) => {
-                  setEverywhereCharacterKey(key);
-                  if (key) void searchEverywhereTeams(key);
-                  else {
-                    everywhereSearchId.current += 1;
-                    setEverywhereSearchedKey("");
-                    setEverywhereTeams([]);
-                    setEverywhereSelectedIds(new Set());
-                    setEverywhereError(null);
-                    setEverywhereLoading(false);
-                  }
-                }}
-                placeholder="เลือกตัวละคร"
-                label="เลือกตัวละครที่อยู่ใน Team"
-                showSelectedImage
-                rarityBackground
-                characterBackground
-              />
-            </Field>
-            <Field orientation="horizontal">
-              <Switch id="ignore-same-team-name" checked={ignoreSameName} onCheckedChange={setIgnoreSameName} />
-              <FieldLabel htmlFor="ignore-same-team-name">Ignore same name</FieldLabel>
-            </Field>
-            {everywhereError ? (
-              <Alert variant="destructive"><AlertTitle>โหลดข้อมูลไม่สำเร็จ</AlertTitle><AlertDescription>{everywhereError}</AlertDescription></Alert>
-            ) : null}
-            {everywhereLoading ? (
-              <div aria-busy="true" aria-label="กำลังโหลด Team" className="grid gap-4 lg:grid-cols-2">
-                {Array.from({ length: 4 }, (_, index) => <Skeleton key={index} className="h-72 rounded-xl" />)}
-              </div>
-            ) : everywhereSearchedKey && everywhereTeams.length ? (
-              <>
-                <div className="flex flex-wrap items-center justify-between gap-2">
-                  <p className="text-sm text-muted-foreground">
-                    พบ {everywhereTeams.length} Team - เลือกได้ {eligibleEverywhereTeams.length} Team
-                  </p>
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant="outline"
-                    disabled={!eligibleEverywhereTeams.length}
-                    onClick={() => setEverywhereSelectedIds(
-                      allEverywhereTeamsSelected ? new Set() : new Set(eligibleEverywhereIds),
-                    )}
-                  >
-                    {allEverywhereTeamsSelected ? "ยกเลิกเลือกทั้งหมด" : "เลือกทั้งหมด"}
-                  </Button>
-                </div>
-                <div className="grid gap-4 lg:grid-cols-2">
-                  {everywhereTeams.map((team) => {
-                    const eligible = eligibleEverywhereIds.has(team.id);
-                    return (
-                      <TeamImportPreviewCard
-                        key={team.id}
-                        team={team}
-                        characters={characters}
-                        weapons={weapons}
-                        artifacts={artifacts}
-                        checked={eligible && everywhereSelectedIds.has(team.id)}
-                        checkboxId={`everywhere-team-${team.id}`}
-                        sourceLabel={`${team.guideName}${team.conditionName ? ` - ${team.conditionName}` : ""}`}
-                        disabled={!eligible}
-                        onCheckedChange={(checked) => setEverywhereSelectedIds((current) => {
-                          const next = new Set(current);
-                          if (checked) next.add(team.id);
-                          else next.delete(team.id);
-                          return next;
-                        })}
-                      />
-                    );
-                  })}
-                </div>
-              </>
-            ) : everywhereSearchedKey && !everywhereError ? (
-              <Empty><EmptyHeader><EmptyTitle>ไม่พบ Team</EmptyTitle><EmptyDescription>ยังไม่มี Team จาก Guide อื่นที่มีตัวละครนี้</EmptyDescription></EmptyHeader></Empty>
-            ) : null}
-          </div>
-          <DialogFooter className="flex-wrap">
-            <Button type="button" variant="outline" onClick={() => setEverywhereImportOpen(false)}>ปิด</Button>
-            <Button type="button" variant="outline" disabled={!eligibleEverywhereTeams.length} onClick={() => importEverywhereTeams(eligibleEverywhereTeams)}>
-              Import All {eligibleEverywhereTeams.length} Team
-            </Button>
-            <Button type="button" disabled={!selectedEverywhereTeams.length} onClick={() => importEverywhereTeams(selectedEverywhereTeams)}>
-              Import Selected {selectedEverywhereTeams.length} Team
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog open={guideImportOpen} onOpenChange={setGuideImportOpen}>
-        <DialogContent className="max-h-[90svh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden sm:max-w-5xl">
-          <DialogHeader>
-            <DialogTitle>{activeImportGuide ? activeImportGuide.name : "เลือก Guide"}</DialogTitle>
-            <DialogDescription>
-              {activeImportGuide
-                ? "เลือก Team ที่ต้องการ สามารถย้อนกลับไปเลือกจาก Guide อื่นเพิ่มได้"
-                : "ค้นหาและเปิด Guide เพื่อเลือก Team ที่ต้องการ Import"}
-            </DialogDescription>
-          </DialogHeader>
-          <div className="min-h-0 overflow-hidden">
-            {guideImportError ? (
-              <Alert variant="destructive">
-                <AlertTitle>โหลดข้อมูลไม่สำเร็จ</AlertTitle>
-                <AlertDescription>{guideImportError}</AlertDescription>
-              </Alert>
-            ) : null}
-            {guideImportLoading ? (
-              guideImportLoading === "guides" ? (
-                <div
-                  className="flex h-full min-h-0 flex-col gap-4"
-                  aria-label="กำลังโหลดรายการ Guide"
-                  aria-busy="true"
-                >
-                  <Skeleton className="h-8 w-full" />
-                  <div className="min-h-0 overflow-y-auto pr-1">
-                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                      {Array.from({ length: 6 }, (_, index) => (
-                        <Card key={index} className="overflow-hidden py-0">
-                          <Skeleton className="aspect-4/3 rounded-b-none" />
-                          <CardHeader className="pt-4">
-                            <CardTitle><Skeleton className="h-5 w-2/3" /></CardTitle>
-                            <CardDescription><Skeleton className="h-4 w-1/2" /></CardDescription>
-                            <CardAction><Skeleton className="h-5 w-16" /></CardAction>
-                          </CardHeader>
-                          <CardFooter className="pb-4">
-                            <Skeleton className="h-7 w-20" />
-                          </CardFooter>
-                        </Card>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              ) : (
-                <div
-                  className="flex h-full min-h-0 flex-col gap-3"
-                  aria-label="กำลังโหลดรายการ Team"
-                  aria-busy="true"
-                >
-                  <Skeleton className="h-8 w-32" />
-                  <div className="flex min-w-0 items-center gap-2">
-                    <Skeleton className="h-8 min-w-0 flex-1" />
-                    <Skeleton className="h-8 w-32 shrink-0" />
-                  </div>
-                  <div className="min-h-0 overflow-y-auto pr-1">
-                    <div className="grid gap-4 lg:grid-cols-2">
-                      {Array.from({ length: 4 }, (_, index) => (
-                        <Card key={index}>
-                          <CardHeader>
-                            <CardTitle><Skeleton className="h-5 w-1/3" /></CardTitle>
-                            <CardDescription><Skeleton className="h-4 w-24" /></CardDescription>
-                            <CardAction><Skeleton className="h-5 w-12" /></CardAction>
-                          </CardHeader>
-                          <CardContent className="flex flex-col gap-4">
-                            <div className="grid grid-cols-4 gap-2">
-                              {Array.from({ length: 4 }, (_, memberIndex) => (
-                                <div key={memberIndex} className="flex min-w-0 flex-col items-center gap-2">
-                                  <Skeleton className="size-16 rounded-lg" />
-                                  <Skeleton className="h-4 w-full" />
-                                  <Skeleton className="h-4 w-2/3" />
-                                </div>
-                              ))}
-                            </div>
-                            <Separator />
-                            <div className="flex items-end justify-between gap-4">
-                              <Skeleton className="h-10 w-24" />
-                              <Skeleton className="h-12 w-28" />
-                            </div>
-                            <Skeleton className="h-12 w-full" />
-                          </CardContent>
-                        </Card>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              )
-            ) : activeImportGuide ? (
-              <div className="flex h-full min-h-0 flex-col gap-3">
-                <Button type="button" variant="ghost" className="self-start" onClick={() => setActiveImportGuide(null)}>
-                  <ArrowLeftIcon data-icon="inline-start" />
-                  กลับไปเลือก Guide
-                </Button>
-                {activeImportGuide.groups.length > 1 ? (
-                  <ScrollableNav ariaLabel="เลือกเงื่อนไขทีม" className="w-full min-w-0">
-                    <Tabs value={guideImportCondition} onValueChange={setGuideImportCondition}>
-                      <TabsList aria-label="เลือกเงื่อนไขทีม">
-                        {activeImportGuide.groups.map((group, index) => (
-                          <TabsTrigger key={group.id} value={String(index)}>
-                            <MousePointerClickIcon aria-hidden="true" data-icon="inline-start" />
-                            {group.name || `Condition ${index + 1}`}
-                          </TabsTrigger>
-                        ))}
-                      </TabsList>
-                    </Tabs>
-                  </ScrollableNav>
-                ) : null}
-                <div className="flex min-w-0 items-center gap-2">
-                  <div className="relative min-w-0 flex-1">
-                    <SearchIcon aria-hidden="true" className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
-                    <Input
-                      aria-label="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
-                      className="pl-9"
-                      placeholder="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
-                      value={guideTeamQuery}
-                      onValueChange={setGuideTeamQuery}
-                    />
-                  </div>
-                  <Select value={guideTeamSearchTarget} onValueChange={(value) => {
-                    if (value) setGuideTeamSearchTarget(value as TeamSearchTarget);
-                  }}>
-                    <SelectTrigger
-                      aria-label="เลือกประเภทข้อมูลที่ต้องการค้นหา"
-                      className="w-32 shrink-0"
-                    >
-                      <SelectValue>{teamSearchTargetLabels[guideTeamSearchTarget]}</SelectValue>
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectItem value="all">ทั้งหมด</SelectItem>
-                        <SelectItem value="team">ชื่อทีม</SelectItem>
-                        <SelectItem value="character">ตัวละคร</SelectItem>
-                        <SelectItem value="weapon">อาวุธ</SelectItem>
-                        <SelectItem value="artifact">อาร์ติแฟกต์</SelectItem>
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="min-h-0 overflow-y-auto pr-1">
-
-                  {filteredImportTeams.length ? (
-                    <div className="grid gap-4 lg:grid-cols-2">
-                      {filteredImportTeams.map((team) => (
-                        <TeamImportPreviewCard
-                          key={team.id}
-                          team={team}
-                          characters={characters}
-                          weapons={weapons}
-                          artifacts={artifacts}
-                          checked={Boolean(selectedImports[team.id])}
-                          checkboxId={`guide-team-${team.id}`}
-                          onCheckedChange={(checked) => setSelectedImports((current) => {
-                            if (checked) {
-                              return { ...current, [team.id]: toTeamDraft(team) };
-                            }
-                            const next = { ...current };
-                            delete next[team.id];
-                            return next;
-                          })}
-                        />
-                      ))}
-                    </div>
-                  ) : (
-                    <Empty>
-                      <EmptyHeader>
-                        <EmptyTitle>{activeImportGroup?.teams.length ? "ไม่พบ Team ที่ตรงกับคำค้นหา" : "Condition นี้ยังไม่มี Team"}</EmptyTitle>
-                        <EmptyDescription>{activeImportGroup?.teams.length ? "ลองเปลี่ยนคำค้นหาหรือประเภทข้อมูล" : "เลือก Condition หรือ Guide อื่นเพื่อ Import"}</EmptyDescription>
-                      </EmptyHeader>
-                    </Empty>
-                  )}
-                </div>
-              </div>
-            ) : importGuides?.length ? (
-              <div className="flex h-full min-h-0 flex-col gap-4">
-                <div className="relative">
-                  <SearchIcon aria-hidden="true" className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
-                  <Input
-                    aria-label="ค้นหา Guide"
-                    className="pl-9"
-                    placeholder="ค้นหาชื่อ Guide หรือตัวละคร…"
-                    value={guideListQuery}
-                    onValueChange={setGuideListQuery}
-                  />
-                </div>
-                <div className="min-h-0 overflow-y-auto pr-1">
-
-                  {filteredImportGuides.length ? (
-                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                      {filteredImportGuides.map((sourceGuide) => (
-                        <Card key={sourceGuide.id} className="relative overflow-hidden py-0 transition-colors hover:bg-muted/50">
-                          <button
-                            type="button"
-                            aria-label={`เปิด Guide ${sourceGuide.name}`}
-                            className="absolute inset-0 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                            onClick={() => void enterImportGuide(sourceGuide.id)}
-                          />
-                          <div className="relative aspect-4/3 bg-muted">
-                            <Image
-                              src={sourceGuide.coverUrl}
-                              alt={`Guide ${sourceGuide.name}`}
-                              fill
-                              sizes="(min-width: 1024px) 30vw, (min-width: 640px) 45vw, 90vw"
-                              className="object-cover"
-                            />
-                          </div>
-                          <CardHeader className="pt-4">
-                            <CardTitle>{sourceGuide.name}</CardTitle>
-                            <CardDescription>{sourceGuide.characterKey}</CardDescription>
-                          </CardHeader>
-                          <CardFooter className="relative pb-4">
-                            <Button type="button" size="xs" variant="outline" onClick={() => void enterImportGuide(sourceGuide.id)}>
-                              เปิด Guide
-                            </Button>
-                          </CardFooter>
-                        </Card>
-                      ))}
-                    </div>
-                  ) : (
-                    <Empty>
-                      <EmptyHeader>
-                        <EmptyTitle>ไม่พบ Guide ที่ตรงกับคำค้นหา</EmptyTitle>
-                        <EmptyDescription>ลองค้นหาด้วยชื่อ Guide หรือตัวละครอื่น</EmptyDescription>
-                      </EmptyHeader>
-                    </Empty>
-                  )}
-                </div>
-              </div>
-            ) : (
-              <Empty>
-                <EmptyHeader>
-                  <EmptyMedia variant="icon"><BookOpenIcon /></EmptyMedia>
-                  <EmptyTitle>ไม่มี Guide อื่นให้เลือก</EmptyTitle>
-                  <EmptyDescription>สร้างหรือบันทึก Team ใน Guide อื่นก่อน</EmptyDescription>
-                </EmptyHeader>
-              </Empty>
-            )}
-          </div>
-          <DialogFooter>
-            <Button type="button" variant="outline" onClick={() => setGuideImportOpen(false)}>ยกเลิก</Button>
-            <Button type="button" disabled={!Object.keys(selectedImports).length} onClick={confirmGuideImport}>
-              Import {Object.keys(selectedImports).length || ""} Team
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog open={presetOpen} onOpenChange={setPresetOpen}>
-        <DialogContent>
-          <DialogHeader><DialogTitle>Save team preset</DialogTitle><DialogDescription>บันทึก Source Team นี้ไว้ใช้กับ Guide นี้ในเบราว์เซอร์นี้</DialogDescription></DialogHeader>
-          <Field><FieldLabel htmlFor="team-preset-name">ชื่อ Preset</FieldLabel><Input id="team-preset-name" value={presetName} onChange={(event) => setPresetName(event.target.value)} /></Field>
-          <DialogFooter><Button type="button" variant="outline" onClick={() => setPresetOpen(false)}>ยกเลิก</Button><Button type="button" disabled={!presetName.trim()} onClick={savePreset}>บันทึก</Button></DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Card>
-  );
-}
-
-function ExtraCatalogItemsEditor({
-  value,
-  characters,
-  weapons,
-  artifacts,
-  onChange,
-}: {
-  value: ExtraCatalogItem[];
-  characters: CatalogItem[];
-  weapons: CatalogItem[];
-  artifacts: CatalogItem[];
-  onChange: (value: ExtraCatalogItem[]) => void;
-}) {
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-  const [kind, setKind] = useState<ExtraCatalogItem["kind"]>("character");
-  const [key, setKey] = useState("");
-  const catalogs = { character: characters, weapon: weapons, artifact: artifacts };
-  const labels = { character: "ตัวละคร", weapon: "อาวุธ", artifact: "อาร์ติแฟกต์" };
-  const items = catalogs[kind];
-  const itemId = (item: ExtraCatalogItem) => `${item.kind}:${item.key}`;
-  const handleDragEnd = ({ active, over }: DragEndEvent) => {
-    if (!over || active.id === over.id) return;
-    const from = value.findIndex((item) => itemId(item) === active.id);
-    const to = value.findIndex((item) => itemId(item) === over.id);
-    if (from !== -1 && to !== -1) onChange(arrayMove(value, from, to));
-  };
-
-  return (
-    <Field>
-      <FieldLabel>ตัวละคร อาวุธ และอาร์ติแฟกต์</FieldLabel>
-      <div className="flex flex-col gap-3">
-        {value.length ? (
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleDragEnd}
-          >
-            <SortableContext
-              items={value.map(itemId)}
-              strategy={rectSortingStrategy}
-            >
-              <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-                {value.map((reference, index) => {
-                  const item = catalogs[reference.kind].find(
-                    (candidate) => candidate.key === reference.key,
-                  );
-                  const label = item?.name ?? reference.key;
-                  return (
-                    <SortableExtraItem
-                      key={itemId(reference)}
-                      id={itemId(reference)}
-                      label={`ลากเพื่อจัดลำดับ ${label}`}
-                    >
-                      {(dragHandle) => (
-                        <Card size="sm">
-                          <CardContent className="flex items-center gap-3">
-                            {item ? (
-                              <div className={cn("relative size-12 shrink-0 overflow-hidden rounded-md", rarityGradientClass(item.rarity))}>
-                                <Image src={item.imageUrl} alt="" fill sizes="48px" className="object-contain" />
-                              </div>
-                            ) : null}
-                            <div className="min-w-0 flex-1">
-                              <p className="truncate font-medium">{label}</p>
-                              <p className="text-sm text-muted-foreground">{labels[reference.kind]}</p>
-                            </div>
-                            {dragHandle}
-                            <Button type="button" variant="ghost" size="icon-sm" onClick={() => onChange(value.filter((_, itemIndex) => itemIndex !== index))} aria-label={`ลบ ${label}`}>
-                              <XIcon />
-                            </Button>
-                          </CardContent>
-                        </Card>
-                      )}
-                    </SortableExtraItem>
-                  );
-                })}
-              </div>
-            </SortableContext>
-          </DndContext>
-        ) : null}
-        <div className="flex flex-wrap items-center gap-2">
-          <Select value={kind} onValueChange={(next) => { setKind(next as ExtraCatalogItem["kind"]); setKey(""); }}>
-            <SelectTrigger className="w-40"><SelectValue /></SelectTrigger>
-            <SelectContent><SelectGroup>
-              <SelectItem value="character">ตัวละคร</SelectItem>
-              <SelectItem value="weapon">อาวุธ</SelectItem>
-              <SelectItem value="artifact">อาร์ติแฟกต์</SelectItem>
-            </SelectGroup></SelectContent>
-          </Select>
-          <div className="min-w-64 flex-1">
-            <CatalogDropdown
-              items={items}
-              value={key}
-              onValueChange={(nextKey) => {
-                if (
-                  nextKey &&
-                  !value.some(
-                    (item) => item.kind === kind && item.key === nextKey,
-                  )
-                ) {
-                  onChange([...value, { kind, key: nextKey }]);
-                }
-                setKey("");
-              }}
-              placeholder={`เลือก${labels[kind]}`}
-              showSelectedImage
-              rarityBackground
-              characterBackground={kind === "character"}
-            />
-          </div>
-        </div>
-      </div>
-    </Field>
-  );
-}
-
-function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, artifacts }: EditorBase) {
-  const router = useRouter();
-  const sectionId = extraSectionId ?? initial.extras[0]?.id ?? "";
-  const extraSensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-  const [sections, setSections] = useState(() =>
-    initial.extras.map((section) => ({
-      ...section,
-      clientId: section.id,
-      rows: section.rows.map((row) => ({
-        ...row,
-        body: normalizeExtraRichText(row.body, row.highlights),
-        highlights: [],
-        clientId: row.id,
-      })),
-    })),
-  );
-  const [openRowIds, setOpenRowIds] = useState(() =>
-    initial.extras.flatMap((section) => section.rows.map((row) => row.id)),
-  );
-  const value = {
-    sections: sections.map((section) => ({
-      title: section.title,
-      rows: section.rows.map((row) => ({
-        mediaId: row.mediaId,
-        heading: row.heading,
-        body: row.body,
-        percent:
-          row.percent === null || row.percent === ""
-            ? null
-            : Number(row.percent),
-        backgroundColor: row.backgroundColor,
-        textColor: row.textColor,
-        sheet: row.sheet,
-        catalogItems: row.catalogItems,
-        highlights: [],
-      })),
-    })),
-  };
-  const validation = extraSectionSchema.safeParse({
-    ...value,
-    expectedVersion: guide.version,
-  });
-  const extraIssue = (...path: (string | number)[]) =>
-    !validation.success && hasIssuePrefix(validation.error.issues, ...path);
-  const localDraft = { sections };
-  const autosave = useAutosave({
-    guideId: guide.id,
-    scope: `extra:${sectionId}`,
-    value,
-    valid: validation.success,
-    initialVersion: guide.version,
-    persist: (next, expectedVersion, intent) =>
-      saveGuideExtra(guide.id, sectionId, {
-        section: next.sections[0],
-        expectedVersion,
-      }, intent),
-    storageKey: adminDraftKey(guide.id, `extra:${sectionId}`),
-    localDraft,
-    parseLocalDraft: (candidate) =>
-      parseEditorDraft<typeof localDraft>(candidate, ["sections"]),
-    restoreLocalDraft: (draft) => {
-      const restoredSections = draft.sections.map((section) => ({
-        ...section,
-        id: section.id || createClientId("extra-section-record"),
-        clientId: section.clientId || createClientId("extra-section"),
-        rows: section.rows.map((row) => ({
-          ...row,
-          id: row.id || createClientId("extra-row-record"),
-          body: normalizeExtraRichText(row.body, row.highlights ?? []),
-          backgroundColor: row.backgroundColor ?? null,
-          textColor: row.textColor ?? null,
-          sheet: row.sheet ?? null,
-          catalogItems: row.catalogItems ?? [],
-          highlights: [],
-          clientId: row.clientId || createClientId("extra-row"),
-        })),
-      }));
-      setSections(restoredSections);
-      setOpenRowIds(
-        restoredSections.flatMap((section) =>
-          section.rows.map((row) => row.clientId),
-        ),
-      );
-    },
-  });
-  const handleRowDragEnd = (sectionId: string, { active, over }: DragEndEvent) => {
-    if (!over || active.id === over.id) return;
-    setSections((current) => current.map((section) => {
-      if (section.clientId !== sectionId) return section;
-      const from = section.rows.findIndex((row) => row.clientId === active.id);
-      const to = section.rows.findIndex((row) => row.clientId === over.id);
-      return from === -1 || to === -1
-        ? section
-        : { ...section, rows: arrayMove(section.rows, from, to) };
-    }));
-  };
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{sections[0]?.title ?? "Extra section"}</CardTitle>
-        <CardDescription>
-          เพิ่มส่วนเสริมแบบภาพ หัวข้อ ข้อความที่จัดรูปแบบได้ และเปอร์เซ็นต์
-          ระบบจะบันทึกอัตโนมัติ
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-5">
-        {sections.map((section, sectionIndex) => (
-          <Card
-            key={section.clientId}
-            size="sm"
-            className={cn(
-              extraIssue("sections", sectionIndex, "title") && "border-destructive",
-            )}
-          >
-            <CardHeader>
-              <CardTitle>
-                <Input
-                  value={section.title}
-                  aria-label="ชื่อ Extra section"
-                  aria-invalid={extraIssue("sections", sectionIndex, "title")}
-                  onChange={(event) =>
-                    setSections(
-                      sections.map((item, index) =>
-                        index === sectionIndex
-                          ? { ...item, title: event.target.value }
-                          : item,
-                      ),
-                    )
-                  }
-                />
-              </CardTitle>
-              <CardAction className="flex items-center gap-1">
-                <DeleteConfirmationDialog
-                  trigger={
-                    <Button type="button" variant="ghost" size="icon-sm" />
-                  }
-                  title={`ลบ ${section.title || `Extra section ${sectionIndex + 1}`}?`}
-                  description="แถว ข้อความ รูปภาพ และเปอร์เซ็นต์ทั้งหมดในส่วนนี้จะถูกลบออกจาก Guide"
-                  showSuccessToast={false}
-                  onConfirm={async () => {
-                    const result = await deleteGuideExtra(guide.id, section.id);
-                    if (result.status !== "saved") {
-                      toast.error(result.message);
-                      return;
-                    }
-                    window.localStorage.removeItem(adminDraftKey(guide.id, `extra:${section.id}`));
-                    toast.success("ลบ Extra แล้ว");
-                    router.push(`/admin/${guide.characterKey}`);
-                    router.refresh();
-                  }}
-                >
-                  <Trash2Icon />
-                  <span className="sr-only">ลบส่วน</span>
-                </DeleteConfirmationDialog>
-              </CardAction>
-            </CardHeader>
-            <CardContent className="flex flex-col gap-4">
-              <DndContext
-                sensors={extraSensors}
-                collisionDetection={closestCenter}
-                onDragEnd={(event) => handleRowDragEnd(section.clientId, event)}
-              >
-                <SortableContext
-                  items={section.rows.map((row) => row.clientId)}
-                  strategy={verticalListSortingStrategy}
-                >
-                  <Accordion
-                    multiple
-                    value={openRowIds}
-                    onValueChange={setOpenRowIds}
-                    className="gap-4"
-                  >
-                  {section.rows.map((row, rowIndex) => (
-                    <SortableExtraItem
-                      key={row.clientId}
-                      id={row.clientId}
-                      label={`ลากเพื่อจัดลำดับ ${row.heading || `แถว ${rowIndex + 1}`}`}
-                    >
-                      {(rowDragHandle) => (
-                <AccordionItem value={row.clientId} className="border-0">
-                <Card
-                  size="sm"
-                  className={cn(
-                    extraIssue("sections", sectionIndex, "rows", rowIndex) &&
-                      "border-destructive",
-                  )}
-                >
-                  <CardHeader>
-                    <CardTitle>
-                      {row.heading || `แถว ${rowIndex + 1}`}
-                    </CardTitle>
-                    <CardAction className="flex items-center gap-1">
-                      {rowDragHandle}
-                      <DeleteConfirmationDialog
-                        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,
-                            ),
-                          )
-                        }
-                      >
-                        <Trash2Icon />
-                        <span className="sr-only">ลบแถว</span>
-                      </DeleteConfirmationDialog>
-                      <AccordionTrigger
-                        className="size-8 flex-none items-center justify-center p-0 hover:no-underline"
-                        headerClassName="flex-none"
-                        aria-label={`${openRowIds.includes(row.clientId) ? "ซ่อน" : "แสดง"} ${row.heading || `แถว ${rowIndex + 1}`}`}
-                        title={openRowIds.includes(row.clientId) ? "ซ่อนส่วนนี้" : "แสดงส่วนนี้"}
-                      />
-                    </CardAction>
-                  </CardHeader>
-                  <AccordionContent className="pb-0">
-                  <CardContent>
-                    <FieldGroup>
-                      {row.imageUrl ? (
-                        <div
-                          className="relative overflow-hidden rounded-lg border"
-                          style={{
-                            aspectRatio:
-                              row.imageWidth && row.imageHeight
-                                ? `${row.imageWidth} / ${row.imageHeight}`
-                                : "16 / 9",
-                          }}
-                        >
-                          <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="ลบภาพ"
-                              />
-                            }
-                            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,
-                                                  imageWidth: null,
-                                                  imageHeight: 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,
-                                            imageWidth: asset.width,
-                                            imageHeight: asset.height,
-                                          }
-                                        : candidate,
-                                    ),
-                                  }
-                                : item,
-                            ),
-                          )
-                        }
-                      />
-                      <ExtraCatalogItemsEditor
-                        value={row.catalogItems}
-                        characters={characters}
-                        weapons={weapons}
-                        artifacts={artifacts}
-                        onChange={(catalogItems) =>
-                          setSections(
-                            sections.map((item, index) =>
-                              index === sectionIndex
-                                ? {
-                                    ...item,
-                                    rows: item.rows.map((candidate, inner) =>
-                                      inner === rowIndex
-                                        ? { ...candidate, catalogItems }
-                                        : candidate,
-                                    ),
-                                  }
-                                : item,
-                            ),
-                          )
-                        }
-                      />
-                      <Field>
-                        <FieldLabel>หัวข้อ</FieldLabel>
-                        <Input
-                          value={row.heading}
-                          aria-invalid={extraIssue(
-                            "sections",
-                            sectionIndex,
-                            "rows",
-                            rowIndex,
-                            "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>
-                        <RichTextEditor
-                          value={row.body}
-                          showBubbleMenu={false}
-                          invalid={extraIssue(
-                            "sections",
-                            sectionIndex,
-                            "rows",
-                            rowIndex,
-                            "body",
-                          )}
-                          onChange={(body) =>
-                            setSections(
-                              sections.map((item, index) =>
-                                index === sectionIndex
-                                  ? {
-                                      ...item,
-                                      rows: item.rows.map((candidate, inner) =>
-                                        inner === rowIndex
-                                          ? {
-                                              ...candidate,
-                                              body,
-                                              highlights: [],
-                                            }
-                                          : candidate,
-                                      ),
-                                    }
-                                  : item,
-                              ),
-                            )
-                          }
-                        />
-                      </Field>
-                      <Field>
-                        <FieldLabel>ตารางข้อมูล (optional)</FieldLabel>
-                        {row.sheet ? (
-                          <ExtraSheetEditor
-                            value={row.sheet}
-                            createId={createClientId}
-                            onChange={(sheet) =>
-                              setSections(
-                                sections.map((item, index) =>
-                                  index === sectionIndex
-                                    ? {
-                                        ...item,
-                                        rows: item.rows.map((candidate, inner) =>
-                                          inner === rowIndex
-                                            ? { ...candidate, sheet }
-                                            : candidate,
-                                        ),
-                                      }
-                                    : item,
-                                ),
-                              )
-                            }
-                            onRemove={() =>
-                              setSections(
-                                sections.map((item, index) =>
-                                  index === sectionIndex
-                                    ? {
-                                        ...item,
-                                        rows: item.rows.map((candidate, inner) =>
-                                          inner === rowIndex
-                                            ? { ...candidate, sheet: null }
-                                            : candidate,
-                                        ),
-                                      }
-                                    : item,
-                                ),
-                              )
-                            }
-                          />
-                        ) : (
-                          <Button
-                            type="button"
-                            variant="outline"
-                            onClick={() =>
-                              setSections(
-                                sections.map((item, index) =>
-                                  index === sectionIndex
-                                    ? {
-                                        ...item,
-                                        rows: item.rows.map((candidate, inner) =>
-                                          inner === rowIndex
-                                            ? { ...candidate, sheet: createExtraSheet(createClientId) }
-                                            : candidate,
-                                        ),
-                                      }
-                                    : item,
-                                ),
-                              )
-                            }
-                          >
-                            <PlusIcon data-icon="inline-start" />
-                            เพิ่มตาราง 4 × 6
-                          </Button>
-                        )}
-                      </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>
-                      <FieldSet>
-                        <FieldLegend>สีพื้นหลังการ์ด (optional)</FieldLegend>
-                        <FieldDescription>
-                          สีจะใช้เฉพาะการ์ดนี้บนหน้า Guide
-                        </FieldDescription>
-                        <Field
-                          data-invalid={extraIssue(
-                            "sections",
-                            sectionIndex,
-                            "rows",
-                            rowIndex,
-                            "backgroundColor",
-                          ) || undefined}
-                        >
-                          <FieldLabel>สีพื้นหลัง</FieldLabel>
-                          <Popover>
-                            <PopoverTrigger
-                              render={
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  size="icon"
-                                  aria-label="เลือกสีพื้นหลังการ์ด"
-                                  aria-invalid={extraIssue(
-                                    "sections",
-                                    sectionIndex,
-                                    "rows",
-                                    rowIndex,
-                                    "backgroundColor",
-                                  )}
-                                >
-                                  <span
-                                    className="size-5 rounded-sm border"
-                                    style={{
-                                      backgroundColor:
-                                        row.backgroundColor ?? DEFAULT_EXTRA_BACKGROUND_COLOR,
-                                    }}
-                                  />
-                                </Button>
-                              }
-                            />
-                            <PopoverContent align="start" className="w-64">
-                              <ColorPicker
-                                value={row.backgroundColor ?? DEFAULT_EXTRA_BACKGROUND_COLOR}
-                                className="h-auto"
-                                onChange={(color) => {
-                                  if (!Array.isArray(color)) return;
-                                  const backgroundColor = `#${color
-                                    .slice(0, 3)
-                                    .map((channel) =>
-                                      Math.round(channel).toString(16).padStart(2, "0"),
-                                    )
-                                    .join("")}`.toUpperCase();
-                                  setSections(
-                                    sections.map((item, index) =>
-                                      index === sectionIndex
-                                        ? {
-                                            ...item,
-                                            rows: item.rows.map((candidate, inner) =>
-                                              inner === rowIndex
-                                                ? { ...candidate, backgroundColor }
-                                                : candidate,
-                                            ),
-                                          }
-                                        : item,
-                                    ),
-                                  );
-                                }}
-                              >
-                                <ColorPickerSelection className="h-32" />
-                                <ColorPickerHue />
-                                <ColorPickerEyeDropper aria-label="ดูดสีจากหน้าจอ" />
-                              </ColorPicker>
-                            </PopoverContent>
-                          </Popover>
-                        </Field>
-                        <Button
-                          type="button"
-                          variant="outline"
-                          size="sm"
-                          disabled={row.backgroundColor === null}
-                          onClick={() =>
-                            setSections(
-                              sections.map((item, index) =>
-                                index === sectionIndex
-                                  ? {
-                                      ...item,
-                                      rows: item.rows.map((candidate, inner) =>
-                                        inner === rowIndex
-                                          ? { ...candidate, backgroundColor: null }
-                                          : candidate,
-                                      ),
-                                    }
-                                  : item,
-                              ),
-                            )
-                          }
-                        >
-                          <RefreshCcwIcon data-icon="inline-start" />
-                          ใช้สีตามธีม
-                        </Button>
-                      </FieldSet>
-                    </FieldGroup>
-                  </CardContent>
-                  </AccordionContent>
-                </Card>
-                </AccordionItem>
-                      )}
-                    </SortableExtraItem>
-                  ))}
-                  </Accordion>
-                </SortableContext>
-              </DndContext>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => {
-                  const clientId = createClientId("extra-row");
-                  setOpenRowIds((current) => [...current, clientId]);
-                  setSections(
-                    sections.map((item, index) =>
-                      index === sectionIndex
-                        ? {
-                            ...item,
-                            rows: [
-                              ...item.rows,
-                              {
-                                id: createClientId("extra-row-record"),
-                                mediaId: null,
-                                imageUrl: null,
-                                imageWidth: null,
-                                imageHeight: null,
-                                heading: "",
-                                body: "",
-                                percent: null,
-                                backgroundColor: null,
-                                textColor: null,
-                                sheet: null,
-                                catalogItems: [],
-                                highlights: [],
-                                clientId,
-                              },
-                            ],
-                          }
-                      : item,
-                    ),
-                  );
-                }}
-              >
-                <PlusIcon data-icon="inline-start" />
-                เพิ่มแถว
-              </Button>
-            </CardContent>
-          </Card>
-        ))}
-      </CardContent>
-      <CardFooter className="flex-wrap justify-end gap-3">
-        <AutosaveStatus
-          state={autosave.state}
-          conflictVersion={autosave.conflictVersion}
-          canOverwrite={autosave.canOverwrite}
-          onReloadLatest={autosave.reloadLatest}
-          onOverwrite={autosave.overwrite}
-          issues={
-            validation.success
-              ? []
-              : formatGuideValidationIssues("extra", validation.error.issues)
-          }
-          onSave={autosave.saveNow}
-        />
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/components/admin/guide-section-nav.tsx b/components/admin/guide-section-nav.tsx
index ee825d9..3576a69 100644
--- a/components/admin/guide-section-nav.tsx
+++ b/components/admin/guide-section-nav.tsx
@@ -1,19 +1,18 @@
 "use client";
 
-import Image from "@/components/ui/resilient-image";
+import { FileTextIcon, GemIcon, ImageIcon, MessageSquareIcon, SparklesIcon, SwordIcon, UsersIcon } from "lucide-react";
 import Link from "next/link";
 import type { MouseEvent } from "react";
 
 import { AddExtraButton } from "@/components/admin/guide-extra-controls";
 import { ScrollableNav } from "@/components/public/scrollable-nav";
-import { navigationIconPath } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 
 const sections = [
-  { slug: "weapon", label: "Weapons" },
-  { slug: "artifact", label: "Artifacts & Stats" },
-  { slug: "constellations", label: "Constellations" },
-  { slug: "team", label: "Team Calc" },
+  { slug: "weapon", label: "Weapons", icon: SwordIcon },
+  { slug: "artifact", label: "Artifacts & Stats", icon: GemIcon },
+  { slug: "constellations", label: "Constellations", icon: SparklesIcon },
+  { slug: "team", label: "Team Calc", icon: UsersIcon },
 ] as const;
 
 export function GuideSectionNav({
@@ -50,11 +49,11 @@ export function GuideSectionNav({
           current === "overview" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
         )}
       >
-        <Image src={navigationIconPath("overview")!} alt="" width={20} height={20} className="size-5 object-contain" />
+        <ImageIcon className="size-5" aria-hidden="true" />
         Overview
       </Link>
       {sections.map((section) => {
-        const iconPath = navigationIconPath(section.slug);
+        const Icon = section.icon;
         return (
           <Link
             key={section.slug}
@@ -67,7 +66,7 @@ export function GuideSectionNav({
               current === section.slug ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
             )}
           >
-            {iconPath ? <Image src={iconPath} alt="" width={20} height={20} className="size-5 object-contain" /> : null}
+            <Icon className="size-5" aria-hidden="true" />
             {section.label}
           </Link>
         );
@@ -84,10 +83,23 @@ export function GuideSectionNav({
             current === extra.slug ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
           )}
         >
-          <Image src={navigationIconPath("extra")!} alt="" width={20} height={20} className="size-5 object-contain" />
+          <FileTextIcon className="size-5" aria-hidden="true" />
           {extra.title}
         </Link>
       ))}
+      <Link
+        href={`/admin/${characterKey}/comment`}
+        prefetch={false}
+        onClick={confirmNavigation}
+        aria-current={current === "comment" ? "page" : undefined}
+        className={cn(
+          "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          current === "comment" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+        )}
+      >
+        <MessageSquareIcon className="size-5" aria-hidden="true" />
+        Comment
+      </Link>
       <AddExtraButton
         guideId={guideId}
         characterKey={characterKey}
diff --git a/components/comments/admin-comment-inbox.tsx b/components/comments/admin-comment-inbox.tsx
index 8efaa75..98ba140 100644
--- a/components/comments/admin-comment-inbox.tsx
+++ b/components/comments/admin-comment-inbox.tsx
@@ -1,7 +1,10 @@
 "use client";
 
+import { useCommentLocale } from "./comment-locale";
+
 import { useEffect, useState } from "react";
 import Link from "next/link";
+import Image from "@/components/ui/resilient-image";
 import { RefreshCwIcon } from "lucide-react";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
@@ -22,6 +25,7 @@ import { useCommentFeed } from "./use-comment-feed";
 
 type TargetOption = { value: string; label: string; image: string | null; rarity: number | null; characterKey: string | null };
 export function AdminCommentInbox({ initial, targets, initialTarget, initialComment }: { initial: CommentPage; targets: TargetOption[]; initialTarget?: string; initialComment?: string }) {
+  const { t } = useCommentLocale();
   const [target, setTarget] = useState<TargetOption | null>(targets.find((item) => item.value === initialTarget) ?? null);
   const [status, setStatus] = useState("all");
   const [answered, setAnswered] = useState("all");
@@ -32,46 +36,45 @@ export function AdminCommentInbox({ initial, targets, initialTarget, initialComm
   const markRead = useMarkCommentsRead();
   useEffect(() => { void markRead(target?.value ?? "all"); }, [markRead, target, feed.revision]);
   return <div className="flex min-w-0 flex-col gap-6 max-md:[&_button]:min-h-11 max-md:[&_button]:min-w-11">
-    {initialComment && initialTarget && <section className="flex min-w-0 flex-col gap-3" aria-label="การสนทนาจากการแจ้งเตือน">
-      <h2 className="font-heading text-lg font-semibold">การสนทนาจากการแจ้งเตือน</h2>
+    {initialComment && initialTarget && <section className="flex min-w-0 flex-col gap-3" aria-label={t("การสนทนาจากการแจ้งเตือน", "Thread from notification")}>
+      <h2 className="font-heading text-lg font-semibold">{t("การสนทนาจากการแจ้งเตือน", "Thread from notification")}</h2>
       <CommentThread rootId={initialComment} expectedTarget={initialTarget} onChange={() => feed.refresh({ silent: true })} />
     </section>}
     <FieldGroup className="lg:grid lg:grid-cols-[repeat(3,minmax(0,1fr))_auto] lg:items-end">
-      <Field><FieldLabel>ไกด์หรือรอบ Stygian</FieldLabel>
+      <Field><FieldLabel>{t("ไกด์หรือรอบ Stygian", "Guide or Stygian season")}</FieldLabel>
         <FuzzyCombobox items={targets} value={target} onValueChange={setTarget} itemToStringLabel={(item) => item.label} itemToStringValue={(item) => item.value}
           searchNames={(item) => [item.label]} autoHighlight>
-          <ComboboxInput aria-label="ค้นหาไกด์หรือรอบ Stygian" placeholder="ทุกไกด์และทุกรอบ" showClear />
-          <ComboboxContent><ComboboxEmpty>ไม่พบไกด์ที่ตรงกัน</ComboboxEmpty><ComboboxList>{(item: TargetOption) => <ComboboxItem key={item.value} value={item}><Avatar className={cn("size-9 shrink-0", characterRarityGradientClass(item.characterKey, item.rarity))}><AvatarImage src={item.image ?? undefined} alt="" /><AvatarFallback>{item.label.slice(0, 2)}</AvatarFallback></Avatar><span className="min-w-0 flex-1 truncate">{item.label}</span></ComboboxItem>}</ComboboxList></ComboboxContent>
+          <ComboboxInput aria-label={t("ค้นหาไกด์หรือรอบ Stygian", "Search guides or Stygian seasons")} placeholder={t("ทุกไกด์และทุกรอบ", "All guides and seasons")} showClear />
+          <ComboboxContent><ComboboxEmpty>{t("ไม่พบไกด์ที่ตรงกัน", "No matching guides")}</ComboboxEmpty><ComboboxList>{(item: TargetOption) => <ComboboxItem key={item.value} value={item}><Avatar className={cn("size-9 shrink-0", characterRarityGradientClass(item.characterKey, item.rarity))}><AvatarImage src={item.image ?? undefined} alt="" /><AvatarFallback>{item.label.slice(0, 2)}</AvatarFallback></Avatar><span className="min-w-0 flex-1 truncate">{item.label}</span></ComboboxItem>}</ComboboxList></ComboboxContent>
         </FuzzyCombobox>
       </Field>
-      <Field><FieldLabel>การแสดงผล</FieldLabel><ToggleGroup className="max-w-full flex-wrap" value={[status]} onValueChange={(values) => { if (values[0]) setStatus(values[0]); }} variant="outline" aria-label="กรองการแสดงผลความคิดเห็น">
-        <ToggleGroupItem value="all">ทั้งหมด</ToggleGroupItem><ToggleGroupItem value="visible">แสดงอยู่</ToggleGroupItem><ToggleGroupItem value="hidden">ซ่อนอยู่</ToggleGroupItem>
+      <Field><FieldLabel>{t("การแสดงผล", "Visibility")}</FieldLabel><ToggleGroup className="max-w-full flex-wrap" value={[status]} onValueChange={(values) => { if (values[0]) setStatus(values[0]); }} variant="outline" aria-label={t("กรองการแสดงผลความคิดเห็น", "Filter comment visibility")}>
+        <ToggleGroupItem value="all">{t("ทั้งหมด", "All")}</ToggleGroupItem><ToggleGroupItem value="visible">{t("แสดงอยู่", "Visible")}</ToggleGroupItem><ToggleGroupItem value="hidden">{t("ซ่อนอยู่", "Hidden")}</ToggleGroupItem>
       </ToggleGroup></Field>
-      <Field><FieldLabel>การตอบกลับจากผู้ดูแล</FieldLabel><ToggleGroup className="max-w-full flex-wrap" value={[answered]} onValueChange={(values) => { if (values[0]) setAnswered(values[0]); }} variant="outline" aria-label="กรองการตอบกลับจากผู้ดูแล">
-        <ToggleGroupItem value="all">ทุกความคิดเห็น</ToggleGroupItem><ToggleGroupItem value="unanswered">ยังไม่ได้ตอบ</ToggleGroupItem>
+      <Field><FieldLabel>{t("การตอบกลับจากผู้ดูแล", "Admin replies")}</FieldLabel><ToggleGroup className="max-w-full flex-wrap" value={[answered]} onValueChange={(values) => { if (values[0]) setAnswered(values[0]); }} variant="outline" aria-label={t("กรองการตอบกลับจากผู้ดูแล", "Filter admin replies")}>
+        <ToggleGroupItem value="all">{t("ทุกความคิดเห็น", "All comments")}</ToggleGroupItem><ToggleGroupItem value="unanswered">{t("ยังไม่ได้ตอบ", "Unanswered")}</ToggleGroupItem>
       </ToggleGroup></Field>
-      <Button variant="outline" className="self-end" disabled={feed.busy} onClick={() => void feed.refresh({ silent: false, forceRevision: true })}><RefreshCwIcon data-icon="inline-start" />รีเฟรช</Button>
+      <Button variant="outline" className="self-end" disabled={feed.busy} onClick={() => void feed.refresh({ silent: false, forceRevision: true })}><RefreshCwIcon data-icon="inline-start" />{t("รีเฟรช", "Refresh")}</Button>
     </FieldGroup>
     {feed.error && <Alert variant="destructive"><AlertDescription>{feed.error}</AlertDescription></Alert>}
-    {feed.page.items.length > 0 && <section aria-label="ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian" className="flex min-w-0 flex-col">
-      <Table className="table-fixed max-md:block" aria-label="ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian">
+    {feed.page.items.length > 0 && <section aria-label={t("ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian", "Comments from all guides and Stygian seasons")} className="flex min-w-0 flex-col">
+      <Table className="table-fixed max-md:block" aria-label={t("ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian", "Comments from all guides and Stygian seasons")}>
         <TableHeader className="max-md:sr-only"><TableRow>
-          <TableHead scope="col" className="px-0">ความคิดเห็น</TableHead>
-          <TableHead scope="col" className="w-[280px] px-0 text-right">เนื้อหา</TableHead>
+          <TableHead scope="col" className="px-0">{t("ความคิดเห็น", "Comments")}</TableHead>
+          <TableHead scope="col" className="w-[280px] px-0 text-right">{t("เนื้อหา", "Content")}</TableHead>
         </TableRow></TableHeader>
         <TableBody className="max-md:block">
           {feed.page.items.map((item) => <CommentCard key={item.id} item={item} viewer={feed.page.viewer} inbox onChange={() => feed.refresh({ silent: true, forceRevision: true })} revision={feed.revision}
             overview={item.target.startsWith("stygian:") ? <Link href={item.href} prefetch={false} className="min-w-0 break-words rounded-lg py-2 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring">
               {item.targetName}
             </Link> : item.targetImage && <Link href={item.href} prefetch={false} className="shrink-0 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring">
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={item.targetImage} alt={`ภาพ Overview ของ ${item.targetName}`} loading="lazy" decoding="async" width={112} height={112} className="size-28 rounded-lg object-contain" />
+              <Image src={item.targetImage} alt={t(`ภาพ Overview ของ ${item.targetName}`, `Overview image for ${item.targetName}`)} sizes="112px" width={112} height={112} className="size-28 rounded-lg object-contain" />
             </Link>} />)}
         </TableBody>
       </Table>
     </section>}
-    {!feed.page.items.length && !feed.busy && !feed.error && <Empty><EmptyHeader><EmptyTitle>ไม่พบความคิดเห็นที่ตรงกัน</EmptyTitle><EmptyDescription>ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian จะแสดงที่นี่</EmptyDescription></EmptyHeader></Empty>}
+    {!feed.page.items.length && !feed.busy && !feed.error && <Empty><EmptyHeader><EmptyTitle>{t("ไม่พบความคิดเห็นที่ตรงกัน", "No matching comments")}</EmptyTitle><EmptyDescription>{t("ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian จะแสดงที่นี่", "Comments from every guide and Stygian season will appear here")}</EmptyDescription></EmptyHeader></Empty>}
     {feed.busy && <AdminCommentRowsSkeleton count={feed.page.items.length ? 1 : 3} />}
-    {feed.page.nextCursor && <Button variant="outline" disabled={feed.busy} onClick={() => void feed.more()}>ดูความคิดเห็นเพิ่มเติม</Button>}
+    {feed.page.nextCursor && <Button variant="outline" disabled={feed.busy} onClick={() => void feed.more()}>{t("ดูความคิดเห็นเพิ่มเติม", "Load more comments")}</Button>}
   </div>;
 }
diff --git a/components/comments/admin-unread-comments.tsx b/components/comments/admin-unread-comments.tsx
index 908bda2..f8ee596 100644
--- a/components/comments/admin-unread-comments.tsx
+++ b/components/comments/admin-unread-comments.tsx
@@ -1,37 +1,41 @@
 "use client";
 
+import { useCommentLocale } from "./comment-locale";
+
 import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from "react";
 import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
-import { commentRequest } from "./client";
 import { useCommentEvents } from "./use-comment-events";
 
 type Counts = { counts: Record<string, number>; total: number };
 const UnreadContext = createContext<Counts & { markRead: (target: string) => Promise<void> }>({ counts: {}, total: 0, markRead: async () => {} });
 export function AdminUnreadCommentsProvider({ children }: { children: ReactNode }) {
+  const { request: commentRequest } = useCommentLocale();
   const [counts, setCounts] = useState<Counts>({ counts: {}, total: 0 });
   const generation = useRef(0);
   const refresh = useCallback(async () => {
     try { const sequence = ++generation.current; const result = await commentRequest<Counts>("/api/admin/comments/unread"); if (sequence === generation.current) setCounts(result); } catch { /* Protected routes handle expired admin sessions. */ }
-  }, []);
+  }, [commentRequest]);
   const markRead = useCallback(async (target: string) => {
     try {
       await commentRequest("/api/admin/comments/unread", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ target }) });
       await refresh();
     } catch { /* Reading stays available when the counter cannot be saved. */ }
-  }, [refresh]);
+  }, [refresh, commentRequest]);
   useEffect(() => { void Promise.resolve().then(refresh); }, [refresh]);
   useCommentEvents({ admin: true }, refresh);
   return <UnreadContext value={{ ...counts, markRead }}>{children}</UnreadContext>;
 }
 export function useMarkCommentsRead() { return useContext(UnreadContext).markRead; }
 export function AdminUnreadCount({ target }: { target?: string }) {
+  const { t } = useCommentLocale();
   const state = useContext(UnreadContext);
   const count = target ? state.counts[target] ?? 0 : state.total;
-  return count > 0 ? <Badge variant="destructive" className="min-w-5 justify-center rounded-full bg-destructive px-1.5 text-background dark:bg-destructive" aria-label={`ความคิดเห็นใหม่ ${count} รายการ`}>{count > 99 ? "99+" : count}</Badge> : null;
+  return count > 0 ? <Badge variant="destructive" className="min-w-5 justify-center rounded-full bg-destructive px-1.5 text-background dark:bg-destructive" aria-label={t(`ความคิดเห็นใหม่ ${count} รายการ`, `${count} unread comments`)}>{count > 99 ? "99+" : count}</Badge> : null;
 }
 export function AdminUnreadBadge({ target }: { target: string }) {
+  const { t } = useCommentLocale();
   const state = useContext(UnreadContext);
   if (!(state.counts[target] > 0)) return null;
-  return <Link href={`/admin/comments?target=${encodeURIComponent(target)}`} prefetch={false} className="relative z-20 self-end" aria-label="ดูความคิดเห็นใหม่"><AdminUnreadCount target={target} /></Link>;
+  return <Link href={`/admin/comments?target=${encodeURIComponent(target)}`} prefetch={false} className="relative z-20 self-end" aria-label={t("ดูความคิดเห็นใหม่", "View unread comments")}><AdminUnreadCount target={target} /></Link>;
 }
diff --git a/components/comments/client.test.ts b/components/comments/client.test.ts
new file mode 100644
index 0000000..e9651c2
--- /dev/null
+++ b/components/comments/client.test.ts
@@ -0,0 +1,26 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { commentRequest, getCommentErrors } from "./client";
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("comment error language", () => {
+  it("retains Thai by default and supplies English for every error code", () => {
+    const thai = getCommentErrors();
+    const english = getCommentErrors("en");
+    expect(Object.keys(english).sort()).toEqual(Object.keys(thai).sort());
+    for (const message of Object.values(english)) expect(message).not.toMatch(/[\u0e00-\u0e7f]/);
+    expect(thai["image-too-large"]).toMatch(/[\u0e00-\u0e7f]/);
+  });
+
+  it("localizes server errors and preserves uncached requests", async () => {
+    const fetch = vi.fn().mockResolvedValue(new Response(JSON.stringify({ error: "comment-edited-reload" }), { status: 409 }));
+    vi.stubGlobal("fetch", fetch);
+    await expect(commentRequest("/api/comments/test", undefined, "en")).rejects.toThrow("Your draft has been kept");
+    expect(fetch).toHaveBeenCalledWith("/api/comments/test", { cache: "no-store" });
+  });
+
+  it("uses the selected language when an error response is not JSON", async () => {
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(new Response("Unavailable", { status: 503 })));
+    await expect(commentRequest("/api/comments", undefined, "en")).rejects.toThrow("Please try again");
+  });
+});
diff --git a/components/comments/client.ts b/components/comments/client.ts
index 9f57bad..2a3e9d6 100644
--- a/components/comments/client.ts
+++ b/components/comments/client.ts
@@ -1,3 +1,5 @@
+export type CommentLocale = "th" | "en";
+
 export const COMMENT_ERRORS: Record<string, string> = {
   "sign-in-required": "กรุณาเข้าสู่ระบบเพื่อแสดงความคิดเห็น",
   "too-many-requests": "ทำรายการบ่อยเกินไป กรุณารอสักครู่แล้วลองใหม่",
@@ -19,11 +21,37 @@ export const COMMENT_ERRORS: Record<string, string> = {
   "comment-author-ban-not-allowed": "ไม่สามารถแบนผู้เขียนความคิดเห็นนี้ได้",
   "guide-trashed": "ไกด์นี้อยู่ในถังขยะ จึงไม่สามารถแสดงความคิดเห็นได้",
 };
-export async function commentRequest<T>(url: string, options?: RequestInit): Promise<T> {
+const ENGLISH_COMMENT_ERRORS: Record<keyof typeof COMMENT_ERRORS, string> = {
+  "sign-in-required": "Please sign in to comment",
+  "too-many-requests": "Too many requests. Please wait and try again.",
+  "comment-abusive-language": "Please remove abusive language before posting",
+  "comment-spam": "Please remove excessive links or repeated text before posting",
+  "comment-duplicate": "You already posted this comment. Wait 5 minutes before posting it again.",
+  "uploads-busy": "Uploads are busy. Please try again.",
+  "image-too-large": "Each image must be no larger than 10 MiB",
+  "body-too-large": "Attach up to 5 images, each no larger than 10 MiB",
+  "unsupported-image-type": "JPEG, PNG, and WebP images are supported. Videos are not supported.",
+  "invalid-image": "Could not read this image. Please choose a valid image file.",
+  "comment-image-upload-failed": "Image upload failed. Please try again. Your draft and images have been kept.",
+  "empty-comment": "Write a comment or attach an image",
+  "invalid-comment": "Comments can contain up to 4,000 characters and 5 images",
+  "comment-edited-reload": "This comment has changed. Reload before saving. Your draft has been kept.",
+  "comment-unavailable": "This comment is no longer available",
+  "comment-not-editable": "This comment can no longer be edited",
+  "comment-author-banned": "Your account has been banned from commenting",
+  "comment-author-ban-not-allowed": "This author cannot be banned",
+  "guide-trashed": "This guide is in the trash and cannot receive comments",
+};
+
+export function getCommentErrors(locale: CommentLocale = "th") {
+  return locale === "en" ? ENGLISH_COMMENT_ERRORS : COMMENT_ERRORS;
+}
+
+export async function commentRequest<T>(url: string, options?: RequestInit, locale: CommentLocale = "th"): Promise<T> {
   const response = await fetch(url, { cache: "no-store", ...options });
   if (!response.ok) {
     const body = await response.json().catch(() => ({}));
-    throw new Error(COMMENT_ERRORS[body.error] ?? "ไม่สามารถทำรายการได้ กรุณาลองใหม่");
+    throw new Error(getCommentErrors(locale)[body.error] ?? (locale === "en" ? "Could not complete this action. Please try again." : "ไม่สามารถทำรายการได้ กรุณาลองใหม่"));
   }
   return response.status === 204 ? undefined as T : await response.json() as T;
 }
diff --git a/components/comments/comment-board.tsx b/components/comments/comment-board.tsx
index f6fc567..85bd59c 100644
--- a/components/comments/comment-board.tsx
+++ b/components/comments/comment-board.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useCommentLocale } from "./comment-locale";
+
 import { useRouter } from "next/navigation";
 
 import { useEffect, useState } from "react";
@@ -18,6 +20,7 @@ import { useCommentEvents } from "./use-comment-events";
 import { useCommentFeed } from "./use-comment-feed";
 
 export function CommentBoard({ target, initial }: { target: string; initial: CommentPage }) {
+  const { t } = useCommentLocale();
   const router = useRouter();
   const [sort, setSort] = useState("top");
   const [linkedReply, setLinkedReply] = useState<string | null>(null);
@@ -38,21 +41,21 @@ export function CommentBoard({ target, initial }: { target: string; initial: Com
     return () => window.removeEventListener("hashchange", showThread);
   }, []);
   return <div className="flex flex-col gap-6 py-2">
-    <div className="flex items-start gap-3"><Avatar className="size-10 shrink-0"><AvatarImage src={feed.page.viewer?.image ?? undefined} alt={feed.page.viewer?.name ?? "โปรไฟล์"} /><AvatarFallback>{feed.page.viewer?.name?.slice(0, 2) || "คุณ"}</AvatarFallback></Avatar><div className="min-w-0 flex-1">{feed.page.viewer ? <CommentComposer target={target} onSaved={() => void feed.refresh()} />
-      : <div className="flex flex-col items-start gap-2"><p className="text-sm text-muted-foreground">เข้าสู่ระบบเพื่อแสดงความคิดเห็น ตอบกลับ และกดถูกใจ</p><Button onClick={() => router.push(commentSignInHref())}>เข้าสู่ระบบ</Button></div>}</div></div>
-    <div className="order-first flex flex-wrap items-center gap-3"><h2 className="font-heading text-xl font-semibold">ความคิดเห็น</h2>
-      <ToggleGroup value={[sort]} onValueChange={(values) => { if (values[0]) setSort(values[0]); }} variant="outline" aria-label="เรียงความคิดเห็น">
-        <ToggleGroupItem value="newest">ล่าสุด</ToggleGroupItem><ToggleGroupItem value="top">ยอดนิยม</ToggleGroupItem>
+    <div className="flex items-start gap-3"><Avatar className="size-10 shrink-0"><AvatarImage src={feed.page.viewer?.image ?? undefined} alt={feed.page.viewer?.name ?? t("โปรไฟล์", "Profile")} /><AvatarFallback>{feed.page.viewer?.name?.slice(0, 2) || t("คุณ", "You")}</AvatarFallback></Avatar><div className="min-w-0 flex-1">{feed.page.viewer ? <CommentComposer target={target} onSaved={() => void feed.refresh()} />
+      : <div className="flex flex-col items-start gap-2"><p className="text-sm text-muted-foreground">{t("เข้าสู่ระบบเพื่อแสดงความคิดเห็น ตอบกลับ และกดถูกใจ", "Sign in to comment, reply, and like comments")}</p><Button onClick={() => router.push(commentSignInHref())}>{t("เข้าสู่ระบบ", "Sign in")}</Button></div>}</div></div>
+    <div className="order-first flex flex-wrap items-center gap-3"><h2 className="font-heading text-xl font-semibold">{t("ความคิดเห็น", "Comments")}</h2>
+      <ToggleGroup value={[sort]} onValueChange={(values) => { if (values[0]) setSort(values[0]); }} variant="outline" aria-label={t("เรียงความคิดเห็น", "Sort comments")}>
+        <ToggleGroupItem value="newest">{t("ล่าสุด", "Newest")}</ToggleGroupItem><ToggleGroupItem value="top">{t("ยอดนิยม", "Top")}</ToggleGroupItem>
       </ToggleGroup>
-      <Button variant="ghost" className="ml-auto rounded-full" aria-label="รีเฟรชความคิดเห็น" size="icon" disabled={feed.busy} onClick={() => void feed.refresh()}><RefreshCwIcon /></Button>
+      <Button variant="ghost" className="ml-auto rounded-full" aria-label={t("รีเฟรชความคิดเห็น", "Refresh comments")} size="icon" disabled={feed.busy} onClick={() => void feed.refresh()}><RefreshCwIcon /></Button>
     </div>
     {feed.error && <Alert variant="destructive"><AlertDescription>{feed.error}</AlertDescription></Alert>}
     {feed.page.items.filter((item) => item.id !== linkedThread).map((item) => <CommentCard key={item.id} item={item} viewer={feed.page.viewer} onChange={() => feed.refresh({ silent: true })} revision={feed.revision} />)}
-    {!feed.page.items.length && !feed.busy && !feed.error && <Empty><EmptyHeader><EmptyTitle>ยังไม่มีความคิดเห็น</EmptyTitle><EmptyDescription>เป็นคนแรกที่ร่วมพูดคุยเกี่ยวกับไกด์นี้</EmptyDescription></EmptyHeader></Empty>}
+    {!feed.page.items.length && !feed.busy && !feed.error && <Empty><EmptyHeader><EmptyTitle>{t("ยังไม่มีความคิดเห็น", "No comments yet")}</EmptyTitle><EmptyDescription>{t("เป็นคนแรกที่ร่วมพูดคุยเกี่ยวกับไกด์นี้", "Be the first to discuss this guide")}</EmptyDescription></EmptyHeader></Empty>}
     {feed.busy && <CommentSkeleton count={feed.page.items.length ? 1 : 3} />}
-    {feed.page.nextCursor && <Button variant="outline" disabled={feed.busy} onClick={() => void feed.more()}>ดูความคิดเห็นเพิ่มเติม</Button>}
-    {linkedThread && <section aria-label="การสนทนาที่เลือก" className="flex flex-col gap-3">
-      <div className="flex items-center justify-between gap-2"><h3 className="font-semibold">การสนทนา</h3><Button variant="ghost" onClick={() => { setLinkedThread(null); setLinkedReply(null); window.history.replaceState(null, "", window.location.pathname + window.location.search); }}>ปิดการสนทนา</Button></div>
+    {feed.page.nextCursor && <Button variant="outline" disabled={feed.busy} onClick={() => void feed.more()}>{t("ดูความคิดเห็นเพิ่มเติม", "Load more comments")}</Button>}
+    {linkedThread && <section aria-label={t("การสนทนาที่เลือก", "Selected thread")} className="flex flex-col gap-3">
+      <div className="flex items-center justify-between gap-2"><h3 className="font-semibold">{t("การสนทนา", "Thread")}</h3><Button variant="ghost" onClick={() => { setLinkedThread(null); setLinkedReply(null); window.history.replaceState(null, "", window.location.pathname + window.location.search); }}>{t("ปิดการสนทนา", "Close thread")}</Button></div>
       <CommentThread rootId={linkedThread} focusReplyId={linkedReply ?? undefined} expectedTarget={target} onChange={() => feed.refresh({ silent: true })} />
     </section>}
 
diff --git a/components/comments/comment-card.tsx b/components/comments/comment-card.tsx
index 4b39cd4..ceed22c 100644
--- a/components/comments/comment-card.tsx
+++ b/components/comments/comment-card.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useCommentLocale } from "./comment-locale";
+
 import { useRouter } from "next/navigation";
 
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from "react";
@@ -20,7 +22,7 @@ import { TableCell, TableRow } from "@/components/ui/table";
 import type { CommentHistoryItem, CommentImage, CommentItem, CommentViewer } from "@/lib/comments/types";
 import { CommentImageView } from "./comment-image";
 import { CommentComposer } from "./comment-composer";
-import { commentRequest, commentSignInHref } from "./client";
+import { commentSignInHref } from "./client";
 import { useCommentEvents } from "./use-comment-events";
 import { useCommentFeed } from "./use-comment-feed";
 
@@ -43,12 +45,13 @@ function subscribeClock(listener: () => void) {
 const clockSnapshot = () => clockTime;
 const serverClockSnapshot = () => 0;
 function CommentTimestamp({ value }: { value: string }) {
+  const { t, locale } = useCommentLocale();
   const now = useSyncExternalStore(subscribeClock, clockSnapshot, serverClockSnapshot);
   function relativeTime() {
     const seconds = Math.round((new Date(value).getTime() - now) / 1000);
     const absolute = Math.abs(seconds);
-    if (absolute < 60) return "เมื่อสักครู่";
-    const formatter = new Intl.RelativeTimeFormat("th-TH", { numeric: "auto" });
+    if (absolute < 60) return t("เมื่อสักครู่", "just now");
+    const formatter = new Intl.RelativeTimeFormat(locale === "en" ? "en-US" : "th-TH", { numeric: "auto" });
     const units: [number, Intl.RelativeTimeFormatUnit][] = [[31536000, "year"], [2592000, "month"], [86400, "day"], [3600, "hour"], [60, "minute"]];
     const [size, unit] = units.find(([size]) => absolute >= size)!;
     return formatter.format(Math.round(seconds / size), unit);
@@ -59,12 +62,13 @@ function CommentTimestamp({ value }: { value: string }) {
 }
 
 export function CommentImages({ images }: { images: CommentImage[] }) {
+  const { t } = useCommentLocale();
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const selected = selectedIndex === null ? null : images[selectedIndex];
   return images.length ? <>
     <div className="flex flex-wrap gap-2">{images.map((image, index) =>
-      <Button key={image.id} variant="ghost" className="h-auto rounded-lg p-0" aria-label={`เปิดรูปภาพที่ ${index + 1}`} onClick={() => setSelectedIndex(index)}>
-        <CommentImageView image={image} alt={`รูปภาพประกอบความคิดเห็นที่ ${index + 1}`} className="size-28 rounded-lg border object-cover sm:size-36" />
+      <Button key={image.id} variant="ghost" className="h-auto rounded-lg p-0" aria-label={t(`เปิดรูปภาพที่ ${index + 1}`, `Open image ${index + 1}`)} onClick={() => setSelectedIndex(index)}>
+        <CommentImageView image={image} alt={t(`รูปภาพประกอบความคิดเห็นที่ ${index + 1}`, `Comment image ${index + 1}`)} className="size-28 rounded-lg border object-cover sm:size-36" />
       </Button>)}</div>
     <Dialog open={Boolean(selected)} onOpenChange={(open) => { if (!open) setSelectedIndex(null); }}>
       <DialogContent className="max-h-[90svh] overflow-y-auto sm:max-w-5xl" onKeyDown={(event) => {
@@ -73,12 +77,12 @@ export function CommentImages({ images }: { images: CommentImage[] }) {
           setSelectedIndex((current) => Math.max(0, Math.min(images.length - 1, (current ?? 0) + (event.key === "ArrowLeft" ? -1 : 1))));
         }
       }}>
-        <DialogHeader><DialogTitle>รูปภาพประกอบความคิดเห็น</DialogTitle><DialogDescription>รูปที่ {(selectedIndex ?? 0) + 1} จาก {images.length}</DialogDescription></DialogHeader>
+        <DialogHeader><DialogTitle>{t("รูปภาพประกอบความคิดเห็น", "Comment images")}</DialogTitle><DialogDescription>{t("รูปที่", "Image")} {(selectedIndex ?? 0) + 1} {t("จาก", "of")} {images.length}</DialogDescription></DialogHeader>
         {selected && <>
-          <CommentImageView key={selected.id} image={selected} alt={`รูปภาพประกอบความคิดเห็นที่ ${(selectedIndex ?? 0) + 1}`} className="max-h-[65svh] w-full object-contain" />
+          <CommentImageView fullSize key={selected.id} image={selected} alt={t(`รูปภาพประกอบความคิดเห็นที่ ${(selectedIndex ?? 0) + 1}`, `Comment image ${(selectedIndex ?? 0) + 1}`)} className="object-contain" />
           {images.length > 1 && <div className="flex justify-center gap-2">
-            <Button variant="outline" size="icon" aria-label="รูปก่อนหน้า" disabled={selectedIndex === 0} onClick={() => setSelectedIndex((current) => (current ?? 0) - 1)}><ChevronLeftIcon /></Button>
-            <Button variant="outline" size="icon" aria-label="รูปถัดไป" disabled={selectedIndex === images.length - 1} onClick={() => setSelectedIndex((current) => (current ?? 0) + 1)}><ChevronRightIcon /></Button>
+            <Button variant="outline" size="icon" aria-label={t("รูปก่อนหน้า", "Previous image")} disabled={selectedIndex === 0} onClick={() => setSelectedIndex((current) => (current ?? 0) - 1)}><ChevronLeftIcon /></Button>
+            <Button variant="outline" size="icon" aria-label={t("รูปถัดไป", "Next image")} disabled={selectedIndex === images.length - 1} onClick={() => setSelectedIndex((current) => (current ?? 0) + 1)}><ChevronRightIcon /></Button>
           </div>}
         </>}
       </DialogContent>
@@ -92,6 +96,7 @@ function CommentText({ text }: { text: string }) {
 }
 
 function RevisionHistory({ id }: { id: string }) {
+  const { request: commentRequest, t, locale } = useCommentLocale();
   const [items, setItems] = useState<CommentHistoryItem[]>([]);
   const [cursor, setCursor] = useState<string | null>(null);
   const [error, setError] = useState("");
@@ -102,25 +107,26 @@ function RevisionHistory({ id }: { id: string }) {
       const result = await commentRequest<{ items: CommentHistoryItem[]; nextCursor: string | null }>(`/api/comments/${id}/history${next ? `?cursor=${next}` : ""}`);
       setItems((current) => next ? [...current, ...result.items] : result.items);
       setCursor(result.nextCursor); setError("");
-    } catch (cause) { setError(cause instanceof Error ? cause.message : "ไม่สามารถโหลดประวัติการแก้ไขได้"); }
+    } catch (cause) { setError(cause instanceof Error ? cause.message : t("ไม่สามารถโหลดประวัติการแก้ไขได้", "Could not load revision history")); }
     finally { setBusy(false); }
-  }, [id]);
+  }, [id, commentRequest, t]);
   useEffect(() => { void Promise.resolve().then(() => load()); }, [load]);
   return <div className="flex max-h-[65vh] flex-col gap-4 overflow-y-auto">
     {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
     {items.map((revision) => <section key={revision.id} className="flex flex-col gap-3">
-      <p className="text-sm text-muted-foreground">เวอร์ชัน {revision.version} · {new Date(revision.createdAt).toLocaleString("th-TH")}</p>
+      <p className="text-sm text-muted-foreground">{t("เวอร์ชัน", "Version")} {revision.version} · {new Date(revision.createdAt).toLocaleString(locale === "en" ? "en-US" : "th-TH")}</p>
       <CommentText text={revision.text} /><CommentImages images={revision.images} /><Separator />
     </section>)}
     {busy && <CommentSkeleton count={2} />}
-    {cursor && <Button variant="outline" disabled={busy} onClick={() => void load(cursor)}>ดูเวอร์ชันก่อนหน้า</Button>}
-    {error && <Button variant="outline" disabled={busy} onClick={() => void load()}>ลองใหม่</Button>}
+    {cursor && <Button variant="outline" disabled={busy} onClick={() => void load(cursor)}>{t("ดูเวอร์ชันก่อนหน้า", "Load earlier versions")}</Button>}
+    {error && <Button variant="outline" disabled={busy} onClick={() => void load()}>{t("ลองใหม่", "Try again")}</Button>}
   </div>;
 }
 
 export function CommentCard({ item, viewer, onChange, revision = 0, inbox = false, inboxReply = false, moderationDetails = false, replies = true, defaultExpanded = false, focusReplyId, highlighted = false, overview }: {
   item: CommentItem; viewer: CommentViewer | null; onChange: () => void | Promise<unknown>; revision?: number; inbox?: boolean; inboxReply?: boolean; moderationDetails?: boolean; replies?: boolean; defaultExpanded?: boolean; focusReplyId?: string; highlighted?: boolean; overview?: ReactNode;
 }) {
+  const { request: commentRequest, t, locale } = useCommentLocale();
   const router = useRouter();
   const fullWidthMobile = inbox || moderationDetails;
   const [mode, setMode] = useState<"reply" | "edit" | null>(null);
@@ -180,7 +186,7 @@ export function CommentCard({ item, viewer, onChange, revision = 0, inbox = fals
           desired.current = confirmedReaction.current;
           setReactionOverride(confirmedReaction.current);
         }
-        toast.error(cause instanceof Error ? cause.message : "ไม่สามารถบันทึกได้ กรุณาลองใหม่");
+        toast.error(cause instanceof Error ? cause.message : t("ไม่สามารถบันทึกได้ กรุณาลองใหม่", "Could not save. Please try again."));
       } finally {
         queuedReactions.current--;
         if (!queuedReactions.current && sequence === reactionSequence.current) {
@@ -199,7 +205,7 @@ export function CommentCard({ item, viewer, onChange, revision = 0, inbox = fals
         ...(action === "delete" ? {} : { headers: { "Content-Type": "application/json" }, body: JSON.stringify({ banned: value }) }),
       });
       setDeleting(false); setBanning(false); await onChange();
-    } catch (cause) { toast.error(cause instanceof Error ? cause.message : "ไม่สามารถอัปเดตความคิดเห็นได้"); }
+    } catch (cause) { toast.error(cause instanceof Error ? cause.message : t("ไม่สามารถอัปเดตความคิดเห็นได้", "Could not update the comment")); }
     finally { setPending(false); }
   }
   function compose(next: "reply" | "edit") {
@@ -208,12 +214,12 @@ export function CommentCard({ item, viewer, onChange, revision = 0, inbox = fals
   }
   const canReadHistory = (!item.deleted && !item.hidden) || Boolean(viewer?.admin);
   const optionsMenu = (item.canEdit || viewer?.admin) && <DropdownMenu>
-    <DropdownMenuTrigger render={<Button variant="ghost" size="icon-sm" className="shrink-0 rounded-full" aria-label="ตัวเลือกความคิดเห็น" disabled={pending} />}><EllipsisVerticalIcon /></DropdownMenuTrigger>
+    <DropdownMenuTrigger render={<Button variant="ghost" size="icon-sm" className="shrink-0 rounded-full" aria-label={t("ตัวเลือกความคิดเห็น", "Comment options")} disabled={pending} />}><EllipsisVerticalIcon /></DropdownMenuTrigger>
     <DropdownMenuContent align="end"><DropdownMenuGroup>
-      {item.canEdit && <DropdownMenuItem onClick={() => compose("edit")}><PencilIcon />แก้ไข</DropdownMenuItem>}
-      {(item.canEdit || viewer?.admin) && <DropdownMenuItem variant="destructive" disabled={pending || (viewer?.admin && !item.canModerate)} onClick={() => setDeleting(true)}><Trash2Icon />ลบ</DropdownMenuItem>}
+      {item.canEdit && <DropdownMenuItem onClick={() => compose("edit")}><PencilIcon />{t("แก้ไข", "Edit")}</DropdownMenuItem>}
+      {(item.canEdit || viewer?.admin) && <DropdownMenuItem variant="destructive" disabled={pending || (viewer?.admin && !item.canModerate)} onClick={() => setDeleting(true)}><Trash2Icon />{t("ลบ", "Delete")}</DropdownMenuItem>}
       {viewer?.admin && <DropdownMenuItem disabled={pending || !item.canBanAuthor} onClick={() => item.authorBanned ? void mutate("ban", false) : setBanning(true)}>
-        {item.authorBanned ? <ShieldCheckIcon /> : <BanIcon />}{item.authorBanned ? "ยกเลิกแบนผู้เขียน" : "แบนผู้เขียน"}
+        {item.authorBanned ? <ShieldCheckIcon /> : <BanIcon />}{item.authorBanned ? t("ยกเลิกแบนผู้เขียน", "Unban author") : t("แบนผู้เขียน", "Ban author")}
       </DropdownMenuItem>}
     </DropdownMenuGroup></DropdownMenuContent>
   </DropdownMenu>;
@@ -225,38 +231,38 @@ export function CommentCard({ item, viewer, onChange, revision = 0, inbox = fals
     <div className={cn("flex min-w-0 items-start gap-3", fullWidthMobile && "grid grid-cols-[auto_minmax(0,1fr)] sm:flex")}>
       <Avatar className={item.rootId ? "size-8 shrink-0" : "size-10 shrink-0"}><AvatarImage src={item.authorImage ?? undefined} alt={item.authorName} /><AvatarFallback>{item.authorName.slice(0, 2)}</AvatarFallback></Avatar>
       <div className={cn("flex min-w-0 flex-1 flex-col gap-2", fullWidthMobile && "max-sm:contents")}>
-        <div className="flex min-w-0 items-start justify-between gap-2"><div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1"><span className="text-sm font-semibold">{item.authorName}</span>{item.authorAdmin && <Badge variant="secondary">ผู้ดูแล</Badge>}
+        <div className="flex min-w-0 items-start justify-between gap-2"><div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1"><span className="text-sm font-semibold">{item.authorName}</span>{item.authorAdmin && <Badge variant="secondary">{t("ผู้ดูแล", "Admin")}</Badge>}
           <CommentTimestamp value={item.createdAt} />
-          {inbox && item.rootId && <Badge variant="outline">ตอบกลับ</Badge>}
-          {(inbox || moderationDetails) && item.hidden && <Badge variant="secondary">{item.ownHidden ? "ซ่อนอยู่" : "การสนทนาถูกซ่อน"}</Badge>}
-          {(inbox || moderationDetails) && item.deleted && <Badge variant="secondary">ลบแล้ว</Badge>}
-          {item.version > 1 && canReadHistory && <Button variant="link" size="xs" onClick={() => setHistory(true)}>แก้ไขแล้ว</Button>}
+          {inbox && item.rootId && <Badge variant="outline">{t("ตอบกลับ", "Reply")}</Badge>}
+          {(inbox || moderationDetails) && item.hidden && <Badge variant="secondary">{item.ownHidden ? t("ซ่อนอยู่", "Hidden") : t("การสนทนาถูกซ่อน", "Thread hidden")}</Badge>}
+          {(inbox || moderationDetails) && item.deleted && <Badge variant="secondary">{t("ลบแล้ว", "Deleted")}</Badge>}
+          {item.version > 1 && canReadHistory && <Button variant="link" size="xs" onClick={() => setHistory(true)}>{t("แก้ไขแล้ว", "Edited")}</Button>}
           </div>
           {/* Inbox replies reach across the 280px content column and 24px cell padding. */}
           {!inbox && optionsMenu && <div className={cn("shrink-0", inboxReply && "md:absolute md:top-2 md:right-[-304px]")}>{optionsMenu}</div>}
         </div>
         <div className={cn("contents", fullWidthMobile && "max-sm:col-span-2 max-sm:flex max-sm:min-w-0 max-sm:flex-col max-sm:gap-2")}>
-        {item.replyToName && <p className="text-xs text-muted-foreground">ตอบกลับ {item.replyToName}</p>}
+        {item.replyToName && <p className="text-xs text-muted-foreground">{t("ตอบกลับ", "Reply")} {item.replyToName}</p>}
         {mode === "edit" ? <CommentComposer key="edit" target={item.target} editing={item}
           onCancel={() => setMode(null)} onSaved={() => { setMode(null); onChange(); }} /> : <>
-        {(item.deleted || item.hidden) && !viewer?.admin ? <p className="text-sm text-muted-foreground">{item.deleted ? "ความคิดเห็นถูกลบแล้ว" : "ความคิดเห็นถูกซ่อนโดยผู้ดูแล"}</p> : <CommentText text={item.text} />}
+        {(item.deleted || item.hidden) && !viewer?.admin ? <p className="text-sm text-muted-foreground">{item.deleted ? t("ความคิดเห็นถูกลบแล้ว", "This comment was deleted") : t("ความคิดเห็นถูกซ่อนโดยผู้ดูแล", "This comment was hidden by an admin")}</p> : <CommentText text={item.text} />}
     <CommentImages images={item.images} />
     <div className="flex flex-wrap items-center gap-1">
-      <Button variant={optimistic.reaction === 1 ? "secondary" : "ghost"} size="sm" className="rounded-full" aria-label={`ถูกใจความคิดเห็น มี ${optimistic.likes} ถูกใจ`} aria-pressed={optimistic.reaction === 1} disabled={pending || !item.canInteract}
-        onClick={() => void mutate("reaction", desired.current.reaction === 1 ? 0 : 1)}><ThumbsUpIcon data-icon="inline-start" fill={optimistic.reaction === 1 ? "currentColor" : "none"} />{optimistic.likes > 0 && optimistic.likes.toLocaleString("th-TH")}</Button>
-      <Button variant={optimistic.reaction === -1 ? "secondary" : "ghost"} size="icon-sm" className="rounded-full" aria-label="ไม่ถูกใจความคิดเห็น" aria-pressed={optimistic.reaction === -1} disabled={pending || !item.canInteract}
+      <Button variant={optimistic.reaction === 1 ? "secondary" : "ghost"} size="sm" className="rounded-full" aria-label={t(`ถูกใจความคิดเห็น มี ${optimistic.likes} ถูกใจ`, `Like comment, ${optimistic.likes} likes`)} aria-pressed={optimistic.reaction === 1} disabled={pending || !item.canInteract}
+        onClick={() => void mutate("reaction", desired.current.reaction === 1 ? 0 : 1)}><ThumbsUpIcon data-icon="inline-start" fill={optimistic.reaction === 1 ? "currentColor" : "none"} />{optimistic.likes > 0 && optimistic.likes.toLocaleString(locale === "en" ? "en-US" : "th-TH")}</Button>
+      <Button variant={optimistic.reaction === -1 ? "secondary" : "ghost"} size="icon-sm" className="rounded-full" aria-label={t("ไม่ถูกใจความคิดเห็น", "Dislike comment")} aria-pressed={optimistic.reaction === -1} disabled={pending || !item.canInteract}
         onClick={() => void mutate("reaction", desired.current.reaction === -1 ? 0 : -1)}><ThumbsDownIcon fill={optimistic.reaction === -1 ? "currentColor" : "none"} /></Button>
-      {item.canInteract && <Button variant="ghost" size="sm" className="rounded-full" onClick={() => compose("reply")} disabled={pending}>ตอบกลับ</Button>}
+      {item.canInteract && <Button variant="ghost" size="sm" className="rounded-full" onClick={() => compose("reply")} disabled={pending}>{t("ตอบกลับ", "Reply")}</Button>}
       {viewer?.admin ? <Button variant={optimistic.hearted ? "secondary" : "ghost"} size="sm" aria-pressed={optimistic.hearted} disabled={pending || !item.canInteract} onClick={() => void mutate("heart", !desired.current.hearted)}>
-        <HeartIcon data-icon="inline-start" className={cn(optimistic.hearted && "text-destructive")} fill={optimistic.hearted ? "currentColor" : "none"} />{optimistic.hearted ? "ผู้ดูแลถูกใจ" : null}</Button>
-        : optimistic.hearted && !item.deleted && !item.hidden && <Badge variant="secondary"><HeartIcon data-icon="inline-start" className="text-destructive" fill="currentColor" />ผู้ดูแลถูกใจ</Badge>}
+        <HeartIcon data-icon="inline-start" className={cn(optimistic.hearted && "text-destructive")} fill={optimistic.hearted ? "currentColor" : "none"} />{optimistic.hearted ? t("ผู้ดูแลถูกใจ", "Liked by admin") : null}</Button>
+        : optimistic.hearted && !item.deleted && !item.hidden && <Badge variant="secondary"><HeartIcon data-icon="inline-start" className="text-destructive" fill="currentColor" />{t("ผู้ดูแลถูกใจ", "Liked by admin")}</Badge>}
 
     </div>
     </>}
     {mode === "reply" && <CommentComposer key="reply" target={item.target} replyTo={item}
       onCancel={() => setMode(null)} onSaved={() => { setMode(null); expandReplies(true); onChange(); }} />}
     {replies && !item.rootId && (item.replyCount > 0 || expanded) && <Accordion value={expanded ? ["replies"] : []} onValueChange={(value) => expandReplies(value.includes("replies"))}>
-      <AccordionItem value="replies"><AccordionTrigger ref={replyToggleRef} className="flex-none gap-2 rounded-full px-3" headerClassName={expanded ? "hidden" : "justify-start"}>{`การตอบกลับ ${item.replyCount.toLocaleString("th-TH")} รายการ`}</AccordionTrigger>
+      <AccordionItem value="replies"><AccordionTrigger ref={replyToggleRef} className="flex-none gap-2 rounded-full px-3" headerClassName={expanded ? "hidden" : "justify-start"}>{t(`การตอบกลับ ${item.replyCount.toLocaleString("th-TH")} รายการ`, `${item.replyCount.toLocaleString("en-US")} replies`)}</AccordionTrigger>
         <AccordionContent keepMounted panelClassName="data-open:overflow-visible" className="[&_p]:mb-0">{hasOpenedReplies && <div className="flex flex-col gap-3">
           <CommentReplies rootId={item.id} focusReplyId={focusReplyId} viewer={viewer} onChange={onChange} revision={revision} moderationDetails={inbox || moderationDetails} inbox={inbox} />
           <div className={cn("relative self-start before:absolute before:-left-8 before:top-0 before:h-5 before:w-8 before:rounded-bl-2xl before:border-b before:border-l before:border-border", fullWidthMobile && "max-md:before:hidden")}>
@@ -272,20 +278,21 @@ export function CommentCard({ item, viewer, onChange, revision = 0, inbox = fals
     {inbox && <TableCell className="px-0 py-5 align-top whitespace-normal max-md:block max-md:pt-0">
       <div className="flex items-start gap-2 md:justify-end">{optionsMenu}{overview}</div>
     </TableCell>}
-    <Dialog open={history} onOpenChange={setHistory}><DialogContent className="sm:max-w-2xl"><DialogHeader><DialogTitle>ประวัติการแก้ไข</DialogTitle><DialogDescription>ดูข้อความและรูปภาพในแต่ละเวอร์ชันของความคิดเห็น</DialogDescription></DialogHeader>
+    <Dialog open={history} onOpenChange={setHistory}><DialogContent className="sm:max-w-2xl"><DialogHeader><DialogTitle>{t("ประวัติการแก้ไข", "Revision history")}</DialogTitle><DialogDescription>{t("ดูข้อความและรูปภาพในแต่ละเวอร์ชันของความคิดเห็น", "View the text and images in each revision of this comment")}</DialogDescription></DialogHeader>
       {history && <RevisionHistory id={item.id} />}</DialogContent></Dialog>
-    <Dialog open={deleting} onOpenChange={setDeleting}><DialogContent><DialogHeader><DialogTitle>ลบความคิดเห็นนี้?</DialogTitle><DialogDescription>ความคิดเห็นนี้ คำตอบกลับทุกระดับ ประวัติการแก้ไข และรูปภาพจะถูกลบอย่างถาวร ไม่สามารถกู้คืนได้</DialogDescription></DialogHeader>
-      <div className="flex justify-end gap-2"><Button variant="ghost" disabled={pending} onClick={() => setDeleting(false)}>ยกเลิก</Button><Button variant="destructive" disabled={pending} onClick={() => void mutate("delete")}>ลบ</Button></div>
+    <Dialog open={deleting} onOpenChange={setDeleting}><DialogContent><DialogHeader><DialogTitle>{t("ลบความคิดเห็นนี้?", "Delete this comment?")}</DialogTitle><DialogDescription>{t("ความคิดเห็นนี้ คำตอบกลับทุกระดับ ประวัติการแก้ไข และรูปภาพจะถูกลบอย่างถาวร ไม่สามารถกู้คืนได้", "This comment, all replies, revision history, and images will be permanently deleted. This cannot be undone.")}</DialogDescription></DialogHeader>
+      <div className="flex justify-end gap-2"><Button variant="ghost" disabled={pending} onClick={() => setDeleting(false)}>{t("ยกเลิก", "Cancel")}</Button><Button variant="destructive" disabled={pending} onClick={() => void mutate("delete")}>{t("ลบ", "Delete")}</Button></div>
     </DialogContent></Dialog>
     <AlertDialog open={banning} onOpenChange={(open) => { if (!pending) setBanning(open); }}><AlertDialogContent>
-      <AlertDialogHeader><AlertDialogTitle>แบน {item.authorName}?</AlertDialogTitle><AlertDialogDescription>ผู้เขียนจะถูกออกจากระบบและไม่สามารถเข้าสู่ระบบ แสดงความคิดเห็น หรือใช้งานบัญชีได้ จนกว่าผู้ดูแลจะยกเลิกแบน ความคิดเห็นเดิมจะยังอยู่</AlertDialogDescription></AlertDialogHeader>
-      <AlertDialogFooter><AlertDialogCancel className="max-md:min-h-11" disabled={pending}>ยกเลิก</AlertDialogCancel><AlertDialogAction variant="destructive" className="max-md:min-h-11" disabled={pending} onClick={() => void mutate("ban", true)}><BanIcon data-icon="inline-start" />แบนผู้เขียน</AlertDialogAction></AlertDialogFooter>
+      <AlertDialogHeader><AlertDialogTitle>{t("แบน", "Ban")} {item.authorName}?</AlertDialogTitle><AlertDialogDescription>{t("ผู้เขียนจะถูกออกจากระบบและไม่สามารถเข้าสู่ระบบ แสดงความคิดเห็น หรือใช้งานบัญชีได้ จนกว่าผู้ดูแลจะยกเลิกแบน ความคิดเห็นเดิมจะยังอยู่", "The author will be signed out and unable to sign in, comment, or use their account until an admin lifts the ban. Existing comments will remain.")}</AlertDialogDescription></AlertDialogHeader>
+      <AlertDialogFooter><AlertDialogCancel className="max-md:min-h-11" disabled={pending}>{t("ยกเลิก", "Cancel")}</AlertDialogCancel><AlertDialogAction variant="destructive" className="max-md:min-h-11" disabled={pending} onClick={() => void mutate("ban", true)}><BanIcon data-icon="inline-start" />{t("แบนผู้เขียน", "Ban author")}</AlertDialogAction></AlertDialogFooter>
     </AlertDialogContent></AlertDialog>
 
   </Container>;
 }
 
 function CommentReplies({ rootId, revision, onChange, focusReplyId, moderationDetails = false, inbox = false }: { focusReplyId?: string; rootId: string; viewer: CommentViewer | null; revision: number; onChange: () => void | Promise<unknown>; moderationDetails?: boolean; inbox?: boolean }) {
+  const { t } = useCommentLocale();
   const feed = useCommentFeed(`/api/comments/${rootId}/replies?view=thread`);
   const { refresh, busy, error, page, more } = feed;
   const previousRevision = useRef(revision);
@@ -308,8 +315,8 @@ function CommentReplies({ rootId, revision, onChange, focusReplyId, moderationDe
     {feed.error && <Alert variant="destructive"><AlertDescription>{feed.error}</AlertDescription></Alert>}
     <CommentReplyTree focusReplyId={focusReplyId} items={feed.page.items} viewer={feed.page.viewer} moderationDetails={moderationDetails} inbox={inbox} onChange={async () => { await refresh({ silent: true }); await onChange(); }} />
     {feed.busy && <CommentSkeleton count={2} />}
-    {feed.page.nextCursor && <Button variant="outline" disabled={feed.busy} onClick={() => void feed.more()}>ดูคำตอบเพิ่มเติม</Button>}
-    {feed.error && <Button variant="outline" disabled={feed.busy} onClick={() => void refresh()}>ลองใหม่</Button>}
+    {feed.page.nextCursor && <Button variant="outline" disabled={feed.busy} onClick={() => void feed.more()}>{t("ดูคำตอบเพิ่มเติม", "Load more replies")}</Button>}
+    {feed.error && <Button variant="outline" disabled={feed.busy} onClick={() => void refresh()}>{t("ลองใหม่", "Try again")}</Button>}
   </div>;
 }
 
@@ -341,6 +348,7 @@ function CommentReplyTree({ items, viewer, onChange, focusReplyId, moderationDet
 }
 
 export function CommentThread({ rootId, expectedTarget, onChange, focusReplyId }: { focusReplyId?: string; rootId: string; expectedTarget: string; onChange: () => void | Promise<unknown> }) {
+  const { request: commentRequest, t } = useCommentLocale();
   const [data, setData] = useState<{ item: CommentItem; viewer: CommentViewer | null } | null>(null);
   const [error, setError] = useState("");
   const [revision, setRevision] = useState(0);
@@ -348,14 +356,14 @@ export function CommentThread({ rootId, expectedTarget, onChange, focusReplyId }
   const load = useCallback(async (forceReplies = false) => {
     try {
       const result = await commentRequest<{ item: CommentItem; viewer: CommentViewer | null }>(`/api/comments/${rootId}`);
-      if (result.item.target !== expectedTarget) throw new Error("การสนทนานี้เป็นของไกด์อื่น");
+      if (result.item.target !== expectedTarget) throw new Error(t("การสนทนานี้เป็นของไกด์อื่น", "This thread belongs to another guide"));
       const payload = JSON.stringify(result);
       if (lastThread.current !== payload) {
         lastThread.current = payload; setData(result); setRevision((value) => value + 1);
       } else if (forceReplies) setRevision((value) => value + 1);
       setError("");
-    } catch (cause) { lastThread.current = ""; setData(null); setError(cause instanceof Error ? cause.message : "ไม่สามารถโหลดการสนทนาได้"); }
-  }, [rootId, expectedTarget]);
+    } catch (cause) { lastThread.current = ""; setData(null); setError(cause instanceof Error ? cause.message : t("ไม่สามารถโหลดการสนทนาได้", "Could not load this thread")); }
+  }, [rootId, expectedTarget, commentRequest, t]);
   useCommentEvents({ target: expectedTarget }, load);
   useEffect(() => {
     void Promise.resolve().then(() => load());
@@ -365,6 +373,6 @@ export function CommentThread({ rootId, expectedTarget, onChange, focusReplyId }
     {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
     {data && <CommentCard item={data.item} viewer={data.viewer} moderationDetails={Boolean(data.viewer?.admin)} defaultExpanded focusReplyId={focusReplyId} revision={revision} onChange={async () => { await load(true); await onChange(); }} />}
     {!data && !error && <CommentThreadSkeleton />}
-    {error && <Button variant="outline" onClick={() => void load()}>ลองใหม่</Button>}
+    {error && <Button variant="outline" onClick={() => void load()}>{t("ลองใหม่", "Try again")}</Button>}
   </div>;
 }
diff --git a/components/comments/comment-composer.tsx b/components/comments/comment-composer.tsx
index 7c9d28b..12d1aee 100644
--- a/components/comments/comment-composer.tsx
+++ b/components/comments/comment-composer.tsx
@@ -1,7 +1,10 @@
 "use client";
 
+import { useCommentLocale } from "./comment-locale";
+
 import { useEffect, useId, useRef, useState, type ClipboardEvent, type ComponentProps, type FormEvent } from "react";
 import dynamic from "next/dynamic";
+import Image from "@/components/ui/resilient-image";
 import { ImagePlusIcon, SmilePlusIcon, XIcon } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -13,7 +16,7 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "@/components/ui/popover";
 import type { CommentImage, CommentItem } from "@/lib/comments/types";
 import { CommentImageView } from "./comment-image";
-import { COMMENT_ERRORS } from "./client";
+import { getCommentErrors } from "./client";
 
 const EmojiPicker = dynamic(async () => {
   const { default: Picker, EmojiStyle } = await import("emoji-picker-react");
@@ -29,14 +32,14 @@ function FilePreview({ file }: { file: File }) {
     if (imageRef.current) imageRef.current.src = url;
     return () => URL.revokeObjectURL(url);
   }, [file]);
-  // Local blob previews and S3 CDN URLs must not use the image proxy.
-  // eslint-disable-next-line @next/next/no-img-element
-  return <img ref={imageRef} alt={file.name} className="size-24 rounded-lg object-cover" />;
+  return <Image ref={imageRef} src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E" alt={file.name} width={96} height={96} unoptimized className="size-24 rounded-lg object-cover" />;
 }
 
 export function CommentComposer({ target, replyTo, editing, onSaved, onCancel }: {
   target: string; replyTo?: CommentItem; editing?: CommentItem; onSaved: () => void; onCancel?: () => void;
 }) {
+  const { t, locale } = useCommentLocale();
+  const commentErrors = getCommentErrors(locale);
   const id = useId();
   const [text, setText] = useState(editing?.text ?? "");
   const [kept, setKept] = useState<CommentImage[]>(editing?.images ?? []);
@@ -58,7 +61,7 @@ export function CommentComposer({ target, replyTo, editing, onSaved, onCancel }:
     const start = textRef.current?.selectionStart ?? text.length;
     const end = textRef.current?.selectionEnd ?? start;
     const next = text.slice(0, start) + emoji + text.slice(end);
-    if (next.length > 4000) return setError("ความคิดเห็นต้องไม่เกิน 4,000 ตัวอักษร");
+    if (next.length > 4000) return setError(t("ความคิดเห็นต้องไม่เกิน 4,000 ตัวอักษร", "Comments must not exceed 4,000 characters"));
     setText(next);
     setExpanded(true);
     setEmojiOpen(false);
@@ -69,10 +72,10 @@ export function CommentComposer({ target, replyTo, editing, onSaved, onCancel }:
   }
 
   function addImages(incoming: File[]) {
-    if (incoming.length + files.length + kept.length > 5) return setError("แนบรูปภาพได้สูงสุด 5 รูปต่อความคิดเห็น");
+    if (incoming.length + files.length + kept.length > 5) return setError(t("แนบรูปภาพได้สูงสุด 5 รูปต่อความคิดเห็น", "Attach up to 5 images per comment"));
     if (incoming.some((file) => !["image/jpeg", "image/png", "image/webp"].includes(file.type)))
-      return setError(COMMENT_ERRORS["unsupported-image-type"]);
-    if (incoming.some((file) => !file.size || file.size > 10 * 1024 * 1024)) return setError(COMMENT_ERRORS["image-too-large"]);
+      return setError(commentErrors["unsupported-image-type"]);
+    if (incoming.some((file) => !file.size || file.size > 10 * 1024 * 1024)) return setError(commentErrors["image-too-large"]);
     setFiles((current) => [...current, ...incoming]);
     setError("");
   }
@@ -96,7 +99,7 @@ export function CommentComposer({ target, replyTo, editing, onSaved, onCancel }:
   async function submit(event: FormEvent) {
     event.preventDefault();
     if (pending) return;
-    if (!text.trim() && !files.length && !kept.length) return setError(COMMENT_ERRORS["empty-comment"]);
+    if (!text.trim() && !files.length && !kept.length) return setError(commentErrors["empty-comment"]);
     setPending(true);
     setError("");
     setProgress(0);
@@ -114,25 +117,25 @@ export function CommentComposer({ target, replyTo, editing, onSaved, onCancel }:
         xhr.upload.onprogress = (event) => { if (event.lengthComputable) setProgress(Math.round(event.loaded / event.total * 100)); };
         xhr.onload = () => {
           if (xhr.status >= 200 && xhr.status < 300) return resolve();
-          let message = "ไม่สามารถบันทึกความคิดเห็นได้ กรุณาลองใหม่";
-          try { message = COMMENT_ERRORS[JSON.parse(xhr.responseText).error] ?? message; } catch { /* Keep the draft if the server returned a non-JSON error. */ }
+          let message = t("ไม่สามารถบันทึกความคิดเห็นได้ กรุณาลองใหม่", "Could not save your comment. Please try again.");
+          try { message = commentErrors[JSON.parse(xhr.responseText).error] ?? message; } catch { /* Keep the draft if the server returned a non-JSON error. */ }
           reject(new Error(message));
         };
-        xhr.onerror = () => reject(new Error("การเชื่อมต่อขัดข้อง ข้อความร่างของคุณยังอยู่"));
-        xhr.onabort = () => reject(new Error("ยกเลิกการอัปโหลดแล้ว"));
+        xhr.onerror = () => reject(new Error(t("การเชื่อมต่อขัดข้อง ข้อความร่างของคุณยังอยู่", "Connection failed. Your draft has been kept.")));
+        xhr.onabort = () => reject(new Error(t("ยกเลิกการอัปโหลดแล้ว", "Upload cancelled")));
         xhr.send(form);
       });
       setText(""); setFiles([]); setKept([]); setExpanded(false);
-      toast.success(editing ? "แก้ไขความคิดเห็นแล้ว" : "ส่งความคิดเห็นแล้ว");
+      toast.success(editing ? t("แก้ไขความคิดเห็นแล้ว", "Comment updated") : t("ส่งความคิดเห็นแล้ว", "Comment posted"));
       onSaved();
-    } catch (cause) { setError(cause instanceof Error ? cause.message : "ไม่สามารถบันทึกความคิดเห็นได้"); }
+    } catch (cause) { setError(cause instanceof Error ? cause.message : t("ไม่สามารถบันทึกความคิดเห็นได้", "Could not save your comment")); }
     finally { setPending(false); uploadRef.current = null; }
   }
 
   return <form onSubmit={submit} className="flex flex-col gap-3">
     <FieldGroup>
       <Field data-invalid={Boolean(error)}>
-        <FieldLabel htmlFor={`${id}-text`} className="sr-only">{editing ? "แก้ไขความคิดเห็น" : replyTo ? `ตอบกลับ ${replyTo.authorName}` : "เพิ่มความคิดเห็น"}</FieldLabel>
+        <FieldLabel htmlFor={`${id}-text`} className="sr-only">{editing ? t("แก้ไขความคิดเห็น", "Edit comment") : replyTo ? t(`ตอบกลับ ${replyTo.authorName}`, `Reply to ${replyTo.authorName}`) : t("เพิ่มความคิดเห็น", "Add a comment")}</FieldLabel>
         <Textarea ref={textRef} id={`${id}-text`} value={text} onChange={(event) => setText(event.target.value)} maxLength={4000} rows={expanded ? 2 : 1} onFocus={() => setExpanded(true)} onPaste={pasteImages}
           onKeyDown={(event) => {
             if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229) {
@@ -141,39 +144,39 @@ export function CommentComposer({ target, replyTo, editing, onSaved, onCancel }:
             }
           }}
           className="min-h-10 resize-none rounded-none border-x-0 border-t-0 px-0 focus-visible:ring-0"
-          disabled={pending} aria-invalid={Boolean(error)} placeholder="เพิ่มความคิดเห็น…" />
-        {expanded && <FieldDescription>{text.length.toLocaleString("th-TH")} / 4,000</FieldDescription>}
+          disabled={pending} aria-invalid={Boolean(error)} placeholder={t("เพิ่มความคิดเห็น…", "Add a comment…")} />
+        {expanded && <FieldDescription>{text.length.toLocaleString(locale === "en" ? "en-US" : "th-TH")} / 4,000</FieldDescription>}
       </Field>
       <Field className="hidden">
-        <FieldLabel htmlFor={`${id}-images`} className="sr-only">แนบรูปภาพ</FieldLabel>
+        <FieldLabel htmlFor={`${id}-images`} className="sr-only">{t("แนบรูปภาพ", "Attach images")}</FieldLabel>
         <Input ref={fileRef} id={`${id}-images`} type="file" tabIndex={-1} multiple accept="image/jpeg,image/png,image/webp" className="hidden" disabled={pending}
           onChange={(event) => { addImages(Array.from(event.target.files ?? [])); event.target.value = ""; }} />
       </Field>
     </FieldGroup>
     {(files.length > 0 || kept.length > 0) && <div className="flex flex-wrap gap-3">
       {kept.map((image) => <div key={image.id} className="flex flex-col gap-1">
-        <CommentImageView image={image} alt="รูปภาพที่แนบ" className="size-24 rounded-lg object-cover" />
-        <Button type="button" variant="ghost" size="sm" disabled={pending} onClick={() => setKept((current) => current.filter((entry) => entry.id !== image.id))}><XIcon data-icon="inline-start" />นำออก</Button>
+        <CommentImageView image={image} alt={t("รูปภาพที่แนบ", "Attached image")} className="size-24 rounded-lg object-cover" />
+        <Button type="button" variant="ghost" size="sm" disabled={pending} onClick={() => setKept((current) => current.filter((entry) => entry.id !== image.id))}><XIcon data-icon="inline-start" />{t("นำออก", "Remove")}</Button>
       </div>)}
       {files.map((file, index) => <div key={`${file.name}-${index}`} className="flex flex-col gap-1"><FilePreview file={file} />
-        <Button type="button" variant="ghost" size="sm" disabled={pending} onClick={() => setFiles((current) => current.filter((_, position) => position !== index))}><XIcon data-icon="inline-start" />นำออก</Button>
+        <Button type="button" variant="ghost" size="sm" disabled={pending} onClick={() => setFiles((current) => current.filter((_, position) => position !== index))}><XIcon data-icon="inline-start" />{t("นำออก", "Remove")}</Button>
       </div>)}
     </div>}
     {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
-    {pending && <Progress value={progress}><ProgressLabel>{progress === 100 ? "กำลังบันทึกความคิดเห็น…" : "กำลังอัปโหลด…"}</ProgressLabel><ProgressValue /></Progress>}
+    {pending && <Progress value={progress}><ProgressLabel>{progress === 100 ? t("กำลังบันทึกความคิดเห็น…", "Saving comment…") : t("กำลังอัปโหลด…", "Uploading…")}</ProgressLabel><ProgressValue /></Progress>}
     <div className="flex flex-wrap items-center justify-end gap-2">
       <div className="mr-auto flex items-center gap-1">
-        <Button type="button" variant="ghost" className="rounded-full" aria-label="แนบรูปภาพ" disabled={pending || files.length + kept.length >= 5} onClick={() => fileRef.current?.click()}><ImagePlusIcon data-icon="inline-start" /><span className="hidden sm:inline">รูปภาพ</span></Button>
+        <Button type="button" variant="ghost" className="rounded-full" aria-label={t("แนบรูปภาพ", "Attach images")} disabled={pending || files.length + kept.length >= 5} onClick={() => fileRef.current?.click()}><ImagePlusIcon data-icon="inline-start" /><span className="hidden sm:inline">{t("รูปภาพ", "Images")}</span></Button>
         <Popover open={emojiOpen} onOpenChange={setEmojiOpen}>
-          <PopoverTrigger render={<Button type="button" variant="ghost" size="icon" className="rounded-full" aria-label="เพิ่มอีโมจิ" disabled={pending} />}><SmilePlusIcon /></PopoverTrigger>
+          <PopoverTrigger render={<Button type="button" variant="ghost" size="icon" className="rounded-full" aria-label={t("เพิ่มอีโมจิ", "Add emoji")} disabled={pending} />}><SmilePlusIcon /></PopoverTrigger>
           <PopoverContent align="start" className="w-80 max-w-[calc(100vw-2rem)] p-0" finalFocus={textRef}>
-            <PopoverTitle className="sr-only">เลือกอีโมจิ</PopoverTitle>
+            <PopoverTitle className="sr-only">{t("เลือกอีโมจิ", "Choose an emoji")}</PopoverTitle>
             {emojiOpen && <EmojiPicker width="100%" height={350} lazyLoadEmojis onEmojiClick={(value) => insertEmoji(value.emoji)} />}
           </PopoverContent>
         </Popover>
       </div>
-      {expanded && <Button type="button" variant="ghost" disabled={pending} onClick={cancel}>ยกเลิก</Button>}
-      <Button type="submit" disabled={pending || (!text.trim() && !files.length && !kept.length)}>{pending ? "กำลังบันทึก…" : editing ? "บันทึกการแก้ไข" : replyTo ? "ตอบกลับ" : "แสดงความคิดเห็น"}</Button>
+      {expanded && <Button type="button" variant="ghost" disabled={pending} onClick={cancel}>{t("ยกเลิก", "Cancel")}</Button>}
+      <Button type="submit" disabled={pending || (!text.trim() && !files.length && !kept.length)}>{pending ? t("กำลังบันทึก…", "Saving…") : editing ? t("บันทึกการแก้ไข", "Save changes") : replyTo ? t("ตอบกลับ", "Reply") : t("แสดงความคิดเห็น", "Post comment")}</Button>
     </div>
   </form>;
 }
diff --git a/components/comments/comment-image.tsx b/components/comments/comment-image.tsx
index 1bf566d..989d99d 100644
--- a/components/comments/comment-image.tsx
+++ b/components/comments/comment-image.tsx
@@ -1,9 +1,14 @@
 "use client";
 
+import Image from "@/components/ui/resilient-image";
 import type { CommentImage } from "@/lib/comments/types";
+import { cn } from "@/lib/utils";
 
-export function CommentImageView({ image, alt, className }: { image: CommentImage; alt: string; className?: string }) {
-  // Comment attachments load directly from the configured S3 public CDN.
-  // eslint-disable-next-line @next/next/no-img-element
-  return <img src={image.url} alt={alt} loading="lazy" className={className} />;
+export function CommentImageView({ image, alt, className, fullSize = false }: {
+  image: CommentImage; alt: string; className?: string; fullSize?: boolean;
+}) {
+  if (fullSize) return <div className="relative h-[65svh] w-full">
+    <Image src={image.url} alt={alt} fill sizes="(min-width: 1024px) 960px, 100vw" className={cn("object-contain", className)} />
+  </div>;
+  return <Image src={image.url} alt={alt} width={144} height={144} sizes="(min-width: 640px) 144px, 112px" className={className} />;
 }
diff --git a/components/comments/comment-locale.test.tsx b/components/comments/comment-locale.test.tsx
new file mode 100644
index 0000000..ec413b5
--- /dev/null
+++ b/components/comments/comment-locale.test.tsx
@@ -0,0 +1,47 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import { CommentLocaleProvider } from "./comment-locale";
+import { CommentBoard } from "./comment-board";
+import { CommentComposer } from "./comment-composer";
+import { AdminCommentInbox } from "./admin-comment-inbox";
+import type { CommentItem } from "@/lib/comments/types";
+
+vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }) }));
+
+const viewer = { id: "admin", admin: true, name: "Admin" };
+const comment: CommentItem = {
+  id: "test", rootId: null, replyToId: null, replyToName: null,
+  authorName: "Author", authorImage: null, authorAdmin: false,
+  text: "ข้อความของผู้ใช้", images: [], version: 2,
+  createdAt: "2026-10-08T12:00:00Z", editedAt: "2026-10-08T12:00:00Z",
+  hidden: false, ownHidden: false, deleted: false, hearted: false,
+  likes: 0, reaction: 0, replyCount: 0, hasReplies: false,
+  canEdit: true, canInteract: true, canModerate: true,
+  target: "guide:test", targetName: "Test", targetImage: null, href: "/test/comment",
+};
+
+describe("comment UI language boundaries", () => {
+  it("keeps the public board in Thai", () => {
+    const html = renderToStaticMarkup(<CommentBoard target="guide:test" initial={{ items: [], nextCursor: null, viewer }} />);
+    expect(html).toContain("ความคิดเห็น");
+    expect(html).toContain("เพิ่มความคิดเห็น…");
+  });
+
+  it("renders the admin inbox filters and empty state in English", () => {
+    const html = renderToStaticMarkup(<CommentLocaleProvider locale="en">
+      <AdminCommentInbox initial={{ items: [], nextCursor: null, viewer }} targets={[]} />
+    </CommentLocaleProvider>);
+    expect(html).toContain("Admin replies");
+    expect(html).toContain("No matching comments");
+    expect(html).not.toMatch(/[\u0e00-\u0e7f]/);
+  });
+
+  it("localizes nested editing controls while preserving the draft", () => {
+    const html = renderToStaticMarkup(<CommentLocaleProvider locale="en">
+      <CommentComposer target="guide:test" editing={comment} onSaved={() => {}} />
+    </CommentLocaleProvider>);
+    expect(html).toContain("Save changes");
+    expect(html).toContain("Attach images");
+    expect(html).toContain(comment.text);
+  });
+});
diff --git a/components/comments/comment-locale.tsx b/components/comments/comment-locale.tsx
new file mode 100644
index 0000000..868864e
--- /dev/null
+++ b/components/comments/comment-locale.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { createContext, useCallback, useContext, type ReactNode } from "react";
+import { commentRequest, type CommentLocale } from "./client";
+
+const LocaleContext = createContext<CommentLocale>("th");
+
+export function CommentLocaleProvider({ locale, children }: { locale: CommentLocale; children: ReactNode }) {
+  return <LocaleContext value={locale}>{children}</LocaleContext>;
+}
+
+export function useCommentLocale() {
+  const locale = useContext(LocaleContext);
+  const t = useCallback((thai: string, english: string) => locale === "en" ? english : thai, [locale]);
+  const request = useCallback(<T,>(url: string, options?: RequestInit) => commentRequest<T>(url, options, locale), [locale]);
+  return { locale, t, request };
+}
diff --git a/components/comments/comment-skeleton.tsx b/components/comments/comment-skeleton.tsx
index e8af740..8e6c464 100644
--- a/components/comments/comment-skeleton.tsx
+++ b/components/comments/comment-skeleton.tsx
@@ -1,9 +1,13 @@
+"use client";
+
+import { useCommentLocale } from "./comment-locale";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 
 export function AdminCommentRowsSkeleton({ count = 3 }: { count?: number }) {
-  return <div role="status" aria-label="กำลังโหลดความคิดเห็น" className="flex min-w-0 flex-col">
-    <span className="sr-only">กำลังโหลดความคิดเห็น…</span>
+  const { t } = useCommentLocale();
+  return <div role="status" aria-label={t("กำลังโหลดความคิดเห็น", "Loading comments")} className="flex min-w-0 flex-col">
+    <span className="sr-only">{t("กำลังโหลดความคิดเห็น…", "Loading comments…")}</span>
     <Table className="table-fixed max-md:block" aria-hidden="true">
       <TableBody className="max-md:block">{Array.from({ length: count }, (_, index) => <TableRow key={index} className="max-md:block">
         <TableCell className="px-0 py-5 align-top whitespace-normal max-md:block max-md:pb-3 md:pr-6">
@@ -36,8 +40,9 @@ export function AdminCommentInboxSkeleton() {
 }
 
 export function CommentSkeleton({ count = 3 }: { count?: number }) {
-  return <div role="status" aria-label="กำลังโหลดความคิดเห็น" className="flex flex-col gap-6">
-    <span className="sr-only">กำลังโหลดความคิดเห็น…</span>
+  const { t } = useCommentLocale();
+  return <div role="status" aria-label={t("กำลังโหลดความคิดเห็น", "Loading comments")} className="flex flex-col gap-6">
+    <span className="sr-only">{t("กำลังโหลดความคิดเห็น…", "Loading comments…")}</span>
     <div aria-hidden="true" className="flex flex-col gap-6">{Array.from({ length: count }, (_, index) =>
       <div key={index} className="flex gap-3">
         <Skeleton className="size-10 shrink-0 rounded-full" />
diff --git a/components/comments/use-comment-feed.ts b/components/comments/use-comment-feed.ts
index 70e2d61..e8ffef0 100644
--- a/components/comments/use-comment-feed.ts
+++ b/components/comments/use-comment-feed.ts
@@ -1,10 +1,12 @@
 "use client";
 
+import { useCommentLocale } from "./comment-locale";
+
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { CommentPage } from "@/lib/comments/types";
-import { commentRequest } from "./client";
 
 export function useCommentFeed(endpoint: string, initial?: CommentPage) {
+  const { request: commentRequest, t } = useCommentLocale();
   const [page, setPage] = useState<CommentPage>(initial ?? { items: [], nextCursor: null, viewer: null });
   const [dataEndpoint, setDataEndpoint] = useState(endpoint);
   const [busy, setBusy] = useState(!initial);
@@ -38,9 +40,9 @@ export function useCommentFeed(endpoint: string, initial?: CommentPage) {
         setDataEndpoint(endpoint); setError("");
       }
     } catch (cause) {
-      if (!controller.signal.aborted && sequence === generation.current) setError(cause instanceof Error ? cause.message : "ไม่สามารถโหลดความคิดเห็นได้");
+      if (!controller.signal.aborted && sequence === generation.current) setError(cause instanceof Error ? cause.message : t("ไม่สามารถโหลดความคิดเห็นได้", "Could not load comments"));
     } finally { if (sequence === generation.current) setBusy(false); }
-  }, [endpoint]);
+  }, [endpoint, commentRequest, t]);
   const more = useCallback(async () => {
     if (!page.nextCursor || busy) return;
     const sequence = ++generation.current;
@@ -54,9 +56,9 @@ export function useCommentFeed(endpoint: string, initial?: CommentPage) {
         loadedPages.current += 1;
         setError("");
       }
-    } catch (cause) { if (sequence === generation.current) setError(cause instanceof Error ? cause.message : "ไม่สามารถโหลดความคิดเห็นได้"); }
+    } catch (cause) { if (sequence === generation.current) setError(cause instanceof Error ? cause.message : t("ไม่สามารถโหลดความคิดเห็นได้", "Could not load comments")); }
     finally { if (sequence === generation.current) setBusy(false); }
-  }, [endpoint, page, busy]);
+  }, [endpoint, page, busy, commentRequest, t]);
   useEffect(() => {
     if (mountedEndpoint.current !== endpoint) {
       loadedPages.current = 1;
diff --git a/components/commission/mobile-slip-handoff.tsx b/components/commission/mobile-slip-handoff.tsx
index 35777ce..35d77fc 100644
--- a/components/commission/mobile-slip-handoff.tsx
+++ b/components/commission/mobile-slip-handoff.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Image from "@/components/ui/resilient-image";
+
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -82,8 +84,7 @@ export function MobileSlipHandoff({ checkoutId }: { checkoutId: string }) {
         </DialogHeader>
         {link && <div className="flex flex-col items-center gap-3">
           {!expired && <>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={link.qr} alt="QR สำหรับเปิดหน้าอัปโหลดสลิปบนมือถือ" width={240} height={240} />
+                  <Image unoptimized src={link.qr} alt="QR สำหรับเปิดหน้าอัปโหลดสลิปบนมือถือ" width={240} height={240} />
             <p className="text-center text-sm text-muted-foreground">เวลาที่เหลือ {timeLeft}</p>
           </>}
           {expired && <p className="text-center text-sm text-muted-foreground">ลิงก์หมดอายุแล้ว ปิดหน้าต่างนี้แล้วกดใช้มือถืออีกเครื่องอัปโหลดอีกครั้ง</p>}
diff --git a/components/commission/payment-form.tsx b/components/commission/payment-form.tsx
index 74368e6..77fb84a 100644
--- a/components/commission/payment-form.tsx
+++ b/components/commission/payment-form.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Image from "@/components/ui/resilient-image";
+
 import { useEffect, useState, type FormEvent } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
@@ -51,8 +53,7 @@ export function CommissionPaymentForm({ checkoutId, amountBaht, qr, expiresAt, s
   return <><Card><CardHeader><CardTitle>สแกน PromptPay</CardTitle></CardHeader>
     <CardContent className="flex flex-col items-center gap-4">
       {/* Generated locally from the fixed checkout amount and configured recipient. */}
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img src={qr} alt={`PromptPay QR สำหรับชำระเงิน ${amountBaht} บาท`} width={300} height={300} />
+      <Image unoptimized src={qr} alt={`PromptPay QR สำหรับชำระเงิน ${amountBaht} บาท`} width={300} height={300} />
       <Button nativeButton={false} render={<a href={qr} download="promptpay-qr.png" />}>บันทึก QR สำหรับชำระเงิน</Button>
       <strong>฿{amountBaht}</strong>
       <p className="text-center text-sm text-muted-foreground">ใช้มือถือเครื่องนี้ชำระเงิน: บันทึก QR แล้วเลือกรูปในแอปธนาคาร</p>
diff --git a/components/commission/slip-dialog.tsx b/components/commission/slip-dialog.tsx
index b7748fd..772087f 100644
--- a/components/commission/slip-dialog.tsx
+++ b/components/commission/slip-dialog.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Image from "@/components/ui/resilient-image";
+
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
@@ -16,8 +18,7 @@ export function CommissionSlipDialog({ src }: { src: string }) {
       <DialogTitle>สลิปการชำระเงิน</DialogTitle>
       {imageState === "loading" && <Skeleton className="h-80 w-full" aria-label="กำลังโหลดสลิป" />}
       {imageState === "error" && <p className="text-sm text-destructive">โหลดสลิปไม่สำเร็จ</p>}
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img src={src} alt="สลิปการชำระเงิน"
+      <Image unoptimized width={1200} height={1600} style={{ height: "auto" }} src={src} alt="สลิปการชำระเงิน"
         onLoad={() => setImageState("loaded")} onError={() => setImageState("error")}
         className={imageState === "loaded" ? "max-h-[calc(90svh-7rem)] w-full object-contain" : "hidden"} />
     </DialogContent>
diff --git a/components/commission/ticket-chat.tsx b/components/commission/ticket-chat.tsx
index d9cb341..3c7af86 100644
--- a/components/commission/ticket-chat.tsx
+++ b/components/commission/ticket-chat.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Image from "@/components/ui/resilient-image";
+
 import {
   useEffect,
   useRef,
@@ -116,9 +118,9 @@ function ReactionEmoji({ emoji }: { emoji: string }) {
   ).join("-");
   if (failed) return <span aria-hidden="true">{emoji}</span>;
   // CDN images are already 64 px assets displayed at 16 px.
-  // eslint-disable-next-line @next/next/no-img-element
   return (
-    <img
+    <Image
+      unoptimized
       src={`https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/${unified}.png`}
       alt=""
       width={16}
@@ -173,9 +175,12 @@ function CommissionMessageImage({ src, compact = false }: { src: string; compact
           <span className={cn("block px-4 py-2.5 text-xs", compact &&
             "absolute inset-0 flex items-center justify-center p-1 text-center")}>โหลดรูปภาพไม่สำเร็จ</span>
         )}
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
+        <Image
           ref={imageRef}
+          unoptimized
+          width={1024}
+          height={768}
+          style={compact ? undefined : { width: "auto", height: "auto" }}
           src={src}
           alt="รูปภาพที่แนบในข้อความ"
           onLoad={() => setState("loaded")}
@@ -188,8 +193,11 @@ function CommissionMessageImage({ src, compact = false }: { src: string; compact
       </DialogTrigger>
       <DialogContent className="w-fit max-h-[90svh] max-w-[calc(100%-2rem)] p-2 sm:max-w-[calc(100%-2rem)]">
         <DialogTitle className="sr-only">รูปภาพที่แนบในข้อความ</DialogTitle>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
+        <Image
+          unoptimized
+          width={1600}
+          height={1200}
+          style={{ width: "auto", height: "auto" }}
           src={src}
           alt="รูปภาพที่แนบในข้อความขนาดใหญ่"
           className="max-h-[calc(90svh-1rem)] max-w-full object-contain"
@@ -1067,8 +1075,7 @@ export function CommissionTicketChat({
                     <div className="grid max-w-md grid-cols-5 gap-1.5" aria-label={`รูปภาพที่แนบ ${images.length} รูป`}>
                       {imagePreviews.map((preview, index) => (
                         <div key={preview} className="relative aspect-square overflow-hidden rounded-md bg-muted">
-                          {/* eslint-disable-next-line @next/next/no-img-element */}
-                          <img src={preview} alt={`ตัวอย่างรูปภาพที่แนบ ${index + 1}`}
+                          <Image unoptimized fill src={preview} alt={`ตัวอย่างรูปภาพที่แนบ ${index + 1}`}
                             className="absolute inset-0 size-full object-cover" />
                           <Button type="button" variant="secondary" size="icon-xs"
                             aria-label={`นำรูปภาพที่ ${index + 1} ออก`}
diff --git a/components/public/guide-image-export.tsx b/components/public/guide-image-export.tsx
index 2cab71b..632d50b 100644
--- a/components/public/guide-image-export.tsx
+++ b/components/public/guide-image-export.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Image from "@/components/ui/resilient-image";
+
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { DownloadIcon } from "lucide-react";
@@ -316,8 +318,7 @@ export function GuideImageExport({
       >
         {previewUrl ? (
           // This is a temporary client-generated blob, not an optimizable remote asset.
-          // eslint-disable-next-line @next/next/no-img-element
-          <img src={previewUrl} alt="Preview image" className="size-full object-contain" />
+          <Image unoptimized width={width} height={height ?? width} src={previewUrl} alt="Preview image" className="size-full object-contain" />
         ) : previewing ? (
           <Spinner className="size-6" />
         ) : (
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index ba89e26..1455300 100644
--- a/components/public/structured-guide.tsx
+++ b/components/public/structured-guide.tsx
@@ -672,12 +672,10 @@ function ArtifactSectionContent({
           )}
           <div data-artifact-export-section="tierlist" className={exporting ? "order-first" : "lg:order-first"}>
             {(() => {
-              const TierList = exporting ? Fragment : Card;
               const TierGroup = exporting ? Card : Fragment;
               const tierCards = guide.artifactGroups.map((condition, conditionIndex) => (
               <div key={condition.id} data-tier-condition={conditionIndex} className="artifact-export-tierlist flex flex-col gap-5">
               {exporting && guide.artifactGroups.length > 1 ? <p className="text-sm font-medium">{condition.name || <ExportText th={`เงื่อนไข ${conditionIndex + 1}`} en={`Condition ${conditionIndex + 1}`} />}</p> : null}
-              <TierList>
               {condition.tiers.map((group, groupIndex) => <TierGroup key={group.id}>
                 {!exporting && groupIndex > 0 ? <Separator /> : null}
                 <CardHeader>
@@ -730,10 +728,9 @@ function ArtifactSectionContent({
                   ))}
                 </CardContent>
               </TierGroup>)}
-              </TierList>
               </div>
               ));
-              return exporting ? tierCards : <ConditionSwitcher label="เลือกเงื่อนไขอันดับอาร์ติแฟกต์" labels={guide.artifactGroups.map((condition, index) => condition.name || `เงื่อนไข ${index + 1}`)} iconUrls={guide.artifactGroups.map((condition) => condition.iconUrl)}>{tierCards}</ConditionSwitcher>;
+              return exporting ? tierCards : <Card><ConditionSwitcher label="เลือกเงื่อนไขอันดับอาร์ติแฟกต์" labels={guide.artifactGroups.map((condition, index) => condition.name || `เงื่อนไข ${index + 1}`)} iconUrls={guide.artifactGroups.map((condition) => condition.iconUrl)}>{tierCards}</ConditionSwitcher></Card>;
             })()}
         </div>
       </div>
diff --git a/components/public/stygian-guide.tsx b/components/public/stygian-guide.tsx
index 2d6c0a3..e26e9d1 100644
--- a/components/public/stygian-guide.tsx
+++ b/components/public/stygian-guide.tsx
@@ -12,13 +12,13 @@ import {
 } from "@/components/stygian/stygian-boss-display";
 import { elementIconFilter } from "@/lib/catalog/element";
 import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
-import type { getActiveCatalog } from "@/lib/guides/queries";
+import type { getCatalogOptions } from "@/lib/guides/queries";
 import { stygianBossPositionLabels, stygianBossPositions, stygianLevels } from "@/lib/stygian/constants";
 import type { getStygianSchedule } from "@/lib/stygian/repository";
 import { cn } from "@/lib/utils";
 
 type Schedule = NonNullable<Awaited<ReturnType<typeof getStygianSchedule>>>;
-type Catalog = NonNullable<Awaited<ReturnType<typeof getActiveCatalog>>>;
+type Catalog = NonNullable<Awaited<ReturnType<typeof getCatalogOptions>>>;
 type Item = Schedule["recommendations"][number]["items"][number];
 
 function recommendation(item: Item, catalog: Catalog) {
diff --git a/components/ui/resilient-image.tsx b/components/ui/resilient-image.tsx
index c38025c..b3b899d 100644
--- a/components/ui/resilient-image.tsx
+++ b/components/ui/resilient-image.tsx
@@ -1,11 +1,11 @@
 "use client";
 
 import NextImage, { type ImageProps } from "next/image";
-import { useState } from "react";
+import { useState, type Ref } from "react";
 
 const CDN_ORIGIN = "https://buzz-cdn.astrxl.dev";
 
-export default function ResilientImage({ src, unoptimized, onError, ...props }: ImageProps) {
+export default function ResilientImage({ src, unoptimized, onError, ...props }: ImageProps & { ref?: Ref<HTMLImageElement> }) {
   const [failedSource, setFailedSource] = useState<string | null>(null);
   const useOriginal = typeof src === "string" && failedSource === src;
 
diff --git a/lib/cache/catalog.ts b/lib/cache/catalog.ts
new file mode 100644
index 0000000..ab9a1ea
--- /dev/null
+++ b/lib/cache/catalog.ts
@@ -0,0 +1,20 @@
+import "server-only";
+
+import { cacheLife, cacheTag } from "next/cache";
+
+import { getActiveCatalog, getCatalogOptions } from "@/lib/guides/queries";
+import { CATALOG_CACHE_TAG, GLOSSARY_CACHE_TAG } from "./tags";
+
+export async function getCachedCatalogOptions() {
+  "use cache: remote";
+  cacheLife({ stale: 0, revalidate: 300, expire: 3600 });
+  cacheTag(CATALOG_CACHE_TAG, GLOSSARY_CACHE_TAG);
+  return getCatalogOptions();
+}
+
+export async function getCachedActiveCatalog() {
+  "use cache: remote";
+  cacheLife({ stale: 0, revalidate: 300, expire: 3600 });
+  cacheTag(CATALOG_CACHE_TAG, GLOSSARY_CACHE_TAG);
+  return getActiveCatalog();
+}
diff --git a/lib/cache/public.test.ts b/lib/cache/public.test.ts
new file mode 100644
index 0000000..1189a5c
--- /dev/null
+++ b/lib/cache/public.test.ts
@@ -0,0 +1,29 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({ tag: vi.fn(), guide: vi.fn(), summary: vi.fn() }));
+vi.mock("server-only", () => ({}));
+vi.mock("next/cache", () => ({ cacheTag: mocks.tag, cacheLife: vi.fn() }));
+vi.mock("@/lib/guides/queries", () => ({
+  getPublicGuide: mocks.guide, getPublicGuideSummary: mocks.summary, listPublicGuideCards: vi.fn(),
+}));
+import { getCachedPublicGuide, getCachedPublicGuideSummary } from "./public";
+
+beforeEach(() => vi.resetAllMocks());
+
+describe("public cache dependency boundaries", () => {
+  it.each([getCachedPublicGuide, getCachedPublicGuideSummary])("keeps existing guides independent of directory invalidations", async (read) => {
+    mocks.guide.mockResolvedValue({ id: "first" });
+    mocks.summary.mockResolvedValue({ id: "first" });
+    await read("first");
+    expect(mocks.tag).toHaveBeenCalledWith("buzz:page:first");
+    expect(mocks.tag).toHaveBeenCalledWith("buzz:catalog");
+    expect(mocks.tag).not.toHaveBeenCalledWith("buzz:directory");
+  });
+
+  it.each([getCachedPublicGuide, getCachedPublicGuideSummary])("refreshes missing guides when the directory changes", async (read) => {
+    mocks.guide.mockResolvedValue(null);
+    mocks.summary.mockResolvedValue(null);
+    expect(await read("missing")).toBeNull();
+    expect(mocks.tag).toHaveBeenCalledWith("buzz:directory");
+  });
+});
diff --git a/lib/cache/public.ts b/lib/cache/public.ts
index cb7e128..cb86bd0 100644
--- a/lib/cache/public.ts
+++ b/lib/cache/public.ts
@@ -4,6 +4,7 @@ import { cacheLife, cacheTag } from "next/cache";
 
 import { getPublicGuide, getPublicGuideSummary, listPublicGuideCards } from "@/lib/guides/queries";
 import {
+  CATALOG_CACHE_TAG,
   DIRECTORY_CACHE_TAG,
   GLOSSARY_CACHE_TAG,
   pageCacheTag,
@@ -11,6 +12,7 @@ import {
 
 export async function getCachedPublicGuideCards() {
   "use cache: remote";
+  cacheTag(CATALOG_CACHE_TAG);
   cacheLife({ stale: 30, revalidate: 60, expire: 60 * 60 });
   cacheTag(DIRECTORY_CACHE_TAG);
   cacheTag(GLOSSARY_CACHE_TAG);
@@ -19,19 +21,21 @@ export async function getCachedPublicGuideCards() {
 
 export async function getCachedPublicGuide(slug: string, section = "overview") {
   "use cache: remote";
+  cacheTag(CATALOG_CACHE_TAG);
   cacheLife({ stale: 15, revalidate: 60, expire: 60 * 60 });
   const result = await getPublicGuide(slug, section);
   cacheTag(GLOSSARY_CACHE_TAG);
-  cacheTag(DIRECTORY_CACHE_TAG);
   if (result) cacheTag(pageCacheTag(result.id));
+  else cacheTag(DIRECTORY_CACHE_TAG);
   return result;
 }
 
 export async function getCachedPublicGuideSummary(slug: string) {
   "use cache: remote";
+  cacheTag(CATALOG_CACHE_TAG);
   cacheLife({ stale: 15, revalidate: 60, expire: 60 * 60 });
-  cacheTag(DIRECTORY_CACHE_TAG);
   const result = await getPublicGuideSummary(slug);
   if (result) cacheTag(pageCacheTag(result.id));
+  else cacheTag(DIRECTORY_CACHE_TAG);
   return result;
 }
diff --git a/lib/cache/tags.test.ts b/lib/cache/tags.test.ts
index af8f9ec..e39ac66 100644
--- a/lib/cache/tags.test.ts
+++ b/lib/cache/tags.test.ts
@@ -2,6 +2,8 @@ import { describe, expect, it } from "vitest";
 
 import {
   cacheTagsForOutboxEvent,
+  CATALOG_CACHE_TAG,
+  GLOSSARY_CACHE_TAG,
   DIRECTORY_CACHE_TAG,
   STYGIAN_CACHE_TAG,
 } from "./tags";
@@ -11,6 +13,8 @@ describe("public cache tags", () => {
     expect(cacheTagsForOutboxEvent({ eventType: "directory.updated", aggregateId: "id" })).toEqual([DIRECTORY_CACHE_TAG]);
     expect(cacheTagsForOutboxEvent({ eventType: "page.updated", aggregateId: "page" })).toEqual(["buzz:page:page"]);
     expect(cacheTagsForOutboxEvent({ eventType: "stygian.updated", aggregateId: "5269001" })).toEqual([STYGIAN_CACHE_TAG]);
+    expect(cacheTagsForOutboxEvent({ eventType: "catalog.updated", aggregateId: "catalog" })).toEqual([CATALOG_CACHE_TAG, DIRECTORY_CACHE_TAG, STYGIAN_CACHE_TAG]);
+    expect(cacheTagsForOutboxEvent({ eventType: "glossary.updated", aggregateId: "alias" })).toEqual([GLOSSARY_CACHE_TAG]);
     expect(cacheTagsForOutboxEvent({ eventType: "admin.updated", aggregateId: "id" })).toEqual([]);
   });
 });
diff --git a/lib/cache/tags.ts b/lib/cache/tags.ts
index fb17839..52659b2 100644
--- a/lib/cache/tags.ts
+++ b/lib/cache/tags.ts
@@ -1,3 +1,4 @@
+export const CATALOG_CACHE_TAG = "buzz:catalog";
 export const DIRECTORY_CACHE_TAG = "buzz:directory";
 export const GLOSSARY_CACHE_TAG = "buzz:glossary";
 export const STYGIAN_CACHE_TAG = "buzz:stygian";
@@ -12,6 +13,8 @@ export type OutboxCacheEvent = {
 };
 
 export function cacheTagsForOutboxEvent(event: OutboxCacheEvent): string[] {
+  if (event.eventType === "catalog.updated") return [CATALOG_CACHE_TAG, DIRECTORY_CACHE_TAG, STYGIAN_CACHE_TAG];
+  if (event.eventType === "glossary.updated") return [GLOSSARY_CACHE_TAG];
   if (event.eventType === "directory.updated") return [DIRECTORY_CACHE_TAG];
   if (event.eventType === "page.updated") return [pageCacheTag(event.aggregateId)];
   if (event.eventType === "stygian.updated") return [STYGIAN_CACHE_TAG];
diff --git a/lib/catalog/sync.ts b/lib/catalog/sync.ts
index 7cb78b4..1efe42c 100644
--- a/lib/catalog/sync.ts
+++ b/lib/catalog/sync.ts
@@ -3,8 +3,12 @@ import { join } from "node:path";
 import { sql } from "drizzle-orm";
 import * as z from "zod";
 
+import { CATALOG_CACHE_TAG, DIRECTORY_CACHE_TAG, STYGIAN_CACHE_TAG } from "@/lib/cache/tags";
+import { createRedisOutboxTransport } from "@/lib/outbox/processor";
+
 import { getDb } from "@/db/client";
 import {
+  outboxEvents,
   catalogArtifacts,
   catalogCharacters,
   catalogMaterials,
@@ -644,7 +648,15 @@ async function syncCatalogVersion(version: string, control?: SyncControl): Promi
               imageKey: item.imageKey,
             })),
           );
+      const eventId = crypto.randomUUID();
+      await tx.insert(outboxEvents).values({
+        topic: "admin", aggregateId: eventId, eventType: "catalog.updated",
+        payload: { id: eventId, version: Date.now() },
+      });
     });
+    await createRedisOutboxTransport(await getRedisClient()).invalidate(
+      [CATALOG_CACHE_TAG, DIRECTORY_CACHE_TAG, STYGIAN_CACHE_TAG], Date.now(),
+    );
     await control?.report("database", 1, 1, "บันทึก Catalog แล้ว");
   await storage.write("catalog/current.json", JSON.stringify({
     version,
diff --git a/lib/events/invalidation.test.ts b/lib/events/invalidation.test.ts
index faf4812..ff3496a 100644
--- a/lib/events/invalidation.test.ts
+++ b/lib/events/invalidation.test.ts
@@ -25,6 +25,13 @@ describe("invalidation event envelopes", () => {
     });
   });
 
+  it.each(["catalog.updated", "glossary.updated"])("routes %s through the protected admin topic", (type) => {
+    const payload = { id: "test", version: 100 };
+    expect(toInvalidationEvent({ topic: "admin", aggregateId: "test", eventType: type, payload }))
+      .toEqual({ type, ...payload });
+    expect(toInvalidationEvent({ topic: "directory", aggregateId: "test", eventType: type, payload })).toBeNull();
+  });
+
   it("rejects unknown, malformed, and topic-mismatched messages", () => {
     expect(parseInvalidationEvent("not json")).toBeNull();
     expect(
diff --git a/lib/events/invalidation.ts b/lib/events/invalidation.ts
index 1d4faba..b58bb95 100644
--- a/lib/events/invalidation.ts
+++ b/lib/events/invalidation.ts
@@ -3,6 +3,8 @@ export const INVALIDATION_TYPES = [
   "page.updated",
   "stygian.updated",
   "admin.updated",
+  "catalog.updated",
+  "glossary.updated",
 ] as const;
 
 export type InvalidationType = (typeof INVALIDATION_TYPES)[number];
@@ -63,6 +65,8 @@ export function expectedTopic(event: InvalidationEvent): string {
     case "stygian.updated":
       return "stygian";
     case "admin.updated":
+    case "catalog.updated":
+    case "glossary.updated":
       return "admin";
   }
 }
diff --git a/lib/glossary-repository.ts b/lib/glossary-repository.ts
index 41696d5..9604efa 100644
--- a/lib/glossary-repository.ts
+++ b/lib/glossary-repository.ts
@@ -4,6 +4,7 @@ import { asc, eq } from "drizzle-orm";
 
 import { getDb } from "@/db";
 import {
+  outboxEvents,
   catalogArtifacts,
   catalogCharacters,
   catalogWeapons,
@@ -53,6 +54,10 @@ export async function createGlossaryAlias(input: unknown, actor: AuditActor) {
         catalogKey: created.catalogKey,
       },
     });
+    await tx.insert(outboxEvents).values({
+      topic: "admin", aggregateId: created.id, eventType: "glossary.updated",
+      payload: { id: created.id, version: Date.now() },
+    });
     return created;
   });
 }
@@ -74,6 +79,10 @@ export async function deleteGlossaryAlias(id: string, actor: AuditActor) {
         catalogKey: deleted.catalogKey,
       },
     });
+    await tx.insert(outboxEvents).values({
+      topic: "admin", aggregateId: deleted.id, eventType: "glossary.updated",
+      payload: { id: deleted.id, version: Date.now() },
+    });
     return deleted;
   });
 }
diff --git a/lib/guides/queries.test.ts b/lib/guides/queries.test.ts
index 564af63..598cc18 100644
--- a/lib/guides/queries.test.ts
+++ b/lib/guides/queries.test.ts
@@ -1,11 +1,12 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-const mocks = vi.hoisted(() => ({ reads: [] as unknown[], rows: new Map<unknown, unknown[]>() }));
+const mocks = vi.hoisted(() => ({ reads: [] as unknown[], selections: [] as unknown[], rows: new Map<unknown, unknown[]>() }));
 vi.mock("server-only", () => ({}));
 vi.mock("@/lib/media/storage", () => ({ publicMediaUrl: (key: string) => `/media/${key}` }));
 vi.mock("@/db", () => ({
   getDb: () => ({
-    select: () => {
+    select: (columns?: unknown) => {
+      mocks.selections.push(columns);
       let table: unknown;
       const query = {
         from(value: unknown) { table = value; return query; },
@@ -29,10 +30,11 @@ import {
   guides, guideSections, teamCompositions, teamConditions, teamMembers, weaponConditions,
   catalogCharacters, catalogMaterials, guidePosterBleeding, media, weaponRecommendations, artifactRecommendations,
 } from "@/db/schema";
-import { getActiveCatalog, getAdminGuideContent, getPublicGuide, listAdminTeamImportsForCharacter } from "./queries";
+import { getActiveCatalog, getCatalogOptions, getAdminGuideContent, getPublicGuide, listAdminTeamImportsForCharacter } from "./queries";
 
 beforeEach(() => {
   mocks.reads.length = 0;
+  mocks.selections.length = 0;
   mocks.rows.clear();
   mocks.rows.set(guides, [{
     guide: { id: "guide", slug: "test", posterArtMediaId: null },
@@ -202,3 +204,15 @@ describe("public overview build summary", () => {
     expect(mocks.reads).not.toContain(weaponRecommendations);
   });
 });
+
+describe("catalog picker reads", () => {
+  it("selects only character picker and export artwork fields", async () => {
+    mocks.rows.set(catalogCharacters, [{ key: "test", name: "Test", imageKey: "avatar", coopImageKey: "splash" }]);
+    const catalog = await getCatalogOptions();
+    expect(catalog?.characters[0].splashImageUrl).toBe("/media/splash");
+    expect(mocks.reads).not.toContain(catalogMaterials);
+    expect(Object.keys(mocks.selections[0] as object).sort()).toEqual([
+      "key", "name", "rarity", "weaponType", "element", "imageKey", "elementIconKey", "coopImageKey",
+    ].sort());
+  });
+});
diff --git a/lib/guides/queries.ts b/lib/guides/queries.ts
index 3a2bdd0..67f76fe 100644
--- a/lib/guides/queries.ts
+++ b/lib/guides/queries.ts
@@ -131,6 +131,7 @@ export async function getCatalogOptions() {
       element: catalogCharacters.element,
       imageKey: catalogCharacters.imageKey,
       elementIconKey: catalogCharacters.elementIconKey,
+      coopImageKey: catalogCharacters.coopImageKey,
     }).from(catalogCharacters).orderBy(asc(catalogCharacters.name)),
     () => getDb().select().from(catalogWeapons).orderBy(asc(catalogWeapons.name)),
     () => getDb().select().from(catalogArtifacts).orderBy(asc(catalogArtifacts.name)),
@@ -142,6 +143,7 @@ export async function getCatalogOptions() {
     characters: characters.map((item) => ({
       ...item,
       imageUrl: publicMediaUrl(item.imageKey),
+      splashImageUrl: item.coopImageKey ? publicMediaUrl(item.coopImageKey) : null,
       elementIconUrl: item.elementIconKey ? publicMediaUrl(item.elementIconKey) : null,
       aliases: groupedAliases.character.get(item.key) ?? [],
     })),
diff --git a/next.config.ts b/next.config.ts
index 0b0bc95..b366996 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -26,6 +26,7 @@ const nextConfig: NextConfig = {
     ],
   },
   experimental: {
+    turbopackFileSystemCacheForDev: true,
     serverActions: {
       bodySizeLimit: "5mb",
     },
diff --git a/package.json b/package.json
index 3870d1e..8baaf34 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "bun --bun next dev --turbopack",
+    "dev": "rm -rf .next & bun --bun next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",
diff --git a/tests/redis-replication.integration.test.ts b/tests/redis-replication.integration.test.ts
index d4c5e49..c8d803c 100644
--- a/tests/redis-replication.integration.test.ts
+++ b/tests/redis-replication.integration.test.ts
@@ -3,7 +3,7 @@ import { randomUUID } from "node:crypto";
 import Redis from "ioredis";
 import { afterAll, beforeAll, describe, expect, it } from "vitest";
 
-import { pageCacheTag } from "@/lib/cache/tags";
+import { CATALOG_CACHE_TAG, GLOSSARY_CACHE_TAG, pageCacheTag } from "@/lib/cache/tags";
 import { parseInvalidationEvent } from "@/lib/events/invalidation";
 import {
   createRedisOutboxTransport,
@@ -80,6 +80,18 @@ describeWithRedis("cross-replica Redis invalidation delivery", () => {
     else process.env.REDIS_EVENT_PREFIX = originalEventPrefix;
   });
 
+  it.each([
+    ["catalog.updated", CATALOG_CACHE_TAG],
+    ["glossary.updated", GLOSSARY_CACHE_TAG],
+  ])("expires %s data across replicas", async (eventType, tag) => {
+    await processOutboxEvent({
+      topic: "admin", aggregateId: pageId, eventType,
+      payload: { id: pageId, version: 43 },
+    }, createRedisOutboxTransport(replicaA), invalidatedAt);
+    expect(JSON.parse((await replicaBCache.hget(redisCacheTagStateKey(), tag))!))
+      .toEqual({ expired: invalidatedAt });
+  });
+
   it("shares tag state and publishes only the typed event envelope", async () => {
     const channel = redisEventChannel(topic);
     await replicaBEvents.subscribe(channel);