From ce126810bbeb142a6227c33e41ee8fa6e77cfa9d Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Sun, 6 Sep 2026 17:16:38 +0700
Subject: [PATCH] feat : update

---
 .env.example                             |   1 +
 README.md                                |   1 +
 components/admin/guide-overview-form.tsx | 103 ++++++++++++-----
 components/admin/media-uploader.tsx      |   4 +-
 components/public/material-poster.tsx    |  76 ++++++++-----
 components/public/structured-guide.tsx   | 134 +++++++++++++----------
 components/ui/slider.tsx                 |  51 +++++++++
 k8s.md                                   |  91 ++++++++-------
 lib/catalog/lunaris.test.ts              |  12 +-
 lib/catalog/lunaris.ts                   |   6 +-
 lib/catalog/sync.ts                      |  72 +++++++++---
 lib/media/validation.test.ts             |   2 +-
 lib/media/validation.ts                  |   2 +-
 13 files changed, 384 insertions(+), 171 deletions(-)
 create mode 100644 components/ui/slider.tsx

diff --git a/.env.example b/.env.example
index e7a7452..648c672 100644
--- a/.env.example
+++ b/.env.example
@@ -21,6 +21,7 @@ REDIS_CACHE_MAX_ENTRY_BYTES=5242880
 OUTBOX_BATCH_SIZE=20
 OUTBOX_POLL_MS=1000
 OUTBOX_LEASE_MS=30000
+CATALOG_SYNC_CONCURRENCY=12
 
 # Discord-triggered Lunaris catalog sync
 DISCORD_BOT_TOKEN=replace-with-discord-bot-token
diff --git a/README.md b/README.md
index 8fc055f..f32308d 100644
--- a/README.md
+++ b/README.md
@@ -214,6 +214,7 @@ Before the first rollout, a cluster administrator must provision a
 DATABASE_URL
 BETTER_AUTH_SECRET
 REDIS_URL
+CATALOG_SYNC_CONCURRENCY
 S3_ENDPOINT
 S3_PUBLIC_URL
 S3_BUCKET
diff --git a/components/admin/guide-overview-form.tsx b/components/admin/guide-overview-form.tsx
index 833a2ee..dbbdc42 100644
--- a/components/admin/guide-overview-form.tsx
+++ b/components/admin/guide-overview-form.tsx
@@ -29,6 +29,15 @@ import {
   FieldLabel,
 } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/components/ui/combobox";
+import { Slider } from "@/components/ui/slider";
 import { Textarea } from "@/components/ui/textarea";
 import { useAutosave } from "@/hooks/use-autosave";
 import { adminDraftKey } from "@/lib/editor/local-draft";
@@ -42,28 +51,53 @@ type BleedingLayer = {
   mediaId: string;
   imageUrl: string | null;
   amount: number;
-  scale: number;
   blendMode: PosterBlendMode;
 };
 
 const blendModes: PosterBlendMode[] = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
+const blendModeItems = blendModes.map((value) => ({
+  value,
+  label: value.split("-").map((part) => part[0].toUpperCase() + part.slice(1)).join(" "),
+}));
+let bleedingLayerIdCounter = 0;
 
-function SortableBleedingLayer({ layer, onChange, onRemove }: { layer: BleedingLayer; onChange: (patch: Partial<Pick<BleedingLayer, "amount" | "scale" | "blendMode">>) => void; onRemove: () => void }) {
+function createBleedingLayerId(): string {
+  const browserCrypto = globalThis.crypto;
+  if (typeof browserCrypto?.randomUUID === "function") return `bleeding-${browserCrypto.randomUUID()}`;
+  bleedingLayerIdCounter += 1;
+  return `bleeding-${Date.now()}-${bleedingLayerIdCounter}`;
+}
+
+function SortableBleedingLayer({ layer, onChange, onRemove }: { layer: BleedingLayer; onChange: (patch: Partial<Pick<BleedingLayer, "amount" | "blendMode">>) => void; onRemove: () => void }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: layer.id });
+  const selectedMode = blendModeItems.find((mode) => mode.value === layer.blendMode);
   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>
+    <div ref={setNodeRef} style={{ transform: CSS.Transform.toString(transform), transition }} className={cn("flex items-start gap-2 rounded-lg border bg-card p-3", isDragging && "relative z-10 opacity-70 shadow-lg")}>
+      <Button type="button" variant="ghost" size="icon-sm" className="touch-none cursor-grab active:cursor-grabbing" aria-label="จัดลำดับ Bleeding" {...attributes} {...listeners}><GripVerticalIcon data-icon="inline-start" /></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" />
-        <select className="h-8 w-full rounded-lg border border-input bg-background px-2 text-xs" value={layer.blendMode} onChange={(event) => onChange({ blendMode: event.target.value as PosterBlendMode })} aria-label="Bleeding blend mode">
-          {blendModes.map((mode) => <option key={mode} value={mode}>{mode}</option>)}
-        </select>
+      <div className="flex min-w-0 flex-1 flex-col gap-3">
+        <Combobox
+          items={blendModeItems}
+          value={selectedMode}
+          onValueChange={(value) => value && onChange({ blendMode: value.value })}
+          itemToStringLabel={(item) => item.label}
+          itemToStringValue={(item) => item.value}
+          filter={(item, query) => `${item.label} ${item.value}`.toLowerCase().includes(query.trim().toLowerCase())}
+        >
+          <ComboboxInput className="w-full" placeholder="เลือก Blend mode…" />
+          <ComboboxContent>
+            <ComboboxEmpty>ไม่พบ Blend mode</ComboboxEmpty>
+            <ComboboxList>
+              {(item) => <ComboboxItem key={item.value} value={item}>{item.label}</ComboboxItem>}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+        <Field>
+          <FieldLabel htmlFor={`bleeding-amount-${layer.id}`}>Amount {layer.amount}%</FieldLabel>
+          <Slider id={`bleeding-amount-${layer.id}`} min={0} max={100} step={5} value={[layer.amount]} onValueChange={(value) => onChange({ amount: typeof value === "number" ? value : value[0] ?? 0 })} />
+        </Field>
       </div>
-      <Button type="button" variant="ghost" size="icon" onClick={onRemove} aria-label="ลบ Bleeding"><Trash2Icon className="size-4" /></Button>
+      <Button type="button" variant="ghost" size="icon-sm" onClick={onRemove} aria-label="ลบ Bleeding"><Trash2Icon data-icon="inline-start" /></Button>
     </div>
   );
 }
@@ -107,7 +141,7 @@ export function GuideOverviewForm({
   const [posterArtScale, setPosterArtScale] = useState(guide.posterArtScale);
   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, blendMode }) => ({ id, mediaId, imageUrl, amount, scale, blendMode })));
+  const [bleeding, setBleeding] = useState<BleedingLayer[]>(guide.posterBleeding.map(({ id, mediaId, imageUrl, amount, blendMode }) => ({ id, mediaId, imageUrl, amount, blendMode })));
   const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
   const youtubeVideo = parseYouTubeUrl(youtubeUrl.trim());
   const invalidYoutubeUrl = Boolean(youtubeUrl.trim() && !youtubeVideo);
@@ -121,7 +155,7 @@ export function GuideOverviewForm({
     posterArtScale,
     posterTopColors,
     posterBottomColors,
-    posterBleeding: bleeding.map(({ mediaId, amount, scale, blendMode }) => ({ mediaId, amount, scale, blendMode })),
+    posterBleeding: bleeding.map(({ mediaId, amount, blendMode }) => ({ mediaId, amount, scale: 100, blendMode })),
   };
   const incompleteIssues = [
     !cover.id ? "กรุณาอัปโหลด Guide Image" : null,
@@ -192,10 +226,10 @@ export function GuideOverviewForm({
               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, blendMode: typeof layer.blendMode === "string" && blendModes.includes(layer.blendMode as PosterBlendMode) ? layer.blendMode as PosterBlendMode : "multiply" }]
+                ? [{ id: layer.id, mediaId: layer.mediaId, imageUrl: layer.imageUrl, amount: typeof layer.amount === "number" ? Math.max(0, Math.min(100, layer.amount)) : 100, blendMode: typeof layer.blendMode === "string" && blendModes.includes(layer.blendMode as PosterBlendMode) ? layer.blendMode as PosterBlendMode : "multiply" }]
                 : [];
             })
-          : guide.posterBleeding.map(({ id, mediaId, imageUrl, amount, scale, blendMode }) => ({ id, mediaId, imageUrl, amount, scale, blendMode })),
+          : guide.posterBleeding.map(({ id, mediaId, imageUrl, amount, blendMode }) => ({ id, mediaId, imageUrl, amount, blendMode })),
       };
     },
     restoreLocalDraft: (draft) => {
@@ -244,7 +278,16 @@ export function GuideOverviewForm({
     setPosterArtOffset({ x: 0, y: 0 });
     setBleeding((current) => current.length
       ? current.map((layer) => ({ ...layer, mediaId: asset.id, imageUrl: asset.url }))
-      : [{ id: crypto.randomUUID(), mediaId: asset.id, imageUrl: asset.url, amount: 65, scale: 100, blendMode: "multiply" }]);
+      : [{ id: createBleedingLayerId(), mediaId: asset.id, imageUrl: asset.url, amount: 65, blendMode: "multiply" }]);
+  }
+
+  function removeUploadedPoster() {
+    setPosterArt({ id: null, url: null });
+    setPosterArtOffset({ x: 0, y: 0 });
+    setPosterArtScale(100);
+    setPosterTopColors(["#000000", "#000000"]);
+    setPosterBottomColors(["#000000", "#000000"]);
+    setBleeding([]);
   }
 
   function detectPosterColorsFromFile(file: File) {
@@ -256,7 +299,7 @@ export function GuideOverviewForm({
     if (!posterArt.id || !posterArt.url) return;
     const mediaId = posterArt.id;
     const imageUrl = posterArt.url;
-    setBleeding((current) => [...current, { id: crypto.randomUUID(), mediaId, imageUrl, amount: 65, scale: 100, blendMode: "multiply" }]);
+    setBleeding((current) => [...current, { id: createBleedingLayerId(), mediaId, imageUrl, amount: 65, blendMode: "multiply" }]);
   }
 
   function handleBleedingDragEnd(event: DragEndEvent) {
@@ -359,12 +402,18 @@ export function GuideOverviewForm({
                 onReady={setUploadedPoster}
                 onFileSelected={detectPosterColorsFromFile}
               />
+              {posterArt.id ? (
+                <Button type="button" variant="outline" onClick={removeUploadedPoster}>
+                  <Trash2Icon data-icon="inline-start" />
+                  ลบภาพตัวละคร
+                </Button>
+              ) : null}
               <GuideImageExport
                 width={1600}
                 height={2000}
-                format="webp"
+                format="png"
                 disabled={!posterArt.url}
-                fileName={`${guide.name}-materials.webp`}
+                fileName={`${guide.name}-materials.png`}
                 captureClassName="p-0"
               >
                 <MaterialPoster
@@ -379,7 +428,7 @@ export function GuideOverviewForm({
                 />
               </GuideImageExport>
             </div>
-            <div className="space-y-2 rounded-lg border p-3">
+            <div className="flex flex-col gap-2 rounded-lg border p-3">
               <div className="flex items-center justify-between gap-2">
                 <div>
                   <FieldLabel>Bleeding layers</FieldLabel>
@@ -390,17 +439,17 @@ export function GuideOverviewForm({
               {bleeding.length ? (
                 <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleBleedingDragEnd}>
                   <SortableContext items={bleeding.map((layer) => layer.id)} strategy={verticalListSortingStrategy}>
-                    <div className="space-y-2">
+                    <div className="flex flex-col gap-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>
-            <div className="rounded-lg border p-3">
-              <div className="flex justify-between text-sm"><span>Character image zoom</span><span>{posterArtScale}%</span></div>
-              <Input type="range" min={50} max={500} value={posterArtScale} onChange={(event) => setPosterArtScale(Number(event.target.value))} aria-label="Character image zoom" />
-            </div>
+            <Field className="rounded-lg border p-3">
+              <div className="flex items-center justify-between gap-2"><FieldLabel htmlFor="poster-art-scale">Character image zoom</FieldLabel><span className="text-sm text-muted-foreground">{posterArtScale}%</span></div>
+              <Slider id="poster-art-scale" min={50} max={500} step={5} value={[posterArtScale]} onValueChange={(value) => setPosterArtScale(typeof value === "number" ? value : value[0] ?? 100)} />
+            </Field>
             <FieldDescription>
               อัปโหลดภาพตัวละคร แล้วลากบนตัวอย่างเพื่อจัดตำแหน่ง สีด้านบนและล่างจะตรวจให้อัตโนมัติ
             </FieldDescription>
diff --git a/components/admin/media-uploader.tsx b/components/admin/media-uploader.tsx
index f7fa41e..2211a2d 100644
--- a/components/admin/media-uploader.tsx
+++ b/components/admin/media-uploader.tsx
@@ -34,7 +34,7 @@ export function MediaUploader({
       return;
     }
     if (file.size <= 0 || file.size > MAX_MEDIA_BYTES) {
-      toast.error("ไฟล์ต้องมีขนาดไม่เกิน 20 MB");
+      toast.error("ไฟล์ต้องมีขนาดไม่เกิน 100 MB");
       return;
     }
 
@@ -88,7 +88,7 @@ export function MediaUploader({
         {state === "idle" && "อัปโหลดและเพิ่มรูปภาพ"}
         {!busy ? <UploadCloudIcon className="ml-auto" /> : null}
       </Button>
-      <FieldDescription>PNG, JPEG, WebP หรือ GIF ขนาดไม่เกิน 20 MB</FieldDescription>
+      <FieldDescription>PNG, JPEG, WebP หรือ GIF ขนาดไม่เกิน 100 MB</FieldDescription>
     </Field>
   );
 }
diff --git a/components/public/material-poster.tsx b/components/public/material-poster.tsx
index 6f79348..4d457a5 100644
--- a/components/public/material-poster.tsx
+++ b/components/public/material-poster.tsx
@@ -7,6 +7,7 @@ import type {
   CatalogAscensionGroup,
   CatalogBaseStat,
 } from "@/lib/catalog/lunaris";
+import { accentGradient } from "@/lib/overview-image";
 import { cn } from "@/lib/utils";
 
 type PosterMaterial = {
@@ -37,6 +38,14 @@ function statLabel(key: string): string {
   return statLabels[key.toLowerCase()] ?? key;
 }
 
+function statIconName(key: string): string | null {
+  const normalized = key.toLowerCase().replace(/[^a-z]/gu, "");
+  if (["hp", "atk", "def", "em", "er"].includes(normalized)) return normalized;
+  if (["critrate", "crit", "criticalrate"].includes(normalized)) return "critrate";
+  if (["critdmg", "critdamage", "criticaldamage"].includes(normalized)) return "critdmg";
+  return null;
+}
+
 function statValue(key: string, value: number | string): string {
   const formatted = typeof value === "number"
     ? value.toLocaleString("en-US", { maximumFractionDigits: 2 })
@@ -67,11 +76,10 @@ export function MaterialPoster({
   onArtworkMove?: (offset: { x: number; y: number }) => void;
   className?: string;
   artworkScale: number;
-  bleeding?: Array<{ id: string; imageUrl: string | null; amount: number; scale: number; blendMode: PosterBlendMode }>;
+  bleeding?: Array<{ id: string; imageUrl: string | null; amount: number; blendMode: PosterBlendMode }>;
 }) {
   const dragStart = useRef<{ pointerId: number; x: number; y: number; offsetX: number; offsetY: number } | null>(null);
-  const preferredStats = ["hp", "atk", "def", "em"];
-  const stats = preferredStats.map((key) => character.baseStats.find((stat) => stat.key.toLowerCase() === key));
+  const stats = character.baseStats.slice(0, 4);
   const materials = [...character.ascension, ...character.leveling].flatMap((group) => group.items);
   const background = `linear-gradient(180deg, ${topColors[0]} 0%, ${topColors[1]} 22%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 62%, ${bottomColors[0]} 88%, ${bottomColors[1]} 100%)`;
 
@@ -143,49 +151,67 @@ export function MaterialPoster({
             className="object-contain object-center"
             priority={!interactive}
           />
+          {[...bleeding].reverse().map((layer) => (
+            <Image
+              key={layer.id}
+              src={characterArtUrl}
+              alt=""
+              fill
+              sizes="(min-width: 1024px) 800px, 100vw"
+              className="object-contain object-center"
+              style={{ opacity: Math.max(0, Math.min(100, layer.amount)) / 100, mixBlendMode: layer.blendMode }}
+            />
+          ))}
         </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, mixBlendMode: layer.blendMode, 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="pointer-events-none absolute inset-x-0 top-0 h-[1.35cqw]"
+        style={{ backgroundImage: accentGradient(...topColors) }}
+      />
+      <div
+        className="pointer-events-none absolute inset-x-0 bottom-0 h-[1.35cqw]"
+        style={{ backgroundImage: accentGradient(...bottomColors) }}
+      />
 
-      <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)" }}>
-        <h2 className="text-[7cqw] leading-none">BASE STATS</h2>
-        <div className="mt-[4%] flex w-[53%] flex-col gap-[2.5%]">
+      <div className="absolute inset-x-[4%] top-[5%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic" }}>
+        <h2 className="text-[7cqw] leading-none" style={{ textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>BASE STATS</h2>
+        <div className="mt-[4%] flex w-[53%] flex-col gap-[1.2cqw]">
           {Array.from({ length: 4 }, (_, index) => {
             const stat = stats[index];
+            const iconName = stat ? statIconName(stat.key) : null;
             return (
               <div key={stat?.key ?? index} className="flex h-[7cqw] items-center justify-between rounded-[1.5cqw] bg-black/95 px-[4%] text-[3.2cqw] leading-none">
-                <span>{stat ? statLabel(stat.key) : "—"}</span>
-                <span>{stat ? statValue(stat.key, stat.value) : "—"}</span>
+                <span className="flex min-w-0 items-center gap-[1cqw] whitespace-nowrap">
+                  {iconName ? (
+                    <Image
+                      src={`/icon/stats/${iconName}.webp`}
+                      alt=""
+                      width={64}
+                      height={64}
+                      className="size-[3.5cqw] shrink-0 object-contain brightness-0 invert"
+                    />
+                  ) : null}
+                  <span>{stat ? statLabel(stat.key) : "—"}</span>
+                </span>
+                <span className="whitespace-nowrap text-[2.7cqw]">{stat ? statValue(stat.key, stat.value) : "—"}</span>
               </div>
             );
           })}
         </div>
       </div>
 
-      <div className="absolute inset-x-[4%] top-[51%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic", textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>
-        <h2 className="text-[7cqw] leading-none">MATERIALS</h2>
+      <div className="absolute inset-x-[4%] top-[49%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic" }}>
+        <h2 className="text-[7cqw] leading-none" style={{ textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>MATERIALS</h2>
         <p className="mt-[1%] text-[4.5cqw] leading-none">LV.90</p>
         <div className="mt-[5%] grid grid-cols-8 gap-[1.2%]">
           {materials.map((material, index) => (
-            <div key={`${material.key}-${index}`} className="aspect-[0.65] overflow-hidden rounded-[1.3cqw] bg-black/95 ring-1 ring-white/10">
+            <div key={`${material.key}-${index}`} className="aspect-[0.72] overflow-hidden rounded-[1.3cqw] bg-black/95 ring-1 ring-white/10">
               <div className="flex h-[68%] items-center justify-center rounded-br-[1.3cqw] bg-[#c1c1c1] p-[8%]">
                 {material.imageUrl ? <Image src={material.imageUrl} alt="" width={96} height={96} className="size-full object-contain" /> : null}
               </div>
               <div className="flex h-[32%] items-center justify-center px-[4%] text-center text-[2.2cqw] leading-none">
-                <span>×{material.amount.toLocaleString("en-US")}</span>
+                <span className="whitespace-nowrap text-[1.8cqw]">×{material.amount.toLocaleString("en-US")}</span>
               </div>
             </div>
           ))}
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index 4aed397..2c75179 100644
--- a/components/public/structured-guide.tsx
+++ b/components/public/structured-guide.tsx
@@ -209,8 +209,8 @@ function GuideOverview({
         <h1 className="font-heading text-4xl font-bold">{guide.name}</h1>
         <p className="text-lg font-semibold">{guide.overview}</p>
       </div>
-      <div className="grid items-start gap-4 lg:grid-cols-2">
-        <div className="relative aspect-square w-full overflow-hidden rounded-xl border bg-muted">
+      <div className="grid items-start gap-6 lg:grid-cols-2">
+        <div className="order-1 relative aspect-square w-full overflow-hidden rounded-xl border bg-muted lg:col-start-1 lg:row-start-1">
           <Image
             src={guide.coverUrl}
             alt={`ไกด์ ${guide.name}`}
@@ -219,59 +219,13 @@ function GuideOverview({
             className="object-cover"
           />
         </div>
-        {sections.length ? (
-          <nav
-            aria-label={`เมนูคู่มือ ${guide.name}`}
-            className="flex flex-col gap-3"
-          >
-            {sections.map((item) => (
-              <Link
-                key={item.id}
-                href={`/${guide.slug}/${item.slug}`}
-                className="rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                prefetch
-              >
-                <Card size="sm" className="transition-colors hover:bg-muted/50">
-                  <CardHeader>
-                    {navigationIconPath(item.slug) ? (
-                      <Image
-                        src={navigationIconPath(item.slug)!}
-                        alt=""
-                        width={32}
-                        height={32}
-                        className="size-8 object-contain"
-                      />
-                    ) : null}
-                    <CardTitle>
-                      {publicSectionTitle(item.slug, item.title)}
-                    </CardTitle>
-                    <CardDescription>เปิดดูคำแนะนำฉบับเต็ม</CardDescription>
-                    <CardAction>
-                      <ArrowUpRightIcon
-                        aria-hidden="true"
-                        className="size-5 text-primary"
-                      />
-                    </CardAction>
-                  </CardHeader>
-                </Card>
-              </Link>
-            ))}
-          </nav>
-        ) : (
-          <Card>
-            <CardHeader>
-              <CardTitle>กำลังจัดทำเนื้อหา</CardTitle>
-              <CardDescription>
-                กลับมาตรวจสอบอีกครั้งหลังผู้ดูแลเพิ่มข้อมูล
-              </CardDescription>
-            </CardHeader>
-          </Card>
-        )}
-      </div>
-      {guide.posterArtUrl || youtubeVideo ? (
-        <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1.25fr)_minmax(20rem,0.75fr)]">
+        <div className="order-3 lg:col-start-2 lg:row-start-1">
+          <GuideNavigation guide={guide} sections={sections} />
+        </div>
+        {guide.posterArtUrl || youtubeVideo ? (
+          <>
           {guide.posterArtUrl ? (
-            <section className="order-1 lg:order-2">
+            <section className="order-2 flex flex-col items-center gap-3 lg:col-start-1 lg:row-start-2">
               <MaterialPoster
                 character={guide.character}
                 characterArtUrl={guide.posterArtUrl}
@@ -282,10 +236,28 @@ function GuideOverview({
                 bottomColors={guide.posterBottomColors}
                 bleeding={guide.posterBleeding}
               />
+              <GuideImageExport
+                width={1600}
+                height={2000}
+                format="png"
+                fileName={`${guide.name}-materials.png`}
+                captureClassName="p-0"
+              >
+                <MaterialPoster
+                  character={guide.character}
+                  characterArtUrl={guide.posterArtUrl}
+                  artworkOffsetX={guide.posterArtOffsetX}
+                  artworkOffsetY={guide.posterArtOffsetY}
+                  artworkScale={guide.posterArtScale}
+                  topColors={guide.posterTopColors}
+                  bottomColors={guide.posterBottomColors}
+                  bleeding={guide.posterBleeding}
+                />
+              </GuideImageExport>
             </section>
           ) : null}
           {youtubeVideo ? (
-            <section className="order-2 flex flex-col items-center gap-3 lg:order-1">
+            <section className="order-4 flex flex-col items-center gap-3 lg:col-start-2 lg:row-start-2">
               <div className="aspect-video w-full overflow-hidden rounded-xl border bg-muted">
                 <iframe
                   src={youtubeVideo.embedUrl}
@@ -313,12 +285,60 @@ function GuideOverview({
               </Button>
             </section>
           ) : null}
-        </div>
-      ) : null}
+          </>
+        ) : null}
+      </div>
     </div>
   );
 }
 
+function GuideNavigation({
+  guide,
+  sections,
+}: {
+  guide: PublicGuide;
+  sections: ReturnType<typeof publicSections>;
+}) {
+  return sections.length ? (
+    <nav aria-label={`เมนูคู่มือ ${guide.name}`} className="flex flex-col gap-3">
+      {sections.map((item) => (
+        <Link
+          key={item.id}
+          href={`/${guide.slug}/${item.slug}`}
+          className="rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          prefetch
+        >
+          <Card size="sm" className="transition-colors hover:bg-muted/50">
+            <CardHeader>
+              {navigationIconPath(item.slug) ? (
+                <Image
+                  src={navigationIconPath(item.slug)!}
+                  alt=""
+                  width={32}
+                  height={32}
+                  className="size-8 object-contain"
+                />
+              ) : null}
+              <CardTitle>{publicSectionTitle(item.slug, item.title)}</CardTitle>
+              <CardDescription>เปิดดูคำแนะนำฉบับเต็ม</CardDescription>
+              <CardAction>
+                <ArrowUpRightIcon aria-hidden="true" className="size-5 text-primary" />
+              </CardAction>
+            </CardHeader>
+          </Card>
+        </Link>
+      ))}
+    </nav>
+  ) : (
+    <Card>
+      <CardHeader>
+        <CardTitle>กำลังจัดทำเนื้อหา</CardTitle>
+        <CardDescription>กลับมาตรวจสอบอีกครั้งหลังผู้ดูแลเพิ่มข้อมูล</CardDescription>
+      </CardHeader>
+    </Card>
+  );
+}
+
 function GuideSection({
   guide,
   section,
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
new file mode 100644
index 0000000..691a53b
--- /dev/null
+++ b/components/ui/slider.tsx
@@ -0,0 +1,51 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max]
+
+  return (
+    <SliderPrimitive.Root
+      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            key={index}
+            className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/k8s.md b/k8s.md
index 948ca97..877c3aa 100644
--- a/k8s.md
+++ b/k8s.md
@@ -1,83 +1,100 @@
-# Updating `.env` in Kubernetes
+# Push `.env` to Kubernetes
 
-Buzz Sheet uses the `buzz-sheet-env` Secret in the `buzz-sheet` namespace. The
-local `.env` file is ignored by Git and must never be committed.
+Buzz Sheet reads private configuration from the `buzz-sheet-env` Kubernetes
+Secret in the `buzz-sheet` namespace. Use the local `.env` file as the source.
+Never commit `.env` or paste its values into a Kubernetes manifest.
 
-This repository uses hand-authored Kustomize manifests rather than a
-Kuber-managed Compose file, so synchronize `.env` with `kubectl`.
+This repository uses the manifests under `k8s/`, not a Kuber `compose.yml`, so
+environment-only updates are applied with `kubectl`.
 
-## Push an updated `.env`
+## 1. Check the target cluster
 
-From the repository root, confirm that `kubectl` is connected to the intended
-cluster:
+Run these commands from the repository root:
 
 ```bash
-cd /home/gunshiz/buzz-sheet
 kubectl config current-context
 kubectl get namespace buzz-sheet
 ```
 
-Create or update the Secret without printing its values:
+Stop if the context is not the cluster you intend to update.
+
+Confirm that `.env` exists, then inspect only its variable names:
+
+```bash
+test -f .env
+awk -F= '/^[A-Za-z_][A-Za-z0-9_]*=/{print $1}' .env
+```
+
+## 2. Create or update the Secret
+
+The following command builds the Secret locally and sends it directly to the
+cluster. It does not create a plaintext YAML file:
 
 ```bash
 kubectl create secret generic buzz-sheet-env \
   --namespace buzz-sheet \
   --from-env-file=.env \
   --dry-run=client \
-  --output=yaml | kubectl apply --filename=-
+  --output=yaml \
+  | kubectl apply --filename=-
 ```
 
-Running pods do not reload Secret values automatically. Restart the web
-application and both workers, then wait for each rollout:
+Verify that the Secret exists without displaying its values:
+
+```bash
+kubectl get secret buzz-sheet-env \
+  --namespace buzz-sheet \
+  --output='go-template={{range $key, $value := .data}}{{$key}}{{"\n"}}{{end}}'
+```
+
+## 3. Restart the application
+
+Environment variables sourced from a Secret are read when a pod starts.
+Restart all Buzz Sheet workloads after updating the Secret:
 
 ```bash
 kubectl rollout restart deployment/buzz-sheet \
   --namespace buzz-sheet
-
 kubectl rollout restart deployment/buzz-sheet-worker \
   --namespace buzz-sheet
-
 kubectl rollout restart deployment/buzz-sheet-discord-worker \
   --namespace buzz-sheet
+```
 
+Wait for every rollout to finish:
+
+```bash
 kubectl rollout status deployment/buzz-sheet \
   --namespace buzz-sheet \
   --timeout=10m
-
 kubectl rollout status deployment/buzz-sheet-worker \
   --namespace buzz-sheet \
   --timeout=10m
-
 kubectl rollout status deployment/buzz-sheet-discord-worker \
   --namespace buzz-sheet \
   --timeout=10m
 ```
 
-Verify PostgreSQL and Redis readiness, then inspect the application logs:
+## 4. Verify the deployment
 
 ```bash
 curl -fsS 'https://guide.sudloh.com/api/health?ready=1'
 bun logs
 ```
 
-The health response should report `"status":"ready"`, with both `database`
-and `redis` set to `"ok"`.
+The health response should show `"status":"ready"` with both `database` and
+`redis` set to `"ok"`.
 
-## Important exceptions
+## Troubleshooting
 
-- Updating the Secret does not apply database migrations or seed data. If
-  `DATABASE_URL` now points to a new database, migrate and seed that database
-  before restarting the application.
-- Better Auth errors about missing database fields require a schema migration.
-  Pushing `.env` again will not fix them.
-- `NEXT_DEPLOYMENT_ID` is controlled by `buzz-sheet-config` and the immutable
-  image revision. Do not change it for an environment-only update.
-- `NEXT_SERVER_ACTIONS_ENCRYPTION_KEY` is embedded during `next build`. Rotating
-  it requires building and deploying a new image; restarting the existing image
-  is not sufficient.
-- If `BETTER_AUTH_URL` or the public hostname changes, update the Kubernetes
-  ingress and Cloudflare/DNS configuration as well.
-- `S3_ENDPOINT` is the private Garage API used for writes. `S3_PUBLIC_URL`
-  is the public read-only CDN base (production uses
-  `https://buzz-cdn.astrxl.dev`). Browser uploads go through the authenticated
-  application route; do not point `S3_ENDPOINT` at the CDN hostname.
+- `namespace "buzz-sheet" not found`: apply the base manifests first with
+  `kubectl apply --kustomize k8s/base`.
+- Pods fail after the restart: inspect them with
+  `kubectl describe pod --namespace buzz-sheet <pod-name>` and `bun logs`.
+- A new `DATABASE_URL` points to an empty database: run the database migrations
+  before serving traffic. Updating the Secret does not migrate the database.
+- `NEXT_DEPLOYMENT_ID` comes from `buzz-sheet-config`, not `.env`.
+- Rotating `NEXT_SERVER_ACTIONS_ENCRYPTION_KEY` requires a new application
+  build and deployment because Next.js uses it during the build.
+- `S3_ENDPOINT` must be the private S3-compatible API endpoint.
+  `S3_PUBLIC_URL` must be the public read URL.
diff --git a/lib/catalog/lunaris.test.ts b/lib/catalog/lunaris.test.ts
index 2cfe15c..b6c1a03 100644
--- a/lib/catalog/lunaris.test.ts
+++ b/lib/catalog/lunaris.test.ts
@@ -83,11 +83,13 @@ describe("Lunaris character data", () => {
 
   it("normalizes leveling materials by category", () => {
     const detail = characterDetailSchema.parse({
-      leveling: {
-        crown: { "104319": 3 },
-        books: { "104365": 9, "104366": 63, "104367": 114 },
-        worldmonster: { "112146": 18, "112147": 66, "112148": 93 },
-        weekly: { "113088": 18 },
+      skills: {
+        leveling: {
+          crown: { "104319": 3 },
+          books: { "104365": 9, "104366": 63, "104367": 114 },
+          worldmonster: { "112146": 18, "112147": 66, "112148": 93 },
+          weekly: { "113088": 18 },
+        },
       },
     });
 
diff --git a/lib/catalog/lunaris.ts b/lib/catalog/lunaris.ts
index d237b33..6f73674 100644
--- a/lib/catalog/lunaris.ts
+++ b/lib/catalog/lunaris.ts
@@ -53,6 +53,7 @@ const skillSchema = z.object({
 });
 
 const attributeSchema = z.record(z.string(), z.union([z.number(), z.string()]));
+const levelingSchema = z.record(z.string(), z.record(z.string(), z.number().int()));
 
 export const characterDetailSchema = z.object({
   info: z.object({
@@ -65,12 +66,13 @@ export const characterDetailSchema = z.object({
     normalattack: skillSchema.optional(),
     elementalskill: skillSchema.optional(),
     elementalburst: skillSchema.optional(),
+    leveling: levelingSchema.optional(),
   }).nullish(),
   ascension: z.record(
     z.string(),
     z.union([z.number().int(), z.record(z.string(), z.number().int())]),
   ).nullish(),
-  leveling: z.record(z.string(), z.record(z.string(), z.number().int())).nullish(),
+  leveling: levelingSchema.nullish(),
   attributes: z.array(attributeSchema).nullish(),
 });
 
@@ -157,7 +159,7 @@ export function ascensionSnapshot(
 export function levelingSnapshot(
   value: z.infer<typeof characterDetailSchema>,
 ): CatalogLevelingGroup[] {
-  return Object.entries(value.leveling ?? {}).map(([type, entries]) => ({
+  return Object.entries(value.skills?.leveling ?? value.leveling ?? {}).map(([type, entries]) => ({
     type,
     items: Object.entries(entries).map(([key, amount]) => ({ key, amount })),
   }));
diff --git a/lib/catalog/sync.ts b/lib/catalog/sync.ts
index 88a703b..5c66c97 100644
--- a/lib/catalog/sync.ts
+++ b/lib/catalog/sync.ts
@@ -40,6 +40,14 @@ import { getMediaStorage } from "@/lib/media/storage";
 
 const VERSION_URL = "https://api.lunaris.moe/data/version.json";
 const API_ROOT = "https://api.lunaris.moe/data";
+const PROGRESS_INTERVAL_MS = 400;
+
+function syncConcurrency(): number {
+  const configured = Number(process.env.CATALOG_SYNC_CONCURRENCY ?? 12);
+  return Number.isFinite(configured)
+    ? Math.max(1, Math.min(24, Math.floor(configured)))
+    : 12;
+}
 
 const versionSchema = z.object({
   version: lunarisVersionSchema,
@@ -160,16 +168,27 @@ async function mapConcurrent<T, R>(
 ): Promise<R[]> {
   const results = new Array<R>(items.length);
   let next = 0;
+  let completed = 0;
+  let lastProgressAt = 0;
+  async function reportProgress() {
+    if (!control) return;
+    const now = Date.now();
+    if (completed < items.length && now - lastProgressAt < PROGRESS_INTERVAL_MS) return;
+    lastProgressAt = now;
+    await control.report("characters", completed, items.length, `ดึงข้อมูลตัวละคร ${completed}/${items.length}`);
+  }
   async function worker() {
-    while (next < items.length) {
-      await control?.checkCancelled();
+    while (true) {
       const index = next++;
+      if (index >= items.length) return;
+      await control?.checkCancelled();
       results[index] = await task(items[index]);
-      await control?.report("characters", index + 1, items.length, `ดึงข้อมูลตัวละคร ${index + 1}/${items.length}`);
+      completed += 1;
+      await reportProgress();
     }
   }
   await Promise.all(
-    Array.from({ length: Math.min(4, items.length) }, () => worker()),
+    Array.from({ length: Math.min(syncConcurrency(), items.length) }, () => worker()),
   );
   return results;
 }
@@ -185,11 +204,22 @@ async function uploadAssets(
 ): Promise<Set<string>> {
   const storage = await getMediaStorage();
   let next = 0;
+  let completed = 0;
+  let lastProgressAt = 0;
   const missing = new Set<string>();
+  async function reportProgress() {
+    if (!control) return;
+    const now = Date.now();
+    if (completed < assets.length && now - lastProgressAt < PROGRESS_INTERVAL_MS) return;
+    lastProgressAt = now;
+    await control.report("assets", completed, assets.length, `ดาวน์โหลดรูปภาพ ${completed}/${assets.length}`);
+  }
   async function worker() {
-    while (next < assets.length) {
+    while (true) {
+      const index = next++;
+      if (index >= assets.length) return;
       await control?.checkCancelled();
-      const asset = assets[next++];
+      const asset = assets[index];
       if (!(await storage.file(asset.target).exists())) {
         if (asset.body) {
           await storage.write(asset.target, asset.body, {
@@ -211,11 +241,12 @@ async function uploadAssets(
             });
         }
       }
-      await control?.report("assets", next, assets.length, `ดาวน์โหลดรูปภาพ ${next}/${assets.length}`);
+      completed += 1;
+      await reportProgress();
     }
   }
   await Promise.all(
-    Array.from({ length: Math.min(4, assets.length) }, () => worker()),
+    Array.from({ length: Math.min(syncConcurrency(), assets.length) }, () => worker()),
   );
   return missing;
 }
@@ -620,9 +651,20 @@ export async function startCatalogSyncJob(): Promise<CatalogSyncJob> {
 }
 
 async function executeCatalogSyncJob(initial: CatalogSyncJob) {
+  let lastCancellationCheck = 0;
+  let cancellationCheck: Promise<void> | null = null;
   const checkCancelled = async () => {
-    const current = await getCatalogSyncJob(initial.id);
-    if (current?.status === "cancelled") throw new Error("CATALOG_SYNC_CANCELLED");
+    if (Date.now() - lastCancellationCheck < PROGRESS_INTERVAL_MS) return;
+    if (!cancellationCheck) {
+      cancellationCheck = (async () => {
+        const current = await getCatalogSyncJob(initial.id);
+        lastCancellationCheck = Date.now();
+        if (current?.status === "cancelled") throw new Error("CATALOG_SYNC_CANCELLED");
+      })().finally(() => {
+        cancellationCheck = null;
+      });
+    }
+    await cancellationCheck;
   };
   const report = async (phase: string, completed: number, total: number, message: string) => {
     const current = await getCatalogSyncJob(initial.id);
@@ -651,10 +693,12 @@ export async function getCurrentCatalogVersion(): Promise<string | null> {
 
 async function hasCatalogRecords(): Promise<boolean> {
   const db = getDb();
-  const [character] = await db.select({ key: catalogCharacters.key }).from(catalogCharacters).where(sql`${catalogCharacters.baseStats} <> '[]'::jsonb`).limit(1);
-  const [material] = await db.select({ key: catalogMaterials.key }).from(catalogMaterials).limit(1);
-  const [weapon] = await db.select({ key: catalogWeapons.key }).from(catalogWeapons).limit(1);
-  const [artifact] = await db.select({ key: catalogArtifacts.key }).from(catalogArtifacts).limit(1);
+  const [[character], [material], [weapon], [artifact]] = await Promise.all([
+    db.select({ key: catalogCharacters.key }).from(catalogCharacters).where(sql`${catalogCharacters.baseStats} <> '[]'::jsonb AND ${catalogCharacters.leveling} <> '[]'::jsonb`).limit(1),
+    db.select({ key: catalogMaterials.key }).from(catalogMaterials).limit(1),
+    db.select({ key: catalogWeapons.key }).from(catalogWeapons).limit(1),
+    db.select({ key: catalogArtifacts.key }).from(catalogArtifacts).limit(1),
+  ]);
   return Boolean(character && material && weapon && artifact);
 }
 
diff --git a/lib/media/validation.test.ts b/lib/media/validation.test.ts
index d10c3a4..7161445 100644
--- a/lib/media/validation.test.ts
+++ b/lib/media/validation.test.ts
@@ -9,7 +9,7 @@ import {
 } from "./validation";
 
 describe("media validation", () => {
-  it("accepts only supported images no larger than 20 MB", () => {
+  it("accepts only supported images no larger than 100 MB", () => {
     expect(mediaUploadSchema.safeParse({ fileName: "a.png", mimeType: "image/png", byteSize: MAX_MEDIA_BYTES }).success).toBe(true);
     expect(mediaUploadSchema.safeParse({ fileName: "a.svg", mimeType: "image/svg+xml", byteSize: 10 }).success).toBe(false);
     expect(mediaUploadSchema.safeParse({ fileName: "a.png", mimeType: "image/png", byteSize: MAX_MEDIA_BYTES + 1 }).success).toBe(false);
diff --git a/lib/media/validation.ts b/lib/media/validation.ts
index 7ba3083..a27b2c9 100644
--- a/lib/media/validation.ts
+++ b/lib/media/validation.ts
@@ -1,6 +1,6 @@
 import * as z from "zod";
 
-export const MAX_MEDIA_BYTES = 20 * 1024 * 1024;
+export const MAX_MEDIA_BYTES = 100 * 1024 * 1024;
 export const IMAGE_MIME_TYPES = [
   "image/png",
   "image/jpeg",