@drawnagency/primitives 0.1.90 → 0.1.92

package/src/media/compose-preview.ts

@@ -10,6 +10,9 @@ export interface PreviewImageInputs {
   invertLogo: boolean;
   siteName: string;
   headingFont: string;
+  /** The site's Google Fonts CSS URL (or null for system-ui), used to load the
+   *  heading font before drawing so text mode never falls back to system-ui. */
+  googleFontsUrl: string | null;
   /** Computed contrasting text color (text mode). */
   textColor: string;
 }
@@ -17,6 +20,53 @@ export interface PreviewImageInputs {
 const WIDTH = 1200;
 const HEIGHT = 630;
 
+/**
+ * Bump when the composition logic changes so already-composed rasters (stamped
+ * with the old version, or 0 for pre-versioning ones) regenerate on next editor
+ * open. v2 = load the Google heading font before drawing + draw at weight 700.
+ */
+export const PREVIEW_COMPOSE_VERSION = 2;
+
+// The raster draws the site name at this weight; the loader ensures this exact
+// weight is available so canvas doesn't silently fall back to a nearest weight.
+const HEADING_WEIGHT = 700;
+
+/**
+ * Ensure the heading font is actually loaded before canvas draws with it.
+ * `document.fonts.load` only fetches a family that already has a matching
+ * @font-face rule registered; in the editor that rule comes from a <link> that
+ * may not be parsed yet when composition runs, so an ambient load() can resolve
+ * empty and the draw silently falls back to system-ui. If the ambient load
+ * yields nothing, fetch the Google Fonts CSS and register the weight-700
+ * face(s) explicitly via the CSS Font Loading API.
+ */
+async function loadHeadingFont(family: string, googleFontsUrl: string | null): Promise<void> {
+  if (!family || family === "system-ui" || !googleFontsUrl || typeof FontFace === "undefined") return;
+  const spec = `${HEADING_WEIGHT} 84px "${family}"`;
+  try {
+    const loaded = await document.fonts.load(spec);
+    if (loaded.length > 0) return;
+  } catch {
+    // fall through to explicit registration
+  }
+  try {
+    const css = await (await fetch(googleFontsUrl)).text();
+    const blocks = css.match(/@font-face\s*\{[^}]*\}/g) ?? [];
+    const wanted = blocks.filter((b) => new RegExp(`font-weight:\\s*${HEADING_WEIGHT}\\b`).test(b));
+    await Promise.all(
+      (wanted.length ? wanted : blocks).map(async (block) => {
+        const url = block.match(/url\(([^)]+)\)/)?.[1];
+        if (!url) return;
+        const face = new FontFace(family, `url(${url})`, { weight: String(HEADING_WEIGHT) });
+        await face.load();
+        document.fonts.add(face);
+      }),
+    );
+  } catch {
+    // give up — the draw below falls back to system-ui
+  }
+}
+
 /**
  * Composes the 1200×630 social-preview raster in the browser (Canvas API only,
  * no dependency). Returns a WebP blob. Must run client-side (uses document/Image
@@ -60,13 +110,15 @@ export async function composePreviewImage(inputs: PreviewImageInputs): Promise<B
 
   if (!drewLogo) {
     if (document.fonts?.ready) await document.fonts.ready;
-    // fillText doesn't itself trigger a font load — explicitly load the exact
-    // weight/family used below so it's available before we draw.
-    await document.fonts.load(`600 84px ${inputs.headingFont}`).catch(() => {});
+    // Load the heading font (exact weight) before drawing — fillText doesn't
+    // itself trigger a webfont load, so without this canvas falls back silently.
+    await loadHeadingFont(inputs.headingFont, inputs.googleFontsUrl);
     ctx.fillStyle = inputs.textColor;
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
-    ctx.font = `600 84px ${inputs.headingFont}, system-ui, sans-serif`;
+    // Quote the family: multi-word names ("Playfair Display") break the CSS font
+    // shorthand parse when unquoted, which would drop the whole declaration.
+    ctx.font = `${HEADING_WEIGHT} 84px "${inputs.headingFont}", system-ui, sans-serif`;
     ctx.fillText(inputs.siteName, WIDTH / 2, HEIGHT / 2, WIDTH * 0.86);
   }
 

package/src/media/preview-inputs.ts

@@ -19,7 +19,7 @@ export function derivePreviewInputs(
   siteConfig: SiteConfig,
   resolveLogoUrl: (imageId: string) => string | null,
 ): { inputs: PreviewImageInputs; signature: string } {
-  const { logo, darkMode, primaryColor, siteName, headingFont } = siteConfig;
+  const { logo, darkMode, primaryColor, siteName, headingFont, googleFontsUrl } = siteConfig;
   const dark = darkMode === "dark";
 
   let mode: "logo" | "text" = "text";
@@ -43,6 +43,7 @@ export function derivePreviewInputs(
     invertLogo,
     siteName,
     headingFont,
+    googleFontsUrl,
     textColor: contrastColor(primaryColor),
   };
 
@@ -53,6 +54,7 @@ export function derivePreviewInputs(
     invertLogo: inputs.invertLogo,
     siteName: inputs.siteName,
     headingFont: inputs.headingFont,
+    googleFontsUrl: inputs.googleFontsUrl,
     textColor: inputs.textColor,
   });
 

package/src/schemas/site-config.ts

@@ -245,6 +245,10 @@ export const SiteConfigSchema = z.object({
       imageId: z.string(),
       width: z.number().int().positive(),
       height: z.number().int().positive(),
+      // Compose-logic version that produced this raster. Pre-existing rasters
+      // (and manifests written before this field) default to 0, which is below
+      // any current PREVIEW_COMPOSE_VERSION, so the editor regenerates them.
+      version: z.number().int().nonnegative().default(0),
     })
     .nullable()
     .default(null),