@mintlify/og 0.0.19 → 0.0.21

package/dist/config/card-input.d.ts

@@ -0,0 +1,9 @@
+import type { OgCardInput, OgImageAsset } from '../types.js';
+import type { OgPageParams } from './page-params.js';
+import type { OgThemeParams } from './theme-params.js';
+export type OgAssetLoader = (src: string) => Promise<OgImageAsset | null>;
+export type OgAssetLoaders = {
+    image: OgAssetLoader;
+    font: OgAssetLoader;
+};
+export declare function buildOgCardInput(pageParams: OgPageParams, themeParams: OgThemeParams, loaders: OgAssetLoaders): Promise<OgCardInput>;

package/dist/config/card-input.js

@@ -0,0 +1,59 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { DEFAULT_PRESET } from '../constants.js';
+import { loadGoogleFont } from '../inputs/fonts.js';
+import { resolveOgLogoAppearance } from '../inputs/palette.js';
+const SELF_HOSTED_FONT_WEIGHT = 400;
+const loadCardFont = (themeParams, text, loadFont) => __awaiter(void 0, void 0, void 0, function* () {
+    const { fontFamily, fontSource } = themeParams;
+    if (!fontFamily)
+        return null;
+    if (!fontSource)
+        return loadGoogleFont(fontFamily, text);
+    const asset = yield loadFont(fontSource);
+    if (!asset)
+        return null;
+    const data = Buffer.from(asset.bytes.buffer, asset.bytes.byteOffset, asset.bytes.byteLength);
+    return { family: fontFamily, faces: [{ weight: SELF_HOSTED_FONT_WEIGHT, data }] };
+});
+export function buildOgCardInput(pageParams, themeParams, loaders) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const { division, title, description } = pageParams;
+        const theme = {
+            appearance: themeParams.appearance,
+            primaryColor: themeParams.primaryColor,
+            lightColor: themeParams.lightColor,
+            backgroundLight: themeParams.backgroundLight,
+            backgroundDark: themeParams.backgroundDark,
+            surface: themeParams.surface,
+            eyebrowColor: themeParams.eyebrowColor,
+        };
+        const isLight = resolveOgLogoAppearance(theme, (_a = themeParams.preset) !== null && _a !== void 0 ? _a : DEFAULT_PRESET) === 'light';
+        const logoSrc = isLight ? themeParams.logoLight : themeParams.logoDark;
+        const fontText = [division, title, description].filter(Boolean).join(' ');
+        const [logo, background, font] = yield Promise.all([
+            logoSrc ? loaders.image(logoSrc) : null,
+            themeParams.background ? loaders.image(themeParams.background) : null,
+            loadCardFont(themeParams, fontText, loaders.font),
+        ]);
+        return {
+            preset: themeParams.preset,
+            eyebrowStyle: themeParams.eyebrowStyle,
+            eyebrow: division,
+            title,
+            description,
+            theme,
+            logo,
+            background,
+            font,
+        };
+    });
+}

package/dist/config/checks.d.ts

@@ -0,0 +1,3 @@
+import type { OgCardInput } from '../types.js';
+import type { OgThemeParams } from './theme-params.js';
+export declare function checkOgCard(input: OgCardInput, themeParams: OgThemeParams): string[];

package/dist/config/checks.js

@@ -0,0 +1,36 @@
+import { DEFAULT_PRESET } from '../constants.js';
+import { contrast, isBrandSurface, resolveOgPalette } from '../inputs/palette.js';
+import { getTitleBox } from '../layouts/index.js';
+const AVERAGE_CHAR_WIDTH_EM = 0.55;
+const MAX_TITLE_LINES = 2;
+const MIN_BRAND_CONTRAST = 3;
+const estimateTitleLines = (input) => {
+    var _a, _b, _c;
+    const { width, size } = getTitleBox((_a = input.preset) !== null && _a !== void 0 ? _a : DEFAULT_PRESET);
+    const length = (_c = (_b = input.title) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+    return Math.ceil((length * AVERAGE_CHAR_WIDTH_EM * size) / width);
+};
+export function checkOgCard(input, themeParams) {
+    const warnings = [];
+    const titleLines = estimateTitleLines(input);
+    if (titleLines > MAX_TITLE_LINES) {
+        warnings.push(`The title needs about ${titleLines} lines but the card shows ${MAX_TITLE_LINES}, so it will be cut off.`);
+    }
+    if (!themeParams.logoLight && !themeParams.logoDark) {
+        warnings.push('No logo is configured in docs.json, so the card has no logo.');
+    }
+    else if (!input.logo) {
+        warnings.push("The logo couldn't be loaded, so the card has no logo.");
+    }
+    if (themeParams.fontFamily && !input.font) {
+        warnings.push(`The font "${themeParams.fontFamily}" couldn't be loaded, so the card uses Inter.`);
+    }
+    if (input.preset && input.preset !== DEFAULT_PRESET && isBrandSurface(input.theme)) {
+        const palette = resolveOgPalette(input.theme);
+        const lowContrast = [palette.eyebrow, palette.description].some((color) => contrast(color, palette.background) < MIN_BRAND_CONTRAST);
+        if (lowContrast) {
+            warnings.push('Some text has low contrast on the brand surface. Try another eyebrow color.');
+        }
+    }
+    return warnings;
+}

package/dist/config/index.d.ts

@@ -0,0 +1,7 @@
+export { buildOgCardInput, type OgAssetLoader, type OgAssetLoaders } from './card-input.js';
+export { checkOgCard } from './checks.js';
+export { createLocalAssetLoaders, MAX_OG_ASSET_BYTES, toOgFontAsset, toOgImageAsset, } from './local-assets.js';
+export { findPageAncestors, findPageDivisionName, findPageGroupName } from './navigation.js';
+export { getOgPageParams, type OgPageInput, type OgPageParams } from './page-params.js';
+export { deriveOgThemeParams, getOgThemeRevision, type OgThemeParams } from './theme-params.js';
+export { applyCardThemeOverride, applyThumbnailOverride, resolvePageThumbnailOverride, serializeCardThemeOverride, type CardThemeOverride, } from './thumbnail-override.js';

package/dist/config/index.js

@@ -0,0 +1,7 @@
+export { buildOgCardInput } from './card-input.js';
+export { checkOgCard } from './checks.js';
+export { createLocalAssetLoaders, MAX_OG_ASSET_BYTES, toOgFontAsset, toOgImageAsset, } from './local-assets.js';
+export { findPageAncestors, findPageDivisionName, findPageGroupName } from './navigation.js';
+export { getOgPageParams } from './page-params.js';
+export { deriveOgThemeParams, getOgThemeRevision } from './theme-params.js';
+export { applyCardThemeOverride, applyThumbnailOverride, resolvePageThumbnailOverride, serializeCardThemeOverride, } from './thumbnail-override.js';

package/dist/config/local-assets.d.ts

@@ -0,0 +1,6 @@
+import type { OgImageAsset } from '../types.js';
+import type { OgAssetLoaders } from './card-input.js';
+export declare const MAX_OG_ASSET_BYTES: number;
+export declare function toOgImageAsset(bytes: Uint8Array, contentTypeHeader: string | undefined): OgImageAsset | null;
+export declare function toOgFontAsset(bytes: Uint8Array): OgImageAsset | null;
+export declare function createLocalAssetLoaders(root: string, remote: OgAssetLoaders): OgAssetLoaders;

package/dist/config/local-assets.js

@@ -0,0 +1,71 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { isAbsoluteUrl } from '@mintlify/common';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { getFontContentType } from '../inputs/font-file.js';
+export const MAX_OG_ASSET_BYTES = 5 * 1024 * 1024;
+const IMAGE_CONTENT_TYPES = {
+    '.avif': 'image/avif',
+    '.gif': 'image/gif',
+    '.jpeg': 'image/jpeg',
+    '.jpg': 'image/jpeg',
+    '.png': 'image/png',
+    '.svg': 'image/svg+xml',
+    '.webp': 'image/webp',
+};
+const SUPPORTED_IMAGE_CONTENT_TYPES = new Set(Object.values(IMAGE_CONTENT_TYPES));
+export function toOgImageAsset(bytes, contentTypeHeader) {
+    var _a;
+    const contentType = (_a = contentTypeHeader === null || contentTypeHeader === void 0 ? void 0 : contentTypeHeader.split(';')[0]) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
+    if (bytes.byteLength === 0 || !contentType || !SUPPORTED_IMAGE_CONTENT_TYPES.has(contentType)) {
+        return null;
+    }
+    return { bytes, contentType };
+}
+export function toOgFontAsset(bytes) {
+    const contentType = getFontContentType(bytes);
+    return contentType ? { bytes, contentType } : null;
+}
+const resolveInside = (rootDir, src) => {
+    const filePath = path.resolve(rootDir, `.${path.posix.normalize(`/${src}`)}`);
+    return filePath.startsWith(`${rootDir}${path.sep}`) ? filePath : null;
+};
+const readInside = (rootDir, src) => __awaiter(void 0, void 0, void 0, function* () {
+    const filePath = resolveInside(rootDir, src);
+    if (!filePath)
+        return null;
+    try {
+        const bytes = new Uint8Array(yield readFile(filePath));
+        return bytes.byteLength === 0 || bytes.byteLength > MAX_OG_ASSET_BYTES ? null : bytes;
+    }
+    catch (_a) {
+        return null;
+    }
+});
+export function createLocalAssetLoaders(root, remote) {
+    const rootDir = path.resolve(root);
+    const image = (src) => __awaiter(this, void 0, void 0, function* () {
+        if (isAbsoluteUrl(src))
+            return remote.image(src);
+        const contentType = IMAGE_CONTENT_TYPES[path.extname(src).toLowerCase()];
+        if (!contentType)
+            return null;
+        const bytes = yield readInside(rootDir, src);
+        return bytes && toOgImageAsset(bytes, contentType);
+    });
+    const font = (src) => __awaiter(this, void 0, void 0, function* () {
+        if (isAbsoluteUrl(src))
+            return remote.font(src);
+        const bytes = yield readInside(rootDir, src);
+        return bytes && toOgFontAsset(bytes);
+    });
+    return { image, font };
+}

package/dist/config/navigation.d.ts

@@ -0,0 +1,6 @@
+import type { DivisionType, DocsConfig } from '@mintlify/validation';
+type NavigationNode = Record<string, unknown>;
+export declare const findPageAncestors: (path: string, docsConfig: DocsConfig) => NavigationNode[];
+export declare const findPageGroupName: (path: string, docsConfig: DocsConfig) => string;
+export declare const findPageDivisionName: (path: string, docsConfig: DocsConfig, division: DivisionType) => string | undefined;
+export {};

package/dist/config/navigation.js

@@ -0,0 +1,45 @@
+import { isEqualIgnoringLeadingSlash } from '@mintlify/common';
+const DEFAULT_GROUP_NAME = 'Documentation';
+const isNavigationNode = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+const isPage = (value, path) => typeof value === 'string' && isEqualIgnoringLeadingSlash(value, path);
+const searchAncestors = (value, path, ancestors, includeRoot) => {
+    if (Array.isArray(value)) {
+        for (const item of value) {
+            const found = searchAncestors(item, path, ancestors, includeRoot);
+            if (found)
+                return found;
+        }
+        return null;
+    }
+    if (!isNavigationNode(value))
+        return null;
+    const lineage = [value, ...ancestors];
+    for (const [key, child] of Object.entries(value)) {
+        if (includeRoot && key === 'root' && isPage(child, path))
+            return lineage;
+        if (key === 'pages' && Array.isArray(child)) {
+            for (const page of child) {
+                if (isPage(page, path))
+                    return lineage;
+                const found = searchAncestors(page, path, lineage, includeRoot);
+                if (found)
+                    return found;
+            }
+            continue;
+        }
+        const found = searchAncestors(child, path, lineage, includeRoot);
+        if (found)
+            return found;
+    }
+    return null;
+};
+export const findPageAncestors = (path, docsConfig) => { var _a; return (_a = searchAncestors(docsConfig.navigation, path, [], true)) !== null && _a !== void 0 ? _a : []; };
+export const findPageGroupName = (path, docsConfig) => {
+    var _a;
+    const [parent] = (_a = searchAncestors(docsConfig.navigation, path, [], false)) !== null && _a !== void 0 ? _a : [];
+    const group = parent === null || parent === void 0 ? void 0 : parent.group;
+    return typeof group === 'string' && group ? group : DEFAULT_GROUP_NAME;
+};
+export const findPageDivisionName = (path, docsConfig, division) => findPageAncestors(path, docsConfig)
+    .map((node) => node[division])
+    .find((name) => typeof name === 'string');

package/dist/config/page-params.d.ts

@@ -0,0 +1,14 @@
+import type { DocsConfig } from '@mintlify/validation';
+export type OgPageParams = {
+    division?: string;
+    title?: string;
+    description?: string;
+    thumbnail?: string;
+};
+export type OgPageInput = {
+    path: string;
+    title: string;
+    description?: string;
+    thumbnail?: unknown;
+};
+export declare function getOgPageParams(page: OgPageInput, docsConfig: DocsConfig): OgPageParams;

package/dist/config/page-params.js

@@ -0,0 +1,27 @@
+import { findPageDivisionName, findPageGroupName } from './navigation.js';
+import { resolvePageThumbnailOverride, serializeCardThemeOverride } from './thumbnail-override.js';
+const MAX_DESCRIPTION_LENGTH = 160;
+const resolveEyebrow = (path, docsConfig, group) => {
+    var _a, _b, _c, _d;
+    const source = (_c = (_b = (_a = docsConfig.thumbnails) === null || _a === void 0 ? void 0 : _a.eyebrow) === null || _b === void 0 ? void 0 : _b.source) !== null && _c !== void 0 ? _c : 'group';
+    if (source === 'group')
+        return group;
+    if (source === 'none')
+        return '';
+    return (_d = findPageDivisionName(path, docsConfig, source)) !== null && _d !== void 0 ? _d : group;
+};
+export function getOgPageParams(page, docsConfig) {
+    var _a, _b;
+    const { path, title } = page;
+    const group = findPageGroupName(path, docsConfig);
+    const override = resolvePageThumbnailOverride(page.thumbnail, docsConfig, path);
+    const thumbnail = serializeCardThemeOverride(override);
+    const description = page.description
+        ? Array.from(page.description).slice(0, MAX_DESCRIPTION_LENGTH).join('')
+        : page.description;
+    if (title.toLowerCase() === 'index') {
+        return { division: (_a = override.eyebrow) !== null && _a !== void 0 ? _a : '', title: group, description, thumbnail };
+    }
+    const division = (_b = override.eyebrow) !== null && _b !== void 0 ? _b : resolveEyebrow(path, docsConfig, group);
+    return { division, title, description, thumbnail };
+}

package/dist/config/theme-params.d.ts

@@ -0,0 +1,16 @@
+import type { DocsConfig } from '@mintlify/validation';
+import type { OgPresetName } from '../layouts/types.js';
+import type { OgEyebrowStyle, OgThemeInput } from '../types.js';
+export type OgThemeParams = OgThemeInput & {
+    background?: string;
+    eyebrowStyle?: OgEyebrowStyle;
+    fontFamily?: string;
+    fontSource?: string;
+    logoDark?: string;
+    logoLight?: string;
+    preset?: OgPresetName;
+};
+export declare function getOgThemeRevision(themeParams: OgThemeParams, options?: {
+    includeRendererRevision?: boolean;
+}): Promise<string>;
+export declare function deriveOgThemeParams(docsConfig: DocsConfig): OgThemeParams;

package/dist/config/theme-params.js

@@ -0,0 +1,46 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { getBackgroundColors } from '@mintlify/common/colors';
+import { OG_RENDERER_REVISION } from '../constants.js';
+export function getOgThemeRevision(themeParams_1) {
+    return __awaiter(this, arguments, void 0, function* (themeParams, options = {}) {
+        const revisionParams = options.includeRendererRevision === false
+            ? themeParams
+            : Object.assign(Object.assign({}, themeParams), { rendererRevision: OG_RENDERER_REVISION });
+        const input = new TextEncoder().encode(JSON.stringify(revisionParams));
+        const digest = yield globalThis.crypto.subtle.digest('SHA-256', input);
+        return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, '0'))
+            .join('')
+            .slice(0, 24);
+    });
+}
+export function deriveOgThemeParams(docsConfig) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { lightHex, darkHex, background } = getBackgroundColors(docsConfig);
+    const logoLight = typeof docsConfig.logo === 'string' ? docsConfig.logo : (_a = docsConfig.logo) === null || _a === void 0 ? void 0 : _a.light;
+    const logoDark = typeof docsConfig.logo === 'string' ? docsConfig.logo : (_b = docsConfig.logo) === null || _b === void 0 ? void 0 : _b.dark;
+    const { thumbnails } = docsConfig;
+    return {
+        appearance: (_c = thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.appearance) !== null && _c !== void 0 ? _c : (_d = docsConfig.appearance) === null || _d === void 0 ? void 0 : _d.default,
+        background,
+        backgroundDark: darkHex,
+        backgroundLight: lightHex,
+        eyebrowColor: (_e = thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.eyebrow) === null || _e === void 0 ? void 0 : _e.color,
+        eyebrowStyle: (_f = thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.eyebrow) === null || _f === void 0 ? void 0 : _f.style,
+        fontFamily: (_g = thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.fonts) === null || _g === void 0 ? void 0 : _g.family,
+        fontSource: (_h = thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.fonts) === null || _h === void 0 ? void 0 : _h.source,
+        lightColor: docsConfig.colors.light,
+        logoDark,
+        logoLight,
+        preset: thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.preset,
+        primaryColor: docsConfig.colors.primary,
+        surface: thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.surface,
+    };
+}

package/dist/config/thumbnail-override.d.ts

@@ -0,0 +1,7 @@
+import { type DocsConfig, type ThumbnailOverride } from '@mintlify/validation';
+import type { OgThemeParams } from './theme-params.js';
+export type CardThemeOverride = Omit<ThumbnailOverride, 'eyebrow'>;
+export declare function resolvePageThumbnailOverride(pageThumbnail: unknown, docsConfig: DocsConfig, path: string): ThumbnailOverride;
+export declare function serializeCardThemeOverride({ eyebrow: _, ...override }: ThumbnailOverride): string | undefined;
+export declare function applyCardThemeOverride(themeParams: OgThemeParams, serialized: string | undefined): OgThemeParams;
+export declare function applyThumbnailOverride(themeParams: OgThemeParams, { preset, appearance, surface, background }: CardThemeOverride): OgThemeParams;

package/dist/config/thumbnail-override.js

@@ -0,0 +1,54 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { thumbnailOverrideSchema, } from '@mintlify/validation';
+import { findPageAncestors } from './navigation.js';
+const cardThemeOverrideSchema = thumbnailOverrideSchema.omit({ eyebrow: true });
+const parseOverride = (value) => {
+    const result = thumbnailOverrideSchema.safeParse(value);
+    return result.success ? result.data : {};
+};
+export function resolvePageThumbnailOverride(pageThumbnail, docsConfig, path) {
+    const layers = [
+        parseOverride(pageThumbnail),
+        ...findPageAncestors(path, docsConfig).map((node) => parseOverride(node.thumbnail)),
+    ];
+    const pick = (key) => { var _a; return (_a = layers.find((layer) => layer[key] !== undefined)) === null || _a === void 0 ? void 0 : _a[key]; };
+    return {
+        preset: pick('preset'),
+        appearance: pick('appearance'),
+        surface: pick('surface'),
+        background: pick('background'),
+        eyebrow: pick('eyebrow'),
+    };
+}
+export function serializeCardThemeOverride(_a) {
+    var { eyebrow: _ } = _a, override = __rest(_a, ["eyebrow"]);
+    const serialized = JSON.stringify(override);
+    return serialized === '{}' ? undefined : serialized;
+}
+const parseCardThemeOverride = (serialized) => {
+    try {
+        const result = cardThemeOverrideSchema.safeParse(JSON.parse(serialized));
+        return result.success ? result.data : {};
+    }
+    catch (_a) {
+        return {};
+    }
+};
+export function applyCardThemeOverride(themeParams, serialized) {
+    return serialized
+        ? applyThumbnailOverride(themeParams, parseCardThemeOverride(serialized))
+        : themeParams;
+}
+export function applyThumbnailOverride(themeParams, { preset, appearance, surface, background }) {
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, themeParams), (preset && { preset })), (appearance && { appearance })), (surface && { surface })), (background !== undefined && { background }));
+}

package/dist/constants.d.ts

@@ -7,4 +7,4 @@ export declare const DEFAULT_FONT_FAMILY = "Inter";
 export declare const MONO_FONT_FAMILY = "Paper Mono";
 export declare const LOGO_HEIGHT = 56;
 export declare const MAX_BRAND_GLOW_ALPHA: Record<OgAppearance, number>;
-export declare const OG_RENDERER_REVISION = 3;
+export declare const OG_RENDERER_REVISION = 4;

package/dist/constants.js

@@ -7,4 +7,4 @@ export const MONO_FONT_FAMILY = 'Paper Mono';
 export const LOGO_HEIGHT = 56;
 export const MAX_BRAND_GLOW_ALPHA = { light: 0.32, dark: 0.52 };
 // Bump whenever rendered output changes for the same input, so cards get new hashes.
-export const OG_RENDERER_REVISION = 3;
+export const OG_RENDERER_REVISION = 4;

package/dist/inputs/palette.d.ts

@@ -15,6 +15,7 @@ export type OgPalette = {
     badgeText: string;
 };
 export declare const luminance: (hex: string) => number;
+export declare const contrast: (a: string, b: string) => number;
 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

@@ -37,7 +37,7 @@ export 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) => {
+export const contrast = (a, b) => {
     const [first, second] = [luminance(a), luminance(b)];
     return (Math.max(first, second) + 0.05) / (Math.min(first, second) + 0.05);
 };

package/dist/layouts/classic-frame.d.ts

@@ -1,5 +1,9 @@
 import type { OgPalette } from '../inputs/palette.js';
 import type { BrandGlow } from './brand-glow.js';
+export declare const CLASSIC_CONTENT_BOUNDS: {
+    top: number;
+    bottom: number;
+};
 export declare const ClassicFrame: ({ palette, glow, backgroundImageUrl, }: {
     palette: OgPalette;
     glow: BrandGlow | null;

package/dist/layouts/classic-frame.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { OG_HEIGHT, OG_WIDTH } from '../constants.js';
 import { getFrameColors } from '../inputs/frame-colors.js';
-const FRAME = { left: 62.938, width: 1074.12, dividers: [231.482, 565.189] };
+export const CLASSIC_CONTENT_BOUNDS = { top: 231.482, bottom: 565.189 };
+const FRAME = { left: 62.938, width: 1074.12, dividers: Object.values(CLASSIC_CONTENT_BOUNDS) };
 export const ClassicFrame = ({ palette, glow, backgroundImageUrl, }) => {
     var _a;
     if (backgroundImageUrl) {

package/dist/layouts/index.d.ts

@@ -1,4 +1,4 @@
-import type { OgEyebrowStyle } from '../types.js';
+import type { OgEyebrowStyle, OgPreset } from '../types.js';
 import type { OgPresetName } from './types.js';
 export declare const OG_LAYOUTS: {
     legacy: ({ content, theme, logo, fontFamily }: import("./types.js").OgLayoutProps) => import("react/jsx-runtime").JSX.Element;
@@ -6,3 +6,7 @@ export declare const OG_LAYOUTS: {
 export declare const PRESET_EYEBROW_STYLES: Record<OgPresetName, OgEyebrowStyle>;
 export { LegacyLayout } from './legacy.js';
 export { PresetLayout } from './preset.js';
+export declare const getTitleBox: (preset: OgPreset) => {
+    width: number;
+    size: number;
+};

package/dist/layouts/index.js

@@ -1,4 +1,5 @@
-import { LegacyLayout } from './legacy.js';
+import { LEGACY_TITLE_BOX, LegacyLayout } from './legacy.js';
+import { getPresetTitleBox } from './preset.js';
 export const OG_LAYOUTS = { legacy: LegacyLayout };
 export const PRESET_EYEBROW_STYLES = {
     classic: 'bar',
@@ -7,3 +8,4 @@ export const PRESET_EYEBROW_STYLES = {
 };
 export { LegacyLayout } from './legacy.js';
 export { PresetLayout } from './preset.js';
+export const getTitleBox = (preset) => preset === 'legacy' ? LEGACY_TITLE_BOX : getPresetTitleBox(preset);

package/dist/layouts/legacy.d.ts

@@ -1,2 +1,6 @@
 import type { OgLayoutProps } from './types.js';
+export declare const LEGACY_TITLE_BOX: {
+    width: number;
+    size: number;
+};
 export declare const LegacyLayout: ({ content, theme, logo, fontFamily }: OgLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/layouts/legacy.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LOGO_HEIGHT } from '../constants.js';
 import { getFontStack } from './font-stack.js';
-const TEXT_MAX_WIDTH = '1000px';
+export const LEGACY_TITLE_BOX = { width: 1000, size: 72 };
+const TEXT_MAX_WIDTH = `${LEGACY_TITLE_BOX.width}px`;
 const DESCRIPTION_WIDTH = '750px';
 const MAX_TEXT_LINES = 2;
 const TEXT_COLORS = {
@@ -45,7 +46,7 @@ const styles = {
         overflow: 'hidden',
         lineClamp: MAX_TEXT_LINES,
         marginTop: '12px',
-        fontSize: '72px',
+        fontSize: `${LEGACY_TITLE_BOX.size}px`,
         fontWeight: 600,
         lineHeight: 1.15,
         letterSpacing: '-0.025em',

package/dist/layouts/preset.d.ts

@@ -1,2 +1,6 @@
-import type { OgPresetLayoutProps } from './types.js';
+import type { OgPresetLayoutProps, OgPresetName } from './types.js';
+export declare const getPresetTitleBox: (preset: OgPresetName) => {
+    width: number;
+    size: number;
+};
 export declare const PresetLayout: ({ preset, content, palette, backgroundImageUrl, eyebrowStyle, logo, fontFamily, fitText, }: OgPresetLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/layouts/preset.js

@@ -1,13 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MONO_FONT_FAMILY, OG_HEIGHT, OG_WIDTH } from '../constants.js';
 import { getBrandGlow, getBrandGlowCss } from './brand-glow.js';
-import { ClassicFrame } from './classic-frame.js';
+import { CLASSIC_CONTENT_BOUNDS, ClassicFrame } from './classic-frame.js';
 import { getFontStack } from './font-stack.js';
+const PANEL = { left: 89.386, top: 435.728, width: 1021.23, radius: 48 };
+const LOGO_BOX = {
+    height: 56,
+    topLeft: { left: 89.649, top: 82.788 },
+    bottomRight: { bottom: 80.924, right: 86 },
+    bottomCenter: { bottom: 56.924 },
+};
 const PRESET_SETTINGS = {
     classic: {
         align: 'start',
         contentLeft: 89.649,
         contentTop: 264,
+        contentBounds: CLASSIC_CONTENT_BOUNDS,
         eyebrowGap: 22.741,
         textGap: 32,
         titleSize: 77.868,
@@ -24,6 +32,7 @@ const PRESET_SETTINGS = {
         align: 'start',
         contentLeft: 106,
         contentTop: 88.117,
+        contentBounds: { top: 0, bottom: OG_HEIGHT - LOGO_BOX.bottomRight.bottom - LOGO_BOX.height },
         eyebrowGap: 52,
         textGap: 32,
         titleSize: 77.868,
@@ -40,6 +49,7 @@ const PRESET_SETTINGS = {
         align: 'center',
         contentLeft: 0,
         contentTop: 81.032,
+        contentBounds: { top: 0, bottom: PANEL.top },
         eyebrowGap: 52,
         textGap: 28,
         titleSize: 70,
@@ -53,13 +63,10 @@ const PRESET_SETTINGS = {
         textLines: 3,
     },
 };
-const PANEL = { left: 89.386, top: 435.728, width: 1021.23, radius: 48 };
-const LOGO_BOX = {
-    height: 56,
-    topLeft: { left: 89.649, top: 82.788 },
-    bottomRight: { bottom: 80.924, right: 86 },
-    bottomCenter: { bottom: 56.924 },
-};
+export const getPresetTitleBox = (preset) => ({
+    width: PRESET_SETTINGS[preset].titleWidth,
+    size: PRESET_SETTINGS[preset].titleSize,
+});
 const BAR = { border: 2, padding: 25.229 };
 const PILL = { paddingBlock: 5.5, paddingInline: 15 };
 const TRACKING = -0.02;
@@ -141,6 +148,13 @@ export const PresetLayout = ({ preset, content, palette, backgroundImageUrl, eye
         maxLines: Math.min(MAX_TEXT_LINES, settings.textLines - titleLines.length),
     };
     const descriptionLines = description ? fitText(description, descriptionBox) : [];
+    const textGap = titleLines.length > 0 && descriptionLines.length > 0 ? settings.textGap : 0;
+    const contentHeight = titleLines.length * settings.titleSize +
+        descriptionLines.length * DESCRIPTION.lineHeight +
+        textGap;
+    const contentTop = eyebrow
+        ? settings.contentTop
+        : Math.max(settings.contentTop, (settings.contentBounds.top + settings.contentBounds.bottom - contentHeight) / 2);
     const glow = getBrandGlow(preset, palette);
     const glowGradient = getBrandGlowCss(glow);
     return (_jsxs("div", { style: Object.assign(Object.assign({ position: 'relative', display: 'flex', width: `${OG_WIDTH}px`, height: `${OG_HEIGHT}px`, backgroundColor: palette.background }, (backgroundImageUrl
@@ -149,7 +163,7 @@ export const PresetLayout = ({ preset, content, palette, backgroundImageUrl, eye
                     borderTop: `1px solid ${palette.panelBorder}`,
                     borderLeft: `1px solid ${palette.panelBorder}`,
                     borderRight: `1px solid ${palette.panelBorder}`,
-                })) })), logo && (_jsx("div", { style: getLogoBoxStyle(settings.logo), children: _jsx(Logo, { logo: logo }) })), _jsxs("div", { style: Object.assign(Object.assign({ position: 'absolute', top: `${settings.contentTop}px`, left: `${settings.contentLeft}px` }, (isCentered && { width: `${OG_WIDTH}px` })), { display: 'flex', flexDirection: 'column', alignItems: isCentered ? 'center' : 'flex-start' }), children: [eyebrow && (_jsx(Eyebrow, { text: eyebrow, style: eyebrowStyle, palette: palette, settings: settings })), _jsxs("div", { style: {
+                })) })), logo && (_jsx("div", { style: getLogoBoxStyle(settings.logo), children: _jsx(Logo, { logo: logo }) })), _jsxs("div", { style: Object.assign(Object.assign({ position: 'absolute', top: `${contentTop}px`, left: `${settings.contentLeft}px` }, (isCentered && { width: `${OG_WIDTH}px` })), { display: 'flex', flexDirection: 'column', alignItems: isCentered ? 'center' : 'flex-start' }), children: [eyebrow && (_jsx(Eyebrow, { text: eyebrow, style: eyebrowStyle, palette: palette, settings: settings })), _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             alignItems: isCentered ? 'center' : 'flex-start',