@mintlify/og 0.0.16 → 0.0.17

package/dist/constants.d.ts

@@ -1,7 +1,9 @@
-import type { OgLayout } from './types.js';
+import type { OgPreset, OgSurface } from './types.js';
 export declare const OG_WIDTH = 1200;
 export declare const OG_HEIGHT = 630;
-export declare const DEFAULT_LAYOUT: OgLayout;
+export declare const DEFAULT_PRESET: Extract<OgPreset, 'legacy'>;
+export declare const DEFAULT_SURFACE: OgSurface;
 export declare const DEFAULT_FONT_FAMILY = "Inter";
+export declare const MONO_FONT_FAMILY = "Paper Mono";
 export declare const LOGO_HEIGHT = 56;
 export declare const OG_RENDERER_REVISION = 1;

package/dist/constants.js

@@ -1,7 +1,9 @@
 export const OG_WIDTH = 1200;
 export const OG_HEIGHT = 630;
-export const DEFAULT_LAYOUT = 'classic';
+export const DEFAULT_PRESET = 'legacy';
+export const DEFAULT_SURFACE = 'brand';
 export const DEFAULT_FONT_FAMILY = 'Inter';
+export const MONO_FONT_FAMILY = 'Paper Mono';
 export const LOGO_HEIGHT = 56;
 // Bump whenever rendered output changes for the same input, so cards get new hashes.
 export const OG_RENDERER_REVISION = 1;

package/dist/hash.js

@@ -10,9 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { createHash } from 'node:crypto';
-import { DEFAULT_LAYOUT, OG_RENDERER_REVISION } from './constants.js';
+import { DEFAULT_PRESET, OG_RENDERER_REVISION } from './constants.js';
 import { buildOgCardContent } from './inputs/content.js';
+import { resolveOgPalette } from './inputs/palette.js';
 import { resolveOgTheme } from './inputs/theme.js';
+import { PRESET_EYEBROW_STYLES } from './layouts/index.js';
 const HASH_NAMESPACE = 'mintlify-og-card';
 const HASH_LENGTH = 32;
 const sha256 = (data) => {
@@ -30,14 +32,19 @@ const hashFont = (font) => {
     return [font.family, font.faces.map(({ weight, data }) => [weight, sha256(data)])];
 };
 export function getOgCardHash(input) {
-    var _a;
-    const _b = resolveOgTheme(input.theme), { background: _ } = _b, theme = __rest(_b, ["background"]);
+    var _a, _b;
+    const _c = resolveOgTheme(input.theme), { background: _ } = _c, theme = __rest(_c, ["background"]);
+    const preset = (_a = input.preset) !== null && _a !== void 0 ? _a : DEFAULT_PRESET;
+    const presetStyle = preset === DEFAULT_PRESET
+        ? null
+        : [(_b = input.eyebrowStyle) !== null && _b !== void 0 ? _b : PRESET_EYEBROW_STYLES[preset], resolveOgPalette(input.theme)];
     const hashInput = [
         HASH_NAMESPACE,
         OG_RENDERER_REVISION,
-        (_a = input.layout) !== null && _a !== void 0 ? _a : DEFAULT_LAYOUT,
+        preset,
         buildOgCardContent(input),
         theme,
+        presetStyle,
         hashAsset(input.logo),
         hashAsset(input.background),
         hashFont(input.font),

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 export { DEFAULT_FONT_FAMILY, OG_HEIGHT, OG_RENDERER_REVISION, OG_WIDTH } from './constants.js';
 export { buildOgCardContent, type OgCardContent } from './inputs/content.js';
+export { getFontContentType } from './inputs/font-file.js';
 export { loadDefaultFont, loadGoogleFont } from './inputs/fonts.js';
 export { getOgCardHash } from './hash.js';
+export { resolveOgLogoAppearance } from './inputs/palette.js';
 export type { OgLogo } from './inputs/image.js';
 export { renderOgCardPng, renderOgCardSvg } from './render.js';
 export { resolveOgAppearance, resolveOgTheme, type OgBackground, type OgTheme, } from './inputs/theme.js';
-export type { OgAppearance, OgCardInput, OgFont, OgFontFace, OgImageAsset, OgLayout, OgThemeInput, } from './types.js';
+export type { OgAppearance, OgCardInput, OgFont, OgFontFace, OgImageAsset, OgEyebrowStyle, OgPreset, OgSurface, OgThemeInput, } from './types.js';

package/dist/index.js

@@ -1,6 +1,8 @@
 export { DEFAULT_FONT_FAMILY, OG_HEIGHT, OG_RENDERER_REVISION, OG_WIDTH } from './constants.js';
 export { buildOgCardContent } from './inputs/content.js';
+export { getFontContentType } from './inputs/font-file.js';
 export { loadDefaultFont, loadGoogleFont } from './inputs/fonts.js';
 export { getOgCardHash } from './hash.js';
+export { resolveOgLogoAppearance } from './inputs/palette.js';
 export { renderOgCardPng, renderOgCardSvg } from './render.js';
 export { resolveOgAppearance, resolveOgTheme, } from './inputs/theme.js';

package/dist/inputs/default-font-urls.d.ts

@@ -1,5 +1,7 @@
 export declare const DEFAULT_FONT_URLS: {
     readonly 400: URL;
+    readonly 500: URL;
     readonly 600: URL;
     readonly 700: URL;
 };
+export declare const MONO_FONT_URL: URL;

package/dist/inputs/default-font-urls.js

@@ -1,6 +1,8 @@
 // Static URL literals so bundlers and file tracing include the font files.
 export const DEFAULT_FONT_URLS = {
     400: new URL('../../fonts/Inter-Regular.ttf', import.meta.url),
+    500: new URL('../../fonts/Inter-Medium.ttf', import.meta.url),
     600: new URL('../../fonts/Inter-SemiBold.ttf', import.meta.url),
     700: new URL('../../fonts/Inter-Bold.ttf', import.meta.url),
 };
+export const MONO_FONT_URL = new URL('../../fonts/PaperMono-Regular.ttf', import.meta.url);

package/dist/inputs/font-file.d.ts

@@ -0,0 +1 @@
+export declare const getFontContentType: (bytes: Uint8Array) => string | undefined;

package/dist/inputs/font-file.js

@@ -0,0 +1,36 @@
+const MAX_SFNT_BYTES = 10 * 1024 * 1024;
+const WOFF_HEADER_BYTES = 44;
+const WOFF_TABLE_ENTRY_BYTES = 20;
+const FONT_SIGNATURES = [
+    [[0x77, 0x4f, 0x46, 0x46], 'font/woff'],
+    [[0x00, 0x01, 0x00, 0x00], 'font/ttf'],
+    [[0x74, 0x72, 0x75, 0x65], 'font/ttf'],
+    [[0x4f, 0x54, 0x54, 0x4f], 'font/otf'],
+];
+const hasSafeWoffTables = (bytes) => {
+    if (bytes.byteLength < WOFF_HEADER_BYTES)
+        return false;
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    const directoryEnd = WOFF_HEADER_BYTES + view.getUint16(12) * WOFF_TABLE_ENTRY_BYTES;
+    if (view.getUint32(8) !== bytes.byteLength || directoryEnd > bytes.byteLength)
+        return false;
+    if (view.getUint32(16) > MAX_SFNT_BYTES)
+        return false;
+    let totalTableBytes = 0;
+    for (let entry = WOFF_HEADER_BYTES; entry < directoryEnd; entry += WOFF_TABLE_ENTRY_BYTES) {
+        const offset = view.getUint32(entry + 4);
+        const compressedLength = view.getUint32(entry + 8);
+        const length = view.getUint32(entry + 12);
+        if (offset + compressedLength > bytes.byteLength || compressedLength > length)
+            return false;
+        totalTableBytes += length;
+    }
+    return totalTableBytes <= MAX_SFNT_BYTES;
+};
+export const getFontContentType = (bytes) => {
+    var _a;
+    const contentType = (_a = FONT_SIGNATURES.find(([signature]) => signature.every((byte, index) => bytes[index] === byte))) === null || _a === void 0 ? void 0 : _a[1];
+    if (contentType === 'font/woff' && !hasSafeWoffTables(bytes))
+        return undefined;
+    return contentType;
+};

package/dist/inputs/fonts.d.ts

@@ -1,3 +1,4 @@
 import type { OgFont } from '../types.js';
 export declare const loadDefaultFont: () => Promise<OgFont>;
+export declare const loadMonoFont: () => Promise<OgFont>;
 export declare const loadGoogleFont: (family: string, text: string) => Promise<OgFont | null>;

package/dist/inputs/fonts.js

@@ -8,14 +8,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { readFile } from 'node:fs/promises';
-import { DEFAULT_FONT_FAMILY } from '../constants.js';
-import { DEFAULT_FONT_URLS } from './default-font-urls.js';
-const FONT_WEIGHTS = [400, 600, 700];
+import { DEFAULT_FONT_FAMILY, MONO_FONT_FAMILY } from '../constants.js';
+import { DEFAULT_FONT_URLS, MONO_FONT_URL } from './default-font-urls.js';
+const FONT_WEIGHTS = [400, 500, 600, 700];
+const REQUIRED_GOOGLE_FONT_WEIGHTS = [400, 600, 700];
+const OPTIONAL_GOOGLE_FONT_WEIGHT = 500;
 const GOOGLE_FONTS_CSS_URL = 'https://fonts.googleapis.com/css2';
 // Google Fonts picks the format from the User-Agent; browser agents get WOFF2, which Satori can't read.
 const GOOGLE_FONTS_USER_AGENT = 'MintlifyOG/1.0';
 const SATORI_FONT_SOURCE = /src: url\((.+?)\) format\('(opentype|truetype|woff)'\)/;
 let defaultFontPromise;
+let monoFontPromise;
 const readDefaultFontFace = (weight) => __awaiter(void 0, void 0, void 0, function* () {
     return ({
         weight,
@@ -29,6 +32,13 @@ export const loadDefaultFont = () => {
     })));
     return defaultFontPromise;
 };
+export const loadMonoFont = () => {
+    monoFontPromise !== null && monoFontPromise !== void 0 ? monoFontPromise : (monoFontPromise = readFile(MONO_FONT_URL).then((data) => ({
+        family: MONO_FONT_FAMILY,
+        faces: [{ weight: 400, data }],
+    })));
+    return monoFontPromise;
+};
 const getGoogleFontCssUrl = (family, text, weight) => {
     const encodedFamily = encodeURIComponent(family).replace(/%20/g, '+');
     return `${GOOGLE_FONTS_CSS_URL}?family=${encodedFamily}:wght@${weight}&text=${encodeURIComponent(text)}`;
@@ -48,8 +58,11 @@ const fetchGoogleFontFace = (family, text, weight) => __awaiter(void 0, void 0,
 });
 export const loadGoogleFont = (family, text) => __awaiter(void 0, void 0, void 0, function* () {
     try {
-        const faces = yield Promise.all(FONT_WEIGHTS.map((weight) => fetchGoogleFontFace(family, text, weight)));
-        return { family, faces };
+        const [faces, optionalFace] = yield Promise.all([
+            Promise.all(REQUIRED_GOOGLE_FONT_WEIGHTS.map((weight) => fetchGoogleFontFace(family, text, weight))),
+            fetchGoogleFontFace(family, text, OPTIONAL_GOOGLE_FONT_WEIGHT).catch(() => null),
+        ]);
+        return { family, faces: optionalFace ? [...faces, optionalFace] : faces };
     }
     catch (error) {
         console.error(`Failed to load Google Font "${family}":`, error);

package/dist/inputs/image.d.ts

@@ -4,5 +4,17 @@ export type OgLogo = {
     src: string;
     style: CSSProperties;
 };
+export type OgPresetLogo = {
+    src: string;
+    width: number;
+    height: number;
+    image: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+};
 export declare const toDataUri: ({ bytes, contentType }: OgImageAsset) => string;
 export declare const buildOgLogo: (asset: OgImageAsset) => OgLogo;
+export declare const buildPresetLogo: (asset: OgImageAsset) => OgPresetLogo;

package/dist/inputs/image.js

@@ -1,13 +1,14 @@
+import { Resvg } from '@resvg/resvg-wasm';
 import { imageSize } from 'image-size';
 import { LOGO_HEIGHT } from '../constants.js';
 const SVG_CONTENT_TYPE = 'image/svg+xml';
+const PRESET_LOGO_MAX_WIDTH = 320;
+const SVG_SCAN_SIZE = 640;
 export const toDataUri = ({ bytes, contentType }) => `data:${contentType};base64,${Buffer.from(bytes).toString('base64')}`;
-const getAspectRatio = (bytes) => {
+const getSize = (bytes) => {
     try {
         const { width, height } = imageSize(bytes);
-        if (!width || !height)
-            return null;
-        return width / height;
+        return width && height ? { width, height } : null;
     }
     catch (_a) {
         return null;
@@ -16,9 +17,10 @@ const getAspectRatio = (bytes) => {
 const getLogoStyle = (asset) => {
     if (asset.contentType !== SVG_CONTENT_TYPE)
         return { objectFit: 'contain' };
-    const aspectRatio = getAspectRatio(asset.bytes);
-    if (!aspectRatio)
+    const size = getSize(asset.bytes);
+    if (!size)
         return { objectFit: 'contain' };
+    const aspectRatio = size.width / size.height;
     return {
         height: `${LOGO_HEIGHT}px`,
         width: `${aspectRatio * LOGO_HEIGHT}px`,
@@ -29,3 +31,71 @@ export const buildOgLogo = (asset) => ({
     src: toDataUri(asset),
     style: getLogoStyle(asset),
 });
+const getOpaqueBounds = (pixels, width, height) => {
+    let [left, top, right, bottom] = [width, height, -1, -1];
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            if (pixels[(y * width + x) * 4 + 3] === 0)
+                continue;
+            left = Math.min(left, x);
+            right = Math.max(right, x);
+            top = Math.min(top, y);
+            bottom = Math.max(bottom, y);
+        }
+    }
+    if (right < 0)
+        return null;
+    return { x: left, y: top, width: right - left + 1, height: bottom - top + 1 };
+};
+const getSvgBoxes = (bytes) => {
+    try {
+        const size = new Resvg(bytes);
+        const canvas = { x: 0, y: 0, width: size.width, height: size.height };
+        size.free();
+        const zoom = SVG_SCAN_SIZE / Math.max(canvas.width, canvas.height);
+        const resvg = new Resvg(bytes, { fitTo: { mode: 'zoom', value: zoom } });
+        const image = resvg.render();
+        const bounds = getOpaqueBounds(image.pixels, image.width, image.height);
+        const scale = canvas.width / image.width;
+        image.free();
+        resvg.free();
+        if (!bounds)
+            return { canvas, content: canvas };
+        return {
+            canvas,
+            content: {
+                x: bounds.x * scale,
+                y: bounds.y * scale,
+                width: bounds.width * scale,
+                height: bounds.height * scale,
+            },
+        };
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const getLogoBoxes = (asset) => {
+    var _a;
+    const svg = asset.contentType === SVG_CONTENT_TYPE ? getSvgBoxes(asset.bytes) : null;
+    if (svg)
+        return svg;
+    const size = (_a = getSize(asset.bytes)) !== null && _a !== void 0 ? _a : { width: 1, height: 1 };
+    const canvas = Object.assign({ x: 0, y: 0 }, size);
+    return { canvas, content: canvas };
+};
+export const buildPresetLogo = (asset) => {
+    const { canvas, content } = getLogoBoxes(asset);
+    const scale = Math.min(LOGO_HEIGHT / content.height, PRESET_LOGO_MAX_WIDTH / content.width);
+    return {
+        src: toDataUri(asset),
+        width: content.width * scale,
+        height: content.height * scale,
+        image: {
+            left: -content.x * scale,
+            top: -content.y * scale,
+            width: canvas.width * scale,
+            height: canvas.height * scale,
+        },
+    };
+};

package/dist/inputs/oklch.d.ts

@@ -0,0 +1,7 @@
+export type Oklch = {
+    l: number;
+    c: number;
+    h: number;
+};
+export declare const toOklch: (hex: string) => Oklch;
+export declare const oklchToHex: (color: Oklch) => string;

package/dist/inputs/oklch.js

@@ -0,0 +1,45 @@
+import { hexRgb, rgbToHex } from '@mintlify/common/colors';
+const CHROMA_STEP = 0.002;
+const GAMUT_EPSILON = 1e-4;
+const toLinear = (channel) => {
+    const value = channel / 255;
+    return value <= 0.04045 ? value / 12.92 : Math.pow(((value + 0.055) / 1.055), 2.4);
+};
+const fromLinear = (value) => {
+    const clamped = Math.min(1, Math.max(0, value));
+    const encoded = clamped <= 0.0031308 ? clamped * 12.92 : 1.055 * Math.pow(clamped, (1 / 2.4)) - 0.055;
+    return Math.round(encoded * 255);
+};
+export const toOklch = (hex) => {
+    const { red, green, blue } = hexRgb(hex);
+    const [r, g, b] = [toLinear(red), toLinear(green), toLinear(blue)];
+    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    const lightness = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+    const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+    const bAxis = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+    const hue = (Math.atan2(bAxis, a) * 180) / Math.PI;
+    return { l: lightness, c: Math.hypot(a, bAxis), h: (hue + 360) % 360 };
+};
+const toLinearRgb = ({ l, c, h }) => {
+    const radians = (h * Math.PI) / 180;
+    const a = c * Math.cos(radians);
+    const b = c * Math.sin(radians);
+    const lCube = Math.pow((l + 0.3963377774 * a + 0.2158037573 * b), 3);
+    const mCube = Math.pow((l - 0.1055613458 * a - 0.0638541728 * b), 3);
+    const sCube = Math.pow((l - 0.0894841775 * a - 1.291485548 * b), 3);
+    return [
+        4.0767416621 * lCube - 3.3077115913 * mCube + 0.2309699292 * sCube,
+        -1.2684380046 * lCube + 2.6097574011 * mCube - 0.3413193965 * sCube,
+        -0.0041960863 * lCube - 0.7034186147 * mCube + 1.707614701 * sCube,
+    ];
+};
+const isInGamut = (color) => toLinearRgb(color).every((value) => value >= -GAMUT_EPSILON && value <= 1 + GAMUT_EPSILON);
+export const oklchToHex = (color) => {
+    let chroma = color.c;
+    while (chroma > 0 && !isInGamut(Object.assign(Object.assign({}, color), { c: chroma })))
+        chroma -= CHROMA_STEP;
+    const [red, green, blue] = toLinearRgb(Object.assign(Object.assign({}, color), { c: Math.max(0, chroma) }));
+    return rgbToHex({ r: fromLinear(red), g: fromLinear(green), b: fromLinear(blue), a: 1 });
+};

package/dist/inputs/palette.d.ts

@@ -0,0 +1,19 @@
+import type { OgAppearance, OgPreset, OgThemeInput } from '../types.js';
+export type OgPalette = {
+    background: string;
+    line: string;
+    panel: string;
+    panelBorder: string | null;
+    glow: {
+        color: string;
+        appearance: OgAppearance;
+    } | null;
+    title: string;
+    description: string;
+    eyebrow: string;
+    badge: string;
+    badgeText: string;
+};
+export declare const isBrandSurface: (theme: OgThemeInput) => boolean;
+export declare const resolveOgPalette: (theme: OgThemeInput) => OgPalette;
+export declare const resolveOgLogoAppearance: (theme: OgThemeInput, preset: OgPreset) => OgAppearance;

package/dist/inputs/palette.js

@@ -0,0 +1,108 @@
+import { combineColors, getDefaultBackgroundColors, hexRgb, rgbToHex, } from '@mintlify/common/colors';
+import { DEFAULT_SURFACE } from '../constants.js';
+import { oklchToHex, toOklch } from './oklch.js';
+import { resolveBrandColors, resolveOgAppearance } from './theme.js';
+const INK = '#1A1A1A';
+const WHITE = '#FFFFFF';
+const NEUTRAL_BACKGROUNDS = { light: '#FFFFFF', dark: '#111111' };
+const DESCRIPTION_FADE = 0.22;
+const LINE_WEIGHT_ON_LIGHT = 0.2;
+const LINE_WEIGHT_ON_DARK = 0.15;
+const NEUTRAL_PANEL_WEIGHT = 0.06;
+const BRAND_DARK_SURFACE = { lightness: 0.17, maxChroma: 0.03 };
+const BRAND_STEPS = {
+    light: {
+        line: { lightnessStep: -0.14, maxChroma: 0.03 },
+        panelBorder: { lightnessStep: -0.1, maxChroma: 0.04 },
+    },
+    dark: {
+        line: { lightnessStep: 0.12, maxChroma: 0.03 },
+        panelBorder: { lightnessStep: 0.08, maxChroma: 0.03 },
+    },
+};
+const GLOW_TONE = { lightness: 0.58, maxChroma: 0.16 };
+const MIN_GLOW_SOURCE_CHROMA = 0.03;
+const BRAND_PANELS = {
+    light: 'rgba(255, 255, 255, 0.7)',
+    dark: 'rgba(0, 0, 0, 0.35)',
+};
+const MIN_TEXT_CONTRAST = 3;
+const MIN_EYEBROW_CONTRAST = 2;
+const mix = (base, overlay, weight) => rgbToHex(combineColors(base, 1, overlay, weight));
+const toLinear = (channel) => {
+    const value = channel / 255;
+    return value <= 0.03928 ? value / 12.92 : Math.pow(((value + 0.055) / 1.055), 2.4);
+};
+const luminance = (hex) => {
+    const { red, green, blue } = hexRgb(hex);
+    return 0.2126 * toLinear(red) + 0.7152 * toLinear(green) + 0.0722 * toLinear(blue);
+};
+const contrast = (a, b) => {
+    const [first, second] = [luminance(a), luminance(b)];
+    return (Math.max(first, second) + 0.05) / (Math.min(first, second) + 0.05);
+};
+export const isBrandSurface = (theme) => { var _a; return ((_a = theme.surface) !== null && _a !== void 0 ? _a : DEFAULT_SURFACE) === 'brand'; };
+const toneOf = (hex, { lightness, maxChroma }) => {
+    const { c, h } = toOklch(hex);
+    return oklchToHex({ l: lightness, c: Math.min(c, maxChroma), h });
+};
+const stepFrom = (surface, hex, { lightnessStep, maxChroma }) => toneOf(hex, { lightness: toOklch(surface).l + lightnessStep, maxChroma });
+const glowSource = (theme) => {
+    const { primaryColor, lightColor } = resolveBrandColors(theme);
+    return toOklch(primaryColor).c >= MIN_GLOW_SOURCE_CHROMA ? primaryColor : lightColor;
+};
+const textOn = (background) => contrast(WHITE, background) >= MIN_TEXT_CONTRAST ? WHITE : INK;
+const getCustomBackground = (theme, appearance) => {
+    const background = appearance === 'light' ? theme.backgroundLight : theme.backgroundDark;
+    const generated = getDefaultBackgroundColors(theme.lightColor)[appearance];
+    return background && background.toLowerCase() !== generated.toLowerCase()
+        ? background
+        : undefined;
+};
+const resolveBackground = (theme, appearance, primary) => {
+    if (isBrandSurface(theme)) {
+        const custom = getCustomBackground(theme, appearance);
+        if (custom)
+            return custom;
+        return appearance === 'light' ? WHITE : toneOf(primary, BRAND_DARK_SURFACE);
+    }
+    const themeBackground = appearance === 'light' ? theme.backgroundLight : theme.backgroundDark;
+    return themeBackground || NEUTRAL_BACKGROUNDS[appearance];
+};
+const resolveEyebrowColor = (theme, appearance, background, title) => {
+    if (theme.eyebrowColor)
+        return theme.eyebrowColor;
+    const { primaryColor, lightColor } = resolveBrandColors(theme);
+    const accent = appearance === 'light' ? primaryColor : lightColor;
+    return contrast(accent, background) >= MIN_EYEBROW_CONTRAST ? accent : title;
+};
+const resolveSurfaceDetails = (theme, appearance, background, title) => {
+    if (!isBrandSurface(theme)) {
+        return {
+            line: mix(background, title, title === WHITE ? LINE_WEIGHT_ON_DARK : LINE_WEIGHT_ON_LIGHT),
+            panel: mix(background, title, NEUTRAL_PANEL_WEIGHT),
+            panelBorder: null,
+            glow: null,
+        };
+    }
+    const { primaryColor } = resolveBrandColors(theme);
+    const steps = BRAND_STEPS[appearance];
+    return {
+        line: stepFrom(background, primaryColor, steps.line),
+        panel: BRAND_PANELS[appearance],
+        panelBorder: stepFrom(background, primaryColor, steps.panelBorder),
+        glow: { color: toneOf(glowSource(theme), GLOW_TONE), appearance },
+    };
+};
+export const resolveOgPalette = (theme) => {
+    const appearance = resolveOgAppearance(theme);
+    const background = resolveBackground(theme, appearance, resolveBrandColors(theme).primaryColor);
+    const title = textOn(background);
+    const eyebrow = resolveEyebrowColor(theme, appearance, background, title);
+    return Object.assign(Object.assign({ background }, resolveSurfaceDetails(theme, appearance, background, title)), { title, description: mix(title, background, DESCRIPTION_FADE), eyebrow, badge: eyebrow, badgeText: textOn(eyebrow) });
+};
+export const resolveOgLogoAppearance = (theme, preset) => {
+    if (preset === 'legacy')
+        return resolveOgAppearance(theme);
+    return resolveOgPalette(theme).title === WHITE ? 'dark' : 'light';
+};

package/dist/inputs/resvg.d.ts

@@ -0,0 +1 @@
+export declare const initResvg: () => Promise<void>;

package/dist/inputs/resvg.js

@@ -0,0 +1,12 @@
+import { initWasm } from '@resvg/resvg-wasm';
+import { readFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+const require = createRequire(import.meta.url);
+let resvgReady;
+export const initResvg = () => {
+    resvgReady !== null && resvgReady !== void 0 ? resvgReady : (resvgReady = initWasm(readFile(require.resolve('@resvg/resvg-wasm/index_bg.wasm'))).catch((error) => {
+        resvgReady = undefined;
+        throw error;
+    }));
+    return resvgReady;
+};

package/dist/inputs/text-fit.d.ts

@@ -0,0 +1,10 @@
+import type { OgFont, OgFontFace } from '../types.js';
+export type OgTextBox = {
+    fontSize: number;
+    fontWeight: OgFontFace['weight'];
+    letterSpacing: number;
+    width: number;
+    maxLines: number;
+};
+export type OgTextFitter = (text: string, box: OgTextBox) => string[];
+export declare const createTextFitter: (fonts: OgFont[]) => OgTextFitter;

package/dist/inputs/text-fit.js

@@ -0,0 +1,84 @@
+import opentype from '@shuding/opentype.js';
+const ELLIPSIS = '…';
+const BREAK_AFTER = /(?<=[\s/-])/;
+const parsedFonts = new WeakMap();
+const toArrayBuffer = (data) => {
+    if (data instanceof ArrayBuffer)
+        return data;
+    const copy = new ArrayBuffer(data.byteLength);
+    new Uint8Array(copy).set(data);
+    return copy;
+};
+const parseFace = (face) => {
+    const cached = parsedFonts.get(face.data);
+    if (cached)
+        return cached;
+    const font = opentype.parse(toArrayBuffer(face.data));
+    parsedFonts.set(face.data, font);
+    return font;
+};
+const closestFace = (font, weight) => font.faces.reduce((best, face) => Math.abs(face.weight - weight) < Math.abs(best.weight - weight) ? face : best);
+const createMeasure = (fonts, { fontSize, letterSpacing }) => {
+    const options = { letterSpacing: letterSpacing / fontSize };
+    const fontFor = (char) => { var _a; return (_a = fonts.find((font) => font.charToGlyphIndex(char) > 0)) !== null && _a !== void 0 ? _a : fonts[0]; };
+    return (text) => {
+        const runs = [];
+        for (const char of text) {
+            const font = fontFor(char);
+            const last = runs.at(-1);
+            if (last && last.font === font)
+                last.text += char;
+            else
+                runs.push({ font, text: char });
+        }
+        return runs.reduce((width, run) => { var _a, _b; return width + ((_b = (_a = run.font) === null || _a === void 0 ? void 0 : _a.getAdvanceWidth(run.text, fontSize, options)) !== null && _b !== void 0 ? _b : 0); }, 0);
+    };
+};
+const splitToFit = (token, fits) => {
+    const chars = Array.from(token);
+    let length = 1;
+    while (length < chars.length && fits(chars.slice(0, length + 1).join('')))
+        length++;
+    return [chars.slice(0, length).join(''), chars.slice(length).join('')];
+};
+const wrap = (text, fits, maxLines) => {
+    const lines = [];
+    let current = '';
+    for (let token of text.split(BREAK_AFTER)) {
+        if (fits((current + token).trimEnd())) {
+            current += token;
+            continue;
+        }
+        if (current)
+            lines.push(current.trimEnd());
+        while (!fits(token.trimEnd()) && lines.length <= maxLines) {
+            const [head, rest] = splitToFit(token, fits);
+            lines.push(head);
+            token = rest;
+        }
+        current = token;
+        if (lines.length > maxLines)
+            return lines;
+    }
+    if (current.trim())
+        lines.push(current.trimEnd());
+    return lines;
+};
+const ellipsize = (line, fits) => {
+    const chars = Array.from(line);
+    while (chars.length > 0 && !fits(`${chars.join('').trimEnd()}${ELLIPSIS}`))
+        chars.pop();
+    return `${chars.join('').trimEnd()}${ELLIPSIS}`;
+};
+export const createTextFitter = (fonts) => (text, box) => {
+    var _a;
+    const faces = fonts.map((font) => parseFace(closestFace(font, box.fontWeight)));
+    const measure = createMeasure(faces, box);
+    const fits = (line) => measure(line) <= box.width;
+    const lines = wrap(text.replace(/\s+/g, ' ').trim(), fits, box.maxLines);
+    if (lines.length <= box.maxLines)
+        return lines;
+    const kept = lines.slice(0, box.maxLines);
+    const last = (_a = kept.pop()) !== null && _a !== void 0 ? _a : '';
+    return [...kept, ellipsize(last, fits)];
+};

package/dist/inputs/theme.d.ts

@@ -13,5 +13,9 @@ export type OgTheme = {
     backgroundColor: string;
     background: OgBackground;
 };
+type BrandColors = Pick<OgTheme, 'primaryColor' | 'lightColor'>;
+export declare const toRgba: (hex: string, alpha: number) => string;
 export declare const resolveOgAppearance: (theme: OgThemeInput) => OgAppearance;
+export declare const resolveBrandColors: ({ primaryColor, lightColor }: OgThemeInput) => BrandColors;
 export declare const resolveOgTheme: (theme: OgThemeInput, backgroundImageUrl?: string) => OgTheme;
+export {};

package/dist/inputs/theme.js

@@ -17,7 +17,7 @@ const GRADIENT_FADE_ALPHA = 0.004;
 const GRADIENT_FADE_STOP = '85%';
 const GRADIENT_CENTER = '1200px 800px';
 const tint = (baseColor, color) => rgbToHex(combineColors(baseColor, TINT_BASE_WEIGHT, color, TINT_COLOR_WEIGHT));
-const toRgba = (hex, alpha) => {
+export const toRgba = (hex, alpha) => {
     const { red, green, blue } = hexRgb(hex);
     return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 };
@@ -35,7 +35,7 @@ export const resolveOgAppearance = (theme) => {
         return 'light';
     return 'dark';
 };
-const resolveBrandColors = ({ primaryColor, lightColor }) => {
+export const resolveBrandColors = ({ primaryColor, lightColor }) => {
     if (primaryColor && lightColor)
         return { primaryColor, lightColor };
     if (primaryColor)

package/dist/layouts/font-stack.d.ts

@@ -0,0 +1 @@
+export declare const getFontStack: (fontFamily: string) => string;

package/dist/layouts/font-stack.js

@@ -0,0 +1,7 @@
+import { DEFAULT_FONT_FAMILY } from '../constants.js';
+const FALLBACK_FONT_STACK = 'Inter var, sans-serif';
+export const getFontStack = (fontFamily) => {
+    if (fontFamily === DEFAULT_FONT_FAMILY)
+        return FALLBACK_FONT_STACK;
+    return `${fontFamily}, ${FALLBACK_FONT_STACK}`;
+};