nuxt-og-image 6.7.8 → 6.9.0

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

@@ -1,17 +1,19 @@
 import { createHash, randomBytes } from 'node:crypto';
 import * as fs from 'node:fs';
 import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, rmSync } from 'node:fs';
-import { readdir, readFile, writeFile, mkdir } from 'node:fs/promises';
+import { readFile, mkdir, writeFile, readdir } from 'node:fs/promises';
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import { resolvePath, useNuxt, addTemplate, updateTemplates, directoryToURL, tryResolveModule, addTypeTemplate, defineNuxtModule, createResolver, addImports, hasNuxtModule, hasNuxtModuleCompatibility, getNuxtModuleVersion, addVitePlugin, addBuildPlugin, addServerHandler, addPlugin, addComponentsDir, getNuxtVersion, addServerPlugin } from '@nuxt/kit';
+import { resolvePath, useNuxt, getNuxtVersion, addTemplate, updateTemplates, directoryToURL, tryResolveModule, addTypeTemplate, defineNuxtModule, createResolver, addImports, hasNuxtModule, hasNuxtModuleCompatibility, getNuxtModuleVersion, addVitePlugin, addBuildPlugin, addServerHandler, addServerImports, addPlugin, addComponentsDir, addServerPlugin } from '@nuxt/kit';
 import { defu } from 'defu';
 import { fnv1a64Base36 } from 'fnv1a-64';
 import { installNuxtSiteConfig } from 'nuxt-site-config/kit';
 import { resolveNitroPreset, renderNitroTypeAugmentations, setupNitroRuntimeCompatibility, getNuxtModuleOptions, isNuxtGenerate } from 'nuxtseo-shared/kit';
-import { basename, join, dirname, relative, isAbsolute, resolve } from 'pathe';
+import { join, basename, dirname, relative, isAbsolute, resolve } from 'pathe';
 import { readPackageJSON } from 'pkg-types';
 import { isCI, isAgent, hasTTY } from 'std-env';
+import MagicString from 'magic-string';
 import { parseAndWalk } from 'oxc-walker';
+import { resolveModulePath } from 'exsolve';
 import { logger } from '../../dist/runtime/logger.js';
 import { Launcher } from 'chrome-launcher';
 import { detectPackageManager, addDependency } from 'nypm';
@@ -19,7 +21,6 @@ import { setupDevToolsUI as setupDevToolsUI$1, setupDevToolsRpc } from 'nuxtseo-
 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 MagicString from 'magic-string';
 import { stripLiteral } from 'strip-literal';
 import { parseURL, parseQuery } from 'ufo';
 import { createUnplugin } from 'unplugin';
@@ -27,9 +28,81 @@ import { parse } from '@vue/compiler-sfc';
 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 { resolveModulePath } from 'exsolve';
 import { p as promptFontsMigration } from './nuxt-og-image.CJa2KCie.mjs';
 
+const valueTypes = { i: 127, p: 127, j: 126, f: 125, d: 124 };
+function encodeLength(value) {
+  const bytes = [];
+  do {
+    const byte = value & 127;
+    value >>>= 7;
+    bytes.push(value ? byte | 128 : byte);
+  } while (value);
+  return bytes;
+}
+function createHarfBuzzCallbackModule(signature) {
+  const type = (character) => {
+    const value = valueTypes[character];
+    if (value === void 0)
+      throw new Error(`Unsupported HarfBuzz callback type: ${character}`);
+    return value;
+  };
+  const params = [...signature.slice(1)].map(type);
+  const results = signature[0] === "v" ? [] : [type(signature[0])];
+  const functionType = [1, 96, ...encodeLength(params.length), ...params, results.length, ...results];
+  return Uint8Array.from([
+    0,
+    97,
+    115,
+    109,
+    1,
+    0,
+    0,
+    0,
+    1,
+    ...encodeLength(functionType.length),
+    ...functionType,
+    2,
+    7,
+    1,
+    1,
+    101,
+    1,
+    102,
+    0,
+    0,
+    7,
+    5,
+    1,
+    1,
+    102,
+    0,
+    0
+  ]);
+}
+async function prepareHarfBuzzCallbacks(adapterPath, outputDir) {
+  const signatures = /* @__PURE__ */ new Set();
+  parseAndWalk(await readFile(adapterPath, "utf8"), adapterPath, {
+    enter(node) {
+      if (node.type !== "CallExpression" || node.callee.type !== "Identifier" || node.callee.name !== "addFunction")
+        return;
+      const signature = node.arguments[1];
+      if (signature?.type === "Literal" && typeof signature.value === "string")
+        signatures.add(signature.value);
+    }
+  });
+  await mkdir(outputDir, { recursive: true });
+  const entries = await Promise.all([...signatures].sort().map(async (signature) => {
+    const path = join(outputDir, `callback-${signature}.wasm`);
+    await writeFile(path, createHarfBuzzCallbackModule(signature));
+    return { signature, path };
+  }));
+  return [
+    ...entries.map(({ signature, path }) => `import ${signature} from ${JSON.stringify(`${path}?module`)}`),
+    `export default { ${entries.map(({ signature }) => signature).join(", ")} }`
+  ].join("\n");
+}
+
 const isUndefinedOrTruthy = (v) => typeof v === "undefined" || v !== false;
 function checkLocalChrome() {
   if (isCI)
@@ -46,6 +119,16 @@ async function hasResolvableDependency(dep) {
     return null;
   }).then((r) => r && r !== dep);
 }
+const MIN_SATORI_VERSION = "0.33.5";
+function isSupportedSatoriVersion(version) {
+  const current = (version || "").split(".").map((part) => Number.parseInt(part, 10) || 0);
+  const minimum = MIN_SATORI_VERSION.split(".").map(Number);
+  for (let i = 0; i < minimum.length; i++) {
+    if ((current[i] ?? 0) !== minimum[i])
+      return (current[i] ?? 0) > minimum[i];
+  }
+  return true;
+}
 const VALID_RENDERER_SUFFIXES = ["satori", "browser", "takumi"];
 const RE_RENDERER_SUFFIX_CI = /\.?(satori|browser|takumi)$/i;
 const RE_RENDERER_SUFFIX = /(Satori|Browser|Takumi)$/;
@@ -119,6 +202,8 @@ const cloudflare = {
   sharp: false,
   emoji: "fetch",
   // edge size limits - use API instead of bundling 24MB icons
+  fetch: "web",
+  // no DNS API
   wasm: {
     esmImport: true
     // Do NOT set lazy here — Nitro's cloudflare preset uses lazy: false because
@@ -141,8 +226,9 @@ const WebContainer = {
   satori: "wasm-fs",
   takumi: "wasm",
   sharp: false,
-  emoji: "fetch"
+  emoji: "fetch",
   // webcontainer has size constraints
+  fetch: "web"
 };
 const RuntimeCompatibility = {
   "nitro-dev": NodeDevRuntime,
@@ -183,6 +269,7 @@ const RuntimeCompatibility = {
     sharp: false,
     emoji: "fetch",
     // edge size limits
+    fetch: "web",
     wasm: {
       rollup: {
         targetEnv: "auto-inline",
@@ -203,6 +290,7 @@ const RuntimeCompatibility = {
     sharp: false,
     emoji: "fetch",
     // edge size limits - bundling 24MB icons not viable
+    fetch: "web",
     wasm: {
       // lowers workers kb size
       esmImport: true,
@@ -276,6 +364,36 @@ async function applyNitroPresetCompatibility(nitroConfig, options) {
     await applyBinding("sharp"),
     nitroConfig.alias || {}
   );
+  if (resolvedCompatibility.satori) {
+    const satoriPackage = await readPackageJSON(`${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`);
+    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);
+      nitroConfig.virtual["#og-image/harfbuzz-callbacks"] = resolvedCompatibility.satori === "wasm" ? await prepareHarfBuzzCallbacks(`${harfbuzzDir}hbjs.js`, join(useNuxt().options.buildDir, "cache/og-image/harfbuzz")) : "export default undefined";
+      Object.assign(nitroConfig.alias, {
+        "harfbuzzjs": await resolve.resolvePath("./runtime/server/og-image/bindings/satori/harfbuzz"),
+        "#og-image/harfbuzz-factory": `${harfbuzzDir}hb.js`,
+        "#og-image/harfbuzz-adapter": `${harfbuzzDir}hbjs.js`
+      });
+      if (resolvedCompatibility.satori === "wasm") {
+        nitroConfig.alias["#og-image/harfbuzz-wasm"] = `${harfbuzzWasmPath}?module`;
+      } else {
+        const base64 = (await readFile(harfbuzzWasmPath)).toString("base64");
+        nitroConfig.virtual["#og-image/harfbuzz-wasm"] = `export default imports => WebAssembly.instantiate(Uint8Array.from(atob(${JSON.stringify(base64)}), c => c.charCodeAt(0)), imports)`;
+      }
+    } else if (Number.parseInt(getNuxtVersion(useNuxt()), 10) >= 5) {
+      const config = nitroConfig;
+      config.traceDeps = [.../* @__PURE__ */ new Set([...config.traceDeps || [], "harfbuzzjs*"])];
+    } else {
+      nitroConfig.externals = nitroConfig.externals || {};
+      nitroConfig.externals.traceInclude = [.../* @__PURE__ */ new Set([
+        ...nitroConfig.externals.traceInclude || [],
+        harfbuzzWasmPath
+      ])];
+    }
+  }
   if (Object.values(resolvedCompatibility).includes("wasm")) {
     nitroConfig.experimental = nitroConfig.experimental || {};
     nitroConfig.experimental.wasm = true;
@@ -334,6 +452,27 @@ async function setupBuildHandler(config, resolve, getDetectedRenderers, getCompa
       detectedRenderers: getDetectedRenderers(),
       metadata: getCompatibilityMeta()
     });
+    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"))
+          return;
+        const transformed = new MagicString(code);
+        parseAndWalk(code, id, {
+          enter(node) {
+            if (node.type === "VariableDeclarator" && node.id.type === "Identifier" && node.id.name === "convertJsFunctionToWasm" && node.init) {
+              transformed.prependLeft(node.init.start, 'Module["convertJsFunctionToWasm"] || (');
+              transformed.appendRight(node.init.end, ")");
+            }
+            if (node.type === "VariableDeclarator" && node.id.type === "Identifier" && ["ENVIRONMENT_IS_NODE", "ENVIRONMENT_IS_WEB", "ENVIRONMENT_IS_WORKER"].includes(node.id.name) && node.init) {
+              transformed.overwrite(node.init.start, node.init.end, "false");
+            }
+          }
+        });
+        return { code: transformed.toString(), map: transformed.generateMap({ hires: true }).toString() };
+      }
+    }];
     const target = resolveOgImagePreset(nitro.options);
     const normalizedTarget = target.replace(RE_LEGACY_SUFFIX, "");
     const isEdgePreset = ["cloudflare", "cloudflare-pages", "cloudflare-pages-static", "cloudflare-module", "cloudflare-durable", "vercel-edge", "netlify-edge"].includes(normalizedTarget);
@@ -2086,8 +2225,7 @@ async function initFontless(options) {
       {
         dev: false,
         renderedFontURLs,
-        assetsBaseURL: FONTS_URL_PREFIX,
-        callback: (filename, url) => renderedFontURLs.set(filename, url)
+        assetsBaseURL: FONTS_URL_PREFIX
       },
       faces
     ),
@@ -2111,7 +2249,7 @@ async function initFontless(options) {
     providers
   });
   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, renderedFontURLs, providerNames: priority };
+  options.nuxt._ogImageFontless = { resolver, providerNames: priority };
 }
 function persistFontUrlMapping(options) {
   if (!options.fontContext?.renderedFontURLs.size)
@@ -2757,11 +2895,10 @@ function isVue(id, opts = {}) {
   }
   return true;
 }
-const JS_RE = /\.(?:[cm]?j|t)sx?$/;
-function isJS(id) {
-  const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href));
-  return JS_RE.test(pathname);
-}
+const VUE_RE = /\.vue(?:\?|$)/;
+const JS_RE = /\.[cm]?[jt]sx?(?:\?|$)/;
+const ISLANDS_RE = /components\.islands\.mjs(?:\?|$)/;
+const COMPOSABLE_CODE_MARKER = "defineOgImage";
 const TreeShakeComposablesPlugin = createUnplugin(() => {
   const composableNames = [
     "defineOgImage",
@@ -2774,21 +2911,26 @@ const TreeShakeComposablesPlugin = createUnplugin(() => {
   return {
     name: "nuxt-og-image:zero-runtime:transform",
     enforce: "pre",
-    transformInclude(id) {
-      return isVue(id, { type: ["script"] }) || isJS(id);
-    },
-    transform(code, id) {
-      const s = new MagicString(code);
-      if (!id.endsWith("components.islands.mjs")) {
-        const strippedCode = stripLiteral(code);
+    transform: {
+      filter: {
+        // @todo re-implement composable tree-shaking for island files
+        id: { include: [VUE_RE, JS_RE], exclude: [ISLANDS_RE] },
+        code: COMPOSABLE_CODE_MARKER
+      },
+      handler(code, id) {
+        if (VUE_RE.test(id) && !isVue(id, { type: ["script"] })) {
+          return;
+        }
         if (!COMPOSABLE_RE.test(code)) {
           return;
         }
-        for (const match of strippedCode.matchAll(COMPOSABLE_RE_GLOBAL)) {
+        const s = new MagicString(code);
+        for (const match of stripLiteral(code).matchAll(COMPOSABLE_RE_GLOBAL)) {
           s.overwrite(match.index, match.index + match[0].length, `${match[1]} import.meta.prerender && ${match[2]}`);
         }
-      }
-      if (s.hasChanged()) {
+        if (!s.hasChanged()) {
+          return;
+        }
         return {
           code: s.toString(),
           map: s.generateMap({ hires: true })
@@ -3304,6 +3446,7 @@ const RE_SVG_ID_ATTR = /\bid="([^"]+)"/g;
 const RE_SVG_VIEWBOX = /viewBox="([^"]*)"/;
 const RE_SVG_BODY = /<svg[^>]*>([\s\S]*)<\/svg>/;
 const RE_OG_IMAGE_QUERY$1 = /\?og-image(?:-depth=\d+)?$/;
+const RE_VUE_ID$1 = /\.vue(?:\?|$)/;
 const RE_TEXT_BETWEEN_TAGS = />([^<]*)</g;
 const RE_SPECIAL_REGEX_CHARS = /[.*+?^${}()|[\]\\]/g;
 const RE_WRAPPER_DIV_START = /^<div>/;
@@ -3542,419 +3685,424 @@ const AssetTransformPlugin = createUnplugin((options) => {
   return {
     name: "nuxt-og-image:asset-transform",
     enforce: "pre",
-    transformInclude(id) {
-      if (id.includes("?og-image"))
-        return true;
-      if (!id.endsWith(".vue"))
-        return false;
-      return options.ogComponentPaths.some((dir) => id.startsWith(`${dir}/`) || id.startsWith(`${dir}\\`));
-    },
-    async transform(code, rawId) {
-      const id = rawId.replace(RE_OG_IMAGE_QUERY$1, "");
-      if (rawId.includes("?og-image"))
-        options.onNestedTransform?.(id);
-      const bounds = getOuterTemplateBounds(code);
-      if (!bounds)
-        return;
-      const s = new MagicString(code);
-      const { templateStart, templateEnd } = bounds;
-      let template = code.slice(templateStart, templateEnd);
-      let hasChanges = false;
-      if (options.emojiSet && RE_MATCH_EMOJIS.test(template)) {
-        if (!emojiIcons) {
-          emojiIcons = options.emojiIcons ?? await import(`@iconify-json/${options.emojiSet}/icons.json`, { with: { type: 'json' } }).then((m) => m.default).catch(() => {
-            return null;
-          });
-        }
-        RE_MATCH_EMOJIS.lastIndex = 0;
-        const allEmojis = /* @__PURE__ */ new Set();
-        for (const match of template.matchAll(RE_MATCH_EMOJIS)) {
-          allEmojis.add(match[0]);
+    transform: {
+      filter: {
+        id: RE_VUE_ID$1
+      },
+      async handler(code, rawId) {
+        const isNested = RE_OG_IMAGE_QUERY$1.test(rawId);
+        if (!isNested) {
+          if (!rawId.endsWith(".vue"))
+            return;
+          if (!options.ogComponentPaths.some((dir) => rawId.startsWith(`${dir}/`) || rawId.startsWith(`${dir}\\`)))
+            return;
         }
-        const emojiSvgMap = /* @__PURE__ */ new Map();
-        await Promise.all(Array.from(allEmojis, async (emoji) => {
-          let svg = null;
-          if (emojiIcons) {
-            svg = buildEmojiSvg(emoji, emojiIcons, options.emojiSet);
+        const id = rawId.replace(RE_OG_IMAGE_QUERY$1, "");
+        if (isNested)
+          options.onNestedTransform?.(id);
+        const bounds = getOuterTemplateBounds(code);
+        if (!bounds)
+          return;
+        const s = new MagicString(code);
+        const { templateStart, templateEnd } = bounds;
+        let template = code.slice(templateStart, templateEnd);
+        let hasChanges = false;
+        if (options.emojiSet && RE_MATCH_EMOJIS.test(template)) {
+          if (!emojiIcons) {
+            emojiIcons = options.emojiIcons ?? await import(`@iconify-json/${options.emojiSet}/icons.json`, { with: { type: 'json' } }).then((m) => m.default).catch(() => {
+              return null;
+            });
           }
-          if (!svg) {
-            svg = await fetchEmojiSvg(emoji, options.emojiSet);
+          RE_MATCH_EMOJIS.lastIndex = 0;
+          const allEmojis = /* @__PURE__ */ new Set();
+          for (const match of template.matchAll(RE_MATCH_EMOJIS)) {
+            allEmojis.add(match[0]);
           }
-          if (svg) {
-            emojiSvgMap.set(emoji, svg);
+          const emojiSvgMap = /* @__PURE__ */ new Map();
+          await Promise.all(Array.from(allEmojis, async (emoji) => {
+            let svg = null;
+            if (emojiIcons) {
+              svg = buildEmojiSvg(emoji, emojiIcons, options.emojiSet);
+            }
+            if (!svg) {
+              svg = await fetchEmojiSvg(emoji, options.emojiSet);
+            }
+            if (svg) {
+              emojiSvgMap.set(emoji, svg);
+            }
+          }));
+          if (emojiSvgMap.size > 0) {
+            RE_TEXT_BETWEEN_TAGS.lastIndex = 0;
+            template = template.replace(RE_TEXT_BETWEEN_TAGS, (fullMatch, textContent) => {
+              if (!textContent)
+                return fullMatch;
+              RE_MATCH_EMOJIS.lastIndex = 0;
+              const emojiMatches = [...textContent.matchAll(RE_MATCH_EMOJIS)];
+              if (!emojiMatches.length)
+                return fullMatch;
+              let newTextContent = textContent;
+              for (const match of emojiMatches) {
+                const emoji = match[0];
+                const svg = emojiSvgMap.get(emoji);
+                if (svg) {
+                  hasChanges = true;
+                  const escaped = emoji.replace(RE_SPECIAL_REGEX_CHARS, "\\$&");
+                  newTextContent = newTextContent.replace(new RegExp(escaped, "g"), svg);
+                }
+              }
+              return `>${newTextContent}<`;
+            });
           }
-        }));
-        if (emojiSvgMap.size > 0) {
-          RE_TEXT_BETWEEN_TAGS.lastIndex = 0;
-          template = template.replace(RE_TEXT_BETWEEN_TAGS, (fullMatch, textContent) => {
-            if (!textContent)
-              return fullMatch;
-            RE_MATCH_EMOJIS.lastIndex = 0;
-            const emojiMatches = [...textContent.matchAll(RE_MATCH_EMOJIS)];
-            if (!emojiMatches.length)
-              return fullMatch;
-            let newTextContent = textContent;
-            for (const match of emojiMatches) {
-              const emoji = match[0];
-              const svg = emojiSvgMap.get(emoji);
-              if (svg) {
-                hasChanges = true;
-                const escaped = emoji.replace(RE_SPECIAL_REGEX_CHARS, "\\$&");
-                newTextContent = newTextContent.replace(new RegExp(escaped, "g"), svg);
+        }
+        if (template.includes("<Icon") || template.includes("<UIcon")) {
+          const prefixes = /* @__PURE__ */ new Set();
+          const iconElements = [];
+          const wrappedTemplate = `<div>${template}</div>`;
+          const doc = parse$1(wrappedTemplate);
+          walkSync(doc, (node, parent, index) => {
+            if (node.type === ELEMENT_NODE$2) {
+              const el = node;
+              if (el.name === "Icon" || el.name === "UIcon") {
+                const iconName = el.attributes.name;
+                if (iconName && !iconName.includes("{")) {
+                  const [prefix] = iconName.split(":");
+                  if (prefix)
+                    prefixes.add(prefix);
+                  iconElements.push({ node: el, parent, index });
+                }
               }
             }
-            return `>${newTextContent}<`;
           });
-        }
-      }
-      if (template.includes("<Icon") || template.includes("<UIcon")) {
-        const prefixes = /* @__PURE__ */ new Set();
-        const iconElements = [];
-        const wrappedTemplate = `<div>${template}</div>`;
-        const doc = parse$1(wrappedTemplate);
-        walkSync(doc, (node, parent, index) => {
-          if (node.type === ELEMENT_NODE$2) {
-            const el = node;
-            if (el.name === "Icon" || el.name === "UIcon") {
+          const iconSets = /* @__PURE__ */ new Map();
+          for (const prefix of prefixes) {
+            const icons = await loadIconSet(prefix);
+            if (icons)
+              iconSets.set(prefix, icons);
+          }
+          if (iconElements.length > 0) {
+            let anyReplaced = false;
+            for (const { node: el, parent, index } of iconElements) {
               const iconName = el.attributes.name;
-              if (iconName && !iconName.includes("{")) {
-                const [prefix] = iconName.split(":");
-                if (prefix)
-                  prefixes.add(prefix);
-                iconElements.push({ node: el, parent, index });
+              if (!iconName)
+                continue;
+              const [prefix, name] = iconName.split(":");
+              if (!prefix || !name)
+                continue;
+              const icons = iconSets.get(prefix);
+              const iconData = icons?.icons?.[name];
+              let svgHtml;
+              if (iconData) {
+                svgHtml = buildIconSvg(iconData, icons.width || 24, icons.height || 24, el.attributes);
+              } else if (options.cssProvider?.resolveIcon) {
+                const resolved = await options.cssProvider.resolveIcon(prefix, name);
+                if (resolved)
+                  svgHtml = buildIconSvg(resolved, resolved.width, resolved.height, el.attributes);
+              }
+              if (!svgHtml)
+                continue;
+              anyReplaced = true;
+              hasChanges = true;
+              const svgDoc = parse$1(svgHtml);
+              if ("children" in parent && Array.isArray(parent.children)) {
+                parent.children[index] = svgDoc.children[0];
               }
             }
+            if (anyReplaced) {
+              const rendered = renderSync(doc);
+              template = rendered.replace(RE_WRAPPER_DIV_START, "").replace(RE_WRAPPER_DIV_END, "");
+            }
           }
-        });
-        const iconSets = /* @__PURE__ */ new Map();
-        for (const prefix of prefixes) {
-          const icons = await loadIconSet(prefix);
-          if (icons)
-            iconSets.set(prefix, icons);
         }
-        if (iconElements.length > 0) {
-          let anyReplaced = false;
-          for (const { node: el, parent, index } of iconElements) {
-            const iconName = el.attributes.name;
-            if (!iconName)
-              continue;
-            const [prefix, name] = iconName.split(":");
-            if (!prefix || !name)
+        if (options.cssProvider?.resolveIcon) {
+          const replacements = [];
+          RE_ICON_ELEMENT.lastIndex = 0;
+          let elMatch;
+          while ((elMatch = RE_ICON_ELEMENT.exec(template)) !== null) {
+            const [fullMatch, , attrsStr, classValue] = elMatch;
+            if (!classValue)
               continue;
-            const icons = iconSets.get(prefix);
-            const iconData = icons?.icons?.[name];
-            let svgHtml;
-            if (iconData) {
-              svgHtml = buildIconSvg(iconData, icons.width || 24, icons.height || 24, el.attributes);
-            } else if (options.cssProvider?.resolveIcon) {
-              const resolved = await options.cssProvider.resolveIcon(prefix, name);
-              if (resolved)
-                svgHtml = buildIconSvg(resolved, resolved.width, resolved.height, el.attributes);
+            const classes = classValue.split(RE_WHITESPACE).filter(Boolean);
+            let iconPrefix;
+            let iconName;
+            for (const cls of classes) {
+              const im = cls.match(ICON_CLASS_RE);
+              if (im?.[1] && im[2]) {
+                iconPrefix = im[1];
+                iconName = im[2];
+                break;
+              }
             }
-            if (!svgHtml)
+            if (!iconPrefix || !iconName)
               continue;
-            anyReplaced = true;
-            hasChanges = true;
-            const svgDoc = parse$1(svgHtml);
-            if ("children" in parent && Array.isArray(parent.children)) {
-              parent.children[index] = svgDoc.children[0];
+            const resolved = await options.cssProvider.resolveIcon(iconPrefix, iconName);
+            if (!resolved)
+              continue;
+            const attrs = {};
+            RE_HTML_ATTR.lastIndex = 0;
+            let am;
+            while ((am = RE_HTML_ATTR.exec(attrsStr)) !== null) {
+              if (am[1] && am[1] !== "class" && am[1] !== ":style" && am[1] !== "v-bind:style")
+                attrs[am[1]] = am[2] ?? "";
             }
+            const otherClasses = classes.filter((c) => !isIconClass(c));
+            if (otherClasses.length > 0)
+              attrs.class = otherClasses.join(" ");
+            const svgHtml = buildIconSvg(resolved, resolved.width, resolved.height, attrs);
+            replacements.push({ from: fullMatch, to: svgHtml });
           }
-          if (anyReplaced) {
-            const rendered = renderSync(doc);
-            template = rendered.replace(RE_WRAPPER_DIV_START, "").replace(RE_WRAPPER_DIV_END, "");
+          for (const { from, to } of replacements) {
+            template = template.replace(from, to);
+            hasChanges = true;
           }
         }
-      }
-      if (options.cssProvider?.resolveIcon) {
-        const replacements = [];
-        RE_ICON_ELEMENT.lastIndex = 0;
-        let elMatch;
-        while ((elMatch = RE_ICON_ELEMENT.exec(template)) !== null) {
-          const [fullMatch, , attrsStr, classValue] = elMatch;
-          if (!classValue)
-            continue;
-          const classes = classValue.split(RE_WHITESPACE).filter(Boolean);
-          let iconPrefix;
-          let iconName;
-          for (const cls of classes) {
-            const im = cls.match(ICON_CLASS_RE);
-            if (im?.[1] && im[2]) {
-              iconPrefix = im[1];
-              iconName = im[2];
-              break;
-            }
-          }
-          if (!iconPrefix || !iconName)
-            continue;
-          const resolved = await options.cssProvider.resolveIcon(iconPrefix, iconName);
-          if (!resolved)
-            continue;
-          const attrs = {};
-          RE_HTML_ATTR.lastIndex = 0;
-          let am;
-          while ((am = RE_HTML_ATTR.exec(attrsStr)) !== null) {
-            if (am[1] && am[1] !== "class" && am[1] !== ":style" && am[1] !== "v-bind:style")
-              attrs[am[1]] = am[2] ?? "";
+        const rootAttrs = {};
+        const rootAttrMatch = template.match(RE_ROOT_ELEMENT);
+        if (rootAttrMatch?.[2]) {
+          RE_DATA_ATTR.lastIndex = 0;
+          for (const m of rootAttrMatch[2].matchAll(RE_DATA_ATTR)) {
+            if (m[1] && m[2])
+              rootAttrs[`data-${m[1]}`] = m[2];
           }
-          const otherClasses = classes.filter((c) => !isIconClass(c));
-          if (otherClasses.length > 0)
-            attrs.class = otherClasses.join(" ");
-          const svgHtml = buildIconSvg(resolved, resolved.width, resolved.height, attrs);
-          replacements.push({ from: fullMatch, to: svgHtml });
-        }
-        for (const { from, to } of replacements) {
-          template = template.replace(from, to);
-          hasChanges = true;
-        }
-      }
-      const rootAttrs = {};
-      const rootAttrMatch = template.match(RE_ROOT_ELEMENT);
-      if (rootAttrMatch?.[2]) {
-        RE_DATA_ATTR.lastIndex = 0;
-        for (const m of rootAttrMatch[2].matchAll(RE_DATA_ATTR)) {
-          if (m[1] && m[2])
-            rootAttrs[`data-${m[1]}`] = m[2];
         }
-      }
-      if (!rootAttrs["data-theme"] && options.colorPreference)
-        rootAttrs["data-theme"] = options.colorPreference;
-      const hasDynamicDataTheme = !!(rootAttrMatch?.[2] && RE_DYNAMIC_DATA_THEME.test(` ${rootAttrMatch[2]}`));
-      if (options.cssProvider) {
-        options.beforeCssResolve?.();
-        try {
-          const fullCode = code.slice(0, templateStart) + template + code.slice(templateEnd);
-          const result = await transformVueTemplate(fullCode, {
-            resolveStyles: async (classes) => {
-              const supported = classes.filter((cls) => !isUnsupportedClass(cls) && !isIconClass(cls));
-              const unsupported = classes.filter((cls) => isUnsupportedClass(cls));
-              if (unsupported.length > 0) {
-                const componentName2 = id.split("/").pop();
-                logger.warn(`[nuxt-og-image] ${componentName2}: Filtered unsupported classes: ${unsupported.join(", ")}`);
+        if (!rootAttrs["data-theme"] && options.colorPreference)
+          rootAttrs["data-theme"] = options.colorPreference;
+        const hasDynamicDataTheme = !!(rootAttrMatch?.[2] && RE_DYNAMIC_DATA_THEME.test(` ${rootAttrMatch[2]}`));
+        if (options.cssProvider) {
+          options.beforeCssResolve?.();
+          try {
+            const fullCode = code.slice(0, templateStart) + template + code.slice(templateEnd);
+            const result = await transformVueTemplate(fullCode, {
+              resolveStyles: async (classes) => {
+                const supported = classes.filter((cls) => !isUnsupportedClass(cls) && !isIconClass(cls));
+                const unsupported = classes.filter((cls) => isUnsupportedClass(cls));
+                if (unsupported.length > 0) {
+                  const componentName2 = id.split("/").pop();
+                  logger.warn(`[nuxt-og-image] ${componentName2}: Filtered unsupported classes: ${unsupported.join(", ")}`);
+                }
+                const componentName = id.split("/").pop()?.replace(RE_FILE_EXTENSION, "");
+                if (hasDynamicDataTheme) {
+                  const lightAttrs = { ...rootAttrs, "data-theme": "light" };
+                  const darkAttrs = { ...rootAttrs, "data-theme": "dark" };
+                  const [lightResolved, darkResolved] = await Promise.all([
+                    options.cssProvider.resolveClassesToStyles(supported, componentName, lightAttrs),
+                    options.cssProvider.resolveClassesToStyles(supported, componentName, darkAttrs)
+                  ]);
+                  return mergeThemePairs(supported, lightResolved, darkResolved);
+                }
+                return options.cssProvider.resolveClassesToStyles(supported, componentName, rootAttrs);
               }
-              const componentName = id.split("/").pop()?.replace(RE_FILE_EXTENSION, "");
-              if (hasDynamicDataTheme) {
-                const lightAttrs = { ...rootAttrs, "data-theme": "light" };
-                const darkAttrs = { ...rootAttrs, "data-theme": "dark" };
-                const [lightResolved, darkResolved] = await Promise.all([
-                  options.cssProvider.resolveClassesToStyles(supported, componentName, lightAttrs),
-                  options.cssProvider.resolveClassesToStyles(supported, componentName, darkAttrs)
-                ]);
-                return mergeThemePairs(supported, lightResolved, darkResolved);
+            });
+            if (result) {
+              const newBounds = getOuterTemplateBounds(result.code);
+              if (newBounds) {
+                template = result.code.slice(newBounds.templateStart, newBounds.templateEnd);
+                hasChanges = true;
               }
-              return options.cssProvider.resolveClassesToStyles(supported, componentName, rootAttrs);
-            }
-          });
-          if (result) {
-            const newBounds = getOuterTemplateBounds(result.code);
-            if (newBounds) {
-              template = result.code.slice(newBounds.templateStart, newBounds.templateEnd);
-              hasChanges = true;
             }
+          } catch (err) {
+            const componentName = id.split("/").pop();
+            logger.warn(`[nuxt-og-image] ${componentName}: CSS template transform failed, using original template`, err.message);
           }
-        } catch (err) {
-          const componentName = id.split("/").pop();
-          logger.warn(`[nuxt-og-image] ${componentName}: CSS template transform failed, using original template`, err.message);
         }
-      }
-      if (template.includes("var(")) {
-        const vars = options.cssProvider?.getVars ? await options.cssProvider.getVars(rootAttrs) : /* @__PURE__ */ new Map();
-        RE_INLINE_STYLE.lastIndex = 0;
-        for (const m of template.matchAll(RE_INLINE_STYLE)) {
-          RE_CSS_VAR_DEF.lastIndex = 0;
-          for (const def of m[1].matchAll(RE_CSS_VAR_DEF)) {
-            const name = `--${def[1]}`;
-            if (!vars.has(name))
-              vars.set(name, def[2].trim());
-          }
-        }
-        if (vars.size > 0) {
-          const replacements = [];
-          RE_NON_STYLE_VAR_ATTR.lastIndex = 0;
-          template.replace(RE_NON_STYLE_VAR_ATTR, (match, attr, value) => {
-            const resolved = resolveCssVars(value, vars);
-            if (resolved !== value) {
-              replacements.push({ from: match, to: "", attr, value: resolved });
+        if (template.includes("var(")) {
+          const vars = options.cssProvider?.getVars ? await options.cssProvider.getVars(rootAttrs) : /* @__PURE__ */ new Map();
+          RE_INLINE_STYLE.lastIndex = 0;
+          for (const m of template.matchAll(RE_INLINE_STYLE)) {
+            RE_CSS_VAR_DEF.lastIndex = 0;
+            for (const def of m[1].matchAll(RE_CSS_VAR_DEF)) {
+              const name = `--${def[1]}`;
+              if (!vars.has(name))
+                vars.set(name, def[2].trim());
             }
-            return match;
-          });
-          for (const r of replacements) {
-            let value = r.value;
-            if (RE_COLOR_ATTR_NAME.test(r.attr)) {
-              value = await downlevelColor(r.attr, value);
-            }
-            r.to = `${r.attr}="${escapeAttrValue(value)}"`;
-            template = template.replace(r.from, r.to);
-            hasChanges = true;
           }
-          const styleReplacements = [];
-          RE_STYLE_VAR_ATTR.lastIndex = 0;
-          template.replace(RE_STYLE_VAR_ATTR, (match, styleValue) => {
-            const resolved = resolveCssVars(styleValue, vars);
-            if (resolved !== styleValue)
-              styleReplacements.push({ from: match, content: resolved });
-            return match;
-          });
-          for (const r of styleReplacements) {
-            const declarations = r.content.split(";").filter(Boolean);
-            const downleveled = [];
-            for (const decl of declarations) {
-              const colonIdx = decl.indexOf(":");
-              if (colonIdx === -1) {
-                downleveled.push(decl);
-                continue;
+          if (vars.size > 0) {
+            const replacements = [];
+            RE_NON_STYLE_VAR_ATTR.lastIndex = 0;
+            template.replace(RE_NON_STYLE_VAR_ATTR, (match, attr, value) => {
+              const resolved = resolveCssVars(value, vars);
+              if (resolved !== value) {
+                replacements.push({ from: match, to: "", attr, value: resolved });
               }
-              const prop = decl.slice(0, colonIdx).trim();
-              let value = decl.slice(colonIdx + 1).trim();
-              if (RE_COLOR_PROP_NAME.test(prop) && !value.includes("var(")) {
-                value = await downlevelColor(prop, value);
-                if (value.includes("color-mix("))
-                  value = resolveColorMix(value);
+              return match;
+            });
+            for (const r of replacements) {
+              let value = r.value;
+              if (RE_COLOR_ATTR_NAME.test(r.attr)) {
+                value = await downlevelColor(r.attr, value);
               }
-              downleveled.push(`${prop}: ${value}`);
+              r.to = `${r.attr}="${escapeAttrValue(value)}"`;
+              template = template.replace(r.from, r.to);
+              hasChanges = true;
             }
-            const to = `style="${escapeAttrValue(downleveled.join("; "))}"`;
-            template = template.replace(r.from, to);
-            hasChanges = true;
-          }
-          RE_DYNAMIC_STYLE_VAR.lastIndex = 0;
-          const dynamicReplacements = [];
-          template.replace(RE_DYNAMIC_STYLE_VAR, (match, styleExpr) => {
-            const resolved = resolveCssVars(styleExpr, vars);
-            if (resolved !== styleExpr)
-              dynamicReplacements.push({ from: match, to: `:style="${resolved}"` });
-            return match;
-          });
-          for (const r of dynamicReplacements) {
-            template = template.replace(r.from, r.to);
-            hasChanges = true;
-          }
-        }
-      }
-      if (!template.includes("data-no-inline")) {
-        RE_IMAGE_SRC.lastIndex = 0;
-        if (RE_IMAGE_SRC.test(template)) {
-          RE_IMAGE_SRC.lastIndex = 0;
-          const componentDir = dirname(id);
-          const replacements = [];
-          let match;
-          while ((match = RE_IMAGE_SRC.exec(template)) !== null) {
-            const [fullMatch, srcPath, ext] = match;
-            if (!srcPath || !ext)
-              continue;
-            if (srcPath.startsWith("data:") || srcPath.startsWith("http"))
-              continue;
-            let resolvedPath;
-            if (srcPath.startsWith("/")) {
-              resolvedPath = join(options.publicDir, srcPath);
-            } else if (srcPath.startsWith("~/") || srcPath.startsWith("@/")) {
-              resolvedPath = join(options.srcDir, srcPath.slice(2));
-            } else if (!isAbsolute(srcPath)) {
-              resolvedPath = resolve(componentDir, srcPath);
-            } else {
-              continue;
+            const styleReplacements = [];
+            RE_STYLE_VAR_ATTR.lastIndex = 0;
+            template.replace(RE_STYLE_VAR_ATTR, (match, styleValue) => {
+              const resolved = resolveCssVars(styleValue, vars);
+              if (resolved !== styleValue)
+                styleReplacements.push({ from: match, content: resolved });
+              return match;
+            });
+            for (const r of styleReplacements) {
+              const declarations = r.content.split(";").filter(Boolean);
+              const downleveled = [];
+              for (const decl of declarations) {
+                const colonIdx = decl.indexOf(":");
+                if (colonIdx === -1) {
+                  downleveled.push(decl);
+                  continue;
+                }
+                const prop = decl.slice(0, colonIdx).trim();
+                let value = decl.slice(colonIdx + 1).trim();
+                if (RE_COLOR_PROP_NAME.test(prop) && !value.includes("var(")) {
+                  value = await downlevelColor(prop, value);
+                  if (value.includes("color-mix("))
+                    value = resolveColorMix(value);
+                }
+                downleveled.push(`${prop}: ${value}`);
+              }
+              const to = `style="${escapeAttrValue(downleveled.join("; "))}"`;
+              template = template.replace(r.from, to);
+              hasChanges = true;
             }
-            const fileBuffer = await readFile(resolvedPath).catch(() => {
-              return null;
+            RE_DYNAMIC_STYLE_VAR.lastIndex = 0;
+            const dynamicReplacements = [];
+            template.replace(RE_DYNAMIC_STYLE_VAR, (match, styleExpr) => {
+              const resolved = resolveCssVars(styleExpr, vars);
+              if (resolved !== styleExpr)
+                dynamicReplacements.push({ from: match, to: `:style="${resolved}"` });
+              return match;
             });
-            if (!fileBuffer)
-              continue;
-            const mimeType = getMimeType(ext);
-            let dataUri;
-            if (ext === "svg") {
-              const svgContent = fileBuffer.toString("utf-8");
-              dataUri = `data:${mimeType},${encodeURIComponent(svgContent)}`;
-            } else {
-              const base64 = fileBuffer.toString("base64");
-              dataUri = `data:${mimeType};base64,${base64}`;
+            for (const r of dynamicReplacements) {
+              template = template.replace(r.from, r.to);
+              hasChanges = true;
             }
-            replacements.push({ from: fullMatch, to: `src="${dataUri}"` });
-            hasChanges = true;
-          }
-          for (const { from, to } of replacements) {
-            template = template.replace(from, to);
           }
         }
-      }
-      {
-        const { descriptor } = parse(code);
-        if (descriptor.styles.length > 0) {
-          for (const styleBlock of descriptor.styles) {
-            const rawCss = styleBlock.content;
-            const scopeId = styleBlock.scoped ? rawCss.match(RE_SCOPED_DATA_V)?.[0] ?? null : null;
-            const cleanCss = scopeId ? rawCss.replaceAll(scopeId, "") : rawCss;
-            const simplified = await simplifyCss(cleanCss);
-            const classMap = extractClassStyles(simplified, { skipPrefixes: [] });
-            if (classMap.size > 0) {
-              const wrappedTemplate = `<div>${template}</div>`;
-              const doc = parse$1(wrappedTemplate);
-              walkSync(doc, (node) => {
-                if (node.type !== ELEMENT_NODE$2)
-                  return;
-                const el = node;
-                const classAttr = el.attributes?.class;
-                if (!classAttr)
-                  return;
-                const elClasses = classAttr.split(RE_WHITESPACE).filter(Boolean);
-                const matchedStyles = {};
-                const consumedClasses = /* @__PURE__ */ new Set();
-                for (const cls of elClasses) {
-                  const styles = classMap.get(cls);
-                  if (styles) {
-                    Object.assign(matchedStyles, styles);
-                    consumedClasses.add(cls);
-                  }
-                }
-                if (Object.keys(matchedStyles).length === 0)
-                  return;
-                const existingStyle = el.attributes?.style || "";
-                const existingProps = {};
-                for (const decl of splitCssDeclarations(existingStyle)) {
-                  const [prop, ...valParts] = decl.split(":");
-                  const value = valParts.join(":").trim();
-                  if (prop?.trim() && value)
-                    existingProps[prop.trim()] = value;
-                }
-                const merged = { ...matchedStyles, ...existingProps };
-                el.attributes.style = escapeAttrValue(
-                  Object.entries(merged).map(([p, v]) => `${p}:${v}`).join(";")
-                );
-                const remaining = elClasses.filter((c) => !consumedClasses.has(c));
-                if (remaining.length > 0)
-                  el.attributes.class = remaining.join(" ");
-                else
-                  delete el.attributes.class;
-                if (el.attributes.viewbox) {
-                  el.attributes.viewBox = el.attributes.viewbox;
-                  delete el.attributes.viewbox;
-                }
+        if (!template.includes("data-no-inline")) {
+          RE_IMAGE_SRC.lastIndex = 0;
+          if (RE_IMAGE_SRC.test(template)) {
+            RE_IMAGE_SRC.lastIndex = 0;
+            const componentDir = dirname(id);
+            const replacements = [];
+            let match;
+            while ((match = RE_IMAGE_SRC.exec(template)) !== null) {
+              const [fullMatch, srcPath, ext] = match;
+              if (!srcPath || !ext)
+                continue;
+              if (srcPath.startsWith("data:") || srcPath.startsWith("http"))
+                continue;
+              let resolvedPath;
+              if (srcPath.startsWith("/")) {
+                resolvedPath = join(options.publicDir, srcPath);
+              } else if (srcPath.startsWith("~/") || srcPath.startsWith("@/")) {
+                resolvedPath = join(options.srcDir, srcPath.slice(2));
+              } else if (!isAbsolute(srcPath)) {
+                resolvedPath = resolve(componentDir, srcPath);
+              } else {
+                continue;
+              }
+              const fileBuffer = await readFile(resolvedPath).catch(() => {
+                return null;
               });
-              template = renderSync(doc).replace(RE_WRAPPER_DIV_START, "").replace(RE_WRAPPER_DIV_END, "");
+              if (!fileBuffer)
+                continue;
+              const mimeType = getMimeType(ext);
+              let dataUri;
+              if (ext === "svg") {
+                const svgContent = fileBuffer.toString("utf-8");
+                dataUri = `data:${mimeType},${encodeURIComponent(svgContent)}`;
+              } else {
+                const base64 = fileBuffer.toString("base64");
+                dataUri = `data:${mimeType};base64,${base64}`;
+              }
+              replacements.push({ from: fullMatch, to: `src="${dataUri}"` });
               hasChanges = true;
             }
+            for (const { from, to } of replacements) {
+              template = template.replace(from, to);
+            }
           }
-          for (const styleBlock of descriptor.styles) {
-            const styleStart = code.indexOf(styleBlock.loc.source) - "<style".length;
-            const fullTagStart = code.lastIndexOf("<style", styleStart + "<style".length);
-            const fullTagEnd = code.indexOf("</style>", styleStart) + "</style>".length;
-            if (fullTagStart >= 0 && fullTagEnd > fullTagStart) {
-              s.remove(fullTagStart, fullTagEnd);
+        }
+        {
+          const { descriptor } = parse(code);
+          if (descriptor.styles.length > 0) {
+            for (const styleBlock of descriptor.styles) {
+              const rawCss = styleBlock.content;
+              const scopeId = styleBlock.scoped ? rawCss.match(RE_SCOPED_DATA_V)?.[0] ?? null : null;
+              const cleanCss = scopeId ? rawCss.replaceAll(scopeId, "") : rawCss;
+              const simplified = await simplifyCss(cleanCss);
+              const classMap = extractClassStyles(simplified, { skipPrefixes: [] });
+              if (classMap.size > 0) {
+                const wrappedTemplate = `<div>${template}</div>`;
+                const doc = parse$1(wrappedTemplate);
+                walkSync(doc, (node) => {
+                  if (node.type !== ELEMENT_NODE$2)
+                    return;
+                  const el = node;
+                  const classAttr = el.attributes?.class;
+                  if (!classAttr)
+                    return;
+                  const elClasses = classAttr.split(RE_WHITESPACE).filter(Boolean);
+                  const matchedStyles = {};
+                  const consumedClasses = /* @__PURE__ */ new Set();
+                  for (const cls of elClasses) {
+                    const styles = classMap.get(cls);
+                    if (styles) {
+                      Object.assign(matchedStyles, styles);
+                      consumedClasses.add(cls);
+                    }
+                  }
+                  if (Object.keys(matchedStyles).length === 0)
+                    return;
+                  const existingStyle = el.attributes?.style || "";
+                  const existingProps = {};
+                  for (const decl of splitCssDeclarations(existingStyle)) {
+                    const [prop, ...valParts] = decl.split(":");
+                    const value = valParts.join(":").trim();
+                    if (prop?.trim() && value)
+                      existingProps[prop.trim()] = value;
+                  }
+                  const merged = { ...matchedStyles, ...existingProps };
+                  el.attributes.style = escapeAttrValue(
+                    Object.entries(merged).map(([p, v]) => `${p}:${v}`).join(";")
+                  );
+                  const remaining = elClasses.filter((c) => !consumedClasses.has(c));
+                  if (remaining.length > 0)
+                    el.attributes.class = remaining.join(" ");
+                  else
+                    delete el.attributes.class;
+                  if (el.attributes.viewbox) {
+                    el.attributes.viewBox = el.attributes.viewbox;
+                    delete el.attributes.viewbox;
+                  }
+                });
+                template = renderSync(doc).replace(RE_WRAPPER_DIV_START, "").replace(RE_WRAPPER_DIV_END, "");
+                hasChanges = true;
+              }
+            }
+            for (const styleBlock of descriptor.styles) {
+              const styleStart = code.indexOf(styleBlock.loc.source) - "<style".length;
+              const fullTagStart = code.lastIndexOf("<style", styleStart + "<style".length);
+              const fullTagEnd = code.indexOf("</style>", styleStart) + "</style>".length;
+              if (fullTagStart >= 0 && fullTagEnd > fullTagStart) {
+                s.remove(fullTagStart, fullTagEnd);
+              }
             }
           }
         }
+        if (options.onFontRequirements) {
+          extractFontRequirementsFromVue(code).then((reqs) => {
+            options.onFontRequirements(id, reqs);
+          });
+        }
+        if (!hasChanges)
+          return;
+        s.overwrite(templateStart, templateEnd, template);
+        return {
+          code: s.toString(),
+          map: s.generateMap({ hires: true })
+        };
       }
-      if (options.onFontRequirements) {
-        extractFontRequirementsFromVue(code).then((reqs) => {
-          options.onFontRequirements(id, reqs);
-        });
-      }
-      if (!hasChanges)
-        return;
-      s.overwrite(templateStart, templateEnd, template);
-      return {
-        code: s.toString(),
-        map: s.generateMap({ hires: true })
-      };
     }
   };
 });
@@ -4145,94 +4293,99 @@ const BUILTIN_COMPONENTS = /* @__PURE__ */ new Set([
 const MAX_IMPORT_REWRITE_DEPTH = 5;
 const RE_OG_IMAGE_QUERY = /\?og-image(?:-depth=(\d+))?$/;
 const RE_VUE_IMPORT = /import\s+(\w+)\s+from\s+(['"])(.+?\.vue)\2/g;
+const RE_VUE_ID = /\.vue(?:\?|$)/;
 const ComponentImportRewritePlugin = createUnplugin((options) => {
   return {
     name: "nuxt-og-image:component-import-rewrite",
     enforce: "pre",
-    transformInclude(id) {
-      const depthMatch = id.match(RE_OG_IMAGE_QUERY);
-      if (depthMatch) {
-        const depth = depthMatch[1] ? Number.parseInt(depthMatch[1]) : 0;
-        return depth < MAX_IMPORT_REWRITE_DEPTH;
-      }
-      if (!id.endsWith(".vue"))
-        return false;
-      return options.ogComponentPaths.some((dir) => id.startsWith(`${dir}/`) || id.startsWith(`${dir}\\`));
-    },
-    transform(code, rawId) {
-      const depthMatch = rawId.match(RE_OG_IMAGE_QUERY);
-      const currentDepth = depthMatch?.[1] ? Number.parseInt(depthMatch[1]) : 0;
-      const nextQuery = `?og-image-depth=${currentDepth + 1}`;
-      const { descriptor } = parse(code);
-      if (!descriptor.template?.ast) {
-        return;
-      }
-      const usedComponents = /* @__PURE__ */ new Set();
-      walkTemplateAst(descriptor.template.ast.children, (node) => {
-        if (node.type === 1 && !HTML_ELEMENTS.has(node.tag) && !BUILTIN_COMPONENTS.has(node.tag)) {
-          usedComponents.add(node.tag);
+    transform: {
+      filter: {
+        id: RE_VUE_ID
+      },
+      handler(code, rawId) {
+        const depthMatch = rawId.match(RE_OG_IMAGE_QUERY);
+        const currentDepth = depthMatch?.[1] ? Number.parseInt(depthMatch[1]) : 0;
+        if (depthMatch) {
+          if (currentDepth >= MAX_IMPORT_REWRITE_DEPTH)
+            return;
+        } else {
+          if (!rawId.endsWith(".vue"))
+            return;
+          if (!options.ogComponentPaths.some((dir) => rawId.startsWith(`${dir}/`) || rawId.startsWith(`${dir}\\`)))
+            return;
         }
-      });
-      if (usedComponents.size === 0) {
-        return;
-      }
-      const components = options.getComponents();
-      const newImports = [];
-      for (const tag of usedComponents) {
-        if (tag === "Icon" || tag === "UIcon")
-          continue;
-        const match = components.find((c) => c.pascalName === tag || c.kebabName === tag);
-        if (match?.filePath && match.filePath.endsWith(".vue")) {
-          newImports.push({ name: tag, filePath: match.filePath });
+        const nextQuery = `?og-image-depth=${currentDepth + 1}`;
+        const { descriptor } = parse(code);
+        if (!descriptor.template?.ast) {
+          return;
         }
-      }
-      if (newImports.length === 0) {
-        return;
-      }
-      const s = new MagicString(code);
-      const rewritten = /* @__PURE__ */ new Set();
-      const scriptBlock = descriptor.scriptSetup || descriptor.script;
-      if (scriptBlock) {
-        const scriptStart = scriptBlock.loc.start.offset;
-        const scriptContent = scriptBlock.content;
-        for (const m of scriptContent.matchAll(RE_VUE_IMPORT)) {
-          const importName = m[1];
-          if (newImports.some((i) => i.name === importName)) {
-            const source = m[3];
-            const matchStart = scriptStart + m.index + m[0].indexOf(source);
-            s.overwrite(matchStart, matchStart + source.length, `${source}${nextQuery}`);
-            rewritten.add(importName);
+        const usedComponents = /* @__PURE__ */ new Set();
+        walkTemplateAst(descriptor.template.ast.children, (node) => {
+          if (node.type === 1 && !HTML_ELEMENTS.has(node.tag) && !BUILTIN_COMPONENTS.has(node.tag)) {
+            usedComponents.add(node.tag);
           }
+        });
+        if (usedComponents.size === 0) {
+          return;
         }
-      }
-      const imports = newImports.filter((i) => !rewritten.has(i.name));
-      if (imports.length === 0) {
-        return {
-          code: s.toString(),
-          map: s.generateMap({ hires: true })
-        };
-      }
-      const importStatements = imports.map((i) => `import ${i.name} from '${i.filePath}${nextQuery}'`).join("\n");
-      if (descriptor.scriptSetup) {
-        const scriptSetupStart = code.indexOf("<script setup");
-        const tagEnd = code.indexOf(">", scriptSetupStart) + 1;
-        s.appendRight(tagEnd, `
+        const components = options.getComponents();
+        const newImports = [];
+        for (const tag of usedComponents) {
+          if (tag === "Icon" || tag === "UIcon")
+            continue;
+          const match = components.find((c) => c.pascalName === tag || c.kebabName === tag);
+          if (match?.filePath && match.filePath.endsWith(".vue")) {
+            newImports.push({ name: tag, filePath: match.filePath });
+          }
+        }
+        if (newImports.length === 0) {
+          return;
+        }
+        const s = new MagicString(code);
+        const rewritten = /* @__PURE__ */ new Set();
+        const scriptBlock = descriptor.scriptSetup || descriptor.script;
+        if (scriptBlock) {
+          const scriptStart = scriptBlock.loc.start.offset;
+          const scriptContent = scriptBlock.content;
+          for (const m of scriptContent.matchAll(RE_VUE_IMPORT)) {
+            const importName = m[1];
+            if (newImports.some((i) => i.name === importName)) {
+              const source = m[3];
+              const matchStart = scriptStart + m.index + m[0].indexOf(source);
+              s.overwrite(matchStart, matchStart + source.length, `${source}${nextQuery}`);
+              rewritten.add(importName);
+            }
+          }
+        }
+        const imports = newImports.filter((i) => !rewritten.has(i.name));
+        if (imports.length === 0) {
+          return {
+            code: s.toString(),
+            map: s.generateMap({ hires: true })
+          };
+        }
+        const importStatements = imports.map((i) => `import ${i.name} from '${i.filePath}${nextQuery}'`).join("\n");
+        if (descriptor.scriptSetup) {
+          const scriptSetupStart = code.indexOf("<script setup");
+          const tagEnd = code.indexOf(">", scriptSetupStart) + 1;
+          s.appendRight(tagEnd, `
 ${importStatements}`);
-      } else if (descriptor.script) {
-        const scriptStart = code.indexOf("<script");
-        const tagEnd = code.indexOf(">", scriptStart) + 1;
-        s.appendRight(tagEnd, `
+        } else if (descriptor.script) {
+          const scriptStart = code.indexOf("<script");
+          const tagEnd = code.indexOf(">", scriptStart) + 1;
+          s.appendRight(tagEnd, `
 ${importStatements}`);
-      } else {
-        s.prepend(`<script setup>
+        } else {
+          s.prepend(`<script setup>
 ${importStatements}
 <\/script>
 `);
+        }
+        return {
+          code: s.toString(),
+          map: s.generateMap({ hires: true })
+        };
       }
-      return {
-        code: s.toString(),
-        map: s.generateMap({ hires: true })
-      };
     }
   };
 });
@@ -4790,6 +4943,10 @@ declare module '#og-image/renderers/takumi' {
   export default _default
 }
 
+declare module '#og-image/bindings/fetch' {
+  export { guardedFetch } from '${typesPath.replace("/types", "")}/server/og-image/bindings/fetch/web'
+}
+
 declare module '#og-image/emoji-transform' {
   import type { OgImageRenderEventContext } from '${typesPath}'
   export function getEmojiSvg(ctx: OgImageRenderEventContext, emoji: string): Promise<string | null>
@@ -4948,6 +5105,8 @@ const module$1 = defineNuxtModule({
       return;
     }
     const nitroCompatibility = setupNitroRuntimeCompatibility(nuxt);
+    if (nuxt.options.dev && nitroCompatibility._tag === "nitro-v2")
+      nuxt.options.nitro.noExternals ??= false;
     const setRuntimeAlias = (id, path) => {
       nuxt.options.alias[id] = path;
       nuxt.options.nitro.alias ||= {};
@@ -5032,6 +5191,7 @@ Or pin to a specific version in package.json:
     setRuntimeAlias("#og-image-cache", resolve("./runtime/server/og-image/cache/lru"));
     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);
@@ -5284,7 +5444,7 @@ ${familyInfo}`);
         }
       });
       if (!nuxt.options.dev) {
-        addBuildPlugin(TreeShakeComposablesPlugin, { server: true, client: true, build: true });
+        addBuildPlugin(TreeShakeComposablesPlugin, { server: true, client: true });
         setRuntimeAlias("#og-image-cache", resolve("./runtime/server/og-image/cache/mock"));
       }
     }
@@ -5447,6 +5607,9 @@ ${familyInfo}`);
       name: "getOgImagePath",
       from: resolve("./runtime/app/utils")
     });
+    addServerImports([
+      { name: "getOgImageUrl", from: resolve("./runtime/server/nitro") }
+    ]);
     const basePluginPath = `./runtime/app/plugins${config.zeroRuntime ? "/__zero-runtime" : ""}`;
     addPlugin({ mode: "server", src: resolve(`${basePluginPath}/route-rule-og-image.server`) });
     addPlugin({ mode: "server", src: resolve(`${basePluginPath}/og-image-canonical-urls.server`) });
@@ -5893,6 +6056,7 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
         colorPreference = colorModeOptions.fallback;
       if (!colorPreference || colorPreference === "system")
         colorPreference = "light";
+      const includeTwitter = config.includeTwitter ?? nuxt.options.seo?.automaticTwitterTags ?? true;
       const runtimeConfig = {
         version,
         // binding options
@@ -5902,6 +6066,7 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
         publicStoragePath: `root${publicDirAbs.replace(nuxt.options.rootDir, "").replaceAll("/", ":")}`,
         defaults: config.defaults,
         debug: config.debug,
+        includeTwitter,
         // avoid adding credentials
         baseCacheKey,
         buildCacheDir,
@@ -5943,6 +6108,7 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
         ...nuxt.options.runtimeConfig.public,
         "nuxt-og-image": {
           defaults: runtimeConfig.defaults,
+          includeTwitter: runtimeConfig.includeTwitter,
           hasServerRuntime: !nuxt.options._generate && !nuxt.options.nitro?.static
         }
       };