From 70027010f5e770a735de61e00d1e8db7ade9f922 Mon Sep 17 00:00:00 2001
From: Drefvelin <54400154+Drefvelin@users.noreply.github.com>
Date: Sun, 27 Sep 2026 15:09:02 +0000
Subject: [PATCH] Let chronicle GIF exports leave off the logo, the Discord
 link, or both.

The corner mark was always burned in. The export panel can now drop each piece on its own, and a date stamp still fits whatever remains.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../chronicle/ChroniclePanels.test.tsx        |   7 +
 .../components/chronicle/ChroniclePanels.tsx  |  75 +++++++--
 .../components/chronicle/ChronicleStudio.tsx  |  11 ++
 .../chronicle/chronicleGifExport.ts           |  75 ++++++---
 .../app/lib/map/chronicleGifFrame.test.ts     |  74 +++++++++
 frontend/app/lib/map/chronicleGifFrame.ts     | 148 ++++++++++++++++++
 6 files changed, 356 insertions(+), 34 deletions(-)

diff --git a/frontend/app/components/chronicle/ChroniclePanels.test.tsx b/frontend/app/components/chronicle/ChroniclePanels.test.tsx
index 4e21871e..93713936 100644
--- a/frontend/app/components/chronicle/ChroniclePanels.test.tsx
+++ b/frontend/app/components/chronicle/ChroniclePanels.test.tsx
@@ -130,6 +130,10 @@ describe("ChroniclePlaybackPanel", () => {
         onGifSizeChange={noop}
         gifStampDay={false}
         onGifStampDayChange={noop}
+        gifWatermark
+        onGifWatermarkChange={noop}
+        gifDiscordLink
+        onGifDiscordLinkChange={noop}
         onExportGif={noop}
         gifStatus={null}
         gifError={null}
@@ -138,6 +142,9 @@ describe("ChroniclePlaybackPanel", () => {
       />
     );
     expect(container.textContent).toContain("2026-08-01");
+    expect(container.textContent).toContain("Watermark");
+    expect(container.textContent).toContain("Discord link");
+    expect(container.textContent).toContain("Stamp the date");
   });
 });
 
diff --git a/frontend/app/components/chronicle/ChroniclePanels.tsx b/frontend/app/components/chronicle/ChroniclePanels.tsx
index 1da81b9b..ba726ace 100644
--- a/frontend/app/components/chronicle/ChroniclePanels.tsx
+++ b/frontend/app/components/chronicle/ChroniclePanels.tsx
@@ -359,6 +359,37 @@ export function ChronicleBuildPanel({
 
 export const CHRONICLE_SPEEDS = [1, 2, 4, 8, 16] as const;
 
+function ExportCheck({
+  label,
+  checked,
+  disabled,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  disabled: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <label
+      className={`mt-2 flex items-start gap-2 text-sm ${
+        disabled
+          ? "cursor-not-allowed text-[var(--tfmc-stone)] opacity-60"
+          : "cursor-pointer text-[var(--tfmc-cream)]"
+      }`}
+    >
+      <input
+        type="checkbox"
+        className="mt-1 accent-[var(--tfmc-accent)]"
+        checked={checked}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+      <span>{label}</span>
+    </label>
+  );
+}
+
 export function ChroniclePlaybackPanel({
   days,
   activeIndex,
@@ -378,6 +409,10 @@ export function ChroniclePlaybackPanel({
   onGifSizeChange,
   gifStampDay,
   onGifStampDayChange,
+  gifWatermark,
+  onGifWatermarkChange,
+  gifDiscordLink,
+  onGifDiscordLinkChange,
   onExportGif,
   gifStatus,
   gifError,
@@ -413,6 +448,12 @@ export function ChroniclePlaybackPanel({
    */
   gifStampDay: boolean;
   onGifStampDayChange: (stamp: boolean) => void;
+  /** The TFMC logo in the corner of the file. Independent of the Discord line. */
+  gifWatermark: boolean;
+  onGifWatermarkChange: (watermark: boolean) => void;
+  /** The discord.gg/tfmc line. Independent of the logo. */
+  gifDiscordLink: boolean;
+  onGifDiscordLinkChange: (discordLink: boolean) => void;
   onExportGif: () => void;
   /**
    * What the export is doing right now, or null when idle. Non-null is also
@@ -535,22 +576,24 @@ export function ChroniclePlaybackPanel({
             ))}
           </select>
         </label>
-        <label
-          className={`mt-2 flex items-start gap-2 text-sm ${
-            exporting
-              ? "cursor-not-allowed text-[var(--tfmc-stone)] opacity-60"
-              : "cursor-pointer text-[var(--tfmc-cream)]"
-          }`}
-        >
-          <input
-            type="checkbox"
-            className="mt-1 accent-[var(--tfmc-accent)]"
-            checked={gifStampDay}
-            disabled={exporting}
-            onChange={(e) => onGifStampDayChange(e.target.checked)}
-          />
-          <span>Stamp the date</span>
-        </label>
+        <ExportCheck
+          label="Watermark"
+          checked={gifWatermark}
+          disabled={exporting}
+          onChange={onGifWatermarkChange}
+        />
+        <ExportCheck
+          label="Discord link"
+          checked={gifDiscordLink}
+          disabled={exporting}
+          onChange={onGifDiscordLinkChange}
+        />
+        <ExportCheck
+          label="Stamp the date"
+          checked={gifStampDay}
+          disabled={exporting}
+          onChange={onGifStampDayChange}
+        />
         <button
           type="button"
           className={`${primaryButtonClass} mt-2 w-full`}
diff --git a/frontend/app/components/chronicle/ChronicleStudio.tsx b/frontend/app/components/chronicle/ChronicleStudio.tsx
index 4b4d68bf..f42e1383 100644
--- a/frontend/app/components/chronicle/ChronicleStudio.tsx
+++ b/frontend/app/components/chronicle/ChronicleStudio.tsx
@@ -245,6 +245,9 @@ export default function ChronicleStudio({ mapId }: { mapId: MapId }) {
    * dates are carried unless the user deliberately strips them.
    */
   const [gifStampDay, setGifStampDay] = useState(true);
+  /** Logo and Discord line both travel with the file unless the user strips them. */
+  const [gifWatermark, setGifWatermark] = useState(true);
+  const [gifDiscordLink, setGifDiscordLink] = useState(true);
   const [gifStatus, setGifStatus] = useState<string | null>(null);
   const [gifError, setGifError] = useState<string | null>(null);
   const [gifNotice, setGifNotice] = useState<string | null>(null);
@@ -1612,6 +1615,8 @@ export default function ChronicleStudio({ mapId }: { mapId: MapId }) {
         loop,
         centroids: geometry.centroids,
         stampDay: gifStampDay,
+        watermark: gifWatermark,
+        discordLink: gifDiscordLink,
         signal: controller.signal,
         onProgress: (progress) => {
           setGifStatus(
@@ -1648,6 +1653,8 @@ export default function ChronicleStudio({ mapId }: { mapId: MapId }) {
   }, [
     gifSize,
     gifStampDay,
+    gifWatermark,
+    gifDiscordLink,
     mapSize,
     speed,
     loop,
@@ -1917,6 +1924,10 @@ export default function ChronicleStudio({ mapId }: { mapId: MapId }) {
                 onGifSizeChange={setGifSize}
                 gifStampDay={gifStampDay}
                 onGifStampDayChange={setGifStampDay}
+                gifWatermark={gifWatermark}
+                onGifWatermarkChange={setGifWatermark}
+                gifDiscordLink={gifDiscordLink}
+                onGifDiscordLinkChange={setGifDiscordLink}
                 onExportGif={() => void exportGif()}
                 gifStatus={gifStatus}
                 gifError={gifError}
diff --git a/frontend/app/components/chronicle/chronicleGifExport.ts b/frontend/app/components/chronicle/chronicleGifExport.ts
index 7594c950..b5ed8486 100644
--- a/frontend/app/components/chronicle/chronicleGifExport.ts
+++ b/frontend/app/components/chronicle/chronicleGifExport.ts
@@ -16,6 +16,7 @@ import {
   chronicleGifTransform,
   chronicleWatermarkLayout,
   type ChronicleGifTransform,
+  type ChronicleWatermarkParts,
 } from "../../lib/map/chronicleGifFrame";
 import { LABEL_INK, type ProvinceCentroids } from "../../lib/mapLabels";
 import { resolveMarkerImageSrc, type MapMarker } from "../../lib/mapMarkers";
@@ -125,6 +126,16 @@ export type ChronicleGifExportOptions = {
    * the day, and painting it twice would be noise.
    */
   stampDay: boolean;
+  /**
+   * The TFMC logo in the corner. Defaults to shown. Independent of the Discord
+   * line and of the date stamp.
+   */
+  watermark?: boolean;
+  /**
+   * The discord.gg/tfmc line. Defaults to shown. Independent of the logo and of
+   * the date stamp.
+   */
+  discordLink?: boolean;
   onProgress?: (progress: ChronicleGifProgress) => void;
   signal?: AbortSignal;
 };
@@ -441,7 +452,8 @@ function drawNationLabels(
 
 /**
  * The mark, bottom-left, and — when `day` is a usable string — the frame's
- * date directly beneath the link in the same scrim box.
+ * date in the same scrim box. The logo and the Discord line are each optional;
+ * with both off and no date, nothing is drawn.
  *
  * The date is drawn exactly as the chronicle stores it — `YYYY-MM-DD`, the
  * key the day file is filed under. It is sortable, unambiguous and the same
@@ -450,25 +462,34 @@ function drawNationLabels(
  * other way round.
  *
  * `day` is null when the "stamp the date" option is off, or when the frame's
- * day is not a usable string — either way the box comes out exactly as the
- * link-only layout, with no reserved space for a line that is not drawn.
+ * day is not a usable string. The box then has no reserved space for a line
+ * that is not drawn. Dropping the logo or the Discord line does the same for
+ * that piece.
  */
 function drawWatermark(
   ctx: AnyCanvasContext,
   size: number,
   logo: HTMLImageElement | null,
   sansStack: string,
-  day: string | null
+  day: string | null,
+  parts: ChronicleWatermarkParts
 ): void {
   const dateText = typeof day === "string" ? day.trim() : "";
   const hasDate = dateText.length > 0;
+  const showLogo = parts.logo !== false;
+  const showLink = parts.link !== false;
+  if (!showLogo && !showLink && !hasDate) return;
 
   // Measured before the layout is computed: the scrim has to know how wide
   // each line turned out, and only the context can say.
-  const probe = chronicleWatermarkLayout(size, 0, hasDate ? 0 : null);
+  const layoutParts = { logo: showLogo, link: showLink };
+  const probe = chronicleWatermarkLayout(size, 0, hasDate ? 0 : null, layoutParts);
   ctx.save();
-  ctx.font = `600 ${probe.fontSize}px ${sansStack}`;
-  const textWidth = ctx.measureText(CHRONICLE_WATERMARK_TEXT).width;
+  let textWidth = 0;
+  if (showLink) {
+    ctx.font = `600 ${probe.fontSize}px ${sansStack}`;
+    textWidth = ctx.measureText(CHRONICLE_WATERMARK_TEXT).width;
+  }
 
   let dateWidth: number | null = null;
   if (hasDate) {
@@ -476,7 +497,7 @@ function drawWatermark(
     dateWidth = ctx.measureText(dateText).width;
   }
 
-  const layout = chronicleWatermarkLayout(size, textWidth, dateWidth);
+  const layout = chronicleWatermarkLayout(size, textWidth, dateWidth, layoutParts);
 
   const { scrim } = layout;
   if (scrim.width > 0 && scrim.height > 0) {
@@ -492,7 +513,7 @@ function drawWatermark(
     ctx.fill();
   }
 
-  if (logo) {
+  if (showLogo && logo && layout.logoSize > 0) {
     ctx.imageSmoothingEnabled = true;
     ctx.drawImage(
       logo,
@@ -508,12 +529,14 @@ function drawWatermark(
   ctx.lineJoin = "round";
   ctx.miterLimit = 2;
 
-  ctx.font = `600 ${layout.fontSize}px ${sansStack}`;
-  ctx.strokeStyle = MARKER_HALO;
-  ctx.lineWidth = layout.haloWidth;
-  ctx.strokeText(CHRONICLE_WATERMARK_TEXT, layout.textX, layout.textBaselineY);
-  ctx.fillStyle = CREAM;
-  ctx.fillText(CHRONICLE_WATERMARK_TEXT, layout.textX, layout.textBaselineY);
+  if (showLink) {
+    ctx.font = `600 ${layout.fontSize}px ${sansStack}`;
+    ctx.strokeStyle = MARKER_HALO;
+    ctx.lineWidth = layout.haloWidth;
+    ctx.strokeText(CHRONICLE_WATERMARK_TEXT, layout.textX, layout.textBaselineY);
+    ctx.fillStyle = CREAM;
+    ctx.fillText(CHRONICLE_WATERMARK_TEXT, layout.textX, layout.textBaselineY);
+  }
 
   if (layout.date && hasDate) {
     ctx.font = `600 ${layout.date.fontSize}px ${sansStack}`;
@@ -589,9 +612,17 @@ export async function exportChronicleGif(
     loop,
     centroids,
     stampDay,
+    watermark,
+    discordLink,
     onProgress,
     signal,
   } = options;
+  const showWatermark = watermark !== false;
+  const showDiscordLink = discordLink !== false;
+  const watermarkParts: ChronicleWatermarkParts = {
+    logo: showWatermark,
+    link: showDiscordLink,
+  };
 
   if (!frames.length) throw new Error("There are no built frames to export.");
 
@@ -622,14 +653,15 @@ export async function exportChronicleGif(
 
   const { serif, sans } = fontStacks();
 
-  const iconSources = new Set<string>([LOGO_SRC]);
+  const iconSources = new Set<string>();
+  if (showWatermark) iconSources.add(LOGO_SRC);
   for (const frame of frames) {
     for (const marker of frame.layers.markers) {
       iconSources.add(resolveMarkerImageSrc(marker.kind, marker.markerSize));
     }
   }
   const images = await loadImages(Array.from(iconSources));
-  const logo = images.get(LOGO_SRC) ?? null;
+  const logo = showWatermark ? (images.get(LOGO_SRC) ?? null) : null;
   // Custom faces are still swapping in on a cold load; measuring or drawing
   // before they settle bakes the fallback metrics into the file.
   try {
@@ -707,7 +739,14 @@ export async function exportChronicleGif(
       drawWarLines(ctx, frame.layers.wars, centroids, transform);
       drawMarkers(ctx, frame.layers.markers, images, transform, sans);
       drawNationLabels(ctx, frame.layers, transform, serif);
-      drawWatermark(ctx, edge, logo, sans, stampDay ? frame.day : null);
+      drawWatermark(
+        ctx,
+        edge,
+        logo,
+        sans,
+        stampDay ? frame.day : null,
+        watermarkParts
+      );
 
       let pixels: ImageData;
       try {
diff --git a/frontend/app/lib/map/chronicleGifFrame.test.ts b/frontend/app/lib/map/chronicleGifFrame.test.ts
index 90c42533..47e8dfe5 100644
--- a/frontend/app/lib/map/chronicleGifFrame.test.ts
+++ b/frontend/app/lib/map/chronicleGifFrame.test.ts
@@ -319,6 +319,80 @@ describe("chronicleWatermarkLayout", () => {
       expect(Number.isFinite(value)).toBe(true);
     }
   });
+
+  it("treats an explicit full mark the same as omitting the parts", () => {
+    for (const size of CHRONICLE_GIF_SIZES) {
+      expect(chronicleWatermarkLayout(size, 120, 90, { logo: true, link: true })).toEqual(
+        chronicleWatermarkLayout(size, 120, 90)
+      );
+    }
+  });
+
+  it("drops the Discord line without leaving a gap beside the logo", () => {
+    const full = chronicleWatermarkLayout(720, 200);
+    const logoOnly = chronicleWatermarkLayout(720, 200, null, { link: false });
+    expect(logoOnly.logoSize).toBe(full.logoSize);
+    expect(logoOnly.scrim.width).toBeLessThan(full.scrim.width);
+    expect(logoOnly.scrim.x + logoOnly.scrim.width).toBeLessThanOrEqual(
+      logoOnly.logoX + logoOnly.logoSize + logoOnly.fontSize
+    );
+  });
+
+  it("drops the logo and starts the Discord line at the margin", () => {
+    const linkOnly = chronicleWatermarkLayout(720, 140, null, { logo: false });
+    expect(linkOnly.logoSize).toBe(0);
+    expect(linkOnly.textX).toBeLessThan(40);
+    expect(linkOnly.scrim.width).toBeGreaterThan(140);
+    expect(linkOnly.scrim.x + linkOnly.scrim.width).toBeLessThanOrEqual(720);
+  });
+
+  it("draws nothing when the logo, the link, and the date are all off", () => {
+    const empty = chronicleWatermarkLayout(720, 140, null, {
+      logo: false,
+      link: false,
+    });
+    expect(empty.scrim.width).toBe(0);
+    expect(empty.scrim.height).toBe(0);
+    expect(empty.date).toBeNull();
+  });
+
+  it("keeps a date stamp when the logo and the Discord line are both off", () => {
+    const dateOnly = chronicleWatermarkLayout(720, 140, 80, {
+      logo: false,
+      link: false,
+    });
+    expect(dateOnly.logoSize).toBe(0);
+    expect(dateOnly.date).not.toBeNull();
+    expect(dateOnly.date!.textX).toBeLessThan(40);
+    expect(dateOnly.scrim.width).toBeGreaterThan(80);
+  });
+
+  it("sits a date beside the logo when the Discord line is off", () => {
+    const w = chronicleWatermarkLayout(720, 200, 90, { link: false });
+    expect(w.date).not.toBeNull();
+    expect(w.date!.textX).toBeGreaterThan(w.logoX + w.logoSize);
+    expect(w.date!.textBaselineY).toBeGreaterThan(w.logoY);
+    expect(w.date!.textBaselineY).toBeLessThan(w.logoY + w.logoSize);
+  });
+
+  it("keeps every reduced mark inside the canvas", () => {
+    const variants = [
+      { logo: false, link: true },
+      { logo: true, link: false },
+      { logo: false, link: false },
+    ] as const;
+    for (const size of CHRONICLE_GIF_SIZES) {
+      for (const parts of variants) {
+        for (const dateWidth of [null, 90]) {
+          const w = chronicleWatermarkLayout(size, 160, dateWidth, parts);
+          expect(w.scrim.x).toBeGreaterThanOrEqual(0);
+          expect(w.scrim.y).toBeGreaterThanOrEqual(0);
+          expect(w.scrim.x + w.scrim.width).toBeLessThanOrEqual(size);
+          expect(w.scrim.y + w.scrim.height).toBeLessThanOrEqual(size);
+        }
+      }
+    }
+  });
 });
 
 describe("chronicleGifDelayMs", () => {
diff --git a/frontend/app/lib/map/chronicleGifFrame.ts b/frontend/app/lib/map/chronicleGifFrame.ts
index 381a24ef..df01487e 100644
--- a/frontend/app/lib/map/chronicleGifFrame.ts
+++ b/frontend/app/lib/map/chronicleGifFrame.ts
@@ -250,6 +250,14 @@ export type ChronicleWatermarkLayout = {
 
 export const CHRONICLE_WATERMARK_TEXT = "discord.gg/tfmc";
 
+/** Which pieces of the corner mark to reserve space for. Omitted means shown. */
+export type ChronicleWatermarkParts = {
+  /** The TFMC logo. */
+  logo?: boolean;
+  /** The discord.gg/tfmc line. */
+  link?: boolean;
+};
+
 /**
  * The TFMC mark, bottom-left, sized as a fraction of the export edge so it
  * reads at 480 without swallowing the corner at 1080. Both the fraction and the
@@ -268,8 +276,32 @@ export const CHRONICLE_WATERMARK_TEXT = "discord.gg/tfmc";
  * downward-in-content-but-anchored-in-place — the whole block shifts up so its
  * bottom still sits `margin` above the edge, the same anchor the link-only box
  * uses — and add a second, smaller line below the link sharing its left edge.
+ *
+ * `parts` drops the logo, the Discord line, or both. A dropped piece takes no
+ * column, so the scrim closes around whatever remains (including a date on its
+ * own). Omitting `parts` is the full mark.
  */
 export function chronicleWatermarkLayout(
+  size: number,
+  textWidth: number,
+  dateWidth?: number | null,
+  parts?: ChronicleWatermarkParts
+): ChronicleWatermarkLayout {
+  const showLogo = parts?.logo !== false;
+  const showLink = parts?.link !== false;
+  if (showLogo && showLink) {
+    return chronicleFullWatermarkLayout(size, textWidth, dateWidth);
+  }
+  return chronicleReducedWatermarkLayout(
+    size,
+    textWidth,
+    dateWidth,
+    showLogo,
+    showLink
+  );
+}
+
+function chronicleFullWatermarkLayout(
   size: number,
   textWidth: number,
   dateWidth?: number | null
@@ -356,6 +388,122 @@ export function chronicleWatermarkLayout(
   };
 }
 
+/**
+ * The same corner, with the logo, the Discord line, or both left out.
+ *
+ * A missing column is not an empty gap: the text starts at the margin when
+ * there is no logo, and the scrim hugs the logo when there is no text. The
+ * date, when stamped, stays the second line under a remaining Discord link
+ * and becomes the only text line when that link is gone.
+ */
+function chronicleReducedWatermarkLayout(
+  size: number,
+  textWidth: number,
+  dateWidth: number | null | undefined,
+  showLogo: boolean,
+  showLink: boolean
+): ChronicleWatermarkLayout {
+  const edge = Math.max(1, Math.round(finite(size, DEFAULT_CHRONICLE_GIF_SIZE)));
+  const margin = Math.round(clamp(edge * 0.028, 10, 32));
+  const fontSize = Math.round(clamp(edge * 0.034, 13, 32));
+  const hasDate = dateWidth != null;
+  const empty: ChronicleWatermarkLayout = {
+    logoX: margin,
+    logoY: edge - margin,
+    logoSize: 0,
+    fontSize,
+    textX: margin,
+    textBaselineY: edge - margin,
+    haloWidth: Math.max(2, fontSize * 0.3),
+    scrim: { x: 0, y: 0, width: 0, height: 0, radius: 0 },
+    date: null,
+  };
+  if (!showLogo && !showLink && !hasDate) return empty;
+
+  const dateFontSize = hasDate ? Math.max(11, Math.round(fontSize * 0.68)) : 0;
+  const lineGap =
+    showLink && hasDate ? Math.round(clamp(fontSize * 0.28, 3, 10)) : 0;
+  const fullLogo = Math.round(clamp(edge * 0.1, 40, 100));
+  const logoSize = showLogo ? fullLogo : 0;
+  const hasText = showLink || hasDate;
+  const gap =
+    showLogo && hasText ? Math.round(clamp(edge * 0.018, 6, 18)) : 0;
+
+  const logoX = margin;
+  const blockBottom = edge - margin;
+  const linkLine = showLink ? fontSize : 0;
+  const textStackHeight = linkLine + lineGap + dateFontSize;
+  const rowHeight = Math.max(logoSize, textStackHeight);
+  const rowTop = blockBottom - rowHeight;
+  const logoY = showLogo ? rowTop + (rowHeight - logoSize) / 2 : rowTop;
+  const textX = logoX + (showLogo ? logoSize + gap : 0);
+  const stackTop = rowTop + (rowHeight - textStackHeight) / 2;
+
+  let textBaselineY: number;
+  let dateTextBaselineY = 0;
+  if (showLink && hasDate) {
+    textBaselineY = stackTop + fontSize;
+    dateTextBaselineY = textBaselineY + lineGap + dateFontSize;
+  } else if (showLink && showLogo) {
+    textBaselineY = logoY + logoSize / 2 + fontSize * 0.36;
+  } else if (showLink) {
+    textBaselineY = stackTop + fontSize * 0.8;
+  } else if (hasDate && showLogo) {
+    dateTextBaselineY = logoY + logoSize / 2 + dateFontSize * 0.36;
+    textBaselineY = dateTextBaselineY;
+  } else {
+    dateTextBaselineY = stackTop + dateFontSize * 0.8;
+    textBaselineY = dateTextBaselineY;
+  }
+
+  const measured = showLink ? Math.max(0, finite(textWidth, 0)) : 0;
+  const dateMeasured = hasDate ? Math.max(0, finite(dateWidth, 0)) : 0;
+  const pad = Math.round(fontSize * 0.5);
+  const contentTop = showLogo
+    ? hasText
+      ? Math.min(logoY, stackTop)
+      : logoY
+    : stackTop;
+  const contentRight =
+    hasText
+      ? textX + Math.max(measured, dateMeasured)
+      : logoX + logoSize;
+  const contentBottom = Math.max(
+    showLogo ? logoY + logoSize : 0,
+    showLink ? textBaselineY + fontSize * 0.25 : 0,
+    hasDate ? dateTextBaselineY + dateFontSize * 0.3 : 0
+  );
+  const scrimX = Math.max(0, (showLogo ? logoX : textX) - pad);
+  const scrimY = Math.max(0, contentTop - pad);
+  const scrimRight = Math.min(edge, contentRight + pad);
+  const scrimBottom = Math.min(edge, contentBottom + pad);
+
+  return {
+    logoX,
+    logoY,
+    logoSize,
+    fontSize,
+    textX,
+    textBaselineY,
+    haloWidth: Math.max(2, fontSize * 0.3),
+    scrim: {
+      x: scrimX,
+      y: scrimY,
+      width: Math.max(0, scrimRight - scrimX),
+      height: Math.max(0, scrimBottom - scrimY),
+      radius: Math.round((logoSize || fontSize) * 0.16),
+    },
+    date: hasDate
+      ? {
+          fontSize: dateFontSize,
+          textX,
+          textBaselineY: dateTextBaselineY,
+          haloWidth: Math.max(1.5, dateFontSize * 0.3),
+        }
+      : null,
+  };
+}
+
 /**
  * Playback speed (days per second) -> per-frame delay, in the 10 ms units GIF
  * actually stores. Rounding here rather than inside the encoder means the