feat : merge mat

components/public/material-poster.tsx

@@ -7,16 +7,10 @@ import type {
   CatalogAscensionGroup,
   CatalogBaseStat,
 } from "@/lib/catalog/lunaris";
+import { mergePosterMaterials, type PosterMaterial } from "@/lib/material-poster";
 import { accentGradient } from "@/lib/overview-image";
 import { cn } from "@/lib/utils";
 
-type PosterMaterial = {
-  key: string;
-  amount: number;
-  name: string;
-  imageUrl: string | null;
-};
-
 export type PosterBlendMode = "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity";
 
 type PosterCharacter = {
@@ -80,7 +74,9 @@ export function MaterialPoster({
 }) {
   const dragStart = useRef<{ pointerId: number; x: number; y: number; offsetX: number; offsetY: number } | null>(null);
   const stats = character.baseStats.slice(0, 4);
-  const materials = [...character.ascension, ...character.leveling].flatMap((group) => group.items);
+  const materials = mergePosterMaterials(
+    [...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%)`;
 
   function handlePointerDown(event: PointerEvent<HTMLDivElement>) {