nuxt-og-image 6.9.0 → 6.10.0

package/dist/runtime/shared/urlEncoding.d.ts

@@ -1,7 +1,12 @@
 /**
  * Generate a deterministic hash from options object
- * Excludes _path so images with same options can be cached across pages
+ * Excludes _path so images with same options can be cached across pages,
+ * except for PageScreenshot, which renders the page itself.
  * Optionally includes componentHash and version for cache busting
+ *
+ * Uses the first 64 bits of a SHA-256 digest over a canonical (key-sorted)
+ * serialization. The previous 32-bit rolling hash collided on large sites,
+ * silently overwriting other pages' prerendered images.
  */
 export declare function hashOgImageOptions(options: Record<string, any>, componentHash?: string, version?: string): string;
 /**
@@ -25,7 +30,8 @@ export interface BuildOgImageUrlResult {
 /**
  * Build full OG image URL
  *
- * When encoded params exceed MAX_PATH_LENGTH, falls back to hash mode:
+ * Static URLs fall back to hash mode when encoded params exceed MAX_PATH_LENGTH
+ * or hold a character outside [A-Za-z0-9_.~-]:
  * - Returns short path: /_og/s/o_<hash>.png
  * - Returns hash in result for cache storage
  *
@@ -34,7 +40,7 @@ export interface BuildOgImageUrlResult {
  * @param isStatic - Whether this is a static/prerendered image
  * @param defaults - Optional defaults to skip from URL (keeps URLs shorter)
  * @example buildOgImageUrl({ width: 1200, props: { title: 'Hello' } }, 'png', true)
- * // Returns: { url: "/_og/s/w_1200,title_Hello.png" }
+ * // Returns: { url: "/_og/s/o_<hash>.png", hash: "<hash>" }
  */
 export declare function buildOgImageUrl(options: Record<string, any>, extension?: string, isStatic?: boolean, defaults?: Record<string, any>, secret?: string): BuildOgImageUrlResult;
 /**

package/dist/runtime/shared/urlEncoding.js

@@ -19,6 +19,7 @@ const RE_COMMA_PARAM_SEPARATOR = /,(?=\w+_)/;
 const RE_SIGNATURE_SUFFIX = /,s_[^,]+$/;
 const RE_NON_ASCII = /[^\u0000-\u007F]/;
 const RE_WINDOWS_RESERVED_FILENAME_CHARACTERS = /[<>:"/\\|?*\u0000-\u001F]/;
+const RE_NOT_UNRESERVED = /[^\w.~-]/;
 const PARAM_ALIASES = {
   w: "width",
   h: "height",
@@ -85,19 +86,35 @@ function b64Decode(str) {
   }
   return Buffer.from(padded, "base64").toString("utf8");
 }
-function simpleHash(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash;
+function canonicalJson(value) {
+  if (value === null || typeof value !== "object")
+    return JSON.stringify(value) ?? "null";
+  if (Array.isArray(value))
+    return `[${value.map((item) => canonicalJson(item)).join(",")}]`;
+  const record = value;
+  const entries = Object.keys(record).sort().filter((key) => record[key] !== void 0).map((key) => `${JSON.stringify(key)}:${canonicalJson(record[key])}`);
+  return `{${entries.join(",")}}`;
+}
+const B64URL_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+function base64UrlToHex(input) {
+  let hex = "";
+  let buffer = 0;
+  let bits = 0;
+  for (const char of input) {
+    buffer = buffer << 6 | B64URL_ALPHABET.indexOf(char);
+    bits += 6;
+    if (bits >= 8) {
+      bits -= 8;
+      hex += (buffer >> bits & 255).toString(16).padStart(2, "0");
+    }
   }
-  return Math.abs(hash).toString(36);
+  return hex;
 }
 export function hashOgImageOptions(options, componentHash, version) {
-  const { _path, _hash, ...hashableOptions } = options;
+  const { _path, _hash, ...rest } = options;
+  const hashableOptions = rest.component === "PageScreenshot" ? { ...rest, _path } : rest;
   const hashInput = componentHash || version ? [hashableOptions, componentHash || "", version || ""] : hashableOptions;
-  return simpleHash(JSON.stringify(hashInput));
+  return base64UrlToHex(digest(canonicalJson(hashInput))).slice(0, 16);
 }
 export function encodeOgImageParams(options, defaults) {
   const parts = [];
@@ -233,7 +250,7 @@ export function decodeOgImageParams(encoded) {
 export function buildOgImageUrl(options, extension = "png", isStatic = false, defaults, secret) {
   const encoded = encodeOgImageParams(options, defaults);
   const prefix = isStatic ? "/_og/s" : "/_og/d";
-  if (isStatic && (encoded.length > MAX_PATH_LENGTH || encoded.includes("%"))) {
+  if (isStatic && (encoded.length > MAX_PATH_LENGTH || RE_NOT_UNRESERVED.test(encoded))) {
     const hash = hashOgImageOptions(options);
     return {
       url: `${prefix}/o_${hash}.${extension}`,

package/dist/runtime/types.d.ts

@@ -31,6 +31,7 @@ export interface OgImageIconsData {
     height: number;
 }
 export interface OgImageRuntimeConfig {
+    browserEnabled: boolean;
     version: string;
     satoriOptions: SatoriOptions;
     resvgOptions: ResvgRenderOptions;
@@ -77,7 +78,7 @@ export interface OgImageRuntimeConfig {
 }
 export type RendererType = 'satori' | 'browser' | 'takumi';
 export type BrowserProvider = 'playwright' | 'chrome-launcher' | 'on-demand' | 'cloudflare';
-export type BrowserConfig = false | {
+export type BrowserConfig = boolean | {
     provider: BrowserProvider;
     /** Required when provider is 'cloudflare' - the wrangler binding name */
     binding?: string;

package/dist/shared/{nuxt-og-image.CTD0ZPNd.mjs → nuxt-og-image.DWcVJOVy.mjs}

@@ -3,26 +3,25 @@ import * as fs from 'node:fs';
 import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, rmSync } from 'node:fs';
 import { readFile, mkdir, writeFile, readdir } from 'node:fs/promises';
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import { resolvePath, useNuxt, getNuxtVersion, addTemplate, updateTemplates, directoryToURL, tryResolveModule, addTypeTemplate, defineNuxtModule, createResolver, addImports, hasNuxtModule, hasNuxtModuleCompatibility, getNuxtModuleVersion, addVitePlugin, addBuildPlugin, addServerHandler, addServerImports, addPlugin, addComponentsDir, addServerPlugin } from '@nuxt/kit';
+import { resolvePath, useNuxt, getNuxtVersion, addTemplate, updateTemplates, directoryToURL, tryResolveModule, addTypeTemplate, defineNuxtModule, createResolver, addImports, hasNuxtModule, hasNuxtModuleCompatibility, getNuxtModuleVersion, addVitePlugin, addServerHandler, addServerImports, addPlugin, addComponentsDir, addServerPlugin } from '@nuxt/kit';
 import { defu } from 'defu';
 import { fnv1a64Base36 } from 'fnv1a-64';
-import { installNuxtSiteConfig } from 'nuxt-site-config/kit';
+import { useSiteConfig, installNuxtSiteConfig } from 'nuxt-site-config/kit';
 import { resolveNitroPreset, renderNitroTypeAugmentations, setupNitroRuntimeCompatibility, getNuxtModuleOptions, isNuxtGenerate } from 'nuxtseo-shared/kit';
 import { join, basename, dirname, relative, isAbsolute, resolve } from 'pathe';
 import { readPackageJSON } from 'pkg-types';
-import { isCI, isAgent, hasTTY } from 'std-env';
 import MagicString from 'magic-string';
 import { parseAndWalk } from 'oxc-walker';
 import { resolveModulePath } from 'exsolve';
 import { logger } from '../../dist/runtime/logger.js';
 import { Launcher } from 'chrome-launcher';
+import { isCI, isAgent, hasTTY } from 'std-env';
 import { detectPackageManager, addDependency } from 'nypm';
 import { setupDevToolsUI as setupDevToolsUI$1, setupDevToolsRpc } from 'nuxtseo-shared/devtools';
 import { createStorage } from 'unstorage';
 import fsDriver from 'unstorage/drivers/fs-lite';
 import { resolveColorMix, GRADIENT_COLOR_SPACE_RE, splitCssDeclarations } from '../../dist/runtime/server/og-image/utils/css.js';
 import { stripLiteral } from 'strip-literal';
-import { parseURL, parseQuery } from 'ufo';
 import { createUnplugin } from 'unplugin';
 import { parse } from '@vue/compiler-sfc';
 import { ofetch } from 'ofetch';
@@ -132,6 +131,7 @@ function isSupportedSatoriVersion(version) {
 const VALID_RENDERER_SUFFIXES = ["satori", "browser", "takumi"];
 const RE_RENDERER_SUFFIX_CI = /\.?(satori|browser|takumi)$/i;
 const RE_RENDERER_SUFFIX = /(Satori|Browser|Takumi)$/;
+const RE_OG_IMAGE_PREFIX = /^OgImage/;
 const RE_LEGACY_SUFFIX = /-legacy$/;
 const RE_WHITESPACE = /\s+/;
 function getRendererFromFilename(filepath) {
@@ -167,6 +167,28 @@ function getRegisteredBaseNames(registeredPascalName) {
     names.push(stripped);
   return names;
 }
+function matchesComponentName(registeredPascalName, inputName) {
+  const baseNames = getRegisteredBaseNames(registeredPascalName);
+  const { baseName } = parseComponentName(inputName);
+  const strippedBaseName = baseName.replace(RE_OG_IMAGE_PREFIX, "");
+  return baseNames.some(
+    (cBase) => cBase === baseName || cBase === strippedBaseName || cBase === `OgImage${baseName}` || cBase === `OgImage${strippedBaseName}`
+  );
+}
+function parseComponentName(name) {
+  for (const suffix of VALID_RENDERER_SUFFIXES) {
+    if (name.endsWith(`.${suffix}`)) {
+      return { baseName: name.slice(0, -(suffix.length + 1)), renderer: suffix };
+    }
+  }
+  for (const suffix of VALID_RENDERER_SUFFIXES) {
+    const pascalSuffix = suffix.charAt(0).toUpperCase() + suffix.slice(1);
+    if (name.endsWith(pascalSuffix)) {
+      return { baseName: name.slice(0, -pascalSuffix.length), renderer: suffix };
+    }
+  }
+  return { baseName: name, renderer: null };
+}
 
 const NodeRuntime = {
   // node-server runtime
@@ -446,6 +468,12 @@ async function setupBuildHandler(config, resolve, getDetectedRenderers, getCompa
     metadata: getCompatibilityMeta()
   });
   nuxt.hooks.hook("nitro:init", async (nitro) => {
+    nitro.hooks.hook("prerender:config", (prerenderConfig) => {
+      if (prerenderConfig.virtual?.["playwright-core"]) {
+        const { "playwright-core": _, ...virtual } = prerenderConfig.virtual;
+        prerenderConfig.virtual = virtual;
+      }
+    });
     await applyNitroPresetCompatibility(nitro.options, {
       compatibility: config.compatibility?.runtime,
       resolve,
@@ -651,6 +679,25 @@ const PROVIDER_DEPENDENCIES = [
     }
   }
 ];
+function resolveAutoDetectedProvider(input) {
+  if (input.hasUserComponents)
+    return { preferred: null, noRenderer: false };
+  const preferred = input.installedProviders.find((p) => p === "takumi") ?? input.installedProviders[0] ?? null;
+  if (preferred)
+    return { preferred, noRenderer: false };
+  return { preferred: null, noRenderer: true };
+}
+function getMissingRendererMessage(renderer, installSpecs) {
+  return `The ${renderer} renderer is missing dependencies, so templates that use it cannot render. Install them with: npx nypm add ${installSpecs.join(" ")}`;
+}
+function resolveMissingRendererAction(input) {
+  if (!input.dev)
+    return { _tag: "CheckUsage" };
+  if (input.interactive)
+    return { _tag: "AskToInstall" };
+  return { _tag: "Report", message: getMissingRendererMessage(input.renderer, input.installSpecs) };
+}
+const NO_RENDERER_MESSAGE = `No OG image renderer is installed, so OG images are off. To add one, run: npx nuxt-og-image enable takumi`;
 async function getInstalledProviders() {
   const installed = [];
   for (const provider of PROVIDER_DEPENDENCIES) {
@@ -765,15 +812,6 @@ function canPromptInteractively(env = {
 }) {
   return env.hasTTY && env.hasStdinTTY && !env.isAgent && !env.isCI;
 }
-async function promptForRendererSelection() {
-  logger.info("Welcome to Nuxt OG Image! No renderer dependencies detected.");
-  const renderer = await logger.prompt("Which renderer would you like to use?", {
-    type: "select",
-    options: PROVIDER_DEPENDENCIES.map((p) => p.name),
-    initial: "takumi"
-  });
-  return renderer || "takumi";
-}
 async function validateProviderSetup(renderer, compatibility) {
   const issues = [];
   const binding = getRecommendedBinding(renderer, compatibility);
@@ -2774,6 +2812,11 @@ async function importOptionalPeer(id, resolvedPath, usage) {
 }
 
 const ONE_WEEK_MS = 7 * 24 * 60 * 60 * 1e3;
+function getMissingSiteUrlWarning(input) {
+  if (input.siteUrl || input.prerenderedImageCount === 0)
+    return null;
+  return `Prerendered ${input.prerenderedImageCount} OG image${input.prerenderedImageCount > 1 ? "s" : ""} without a site URL, so each og:image is a relative path such as \`/_og/s/...\`. Social crawlers need an absolute URL. Set \`site.url\` in nuxt.config.ts or the \`NUXT_SITE_URL\` environment variable.`;
+}
 function setupPrerenderHandler(options, resolve, getDetectedRenderers, getCompatibilityMeta = () => ({}), nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     nitro.hooks.hook("prerender:config", async (nitroConfig) => {
@@ -2787,6 +2830,16 @@ function setupPrerenderHandler(options, resolve, getDetectedRenderers, getCompat
         nitroConfig.prerender.ignore.push("/_og/r/");
       }
     });
+    let prerenderedImageCount = 0;
+    nitro.hooks.hook("prerender:route", (route) => {
+      if (!route.error && route.route.includes("/_og/s/"))
+        prerenderedImageCount++;
+    });
+    nitro.hooks.hook("prerender:done", () => {
+      const warning = getMissingSiteUrlWarning({ siteUrl: useSiteConfig(nuxt).url, prerenderedImageCount });
+      if (warning)
+        logger.warn(warning);
+    });
     const orphanedOgHashes = [];
     nitro.hooks.hook("prerender:generate", (route) => {
       if (!route.error || route.error.statusCode !== 404)
@@ -2874,68 +2927,138 @@ function resolveSigningSecret(configSecret, envSecret, generate) {
   return { secret: generate(), hasExplicit: false, optOut: false, generated: true };
 }
 
-function isVue(id, opts = {}) {
-  const { search } = parseURL(decodeURIComponent(pathToFileURL(id).href));
-  if (id.endsWith(".vue") && !search) {
-    return true;
-  }
-  if (!search) {
-    return false;
-  }
-  const query = parseQuery(search);
-  if (query.nuxt_component) {
-    return false;
+const RE_NAMED_CALL = /\b(defineOgImage(?:Component)?)\s*\(\s*(['"`])([\w.-]+)\2/g;
+const RE_SCREENSHOT_CALL = /\bdefineOgImageScreenshot\s*\(/g;
+const RE_ANY_CALL = /\bdefineOgImage(?:Component)?\s*\(/g;
+const RE_VUE_OR_SCRIPT = /\.(?:vue|[cm]?[jt]sx?)$/;
+function findOgImageUsageErrors(code, ctx) {
+  if (!code.includes("defineOgImage"))
+    return [];
+  const stripped = stripLiteral(code);
+  const errors = [];
+  for (const match of code.matchAll(RE_NAMED_CALL)) {
+    if (!stripped.startsWith(match[1], match.index))
+      continue;
+    const name = match[3];
+    const { renderer } = parseComponentName(name);
+    const matches = ctx.components.filter(
+      (c) => matchesComponentName(c.pascalName, name) && (!renderer || c.renderer === renderer)
+    );
+    if (matches.length > 0 && matches.every((c) => c.category === "community"))
+      errors.push(`\`${match[1]}('${name}')\` uses a community template that is not ejected. Production builds do not include community templates. Run: npx nuxt-og-image eject ${name}`);
+  }
+  if (!ctx.browserEnabled && RE_SCREENSHOT_CALL.test(stripped))
+    errors.push("`defineOgImageScreenshot()` needs the browser renderer. Set ogImage.browser to true or a browser provider in nuxt.config.ts, or remove the call.");
+  RE_SCREENSHOT_CALL.lastIndex = 0;
+  return errors;
+}
+function collectOgImageReferences(code) {
+  const refs = { names: [], hasDynamicName: false, usesDefault: false };
+  if (!code.includes("defineOgImage"))
+    return refs;
+  const stripped = stripLiteral(code);
+  const literalCalls = /* @__PURE__ */ new Set();
+  for (const match of code.matchAll(RE_NAMED_CALL)) {
+    if (!stripped.startsWith(match[1], match.index))
+      continue;
+    literalCalls.add(match.index);
+    refs.names.push(match[3]);
   }
-  if (query.macro && (search === "?macro=true" || !opts.type || opts.type.includes("script"))) {
-    return true;
+  for (const match of stripped.matchAll(RE_ANY_CALL)) {
+    if (!literalCalls.has(match.index))
+      refs.hasDynamicName = true;
   }
-  const type = "setup" in query ? "script" : query.type;
-  if (!("vue" in query) || opts.type && !opts.type.includes(type)) {
-    return false;
+  return refs;
+}
+function collectRouteRuleReferences(routeRules) {
+  const refs = { names: [], hasDynamicName: false, usesDefault: false };
+  for (const rule of Object.values(routeRules || {})) {
+    const ogImage = rule?.ogImage;
+    if (!ogImage || typeof ogImage !== "object")
+      continue;
+    const component = ogImage.component;
+    if (typeof component === "string")
+      refs.names.push(component);
+    else
+      refs.usesDefault = true;
+  }
+  return refs;
+}
+function installHint(missing) {
+  return `npx nypm add ${missing.join(" ")}`;
+}
+function checkMissingRendererUsage(input) {
+  const errors = [];
+  const warnings = [];
+  const appComponents = input.components.filter((c) => c.category !== "community");
+  const isMissing = (c) => !!input.missingRenderers[c.renderer]?.length;
+  if (!appComponents.some(isMissing))
+    return { errors, warnings };
+  const used = /* @__PURE__ */ new Set();
+  for (const name of input.references.names) {
+    const { renderer } = parseComponentName(name);
+    const matches = appComponents.filter((c) => matchesComponentName(c.pascalName, name) && (!renderer || c.renderer === renderer));
+    for (const c of matches)
+      used.add(c);
+    const broken = matches.find(isMissing);
+    if (broken && matches.every(isMissing))
+      errors.push(`\`defineOgImage('${name}')\` uses ${broken.path || broken.pascalName}, but the ${broken.renderer} renderer is not installed. Run: ${installHint(input.missingRenderers[broken.renderer])}`);
+  }
+  const fallback = appComponents[0];
+  if (input.references.usesDefault && fallback) {
+    used.add(fallback);
+    if (isMissing(fallback))
+      errors.push(`A route rule renders the default template ${fallback.path || fallback.pascalName}, but the ${fallback.renderer} renderer is not installed. Run: ${installHint(input.missingRenderers[fallback.renderer])}`);
+  }
+  const unused = appComponents.filter((c) => isMissing(c) && !used.has(c));
+  if (unused.length > 0) {
+    const lines = unused.map((c) => `  ${c.path || c.pascalName}: ${installHint(input.missingRenderers[c.renderer])}`);
+    const why = input.references.hasDynamicName ? "The build found a component name built at runtime, so it cannot tell whether they render. If one does, that image returns 500." : "No page or route rule uses them, so the build continues.";
+    warnings.push(`These OG image templates need a renderer that is not installed:
+${lines.join("\n")}
+${why}`);
   }
-  return true;
+  return { errors: [...new Set(errors)], warnings };
 }
-const VUE_RE = /\.vue(?:\?|$)/;
-const JS_RE = /\.[cm]?[jt]sx?(?:\?|$)/;
-const ISLANDS_RE = /components\.islands\.mjs(?:\?|$)/;
-const COMPOSABLE_CODE_MARKER = "defineOgImage";
-const TreeShakeComposablesPlugin = createUnplugin(() => {
-  const composableNames = [
-    "defineOgImage",
-    "defineOgImageComponent",
-    "defineOgImageScreenshot"
-  ];
-  const regexp = `(^\\s*)(${composableNames.join("|")})(?=\\((?!\\) \\{))`;
-  const COMPOSABLE_RE = new RegExp(regexp, "m");
-  const COMPOSABLE_RE_GLOBAL = new RegExp(regexp, "gm");
+const OgImageUsageCheckPlugin = createUnplugin((options) => {
+  const errors = [];
+  const references = { names: [], hasDynamicName: false, usesDefault: false };
   return {
-    name: "nuxt-og-image:zero-runtime:transform",
-    enforce: "pre",
-    transform: {
-      filter: {
-        // @todo re-implement composable tree-shaking for island files
-        id: { include: [VUE_RE, JS_RE], exclude: [ISLANDS_RE] },
-        code: COMPOSABLE_CODE_MARKER
-      },
-      handler(code, id) {
-        if (VUE_RE.test(id) && !isVue(id, { type: ["script"] })) {
-          return;
-        }
-        if (!COMPOSABLE_RE.test(code)) {
-          return;
-        }
-        const s = new MagicString(code);
-        for (const match of stripLiteral(code).matchAll(COMPOSABLE_RE_GLOBAL)) {
-          s.overwrite(match.index, match.index + match[0].length, `${match[1]} import.meta.prerender && ${match[2]}`);
-        }
-        if (!s.hasChanged()) {
-          return;
+    name: "nuxt-og-image:usage-check",
+    buildStart() {
+      errors.length = 0;
+      references.names.length = 0;
+      references.hasDynamicName = false;
+      references.usesDefault = false;
+    },
+    transform(code, id) {
+      const [path] = id.split("?");
+      if (!path || !RE_VUE_OR_SCRIPT.test(path) || path.includes("/node_modules/") || options.ignoreDirs.some((dir) => path.startsWith(dir)))
+        return;
+      for (const error of findOgImageUsageErrors(code, options.getContext()))
+        errors.push(`${path}: ${error}`);
+      const found = collectOgImageReferences(code);
+      references.names.push(...found.names);
+      references.hasDynamicName ||= found.hasDynamicName;
+    },
+    buildEnd() {
+      const ctx = options.getContext();
+      const routeRules = ctx.routeRuleReferences;
+      const renderers = checkMissingRendererUsage({
+        components: ctx.components,
+        missingRenderers: ctx.missingRenderers || {},
+        references: {
+          names: [...references.names, ...routeRules?.names || []],
+          hasDynamicName: references.hasDynamicName,
+          usesDefault: !!routeRules?.usesDefault
         }
-        return {
-          code: s.toString(),
-          map: s.generateMap({ hires: true })
-        };
-      }
+      });
+      errors.push(...renderers.errors);
+      for (const warning of renderers.warnings)
+        options.warn(warning);
+      if (errors.length > 0)
+        throw new Error(`[nuxt-og-image] OG images in this build cannot render:
+${[...new Set(errors)].map((e) => `  ${e}`).join("\n")}`);
     }
   };
 });
@@ -3536,7 +3659,7 @@ function buildEmojiSvg(emoji, icons, emojiSet) {
       const body = wrapDefsElements(iconData.body || "");
       const width = iconData.width || icons.width || 128;
       const height = iconData.height || icons.height || 128;
-      let svg = `<span style="display:flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="1em" height="1em">${body}</svg></span>`;
+      let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="1em" height="1em">${body}</svg>`;
       svg = makeIdsUnique(svg);
       return svg;
     }
@@ -3561,7 +3684,7 @@ async function fetchEmojiSvg(emoji, emojiSet) {
         const viewBox = viewBoxMatch ? viewBoxMatch[1] : "0 0 128 128";
         const bodyMatch = svg.match(RE_SVG_BODY);
         const body = bodyMatch ? bodyMatch[1] : "";
-        let result = `<span style="display:flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" width="1em" height="1em">${body}</svg></span>`;
+        let result = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" width="1em" height="1em">${body}</svg>`;
         result = makeIdsUnique(result);
         emojiFetchCache.set(cacheKey, result);
         if (emojiFetchCache.size > 200)
@@ -4532,21 +4655,8 @@ async function onInstall(nuxt) {
   }
   if (nuxt.options._prepare)
     return;
-  if (isCI) {
-    const installedProviders2 = await getInstalledProviders();
-    if (installedProviders2.length === 0) {
-      throw new Error(
-        `[nuxt-og-image] No OG image provider dependencies found. Install a provider before running in CI:
-  npm add ${TAKUMI_CORE_PACKAGE}                # for takumi
-  npm add @resvg/resvg-js satori yoga-wasm-web  # for satori
-  npm add playwright-core                       # for browser
-See: https://nuxtseo.com/og-image/getting-started`
-      );
-    }
-    return;
-  }
-  if (!canPromptInteractively()) {
-    logger.info("Skipping interactive onboarding (non-interactive environment). Defaulting to the takumi renderer.");
+  if (isCI || !canPromptInteractively()) {
+    logger.info("Skipping interactive onboarding (non-interactive environment).");
     return;
   }
   logger.info("");
@@ -5443,10 +5553,21 @@ ${familyInfo}`);
           takumi: false
         }
       });
-      if (!nuxt.options.dev) {
-        addBuildPlugin(TreeShakeComposablesPlugin, { server: true, client: true });
+      if (!nuxt.options.dev)
         setRuntimeAlias("#og-image-cache", resolve("./runtime/server/og-image/cache/mock"));
-      }
+    }
+    const missingRenderers = {};
+    if (!nuxt.options.dev && !nuxt.options._prepare) {
+      addVitePlugin(OgImageUsageCheckPlugin.vite({
+        getContext: () => ({
+          components: ogImageComponentCtx.components,
+          browserEnabled: !!config.browser,
+          missingRenderers,
+          routeRuleReferences: collectRouteRuleReferences(nuxt.options.routeRules)
+        }),
+        warn: (message) => logger.warn(message),
+        ignoreDirs: [resolve("./runtime"), nuxt.options.buildDir]
+      }), { server: false });
     }
     const basePath = config.zeroRuntime ? "./runtime/server/routes/__zero-runtime" : "./runtime/server/routes";
     let publicDirAbs = nuxt.options.dir.public;
@@ -5600,7 +5721,8 @@ ${familyInfo}`);
       }
       addImports({
         name,
-        from: resolve(`./runtime/app/composables/${name}`)
+        // zeroRuntime production builds get wrappers that only run during prerender
+        from: config.zeroRuntime && !nuxt.options.dev ? resolve("./runtime/app/composables/zero-runtime") : resolve(`./runtime/app/composables/${name}`)
       });
     });
     addImports({
@@ -5657,19 +5779,18 @@ ${familyInfo}`);
         }
       }
     }
+    if (config.browser)
+      ogImageComponentCtx.detectedRenderers.add("browser");
     if (!nuxt.options._prepare && !hasUserComponents) {
-      const installedProviders = await getInstalledProviders();
-      const preferred = installedProviders.find((p) => p.provider === "takumi") || installedProviders[0];
+      const { preferred, noRenderer } = resolveAutoDetectedProvider({
+        hasUserComponents,
+        installedProviders: (await getInstalledProviders()).map((p) => p.provider)
+      });
       if (preferred) {
-        ogImageComponentCtx.detectedRenderers.add(preferred.provider);
-        logger.debug(`Using ${preferred.provider} renderer`);
-      } else if (nuxt.options.dev && !nuxt.options._prepare && canPromptInteractively()) {
-        const renderer = await promptForRendererSelection();
-        ogImageComponentCtx.detectedRenderers.add(renderer);
-        logger.debug(`Using ${renderer} renderer`);
-      } else {
-        ogImageComponentCtx.detectedRenderers.add("takumi");
-        logger.warn(`No OG image renderer dependency detected. Defaulting to \`takumi\` (non-interactive environment). Install \`${TAKUMI_CORE_PACKAGE}\`, or add a renderer component (e.g. components/OgImage/Default.satori.vue) to choose explicitly.`);
+        ogImageComponentCtx.detectedRenderers.add(preferred);
+        logger.debug(`Using ${preferred} renderer`);
+      } else if (noRenderer) {
+        logger.warn(NO_RENDERER_MESSAGE);
       }
     }
     const availableRenderers = /* @__PURE__ */ new Set();
@@ -5678,25 +5799,22 @@ ${familyInfo}`);
         for (const renderer of ogImageComponentCtx.detectedRenderers) {
           const binding = getRecommendedBinding(renderer, targetCompatibility);
           const missing = await getMissingDependencies(renderer, binding);
-          if (missing.length === 0) {
+          if (missing.length === 0 || renderer === "browser") {
             availableRenderers.add(renderer);
-          } else if (nuxt.options.dev && !nuxt.options._prepare) {
+          } else {
             const installSpecs = await getMissingDependencyInstallSpecs(renderer, binding);
-            logger.warn(`${renderer} renderer requires: ${installSpecs.join(", ")}`);
-            const { success } = await ensureProviderDependencies(renderer, binding, nuxt);
-            if (success) {
-              availableRenderers.add(renderer);
-            } else if (isAgent) {
-              throw new Error(`[nuxt-og-image] Failed to install ${renderer} dependencies: ${missing.join(", ")}. Install manually: npx nypm add ${installSpecs.join(" ")}`);
+            const action = resolveMissingRendererAction({ renderer, installSpecs, dev: nuxt.options.dev, interactive: canPromptInteractively() });
+            if (action._tag === "CheckUsage") {
+              missingRenderers[renderer] = installSpecs;
+            } else if (action._tag === "Report") {
+              logger.error(action.message);
             } else {
-              logger.error(`Failed to install ${renderer} dependencies. Templates using this renderer won't work.`);
+              const accepted = await logger.prompt(`The ${renderer} renderer needs ${installSpecs.join(", ")}. Install now?`, { type: "confirm", initial: true });
+              if (accepted === true && (await ensureProviderDependencies(renderer, binding, nuxt)).success)
+                availableRenderers.add(renderer);
+              else
+                logger.error(getMissingRendererMessage(renderer, installSpecs));
             }
-          } else if (isAgent) {
-            const installSpecs = await getMissingDependencyInstallSpecs(renderer, binding);
-            throw new Error(`[nuxt-og-image] ${renderer} renderer missing dependencies: ${missing.join(", ")}. Install with: npx nypm add ${installSpecs.join(" ")}`);
-          } else {
-            const installSpecs = await getMissingDependencyInstallSpecs(renderer, binding);
-            logger.error(`${renderer} renderer missing dependencies: ${missing.join(", ")}. Install with: npx nypm add ${installSpecs.join(" ")}`);
           }
           if (renderer === "satori" && availableRenderers.has(renderer) && binding !== "node") {
             logger.warn("ReSVG native binding not available. Falling back to WASM version, this may slow down PNG rendering.");
@@ -6075,6 +6193,7 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
         // @ts-expect-error runtime type
         isNuxtContentDocumentDriven: !!nuxt.options.content?.documentDriven,
         cssFramework: cssFramework || "none",
+        browserEnabled: !!config.browser,
         // Browser renderer config for cloudflare binding access
         browser: typeof config.browser === "object" ? {
           provider: config.browser.provider,
@@ -6109,6 +6228,7 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
         "nuxt-og-image": {
           defaults: runtimeConfig.defaults,
           includeTwitter: runtimeConfig.includeTwitter,
+          browserEnabled: runtimeConfig.browserEnabled,
           hasServerRuntime: !nuxt.options._generate && !nuxt.options.nitro?.static
         }
       };
@@ -6123,7 +6243,7 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
         }
       };
     });
-    const getDetectedRenderers = () => ogImageComponentCtx.detectedRenderers;
+    const getDetectedRenderers = () => new Set([...ogImageComponentCtx.detectedRenderers].filter((r) => !missingRenderers[r]));
     const getCompatibilityMeta = () => runtimeCompatibilityMeta;
     if (nuxt.options.dev) {
       await setupDevHandler(config, resolver, getDetectedRenderers, getCompatibilityMeta);
@@ -6167,6 +6287,8 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
     setRuntimeAlias("#og-image/types", resolve("./runtime/types"));
     if (nuxt.options.build)
       addServerPlugin(resolve("./runtime/server/plugins/prerender"));
+    if (nuxt.options.dev)
+      addServerPlugin(resolve("./runtime/server/plugins/auto-eject"));
     setupPrerenderHandler(config, resolver, getDetectedRenderers, getCompatibilityMeta);
     if (nuxt.options.dev && hasWarnings()) {
       nuxt.hook("ready", () => {