@sonordev/site-kit 5.7.0 → 5.8.0

package/dist/og/route-fit.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @sonordev/site-kit/og — title fitting for the runtime (Satori) card.
+ *
+ * The build-time card is fitted in the page: Chrome measures the rendered
+ * title and steps it down until it fits (template.ts). The runtime card is
+ * Satori, which has no DOM to measure, so its title sat at a fixed 84px,
+ * uppercase, with no fitting. Beside the 430px photo that holds about 11
+ * characters a line, so a real post title ran off the bottom of the card.
+ * watsonhac.com, reinhart and vsf-consulting-nextjs each worked around it by
+ * dropping the photo past a hand-picked length (40 or 50 characters).
+ *
+ * This does what the build-time fitter does, from an estimate instead of a
+ * measurement: the same size range (TITLE_MAX_PX down to TITLE_MIN_PX, in 2px
+ * steps), word-wrapped at an estimated glyph width against the real column
+ * width and the height the kicker, subtitle and bar leave. When the title
+ * can't fit beside the photo even at the floor, the photo goes and the title
+ * gets the full width.
+ *
+ * The estimate is deliberately wide (uppercase, bold-ish) so an unusual
+ * face errs toward a smaller title, never an overflowing one, and the title
+ * box clips at its height as the backstop.
+ *
+ * Pure: no DOM, no Node built-ins. Geometry constants are the card's own
+ * (route.tsx imports them), so the two can't drift.
+ */
+/** The runtime card's layout, in px. route.tsx renders exactly this. */
+export declare const ROUTE_CARD: {
+    readonly padX: 68;
+    readonly gap: 48;
+    readonly photoWidth: 430;
+    readonly photoHeight: 470;
+    readonly barHeight: 74;
+    /** Breathing room above and below the copy column. */
+    readonly padY: 44;
+    readonly kickerPx: 24;
+    readonly kickerGap: 18;
+    readonly subtitlePx: 30;
+    readonly subtitleGap: 20;
+    readonly subtitleLineHeight: 1.3;
+    readonly titleLineHeight: 1.02;
+};
+/** Estimated width of `text` set uppercase at `px`. */
+export declare function uppercaseWidth(text: string, px: number): number;
+/**
+ * Lines `text` wraps to in a column `width` px wide, greedy by word, the way
+ * the browser and Satori wrap. `\n` is a hard break. Returns Infinity when a
+ * single word is wider than the column: it can't wrap, so no line count fits.
+ */
+export declare function wrappedLines(text: string, width: number, measure: (s: string) => number): number;
+export interface RouteFitInput {
+    title: string;
+    kicker?: string;
+    subtitle?: string;
+    /** A photo was offered. */
+    photo: boolean;
+    /** The card has a bottom bar. */
+    bar: boolean;
+}
+export interface RouteFit {
+    /** Title size in px. */
+    titlePx: number;
+    /** Keep the photo. False when the title only fits at full width. */
+    photo: boolean;
+    /** Height the title box may use; route.tsx clips the title to it. */
+    titleMaxHeight: number;
+    /** The title fits at `titlePx` by the estimate (false only at the floor, full width). */
+    fits: boolean;
+}
+/**
+ * Size the title, and decide whether the photo stays.
+ *
+ * Beside the photo first, since the photo is the page's own image and worth
+ * keeping. If even the floor size doesn't fit there, drop the photo and fit
+ * the full width. If that fails too, the title sits at the floor and clips.
+ */
+export declare function fitRouteTitle(input: RouteFitInput): RouteFit;
+//# sourceMappingURL=route-fit.d.ts.map

package/dist/og/route-fit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-fit.d.ts","sourceRoot":"","sources":["../../src/og/route-fit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,wEAAwE;AACxE,eAAO,MAAM,UAAU;aACrB,IAAI,EAAE,EAAE;aACR,GAAG,EAAE,EAAE;aACP,UAAU,EAAE,GAAG;aACf,WAAW,EAAE,GAAG;aAChB,SAAS,EAAE,EAAE;IACb,sDAAsD;aACtD,IAAI,EAAE,EAAE;aACR,QAAQ,EAAE,EAAE;aACZ,SAAS,EAAE,EAAE;aACb,UAAU,EAAE,EAAE;aACd,WAAW,EAAE,EAAE;aACf,kBAAkB,EAAE,GAAG;aACvB,eAAe,EAAE,IAAI;CACb,CAAA;AAiBV,uDAAuD;AACvD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAM/D;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAC7B,MAAM,CAsBR;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2BAA2B;IAC3B,KAAK,EAAE,OAAO,CAAA;IACd,iCAAiC;IACjC,GAAG,EAAE,OAAO,CAAA;CACb;AAED,MAAM,WAAW,QAAQ;IACvB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,KAAK,EAAE,OAAO,CAAA;IACd,qEAAqE;IACrE,cAAc,EAAE,MAAM,CAAA;IACtB,yFAAyF;IACzF,IAAI,EAAE,OAAO,CAAA;CACd;AAiCD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,CAe5D"}

package/dist/og/route.d.ts

@@ -1,43 +1,81 @@
 /**
  * @sonordev/site-kit/og/route — tier 2: per-entity runtime OG cards.
  *
- * `sonor-setup og` covers the site-wide static card. This factory covers the
- * cards that must vary per URL — one per blog post, per event, per product —
- * rendered on demand with next/og (Satori) in a route handler:
+ * `sonor-setup og` covers the build-time cards: the site card and one per
+ * route. This covers the cards that must vary per URL and can't wait for a
+ * rebuild — one per blog post, per event, per product — rendered on demand
+ * with next/og (Satori).
+ *
+ * TWO SHAPES, ONE CARD:
+ *
+ * `createOgImage` is the metadata file convention, and the one to reach for.
+ * Next calls an `opengraph-image.tsx` default export with `{ params }` and
+ * wires og:image and twitter:image for the page by itself, and `sonor-setup
+ * og` sees the file and leaves the folder alone:
  *
  * ```tsx
- * // app/blog/[slug]/opengraph-image/route.tsx
- * import { createOgImageRoute } from '@sonordev/site-kit/og/route'
+ * // app/blog/[slug]/opengraph-image.tsx
+ * import { createOgImage } from '@sonordev/site-kit/og/route'
  * import { getBlogPost } from '@sonordev/site-kit/blog/server'
  *
- * export const GET = createOgImageRoute(async (_req, { params }) => {
- *   const post = await getBlogPost((await params).slug)
- *   if (!post) return null
+ * export { size, contentType } from '@sonordev/site-kit/og/route'
+ * export const alt = 'From the Acme blog'
+ *
+ * export default createOgImage<{ slug: string }>(async ({ slug }) => {
+ *   const post = await getBlogPost(slug)
+ *   if (!post) return null                  // 404: a bad slug never renders a card
  *   return {
  *     theme: { bg: '#111110', text: '#faf6f0', accent: '#ad1d25' },
  *     kicker: 'From the blog',
  *     title: post.title,
- *     photoUrl: post.featured_image_url,   // the image from the page
+ *     photoUrl: post.featured_image,       // absolute URL (Satori requirement)
  *     bar: 'yourdomain.com',
  *   }
  * })
  * ```
  *
+ * The page then passes `images: false` to generateBlogPostMetadata: declared
+ * images beat the file convention.
+ *
+ * `createOgImageRoute` is a plain route handler, `GET(request, { params })`,
+ * for a card served at a URL of your choosing (`app/og/[slug]/route.tsx`).
+ * Next doesn't wire it into metadata; the page declares it.
+ *
+ * Sites needed an adapter between the two before `createOgImage` existed
+ * (watsonhac.com, reinhart, vsf-consulting-nextjs: a default export that
+ * built a dummy Request to call the GET handler).
+ *
  * SATORI CONSTRAINTS (why this is not the static template): flexbox-only CSS
  * subset, no external stylesheets, images must be absolute URLs or data URIs,
  * and fonts must be provided as ArrayBuffers via `fonts` — Satori cannot load
  * Google Fonts at runtime. Without fonts it falls back to Satori's default
  * face; brand-critical cards should pass font data (fetch the TTF once at
  * module init and reuse the promise).
+ *
+ * TITLE FITTING: Satori can't measure, so the title is sized from an estimate
+ * (og/route-fit.ts) over the same range the build-time card uses, and the
+ * photo is dropped when the title can't fit beside it. Long post titles no
+ * longer run off the card.
  */
 import React from 'react';
+export interface OgRouteTheme {
+    bg: string;
+    text: string;
+    accent: string;
+    muted?: string;
+    /** og.config.ts's surface color. Only used as a bar-text candidate. */
+    surface?: string;
+    /**
+     * Bottom-bar text, set on `accent`. Defaults to the first of `surface`,
+     * `bg`, `text` that reaches WCAG AA for large text (3:1) against the
+     * accent. It used to be `text`, which is unreadable wherever text and
+     * accent are both strong (navy on crimson).
+     */
+    barText?: string;
+}
 export interface OgRouteCard {
-    theme: {
-        bg: string;
-        text: string;
-        accent: string;
-        muted?: string;
-    };
+    /** og.config.ts's `theme` can be passed as is. */
+    theme: OgRouteTheme;
     kicker?: string;
     title: string;
     subtitle?: string;
@@ -52,6 +90,15 @@ export interface OgRouteFont {
     weight?: number;
     style?: 'normal' | 'italic';
 }
+export interface OgImageOptions {
+    fonts?: OgRouteFont[];
+}
+/** For `export { size, contentType } from '@sonordev/site-kit/og/route'` in an opengraph-image file. */
+export declare const size: {
+    width: number;
+    height: number;
+};
+export declare const contentType = "image/png";
 type Resolver<Ctx> = (req: Request, ctx: Ctx) => Promise<OgRouteCard | null> | OgRouteCard | null;
 /**
  * Satori-safe element tree — exported for tests and for sites that want to
@@ -59,13 +106,26 @@ type Resolver<Ctx> = (req: Request, ctx: Ctx) => Promise<OgRouteCard | null> | O
  */
 export declare function ogRouteElement(card: OgRouteCard): React.ReactElement;
 /**
- * Route handler factory. Returns 404 when the resolver returns null, so a
- * bad slug never renders a broken card.
+ * Metadata file-convention factory, for `export default` from an
+ * `opengraph-image.tsx` (or `twitter-image.tsx`). Next calls it with
+ * `{ params }` (a promise on Next 15+) and, with `generateImageMetadata`, an
+ * `id`. The resolver gets both already awaited. Return null for a 404.
+ */
+export declare function createOgImage<Params extends Record<string, string | string[]> = Record<string, string>>(resolve: (params: Params, ctx: {
+    id?: string;
+}) => Promise<OgRouteCard | null> | OgRouteCard | null, options?: OgImageOptions): (props: {
+    params: Params | Promise<Params>;
+    id?: string | Promise<string>;
+}) => Promise<Response>;
+/**
+ * Route handler factory, `export const GET` from a `route.tsx`. Returns 404
+ * when the resolver returns null, so a bad slug never renders a broken card.
+ *
+ * Next doesn't wire a route handler into metadata. For a card Next should
+ * attach to the page by itself, use `createOgImage` in `opengraph-image.tsx`.
  */
 export declare function createOgImageRoute<Ctx = {
     params: Promise<Record<string, string>>;
-}>(resolve: Resolver<Ctx>, options?: {
-    fonts?: OgRouteFont[];
-}): (req: Request, ctx: Ctx) => Promise<Response>;
+}>(resolve: Resolver<Ctx>, options?: OgImageOptions): (req: Request, ctx: Ctx) => Promise<Response>;
 export {};
 //# sourceMappingURL=route.d.ts.map

package/dist/og/route.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../src/og/route.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACnE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,WAAW,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC5B;AAED,KAAK,QAAQ,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,GAAG,IAAI,CAAA;AAEjG;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAuDpE;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,GAAG;IAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CAAE,EAClF,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,EACtB,OAAO,GAAE;IAAE,KAAK,CAAC,EAAE,WAAW,EAAE,CAAA;CAAO,SAER,OAAO,OAAO,GAAG,KAAG,OAAO,CAAC,QAAQ,CAAC,CAarE"}
+{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../src/og/route.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,kDAAkD;IAClD,KAAK,EAAE,YAAY,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,WAAW,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,WAAW,EAAE,CAAA;CACtB;AAED,wGAAwG;AACxG,eAAO,MAAM,IAAI;;;CAAyC,CAAA;AAC1D,eAAO,MAAM,WAAW,cAAc,CAAA;AAEtC,KAAK,QAAQ,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,GAAG,IAAI,CAAA;AAEjG;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CA8GpE;AAkBD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACrG,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,GAAG,IAAI,EACnG,OAAO,GAAE,cAAmB,WAEO;IACjC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;IAChC,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;CAC9B,KAAG,OAAO,CAAC,QAAQ,CAAC,CAKtB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,GAAG;IAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CAAE,EAClF,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,EACtB,OAAO,GAAE,cAAmB,SAEG,OAAO,OAAO,GAAG,KAAG,OAAO,CAAC,QAAQ,CAAC,CAGrE"}

package/dist/og/route.js

@@ -1,11 +1,118 @@
 'use strict';
 
+var chunkCUNZAD46_js = require('../chunk-CUNZAD46.js');
 require('../chunk-SNAQBZPT.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+// src/og/route-fit.ts
+var ROUTE_CARD = {
+  padX: 68,
+  gap: 48,
+  photoWidth: 430,
+  photoHeight: 470,
+  barHeight: 74,
+  /** Breathing room above and below the copy column. */
+  padY: 44,
+  kickerPx: 24,
+  kickerGap: 18,
+  subtitlePx: 30,
+  subtitleGap: 20,
+  subtitleLineHeight: 1.3,
+  titleLineHeight: 1.02
+};
+var UPPER_EM = 0.68;
+var NARROW_EM = 0.32;
+var SPACE_EM = 0.3;
+var BODY_EM = 0.52;
+var KICKER_EM = 0.72 + 6 / 24;
+var NARROW = /[IJ1.,:;'’!|()\-]/;
+function uppercaseWidth(text, px) {
+  let em = 0;
+  for (const ch of text.toUpperCase()) {
+    em += ch === " " ? SPACE_EM : NARROW.test(ch) ? NARROW_EM : UPPER_EM;
+  }
+  return em * px;
+}
+function wrappedLines(text, width, measure) {
+  let lines = 0;
+  for (const paragraph of text.split("\n")) {
+    const words = paragraph.split(/\s+/).filter(Boolean);
+    if (!words.length) {
+      lines++;
+      continue;
+    }
+    let current = "";
+    for (const word of words) {
+      if (measure(word) > width) return Infinity;
+      const next = current ? `${current} ${word}` : word;
+      if (current && measure(next) > width) {
+        lines++;
+        current = word;
+      } else {
+        current = next;
+      }
+    }
+    lines++;
+  }
+  return lines;
+}
+function columnWidth(photo) {
+  const inner = chunkCUNZAD46_js.OG_WIDTH - ROUTE_CARD.padX * 2;
+  return photo ? inner - ROUTE_CARD.photoWidth - ROUTE_CARD.gap : inner;
+}
+function titleBudget(input, width) {
+  const c = ROUTE_CARD;
+  let height = chunkCUNZAD46_js.OG_HEIGHT - (input.bar ? c.barHeight : 0) - c.padY * 2;
+  if (input.kicker) {
+    const lines = wrappedLines(input.kicker, width, (s) => s.length * KICKER_EM * c.kickerPx);
+    height -= Math.min(lines, 2) * c.kickerPx * 1.2 + c.kickerGap;
+  }
+  if (input.subtitle) {
+    const lines = wrappedLines(input.subtitle, width, (s) => s.length * BODY_EM * c.subtitlePx);
+    height -= Math.min(lines, 3) * c.subtitlePx * c.subtitleLineHeight + c.subtitleGap;
+  }
+  return height;
+}
+function largestFit(input, photo) {
+  const width = columnWidth(photo);
+  const budget = titleBudget(input, width);
+  for (let px = chunkCUNZAD46_js.TITLE_MAX_PX; px >= chunkCUNZAD46_js.TITLE_MIN_PX; px -= 2) {
+    const lines = wrappedLines(input.title, width, (s) => uppercaseWidth(s, px));
+    if (lines * px * ROUTE_CARD.titleLineHeight <= budget) return { px, budget };
+  }
+  return null;
+}
+function fitRouteTitle(input) {
+  if (input.photo) {
+    const withPhoto = largestFit(input, true);
+    if (withPhoto) {
+      return { titlePx: withPhoto.px, photo: true, titleMaxHeight: withPhoto.budget, fits: true };
+    }
+  }
+  const full = largestFit(input, false);
+  if (full) return { titlePx: full.px, photo: false, titleMaxHeight: full.budget, fits: true };
+  return {
+    titlePx: chunkCUNZAD46_js.TITLE_MIN_PX,
+    photo: false,
+    titleMaxHeight: titleBudget(input, columnWidth(false)),
+    fits: false
+  };
+}
+var size = { width: chunkCUNZAD46_js.OG_WIDTH, height: chunkCUNZAD46_js.OG_HEIGHT };
+var contentType = "image/png";
 function ogRouteElement(card) {
   const { theme } = card;
   const muted = theme.muted || theme.text;
+  const hasPhoto = !!card.photoUrl && /^(https?:|data:)/.test(card.photoUrl);
+  const fit = fitRouteTitle({
+    title: card.title,
+    kicker: card.kicker,
+    subtitle: card.subtitle,
+    photo: hasPhoto,
+    bar: !!card.bar
+  });
+  const titleLine = fit.titlePx * ROUTE_CARD.titleLineHeight;
+  const titleMaxHeight = Math.max(1, Math.floor(fit.titleMaxHeight / titleLine)) * titleLine;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -19,22 +126,73 @@ function ogRouteElement(card) {
         fontSize: 32
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flex: 1, alignItems: "center", padding: "0 68px", gap: 48 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", flex: 1 }, children: [
-            card.kicker ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 24, letterSpacing: 6, textTransform: "uppercase", color: theme.accent, marginBottom: 18, fontWeight: 700 }, children: card.kicker }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 84, fontWeight: 800, lineHeight: 1.02, textTransform: "uppercase" }, children: card.title }),
-            card.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 30, marginTop: 20, color: muted, lineHeight: 1.3 }, children: card.subtitle }) : null
-          ] }),
-          card.photoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: card.photoUrl,
-              width: 430,
-              height: 470,
-              style: { borderRadius: 24, objectFit: "cover" }
-            }
-          ) : null
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flex: 1,
+              alignItems: "center",
+              padding: `0 ${ROUTE_CARD.padX}px`,
+              gap: ROUTE_CARD.gap,
+              minHeight: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }, children: [
+                card.kicker ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: ROUTE_CARD.kickerPx,
+                      letterSpacing: 6,
+                      textTransform: "uppercase",
+                      color: theme.accent,
+                      marginBottom: ROUTE_CARD.kickerGap,
+                      fontWeight: 700
+                    },
+                    children: card.kicker
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      fontSize: fit.titlePx,
+                      fontWeight: 800,
+                      lineHeight: ROUTE_CARD.titleLineHeight,
+                      textTransform: "uppercase",
+                      maxHeight: titleMaxHeight,
+                      overflow: "hidden"
+                    },
+                    children: card.title
+                  }
+                ),
+                card.subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: ROUTE_CARD.subtitlePx,
+                      marginTop: ROUTE_CARD.subtitleGap,
+                      color: muted,
+                      lineHeight: ROUTE_CARD.subtitleLineHeight
+                    },
+                    children: card.subtitle
+                  }
+                ) : null
+              ] }),
+              hasPhoto && fit.photo ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: card.photoUrl,
+                  width: ROUTE_CARD.photoWidth,
+                  height: ROUTE_CARD.photoHeight,
+                  style: { borderRadius: 24, objectFit: "cover" }
+                }
+              ) : null
+            ]
+          }
+        ),
         card.bar ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -42,8 +200,9 @@ function ogRouteElement(card) {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              height: 74,
+              height: ROUTE_CARD.barHeight,
               backgroundColor: theme.accent,
+              color: chunkCUNZAD46_js.barTextColor(theme),
               fontSize: 30,
               fontWeight: 800,
               letterSpacing: 3,
@@ -56,20 +215,31 @@ function ogRouteElement(card) {
     }
   );
 }
+async function renderCard(card, options) {
+  if (!card) return new Response("Not found", { status: 404 });
+  const { ImageResponse } = await import('next/og');
+  return new ImageResponse(ogRouteElement(card), {
+    ...size,
+    ...options.fonts?.length ? { fonts: options.fonts } : {}
+  });
+}
+function createOgImage(resolve, options = {}) {
+  return async function Image(props) {
+    const params = await props.params;
+    const id = props.id === void 0 ? void 0 : await props.id;
+    return renderCard(await resolve(params, { id }), options);
+  };
+}
 function createOgImageRoute(resolve, options = {}) {
   return async function GET(req, ctx) {
-    const card = await resolve(req, ctx);
-    if (!card) return new Response("Not found", { status: 404 });
-    const { ImageResponse } = await import('next/og');
-    return new ImageResponse(ogRouteElement(card), {
-      width: 1200,
-      height: 630,
-      ...options.fonts?.length ? { fonts: options.fonts } : {}
-    });
+    return renderCard(await resolve(req, ctx), options);
   };
 }
 
+exports.contentType = contentType;
+exports.createOgImage = createOgImage;
 exports.createOgImageRoute = createOgImageRoute;
 exports.ogRouteElement = ogRouteElement;
+exports.size = size;
 //# sourceMappingURL=route.js.map
 //# sourceMappingURL=route.js.map

package/dist/og/route.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/og/route.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"route.js","sourcesContent":["/**\n * @sonordev/site-kit/og/route — tier 2: per-entity runtime OG cards.\n *\n * `sonor-setup og` covers the site-wide static card. This factory covers the\n * cards that must vary per URL — one per blog post, per event, per product —\n * rendered on demand with next/og (Satori) in a route handler:\n *\n * ```tsx\n * // app/blog/[slug]/opengraph-image/route.tsx\n * import { createOgImageRoute } from '@sonordev/site-kit/og/route'\n * import { getBlogPost } from '@sonordev/site-kit/blog/server'\n *\n * export const GET = createOgImageRoute(async (_req, { params }) => {\n *   const post = await getBlogPost((await params).slug)\n *   if (!post) return null\n *   return {\n *     theme: { bg: '#111110', text: '#faf6f0', accent: '#ad1d25' },\n *     kicker: 'From the blog',\n *     title: post.title,\n *     photoUrl: post.featured_image_url,   // the image from the page\n *     bar: 'yourdomain.com',\n *   }\n * })\n * ```\n *\n * SATORI CONSTRAINTS (why this is not the static template): flexbox-only CSS\n * subset, no external stylesheets, images must be absolute URLs or data URIs,\n * and fonts must be provided as ArrayBuffers via `fonts` — Satori cannot load\n * Google Fonts at runtime. Without fonts it falls back to Satori's default\n * face; brand-critical cards should pass font data (fetch the TTF once at\n * module init and reuse the promise).\n */\n\nimport React from 'react'\n\nexport interface OgRouteCard {\n  theme: { bg: string; text: string; accent: string; muted?: string }\n  kicker?: string\n  title: string\n  subtitle?: string\n  /** Absolute URL (Satori requirement) of the page's own image. */\n  photoUrl?: string\n  /** Bottom-bar text, e.g. the domain. */\n  bar?: string\n}\n\nexport interface OgRouteFont {\n  name: string\n  data: ArrayBuffer\n  weight?: number\n  style?: 'normal' | 'italic'\n}\n\ntype Resolver<Ctx> = (req: Request, ctx: Ctx) => Promise<OgRouteCard | null> | OgRouteCard | null\n\n/**\n * Satori-safe element tree — exported for tests and for sites that want to\n * extend it inside their own ImageResponse.\n */\nexport function ogRouteElement(card: OgRouteCard): React.ReactElement {\n  const { theme } = card\n  const muted = theme.muted || theme.text\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        backgroundColor: theme.bg,\n        color: theme.text,\n        fontSize: 32,\n      }}\n    >\n      <div style={{ display: 'flex', flex: 1, alignItems: 'center', padding: '0 68px', gap: 48 }}>\n        <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>\n          {card.kicker ? (\n            <div style={{ fontSize: 24, letterSpacing: 6, textTransform: 'uppercase', color: theme.accent, marginBottom: 18, fontWeight: 700 }}>\n              {card.kicker}\n            </div>\n          ) : null}\n          <div style={{ fontSize: 84, fontWeight: 800, lineHeight: 1.02, textTransform: 'uppercase' }}>{card.title}</div>\n          {card.subtitle ? (\n            <div style={{ fontSize: 30, marginTop: 20, color: muted, lineHeight: 1.3 }}>{card.subtitle}</div>\n          ) : null}\n        </div>\n        {card.photoUrl ? (\n          <img\n            src={card.photoUrl}\n            width={430}\n            height={470}\n            style={{ borderRadius: 24, objectFit: 'cover' }}\n          />\n        ) : null}\n      </div>\n      {card.bar ? (\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            height: 74,\n            backgroundColor: theme.accent,\n            fontSize: 30,\n            fontWeight: 800,\n            letterSpacing: 3,\n            textTransform: 'uppercase',\n          }}\n        >\n          {card.bar}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\n/**\n * Route handler factory. Returns 404 when the resolver returns null, so a\n * bad slug never renders a broken card.\n */\nexport function createOgImageRoute<Ctx = { params: Promise<Record<string, string>> }>(\n  resolve: Resolver<Ctx>,\n  options: { fonts?: OgRouteFont[] } = {},\n) {\n  return async function GET(req: Request, ctx: Ctx): Promise<Response> {\n    const card = await resolve(req, ctx)\n    if (!card) return new Response('Not found', { status: 404 })\n\n    // next/og is imported lazily so this module stays importable in test/node\n    // contexts that lack the Next server runtime.\n    const { ImageResponse } = await import('next/og')\n    return new ImageResponse(ogRouteElement(card), {\n      width: 1200,\n      height: 630,\n      ...(options.fonts?.length ? { fonts: options.fonts as any } : {}),\n    })\n  }\n}\n"]}
+{"version":3,"sources":["../../src/og/route-fit.ts","../../src/og/route.tsx"],"names":["OG_WIDTH","OG_HEIGHT","TITLE_MAX_PX","TITLE_MIN_PX","jsxs","jsx","barTextColor"],"mappings":"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","file":"route.js","sourcesContent":["/**\n * @sonordev/site-kit/og — title fitting for the runtime (Satori) card.\n *\n * The build-time card is fitted in the page: Chrome measures the rendered\n * title and steps it down until it fits (template.ts). The runtime card is\n * Satori, which has no DOM to measure, so its title sat at a fixed 84px,\n * uppercase, with no fitting. Beside the 430px photo that holds about 11\n * characters a line, so a real post title ran off the bottom of the card.\n * watsonhac.com, reinhart and vsf-consulting-nextjs each worked around it by\n * dropping the photo past a hand-picked length (40 or 50 characters).\n *\n * This does what the build-time fitter does, from an estimate instead of a\n * measurement: the same size range (TITLE_MAX_PX down to TITLE_MIN_PX, in 2px\n * steps), word-wrapped at an estimated glyph width against the real column\n * width and the height the kicker, subtitle and bar leave. When the title\n * can't fit beside the photo even at the floor, the photo goes and the title\n * gets the full width.\n *\n * The estimate is deliberately wide (uppercase, bold-ish) so an unusual\n * face errs toward a smaller title, never an overflowing one, and the title\n * box clips at its height as the backstop.\n *\n * Pure: no DOM, no Node built-ins. Geometry constants are the card's own\n * (route.tsx imports them), so the two can't drift.\n */\n\nimport { OG_HEIGHT, OG_WIDTH, TITLE_MAX_PX, TITLE_MIN_PX } from './config'\n\n/** The runtime card's layout, in px. route.tsx renders exactly this. */\nexport const ROUTE_CARD = {\n  padX: 68,\n  gap: 48,\n  photoWidth: 430,\n  photoHeight: 470,\n  barHeight: 74,\n  /** Breathing room above and below the copy column. */\n  padY: 44,\n  kickerPx: 24,\n  kickerGap: 18,\n  subtitlePx: 30,\n  subtitleGap: 20,\n  subtitleLineHeight: 1.3,\n  titleLineHeight: 1.02,\n} as const\n\n/**\n * Average advance of an UPPERCASE glyph, in em. Calibrated against next/og's\n * bundled face and a bold sans; errs wide. Narrow glyphs are counted\n * separately so \"ILLINOIS\" isn't treated like \"MMMMMMMM\".\n */\nconst UPPER_EM = 0.68\nconst NARROW_EM = 0.32\nconst SPACE_EM = 0.3\n/** Mixed-case body text (the subtitle), in em. */\nconst BODY_EM = 0.52\n/** The kicker is uppercase with 6px letter spacing at 24px. */\nconst KICKER_EM = 0.72 + 6 / 24\n\nconst NARROW = /[IJ1.,:;'’!|()\\-]/\n\n/** Estimated width of `text` set uppercase at `px`. */\nexport function uppercaseWidth(text: string, px: number): number {\n  let em = 0\n  for (const ch of text.toUpperCase()) {\n    em += ch === ' ' ? SPACE_EM : NARROW.test(ch) ? NARROW_EM : UPPER_EM\n  }\n  return em * px\n}\n\n/**\n * Lines `text` wraps to in a column `width` px wide, greedy by word, the way\n * the browser and Satori wrap. `\\n` is a hard break. Returns Infinity when a\n * single word is wider than the column: it can't wrap, so no line count fits.\n */\nexport function wrappedLines(\n  text: string,\n  width: number,\n  measure: (s: string) => number,\n): number {\n  let lines = 0\n  for (const paragraph of text.split('\\n')) {\n    const words = paragraph.split(/\\s+/).filter(Boolean)\n    if (!words.length) {\n      lines++\n      continue\n    }\n    let current = ''\n    for (const word of words) {\n      if (measure(word) > width) return Infinity\n      const next = current ? `${current} ${word}` : word\n      if (current && measure(next) > width) {\n        lines++\n        current = word\n      } else {\n        current = next\n      }\n    }\n    lines++\n  }\n  return lines\n}\n\nexport interface RouteFitInput {\n  title: string\n  kicker?: string\n  subtitle?: string\n  /** A photo was offered. */\n  photo: boolean\n  /** The card has a bottom bar. */\n  bar: boolean\n}\n\nexport interface RouteFit {\n  /** Title size in px. */\n  titlePx: number\n  /** Keep the photo. False when the title only fits at full width. */\n  photo: boolean\n  /** Height the title box may use; route.tsx clips the title to it. */\n  titleMaxHeight: number\n  /** The title fits at `titlePx` by the estimate (false only at the floor, full width). */\n  fits: boolean\n}\n\nfunction columnWidth(photo: boolean): number {\n  const inner = OG_WIDTH - ROUTE_CARD.padX * 2\n  return photo ? inner - ROUTE_CARD.photoWidth - ROUTE_CARD.gap : inner\n}\n\n/** Height left for the title once the kicker and subtitle have theirs. */\nfunction titleBudget(input: RouteFitInput, width: number): number {\n  const c = ROUTE_CARD\n  let height = OG_HEIGHT - (input.bar ? c.barHeight : 0) - c.padY * 2\n  if (input.kicker) {\n    const lines = wrappedLines(input.kicker, width, s => s.length * KICKER_EM * c.kickerPx)\n    height -= Math.min(lines, 2) * c.kickerPx * 1.2 + c.kickerGap\n  }\n  if (input.subtitle) {\n    const lines = wrappedLines(input.subtitle, width, s => s.length * BODY_EM * c.subtitlePx)\n    height -= Math.min(lines, 3) * c.subtitlePx * c.subtitleLineHeight + c.subtitleGap\n  }\n  return height\n}\n\n/** Largest title size that fits `width`, or null when none down to the floor does. */\nfunction largestFit(input: RouteFitInput, photo: boolean): { px: number; budget: number } | null {\n  const width = columnWidth(photo)\n  const budget = titleBudget(input, width)\n  for (let px = TITLE_MAX_PX; px >= TITLE_MIN_PX; px -= 2) {\n    const lines = wrappedLines(input.title, width, s => uppercaseWidth(s, px))\n    if (lines * px * ROUTE_CARD.titleLineHeight <= budget) return { px, budget }\n  }\n  return null\n}\n\n/**\n * Size the title, and decide whether the photo stays.\n *\n * Beside the photo first, since the photo is the page's own image and worth\n * keeping. If even the floor size doesn't fit there, drop the photo and fit\n * the full width. If that fails too, the title sits at the floor and clips.\n */\nexport function fitRouteTitle(input: RouteFitInput): RouteFit {\n  if (input.photo) {\n    const withPhoto = largestFit(input, true)\n    if (withPhoto) {\n      return { titlePx: withPhoto.px, photo: true, titleMaxHeight: withPhoto.budget, fits: true }\n    }\n  }\n  const full = largestFit(input, false)\n  if (full) return { titlePx: full.px, photo: false, titleMaxHeight: full.budget, fits: true }\n  return {\n    titlePx: TITLE_MIN_PX,\n    photo: false,\n    titleMaxHeight: titleBudget(input, columnWidth(false)),\n    fits: false,\n  }\n}\n","/**\n * @sonordev/site-kit/og/route — tier 2: per-entity runtime OG cards.\n *\n * `sonor-setup og` covers the build-time cards: the site card and one per\n * route. This covers the cards that must vary per URL and can't wait for a\n * rebuild — one per blog post, per event, per product — rendered on demand\n * with next/og (Satori).\n *\n * TWO SHAPES, ONE CARD:\n *\n * `createOgImage` is the metadata file convention, and the one to reach for.\n * Next calls an `opengraph-image.tsx` default export with `{ params }` and\n * wires og:image and twitter:image for the page by itself, and `sonor-setup\n * og` sees the file and leaves the folder alone:\n *\n * ```tsx\n * // app/blog/[slug]/opengraph-image.tsx\n * import { createOgImage } from '@sonordev/site-kit/og/route'\n * import { getBlogPost } from '@sonordev/site-kit/blog/server'\n *\n * export { size, contentType } from '@sonordev/site-kit/og/route'\n * export const alt = 'From the Acme blog'\n *\n * export default createOgImage<{ slug: string }>(async ({ slug }) => {\n *   const post = await getBlogPost(slug)\n *   if (!post) return null                  // 404: a bad slug never renders a card\n *   return {\n *     theme: { bg: '#111110', text: '#faf6f0', accent: '#ad1d25' },\n *     kicker: 'From the blog',\n *     title: post.title,\n *     photoUrl: post.featured_image,       // absolute URL (Satori requirement)\n *     bar: 'yourdomain.com',\n *   }\n * })\n * ```\n *\n * The page then passes `images: false` to generateBlogPostMetadata: declared\n * images beat the file convention.\n *\n * `createOgImageRoute` is a plain route handler, `GET(request, { params })`,\n * for a card served at a URL of your choosing (`app/og/[slug]/route.tsx`).\n * Next doesn't wire it into metadata; the page declares it.\n *\n * Sites needed an adapter between the two before `createOgImage` existed\n * (watsonhac.com, reinhart, vsf-consulting-nextjs: a default export that\n * built a dummy Request to call the GET handler).\n *\n * SATORI CONSTRAINTS (why this is not the static template): flexbox-only CSS\n * subset, no external stylesheets, images must be absolute URLs or data URIs,\n * and fonts must be provided as ArrayBuffers via `fonts` — Satori cannot load\n * Google Fonts at runtime. Without fonts it falls back to Satori's default\n * face; brand-critical cards should pass font data (fetch the TTF once at\n * module init and reuse the promise).\n *\n * TITLE FITTING: Satori can't measure, so the title is sized from an estimate\n * (og/route-fit.ts) over the same range the build-time card uses, and the\n * photo is dropped when the title can't fit beside it. Long post titles no\n * longer run off the card.\n */\n\nimport React from 'react'\nimport { OG_HEIGHT, OG_WIDTH } from './config'\nimport { barTextColor } from './contrast'\nimport { fitRouteTitle, ROUTE_CARD } from './route-fit'\n\nexport interface OgRouteTheme {\n  bg: string\n  text: string\n  accent: string\n  muted?: string\n  /** og.config.ts's surface color. Only used as a bar-text candidate. */\n  surface?: string\n  /**\n   * Bottom-bar text, set on `accent`. Defaults to the first of `surface`,\n   * `bg`, `text` that reaches WCAG AA for large text (3:1) against the\n   * accent. It used to be `text`, which is unreadable wherever text and\n   * accent are both strong (navy on crimson).\n   */\n  barText?: string\n}\n\nexport interface OgRouteCard {\n  /** og.config.ts's `theme` can be passed as is. */\n  theme: OgRouteTheme\n  kicker?: string\n  title: string\n  subtitle?: string\n  /** Absolute URL (Satori requirement) of the page's own image. */\n  photoUrl?: string\n  /** Bottom-bar text, e.g. the domain. */\n  bar?: string\n}\n\nexport interface OgRouteFont {\n  name: string\n  data: ArrayBuffer\n  weight?: number\n  style?: 'normal' | 'italic'\n}\n\nexport interface OgImageOptions {\n  fonts?: OgRouteFont[]\n}\n\n/** For `export { size, contentType } from '@sonordev/site-kit/og/route'` in an opengraph-image file. */\nexport const size = { width: OG_WIDTH, height: OG_HEIGHT }\nexport const contentType = 'image/png'\n\ntype Resolver<Ctx> = (req: Request, ctx: Ctx) => Promise<OgRouteCard | null> | OgRouteCard | null\n\n/**\n * Satori-safe element tree — exported for tests and for sites that want to\n * extend it inside their own ImageResponse.\n */\nexport function ogRouteElement(card: OgRouteCard): React.ReactElement {\n  const { theme } = card\n  const muted = theme.muted || theme.text\n  // Only an absolute URL (or data URI) renders in Satori; anything else would\n  // throw inside the render, so it's treated as no photo.\n  const hasPhoto = !!card.photoUrl && /^(https?:|data:)/.test(card.photoUrl)\n  const fit = fitRouteTitle({\n    title: card.title,\n    kicker: card.kicker,\n    subtitle: card.subtitle,\n    photo: hasPhoto,\n    bar: !!card.bar,\n  })\n  const titleLine = fit.titlePx * ROUTE_CARD.titleLineHeight\n  // Clip on a whole line, so an estimate that ran short loses a line cleanly\n  // instead of spilling onto the bar.\n  const titleMaxHeight = Math.max(1, Math.floor(fit.titleMaxHeight / titleLine)) * titleLine\n\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        backgroundColor: theme.bg,\n        color: theme.text,\n        fontSize: 32,\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          flex: 1,\n          alignItems: 'center',\n          padding: `0 ${ROUTE_CARD.padX}px`,\n          gap: ROUTE_CARD.gap,\n          minHeight: 0,\n        }}\n      >\n        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0 }}>\n          {card.kicker ? (\n            <div\n              style={{\n                fontSize: ROUTE_CARD.kickerPx,\n                letterSpacing: 6,\n                textTransform: 'uppercase',\n                color: theme.accent,\n                marginBottom: ROUTE_CARD.kickerGap,\n                fontWeight: 700,\n              }}\n            >\n              {card.kicker}\n            </div>\n          ) : null}\n          <div\n            style={{\n              display: 'flex',\n              fontSize: fit.titlePx,\n              fontWeight: 800,\n              lineHeight: ROUTE_CARD.titleLineHeight,\n              textTransform: 'uppercase',\n              maxHeight: titleMaxHeight,\n              overflow: 'hidden',\n            }}\n          >\n            {card.title}\n          </div>\n          {card.subtitle ? (\n            <div\n              style={{\n                fontSize: ROUTE_CARD.subtitlePx,\n                marginTop: ROUTE_CARD.subtitleGap,\n                color: muted,\n                lineHeight: ROUTE_CARD.subtitleLineHeight,\n              }}\n            >\n              {card.subtitle}\n            </div>\n          ) : null}\n        </div>\n        {hasPhoto && fit.photo ? (\n          <img\n            src={card.photoUrl}\n            width={ROUTE_CARD.photoWidth}\n            height={ROUTE_CARD.photoHeight}\n            style={{ borderRadius: 24, objectFit: 'cover' }}\n          />\n        ) : null}\n      </div>\n      {card.bar ? (\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            height: ROUTE_CARD.barHeight,\n            backgroundColor: theme.accent,\n            color: barTextColor(theme),\n            fontSize: 30,\n            fontWeight: 800,\n            letterSpacing: 3,\n            textTransform: 'uppercase',\n          }}\n        >\n          {card.bar}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\n/**\n * Render a card, or 404 for null. Single source of truth for both factories:\n * the file convention and the route handler differ only in how they're called.\n */\nasync function renderCard(card: OgRouteCard | null, options: OgImageOptions): Promise<Response> {\n  if (!card) return new Response('Not found', { status: 404 })\n\n  // next/og is imported lazily so this module stays importable in test/node\n  // contexts that lack the Next server runtime.\n  const { ImageResponse } = await import('next/og')\n  return new ImageResponse(ogRouteElement(card), {\n    ...size,\n    ...(options.fonts?.length ? { fonts: options.fonts as any } : {}),\n  })\n}\n\n/**\n * Metadata file-convention factory, for `export default` from an\n * `opengraph-image.tsx` (or `twitter-image.tsx`). Next calls it with\n * `{ params }` (a promise on Next 15+) and, with `generateImageMetadata`, an\n * `id`. The resolver gets both already awaited. Return null for a 404.\n */\nexport function createOgImage<Params extends Record<string, string | string[]> = Record<string, string>>(\n  resolve: (params: Params, ctx: { id?: string }) => Promise<OgRouteCard | null> | OgRouteCard | null,\n  options: OgImageOptions = {},\n) {\n  return async function Image(props: {\n    params: Params | Promise<Params>\n    id?: string | Promise<string>\n  }): Promise<Response> {\n    const params = await props.params\n    const id = props.id === undefined ? undefined : await props.id\n    return renderCard(await resolve(params, { id }), options)\n  }\n}\n\n/**\n * Route handler factory, `export const GET` from a `route.tsx`. Returns 404\n * when the resolver returns null, so a bad slug never renders a broken card.\n *\n * Next doesn't wire a route handler into metadata. For a card Next should\n * attach to the page by itself, use `createOgImage` in `opengraph-image.tsx`.\n */\nexport function createOgImageRoute<Ctx = { params: Promise<Record<string, string>> }>(\n  resolve: Resolver<Ctx>,\n  options: OgImageOptions = {},\n) {\n  return async function GET(req: Request, ctx: Ctx): Promise<Response> {\n    return renderCard(await resolve(req, ctx), options)\n  }\n}\n"]}