feat : update

app/admin/actions.ts

@@ -28,7 +28,6 @@ import {
   permanentlyDeleteGuide,
   reorderExtraSections,
   restoreGuide,
-  runCatalogSync,
   saveArtifacts,
   saveConstellations,
   saveExtraSection,
@@ -39,6 +38,11 @@ import {
   trashGuide,
   updateGuideBasics,
 } from "@/lib/guides/mutations";
+import {
+  cancelCatalogSyncJob,
+  getCatalogSyncJob,
+  startCatalogSyncJob,
+} from "@/lib/catalog/sync";
 
 const serializedBlockSchema = z.strictObject({
   id: z.string().uuid(),
@@ -362,12 +366,22 @@ export async function deleteStructuredGuide(guideId: string) {
 export async function startCatalogSync() {
   await requireAdmin();
   try {
-    return await runCatalogSync();
+    return { status: "started" as const, job: await startCatalogSyncJob() };
   } catch (cause) {
     return { status: "error" as const, message: cause instanceof Error ? cause.message : "เริ่ม Sync ไม่สำเร็จ" };
   }
 }
 
+export async function getCatalogSyncProgress(jobId: string) {
+  await requireAdmin();
+  return getCatalogSyncJob(jobId);
+}
+
+export async function cancelCatalogSync(jobId: string) {
+  await requireAdmin();
+  return cancelCatalogSyncJob(jobId);
+}
+
 export async function addGlossaryAlias(input: unknown) {
   await requireAdmin();
   try {

components/admin/guide-overview-form.tsx

@@ -1,6 +1,10 @@
 "use client";
 
 import Image from "next/image";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVerticalIcon, Trash2Icon } from "lucide-react";
 import { useState } from "react";
 
 import { saveGuideOverview } from "@/app/admin/actions";
@@ -8,6 +12,7 @@ import { AutosaveStatus } from "@/components/admin/autosave-status";
 import { MediaUploader } from "@/components/admin/media-uploader";
 import { MaterialPoster } from "@/components/public/material-poster";
 import { GuideImageExport } from "@/components/public/guide-image-export";
+import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -32,6 +37,31 @@ import { detectThemeColorsFromPixels } from "@/lib/overview-image";
 import type { PublicGuide } from "@/lib/guides/queries";
 import { cn } from "@/lib/utils";
 
+type BleedingLayer = {
+  id: string;
+  mediaId: string;
+  imageUrl: string | null;
+  amount: number;
+  scale: number;
+};
+
+function SortableBleedingLayer({ layer, onChange, onRemove }: { layer: BleedingLayer; onChange: (patch: Partial<Pick<BleedingLayer, "amount" | "scale">>) => void; onRemove: () => void }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: layer.id });
+  return (
+    <div ref={setNodeRef} style={{ transform: CSS.Transform.toString(transform), transition }} className={cn("flex items-center gap-2 rounded-lg border bg-card p-2", isDragging && "z-10 opacity-70 shadow-lg")}>
+      <button type="button" className="touch-none text-muted-foreground" aria-label="จัดลำดับ Bleeding" {...attributes} {...listeners}><GripVerticalIcon className="size-5" /></button>
+      {layer.imageUrl ? <Image src={layer.imageUrl} alt="" width={48} height={48} className="size-12 rounded object-contain bg-muted" /> : <div className="size-12 rounded bg-muted" />}
+      <div className="min-w-0 flex-1 space-y-1">
+        <div className="flex justify-between text-xs"><span>Amount</span><span>{layer.amount}%</span></div>
+        <Input type="range" min={0} max={100} value={layer.amount} onChange={(event) => onChange({ amount: Number(event.target.value) })} aria-label="Bleeding amount" />
+        <div className="flex justify-between text-xs"><span>Scale</span><span>{layer.scale}%</span></div>
+        <Input type="range" min={25} max={300} value={layer.scale} onChange={(event) => onChange({ scale: Number(event.target.value) })} aria-label="Bleeding scale" />
+      </div>
+      <Button type="button" variant="ghost" size="icon" onClick={onRemove} aria-label="ลบ Bleeding"><Trash2Icon className="size-4" /></Button>
+    </div>
+  );
+}
+
 export function GuideOverviewForm({
   guide,
 }: {
@@ -49,6 +79,7 @@ export function GuideOverviewForm({
     posterArtOffsetY: number;
     posterTopColors: [string, string];
     posterBottomColors: [string, string];
+    posterBleeding: Array<{ id: string; mediaId: string; imageUrl: string | null; amount: number; scale: number; sortOrder: number }>;
     character: Omit<PublicGuide["character"], "aliases">;
   };
 }) {
@@ -68,6 +99,8 @@ export function GuideOverviewForm({
   });
   const [posterTopColors, setPosterTopColors] = useState(guide.posterTopColors);
   const [posterBottomColors, setPosterBottomColors] = useState(guide.posterBottomColors);
+  const [bleeding, setBleeding] = useState<BleedingLayer[]>(guide.posterBleeding.map(({ id, mediaId, imageUrl, amount, scale }) => ({ id, mediaId, imageUrl, amount, scale })));
+  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
   const youtubeVideo = parseYouTubeUrl(youtubeUrl.trim());
   const invalidYoutubeUrl = Boolean(youtubeUrl.trim() && !youtubeVideo);
   const value = {
@@ -79,6 +112,7 @@ export function GuideOverviewForm({
     posterArtOffsetY: posterArtOffset.y,
     posterTopColors,
     posterBottomColors,
+    posterBleeding: bleeding.map(({ mediaId, amount, scale }) => ({ mediaId, amount, scale })),
   };
   const incompleteIssues = [
     !cover.id ? "กรุณาอัปโหลด Guide Image" : null,
@@ -87,7 +121,7 @@ export function GuideOverviewForm({
   ].filter((issue): issue is string => Boolean(issue));
   const invalidCover = !cover.id;
   const invalidOverview = !overview.trim();
-  const localDraft = { overview, youtubeUrl, cover, posterArt, posterArtOffset, posterTopColors, posterBottomColors };
+  const localDraft = { overview, youtubeUrl, cover, posterArt, posterArtOffset, posterTopColors, posterBottomColors, bleeding };
   const autosave = useAutosave({
     value,
     valid: Boolean(cover.id && overview.trim() && !invalidYoutubeUrl),
@@ -143,6 +177,15 @@ export function GuideOverviewForm({
         posterBottomColors: Array.isArray(draft.posterBottomColors) && draft.posterBottomColors.length === 2
           ? draft.posterBottomColors as [string, string]
           : guide.posterBottomColors,
+        bleeding: Array.isArray(draft.bleeding)
+          ? draft.bleeding.flatMap((item) => {
+              if (!item || typeof item !== "object") return [];
+              const layer = item as Record<string, unknown>;
+              return typeof layer.id === "string" && typeof layer.mediaId === "string" && typeof layer.imageUrl === "string"
+                ? [{ id: layer.id, mediaId: layer.mediaId, imageUrl: layer.imageUrl, amount: typeof layer.amount === "number" ? Math.max(0, Math.min(100, layer.amount)) : 100, scale: typeof layer.scale === "number" ? Math.max(25, Math.min(300, layer.scale)) : 100 }]
+                : [];
+            })
+          : guide.posterBleeding.map(({ id, mediaId, imageUrl, amount, scale }) => ({ id, mediaId, imageUrl, amount, scale })),
       };
     },
     restoreLocalDraft: (draft) => {
@@ -153,6 +196,7 @@ export function GuideOverviewForm({
       setPosterArtOffset(draft.posterArtOffset);
       setPosterTopColors(draft.posterTopColors);
       setPosterBottomColors(draft.posterBottomColors);
+      setBleeding(draft.bleeding);
     },
   });
 
@@ -193,6 +237,16 @@ export function GuideOverviewForm({
     const url = URL.createObjectURL(file);
     void detectPosterColors(url).finally(() => URL.revokeObjectURL(url));
   }
+
+  function handleBleedingDragEnd(event: DragEndEvent) {
+    if (!event.over || event.active.id === event.over.id) return;
+    setBleeding((current) => {
+      const oldIndex = current.findIndex((layer) => layer.id === event.active.id);
+      const newIndex = current.findIndex((layer) => layer.id === event.over?.id);
+      return oldIndex < 0 || newIndex < 0 ? current : arrayMove(current, oldIndex, newIndex);
+    });
+  }
+
   return (
     <Card>
       <CardHeader>
@@ -273,6 +327,7 @@ export function GuideOverviewForm({
                 artworkOffsetY={posterArtOffset.y}
                 topColors={posterTopColors}
                 bottomColors={posterBottomColors}
+                bleeding={bleeding}
                 interactive
                 onArtworkMove={setPosterArtOffset}
               />
@@ -297,9 +352,28 @@ export function GuideOverviewForm({
                   artworkOffsetY={posterArtOffset.y}
                   topColors={posterTopColors}
                   bottomColors={posterBottomColors}
+                  bleeding={bleeding}
                 />
               </GuideImageExport>
             </div>
+            <div className="space-y-2 rounded-lg border p-3">
+              <div className="flex items-center justify-between gap-2">
+                <div>
+                  <FieldLabel>Bleeding layers</FieldLabel>
+                  <p className="text-xs text-muted-foreground">รายการบนสุดจะแสดงก่อน</p>
+                </div>
+                <MediaUploader onReady={(asset) => setBleeding((current) => [...current, { id: crypto.randomUUID(), mediaId: asset.id, imageUrl: asset.url, amount: 100, scale: 100 }])} />
+              </div>
+              {bleeding.length ? (
+                <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleBleedingDragEnd}>
+                  <SortableContext items={bleeding.map((layer) => layer.id)} strategy={verticalListSortingStrategy}>
+                    <div className="space-y-2">
+                      {bleeding.map((layer) => <SortableBleedingLayer key={layer.id} layer={layer} onChange={(patch) => setBleeding((current) => current.map((item) => item.id === layer.id ? { ...item, ...patch } : item))} onRemove={() => setBleeding((current) => current.filter((item) => item.id !== layer.id))} />)}
+                    </div>
+                  </SortableContext>
+                </DndContext>
+              ) : <p className="text-sm text-muted-foreground">อัปโหลดภาพเพื่อเพิ่ม Bleeding layer</p>}
+            </div>
             <FieldDescription>
               อัปโหลดภาพตัวละคร แล้วลากบนตัวอย่างเพื่อจัดตำแหน่ง สีด้านบนและล่างจะตรวจให้อัตโนมัติ
             </FieldDescription>

components/admin/structured-dashboard.tsx

@@ -7,13 +7,16 @@ import {
   PlusIcon,
   RefreshCwIcon,
   RotateCcwIcon,
+  XCircleIcon,
   Trash2Icon,
 } from "lucide-react";
-import { useTransition } from "react";
+import { useEffect, useState, useTransition } from "react";
 import { toast } from "sonner";
 
 import {
   deleteStructuredGuide,
+  cancelCatalogSync,
+  getCatalogSyncProgress,
   moveGuideToTrash,
   restoreStructuredGuide,
   startCatalogSync,
@@ -40,6 +43,8 @@ import {
 } from "@/components/ui/empty";
 import { Spinner } from "@/components/ui/spinner";
 import { useAdminPresence } from "@/hooks/use-presence";
+import type { CatalogSyncJob } from "@/lib/catalog/sync";
+import { cn } from "@/lib/utils";
 
 type GuideCard = {
   id: string;
@@ -66,6 +71,7 @@ export function StructuredDashboard({
 }) {
   const router = useRouter();
   const [pending, startTransition] = useTransition();
+  const [syncJob, setSyncJob] = useState<CatalogSyncJob | null>(null);
   const presence = useAdminPresence(null);
   const catalogReady = Boolean(catalogVersion);
   const updateAvailable = Boolean(
@@ -73,6 +79,39 @@ export function StructuredDashboard({
     latestCatalogVersion &&
     catalogVersion !== latestCatalogVersion,
   );
+  const syncJobId = syncJob?.id;
+  const syncJobStatus = syncJob?.status;
+
+  useEffect(() => {
+    if (!syncJobId || !syncJobStatus || ["completed", "unchanged", "cancelled", "error"].includes(syncJobStatus)) return;
+    let stopped = false;
+    const poll = async () => {
+      const latest = await getCatalogSyncProgress(syncJobId);
+      if (!stopped && latest) setSyncJob(latest);
+    };
+    void poll();
+    const timer = window.setInterval(() => void poll(), 1000);
+    return () => {
+      stopped = true;
+      window.clearInterval(timer);
+    };
+  }, [syncJobId, syncJobStatus]);
+
+  function startSync() {
+    startTransition(async () => {
+      const result = await startCatalogSync();
+      if (result.status === "error") toast.error(result.message);
+      else setSyncJob(result.job);
+    });
+  }
+
+  function cancelSync() {
+    if (!syncJob) return;
+    startTransition(async () => {
+      const result = await cancelCatalogSync(syncJob.id);
+      if (result) setSyncJob(result);
+    });
+  }
 
   function run(
     action: () => Promise<{ status: string; message?: string }>,
@@ -107,8 +146,8 @@ export function StructuredDashboard({
         <div className="flex gap-2">
           <Button
             variant="outline"
-            disabled={pending}
+            disabled={pending || Boolean(syncJob && !["completed", "unchanged", "cancelled", "error"].includes(syncJob.status))}
-            onClick={() => run(startCatalogSync, "Sync สำเร็จแล้ว")}
+            onClick={startSync}
           >
             {pending ? (
               <Spinner data-icon="inline-start" />
@@ -117,6 +156,12 @@ export function StructuredDashboard({
             )}
             Sync Catalog
           </Button>
+          {syncJob && !["completed", "unchanged", "cancelled", "error"].includes(syncJob.status) ? (
+            <Button variant="destructive" disabled={pending} onClick={cancelSync}>
+              <XCircleIcon data-icon="inline-start" />
+              Cancel Sync
+            </Button>
+          ) : null}
           <Button
             render={<Link href="/admin/create" />}
             nativeButton={false}
@@ -127,6 +172,20 @@ export function StructuredDashboard({
           </Button>
         </div>
       </div>
+      {syncJob ? (
+        <Card>
+          <CardContent className="space-y-2 pt-6">
+            <div className="flex items-center justify-between gap-3 text-sm">
+              <span>{syncJob.message}</span>
+              <span className="text-muted-foreground">{syncJob.total ? `${syncJob.completed}/${syncJob.total}` : "กำลังเริ่ม…"}</span>
+            </div>
+            <div className="h-2 overflow-hidden rounded-full bg-muted">
+              <div className={cn("h-full bg-primary transition-all", syncJob.total ? "" : "w-1/3 animate-pulse")} style={syncJob.total ? { width: `${Math.min(100, (syncJob.completed / syncJob.total) * 100)}%` } : undefined} />
+            </div>
+            {syncJob.status === "error" ? <p className="text-sm text-destructive">{syncJob.error ?? "Sync ไม่สำเร็จ"}</p> : null}
+          </CardContent>
+        </Card>
+      ) : null}
       {guides.length ? (
         <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
           {guides.map((guide) => (

components/public/material-poster.tsx

@@ -55,6 +55,7 @@ export function MaterialPoster({
   interactive = false,
   onArtworkMove,
   className,
+  bleeding = [],
 }: {
   character: PosterCharacter;
   characterArtUrl: string | null;
@@ -65,6 +66,7 @@ export function MaterialPoster({
   interactive?: boolean;
   onArtworkMove?: (offset: { x: number; y: number }) => void;
   className?: string;
+  bleeding?: Array<{ id: string; imageUrl: string | null; amount: number; scale: number }>;
 }) {
   const dragStart = useRef<{ pointerId: number; x: number; y: number; offsetX: number; offsetY: number } | null>(null);
   const stats = character.baseStats.slice(0, 4);
@@ -141,6 +143,19 @@ export function MaterialPoster({
           />
         </div>
       ) : null}
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        {bleeding.map((layer) => layer.imageUrl ? (
+          <Image
+            key={layer.id}
+            src={layer.imageUrl}
+            alt=""
+            fill
+            sizes="(min-width: 1024px) 800px, 100vw"
+            className="object-contain object-center"
+            style={{ opacity: Math.max(0, Math.min(100, layer.amount)) / 100, transform: `scale(${Math.max(25, Math.min(300, layer.scale)) / 100})` }}
+          />
+        ) : null)}
+      </div>
       <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/80" />
 
       <div className="absolute inset-x-[4%] top-[5%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic", textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>

components/public/structured-guide.tsx

@@ -279,6 +279,7 @@ function GuideOverview({
                 artworkOffsetY={guide.posterArtOffsetY}
                 topColors={guide.posterTopColors}
                 bottomColors={guide.posterBottomColors}
+                bleeding={guide.posterBleeding}
               />
             </section>
           ) : null}

db/schema.ts

@@ -565,6 +565,22 @@ export const guides = guidesSchema.table(
   ],
 );
 
+export const guidePosterBleeding = guidesSchema.table(
+  "guide_poster_bleeding",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    guideId: uuid("guide_id").notNull().references(() => guides.id, { onDelete: "cascade" }),
+    mediaId: uuid("media_id").notNull().references(() => media.id, { onDelete: "restrict" }),
+    amount: integer("amount").default(100).notNull(),
+    scale: integer("scale").default(100).notNull(),
+    sortOrder: integer("sort_order").default(0).notNull(),
+    ...timestamps,
+  },
+  (table) => [
+    index("guide_poster_bleeding_order_idx").on(table.guideId, table.sortOrder),
+  ],
+);
+
 export const guideSections = guidesSchema.table(
   "guide_section",
   {

drizzle/0033_true_captain_marvel.sql

@@ -0,0 +1,14 @@
+CREATE TABLE "guides"."guide_poster_bleeding" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"guide_id" uuid NOT NULL,
+	"media_id" uuid NOT NULL,
+	"amount" integer DEFAULT 100 NOT NULL,
+	"scale" integer DEFAULT 100 NOT NULL,
+	"sort_order" integer DEFAULT 0 NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"updated_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "guides"."guide_poster_bleeding" ADD CONSTRAINT "guide_poster_bleeding_guide_id_guide_id_fk" FOREIGN KEY ("guide_id") REFERENCES "guides"."guide"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "guides"."guide_poster_bleeding" ADD CONSTRAINT "guide_poster_bleeding_media_id_media_id_fk" FOREIGN KEY ("media_id") REFERENCES "media"."media"("id") ON DELETE restrict ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "guide_poster_bleeding_order_idx" ON "guides"."guide_poster_bleeding" USING btree ("guide_id","sort_order");

drizzle/meta/_journal.json

@@ -232,6 +232,13 @@
       "when": 1788680680873,
       "tag": "0032_grey_excalibur",
       "breakpoints": true
+    },
+    {
+      "idx": 33,
+      "version": "7",
+      "when": 1788681628083,
+      "tag": "0033_true_captain_marvel",
+      "breakpoints": true
     }
   ]
 }

lib/catalog/sync.ts

@@ -28,6 +28,7 @@ import type {
 } from "@/lib/catalog/lunaris";
 import { customTravelers, isUpstreamTraveler } from "@/lib/catalog/travelers";
 import { withCatalogSyncLock } from "@/lib/catalog/sync-lock";
+import { getRedisClient, redisEventPrefix } from "@/lib/redis/client";
 import {
   compareLunarisVersions,
   lunarisVersionSchema,
@@ -100,9 +101,11 @@ interface SyncedCharacter {
   baseStats: CatalogBaseStat[];
 }
 
-async function getJson(url: string): Promise<unknown> {
+type SyncControl = { checkCancelled: () => Promise<void>; report: (phase: string, completed: number, total: number, message: string) => Promise<void> };
+
+async function getJson(url: string, signal?: AbortSignal): Promise<unknown> {
   const response = await fetch(url, {
-    signal: AbortSignal.timeout(30_000),
+    signal: signal ?? AbortSignal.timeout(30_000),
     cache: "no-store",
   });
   if (!response.ok)
@@ -110,9 +113,9 @@ async function getJson(url: string): Promise<unknown> {
   return response.json();
 }
 
-async function getOptionalJson(url: string): Promise<unknown | null> {
+async function getOptionalJson(url: string, signal?: AbortSignal): Promise<unknown | null> {
   const response = await fetch(url, {
-    signal: AbortSignal.timeout(30_000),
+    signal: signal ?? AbortSignal.timeout(30_000),
     cache: "no-store",
   });
   if (response.status === 404) return null;
@@ -149,13 +152,16 @@ export async function getLatestLunarisVersion(): Promise<string> {
 async function mapConcurrent<T, R>(
   items: T[],
   task: (item: T) => Promise<R>,
+  control?: SyncControl,
 ): Promise<R[]> {
   const results = new Array<R>(items.length);
   let next = 0;
   async function worker() {
     while (next < items.length) {
+      await control?.checkCancelled();
       const index = next++;
       results[index] = await task(items[index]);
+      await control?.report("characters", index + 1, items.length, `ดึงข้อมูลตัวละคร ${index + 1}/${items.length}`);
     }
   }
   await Promise.all(
@@ -171,12 +177,14 @@ async function uploadAssets(
     target: string;
     type?: string;
   }>,
+  control?: SyncControl,
 ): Promise<Set<string>> {
   const storage = await getMediaStorage();
   let next = 0;
   const missing = new Set<string>();
   async function worker() {
     while (next < assets.length) {
+      await control?.checkCancelled();
       const asset = assets[next++];
       if (!(await storage.file(asset.target).exists())) {
         if (asset.body) {
@@ -199,6 +207,7 @@ async function uploadAssets(
             });
         }
       }
+      await control?.report("assets", next, assets.length, `ดาวน์โหลดรูปภาพ ${next}/${assets.length}`);
     }
   }
   await Promise.all(
@@ -207,13 +216,15 @@ async function uploadAssets(
   return missing;
 }
 
-async function syncCatalogVersion(version: string): Promise<void> {
+async function syncCatalogVersion(version: string, control?: SyncControl): Promise<void> {
+  await control?.report("lists", 0, 4, "กำลังดึงรายการ Catalog จาก Lunaris");
   const [charactersRaw, weaponsRaw, artifactsRaw, materialsRaw] = await Promise.all([
       getJson(`${API_ROOT}/${version}/charlist.json`),
       getJson(`${API_ROOT}/${version}/weaponlist.json`),
       getJson(`${API_ROOT}/${version}/artifactlist.json`),
       getJson(`${API_ROOT}/${version}/materiallist.json`),
     ]);
+  await control?.report("lists", 4, 4, "ได้รับรายการ Catalog แล้ว");
   const characterData = characterSchema.parse(charactersRaw);
   const weaponData = weaponSchema.parse(weaponsRaw);
   const artifactData = artifactSchema.parse(artifactsRaw);
@@ -280,6 +291,7 @@ async function syncCatalogVersion(version: string): Promise<void> {
           baseStats: detail ? baseStatsSnapshot(detail) : [],
         };
       },
+      control,
   );
     const customCharacters: SyncedCharacter[] = await mapConcurrent(
       [...customTravelers],
@@ -315,6 +327,7 @@ async function syncCatalogVersion(version: string): Promise<void> {
           baseStats: baseStatsSnapshot(detail),
         };
       },
+      control,
     );
     let characters = [...remoteCharacters, ...customCharacters];
     let weapons = Object.entries(weaponData)
@@ -409,7 +422,8 @@ async function syncCatalogVersion(version: string): Promise<void> {
           });
       }
     }
-    const missingAssets = await uploadAssets([...uniqueAssets.values()]);
+    await control?.report("assets", 0, uniqueAssets.size, "กำลังดาวน์โหลดรูปภาพ Catalog");
+    const missingAssets = await uploadAssets([...uniqueAssets.values()], control);
     characters = characters.filter((item) => !missingAssets.has(item.imageKey));
     characters = characters.map((item) => ({
       ...item,
@@ -498,6 +512,7 @@ async function syncCatalogVersion(version: string): Promise<void> {
       ),
     ]);
 
+    await control?.report("database", 0, 1, "กำลังบันทึก Catalog");
     await getDb().transaction(async (tx) => {
       await tx.delete(catalogCharacters);
       await tx.delete(catalogMaterials);
@@ -549,6 +564,7 @@ async function syncCatalogVersion(version: string): Promise<void> {
             })),
           );
     });
+    await control?.report("database", 1, 1, "บันทึก Catalog แล้ว");
   await storage.write("catalog/current.json", JSON.stringify({ version }), {
     type: "application/json",
     acl: "public-read",
@@ -557,6 +573,67 @@ async function syncCatalogVersion(version: string): Promise<void> {
 
 export type CatalogSyncResult = "synced" | "unchanged";
 
+export type CatalogSyncJob = {
+  id: string;
+  status: "queued" | "running" | "completed" | "unchanged" | "cancelled" | "error";
+  phase: string;
+  completed: number;
+  total: number;
+  message: string;
+  version?: string;
+  error?: string;
+};
+
+const syncJobKey = (id: string) => `${redisEventPrefix()}:catalog-sync-job:${id}`;
+
+async function writeSyncJob(job: CatalogSyncJob) {
+  const redis = await getRedisClient();
+  await redis.set(syncJobKey(job.id), JSON.stringify(job), "EX", 60 * 60);
+  return job;
+}
+
+export async function getCatalogSyncJob(id: string): Promise<CatalogSyncJob | null> {
+  const redis = await getRedisClient();
+  const value = await redis.get(syncJobKey(id));
+  return value ? JSON.parse(value) as CatalogSyncJob : null;
+}
+
+export async function cancelCatalogSyncJob(id: string): Promise<CatalogSyncJob | null> {
+  const job = await getCatalogSyncJob(id);
+  if (!job || ["completed", "unchanged", "cancelled", "error"].includes(job.status)) return job;
+  return writeSyncJob({ ...job, message: "กำลังยกเลิก Sync…", status: "cancelled" });
+}
+
+export async function startCatalogSyncJob(): Promise<CatalogSyncJob> {
+  const id = crypto.randomUUID();
+  const job = await writeSyncJob({ id, status: "queued", phase: "queued", completed: 0, total: 0, message: "กำลังเตรียม Sync" });
+  void executeCatalogSyncJob(job).catch(() => undefined);
+  return job;
+}
+
+async function executeCatalogSyncJob(initial: CatalogSyncJob) {
+  const checkCancelled = async () => {
+    const current = await getCatalogSyncJob(initial.id);
+    if (current?.status === "cancelled") throw new Error("CATALOG_SYNC_CANCELLED");
+  };
+  const report = async (phase: string, completed: number, total: number, message: string) => {
+    const current = await getCatalogSyncJob(initial.id);
+    if (current?.status === "cancelled") throw new Error("CATALOG_SYNC_CANCELLED");
+    await writeSyncJob({ ...initial, status: "running", phase, completed, total, message });
+  };
+  try {
+    await writeSyncJob({ ...initial, status: "running", phase: "version", message: "กำลังตรวจสอบเวอร์ชัน Lunaris" });
+    const result = await processCatalogSync(undefined, { checkCancelled, report });
+    await writeSyncJob({ ...initial, status: result === "unchanged" ? "unchanged" : "completed", phase: "done", completed: 1, total: 1, message: result === "unchanged" ? "Catalog เป็นเวอร์ชันล่าสุดแล้ว" : "Sync Catalog สำเร็จ" });
+  } catch (cause) {
+    if (cause instanceof Error && cause.message === "CATALOG_SYNC_CANCELLED") {
+      await writeSyncJob({ ...initial, status: "cancelled", phase: "cancelled", message: "ยกเลิก Sync แล้ว" });
+    } else {
+      await writeSyncJob({ ...initial, status: "error", phase: "error", message: "Sync ไม่สำเร็จ", error: cause instanceof Error ? cause.message : "Unknown sync error" });
+    }
+  }
+}
+
 export async function getCurrentCatalogVersion(): Promise<string | null> {
   const storage = await getMediaStorage();
   const current = storage.file("catalog/current.json");
@@ -566,6 +643,7 @@ export async function getCurrentCatalogVersion(): Promise<string | null> {
 
 export async function processCatalogSync(
   requestedVersion?: string,
+  control?: SyncControl,
 ): Promise<CatalogSyncResult> {
   const version = lunarisVersionSchema.parse(
     requestedVersion ?? (await getLatestLunarisVersion()),
@@ -579,7 +657,8 @@ export async function processCatalogSync(
     ) {
       return "unchanged";
     }
-    await syncCatalogVersion(version);
+    await control?.checkCancelled();
+    await syncCatalogVersion(version, control);
     return "synced";
   });
 }

lib/content/queries.ts

@@ -9,6 +9,7 @@ import {
   dataSources,
   dataSourceVersions,
   guides,
+  guidePosterBleeding,
   media,
   pageDataSources,
   pages,
@@ -309,7 +310,7 @@ export async function getMediaVisibility(mediaId: string): Promise<{
   retained: boolean;
 }> {
   const db = getDb();
-  const [referencedBlocks, portraitCharacters, posterGuides, [mediaRecord]] = await Promise.all([
+  const [referencedBlocks, portraitCharacters, posterGuides, bleedingGuides, [mediaRecord]] = await Promise.all([
     db
       .select({ block: blocks, page: pages, character: characters })
       .from(blocks)
@@ -323,6 +324,11 @@ export async function getMediaVisibility(mediaId: string): Promise<{
       .select({ guide: guides })
       .from(guides)
       .where(eq(guides.posterArtMediaId, mediaId)),
+    db
+      .select({ guide: guides })
+      .from(guidePosterBleeding)
+      .innerJoin(guides, eq(guides.id, guidePosterBleeding.guideId))
+      .where(eq(guidePosterBleeding.mediaId, mediaId)),
     db.select().from(media).where(eq(media.id, mediaId)).limit(1),
   ]);
 
@@ -342,11 +348,13 @@ export async function getMediaVisibility(mediaId: string): Promise<{
       references.some(
         ({ page, character }) => page.visible && character.visible,
       ) || portraitCharacters.some(({ character }) => character.visible) ||
-      posterGuides.some(({ guide }) => guide.isPublic && !guide.trashedAt),
+      posterGuides.some(({ guide }) => guide.isPublic && !guide.trashedAt) ||
+      bleedingGuides.some(({ guide }) => guide.isPublic && !guide.trashedAt),
     retained:
       references.length > 0 ||
       portraitCharacters.length > 0 ||
       posterGuides.length > 0 ||
+      bleedingGuides.length > 0 ||
       Boolean(
         mediaRecord &&
           (mediaRecord.currentReferenceCount > 0 ||

lib/guides/mutations.ts

@@ -15,6 +15,7 @@ import {
   extraSectionRows,
   extraSections,
   guides,
+  guidePosterBleeding,
   guideSections,
   media,
   outboxEvents,
@@ -137,6 +138,13 @@ export async function updateGuideBasics(guideId: string, input: unknown) {
         .limit(1);
       if (!poster) throw new Error("ไม่พบภาพตัวละครที่อัปโหลดแล้ว");
     }
+    if (data.posterBleeding !== undefined) {
+      const bleedingMediaIds = [...new Set(data.posterBleeding.map((layer) => layer.mediaId))];
+      const bleedingMedia = bleedingMediaIds.length
+        ? await tx.select({ id: media.id }).from(media).where(and(inArray(media.id, bleedingMediaIds), eq(media.status, "ready")))
+        : [];
+      if (bleedingMedia.length !== bleedingMediaIds.length) throw new Error("ไม่พบภาพ Bleeding ที่อัปโหลดแล้ว");
+    }
     const updated = await advanceGuideVersion(tx, guideId, data.expectedVersion);
     await tx.update(guides).set({
       overview: data.overview,
@@ -148,6 +156,25 @@ export async function updateGuideBasics(guideId: string, input: unknown) {
       ...(data.posterTopColors !== undefined ? { posterTopColors: data.posterTopColors } : {}),
       ...(data.posterBottomColors !== undefined ? { posterBottomColors: data.posterBottomColors } : {}),
     }).where(eq(guides.id, guideId));
+    if (data.posterBleeding !== undefined) {
+      const previous = await tx.select({ mediaId: guidePosterBleeding.mediaId }).from(guidePosterBleeding).where(eq(guidePosterBleeding.guideId, guideId));
+      for (const layer of previous) {
+        await tx.update(media).set({ currentReferenceCount: sql`greatest(${media.currentReferenceCount} - 1, 0)` }).where(eq(media.id, layer.mediaId));
+      }
+      await tx.delete(guidePosterBleeding).where(eq(guidePosterBleeding.guideId, guideId));
+      if (data.posterBleeding.length) {
+        await tx.insert(guidePosterBleeding).values(data.posterBleeding.map((layer, sortOrder) => ({
+          guideId,
+          mediaId: layer.mediaId,
+          amount: Math.round(layer.amount),
+          scale: Math.round(layer.scale),
+          sortOrder,
+        })));
+        for (const layer of data.posterBleeding) {
+          await tx.update(media).set({ currentReferenceCount: sql`${media.currentReferenceCount} + 1` }).where(eq(media.id, layer.mediaId));
+        }
+      }
+    }
     if (current.coverMediaId !== data.coverMediaId) {
       await tx.update(media).set({ currentReferenceCount: sql`greatest(${media.currentReferenceCount} - 1, 0)` }).where(eq(media.id, current.coverMediaId));
       await tx.update(media).set({ currentReferenceCount: sql`${media.currentReferenceCount} + 1` }).where(eq(media.id, data.coverMediaId));
@@ -412,11 +439,15 @@ export async function permanentlyDeleteGuide(guideId: string) {
   return getDb().transaction(async (tx) => {
     const [guide] = await tx.select().from(guides).where(eq(guides.id, guideId)).limit(1);
     if (!guide?.trashedAt) throw new Error("Guide ต้องอยู่ในถังขยะก่อนลบถาวร");
+    const bleeding = await tx.select({ mediaId: guidePosterBleeding.mediaId }).from(guidePosterBleeding).where(eq(guidePosterBleeding.guideId, guideId));
     await tx.delete(guides).where(eq(guides.id, guideId));
     await tx.update(media).set({ currentReferenceCount: sql`greatest(${media.currentReferenceCount} - 1, 0)` }).where(eq(media.id, guide.coverMediaId));
     if (guide.posterArtMediaId) {
       await tx.update(media).set({ currentReferenceCount: sql`greatest(${media.currentReferenceCount} - 1, 0)` }).where(eq(media.id, guide.posterArtMediaId));
     }
+    for (const layer of bleeding) {
+      await tx.update(media).set({ currentReferenceCount: sql`greatest(${media.currentReferenceCount} - 1, 0)` }).where(eq(media.id, layer.mediaId));
+    }
     await emitGuideEvents(tx, guide.id, guide.version + 1);
     return { version: guide.version + 1 };
   });

lib/guides/queries.ts

@@ -16,6 +16,7 @@ import {
   constellationRecommendations,
   extraSectionRows,
   guides,
+  guidePosterBleeding,
   guideSections,
   glossaryAliases,
   media,
@@ -124,13 +125,14 @@ export async function getGuideByCharacterKey(characterKey: string) {
   const materialKeys = [...new Set(
     row.character.ascension.flatMap((group) => group.items.map((item) => item.key)),
   )];
-  const [materials, poster] = await Promise.all([
+  const [materials, poster, bleeding] = await Promise.all([
     materialKeys.length
       ? getDb().select().from(catalogMaterials).where(inArray(catalogMaterials.key, materialKeys))
       : [],
     row.guide.posterArtMediaId
       ? getDb().select().from(media).where(eq(media.id, row.guide.posterArtMediaId)).limit(1)
       : Promise.resolve([]),
+    getDb().select({ layer: guidePosterBleeding, asset: media }).from(guidePosterBleeding).leftJoin(media, eq(media.id, guidePosterBleeding.mediaId)).where(eq(guidePosterBleeding.guideId, row.guide.id)).orderBy(asc(guidePosterBleeding.sortOrder)),
   ]);
   const materialByKey = new Map(materials.map((item) => [item.key, item]));
   const sections = await getDb().select().from(guideSections).where(eq(guideSections.guideId, row.guide.id)).orderBy(asc(guideSections.sortOrder));
@@ -138,6 +140,7 @@ export async function getGuideByCharacterKey(characterKey: string) {
     ...row.guide,
     coverUrl: publicMediaUrl(row.cover.objectKey),
     posterArtUrl: poster[0] ? publicMediaUrl(poster[0].objectKey) : null,
+    posterBleeding: bleeding.map(({ layer, asset }) => ({ ...layer, imageUrl: asset ? publicMediaUrl(asset.objectKey) : null })),
     character: catalogCharacterWithUrls(row.character, materialByKey),
     sections,
   };
@@ -159,7 +162,7 @@ async function getGuideContent(slug: string, publicOnly: boolean) {
   const materialKeys = [...new Set(
     row.character.ascension.flatMap((group) => group.items.map((item) => item.key)),
   )];
-  const [sections, weaponConditionsRows, groups, profile, constellationGroups, teams, aliases, materials, poster] = await Promise.all([
+  const [sections, weaponConditionsRows, groups, profile, constellationGroups, teams, aliases, materials, poster, bleeding] = await Promise.all([
     getDb().select().from(guideSections).where(and(eq(guideSections.guideId, row.guide.id), eq(guideSections.enabled, true))).orderBy(asc(guideSections.sortOrder)),
     getDb().select().from(weaponConditions).where(eq(weaponConditions.guideId, row.guide.id)).orderBy(asc(weaponConditions.sortOrder)),
     getDb().select().from(artifactGroups).where(eq(artifactGroups.guideId, row.guide.id)).orderBy(asc(artifactGroups.sortOrder)),
@@ -173,6 +176,7 @@ async function getGuideContent(slug: string, publicOnly: boolean) {
     row.guide.posterArtMediaId
       ? getDb().select().from(media).where(eq(media.id, row.guide.posterArtMediaId)).limit(1)
       : Promise.resolve([]),
+    getDb().select({ layer: guidePosterBleeding, asset: media }).from(guidePosterBleeding).leftJoin(media, eq(media.id, guidePosterBleeding.mediaId)).where(eq(guidePosterBleeding.guideId, row.guide.id)).orderBy(asc(guidePosterBleeding.sortOrder)),
   ]);
   const groupedAliases = aliasesByItem(aliases);
   const materialByKey = new Map(materials.map((item) => [item.key, item]));
@@ -221,6 +225,7 @@ async function getGuideContent(slug: string, publicOnly: boolean) {
     ...row.guide,
     coverUrl: publicMediaUrl(row.cover.objectKey),
     posterArtUrl: poster[0] ? publicMediaUrl(poster[0].objectKey) : null,
+    posterBleeding: bleeding.map(({ layer, asset }) => ({ ...layer, imageUrl: asset ? publicMediaUrl(asset.objectKey) : null })),
     character: { ...catalogCharacterWithUrls(row.character, materialByKey), aliases: groupedAliases.character.get(row.character.key) ?? [] },
     elementIconUrls,
     sections,

lib/guides/schemas.ts

@@ -41,6 +41,11 @@ export const updateGuideSchema = z.strictObject({
   posterArtOffsetY: z.number().finite().min(-50).max(50).optional(),
   posterTopColors: z.tuple([z.string().regex(/^#[0-9a-fA-F]{6}$/u), z.string().regex(/^#[0-9a-fA-F]{6}$/u)]).optional(),
   posterBottomColors: z.tuple([z.string().regex(/^#[0-9a-fA-F]{6}$/u), z.string().regex(/^#[0-9a-fA-F]{6}$/u)]).optional(),
+  posterBleeding: z.array(z.strictObject({
+    mediaId: z.string().uuid(),
+    amount: z.number().finite().min(0).max(100),
+    scale: z.number().finite().min(25).max(300),
+  })).max(30).optional(),
 });
 
 export const weaponSectionSchema = z.strictObject({