feat : update

components/public/artifact-image-export.tsx

@@ -53,16 +53,19 @@ export function ArtifactImageExport({
     ? ""
     : '[data-artifact-export-section="note"]{display:none!important}';
   const onlySection = sections.size === 1 ? [...sections][0] : null;
-  const exportWidth = onlySection === "best-stats" || onlySection === "target-stats" || onlySection === "talents"
-    ? 800
-    : 1200;
+  const exportWidth = onlySection === "best-stats"
+    ? 700
+    : onlySection === "target-stats" || onlySection === "talents"
+      ? 800
+      : 1200;
+  const exportHeight = onlySection === "best-stats" ? 700 : undefined;
   const hideEmptyRightColumn = !showNote && !sections.has("target-stats") && !sections.has("talents")
     ? ".artifact-export-right{display:none!important}"
     : "";
   const layoutRules = onlySection === "tierlist"
     ? ".artifact-export-grid{grid-template-columns:1fr!important}.artifact-export-tierlist{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}"
     : onlySection === "best-stats"
-      ? ".artifact-export-grid{grid-template-columns:1fr!important}.artifact-export-left{display:flex!important;flex-direction:column!important}.artifact-export-main-stats{order:1!important}.artifact-export-substats{order:2!important}.artifact-export-right{width:100%!important}"
+      ? ".artifact-export-root{height:100%!important}.artifact-export-grid{grid-template-columns:1fr!important}.artifact-export-left{display:flex!important;flex-direction:column!important}.artifact-export-main-stats,.artifact-export-substats{width:480px!important;max-width:100%!important;margin-inline:auto!important}.artifact-export-main-stats{order:1!important}.artifact-export-substats{order:2!important}.artifact-export-right{width:100%!important}.guide-export-watermark{top:auto!important;bottom:16px!important}"
       : onlySection === "target-stats" || onlySection === "talents"
         ? ".artifact-export-grid{display:block!important}.artifact-export-right{width:560px!important;max-width:100%;margin-left:auto!important;margin-right:auto!important;justify-self:center!important}"
         : "";
@@ -144,6 +147,7 @@ export function ArtifactImageExport({
         <GuideImageExport
           fileName={fileName}
           width={exportWidth}
+          height={exportHeight}
           disabled={sections.size === 0}
           captureClassName="p-0"
         >

components/public/guide-export-branding.tsx

@@ -28,8 +28,8 @@ export function GuideExportBranding({
         loading="eager"
         className={
           constellation
-            ? "absolute right-4 bottom-0 z-30 h-auto w-[280px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
-            : "absolute top-4 right-4 z-30 h-auto w-[180px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
+            ? "guide-export-watermark absolute right-4 bottom-0 z-30 h-auto w-[280px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
+            : "guide-export-watermark absolute top-4 right-4 z-30 h-auto w-[180px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
         }
       />
     </>

components/public/structured-guide.tsx

@@ -398,7 +398,7 @@ function WeaponSectionContent({
   return (
     <section
       className={cn(
-        "flex flex-col gap-6",
+        "artifact-export-root flex flex-col gap-6",
         exporting &&
           "relative isolate overflow-hidden bg-[#070b20] p-10 text-white",
       )}

components/public/weapon-image-export.tsx

@@ -47,7 +47,7 @@ function WeaponComparisonImage({
         <h2 className="max-w-full text-5xl leading-tight font-bold text-balance">
           Weapons {guide.character.name}
         </h2>
-        <p className="mt-1 text-4xl font-bold text-[#f1badd]">
+        <p className="mt-1 text-4xl font-bold text-white">
           {metric === "overallPercent" ? "Overall Damage" : "Personal Damage"}
         </p>
         <p className="mt-2 text-2xl font-semibold">{conditionLabel}</p>
@@ -75,14 +75,14 @@ function WeaponComparisonImage({
               </div>
               <div className="flex min-w-0 items-center">
                 <div
-                  className="flex min-h-16 shrink-0 items-center rounded-r-xl bg-[#ead1e4] px-5 text-[#15121a]"
+                  className="flex min-h-16 shrink-0 items-center rounded-r-xl bg-white px-5 text-[#15121a]"
                   style={{ width: `${width}%` }}
                 >
                   <span className="truncate text-[28px] font-bold">
                     {row.weapon.name} R{row.refinement}
                   </span>
                 </div>
-                <div className="ml-3 flex min-w-0 flex-1 flex-col items-start gap-1 text-[#f1badd] drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]">
+                <div className="ml-3 flex min-w-0 flex-1 flex-col items-start gap-1 text-white drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]">
                   <strong className="shrink-0 text-[30px]">{formattedPercent(row[metric])}</strong>
                   {row.note ? <span className="min-w-0 text-xl leading-tight">{row.note}</span> : null}
                 </div>