feat : dreamgineer ask me try to use this and now im ran out of token sad [no ci]

components/public/artifact-image-export.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { useState, type ReactNode } from "react";
+import { useState } from "react";
 import { DownloadIcon } from "lucide-react";
 
-import { GuideImageExport } from "@/components/public/guide-image-export";
+import { TakumiImageExport } from "@/components/public/takumi-image-export";
+import type { PublicGuide } from "@/lib/guides/queries";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -27,13 +28,13 @@ const sectionOptions = [
 type ArtifactExportSection = (typeof sectionOptions)[number][0];
 
 export function ArtifactImageExport({
-  children,
+  guide,
   fileName,
   hasNote,
   targetConditionLabels,
   recommendedConditionLabels,
 }: {
-  children: ReactNode;
+  guide: PublicGuide;
   fileName: string;
   hasNote: boolean;
   targetConditionLabels: readonly string[];
@@ -47,15 +48,6 @@ export function ArtifactImageExport({
   const [targetCondition, setTargetCondition] = useState("0");
   const showNote = hasNote && includeNote;
   const entireSection = sections.size === sectionOptions.length;
-  const hiddenSections = sectionOptions
-    .filter(([value]) => !sections.has(value))
-    .map(([value]) => `[data-artifact-export-section="${value}"]{display:none!important}`)
-    .join("");
-  const targetRule = `[data-target-condition]:not([data-target-condition="${targetCondition}"]){display:none!important}`;
-  const recommendedRule = `[data-recommended-condition]:not([data-recommended-condition="${recommendedCondition}"]){display:none!important}`;
-  const noteRule = showNote
-    ? ""
-    : '[data-artifact-export-section="note"]{display:none!important}';
   const onlySection = sections.size === 1 ? [...sections][0] : null;
   const exportWidth = onlySection === "best-stats"
     ? 700
@@ -63,16 +55,6 @@ export function ArtifactImageExport({
       ? 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-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}"
-        : "";
 
   return (
     <Dialog>
@@ -170,16 +152,13 @@ export function ArtifactImageExport({
             </ToggleGroup>
           </div>
         ) : null}
-        <GuideImageExport
+        <TakumiImageExport
           fileName={fileName}
           width={exportWidth}
           height={exportHeight}
           disabled={sections.size === 0}
-          captureClassName="p-0"
-        >
-          <style>{hiddenSections + targetRule + recommendedRule + noteRule + hideEmptyRightColumn + layoutRules}</style>
-          {children}
-        </GuideImageExport>
+          template={{ kind: "artifact", data: { guide, sections: [...sections], recommendedCondition: Number(recommendedCondition), targetCondition: Number(targetCondition), includeNote: showNote } }}
+        />
       </DialogContent>
     </Dialog>
   );