nuxt-og-image 6.10.2 → 7.0.0

package/dist/shared/{nuxt-og-image.Bcegsloy.mjs → nuxt-og-image.DR_SxdDv.mjs}

@@ -1,26 +1,25 @@
-import { createHash, randomBytes } from 'node:crypto';
 import * as fs from 'node:fs';
-import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, rmSync } from 'node:fs';
+import { existsSync, mkdirSync, readFileSync, readdirSync, 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, addServerHandler, addServerImports, addPlugin, addComponentsDir, addServerPlugin } from '@nuxt/kit';
+import { findPackageJSON } from 'node:module';
+import { pathToFileURL, fileURLToPath } from 'node:url';
+import { resolvePath, useNuxt, getNuxtVersion, addTemplate, updateTemplates, directoryToURL, tryResolveModule, addTypeTemplate, defineNuxtModule, createResolver, addImports, hasNuxtModule, hasNuxtModuleCompatibility, getNuxtModuleVersion, addVitePlugin, addServerHandler, addServerImports, addPlugin, getLayerDirectories, addComponentsDir, addServerPlugin, getNitroVersion } from '@nuxt/kit';
 import { defu } from 'defu';
 import { fnv1a64Base36 } from 'fnv1a-64';
-import { useSiteConfig, installNuxtSiteConfig } from 'nuxt-site-config/kit';
-import { resolveNitroPreset, renderNitroTypeAugmentations, setupNitroRuntimeCompatibility, getNuxtModuleOptions, isNuxtGenerate } from 'nuxtseo-shared/kit';
+import { resolveNitroPreset, renderNitroTypeAugmentations, setupRuntimeAliases, setupNitroRuntimeCompatibility, getNuxtModuleOptions, isNuxtGenerate } from 'nuxtseo-shared/kit';
 import { join, basename, dirname, relative, isAbsolute, resolve } from 'pathe';
-import { readPackageJSON } from 'pkg-types';
+import { createHash } from 'node:crypto';
 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 { resolveColorMix, GRADIENT_COLOR_SPACE_RE, splitCssDeclarations } from '../../dist/runtime/server/og-image/utils/css.js';
 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 { useSiteConfig } from 'nuxt-site-config/kit';
 import { stripLiteral } from 'strip-literal';
 import { createUnplugin } from 'unplugin';
 import { parse } from '@vue/compiler-sfc';
@@ -28,6 +27,7 @@ import { ofetch } from 'ofetch';
 import { parse as parse$1, walkSync, ELEMENT_NODE as ELEMENT_NODE$2, renderSync } from 'ultrahtml';
 import { RE_MATCH_EMOJIS, getEmojiCodePoint, getEmojiIconNames } from '../../dist/runtime/server/og-image/core/transforms/emojis/emoji-utils.js';
 import { p as promptFontsMigration } from './nuxt-og-image.CJa2KCie.mjs';
+import { parsePublishConfig, hasPublishMount } from '../../dist/runtime/shared/publish.js';
 
 const valueTypes = { i: 127, p: 127, j: 126, f: 125, d: 124 };
 function encodeLength(value) {
@@ -101,11 +101,43 @@ async function prepareHarfBuzzCallbacks(adapterPath, outputDir) {
     `export default { ${entries.map(({ signature }) => signature).join(", ")} }`
   ].join("\n");
 }
+function externalizeSatoriHarfBuzz(code, id, specifier = "harfbuzzjs") {
+  const blocks = [];
+  const loaders = [];
+  parseAndWalk(code, id, {
+    enter(node) {
+      if (node.type === "BlockStatement")
+        blocks.push(node);
+      if (node.type !== "AssignmentExpression" || node.operator !== "=" || node.left.type !== "MemberExpression" || node.left.computed || node.left.property.type !== "Identifier" || node.left.property.name !== "exports" || node.right.type !== "NewExpression" || node.right.callee.type !== "Identifier" || node.right.callee.name !== "Promise") {
+        return;
+      }
+      const block = blocks.at(-1);
+      if (block)
+        loaders.push({ ...block, target: code.slice(node.left.start, node.left.end) });
+    },
+    leave(node) {
+      if (node.type === "BlockStatement")
+        blocks.pop();
+    }
+  });
+  if (loaders.length !== 1)
+    throw new Error(`Cannot replace the Satori HarfBuzz loader in ${id}: found ${loaders.length} loaders.`);
+  const loader = loaders[0];
+  return `import _ogImageHarfBuzz from ${JSON.stringify(specifier)};
+${code.slice(0, loader.start)}{${loader.target} = _ogImageHarfBuzz;}${code.slice(loader.end)}`;
+}
+
+async function readPackageManifest(path) {
+  return JSON.parse(await readFile(path, "utf8"));
+}
 
 const isUndefinedOrTruthy = (v) => typeof v === "undefined" || v !== false;
-function checkLocalChrome() {
+async function checkLocalChrome() {
   if (isCI)
     return false;
+  if (!await hasResolvableDependency("chrome-launcher"))
+    return false;
+  const { Launcher } = await import('chrome-launcher');
   let hasChromeLocally = false;
   try {
     hasChromeLocally = !!Launcher.getFirstInstallation();
@@ -118,7 +150,7 @@ async function hasResolvableDependency(dep) {
     return null;
   }).then((r) => r && r !== dep);
 }
-const MIN_SATORI_VERSION = "0.33.5";
+const MIN_SATORI_VERSION = "0.47.1";
 function isSupportedSatoriVersion(version) {
   const current = (version || "").split(".").map((part) => Number.parseInt(part, 10) || 0);
   const minimum = MIN_SATORI_VERSION.split(".").map(Number);
@@ -358,7 +390,7 @@ async function applyNitroPresetCompatibility(nitroConfig, options) {
   nitroConfig.alias["#og-image/renderers/satori"] = satoriEnabled ? await resolve.resolvePath("./runtime/server/og-image/satori/renderer") : emptyMock;
   nitroConfig.alias["#og-image/renderers/browser"] = browserEnabled ? await resolve.resolvePath("./runtime/server/og-image/browser/renderer") : emptyMock;
   nitroConfig.alias["#og-image/renderers/takumi"] = takumiEnabled ? await resolve.resolvePath("./runtime/server/og-image/takumi/renderer") : emptyMock;
-  const resolvedCompatibility = { ...options.metadata || {} };
+  const resolvedCompatibility = {};
   async function applyBinding(key) {
     let binding = options.compatibility?.[key];
     if (typeof binding === "undefined")
@@ -375,10 +407,7 @@ async function applyNitroPresetCompatibility(nitroConfig, options) {
       [`#og-image/bindings/${key}`]: !binding ? emptyMock : await resolve.resolvePath(`./runtime/server/og-image/bindings/${key}/${binding}`)
     };
   }
-  const satoriPkgDir = await resolve.resolvePath("satori/package.json").then((p) => p.replace("/package.json", ""));
-  const yogaWasmPath = `${satoriPkgDir}/yoga.wasm`;
   nitroConfig.alias = defu(
-    { "#og-image/yoga-wasm": `${yogaWasmPath}?module` },
     await applyBinding("browser"),
     await applyBinding("satori"),
     await applyBinding("takumi"),
@@ -387,9 +416,11 @@ async function applyNitroPresetCompatibility(nitroConfig, options) {
     nitroConfig.alias || {}
   );
   if (resolvedCompatibility.satori) {
-    const satoriPackage = await readPackageJSON(`${satoriPkgDir}/package.json`);
+    const satoriPkgDir = await resolve.resolvePath("satori/package.json").then((p) => p.replace("/package.json", ""));
+    nitroConfig.alias["#og-image/layout-wasm"] = `${satoriPkgDir}/layout.wasm?module`;
+    const satoriPackage = await readPackageManifest(`${satoriPkgDir}/package.json`);
     if (!isSupportedSatoriVersion(satoriPackage.version))
-      throw new Error(`[Nuxt OG Image] Satori ${satoriPackage.version} is not supported. Satori ${MIN_SATORI_VERSION} or later is required (GHSA-wx4j-mvgx-mqwp). Run: npm install satori@latest`);
+      throw new Error(`[Nuxt OG Image] Satori ${satoriPackage.version} is not supported. Satori ${MIN_SATORI_VERSION} or later is required. Run: npm install satori@latest`);
     const harfbuzzWasmPath = resolveModulePath("harfbuzzjs/hb.wasm", { from: `${satoriPkgDir}/package.json` });
     if (resolvedCompatibility.satori === "wasm" || target.replace(RE_LEGACY_SUFFIX, "") === "netlify-edge") {
       const harfbuzzDir = harfbuzzWasmPath.slice(0, -"hb.wasm".length);
@@ -444,7 +475,7 @@ async function ensureDependencies(dep, nuxt = useNuxt()) {
 
 const RE_REFLECT_HAS_MINIFIED = /Reflect\.has\(([\w$]+),([\w$]+)\)\?Reflect\.get\(\1,\2,([\w$]+)\):Reflect\.get\(([\w$]+),\2,\3\)/g;
 const RE_WASM_IMPORT = /import\("(\.\/wasm\/[^"]+\.wasm)"\)/g;
-async function setupBuildHandler(config, resolve, getDetectedRenderers, getCompatibilityMeta = () => ({}), nuxt = useNuxt()) {
+async function setupBuildHandler(config, resolve, getDetectedRenderers, nuxt = useNuxt()) {
   nuxt.options.nitro.storage = nuxt.options.nitro.storage || {};
   if (typeof config.runtimeCacheStorage === "object")
     nuxt.options.nitro.storage["nuxt-og-image"] = config.runtimeCacheStorage;
@@ -464,8 +495,7 @@ async function setupBuildHandler(config, resolve, getDetectedRenderers, getCompa
   await applyNitroPresetCompatibility(nitroConfig, {
     compatibility: config.compatibility?.runtime,
     resolve,
-    detectedRenderers: getDetectedRenderers(),
-    metadata: getCompatibilityMeta()
+    detectedRenderers: getDetectedRenderers()
   });
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     nitro.hooks.hook("prerender:config", (prerenderConfig) => {
@@ -477,14 +507,17 @@ async function setupBuildHandler(config, resolve, getDetectedRenderers, getCompa
     await applyNitroPresetCompatibility(nitro.options, {
       compatibility: config.compatibility?.runtime,
       resolve,
-      detectedRenderers: getDetectedRenderers(),
-      metadata: getCompatibilityMeta()
+      detectedRenderers: getDetectedRenderers()
     });
     const rollupConfig = nitro.options.rollupConfig ||= { output: {} };
     rollupConfig.plugins = [rollupConfig.plugins, {
       name: "og-image-harfbuzz-worker",
       transform(code, id) {
-        if (!nitro.options.alias["#og-image/harfbuzz-factory"] || !id.endsWith("/harfbuzzjs/hb.js"))
+        if (!nitro.options.alias["#og-image/harfbuzz-factory"])
+          return;
+        if (/\/satori\/dist\/(?:standalone|index)\.js$/.test(id))
+          return { code: externalizeSatoriHarfBuzz(code, id), map: null };
+        if (!id.endsWith("/harfbuzzjs/hb.js"))
           return;
         const transformed = new MagicString(code);
         parseAndWalk(code, id, {
@@ -534,9 +567,9 @@ async function setupBuildHandler(config, resolve, getDetectedRenderers, getCompa
           }
         }
       }
-      const [resvgHash, yogaHash, takumiHash] = await Promise.all([
+      const [resvgHash, layoutHash, takumiHash] = await Promise.all([
         resolveFilePathSha1("@resvg/resvg-wasm/index_bg.wasm"),
-        resolveFilePathSha1("satori/yoga.wasm"),
+        resolveFilePathSha1("satori/layout.wasm"),
         resolveFilePathSha1("@takumi-rs/wasm/takumi_wasm_bg.wasm")
       ]);
       for (const entry of wasmEntries) {
@@ -555,7 +588,7 @@ async function setupBuildHandler(config, resolve, getDetectedRenderers, getCompa
         if (compatibility.wasm?.esmImport) {
           const postfix = normalizedTarget === "vercel-edge" ? "?module" : "";
           const wasmPath = isCloudflarePagesOrModule ? `../wasm/` : `./wasm/`;
-          contents = contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm?module"', `"${wasmPath}index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"satori/yoga.wasm?module"', `"${wasmPath}yoga-${yogaHash}.wasm${postfix}"`).replaceAll('"@takumi-rs/wasm/takumi_wasm_bg.wasm?module"', `"${wasmPath}takumi_wasm_bg-${takumiHash}.wasm${postfix}"`).replaceAll('"yoga-wasm-web/dist/yoga.wasm?module"', `"${wasmPath}yoga-${yogaHash}.wasm${postfix}"`);
+          contents = contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm?module"', `"${wasmPath}index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"satori/layout.wasm?module"', `"${wasmPath}layout-${layoutHash}.wasm${postfix}"`).replaceAll('"@takumi-rs/wasm/takumi_wasm_bg.wasm?module"', `"${wasmPath}takumi_wasm_bg-${takumiHash}.wasm${postfix}"`);
           if (postfix) {
             contents = contents.replaceAll(RE_WASM_IMPORT, `import("$1${postfix}")`);
           }
@@ -633,754 +666,325 @@ function patchWebAssemblyInstantiate(code) {
   return code;
 }
 
-const TAKUMI_CORE_PACKAGE = "@takumi-rs/core";
-const TAKUMI_WASM_PACKAGE = "@takumi-rs/wasm";
-const PROVIDER_DEPENDENCIES = [
-  {
-    name: "satori",
-    description: "SVG-based renderer using Satori",
-    bindings: {
-      "node": [
-        { name: "satori", description: "HTML to SVG renderer" },
-        { name: "@resvg/resvg-js", description: "SVG to PNG converter (native)" }
-      ],
-      "wasm": [
-        { name: "satori", description: "HTML to SVG renderer" },
-        { name: "@resvg/resvg-wasm", description: "SVG to PNG converter (WASM)" }
-      ],
-      "wasm-fs": [
-        { name: "satori", description: "HTML to SVG renderer" },
-        { name: "@resvg/resvg-wasm", description: "SVG to PNG converter (WASM)" }
-      ]
-    }
-  },
-  {
-    name: "takumi",
-    description: "Rust-based high-performance renderer (recommended)",
-    bindings: {
-      "node": [
-        { name: TAKUMI_CORE_PACKAGE, description: "Native Takumi renderer" }
-      ],
-      "wasm": [
-        { name: TAKUMI_WASM_PACKAGE, description: "WASM Takumi renderer" }
-      ],
-      "wasm-fs": [
-        { name: TAKUMI_WASM_PACKAGE, description: "WASM Takumi renderer" }
-      ]
-    }
-  },
-  {
-    name: "browser",
-    description: "Browser-based screenshot renderer",
-    bindings: {
-      node: [
-        { name: "playwright-core", description: "Headless browser automation" }
-      ]
-    }
+const _warnedVars = /* @__PURE__ */ new Set();
+const RE_CSS_DECL = /([\w-]+)\s*:\s*([^\s;][^;]*)(?:;|$)/g;
+const RE_CSS_TOGGLE = /(--[\w-]+)\s*:\s+;/g;
+const RE_CSS_CLASS_RULE = /\.((?:\\[0-9a-f]{1,6}\s?|\\[^0-9a-f]|[^\\\s{])+)\s*\{([^}]+)\}/gi;
+const RE_ROOT_HOST_BLOCK = /:(?:root|host)[^\s{]*\s*\{([^}]+)\}/g;
+const RE_UNIVERSAL_BLOCK = /\*[^{]*\{([^}]+)\}/g;
+const RE_PROPERTY_AT_RULE = /@property\s+(--[\w-]+)\s*\{([^}]+)\}/g;
+const RE_INITIAL_VALUE = /initial-value\s*:\s*([^\s;][^;]*);?/;
+const RE_CSS_ESCAPE_HEX = /\\([0-9a-f]{1,6})\s?/gi;
+const RE_CSS_ESCAPE_CHAR = /\\(.)/g;
+const RE_CSS_ESCAPE_HEX_STRIP = /\\[0-9a-f]{1,6}\s?/gi;
+const RE_CSS_ESCAPE_DOT = /\\./g;
+const RE_COMBINATOR_OR_SPACE = /[\s>+~]/;
+const RE_PSEUDO_CLASS = /:[a-z]/i;
+const RE_CAMEL_CASE = /-([a-z])/g;
+const RE_ONLY_DIGITS = /^\d+$/;
+const RE_IMPORTANT = /\s*!important\s*$/;
+const RE_QUOTES = /^['"]|['"]$/g;
+const RE_WIDTH_VALUE = /width:([^;}]+)/;
+const RE_CALC_VAR_MULTIPLY = /calc\(var\((--[\w-]+)\)\s*\*\s*([\d.]+)\)/;
+const RE_NUMERIC_WITH_UNIT = /([\d.]+)(rem|px|em|%)/;
+const RE_CSS_KEYWORD = /^(?:initial|inherit|unset|revert|revert-layer)$/;
+const RE_UNRESOLVED_VAR = /var\((--[\w-]+)/g;
+const RE_INVALID_CALC = /calc\(\s*[*/]/;
+const RE_COLOR_PROP = /color|fill|stroke|outline|border|background|caret|accent/;
+let transform;
+let Features;
+const LEGACY_TARGETS = {
+  chrome: 60 << 16,
+  safari: 10 << 16
+};
+async function loadLightningCss() {
+  if (!transform) {
+    const lcss = await import('lightningcss');
+    transform = lcss.transform;
+    Features = lcss.Features;
   }
-];
-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(" ")}`;
+  return { transform, Features };
 }
-function resolveMissingRendererAction(input) {
-  if (!input.dev)
-    return { _tag: "CheckUsage" };
-  if (input.interactive)
-    return { _tag: "AskToInstall" };
-  return { _tag: "Report", message: getMissingRendererMessage(input.renderer, input.installSpecs) };
+async function transformWithLightningCss(css, options = {}) {
+  const { transform: transform2 } = await loadLightningCss();
+  const {
+    minify = true,
+    filename = "input.css",
+    targets = LEGACY_TARGETS,
+    include
+  } = options;
+  const transformOptions = {
+    filename,
+    code: Buffer.from(css),
+    minify,
+    targets,
+    drafts: { customMedia: true }
+  };
+  if (include !== void 0)
+    transformOptions.include = include;
+  return transform2(transformOptions);
 }
-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) {
-    if (provider.bindings.node) {
-      const allNodeInstalled = await Promise.all(
-        provider.bindings.node.map((dep) => hasResolvableDependency(dep.name))
-      );
-      if (allNodeInstalled.every(Boolean)) {
-        installed.push({ provider: provider.name, binding: "node" });
-        continue;
-      }
+function extractDeclarations(body, onDeclaration) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const match of body.matchAll(RE_CSS_DECL)) {
+    if (match[1] && match[2] && !seen.has(match[1])) {
+      seen.add(match[1]);
+      onDeclaration(match[1], match[2].trim());
     }
-    if (provider.bindings.wasm) {
-      const allWasmInstalled = await Promise.all(
-        provider.bindings.wasm.map((dep) => hasResolvableDependency(dep.name))
-      );
-      if (allWasmInstalled.every(Boolean)) {
-        installed.push({ provider: provider.name, binding: "wasm" });
-      }
+  }
+  for (const match of body.matchAll(RE_CSS_TOGGLE)) {
+    if (match[1] && !seen.has(match[1])) {
+      seen.add(match[1]);
+      onDeclaration(match[1], " ");
     }
   }
-  return installed;
 }
-async function getMissingDependencies(provider, binding = "node") {
-  const missing = await getMissingProviderDependencyDefinitions(provider, binding);
-  return missing.map((d) => d.name);
-}
-async function getMissingProviderDependencyDefinitions(provider, binding = "node") {
-  const providerDef = PROVIDER_DEPENDENCIES.find((p) => p.name === provider);
-  if (!providerDef)
-    return [];
-  const deps = providerDef.bindings[binding] || providerDef.bindings.node || [];
-  const missing = [];
-  for (const dep of deps) {
-    if (!await hasResolvableDependency(dep.name))
-      missing.push(dep);
+function walkBlockRules(css, selectorRe, onBlock) {
+  for (const match of css.matchAll(selectorRe)) {
+    if (match[1])
+      onBlock(match[1]);
   }
-  return missing;
-}
-function getDependencyDefinitions(provider, binding = "node") {
-  const providerDef = PROVIDER_DEPENDENCIES.find((p) => p.name === provider);
-  if (!providerDef)
-    return [];
-  return providerDef.bindings[binding] || providerDef.bindings.node || [];
 }
-function getDependencyInstallSpec(dep) {
-  return dep.installSpec || dep.name;
+function walkClassRules(css, onRule) {
+  for (const match of css.matchAll(RE_CSS_CLASS_RULE)) {
+    const rawSelector = match[1];
+    if (isSimpleClassSelector(rawSelector))
+      onRule(decodeCssClassName(rawSelector), match[2]);
+  }
 }
-async function getMissingDependencyInstallSpecs(provider, binding = "node") {
-  const missing = await getMissingProviderDependencyDefinitions(provider, binding);
-  return missing.map(getDependencyInstallSpec);
+async function simplifyCss(css) {
+  const result = await transformWithLightningCss(css, { minify: true });
+  return result.code.toString();
 }
-function getProviderDependencyInstallSpecs(provider, binding = "node") {
-  return getDependencyDefinitions(provider, binding).map(getDependencyInstallSpec);
+function extractCssVars(css) {
+  const vars = /* @__PURE__ */ new Map();
+  walkBlockRules(css, RE_ROOT_HOST_BLOCK, (body) => {
+    extractDeclarations(body, (prop, value) => {
+      if (prop.startsWith("--"))
+        vars.set(prop, value);
+    });
+  });
+  return vars;
 }
-function getRecommendedBindingFromPreset(provider) {
-  const preset = resolveOgImagePreset();
-  const compatibility = getPresetNitroPresetCompatibility(preset);
-  return getRecommendedBinding(provider, compatibility);
+function extractUniversalVars(css) {
+  const vars = /* @__PURE__ */ new Map();
+  walkBlockRules(css, RE_UNIVERSAL_BLOCK, (body) => {
+    extractDeclarations(body, (prop, value) => {
+      if (prop.startsWith("--"))
+        vars.set(prop, value);
+    });
+  });
+  return vars;
 }
-function getRecommendedBinding(provider, compatibility) {
-  if (provider === "satori") {
-    const resvgBinding = compatibility.resvg;
-    if (resvgBinding === "wasm-fs")
-      return "wasm-fs";
-    if (resvgBinding === "wasm")
-      return "wasm";
-    return "node";
-  }
-  if (provider === "takumi") {
-    const takumiBinding = compatibility.takumi;
-    if (takumiBinding === "wasm")
-      return "wasm";
-    return "node";
-  }
-  if (provider === "browser") {
-    return "node";
+function extractPropertyInitialValues(css) {
+  const vars = /* @__PURE__ */ new Map();
+  for (const match of css.matchAll(RE_PROPERTY_AT_RULE)) {
+    const initialMatch = match[2].match(RE_INITIAL_VALUE);
+    if (initialMatch?.[1])
+      vars.set(match[1], initialMatch[1].trim());
   }
-  return "node";
+  return vars;
 }
-async function ensureProviderDependencies(provider, binding, nuxt) {
-  const missingDeps = await getMissingProviderDependencyDefinitions(provider, binding);
-  if (missingDeps.length === 0)
-    return { success: true, installed: [] };
-  const missingInstallSpecs = missingDeps.map(getDependencyInstallSpec);
-  const pm = await detectPackageManager(nuxt.options.rootDir);
-  const pmName = pm?.name || "npm";
-  logger.info(`Installing ${provider} dependencies: ${missingInstallSpecs.join(", ")}`);
-  const installed = [];
-  for (const dep of missingDeps) {
-    const installSpec = getDependencyInstallSpec(dep);
-    const success = await addDependency(installSpec, {
-      cwd: nuxt.options.rootDir,
-      dev: false
-    }).then(() => {
-      installed.push(installSpec);
-      return true;
-    }).catch(() => {
-      logger.error(`Failed to install ${installSpec}. Run manually: ${pmName} add ${installSpec}`);
-      return false;
+function extractPerClassVars(css) {
+  const result = /* @__PURE__ */ new Map();
+  walkClassRules(css, (className, body) => {
+    const classVars = /* @__PURE__ */ new Map();
+    extractDeclarations(body, (prop, value) => {
+      if (prop.startsWith("--"))
+        classVars.set(prop, value);
     });
-    if (!success)
-      return { success: false, installed };
+    if (classVars.size > 0)
+      result.set(className, classVars);
+  });
+  return result;
+}
+function serializeTokens(tokens) {
+  const parts = [];
+  for (const tov of tokens) {
+    switch (tov.type) {
+      case "token":
+        parts.push(serializeToken(tov.value));
+        break;
+      case "color":
+        parts.push(serializeColor(tov.value));
+        break;
+      case "unresolved-color":
+        parts.push(serializeUnresolvedColor(tov.value));
+        break;
+      case "var":
+        parts.push(`var(${tov.value.name.ident}${tov.value.fallback ? `, ${serializeTokens(tov.value.fallback)}` : ""})`);
+        break;
+      case "env":
+        parts.push(`env(${serializeEnvName(tov.value.name)}${tov.value.fallback ? `, ${serializeTokens(tov.value.fallback)}` : ""})`);
+        break;
+      case "function":
+        parts.push(`${tov.value.name}(${serializeTokens(tov.value.arguments)})`);
+        break;
+      case "length":
+        parts.push(`${tov.value.value}${tov.value.unit}`);
+        break;
+      case "angle":
+        parts.push(`${tov.value.value}${tov.value.type}`);
+        break;
+      case "time":
+        parts.push(`${tov.value.value}${tov.value.type === "seconds" ? "s" : "ms"}`);
+        break;
+      case "resolution":
+        parts.push(`${tov.value.value}${tov.value.type}`);
+        break;
+      case "percentage":
+        parts.push(`${tov.value * 100}%`);
+        break;
+      case "dashed-ident":
+        parts.push(tov.value);
+        break;
+      case "url":
+        parts.push(`url(${tov.value.url})`);
+        break;
+      case "animation-name":
+        parts.push(typeof tov.value === "string" ? tov.value : tov.value.value || "");
+        break;
+    }
   }
-  return { success: true, installed };
+  return parts.join("");
 }
-function canPromptInteractively(env = {
-  hasTTY,
-  hasStdinTTY: Boolean(process.stdin?.isTTY),
-  isAgent,
-  isCI
-}) {
-  return env.hasTTY && env.hasStdinTTY && !env.isAgent && !env.isCI;
+function serializeToken(token) {
+  switch (token.type) {
+    case "ident":
+      return token.value;
+    case "number":
+      return String(token.value);
+    case "percentage":
+      return `${token.value * 100}%`;
+    case "dimension":
+      return `${token.value}${token.unit}`;
+    case "string":
+      return `"${token.value}"`;
+    case "hash":
+    case "id-hash":
+      return `#${token.value}`;
+    case "white-space":
+      return " ";
+    case "delim":
+      return token.value;
+    case "comma":
+      return ", ";
+    case "colon":
+      return ":";
+    case "semicolon":
+      return ";";
+    case "unquoted-url":
+      return token.value;
+    case "at-keyword":
+      return `@${token.value}`;
+    default:
+      return "";
+  }
 }
-async function validateProviderSetup(renderer, compatibility) {
-  const issues = [];
-  const binding = getRecommendedBinding(renderer, compatibility);
-  const missing = await getMissingDependencyInstallSpecs(renderer, binding);
-  if (missing.length > 0) {
-    issues.push(`Missing ${renderer} dependencies: ${missing.join(", ")}`);
+function serializeColor(color) {
+  if (typeof color === "string")
+    return color;
+  const a = color.alpha !== void 0 && color.alpha !== 1 ? ` / ${color.alpha}` : "";
+  switch (color.type) {
+    case "currentcolor":
+      return "currentColor";
+    case "rgb":
+      return color.alpha !== 1 ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.alpha})` : `rgb(${color.r}, ${color.g}, ${color.b})`;
+    case "hsl":
+      return `hsl(${color.h} ${color.s}% ${color.l}%${a})`;
+    case "hwb":
+      return `hwb(${color.h} ${color.w}% ${color.b}%${a})`;
+    case "lab":
+      return `lab(${color.l} ${color.a} ${color.b}${a})`;
+    case "lch":
+      return `lch(${color.l} ${color.c} ${color.h}${a})`;
+    case "oklab":
+      return `oklab(${color.l} ${color.a} ${color.b}${a})`;
+    case "oklch":
+      return `oklch(${color.l} ${color.c} ${color.h}${a})`;
+    case "light-dark":
+      return `light-dark(${serializeColor(color.light)}, ${serializeColor(color.dark)})`;
+    default:
+      if ("x" in color)
+        return `color(${color.type} ${color.x} ${color.y} ${color.z}${a})`;
+      if ("r" in color)
+        return `color(${color.type} ${color.r} ${color.g} ${color.b}${a})`;
+      return "";
   }
-  if (renderer === "satori") {
-    const hasResvgNode = await hasResolvableDependency("@resvg/resvg-js");
-    const hasResvgWasm = await hasResolvableDependency("@resvg/resvg-wasm");
-    if (!hasResvgNode && !hasResvgWasm) {
-      issues.push("Satori requires either @resvg/resvg-js (node) or @resvg/resvg-wasm to render PNGs");
+}
+function serializeUnresolvedColor(color) {
+  const alpha = serializeTokens(color.alpha);
+  switch (color.type) {
+    case "rgb":
+      return `rgb(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+    case "hsl":
+      return `hsl(${color.h} ${color.s}% ${color.l}% / ${alpha})`;
+    case "light-dark":
+      return `light-dark(${serializeTokens(color.light)}, ${serializeTokens(color.dark)})`;
+    default:
+      return "";
+  }
+}
+function serializeEnvName(name) {
+  if (name.type === "ua")
+    return name.value;
+  return name.ident || "";
+}
+function resolveExtractedVars(extracted, rootAttrs) {
+  const vars = new Map(extracted.rootVars);
+  const sorted = extracted.qualifiedRules.toSorted((a, b) => a.reqs.length - b.reqs.length);
+  for (const rule of sorted) {
+    const matches = rule.reqs.every((req) => {
+      const actual = rootAttrs[req.name];
+      return req.negated ? actual !== req.value : actual === req.value;
+    });
+    if (matches) {
+      for (const [name, value] of rule.vars)
+        vars.set(name, value);
     }
   }
-  if (renderer === "browser") {
-    const hasPlaywright = await hasResolvableDependency("playwright-core");
-    if (!hasPlaywright && binding === "node") {
-      issues.push("Browser renderer requires playwright-core");
+  return vars;
+}
+function selectorsContain(selectors, predicate) {
+  for (const selector of selectors) {
+    for (const component of selector) {
+      if (predicate(component))
+        return true;
     }
   }
-  return { valid: issues.length === 0, issues };
+  return false;
 }
-
-async function setupDevHandler(options, resolve, getDetectedRenderers, getCompatibilityMeta = () => ({}), nuxt = useNuxt()) {
-  const applyCompatibility = async (nitroConfig) => {
-    const detectedRenderers = new Set(getDetectedRenderers());
-    const targetCompatibility = getPresetNitroPresetCompatibility(resolveOgImagePreset(nitroConfig));
-    for (const renderer of ["satori", "takumi", "browser"]) {
-      if (!detectedRenderers.has(renderer)) {
-        const binding = getRecommendedBinding(renderer, targetCompatibility);
-        const missing = await getMissingDependencies(renderer, binding);
-        if (missing.length === 0)
-          detectedRenderers.add(renderer);
+function isRootOrHost(selectors) {
+  return selectorsContain(selectors, (c) => c.type === "pseudo-class" && (c.kind === "root" || c.kind === "host"));
+}
+function isBareThemeClass(selectors) {
+  return selectorsContain(selectors, (c) => c.type === "class" && (c.name === "dark" || c.name === "light"));
+}
+function isUniversal(selectors) {
+  return selectorsContain(selectors, (c) => c.type === "universal");
+}
+function extractSingleSelectorReqs(components) {
+  const reqs = [];
+  for (const component of components) {
+    if (component.type === "class") {
+      if (component.name === "dark" || component.name === "light")
+        reqs.push({ name: "data-theme", value: component.name, negated: false });
+    }
+    if (component.type === "attribute" && component.operation) {
+      const name = component.name;
+      const value = component.operation.value;
+      if (name && value)
+        reqs.push({ name, value, negated: false });
+    }
+    if (component.type === "pseudo-class" && component.kind === "not") {
+      for (const innerSelector of component.selectors || []) {
+        const innerReqs = extractSingleSelectorReqs(innerSelector);
+        for (const req of innerReqs)
+          reqs.push({ ...req, negated: !req.negated });
       }
     }
-    await applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.dev, resolve, detectedRenderers, metadata: getCompatibilityMeta() });
-  };
-  await applyCompatibility(nuxt.options.nitro);
-  nuxt.hooks.hook("nitro:init", (nitro) => applyCompatibility(nitro.options));
-}
-
-const RE_TILDE_SLASH = /^~\//;
-const RE_WORD_CHARS_ONLY = /^\w+$/;
-const RE_SCRIPT_SETUP = /<script\s+setup[^>]*>\n?/;
-const SCRIPT_BLOCK = `<script setup lang="ts">
-const { title = 'My Page', description = '' } = defineProps<{
-  title?: string
-  description?: string
-}>()
-<\/script>`;
-function getStarterTemplate(renderer, css) {
-  if (renderer === "satori") {
-    return `${SCRIPT_BLOCK}
-
-<template>
-  <div :style="{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%', padding: '60px', backgroundColor: 'white', color: '#171717' }">
-    <h1 :style="{ fontSize: '72px', fontWeight: 'bold', margin: 0, lineHeight: 1.1, textAlign: 'center' }">
-      {{ title }}
-    </h1>
-    <p v-if="description" :style="{ fontSize: '32px', opacity: 0.6, marginTop: '16px', textAlign: 'center', maxWidth: '900px' }">
-      {{ description }}
-    </p>
-  </div>
-</template>
-`;
-  }
-  if (css === "tailwind" || css === "unocss") {
-    return `${SCRIPT_BLOCK}
-
-<template>
-  <div class="w-full h-full flex flex-col justify-center items-center p-[60px] bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white">
-    <h1 class="text-[72px] font-bold m-0 leading-tight text-center" style="text-wrap: balance;">
-      {{ title }}
-    </h1>
-    <p v-if="description" class="text-[32px] opacity-60 mt-4 text-center max-w-[900px]">
-      {{ description }}
-    </p>
-  </div>
-</template>
-`;
-  }
-  return `${SCRIPT_BLOCK}
-
-<template>
-  <div class="container">
-    <h1>{{ title }}</h1>
-    <p v-if="description">
-      {{ description }}
-    </p>
-  </div>
-</template>
-
-<style scoped>
-.container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 60px;
-  background: white;
-  color: #171717;
-}
-h1 {
-  font-size: 72px;
-  font-weight: bold;
-  margin: 0;
-  line-height: 1.1;
-  text-align: center;
-  text-wrap: balance;
-}
-p {
-  font-size: 32px;
-  opacity: 0.6;
-  margin-top: 16px;
-  text-align: center;
-  max-width: 900px;
-}
-</style>
-`;
-}
-function setupDevToolsUI(options, resolve$1, nuxt = useNuxt(), cssFramework = "none") {
-  setupDevToolsUI$1({
-    route: "/__nuxt-og-image",
-    name: "nuxt-og-image",
-    title: "OG Image",
-    icon: "carbon:image-search"
-  }, resolve$1, nuxt);
-  const communityTemplatesDir = resolve$1("./runtime/app/components/Templates/Community");
-  const useNitro = new Promise((resolve2) => {
-    nuxt.hooks.hook("nitro:init", resolve2);
-  });
-  async function insertDefineOgImage(componentName, pageFile) {
-    const resolved = pageFile ? resolve(pageFile) : "";
-    if (!resolved || !resolved.startsWith(nuxt.options.srcDir) || !existsSync(resolved))
-      return false;
-    const content = await readFile(resolved, "utf-8");
-    if (content.includes("defineOgImage"))
-      return false;
-    const call = `defineOgImage('${componentName}')`;
-    const scriptSetupMatch = content.match(RE_SCRIPT_SETUP);
-    if (scriptSetupMatch) {
-      const insertPos = scriptSetupMatch.index + scriptSetupMatch[0].length;
-      await writeFile(resolved, `${content.slice(0, insertPos)}${call}
-${content.slice(insertPos)}`, "utf-8");
-    } else {
-      await writeFile(resolved, `<script setup lang="ts">
-${call}
-<\/script>
-
-${content}`, "utf-8");
-    }
-    return true;
-  }
-  setupDevToolsRpc("nuxt-og-image", {
-    async ejectCommunityTemplate(path) {
-      const [dirName, componentName] = path.split("/");
-      const nameWithoutExt = componentName?.replace(".vue", "") || "";
-      let dotNotationName;
-      if (nameWithoutExt.includes(".")) {
-        dotNotationName = `${nameWithoutExt}.vue`;
-      } else {
-        const rendererMatch = nameWithoutExt.match(RE_RENDERER_SUFFIX);
-        const renderer = rendererMatch?.[1]?.toLowerCase() || "satori";
-        const baseName = nameWithoutExt.replace(RE_RENDERER_SUFFIX, "");
-        dotNotationName = `${baseName}.${renderer}.vue`;
-      }
-      const dir = join(nuxt.options.srcDir, "components", dirName || "");
-      if (!existsSync(dir)) {
-        mkdirSync(dir, { recursive: true });
-      }
-      const newPath = join(dir, dotNotationName);
-      const templatePath = join(communityTemplatesDir, dotNotationName);
-      const template = (await readFile(templatePath, "utf-8")).replace("{{ title }}", `{{ title }} - Ejected!`);
-      await writeFile(newPath, template, { encoding: "utf-8" });
-      await updateTemplates({ filter: (t) => t.filename.includes("nuxt-og-image/components.mjs") });
-      const nitro = await useNitro;
-      await nitro.hooks.callHook("rollup:reload");
-      return newPath;
-    },
-    async createComponent({ name, renderer, pageFile }) {
-      const validRenderers = ["satori", "browser", "takumi"];
-      if (!validRenderers.includes(renderer))
-        throw new Error(`Invalid renderer: ${renderer}`);
-      if (!RE_WORD_CHARS_ONLY.test(name))
-        throw new Error(`Invalid component name: ${name}`);
-      const baseDir = existsSync(join(nuxt.options.srcDir, "app")) ? join(nuxt.options.srcDir, "app") : nuxt.options.srcDir;
-      const outputDir = join(baseDir, "components", "OgImage");
-      if (!existsSync(outputDir))
-        mkdirSync(outputDir, { recursive: true });
-      const filename = `${name}.${renderer}.vue`;
-      const outputPath = join(outputDir, filename);
-      if (existsSync(outputPath))
-        throw new Error(`File already exists: ${relative(nuxt.options.rootDir, outputPath)}`);
-      const template = getStarterTemplate(renderer, cssFramework);
-      await writeFile(outputPath, template, { encoding: "utf-8" });
-      await insertDefineOgImage(name, pageFile);
-      await updateTemplates({ filter: (t) => t.filename.includes("nuxt-og-image/components.mjs") });
-      const nitro = await useNitro;
-      await nitro.hooks.callHook("rollup:reload");
-      return outputPath;
-    },
-    async addOgImageToPage(componentName, pageFile) {
-      if (!RE_WORD_CHARS_ONLY.test(componentName))
-        throw new Error(`Invalid component name: ${componentName}`);
-      return insertDefineOgImage(componentName, pageFile);
-    }
-  }, nuxt).then((rpc) => {
-    const safeBroadcast = (fn) => {
-      try {
-        const result = fn();
-        if (result && typeof result.then === "function") {
-          result.catch((err) => {
-            void err;
-          });
-        }
-      } catch {
-      }
-    };
-    let cssRefreshTimer;
-    nuxt.hook("builder:watch", (e, watchPath) => {
-      if (!e || !watchPath)
-        return;
-      const normalizedPath = relative(nuxt.options.srcDir, isAbsolute(watchPath) ? watchPath : resolve(nuxt.options.srcDir, watchPath));
-      const absolutePath = isAbsolute(watchPath) ? watchPath : join(nuxt.options.rootDir, watchPath);
-      const isCssChange = absolutePath.endsWith(".css") && nuxt.options.css.some((entry) => {
-        const src = typeof entry === "string" ? entry : entry?.src;
-        return src && absolutePath.endsWith(src.replace(RE_TILDE_SLASH, ""));
-      });
-      if (isCssChange || normalizedPath.includes("uno.config")) {
-        clearTimeout(cssRefreshTimer);
-        cssRefreshTimer = setTimeout(() => {
-          safeBroadcast(() => rpc.broadcast.refresh.asEvent());
-        }, 200);
-        return;
-      }
-      if ((e === "change" || e.includes("link")) && (normalizedPath.startsWith("pages") || normalizedPath.startsWith("content"))) {
-        safeBroadcast(() => rpc.broadcast.refreshRouteData.asEvent(normalizedPath));
-      }
-      if (options.componentDirs.some((dir) => normalizedPath.includes(dir))) {
-        if (e === "change")
-          safeBroadcast(() => rpc.broadcast.refresh.asEvent());
-        else
-          safeBroadcast(() => rpc.broadcast.refreshGlobalData.asEvent());
-      }
-    });
-  });
-}
-
-const _warnedVars = /* @__PURE__ */ new Set();
-const RE_CSS_DECL = /([\w-]+)\s*:\s*([^\s;][^;]*)(?:;|$)/g;
-const RE_CSS_TOGGLE = /(--[\w-]+)\s*:\s+;/g;
-const RE_CSS_CLASS_RULE = /\.((?:\\[0-9a-f]{1,6}\s?|\\[^0-9a-f]|[^\\\s{])+)\s*\{([^}]+)\}/gi;
-const RE_ROOT_HOST_BLOCK = /:(?:root|host)[^\s{]*\s*\{([^}]+)\}/g;
-const RE_UNIVERSAL_BLOCK = /\*[^{]*\{([^}]+)\}/g;
-const RE_PROPERTY_AT_RULE = /@property\s+(--[\w-]+)\s*\{([^}]+)\}/g;
-const RE_INITIAL_VALUE = /initial-value\s*:\s*([^\s;][^;]*);?/;
-const RE_CSS_ESCAPE_HEX = /\\([0-9a-f]{1,6})\s?/gi;
-const RE_CSS_ESCAPE_CHAR = /\\(.)/g;
-const RE_CSS_ESCAPE_HEX_STRIP = /\\[0-9a-f]{1,6}\s?/gi;
-const RE_CSS_ESCAPE_DOT = /\\./g;
-const RE_COMBINATOR_OR_SPACE = /[\s>+~]/;
-const RE_PSEUDO_CLASS = /:[a-z]/i;
-const RE_CAMEL_CASE = /-([a-z])/g;
-const RE_ONLY_DIGITS = /^\d+$/;
-const RE_IMPORTANT = /\s*!important\s*$/;
-const RE_QUOTES = /^['"]|['"]$/g;
-const RE_WIDTH_VALUE = /width:([^;}]+)/;
-const RE_CALC_VAR_MULTIPLY = /calc\(var\((--[\w-]+)\)\s*\*\s*([\d.]+)\)/;
-const RE_NUMERIC_WITH_UNIT = /([\d.]+)(rem|px|em|%)/;
-const RE_CSS_KEYWORD = /^(?:initial|inherit|unset|revert|revert-layer)$/;
-const RE_UNRESOLVED_VAR = /var\((--[\w-]+)/g;
-const RE_INVALID_CALC = /calc\(\s*[*/]/;
-const RE_COLOR_PROP = /color|fill|stroke|outline|border|background|caret|accent/;
-let transform;
-let Features;
-const LEGACY_TARGETS = {
-  chrome: 60 << 16,
-  safari: 10 << 16
-};
-async function loadLightningCss() {
-  if (!transform) {
-    const lcss = await import('lightningcss');
-    transform = lcss.transform;
-    Features = lcss.Features;
-  }
-  return { transform, Features };
-}
-async function transformWithLightningCss(css, options = {}) {
-  const { transform: transform2 } = await loadLightningCss();
-  const {
-    minify = true,
-    filename = "input.css",
-    targets = LEGACY_TARGETS,
-    include
-  } = options;
-  const transformOptions = {
-    filename,
-    code: Buffer.from(css),
-    minify,
-    targets,
-    drafts: { customMedia: true }
-  };
-  if (include !== void 0)
-    transformOptions.include = include;
-  return transform2(transformOptions);
-}
-function extractDeclarations(body, onDeclaration) {
-  const seen = /* @__PURE__ */ new Set();
-  for (const match of body.matchAll(RE_CSS_DECL)) {
-    if (match[1] && match[2] && !seen.has(match[1])) {
-      seen.add(match[1]);
-      onDeclaration(match[1], match[2].trim());
-    }
-  }
-  for (const match of body.matchAll(RE_CSS_TOGGLE)) {
-    if (match[1] && !seen.has(match[1])) {
-      seen.add(match[1]);
-      onDeclaration(match[1], " ");
-    }
-  }
-}
-function walkBlockRules(css, selectorRe, onBlock) {
-  for (const match of css.matchAll(selectorRe)) {
-    if (match[1])
-      onBlock(match[1]);
-  }
-}
-function walkClassRules(css, onRule) {
-  for (const match of css.matchAll(RE_CSS_CLASS_RULE)) {
-    const rawSelector = match[1];
-    if (isSimpleClassSelector(rawSelector))
-      onRule(decodeCssClassName(rawSelector), match[2]);
-  }
-}
-async function simplifyCss(css) {
-  const result = await transformWithLightningCss(css, { minify: true });
-  return result.code.toString();
-}
-function extractCssVars(css) {
-  const vars = /* @__PURE__ */ new Map();
-  walkBlockRules(css, RE_ROOT_HOST_BLOCK, (body) => {
-    extractDeclarations(body, (prop, value) => {
-      if (prop.startsWith("--"))
-        vars.set(prop, value);
-    });
-  });
-  return vars;
-}
-function extractUniversalVars(css) {
-  const vars = /* @__PURE__ */ new Map();
-  walkBlockRules(css, RE_UNIVERSAL_BLOCK, (body) => {
-    extractDeclarations(body, (prop, value) => {
-      if (prop.startsWith("--"))
-        vars.set(prop, value);
-    });
-  });
-  return vars;
-}
-function extractPropertyInitialValues(css) {
-  const vars = /* @__PURE__ */ new Map();
-  for (const match of css.matchAll(RE_PROPERTY_AT_RULE)) {
-    const initialMatch = match[2].match(RE_INITIAL_VALUE);
-    if (initialMatch?.[1])
-      vars.set(match[1], initialMatch[1].trim());
-  }
-  return vars;
-}
-function extractPerClassVars(css) {
-  const result = /* @__PURE__ */ new Map();
-  walkClassRules(css, (className, body) => {
-    const classVars = /* @__PURE__ */ new Map();
-    extractDeclarations(body, (prop, value) => {
-      if (prop.startsWith("--"))
-        classVars.set(prop, value);
-    });
-    if (classVars.size > 0)
-      result.set(className, classVars);
-  });
-  return result;
-}
-function serializeTokens(tokens) {
-  const parts = [];
-  for (const tov of tokens) {
-    switch (tov.type) {
-      case "token":
-        parts.push(serializeToken(tov.value));
-        break;
-      case "color":
-        parts.push(serializeColor(tov.value));
-        break;
-      case "unresolved-color":
-        parts.push(serializeUnresolvedColor(tov.value));
-        break;
-      case "var":
-        parts.push(`var(${tov.value.name.ident}${tov.value.fallback ? `, ${serializeTokens(tov.value.fallback)}` : ""})`);
-        break;
-      case "env":
-        parts.push(`env(${serializeEnvName(tov.value.name)}${tov.value.fallback ? `, ${serializeTokens(tov.value.fallback)}` : ""})`);
-        break;
-      case "function":
-        parts.push(`${tov.value.name}(${serializeTokens(tov.value.arguments)})`);
-        break;
-      case "length":
-        parts.push(`${tov.value.value}${tov.value.unit}`);
-        break;
-      case "angle":
-        parts.push(`${tov.value.value}${tov.value.type}`);
-        break;
-      case "time":
-        parts.push(`${tov.value.value}${tov.value.type === "seconds" ? "s" : "ms"}`);
-        break;
-      case "resolution":
-        parts.push(`${tov.value.value}${tov.value.type}`);
-        break;
-      case "percentage":
-        parts.push(`${tov.value * 100}%`);
-        break;
-      case "dashed-ident":
-        parts.push(tov.value);
-        break;
-      case "url":
-        parts.push(`url(${tov.value.url})`);
-        break;
-      case "animation-name":
-        parts.push(typeof tov.value === "string" ? tov.value : tov.value.value || "");
-        break;
-    }
-  }
-  return parts.join("");
-}
-function serializeToken(token) {
-  switch (token.type) {
-    case "ident":
-      return token.value;
-    case "number":
-      return String(token.value);
-    case "percentage":
-      return `${token.value * 100}%`;
-    case "dimension":
-      return `${token.value}${token.unit}`;
-    case "string":
-      return `"${token.value}"`;
-    case "hash":
-    case "id-hash":
-      return `#${token.value}`;
-    case "white-space":
-      return " ";
-    case "delim":
-      return token.value;
-    case "comma":
-      return ", ";
-    case "colon":
-      return ":";
-    case "semicolon":
-      return ";";
-    case "unquoted-url":
-      return token.value;
-    case "at-keyword":
-      return `@${token.value}`;
-    default:
-      return "";
-  }
-}
-function serializeColor(color) {
-  if (typeof color === "string")
-    return color;
-  const a = color.alpha !== void 0 && color.alpha !== 1 ? ` / ${color.alpha}` : "";
-  switch (color.type) {
-    case "currentcolor":
-      return "currentColor";
-    case "rgb":
-      return color.alpha !== 1 ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.alpha})` : `rgb(${color.r}, ${color.g}, ${color.b})`;
-    case "hsl":
-      return `hsl(${color.h} ${color.s}% ${color.l}%${a})`;
-    case "hwb":
-      return `hwb(${color.h} ${color.w}% ${color.b}%${a})`;
-    case "lab":
-      return `lab(${color.l} ${color.a} ${color.b}${a})`;
-    case "lch":
-      return `lch(${color.l} ${color.c} ${color.h}${a})`;
-    case "oklab":
-      return `oklab(${color.l} ${color.a} ${color.b}${a})`;
-    case "oklch":
-      return `oklch(${color.l} ${color.c} ${color.h}${a})`;
-    case "light-dark":
-      return `light-dark(${serializeColor(color.light)}, ${serializeColor(color.dark)})`;
-    default:
-      if ("x" in color)
-        return `color(${color.type} ${color.x} ${color.y} ${color.z}${a})`;
-      if ("r" in color)
-        return `color(${color.type} ${color.r} ${color.g} ${color.b}${a})`;
-      return "";
-  }
-}
-function serializeUnresolvedColor(color) {
-  const alpha = serializeTokens(color.alpha);
-  switch (color.type) {
-    case "rgb":
-      return `rgb(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
-    case "hsl":
-      return `hsl(${color.h} ${color.s}% ${color.l}% / ${alpha})`;
-    case "light-dark":
-      return `light-dark(${serializeTokens(color.light)}, ${serializeTokens(color.dark)})`;
-    default:
-      return "";
-  }
-}
-function serializeEnvName(name) {
-  if (name.type === "ua")
-    return name.value;
-  return name.ident || "";
-}
-function resolveExtractedVars(extracted, rootAttrs) {
-  const vars = new Map(extracted.rootVars);
-  const sorted = extracted.qualifiedRules.toSorted((a, b) => a.reqs.length - b.reqs.length);
-  for (const rule of sorted) {
-    const matches = rule.reqs.every((req) => {
-      const actual = rootAttrs[req.name];
-      return req.negated ? actual !== req.value : actual === req.value;
-    });
-    if (matches) {
-      for (const [name, value] of rule.vars)
-        vars.set(name, value);
-    }
-  }
-  return vars;
-}
-function selectorsContain(selectors, predicate) {
-  for (const selector of selectors) {
-    for (const component of selector) {
-      if (predicate(component))
-        return true;
-    }
-  }
-  return false;
-}
-function isRootOrHost(selectors) {
-  return selectorsContain(selectors, (c) => c.type === "pseudo-class" && (c.kind === "root" || c.kind === "host"));
-}
-function isBareThemeClass(selectors) {
-  return selectorsContain(selectors, (c) => c.type === "class" && (c.name === "dark" || c.name === "light"));
-}
-function isUniversal(selectors) {
-  return selectorsContain(selectors, (c) => c.type === "universal");
-}
-function extractSingleSelectorReqs(components) {
-  const reqs = [];
-  for (const component of components) {
-    if (component.type === "class") {
-      if (component.name === "dark" || component.name === "light")
-        reqs.push({ name: "data-theme", value: component.name, negated: false });
-    }
-    if (component.type === "attribute" && component.operation) {
-      const name = component.name;
-      const value = component.operation.value;
-      if (name && value)
-        reqs.push({ name, value, negated: false });
-    }
-    if (component.type === "pseudo-class" && component.kind === "not") {
-      for (const innerSelector of component.selectors || []) {
-        const innerReqs = extractSingleSelectorReqs(innerSelector);
-        for (const req of innerReqs)
-          reqs.push({ ...req, negated: !req.negated });
-      }
-    }
-  }
-  return reqs;
+  }
+  return reqs;
 }
 function extractSelectorAttrReqsList(selectors) {
   return selectors.map((selector) => extractSingleSelectorReqs(selector));
@@ -1616,140 +1220,548 @@ const RE_FONTAINE_FALLBACK = / fallback$/i;
 function isFontaineFallback(name) {
   return RE_FONTAINE_FALLBACK.test(name);
 }
-function extractCustomFontFamilies(cssValue) {
-  return cssValue.replace(RE_IMPORTANT, "").split(",").map((p) => p.trim().replace(RE_QUOTES, "")).filter((name) => name && !GENERIC_FONT_FAMILIES.has(name.toLowerCase()) && !RE_ONLY_DIGITS.test(name) && !isSystemFont(name) && !isFontaineFallback(name));
+function extractCustomFontFamilies(cssValue) {
+  return cssValue.replace(RE_IMPORTANT, "").split(",").map((p) => p.trim().replace(RE_QUOTES, "")).filter((name) => name && !GENERIC_FONT_FAMILIES.has(name.toLowerCase()) && !RE_ONLY_DIGITS.test(name) && !isSystemFont(name) && !isFontaineFallback(name));
+}
+async function evaluateCalc(value) {
+  if (!value.includes("calc("))
+    return value;
+  const result = await simplifyCss(`.x{width:${value}}`);
+  return result.match(RE_WIDTH_VALUE)?.[1]?.trim() ?? value;
+}
+async function resolveVarsDeep(value, vars, depth = 0) {
+  if (depth > 10 || !value.includes("var("))
+    return evaluateCalc(value);
+  const calcMatch = value.match(RE_CALC_VAR_MULTIPLY);
+  if (calcMatch?.[1] && calcMatch?.[2]) {
+    const varValue = vars.get(calcMatch[1]);
+    if (varValue) {
+      const numMatch = varValue.match(RE_NUMERIC_WITH_UNIT);
+      if (numMatch?.[1] && numMatch?.[2]) {
+        const computed = Number.parseFloat(numMatch[1]) * Number.parseFloat(calcMatch[2]);
+        return `${computed}${numMatch[2]}`;
+      }
+    }
+  }
+  const result = resolveCssVars(value, vars);
+  return result.includes("var(") && depth < 10 ? resolveVarsDeep(result, vars, depth + 1) : evaluateCalc(result);
+}
+async function downlevelColor(prop, value) {
+  if (!value || value.includes("var("))
+    return value;
+  try {
+    const result = await transformWithLightningCss(`.x{${prop}:${value}}`, { minify: true });
+    const output = result.code.toString();
+    const match = output.match(new RegExp(`[{;]${prop}:(.*?)[;}]`));
+    return match?.[1]?.trim() ?? value;
+  } catch {
+    return value;
+  }
+}
+function convertLogicalProperties(styles) {
+  const mapping = [
+    ["inset-inline", ["left", "right"]],
+    ["inset-block", ["top", "bottom"]],
+    ["padding-inline", ["padding-left", "padding-right"]],
+    ["padding-block", ["padding-top", "padding-bottom"]],
+    ["margin-inline", ["margin-left", "margin-right"]],
+    ["margin-block", ["margin-top", "margin-bottom"]]
+  ];
+  for (const [logical, physicals] of mapping) {
+    if (styles[logical]) {
+      const v = styles[logical];
+      for (const phys of physicals) styles[phys] ??= v;
+      delete styles[logical];
+    }
+  }
+}
+function stripGradientColorSpace(value) {
+  return value.replace(GRADIENT_COLOR_SPACE_RE, "");
+}
+async function postProcessStyles(rawStyles, vars, resolveVar, context) {
+  const styles = {};
+  const resolve = resolveVarsDeep;
+  for (const [prop, rawValue] of Object.entries(rawStyles)) {
+    let value = await resolve(rawValue, vars);
+    if (value.includes("var(") || RE_CSS_KEYWORD.test(value)) {
+      if (value.includes("var(")) {
+        const unresolvedVars = Array.from(value.matchAll(RE_UNRESOLVED_VAR), (m) => m[1]);
+        for (const name of unresolvedVars) {
+          const key = `${context || ""}:${name}`;
+          if (!_warnedVars.has(key)) {
+            _warnedVars.add(key);
+            logger.warn(`[og-image]${context ? ` ${context}:` : ""} CSS variable ${name} not found, style will be skipped`);
+          }
+        }
+      }
+      continue;
+    }
+    if (RE_INVALID_CALC.test(value))
+      continue;
+    if (value.includes(",")) {
+      const cleaned = value.split(",").map((s) => s.trim()).filter(Boolean).join(", ");
+      if (!cleaned)
+        continue;
+      value = cleaned;
+    }
+    if (prop === "font-family") {
+      const custom = extractCustomFontFamilies(value);
+      if (custom.length) {
+        const name = custom[0];
+        value = name.includes(" ") ? `'${name}'` : name;
+      }
+    }
+    if (RE_COLOR_PROP.test(prop)) {
+      value = await downlevelColor(prop, value);
+      if (value.includes("color-mix("))
+        value = resolveColorMix(value);
+    }
+    if (prop === "background-image" && value.includes("-gradient("))
+      value = stripGradientColorSpace(value);
+    styles[prop] = value;
+  }
+  convertLogicalProperties(styles);
+  return Object.keys(styles).length ? styles : null;
+}
+function walkTemplateAst(nodes, visitor) {
+  for (const node of nodes) {
+    visitor(node);
+    if ("children" in node && Array.isArray(node.children))
+      walkTemplateAst(node.children, visitor);
+  }
+}
+
+const TAKUMI_CORE_PACKAGE = "@takumi-rs/core";
+const TAKUMI_WASM_PACKAGE = "@takumi-rs/wasm";
+const PROVIDER_DEPENDENCIES = [
+  {
+    name: "satori",
+    description: "SVG-based renderer using Satori",
+    bindings: {
+      "node": [
+        { name: "satori", description: "HTML to SVG renderer" },
+        { name: "@resvg/resvg-js", description: "SVG to PNG converter (native)" }
+      ],
+      "wasm": [
+        { name: "satori", description: "HTML to SVG renderer" },
+        { name: "@resvg/resvg-wasm", description: "SVG to PNG converter (WASM)" }
+      ],
+      "wasm-fs": [
+        { name: "satori", description: "HTML to SVG renderer" },
+        { name: "@resvg/resvg-wasm", description: "SVG to PNG converter (WASM)" }
+      ]
+    }
+  },
+  {
+    name: "takumi",
+    description: "Rust-based high-performance renderer (recommended)",
+    bindings: {
+      "node": [
+        { name: TAKUMI_CORE_PACKAGE, description: "Native Takumi renderer" }
+      ],
+      "wasm": [
+        { name: TAKUMI_WASM_PACKAGE, description: "WASM Takumi renderer" }
+      ],
+      "wasm-fs": [
+        { name: TAKUMI_WASM_PACKAGE, description: "WASM Takumi renderer" }
+      ]
+    }
+  },
+  {
+    name: "browser",
+    description: "Browser-based screenshot renderer",
+    bindings: {
+      node: [
+        { name: "playwright-core", description: "Headless browser automation" }
+      ]
+    }
+  }
+];
+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) {
+    if (provider.bindings.node) {
+      const allNodeInstalled = await Promise.all(
+        provider.bindings.node.map((dep) => hasResolvableDependency(dep.name))
+      );
+      if (allNodeInstalled.every(Boolean)) {
+        installed.push({ provider: provider.name, binding: "node" });
+        continue;
+      }
+    }
+    if (provider.bindings.wasm) {
+      const allWasmInstalled = await Promise.all(
+        provider.bindings.wasm.map((dep) => hasResolvableDependency(dep.name))
+      );
+      if (allWasmInstalled.every(Boolean)) {
+        installed.push({ provider: provider.name, binding: "wasm" });
+      }
+    }
+  }
+  return installed;
+}
+async function getMissingDependencies(provider, binding = "node") {
+  const missing = await getMissingProviderDependencyDefinitions(provider, binding);
+  return missing.map((d) => d.name);
+}
+async function getMissingProviderDependencyDefinitions(provider, binding = "node") {
+  const providerDef = PROVIDER_DEPENDENCIES.find((p) => p.name === provider);
+  if (!providerDef)
+    return [];
+  const deps = providerDef.bindings[binding] || providerDef.bindings.node || [];
+  const missing = [];
+  for (const dep of deps) {
+    if (!await hasResolvableDependency(dep.name))
+      missing.push(dep);
+  }
+  return missing;
+}
+function getDependencyDefinitions(provider, binding = "node") {
+  const providerDef = PROVIDER_DEPENDENCIES.find((p) => p.name === provider);
+  if (!providerDef)
+    return [];
+  return providerDef.bindings[binding] || providerDef.bindings.node || [];
+}
+function getDependencyInstallSpec(dep) {
+  return dep.installSpec || dep.name;
+}
+async function getMissingDependencyInstallSpecs(provider, binding = "node") {
+  const missing = await getMissingProviderDependencyDefinitions(provider, binding);
+  return missing.map(getDependencyInstallSpec);
+}
+function getProviderDependencyInstallSpecs(provider, binding = "node") {
+  return getDependencyDefinitions(provider, binding).map(getDependencyInstallSpec);
 }
-async function evaluateCalc(value) {
-  if (!value.includes("calc("))
-    return value;
-  const result = await simplifyCss(`.x{width:${value}}`);
-  return result.match(RE_WIDTH_VALUE)?.[1]?.trim() ?? value;
+function getRecommendedBindingFromPreset(provider) {
+  const preset = resolveOgImagePreset();
+  const compatibility = getPresetNitroPresetCompatibility(preset);
+  return getRecommendedBinding(provider, compatibility);
 }
-async function resolveVarsDeep(value, vars, depth = 0) {
-  if (depth > 10 || !value.includes("var("))
-    return evaluateCalc(value);
-  const calcMatch = value.match(RE_CALC_VAR_MULTIPLY);
-  if (calcMatch?.[1] && calcMatch?.[2]) {
-    const varValue = vars.get(calcMatch[1]);
-    if (varValue) {
-      const numMatch = varValue.match(RE_NUMERIC_WITH_UNIT);
-      if (numMatch?.[1] && numMatch?.[2]) {
-        const computed = Number.parseFloat(numMatch[1]) * Number.parseFloat(calcMatch[2]);
-        return `${computed}${numMatch[2]}`;
-      }
-    }
+function getRecommendedBinding(provider, compatibility) {
+  if (provider === "satori") {
+    const resvgBinding = compatibility.resvg;
+    if (resvgBinding === "wasm-fs")
+      return "wasm-fs";
+    if (resvgBinding === "wasm")
+      return "wasm";
+    return "node";
   }
-  const result = resolveCssVars(value, vars);
-  return result.includes("var(") && depth < 10 ? resolveVarsDeep(result, vars, depth + 1) : evaluateCalc(result);
+  if (provider === "takumi") {
+    const takumiBinding = compatibility.takumi;
+    if (takumiBinding === "wasm")
+      return "wasm";
+    return "node";
+  }
+  if (provider === "browser") {
+    return "node";
+  }
+  return "node";
 }
-async function downlevelColor(prop, value) {
-  if (!value || value.includes("var("))
-    return value;
-  try {
-    const result = await transformWithLightningCss(`.x{${prop}:${value}}`, { minify: true });
-    const output = result.code.toString();
-    const match = output.match(new RegExp(`[{;]${prop}:(.*?)[;}]`));
-    return match?.[1]?.trim() ?? value;
-  } catch {
-    return value;
+async function ensureProviderDependencies(provider, binding, nuxt) {
+  const missingDeps = await getMissingProviderDependencyDefinitions(provider, binding);
+  if (missingDeps.length === 0)
+    return { success: true, installed: [] };
+  const missingInstallSpecs = missingDeps.map(getDependencyInstallSpec);
+  const pm = await detectPackageManager(nuxt.options.rootDir);
+  const pmName = pm?.name || "npm";
+  logger.info(`Installing ${provider} dependencies: ${missingInstallSpecs.join(", ")}`);
+  const installed = [];
+  for (const dep of missingDeps) {
+    const installSpec = getDependencyInstallSpec(dep);
+    const success = await addDependency(installSpec, {
+      cwd: nuxt.options.rootDir,
+      dev: false
+    }).then(() => {
+      installed.push(installSpec);
+      return true;
+    }).catch(() => {
+      logger.error(`Failed to install ${installSpec}. Run manually: ${pmName} add ${installSpec}`);
+      return false;
+    });
+    if (!success)
+      return { success: false, installed };
   }
+  return { success: true, installed };
 }
-function convertIndividualTransforms(styles) {
-  const parts = [];
-  if (styles.translate) {
-    const vals = styles.translate.trim().split(RE_WHITESPACE);
-    parts.push(vals.length === 2 ? `translate(${vals[0]}, ${vals[1]})` : `translateX(${vals[0]})`);
-    delete styles.translate;
+function canPromptInteractively(env = {
+  hasTTY,
+  hasStdinTTY: Boolean(process.stdin?.isTTY),
+  isAgent,
+  isCI
+}) {
+  return env.hasTTY && env.hasStdinTTY && !env.isAgent && !env.isCI;
+}
+async function validateProviderSetup(renderer, compatibility) {
+  const issues = [];
+  const binding = getRecommendedBinding(renderer, compatibility);
+  const missing = await getMissingDependencyInstallSpecs(renderer, binding);
+  if (missing.length > 0) {
+    issues.push(`Missing ${renderer} dependencies: ${missing.join(", ")}`);
+  }
+  if (renderer === "satori") {
+    const hasResvgNode = await hasResolvableDependency("@resvg/resvg-js");
+    const hasResvgWasm = await hasResolvableDependency("@resvg/resvg-wasm");
+    if (!hasResvgNode && !hasResvgWasm) {
+      issues.push("Satori requires either @resvg/resvg-js (node) or @resvg/resvg-wasm to render PNGs");
+    }
   }
-  if (styles.rotate) {
-    parts.push(`rotate(${styles.rotate})`);
-    delete styles.rotate;
+  if (renderer === "browser") {
+    const hasPlaywright = await hasResolvableDependency("playwright-core");
+    if (!hasPlaywright && binding === "node") {
+      issues.push("Browser renderer requires playwright-core");
+    }
   }
-  if (styles.scale) {
-    const vals = styles.scale.trim().split(RE_WHITESPACE).filter(Boolean);
-    parts.push(`scale(${vals.join(", ")})`);
-    delete styles.scale;
+  return { valid: issues.length === 0, issues };
+}
+
+async function setupDevHandler(options, resolve, getDetectedRenderers, nuxt = useNuxt()) {
+  const applyCompatibility = async (nitroConfig) => {
+    const detectedRenderers = new Set(getDetectedRenderers());
+    const targetCompatibility = getPresetNitroPresetCompatibility(resolveOgImagePreset(nitroConfig));
+    for (const renderer of ["satori", "takumi", "browser"]) {
+      if (!detectedRenderers.has(renderer)) {
+        const binding = getRecommendedBinding(renderer, targetCompatibility);
+        const missing = await getMissingDependencies(renderer, binding);
+        if (missing.length === 0)
+          detectedRenderers.add(renderer);
+      }
+    }
+    await applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.dev, resolve, detectedRenderers });
+  };
+  await applyCompatibility(nuxt.options.nitro);
+  nuxt.hooks.hook("nitro:init", (nitro) => applyCompatibility(nitro.options));
+}
+
+const RE_TILDE_SLASH = /^~\//;
+const RE_WORD_CHARS_ONLY = /^\w+$/;
+const RE_SCRIPT_SETUP = /<script\s+setup[^>]*>\n?/;
+const SCRIPT_BLOCK = `<script setup lang="ts">
+const { title = 'My Page', description = '' } = defineProps<{
+  title?: string
+  description?: string
+}>()
+<\/script>`;
+function getStarterTemplate(renderer, css) {
+  if (renderer === "satori") {
+    return `${SCRIPT_BLOCK}
+
+<template>
+  <div :style="{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%', padding: '60px', backgroundColor: 'white', color: '#171717' }">
+    <h1 :style="{ fontSize: '72px', fontWeight: 'bold', margin: 0, lineHeight: 1.1, textAlign: 'center' }">
+      {{ title }}
+    </h1>
+    <p v-if="description" :style="{ fontSize: '32px', opacity: 0.6, marginTop: '16px', textAlign: 'center', maxWidth: '900px' }">
+      {{ description }}
+    </p>
+  </div>
+</template>
+`;
   }
-  if (parts.length > 0) {
-    styles.transform = styles.transform ? `${parts.join(" ")} ${styles.transform}` : parts.join(" ");
+  if (css === "tailwind" || css === "unocss") {
+    return `${SCRIPT_BLOCK}
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center items-center p-[60px] bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white">
+    <h1 class="text-[72px] font-bold m-0 leading-tight text-center" style="text-wrap: balance;">
+      {{ title }}
+    </h1>
+    <p v-if="description" class="text-[32px] opacity-60 mt-4 text-center max-w-[900px]">
+      {{ description }}
+    </p>
+  </div>
+</template>
+`;
   }
+  return `${SCRIPT_BLOCK}
+
+<template>
+  <div class="container">
+    <h1>{{ title }}</h1>
+    <p v-if="description">
+      {{ description }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 60px;
+  background: white;
+  color: #171717;
 }
-function convertLogicalProperties(styles) {
-  const mapping = [
-    ["inset", ["top", "right", "bottom", "left"]],
-    ["inset-inline", ["left", "right"]],
-    ["inset-block", ["top", "bottom"]],
-    ["padding-inline", ["padding-left", "padding-right"]],
-    ["padding-block", ["padding-top", "padding-bottom"]],
-    ["margin-inline", ["margin-left", "margin-right"]],
-    ["margin-block", ["margin-top", "margin-bottom"]]
-  ];
-  for (const [logical, physicals] of mapping) {
-    if (styles[logical]) {
-      const v = styles[logical];
-      for (const phys of physicals) styles[phys] ??= v;
-      delete styles[logical];
+h1 {
+  font-size: 72px;
+  font-weight: bold;
+  margin: 0;
+  line-height: 1.1;
+  text-align: center;
+  text-wrap: balance;
+}
+p {
+  font-size: 32px;
+  opacity: 0.6;
+  margin-top: 16px;
+  text-align: center;
+  max-width: 900px;
+}
+</style>
+`;
+}
+function setupDevToolsUI(options, resolve$1, nuxt = useNuxt(), cssFramework = "none") {
+  setupDevToolsUI$1({
+    route: "/__nuxt-og-image",
+    name: "nuxt-og-image",
+    title: "OG Image",
+    icon: "carbon:image-search"
+  }, resolve$1, nuxt);
+  const communityTemplatesDir = resolve$1("./runtime/app/components/Templates/Community");
+  const useNitro = new Promise((resolve2) => {
+    nuxt.hooks.hook("nitro:init", resolve2);
+  });
+  async function insertDefineOgImage(componentName, pageFile) {
+    const resolved = pageFile ? resolve(pageFile) : "";
+    if (!resolved || !resolved.startsWith(nuxt.options.srcDir) || !existsSync(resolved))
+      return false;
+    const content = await readFile(resolved, "utf-8");
+    if (content.includes("defineOgImage"))
+      return false;
+    const call = `defineOgImage('${componentName}')`;
+    const scriptSetupMatch = content.match(RE_SCRIPT_SETUP);
+    if (scriptSetupMatch) {
+      const insertPos = scriptSetupMatch.index + scriptSetupMatch[0].length;
+      await writeFile(resolved, `${content.slice(0, insertPos)}${call}
+${content.slice(insertPos)}`, "utf-8");
+    } else {
+      await writeFile(resolved, `<script setup lang="ts">
+${call}
+<\/script>
+
+${content}`, "utf-8");
+    }
+    return true;
+  }
+  setupDevToolsRpc("nuxt-og-image", {
+    async ejectCommunityTemplate(path) {
+      const [dirName, componentName] = path.split("/");
+      const nameWithoutExt = componentName?.replace(".vue", "") || "";
+      let dotNotationName;
+      if (nameWithoutExt.includes(".")) {
+        dotNotationName = `${nameWithoutExt}.vue`;
+      } else {
+        const rendererMatch = nameWithoutExt.match(RE_RENDERER_SUFFIX);
+        const renderer = rendererMatch?.[1]?.toLowerCase() || "satori";
+        const baseName = nameWithoutExt.replace(RE_RENDERER_SUFFIX, "");
+        dotNotationName = `${baseName}.${renderer}.vue`;
+      }
+      const dir = join(nuxt.options.srcDir, "components", dirName || "");
+      if (!existsSync(dir)) {
+        mkdirSync(dir, { recursive: true });
+      }
+      const newPath = join(dir, dotNotationName);
+      const templatePath = join(communityTemplatesDir, dotNotationName);
+      const template = (await readFile(templatePath, "utf-8")).replace("{{ title }}", `{{ title }} - Ejected!`);
+      await writeFile(newPath, template, { encoding: "utf-8" });
+      await updateTemplates({ filter: (t) => t.filename.includes("nuxt-og-image/components.mjs") });
+      const nitro = await useNitro;
+      await nitro.hooks.callHook("rollup:reload");
+      return newPath;
+    },
+    async createComponent({ name, renderer, pageFile }) {
+      const validRenderers = ["satori", "browser", "takumi"];
+      if (!validRenderers.includes(renderer))
+        throw new Error(`Invalid renderer: ${renderer}`);
+      if (!RE_WORD_CHARS_ONLY.test(name))
+        throw new Error(`Invalid component name: ${name}`);
+      const baseDir = existsSync(join(nuxt.options.srcDir, "app")) ? join(nuxt.options.srcDir, "app") : nuxt.options.srcDir;
+      const outputDir = join(baseDir, "components", "OgImage");
+      if (!existsSync(outputDir))
+        mkdirSync(outputDir, { recursive: true });
+      const filename = `${name}.${renderer}.vue`;
+      const outputPath = join(outputDir, filename);
+      if (existsSync(outputPath))
+        throw new Error(`File already exists: ${relative(nuxt.options.rootDir, outputPath)}`);
+      const template = getStarterTemplate(renderer, cssFramework);
+      await writeFile(outputPath, template, { encoding: "utf-8" });
+      await insertDefineOgImage(name, pageFile);
+      await updateTemplates({ filter: (t) => t.filename.includes("nuxt-og-image/components.mjs") });
+      const nitro = await useNitro;
+      await nitro.hooks.callHook("rollup:reload");
+      return outputPath;
+    },
+    async addOgImageToPage(componentName, pageFile) {
+      if (!RE_WORD_CHARS_ONLY.test(componentName))
+        throw new Error(`Invalid component name: ${componentName}`);
+      return insertDefineOgImage(componentName, pageFile);
     }
-  }
-}
-function stripGradientColorSpace(value) {
-  return value.replace(GRADIENT_COLOR_SPACE_RE, "");
-}
-async function postProcessStyles(rawStyles, vars, resolveVar, context) {
-  const styles = {};
-  const resolve = resolveVarsDeep;
-  for (const [prop, rawValue] of Object.entries(rawStyles)) {
-    let value = await resolve(rawValue, vars);
-    if (value.includes("var(") || RE_CSS_KEYWORD.test(value)) {
-      if (value.includes("var(")) {
-        const unresolvedVars = Array.from(value.matchAll(RE_UNRESOLVED_VAR), (m) => m[1]);
-        for (const name of unresolvedVars) {
-          const key = `${context || ""}:${name}`;
-          if (!_warnedVars.has(key)) {
-            _warnedVars.add(key);
-            logger.warn(`[og-image]${context ? ` ${context}:` : ""} CSS variable ${name} not found, style will be skipped`);
-          }
+  }, nuxt).then((rpc) => {
+    if (!rpc)
+      return;
+    const safeBroadcast = (fn) => {
+      try {
+        const result = fn();
+        if (result && typeof result.then === "function") {
+          result.catch((err) => {
+            void err;
+          });
         }
+      } catch {
       }
-      continue;
-    }
-    if (RE_INVALID_CALC.test(value))
-      continue;
-    if (value.includes(",")) {
-      const cleaned = value.split(",").map((s) => s.trim()).filter(Boolean).join(", ");
-      if (!cleaned)
-        continue;
-      value = cleaned;
-    }
-    if (prop === "font-family") {
-      const custom = extractCustomFontFamilies(value);
-      if (custom.length) {
-        const name = custom[0];
-        value = name.includes(" ") ? `'${name}'` : name;
+    };
+    let cssRefreshTimer;
+    nuxt.hook("builder:watch", (e, watchPath) => {
+      if (!e || !watchPath)
+        return;
+      const normalizedPath = relative(nuxt.options.srcDir, isAbsolute(watchPath) ? watchPath : resolve(nuxt.options.srcDir, watchPath));
+      const absolutePath = isAbsolute(watchPath) ? watchPath : join(nuxt.options.rootDir, watchPath);
+      const isCssChange = absolutePath.endsWith(".css") && nuxt.options.css.some((entry) => {
+        const src = typeof entry === "string" ? entry : entry?.src;
+        return src && absolutePath.endsWith(src.replace(RE_TILDE_SLASH, ""));
+      });
+      if (isCssChange || normalizedPath.includes("uno.config")) {
+        clearTimeout(cssRefreshTimer);
+        cssRefreshTimer = setTimeout(() => {
+          safeBroadcast(() => rpc.broadcast.refresh.asEvent());
+        }, 200);
+        return;
       }
-    }
-    if (RE_COLOR_PROP.test(prop)) {
-      value = await downlevelColor(prop, value);
-      if (value.includes("color-mix("))
-        value = resolveColorMix(value);
-    }
-    if (prop === "background-image" && value.includes("-gradient("))
-      value = stripGradientColorSpace(value);
-    styles[prop] = value;
-  }
-  convertIndividualTransforms(styles);
-  convertLogicalProperties(styles);
-  return Object.keys(styles).length ? styles : null;
-}
-function walkTemplateAst(nodes, visitor) {
-  for (const node of nodes) {
-    visitor(node);
-    if ("children" in node && Array.isArray(node.children))
-      walkTemplateAst(node.children, visitor);
-  }
+      if ((e === "change" || e.includes("link")) && (normalizedPath.startsWith("pages") || normalizedPath.startsWith("content"))) {
+        safeBroadcast(() => rpc.broadcast.refreshRouteData.asEvent(normalizedPath));
+      }
+      if (options.componentDirs.some((dir) => normalizedPath.includes(dir))) {
+        if (e === "change")
+          safeBroadcast(() => rpc.broadcast.refresh.asEvent());
+        else
+          safeBroadcast(() => rpc.broadcast.refreshGlobalData.asEvent());
+      }
+    });
+  });
 }
 
-const RE_FONT_FACE_WITH_SUBSET = /(?:\/\*\s*([a-z-]+)\s*\*\/\s*)?(@font-face\s*\{[^}]+\})/g;
 async function extractFontFaces(css) {
   const { transform } = await loadLightningCss();
   const fonts = [];
@@ -1852,23 +1864,32 @@ async function extractFontFacesSimple(css) {
     };
   }).filter((f) => f.src);
 }
-async function extractFontFacesWithSubsets(css) {
-  const fontFaceRe = RE_FONT_FACE_WITH_SUBSET;
-  const results = [];
-  for (const match of css.matchAll(fontFaceRe)) {
-    const subset = match[1];
-    const fonts = await extractFontFacesSimple(match[2]);
-    for (const font of fonts)
-      results.push({ ...font, subset });
-  }
-  return results;
+function fontFacesFromResolved(family, faces) {
+  return faces.flatMap((face) => {
+    const source = face.src.find((s) => "url" in s);
+    if (!source)
+      return [];
+    const range = typeof face.weight === "string" ? face.weight.split(/\s+/).map(Number) : Array.isArray(face.weight) ? face.weight : [face.weight ?? 400];
+    const [min = 400, max = min] = range;
+    const weightRange = max !== min ? [min, max] : void 0;
+    return [{
+      family,
+      src: source.url,
+      weight: weightRange ? min <= 400 && max >= 400 ? 400 : min : min,
+      style: face.style || "normal",
+      unicodeRange: face.unicodeRange?.join(","),
+      isWoff2: source.url.endsWith(".woff2"),
+      subset: face.meta?.subset,
+      weightRange
+    }];
+  });
 }
 
 const fontFace = {
   __proto__: null,
   extractFontFaces: extractFontFaces,
   extractFontFacesSimple: extractFontFacesSimple,
-  extractFontFacesWithSubsets: extractFontFacesWithSubsets
+  fontFacesFromResolved: fontFacesFromResolved
 };
 
 const RE_FONT_FACE_BLOCK = /@font-face\s*\{[^}]+\}/g;
@@ -1880,6 +1901,17 @@ const STATIC_FONTS_PREFIX = "/_og-static-fonts";
 function getStaticFontCacheDir(buildDir) {
   return join(buildDir, "cache", "og-image", "static-fonts");
 }
+async function cacheResolvedFontFiles(files, dir) {
+  const paths = {};
+  for (const [url, readFont] of files) {
+    const data = await readFont();
+    await mkdir(dir, { recursive: true });
+    const path = join(dir, createHash("sha256").update(url).update(data).digest("hex"));
+    await writeFile(path, data);
+    paths[url] = path;
+  }
+  return paths;
+}
 function fontKey(f) {
   return `${f.family}-${f.weight}-${f.style}-${f.unicodeRange || "default"}`;
 }
@@ -1922,6 +1954,15 @@ function resolveFontFamilies(familyClasses, familyNames, fontVars, knownFamilies
   }
   return [...families];
 }
+function resolveAppCssPath(cssPath, srcDir, rootDir = srcDir) {
+  if (cssPath.startsWith("~~/") || cssPath.startsWith("@@/"))
+    return join(rootDir, cssPath.slice(3));
+  if (cssPath.startsWith("~/") || cssPath.startsWith("@/"))
+    return join(srcDir, cssPath.slice(2));
+  if (cssPath.startsWith("/"))
+    return cssPath;
+  return join(srcDir, cssPath);
+}
 async function parseAppCssFontFaces(nuxt) {
   const cssEntries = nuxt.options.css || [];
   if (cssEntries.length === 0)
@@ -1933,7 +1974,7 @@ async function parseAppCssFontFaces(nuxt) {
     const cssPath = typeof entry === "string" ? entry : entry.src;
     if (!cssPath)
       continue;
-    const resolved = cssPath.startsWith("~/") ? join(nuxt.options.srcDir, cssPath.slice(2)) : cssPath.startsWith("/") ? cssPath : join(nuxt.options.srcDir, cssPath);
+    const resolved = resolveAppCssPath(cssPath, nuxt.options.srcDir, nuxt.options.rootDir);
     if (!existsSync(resolved))
       continue;
     const content = fs.readFileSync(resolved, "utf-8");
@@ -2061,22 +2102,17 @@ function parseConfiguredLocalFonts(nuxt) {
   );
   return results;
 }
-async function parseFontsFromTemplate(nuxt, options) {
+async function getResolvedNuxtFonts(nuxt, options) {
   const weightsKey = options.requiredWeights?.toSorted((a, b) => a - b).join(",") || "";
   const sourceKey = [...options.fontState.sourceMap.entries()].toSorted(([a], [b]) => a.localeCompare(b)).flat().join(",");
   const fallbackKey = [...options.fontState.fallbackMap.entries()].toSorted(([a], [b]) => a.localeCompare(b)).flat().join(",");
-  const cacheKey = `${sourceKey}:${fallbackKey}:${weightsKey}`;
+  const resolvedFamilies = [...options.fontState.resolvedFaces?.keys() || []].filter((f) => options.fontState.isOgFamily?.(f) ?? true);
+  const cacheKey = `${sourceKey}:${fallbackKey}:${weightsKey}:${getResolvedFontStateKey(options.fontState)}`;
   const cache = nuxt._ogImageParsedFontsCache ||= /* @__PURE__ */ new Map();
   const cached = cache.get(cacheKey);
   if (cached)
     return cached;
-  const templates = nuxt.options.build.templates;
-  const nuxtFontsTemplate = templates.find((t) => t.filename?.endsWith("nuxt-fonts-global.css"));
-  if (!nuxtFontsTemplate?.getContents) {
-    return [];
-  }
-  const contents = await nuxtFontsTemplate.getContents({});
-  const allFonts = await extractFontFacesWithSubsets(contents);
+  const allFonts = resolvedFamilies.flatMap((family) => fontFacesFromResolved(family, options.fontState.resolvedFaces.get(family)));
   const fontMap = /* @__PURE__ */ new Map();
   for (const font of allFonts) {
     const key = fontKey(font);
@@ -2098,10 +2134,10 @@ async function parseFontsFromTemplate(nuxt, options) {
       continue;
     const [, family, weightStr, style] = match;
     const weight = Number(weightStr);
-    const templates2 = expandedFonts.filter((f) => f.family === family && f.style === style);
-    if (templates2.length === 0)
+    const templates = expandedFonts.filter((f) => f.family === family && f.style === style);
+    if (templates.length === 0)
       continue;
-    for (const template of templates2)
+    for (const template of templates)
       expandedFonts.push({ ...template, weight });
     existingKeys.add(key);
   }
@@ -2115,10 +2151,10 @@ async function parseFontsFromTemplate(nuxt, options) {
         const expandKey = `${varFont.family}-${w}-${varFont.style}`;
         if (existingKeys.has(expandKey))
           continue;
-        const templates2 = expandedFonts.filter(
+        const templates = expandedFonts.filter(
           (f) => f.family === varFont.family && f.style === varFont.style
         );
-        for (const template of templates2)
+        for (const template of templates)
           expandedFonts.push({ ...template, weight: w });
         existingKeys.add(expandKey);
       }
@@ -2143,6 +2179,19 @@ async function parseFontsFromTemplate(nuxt, options) {
   cache.set(cacheKey, result);
   return result;
 }
+function getResolvedFontStateKey(fontState) {
+  return JSON.stringify(
+    [...fontState.resolvedFaces || []].filter(([family]) => fontState.isOgFamily?.(family) ?? true).flatMap(([family, faces]) => fontFacesFromResolved(family, faces)).map((font) => [
+      font.family,
+      font.src,
+      font.weight,
+      font.style,
+      font.unicodeRange || "",
+      font.subset || "",
+      font.weightRange?.join(",") || ""
+    ]).toSorted((a, b) => a.join("\0").localeCompare(b.join("\0")))
+  );
+}
 async function downloadFontFile(url, destPath) {
   if (existsSync(destPath))
     return true;
@@ -2198,6 +2247,44 @@ function copyStaticFontsToOutput(options) {
     logger.debug(`Copied ${count} static fonts to output`);
 }
 
+const RE_FONT_FAMILY_DECLARATION = /font-family\s*:\s*([^;}]+)/g;
+function fontFamiliesFromCssEntries(css, srcDir, rootDir = srcDir) {
+  const families = /* @__PURE__ */ new Set();
+  for (const entry of css || []) {
+    const cssPath = typeof entry === "string" ? entry : entry?.src;
+    if (!cssPath)
+      continue;
+    const resolved = resolveAppCssPath(cssPath, srcDir, rootDir);
+    let content;
+    try {
+      content = readFileSync(resolved, "utf-8");
+    } catch {
+      continue;
+    }
+    for (const match of content.matchAll(RE_FONT_FAMILY_DECLARATION)) {
+      for (const family of extractCustomFontFamilies(match[1]))
+        families.add(family);
+    }
+  }
+  return [...families];
+}
+function warnWhenFontsUnreported(options) {
+  const { nuxt, logger, fontState, loadCssMetadata, expectedFamilies } = options;
+  let warned = false;
+  nuxt.hook("nitro:build:before", async () => {
+    if (warned || (fontState.resolvedFaces?.size ?? 0) > 0)
+      return;
+    if (nuxt.options.dev)
+      return;
+    await loadCssMetadata?.();
+    const configuredFamilies = nuxt.options.fonts?.families || [];
+    if (configuredFamilies.length === 0 && expectedFamilies().length === 0)
+      return;
+    warned = true;
+    logger.warn("@nuxt/fonts did not report any fonts, so OG images use the bundled Inter font.");
+  });
+}
+
 const RE_NON_ALPHANUMERIC = /[^a-z0-9]/gi;
 function getFontlessContext(nuxt) {
   return nuxt._ogImageFontless;
@@ -2206,6 +2293,11 @@ function getNuxtFontsFamilyConfig(nuxt, family) {
   const families = nuxt.options.fonts?.families;
   return families?.find((f) => typeof f?.name === "string" && f.name.toLowerCase() === family.toLowerCase());
 }
+function isGlyphSubsetFamily(fonts, family) {
+  const config = fonts?.families?.find((f) => typeof f.name === "string" && f.name.toLowerCase() === family.toLowerCase());
+  const glyphs = config?.glyphs || fonts?.defaults?.glyphs;
+  return !!glyphs?.length;
+}
 function isConfiguredLocalFontFamily(nuxt, family) {
   const config = getNuxtFontsFamilyConfig(nuxt, family);
   return !!config && config.global === true && (config.provider === "local" || typeof config.src === "string");
@@ -2224,6 +2316,14 @@ function getFamilyRequirements(fontRequirements, family) {
     styles: [...new Set(matchingComponents.flatMap((component) => component.styles))]
   };
 }
+function getResolvedWeights(fonts, family) {
+  const faces = fonts.filter((font) => font.family === family);
+  const weights = new Set(faces.flatMap((font) => font.weightRange ? [400, 700].filter((weight) => font.weightRange[0] <= weight && weight <= font.weightRange[1]) : [font.weight]));
+  return {
+    weights: [...weights].toSorted((a, b) => a - b),
+    styles: [...new Set(faces.map((font) => font.style))]
+  };
+}
 async function initFontless(options) {
   if (getFontlessContext(options.nuxt))
     return;
@@ -2289,15 +2389,6 @@ async function initFontless(options) {
   options.logger?.debug(`fontless initialized with formats: ['woff', 'ttf'], subsets: ${JSON.stringify(options.fontSubsets || ["latin"])}, priority: ${JSON.stringify(nuxtFontsConfig?.priority || ["google", "bunny", "fontsource"])}`);
   options.nuxt._ogImageFontless = { resolver, providerNames: priority };
 }
-function persistFontUrlMapping(options) {
-  if (!options.fontContext?.renderedFontURLs.size)
-    return;
-  const cacheDir = join(options.buildDir, "cache", "og-image");
-  fs.mkdirSync(cacheDir, { recursive: true });
-  const mapping = Object.fromEntries(options.fontContext.renderedFontURLs);
-  fs.writeFileSync(join(cacheDir, "font-urls.json"), JSON.stringify(mapping));
-  options.logger.debug(`Persisted ${options.fontContext.renderedFontURLs.size} font URLs for prerender`);
-}
 function resolveWeightsFromFontEntry(fontWeight, requestedWeights) {
   if (typeof fontWeight === "number")
     return requestedWeights.includes(fontWeight) ? [fontWeight] : [];
@@ -2404,20 +2495,20 @@ async function downloadStaticFonts(options) {
       ];
       if (configuredFamily && configuredFamily.global !== true) {
         lines.push(
-          `  "${family}" is declared in fonts.families, but it is not global so @nuxt/fonts did not emit it in nuxt-fonts-global.css.`,
+          `  "${family}" is in fonts.families, but it is not global and no site CSS uses it, so @nuxt/fonts did not resolve it.`,
           `  Set global: true, e.g. fonts: { families: [{ name: '${family}', provider: 'local', weights: [400, 700], global: true }] }.`
         );
       } else if (configuredFamily) {
         lines.push(
-          `  "${family}" is declared with global: true, but @nuxt/fonts still did not emit @font-face for it.`,
+          `  "${family}" has global: true, but @nuxt/fonts did not resolve it.`,
           `  Check that the configured provider/src, weights, styles, and file names match the available font files.`
         );
         if (local)
           lines.push(`  Found ${local.matches.length} matching file(s) under public/fonts/ (e.g. ${local.matches.slice(0, 2).join(", ")}).`);
       } else if (local) {
         lines.push(
-          `  Found ${local.matches.length} matching file(s) under public/fonts/ (e.g. ${local.matches.slice(0, 2).join(", ")}) but @nuxt/fonts did not emit @font-face for "${family}".`,
-          `  Tailwind v4 @theme variables are not scanned by @nuxt/fonts, and OG images only read globally emitted font faces.`,
+          `  Found ${local.matches.length} matching file(s) under public/fonts/ (e.g. ${local.matches.slice(0, 2).join(", ")}), but @nuxt/fonts did not resolve "${family}".`,
+          `  @nuxt/fonts does not scan Tailwind v4 @theme variables. OG images only use fonts that @nuxt/fonts resolves.`,
           `  Declare it explicitly with global: true, e.g. fonts: { families: [{ name: '${family}', provider: 'local', weights: [400, 700], global: true }] }.`
         );
       } else {
@@ -2458,9 +2549,8 @@ async function resolveAndDownloadFamily(options) {
     if (!resolution?.fonts?.length)
       return results;
     for (const font of resolution.fonts) {
-      const srcs = Array.isArray(font.src) ? font.src : [font.src];
-      for (const src of srcs) {
-        if (typeof src !== "object" || !("url" in src))
+      for (const src of font.src) {
+        if (!("url" in src))
           continue;
         const url = src.originalURL || src.url;
         const format = src.format || (url.endsWith(".woff") ? "woff" : url.endsWith(".ttf") ? "truetype" : void 0);
@@ -2509,30 +2599,6 @@ function hasOpenTypeTable(data, expectedTag) {
   }
   return false;
 }
-function getNuxtFontOriginalSource(fontSrc, context) {
-  if (!context)
-    return;
-  const prefix = `${context.assetsBaseURL.replace(/\/$/, "")}/`;
-  if (!fontSrc.startsWith(prefix))
-    return;
-  return context.renderedFontURLs.get(fontSrc.slice(prefix.length));
-}
-async function readNuxtFontAsset(nuxt, source) {
-  if (source.startsWith("/")) {
-    const configuredPublicDir = nuxt.options.dir.public || "public";
-    const publicDir = isAbsolute(configuredPublicDir) ? configuredPublicDir : join(nuxt.options.srcDir, configuredPublicDir);
-    const path = join(publicDir, source.slice(1).split(/[?#]/, 1)[0]);
-    return fs.promises.readFile(path).then((data) => ({ _tag: "Ok", data })).catch((error) => ({
-      _tag: "Err",
-      reason: error.code === "ENOENT" ? `local source not found: ${path}` : error.message
-    }));
-  }
-  if (source.startsWith("file:")) {
-    const path = fileURLToPath(source);
-    return fs.promises.readFile(path).then((data) => ({ _tag: "Ok", data })).catch((error) => ({ _tag: "Err", reason: error.message }));
-  }
-  return fetch(source).then(async (response) => response.ok ? { _tag: "Ok", data: new Uint8Array(await response.arrayBuffer()) } : { _tag: "Err", reason: `source returned HTTP ${response.status}` }).catch((error) => ({ _tag: "Err", reason: error.message }));
-}
 async function convertNuxtWoff2Sources(options) {
   const staticFontDir = getStaticFontCacheDir(options.nuxt.options.buildDir);
   fs.mkdirSync(staticFontDir, { recursive: true });
@@ -2541,23 +2607,16 @@ async function convertNuxtWoff2Sources(options) {
     if (!font.weightRange && !fontsBySource.has(font.src))
       fontsBySource.set(font.src, font);
   }
-  const mappedSources = [];
+  let decoder;
   for (const [fontSrc, font] of fontsBySource) {
-    const originalSource = getNuxtFontOriginalSource(fontSrc, options.context) || (isConfiguredLocalFontFamily(options.nuxt, font.family) ? fontSrc : void 0);
-    if (originalSource)
-      mappedSources.push({ font, fontSrc, originalSource });
-    else
-      options.logger.debug(`Could not map Nuxt Fonts asset to its original source: ${fontSrc}`);
-  }
-  if (mappedSources.length === 0)
-    return;
-  const { woff2Decode } = await import('../chunks/decode.mjs');
-  for (const { fontSrc, font, originalSource } of mappedSources) {
-    const asset = await readNuxtFontAsset(options.nuxt, originalSource);
+    const served = await options.context?.readFont(fontSrc).then((data) => data && { _tag: "Ok", data }).catch((error) => ({ _tag: "Err", reason: error.message }));
+    const asset = served || { _tag: "Err", reason: "not served by Nuxt Fonts" };
     if (asset._tag === "Err") {
       options.logger.debug(`Could not read Nuxt Fonts asset ${fontSrc}: ${asset.reason}`);
       continue;
     }
+    decoder ||= await import('../chunks/decode.mjs');
+    const { woff2Decode } = decoder;
     const decoded = await Promise.resolve().then(() => woff2Decode(asset.data)).catch((error) => {
       options.logger.warn(`Failed to decode Nuxt Fonts asset ${fontSrc}: ${error.message}`);
       return null;
@@ -2578,11 +2637,12 @@ async function convertNuxtWoff2Sources(options) {
 }
 async function prepareWoff2Fonts(options) {
   const { nuxt, logger, fontRequirements, fontState, nuxtFontsContext, fontSubsets, warnOnMissingStaticFonts = true } = options;
-  const parsedFonts = await parseFontsFromTemplate(nuxt, { fontState });
+  const parsedFonts = await getResolvedNuxtFonts(nuxt, { fontState });
   const requirementsByFamily = /* @__PURE__ */ new Map();
   for (const font of parsedFonts) {
-    if (!requirementsByFamily.has(font.family))
-      requirementsByFamily.set(font.family, getFamilyRequirements(fontRequirements, font.family));
+    if (!requirementsByFamily.has(font.family)) {
+      requirementsByFamily.set(font.family, fontRequirements.scanned === false ? getResolvedWeights(parsedFonts, font.family) : getFamilyRequirements(fontRequirements, font.family));
+    }
   }
   const hasNonWoff2 = new Set(
     parsedFonts.filter((f) => !f.src.endsWith(".woff2")).map((f) => fontKey(f))
@@ -2645,7 +2705,7 @@ async function prepareWoff2Fonts(options) {
     nuxt,
     logger,
     fontSubsets,
-    warnOnMissingStaticFonts
+    warnOnMissingStaticFonts: false
   }).catch((error) => {
     logger.debug("fontless resolution failed:", error);
     return [];
@@ -2654,14 +2714,23 @@ async function prepareWoff2Fonts(options) {
     const key = `${font.family}-${font.weight}-${font.style}`;
     fontState.fallbackMap.set(key, `${STATIC_FONTS_PREFIX}/${font.filename}`);
   }
+  if (warnOnMissingStaticFonts) {
+    const usableFamilies = /* @__PURE__ */ new Set([
+      ...parsedFonts.filter((font) => !font.src.endsWith(".woff2") || fontState.sourceMap.has(font.src)).map((font) => font.family),
+      ...downloaded.map((font) => font.family)
+    ]);
+    for (const family of new Set(families.map((f) => f.family))) {
+      if (!usableFamilies.has(family))
+        logger.warn(`Satori cannot use the Nuxt Fonts files for "${family}", and no provider has static files for it. Satori renders "${family}" text with the bundled Inter font. Use the Takumi renderer for WOFF2 and variable fonts.`);
+    }
+  }
   if (fontState.fallbackMap.size > 0)
     logger.debug(`Resolved ${fontState.fallbackMap.size} static font fallbacks via fontless`);
   else if (warnOnMissingStaticFonts && fontState.sourceMap.size === 0)
     logger.warn(`No static fonts available for Satori. Falling back to bundled Inter font. Consider using the Takumi renderer for variable font support.`);
 }
 async function resolveMissingFontFamilies(options) {
-  const { missingFamilies, weights, styles, nuxt, logger, fontSubsets } = options;
-  const families = missingFamilies.map((family) => ({ family, weights, styles }));
+  const { families, nuxt, logger, fontSubsets } = options;
   const downloaded = await downloadStaticFonts({ families, nuxt, logger, fontSubsets });
   const results = downloaded.map((f) => ({
     family: f.family,
@@ -2671,13 +2740,13 @@ async function resolveMissingFontFamilies(options) {
     satoriSrc: `${STATIC_FONTS_PREFIX}/${f.filename}`
   }));
   if (results.length > 0)
-    logger.debug(`Resolved ${results.length} font files via fontless for: ${missingFamilies.join(", ")}`);
+    logger.debug(`Resolved ${results.length} font files via fontless for: ${families.map((f) => f.family).join(", ")}`);
   return results;
 }
 async function resolveOgImageFonts(options) {
   const { nuxt, hasNuxtFonts, hasSatoriRenderer, hasTakumiRenderer, fontState, fontSubsets, fontRequirements, tw4FontVars, logger, ogFontsDir } = options;
   const staticInterFonts = getStaticInterFonts(ogFontsDir);
-  const allFonts = hasNuxtFonts ? await parseFontsFromTemplate(nuxt, { fontState, requiredWeights: fontRequirements.weights }) : [];
+  const allFonts = hasNuxtFonts ? await getResolvedNuxtFonts(nuxt, { fontState, requiredWeights: fontRequirements.weights }) : [];
   if (hasNuxtFonts) {
     const configuredLocalFonts = parseConfiguredLocalFonts(nuxt);
     if (configuredLocalFonts.length > 0) {
@@ -2706,6 +2775,11 @@ async function resolveOgImageFonts(options) {
     logger.debug(`Parsed ${appCssFonts.length} fonts from app CSS @font-face declarations`);
   }
   if ((hasSatoriRenderer || hasTakumiRenderer) && hasNuxtFonts) {
+    const nuxtFontsOptions = nuxt.options.fonts;
+    const glyphSubsetFamilies = [...new Set(allFonts.map((f) => f.family))].filter((family) => isGlyphSubsetFamily(nuxtFontsOptions, family));
+    const glyphSubsetFaces = allFonts.filter((f) => glyphSubsetFamilies.includes(f.family));
+    if (glyphSubsetFaces.length > 0)
+      allFonts.splice(0, allFonts.length, ...allFonts.filter((f) => !glyphSubsetFaces.includes(f)));
     const coveredFamilies = new Set(allFonts.map((f) => f.family));
     let missingFamilies = [];
     const isFontaineFallback = (name) => / fallback$/i.test(name);
@@ -2716,11 +2790,18 @@ async function resolveOgImageFonts(options) {
       if (defaultVar)
         missingFamilies = extractCustomFontFamilies(defaultVar).filter((f) => !coveredFamilies.has(f) && !isFontaineFallback(f));
     }
+    missingFamilies = [.../* @__PURE__ */ new Set([...missingFamilies, ...glyphSubsetFamilies])];
     if (missingFamilies.length > 0) {
+      const familyRequirements = missingFamilies.map((family) => {
+        if (fontRequirements.scanned === false) {
+          const resolved = getResolvedWeights(glyphSubsetFaces, family);
+          if (resolved.weights.length > 0 || resolved.styles.length > 0)
+            return { family, ...resolved };
+        }
+        return { family, weights: fontRequirements.weights, styles: fontRequirements.styles };
+      });
       const additionalFonts = await resolveMissingFontFamilies({
-        missingFamilies,
-        weights: fontRequirements.weights,
-        styles: fontRequirements.styles,
+        families: familyRequirements,
         nuxt,
         logger,
         fontSubsets: effectiveSubsets
@@ -2730,11 +2811,17 @@ async function resolveOgImageFonts(options) {
       });
       allFonts.push(...additionalFonts);
     }
+    const resolvedFamilies = new Set(allFonts.map((f) => f.family));
+    const unresolvedSubsetFaces = glyphSubsetFaces.filter((f) => !resolvedFamilies.has(f.family));
+    if (unresolvedSubsetFaces.length > 0) {
+      logger.warn(`Could not resolve ${[...new Set(unresolvedSubsetFaces.map((f) => f.family))].join(", ")} without \`glyphs\` subsetting. OG images may miss characters outside the configured glyphs.`);
+      allFonts.push(...unresolvedSubsetFaces);
+    }
   }
   const nuxtFontFamilies = new Set(
-    hasNuxtFonts ? (await parseFontsFromTemplate(nuxt, { fontState, requiredWeights: fontRequirements.weights })).map((f) => f.family) : []
+    hasNuxtFonts ? (await getResolvedNuxtFonts(nuxt, { fontState, requiredWeights: fontRequirements.weights })).map((f) => f.family) : []
   );
-  const fonts = !fontRequirements.hasDynamicBindings ? allFonts.filter(
+  const fonts = !(fontRequirements.hasDynamicBindings || fontRequirements.scanned === false) ? allFonts.filter(
     (f) => nuxtFontFamilies.has(f.family) ? fontRequirements.styles.includes(f.style) : matchesFontRequirements(f, fontRequirements)
   ) : allFonts;
   const fontsByFamily = /* @__PURE__ */ new Map();
@@ -2817,10 +2904,10 @@ function getMissingSiteUrlWarning(input) {
     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()) {
+function setupPrerenderHandler(options, resolve, getDetectedRenderers, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     nitro.hooks.hook("prerender:config", async (nitroConfig) => {
-      await applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.prerender, resolve, detectedRenderers: getDetectedRenderers(), metadata: getCompatibilityMeta() });
+      await applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.prerender, resolve, detectedRenderers: getDetectedRenderers() });
       nitroConfig.wasm = nitroConfig.wasm || {};
       nitroConfig.wasm.esmImport = false;
       nitroConfig.prerender = nitroConfig.prerender || {};
@@ -2854,7 +2941,7 @@ function setupPrerenderHandler(options, resolve, getDetectedRenderers, getCompat
     nitro.hooks.hook("prerender:done", async () => {
       if (orphanedOgHashes.length > 0) {
         logger.warn(
-          `Skipped ${orphanedOgHashes.length} orphaned OG image hash URL${orphanedOgHashes.length > 1 ? "s" : ""} during prerender. These URLs were crawled from HTML but their source page was not prerendered, so the hash cache entry was never written. If your pages are prerendered but OG images are generated at runtime, enable \`security.strict\` with a \`security.secret\` to switch to signed dynamic URLs.`
+          `Skipped ${orphanedOgHashes.length} orphaned OG image hash URL${orphanedOgHashes.length > 1 ? "s" : ""} during prerender. These URLs were crawled from HTML but their source page was not prerendered, so the hash cache entry was never written. If your pages are prerendered but OG images are generated at runtime, enable \`security.strict\` with \`NUXT_APP_SECRET\` to switch to signed dynamic URLs.`
         );
         for (const route of orphanedOgHashes)
           logger.info(`  ${route}`);
@@ -2918,13 +3005,38 @@ function extractPropNamesFromVue(code) {
   }
 }
 
-function resolveSigningSecret(configSecret, envSecret, generate) {
-  if (configSecret === false)
-    return { secret: "", hasExplicit: false, optOut: true, generated: false };
-  const explicit = configSecret || "" || (envSecret || "");
-  if (explicit)
-    return { secret: explicit, hasExplicit: true, optOut: false, generated: false };
-  return { secret: generate(), hasExplicit: false, optOut: false, generated: true };
+const DEFAULT_CACHE_MOUNT = "cache/nuxt-og-image";
+async function resolveRuntimeCacheDriver(storage, nitro, rootDir) {
+  if (storage?.driver !== "lru-cache" && storage?.driver !== "lruCache")
+    return;
+  if (nitro.alias?.["lru-cache"] || await tryResolveModule("lru-cache", directoryToURL(rootDir)))
+    return;
+  const library = await tryResolveModule("lru-cache", import.meta.url);
+  if (!library)
+    throw new Error('[nuxt-og-image] Cannot resolve the runtime cache dependency "lru-cache".');
+  nitro.alias ||= {};
+  nitro.alias["lru-cache"] = library;
+}
+function findStorageMount(nitro, prefix) {
+  return Object.entries(nitro.storage || {}).map(([key, storage]) => ({ mount: key.replaceAll(":", "/").replace(/^\/+|\/+$/g, ""), storage })).filter(({ mount }) => prefix === mount || prefix.startsWith(`${mount}/`)).sort((a, b) => b.mount.length - a.mount.length)[0]?.storage;
+}
+function configureRuntimeCacheStorage(config, nitro) {
+  if (typeof config.runtimeCacheStorage === "object")
+    return config.runtimeCacheStorage;
+  if (typeof config.runtimeCacheStorage === "string")
+    return findStorageMount(nitro, `${config.runtimeCacheStorage.replaceAll(":", "/").replace(/^\/+|\/+$/g, "")}/nuxt-og-image`);
+  if (config.runtimeCacheStorage !== true)
+    return;
+  const configuredStorage = findStorageMount(nitro, DEFAULT_CACHE_MOUNT);
+  if (configuredStorage)
+    return configuredStorage;
+  nitro.storage ||= {};
+  nitro.storage[DEFAULT_CACHE_MOUNT] = {
+    driver: "lru-cache",
+    max: 0,
+    maxSize: 64 * 1024 * 1024
+  };
+  return nitro.storage[DEFAULT_CACHE_MOUNT];
 }
 
 const RE_NAMED_CALL = /\b(defineOgImage(?:Component)?)\s*\(\s*(['"`])([\w.-]+)\2/g;
@@ -3522,9 +3634,6 @@ async function transformVueTemplate(code, options) {
     if (collector.dynamicStyleProps) {
       Object.assign(styleProps, collector.dynamicStyleProps);
     }
-    if (styleProps.display === "flex" && !styleProps["flex-direction"]) {
-      styleProps["flex-direction"] = "row";
-    }
     const styleStr = Object.entries(styleProps).map(([prop, value]) => `${prop}: ${escapeAttrValue(value)}`).join("; ");
     const hasResolvedStyles = Object.keys(styleProps).length > 0;
     const hasUnresolved = unresolvedClasses.length > 0;
@@ -3711,16 +3820,12 @@ function getMimeType(ext) {
   return mimeTypes[ext] || "application/octet-stream";
 }
 const UNSUPPORTED_CLASS_PATTERNS = [
-  /^z-/,
-  // z-index not supported by Satori
   /^ring(-|$)/,
   // Ring utilities - not supported
   /^divide(-|$)/,
   // Divide utilities - not supported
   /^space-(x|y)(-|$)/,
   // Space utilities - use gap instead
-  /^backdrop-/,
-  // Backdrop utilities - not supported
   // Note: filter utilities (blur, brightness, etc.) ARE supported by Satori
   // Note: skew transforms ARE supported by Satori
   /^transition(-|$)/,
@@ -4984,10 +5089,15 @@ declare module '#og-image-virtual/component-names.mjs' {
   export const componentNames: OgImageComponent[]
 }
 
+declare module '#og-image-virtual/signing.mjs' {
+  export const rendersImages: boolean
+}
+
 declare module '#og-image-virtual/build-dir.mjs' {
   export const buildDir: string
   export const rootDir: string
   export const staticFontCacheDir: string
+  export const resolvedFontPaths: Record<string, string>
 }
 
 declare module '#og-image/compatibility' {
@@ -5076,10 +5186,7 @@ declare module '#og-image-cache' {
         nitroInterfaces: {
           NitroApp: `_ogImageCacheBackendWarned?: boolean
 _ogImageIconsData?: OgImageIconsData`,
-          NitroRuntimeConfig: `'nuxt-og-image': OgImageRuntimeConfig
-ogImage: {
-  secret: string
-}`
+          NitroRuntimeConfig: `'nuxt-og-image': OgImageRuntimeConfig`
         },
         routeRules: "ogImage?: false | OgImageOptions & Record<string, any>",
         routeConfig: "ogImage?: false | OgImageOptions & Record<string, any>",
@@ -5088,6 +5195,7 @@ ogImage: {
         eventContext: `_nitro?: {
   routeRules?: import('${nitroCompatibility.nitroTypesModule}').NitroRouteRules
 }
+_ogImageSigningSecret?: string
 _ogImagePrerenderPaths?: Map<string, string>`
       });
       return `/// <reference path="./og-image-virtual.d.ts" />
@@ -5106,46 +5214,6 @@ const RE_INLINE_CONFIG = /const\s+inlineConfig\s*=\s*(\{[\s\S]*?\n\})/;
 const RE_PASCAL_TO_KEBAB = /([a-z])([A-Z])/g;
 const RE_TILDE_PREFIX = /^~\//;
 const IS_MODULE_DEVELOPMENT = import.meta.filename.endsWith(".ts");
-async function findPackageVersionFromEntry(pkg, resolver) {
-  const entry = await resolver.resolvePath(pkg, { fallbackToOriginal: false }).catch(() => {
-    return null;
-  });
-  if (!entry || entry === pkg)
-    return;
-  let dir = dirname(entry);
-  while (dir && dir !== dirname(dir)) {
-    const pkgPath = join(dir, "package.json");
-    if (existsSync(pkgPath)) {
-      const pkgJson = await readPackageJSON(pkgPath);
-      if (pkgJson?.name === pkg)
-        return pkgJson.version;
-    }
-    dir = dirname(dir);
-  }
-}
-function normalizeTakumiVersion(version) {
-  const major = version ? Number.parseInt(version.split(".")[0], 10) : Number.NaN;
-  if (major >= 2)
-    return 2;
-  if (major === 1)
-    return 1;
-}
-async function detectTakumiVersion(resolver, binding) {
-  const packages = binding === "wasm" ? ["@takumi-rs/wasm", "@takumi-rs/core"] : ["@takumi-rs/core", "@takumi-rs/wasm"];
-  const versions = (await Promise.all(packages.map(async (pkg) => {
-    const version = await findPackageVersionFromEntry(pkg, resolver);
-    const major = normalizeTakumiVersion(version);
-    return version && major ? { pkg, version, major } : void 0;
-  }))).filter(Boolean);
-  const detectedMajors = new Set(versions.map(({ major }) => major));
-  if (detectedMajors.size > 1) {
-    const preferred = versions[0];
-    logger.warn(
-      `Mismatched @takumi-rs package major versions detected (${versions.map(({ pkg, version }) => `${pkg}@${version}`).join(", ")}). Using ${preferred.pkg}@${preferred.version} for Takumi v${preferred.major} compatibility.`
-    );
-  }
-  return versions[0]?.major;
-}
 function isProviderEnabledForEnv(provider, nuxt, config) {
   return nuxt.options.dev && config.compatibility?.dev?.[provider] !== false || !nuxt.options.dev && (config.compatibility?.runtime?.[provider] !== false || config.compatibility?.prerender?.[provider] !== false);
 }
@@ -5154,7 +5222,7 @@ const module$1 = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
     compatibility: {
-      nuxt: ">=3.16.0"
+      nuxt: "^4.6.1 || ^5.0.0-0"
     },
     configKey: "ogImage"
   },
@@ -5166,8 +5234,10 @@ const module$1 = defineNuxtModule({
     "@nuxt/fonts": {
       optional: true
     },
-    "nuxt-site-config": {
-      version: ">=3.2"
+    // Keep package-relative resolution until the minimum Nuxt version includes this fix:
+    // https://github.com/nuxt/nuxt/pull/36542
+    [fileURLToPath(import.meta.resolve("nuxt-site-config"))]: {
+      version: ">=5.0.0"
     }
   },
   defaults() {
@@ -5204,17 +5274,28 @@ const module$1 = defineNuxtModule({
       resolve,
       resolvePath: async (path, opts) => fixSharedPath(await _resolver.resolvePath(path, opts))
     };
-    const { version } = await readPackageJSON(resolve("../package.json"));
-    const userAppPkgJson = await readPackageJSON(nuxt.options.rootDir).catch(() => ({ dependencies: {}, devDependencies: {} }));
+    const packageManifest = findPackageJSON("./", import.meta.url);
+    if (!packageManifest)
+      throw new Error("Could not resolve the Nuxt OG Image package manifest.");
+    const { version } = await readPackageManifest(packageManifest);
+    const userAppPkgJson = await readPackageManifest(join(nuxt.options.rootDir, "package.json")).catch(() => ({ dependencies: {}, devDependencies: {} }));
     logger.level = config.debug || nuxt.options.debug ? 4 : 3;
+    nuxt.options.build.transpile.push(resolve("./runtime/app"));
     if (config.enabled === false) {
       logger.info("The module is disabled, skipping setup.");
+      setupRuntimeAliases({ namespace: "#og-image", app: resolve("./runtime/app/disabled") }, nuxt);
+      nuxt.options.alias["#og-image/components"] = resolve("./runtime/app/disabled/components");
       ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name) => {
-        addImports({ name, from: resolve(`./runtime/app/composables/mock`) });
+        addImports({ name, from: "#og-image/app" });
       });
       return;
     }
     const nitroCompatibility = setupNitroRuntimeCompatibility(nuxt);
+    if (nitroCompatibility._tag === "nitro-v2") {
+      nuxt.options.nitro.externals ||= {};
+      nuxt.options.nitro.externals.inline ||= [];
+      nuxt.options.nitro.externals.inline.push(resolve("./runtime"));
+    }
     if (nuxt.options.dev && nitroCompatibility._tag === "nitro-v2")
       nuxt.options.nitro.noExternals ??= false;
     const setRuntimeAlias = (id, path) => {
@@ -5226,6 +5307,12 @@ const module$1 = defineNuxtModule({
       logger.warn("Nuxt OG Image is enabled but SSR is disabled.\n\nYou should enable SSR (`ssr: true`) or disable the module (`ogImage: { enabled: false }`).");
       return;
     }
+    if (config.publish) {
+      const parsed = parsePublishConfig(config.publish);
+      if (parsed._tag === "Err")
+        throw new Error(`[nuxt-og-image] ${parsed.reason}`);
+      config.publish = parsed.value;
+    }
     if (config.cacheMaxAgeSeconds != null) {
       config.defaults = config.defaults || {};
       config.defaults.cacheMaxAgeSeconds = config.cacheMaxAgeSeconds;
@@ -5233,36 +5320,9 @@ const module$1 = defineNuxtModule({
     if (config.debug && !nuxt.options.dev) {
       logger.warn("`ogImage.debug` is enabled in production. This exposes the `/_og/debug.json` endpoint and should not be enabled in production. Disable it before deploying.");
     }
-    const signing = resolveSigningSecret(
-      config.security?.secret,
-      process.env.NUXT_OG_IMAGE_SECRET,
-      () => randomBytes(32).toString("base64url")
-    );
-    const resolvedSecret = signing.secret;
-    if (config.security?.strict && !signing.hasExplicit) {
-      throw new Error("[nuxt-og-image] `security.strict` requires a signing secret. Generate one with: npx nuxt-og-image generate-secret");
+    if (config.security?.strict && config.security.secret === false) {
+      throw new Error("[nuxt-og-image] Strict mode requires URL signing. Remove security.secret: false and set NUXT_APP_SECRET.");
     }
-    nuxt.hook("nitro:init", (nitro) => {
-      const hasServerRuntime = !nitro.options.static && !nuxt.options._generate;
-      if (!nuxt.options.dev || config.zeroRuntime || !hasServerRuntime)
-        return;
-      if (signing.optOut) {
-        logger.warn([
-          "OG image URL signing is disabled (`security.secret: false`).",
-          "Attackers can craft image requests and poison the cache so your real OG image URLs serve attacker-controlled content (content spoofing).",
-          "Signing will be required in v7 whenever runtime image generation is enabled. Leave signing on, or set an explicit secret:",
-          "  NUXT_OG_IMAGE_SECRET=<secret>",
-          "  Generate one with: npx nuxt-og-image generate-secret"
-        ].join("\n"));
-      } else if (signing.generated) {
-        logger.warn([
-          "OG image URLs are signed with an auto-generated secret that changes every build.",
-          "This is fine for single-instance deploys; for rolling or multi-instance deploys set a stable secret:",
-          "  NUXT_OG_IMAGE_SECRET=<secret>",
-          "  Generate one with: npx nuxt-og-image generate-secret"
-        ].join("\n"));
-      }
-    });
     const ogImageConfig = config;
     for (const key of Object.keys(REMOVED_CONFIG)) {
       if (key !== "chromium-node" && key !== "browser-node" && key in ogImageConfig && ogImageConfig[key] !== void 0) {
@@ -5274,17 +5334,17 @@ const module$1 = defineNuxtModule({
       addConfigWarning("browser-node");
     }
     let hasNuxtFonts = hasNuxtModule("@nuxt/fonts");
-    if (hasNuxtFonts && !await hasNuxtModuleCompatibility("@nuxt/fonts", ">=0.13.0")) {
+    if (hasNuxtFonts && !await hasNuxtModuleCompatibility("@nuxt/fonts", ">=1.0.0")) {
       const version2 = await getNuxtModuleVersion("@nuxt/fonts");
       logger.error(
-        `@nuxt/fonts ${version2} is not supported. Version 0.13.0+ is required for OG image font extraction.
+        `@nuxt/fonts ${version2} is not supported. Version 1.0.0+ is required for OG image font extraction.
 Falling back to bundled Inter font.
 
 To fix, update @nuxt/fonts:
   pnpm add @nuxt/fonts@latest
 
 Or pin to a specific version in package.json:
-  "@nuxt/fonts": "^0.13.0"`
+  "@nuxt/fonts": "^1.0.0"`
       );
       hasNuxtFonts = false;
     }
@@ -5302,7 +5362,6 @@ Or pin to a specific version in package.json:
     const preset = resolveOgImagePreset(nuxt.options.nitro);
     const targetCompatibility = getPresetNitroPresetCompatibility(preset);
     setRuntimeAlias("#og-image/bindings/fetch", resolve(`./runtime/server/og-image/bindings/fetch/${targetCompatibility.fetch ?? "node"}`));
-    const runtimeCompatibilityMeta = {};
     const normalizedPreset = preset.replace(RE_LEGACY_SUFFIX, "");
     const isCloudflareWorkers = ["cloudflare", "cloudflare-module", "cloudflare-durable"].includes(normalizedPreset);
     if (isCloudflareWorkers) {
@@ -5490,7 +5549,8 @@ Or pin to a specific version in package.json:
     const ogImageTransformedFiles = /* @__PURE__ */ new Set();
     const fontState = {
       sourceMap: /* @__PURE__ */ new Map(),
-      fallbackMap: /* @__PURE__ */ new Map()
+      fallbackMap: /* @__PURE__ */ new Map(),
+      resolvedFaces: /* @__PURE__ */ new Map()
     };
     const ogImageComponentCtx = { components: [], detectedRenderers: /* @__PURE__ */ new Set() };
     nuxt.hook("modules:done", () => {
@@ -5518,7 +5578,7 @@ Or pin to a specific version in package.json:
           const p = loadCssMetadata().then(async () => {
             let knownFamilies;
             if (hasNuxtFonts) {
-              const resolvedFonts = await parseFontsFromTemplate(nuxt, { fontState });
+              const resolvedFonts = await getResolvedNuxtFonts(nuxt, { fontState });
               knownFamilies = buildFontFamilyCanonicalMap(resolvedFonts.map((f) => f.family));
             }
             const families = resolveFontFamilies([...reqs.familyClasses], [...reqs.familyNames], cssMetadata.fontVars, knownFamilies);
@@ -5533,6 +5593,7 @@ Or pin to a specific version in package.json:
               category: component.category
             };
             recomputeFontRequirements();
+            refreshDevFonts();
             const mapPath = join(nuxt.options.buildDir, "cache", "og-image", "component-font-map.json");
             await mkdir(join(nuxt.options.buildDir, "cache", "og-image"), { recursive: true });
             await writeFile(mapPath, JSON.stringify(fontRequirementsState.componentMap));
@@ -5612,7 +5673,7 @@ ${familyInfo}`);
       }
     }
     if (isProviderEnabledForEnv("browser", nuxt, config)) {
-      const hasChromeLocally = checkLocalChrome();
+      const hasChromeLocally = await checkLocalChrome();
       const hasPlaywrightDependency = await hasResolvableDependency("playwright");
       const browserCompatibilityFlags = {
         prerender: config.compatibility?.prerender?.browser,
@@ -5654,7 +5715,6 @@ ${familyInfo}`);
         prerender: { browser: browserBinding.prerender }
       });
     }
-    await installNuxtSiteConfig();
     nuxt.options.experimental.componentIslands ||= true;
     if (config.debug || nuxt.options.dev) {
       addServerHandler({
@@ -5663,6 +5723,13 @@ ${familyInfo}`);
         handler: resolve("./runtime/server/routes/debug.json")
       });
     }
+    if (nuxt.options.dev) {
+      addServerHandler({
+        lazy: true,
+        route: "/_og-static-fonts/**",
+        handler: resolve("./runtime/server/routes/static-font")
+      });
+    }
     addServerHandler({
       lazy: true,
       route: "/_og/d/**",
@@ -5749,10 +5816,10 @@ ${familyInfo}`);
         }
       }
     }
-    for (const layer of nuxt.options._layers || []) {
-      registerOgComponentDir(join(layer.cwd, "components"));
-      if (layer.config?.srcDir && layer.config.srcDir !== layer.cwd)
-        registerOgComponentDir(join(layer.config.srcDir, "components"));
+    for (const layer of getLayerDirectories(nuxt)) {
+      registerOgComponentDir(join(layer.root, "components"));
+      if (layer.app !== layer.root)
+        registerOgComponentDir(join(layer.app, "components"));
     }
     nuxt.hook("components:dirs", (dirs) => {
       for (const dirConfig of dirs) {
@@ -5799,11 +5866,14 @@ ${familyInfo}`);
         for (const renderer of ogImageComponentCtx.detectedRenderers) {
           const binding = getRecommendedBinding(renderer, targetCompatibility);
           const missing = await getMissingDependencies(renderer, binding);
-          if (missing.length === 0 || renderer === "browser") {
+          const hasOtherBrowserLauncher = renderer === "browser" && (typeof config.browser === "object" && config.browser.provider === "cloudflare" || await hasResolvableDependency("playwright"));
+          if (missing.length === 0 || hasOtherBrowserLauncher) {
             availableRenderers.add(renderer);
           } else {
             const installSpecs = await getMissingDependencyInstallSpecs(renderer, binding);
             const action = resolveMissingRendererAction({ renderer, installSpecs, dev: nuxt.options.dev, interactive: canPromptInteractively() });
+            if (action._tag === "CheckUsage" && renderer === "browser" && config.browser)
+              throw new Error(`[nuxt-og-image] ${getMissingRendererMessage(renderer, installSpecs)}`);
             if (action._tag === "CheckUsage") {
               missingRenderers[renderer] = installSpecs;
             } else if (action._tag === "Report") {
@@ -5834,14 +5904,6 @@ ${familyInfo}`);
           availableRenderers.add(renderer);
       }
     }
-    runtimeCompatibilityMeta.takumiVersion = await detectTakumiVersion(
-      resolver,
-      getRecommendedBinding("takumi", targetCompatibility)
-    );
-    if (ogImageComponentCtx.detectedRenderers.has("takumi") && !runtimeCompatibilityMeta.takumiVersion) {
-      logger.warn("Unable to detect @takumi-rs version. Falling back to Takumi v1 renderer compatibility.");
-      runtimeCompatibilityMeta.takumiVersion = 1;
-    }
     if (nuxt.options.dev) {
       const communityRenderers = /* @__PURE__ */ new Set();
       for (const renderer of ["satori", "takumi", "browser"]) {
@@ -5974,25 +6036,20 @@ Run: npx nuxt-og-image migrate v6`;
       },
       options: { mode: "server" }
     });
+    addTemplate({
+      filename: "nuxt-og-image/client-config.mjs",
+      getContents() {
+        const config2 = nuxt.options.runtimeConfig.public["nuxt-og-image"];
+        return `export const hasServerRuntime = ${config2.hasServerRuntime === true}`;
+      }
+    });
     nuxt.options.nitro.virtual = nuxt.options.nitro.virtual || {};
     nuxt.options.nitro.virtual["#og-image-virtual/component-names.mjs"] = () => {
       return `export const componentNames = ${JSON.stringify(ogImageComponentCtx.components)}`;
     };
     nuxt.options.nitro.virtual["#og-image/island-hash"] = () => {
       const islandHashFile = join(nuxt.options.appDir, "island-hash.js");
-      const [nuxtMajor = 0, nuxtMinor = 0] = getNuxtVersion(nuxt).split(".").map((v) => Number.parseInt(v));
-      if (nuxtMajor > 4 || nuxtMajor === 4 && nuxtMinor >= 5)
-        return `export { getIslandHash } from '${islandHashFile}'`;
-      if (existsSync(islandHashFile)) {
-        return `import { computeIslandHash } from '${islandHashFile}'
-export function getIslandHash({ name, props, context, source }) {
-  return computeIslandHash(name, props ?? {}, context ?? {}, source)
-}`;
-      }
-      return `import { hash } from 'ohash'
-export function getIslandHash({ name, props, context, source }) {
-  return hash([name, props ?? {}, context ?? {}, source]).replace(/[-_]/g, '')
-}`;
+      return `export { getIslandHash } from '${islandHashFile}'`;
     };
     nuxt.options.nitro.publicAssets ||= [];
     const staticFontCacheDir = getStaticFontCacheDir(nuxt.options.buildDir);
@@ -6000,11 +6057,13 @@ export function getIslandHash({ name, props, context, source }) {
     nuxt.options.nitro.publicAssets.push({
       dir: staticFontCacheDir,
       baseURL: "/_og-static-fonts",
+      fallthrough: nuxt.options.dev,
       maxAge: 60 * 60 * 24 * 365
     });
     nuxt.options.nitro.publicAssets.push({
       dir: resolve("./runtime/public/_og-fonts"),
       baseURL: "/_og-static-fonts",
+      fallthrough: nuxt.options.dev,
       maxAge: 60 * 60 * 24 * 365
     });
     nuxt.options.nitro.virtual["#og-image-virtual/public-assets.mjs"] = async () => {
@@ -6029,13 +6088,36 @@ export const resolve = (import.meta.dev || import.meta.prerender) ? devResolve :
     };
     const hasSatoriRenderer = () => ogImageComponentCtx.detectedRenderers.has("satori");
     const hasTakumiRenderer = () => ogImageComponentCtx.detectedRenderers.has("takumi");
-    let fontContext = null;
+    const nuxtFontFiles = /* @__PURE__ */ new Map();
+    const fontContext = hasNuxtFonts ? { readFont: async (url) => nuxtFontFiles.get(url)?.() } : null;
     let fontProcessingDone = false;
+    let builtFontKey;
+    const currentFontKey = () => JSON.stringify([
+      getResolvedFontStateKey(fontState),
+      fontRequirementsState.weights,
+      fontRequirementsState.styles
+    ]);
+    let reloadNitro;
+    function refreshDevFonts() {
+      if (!reloadNitro || builtFontKey === void 0 || builtFontKey === currentFontKey())
+        return;
+      reloadNitro().catch((error) => {
+        logger.warn(`Could not rebuild the OG image font list: ${error.message}`);
+      });
+    }
+    if (nuxt.options.dev) {
+      nuxt.hook("nitro:init", (nitro) => {
+        let pending;
+        reloadNitro = () => pending ||= Promise.resolve().then(async () => {
+          pending = void 0;
+          fontProcessingDone = false;
+          await nitro.hooks.callHook("rollup:reload");
+        });
+      });
+    }
     nuxt.options.nitro.virtual["#og-image/fonts"] = async () => {
+      builtFontKey = currentFontKey();
       await loadCssMetadata();
-      if (hasNuxtFonts && fontContext) {
-        persistFontUrlMapping({ fontContext, buildDir: nuxt.options.buildDir, logger });
-      }
       if (!fontProcessingDone && hasSatoriRenderer() && hasNuxtFonts) {
         if (pendingFontRequirements.length > 0)
           await Promise.all(pendingFontRequirements);
@@ -6065,7 +6147,7 @@ export const resolve = (import.meta.dev || import.meta.prerender) ? devResolve :
       return `export default ${JSON.stringify(fonts)}`;
     };
     nuxt.options.nitro.virtual["#og-image/fonts-available"] = async () => {
-      const fonts = hasNuxtFonts ? await parseFontsFromTemplate(nuxt, { fontState, requiredWeights: fontRequirementsState.weights }) : [];
+      const fonts = hasNuxtFonts ? await getResolvedNuxtFonts(nuxt, { fontState, requiredWeights: fontRequirementsState.weights }) : [];
       return `export default ${JSON.stringify(fonts)}`;
     };
     nuxt.options.nitro.virtual["#og-image/font-requirements"] = async () => {
@@ -6075,7 +6157,8 @@ export const resolve = (import.meta.dev || import.meta.prerender) ? devResolve :
         weights: fontRequirementsState.weights,
         styles: fontRequirementsState.styles,
         families: fontRequirementsState.families,
-        hasDynamicBindings: fontRequirementsState.hasDynamicBindings
+        // Unanalysed components (webpack, rspack) may use any font, like dynamic bindings
+        hasDynamicBindings: fontRequirementsState.hasDynamicBindings || !fontRequirementsState.scanned
       })}
 export const hasNuxtFonts = ${JSON.stringify(hasNuxtFonts)}`;
       if (nuxt.options.dev) {
@@ -6098,17 +6181,34 @@ export function getComponentFontMap() { return _staticMap }`;
 export const tw4Breakpoints = ${JSON.stringify(cssMetadata.breakpoints)}
 export const tw4Colors = ${JSON.stringify(cssMetadata.colors)}`;
     };
-    nuxt.options.nitro.virtual["#og-image-virtual/build-dir.mjs"] = () => {
+    nuxt.options.nitro.virtual["#og-image-virtual/build-dir.mjs"] = async () => {
+      const resolvedFontPaths = await cacheResolvedFontFiles(nuxtFontFiles, join(nuxt.options.buildDir, "cache", "og-image", "resolved-fonts"));
       return `export const buildDir = ${JSON.stringify(nuxt.options.buildDir)}
 export const rootDir = ${JSON.stringify(nuxt.options.rootDir)}
+export const resolvedFontPaths = ${JSON.stringify(resolvedFontPaths)}
 export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.options.buildDir))}`;
     };
     if (hasNuxtFonts) {
-      nuxt.hook("fonts:public-asset-context", (ctx) => {
-        fontContext = ctx;
+      nuxt.hook("fonts:resolved", (font) => {
+        fontState.resolvedFaces.set(font.fontFamily, font.fonts);
+        for (const file of font.files)
+          nuxtFontFiles.set(file.url, file.readFont);
+        refreshDevFonts();
+      });
+      warnWhenFontsUnreported({
+        nuxt,
+        logger,
+        fontState,
+        loadCssMetadata,
+        expectedFamilies: () => [
+          ...fontRequirementsState.families,
+          ...Object.values(cssMetadata.fontVars).flatMap((value) => extractCustomFontFamilies(value)),
+          ...fontFamiliesFromCssEntries(nuxt.options.css, nuxt.options.srcDir, nuxt.options.rootDir)
+        ]
       });
+      const globalFamilies = new Set((nuxt.options.fonts?.families || []).filter((f) => f.global).map((f) => f.name.toLowerCase()));
+      fontState.isOgFamily = (family) => globalFamilies.has(family.toLowerCase()) || !fontRequirementsState.scanned || fontRequirementsState.families.some((f) => f.toLowerCase() === family.toLowerCase());
       nuxt.hook("vite:compiled", async () => {
-        persistFontUrlMapping({ fontContext, buildDir: nuxt.options.buildDir, logger });
         if (fontProcessingDone || !hasSatoriRenderer())
           return;
         if (pendingFontRequirements.length === 0)
@@ -6165,6 +6265,22 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
     }
     if (!cacheEnabled)
       baseCacheKey = false;
+    let hasUnboundedRuntimeCache = false;
+    nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
+      const storage = configureRuntimeCacheStorage(config, nitroConfig);
+      await resolveRuntimeCacheDriver(storage, nitroConfig, nuxt.options.rootDir);
+      hasUnboundedRuntimeCache = storage?.driver === "memory";
+    });
+    nuxt.hooks.hook("nitro:init", (nitro) => {
+      const hasServerRuntime = !nitro.options.static && !nuxt.options._generate;
+      const publishStorage = hasServerRuntime && !config.zeroRuntime ? nitro.options.storage : { ...nitro.options.storage, ...nitro.options.devStorage };
+      if (!nuxt.options.dev && config.publish && !hasPublishMount(config.publish.storage, publishStorage || {})) {
+        logger.warn(`Publish storage mount "${config.publish.storage}" is not configured. Set nitro.storage or mount it in a Nitro plugin.`);
+      }
+      if (!nuxt.options.dev && hasServerRuntime && !config.zeroRuntime && Number(config.defaults?.cacheMaxAgeSeconds) > 0 && hasUnboundedRuntimeCache) {
+        logger.warn("The runtime OG image cache uses memory storage without a size limit. Use lru-cache with maxSize or an expiring driver. See https://nuxtseo.com/docs/og-image/guides/runtime-cache");
+      }
+    });
     const buildCachePath = typeof config.buildCache === "object" && config.buildCache.base ? config.buildCache.base : "node_modules/.cache/nuxt-seo/og-image";
     const buildCacheDir = config.buildCache ? join(nuxt.options.rootDir, buildCachePath) : void 0;
     nuxt.hooks.hook("modules:done", async () => {
@@ -6189,10 +6305,9 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
         // avoid adding credentials
         baseCacheKey,
         buildCacheDir,
+        publish: config.publish ? { ...config.publish, cacheVersion } : void 0,
         hasNuxtIcon: hasNuxtModule("nuxt-icon") || hasNuxtModule("@nuxt/icon"),
         colorPreference,
-        // @ts-expect-error runtime type
-        isNuxtContentDocumentDriven: !!nuxt.options.content?.documentDriven,
         cssFramework: cssFramework || "none",
         browserEnabled: !!config.browser,
         // Browser renderer config for cloudflare binding access
@@ -6208,7 +6323,7 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
           imageFetchTimeout: config.security?.imageFetchTimeout ?? 3e3,
           maxQueryParamSize: config.security?.maxQueryParamSize ?? (config.security?.strict ? 2048 : null),
           restrictRuntimeImagesToOrigin: config.security?.restrictRuntimeImagesToOrigin === true || config.security?.strict && config.security?.restrictRuntimeImagesToOrigin == null ? [] : config.security?.restrictRuntimeImagesToOrigin || false,
-          secret: resolvedSecret
+          secret: config.security?.secret === false ? false : ""
         }
       };
       if (nuxt.options.dev) {
@@ -6219,11 +6334,6 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
       }
       nuxt.hooks.callHook("nuxt-og-image:runtime-config", runtimeConfig);
       nuxt.options.runtimeConfig["nuxt-og-image"] = runtimeConfig;
-      const existingOgImageCfg = nuxt.options.runtimeConfig.ogImage;
-      nuxt.options.runtimeConfig.ogImage = {
-        ...existingOgImageCfg && typeof existingOgImageCfg === "object" ? existingOgImageCfg : {},
-        secret: existingOgImageCfg?.secret || (signing.hasExplicit ? signing.secret : "")
-      };
       nuxt.options.runtimeConfig.public = {
         ...nuxt.options.runtimeConfig.public,
         "nuxt-og-image": {
@@ -6245,9 +6355,8 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
       };
     });
     const getDetectedRenderers = () => new Set([...ogImageComponentCtx.detectedRenderers].filter((r) => !missingRenderers[r]));
-    const getCompatibilityMeta = () => runtimeCompatibilityMeta;
     if (nuxt.options.dev) {
-      await setupDevHandler(config, resolver, getDetectedRenderers, getCompatibilityMeta);
+      await setupDevHandler(config, resolver, getDetectedRenderers);
       setupDevToolsUI(config, resolve, nuxt, cssFramework || "none");
       const useNitro = new Promise((resolveNitro) => {
         nuxt.hooks.hook("nitro:init", resolveNitro);
@@ -6281,16 +6390,22 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
     } else if (isNuxtGenerate()) {
       setupGenerateHandler(config, resolver);
     } else if (nuxt.options.build) {
-      await setupBuildHandler(config, resolver, getDetectedRenderers, getCompatibilityMeta);
+      await setupBuildHandler(config, resolver, getDetectedRenderers);
     }
-    setRuntimeAlias("#og-image/app", resolve("./runtime/app"));
+    setupRuntimeAliases({ namespace: "#og-image", app: resolve("./runtime/app"), server: resolve("./runtime/server") }, nuxt);
     setRuntimeAlias("#og-image/shared", resolve("./runtime/shared"));
     setRuntimeAlias("#og-image/types", resolve("./runtime/types"));
+    if (!config.zeroRuntime) {
+      nuxt.options.nitro.virtual["#og-image-virtual/signing.mjs"] = () => `export const rendersImages = ${getDetectedRenderers().size > 0}`;
+      addServerHandler({ middleware: true, handler: resolve("./runtime/server/middleware/signing") });
+    }
     if (nuxt.options.build)
       addServerPlugin(resolve("./runtime/server/plugins/prerender"));
+    if (nuxt.options.build && config.publish && !config.zeroRuntime)
+      addServerPlugin(resolve("./runtime/server/plugins/publish"));
     if (nuxt.options.dev)
-      addServerPlugin(resolve("./runtime/server/plugins/auto-eject"));
-    setupPrerenderHandler(config, resolver, getDetectedRenderers, getCompatibilityMeta);
+      addServerPlugin(resolve(getNitroVersion(nuxt) === 3 ? "./runtime/server/plugins/auto-eject-nitro3" : "./runtime/server/plugins/auto-eject"));
+    setupPrerenderHandler(config, resolver, getDetectedRenderers);
     if (nuxt.options.dev && hasWarnings()) {
       nuxt.hook("ready", () => {
         emitWarnings();