feat(constellations) : add infographic image export

components/public/structured-guide.tsx

@@ -17,6 +17,7 @@ import { SiteHeader } from "@/components/public/site-header";
 import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { TeamSearch } from "@/components/public/team-search";
 import { GuideImageExport } from "@/components/public/guide-image-export";
+import { ConstellationImage } from "@/components/public/constellation-image";
 import { LiveRefresh } from "@/components/live-refresh";
 import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
 import type { PublicGuide } from "@/lib/guides/queries";
@@ -900,6 +901,20 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
         <div key={group.id} className="flex flex-col gap-4">
           {groups.length > 1 ? <h2 className="font-heading text-2xl font-semibold">Condition {groupIndex + 1}</h2> : null}
           {group.note ? <p className="whitespace-pre-wrap text-muted-foreground">{group.note}</p> : null}
+          <div>
+            <GuideImageExport
+              fileName={`${guide.name}-Constellations${groups.length > 1 ? `-Condition-${groupIndex + 1}` : ""}.png`}
+              width={1500}
+              height={1500}
+              captureClassName="p-0"
+            >
+              <ConstellationImage
+                guide={guide}
+                group={group}
+                sectionNote={note}
+              />
+            </GuideImageExport>
+          </div>
           <div className="grid gap-4 md:grid-cols-2">
             {group.rows.map((row) => (
               <Card key={row.level}>