nuxt-og-image 6.0.6 → 6.1.0

package/dist/chunks/tw4.cjs

@@ -1,10 +1,11 @@
 'use strict';
 
 const promises = require('node:fs/promises');
+const node_url = require('node:url');
 const exsolve = require('exsolve');
 const pathe = require('pathe');
 const cssProvider = require('./css-provider.cjs');
-const module$1 = require('../shared/nuxt-og-image.BuMzAC1A.cjs');
+const module$1 = require('../shared/nuxt-og-image.CQzMjYCR.cjs');
 require('node:fs');
 require('@nuxt/kit');
 require('defu');
@@ -21,7 +22,6 @@ require('@nuxt/devtools-kit');
 require('unstorage');
 require('unstorage/drivers/fs-lite');
 require('../../dist/runtime/server/og-image/utils/css.js');
-require('node:url');
 require('magic-string');
 require('strip-literal');
 require('ufo');
@@ -56,11 +56,11 @@ function createModuleLoader(baseDir) {
   return async (id, base) => {
     const resolved = exsolve.resolveModulePath(id, { from: base || baseDir });
     if (resolved) {
-      const module2 = await import(resolved).then((m) => m.default || m);
+      const module2 = await import(node_url.pathToFileURL(resolved).href).then((m) => m.default || m);
       return { path: resolved, base: pathe.dirname(resolved), module: module2 };
     }
     const relativePath = pathe.join(base || baseDir, id);
-    const module = await import(relativePath).then((m) => m.default || m).catch(() => ({}));
+    const module = await import(node_url.pathToFileURL(relativePath).href).then((m) => m.default || m).catch(() => ({}));
     return { path: relativePath, base: pathe.dirname(relativePath), module };
   };
 }

package/dist/chunks/tw4.mjs

@@ -1,8 +1,9 @@
 import { readFile } from 'node:fs/promises';
+import { pathToFileURL } from 'node:url';
 import { resolveModulePath } from 'exsolve';
 import { dirname, join } from 'pathe';
 import { extractVariantBaseClasses, resolveVariantPrefixes } from './css-provider.mjs';
-import { g as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, l as loadLightningCss, e as extractCssVars, b as extractUniversalVars, c as extractPerClassVars, d as extractClassStyles } from '../shared/nuxt-og-image.BM_Slo30.mjs';
+import { g as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, l as loadLightningCss, e as extractCssVars, b as extractUniversalVars, c as extractPerClassVars, d as extractClassStyles } from '../shared/nuxt-og-image.8sPZ_PD5.mjs';
 import 'node:fs';
 import '@nuxt/kit';
 import 'defu';
@@ -19,7 +20,6 @@ import '@nuxt/devtools-kit';
 import 'unstorage';
 import 'unstorage/drivers/fs-lite';
 import '../../dist/runtime/server/og-image/utils/css.js';
-import 'node:url';
 import 'magic-string';
 import 'strip-literal';
 import 'ufo';
@@ -54,11 +54,11 @@ function createModuleLoader(baseDir) {
   return async (id, base) => {
     const resolved = resolveModulePath(id, { from: base || baseDir });
     if (resolved) {
-      const module2 = await import(resolved).then((m) => m.default || m);
+      const module2 = await import(pathToFileURL(resolved).href).then((m) => m.default || m);
       return { path: resolved, base: dirname(resolved), module: module2 };
     }
     const relativePath = join(base || baseDir, id);
-    const module = await import(relativePath).then((m) => m.default || m).catch(() => ({}));
+    const module = await import(pathToFileURL(relativePath).href).then((m) => m.default || m).catch(() => ({}));
     return { path: relativePath, base: dirname(relativePath), module };
   };
 }

package/dist/chunks/uno.cjs

@@ -4,9 +4,10 @@ const promises = require('node:fs/promises');
 const defu = require('defu');
 const logger_js = require('../../dist/runtime/logger.js');
 const cssProvider = require('./css-provider.cjs');
-const module$1 = require('../shared/nuxt-og-image.BuMzAC1A.cjs');
+const module$1 = require('../shared/nuxt-og-image.CQzMjYCR.cjs');
 require('exsolve');
 require('node:fs');
+require('node:url');
 require('@nuxt/kit');
 require('nuxt-site-config/kit');
 require('ohash');
@@ -21,7 +22,6 @@ require('@nuxt/devtools-kit');
 require('unstorage');
 require('unstorage/drivers/fs-lite');
 require('../../dist/runtime/server/og-image/utils/css.js');
-require('node:url');
 require('magic-string');
 require('strip-literal');
 require('ufo');

package/dist/chunks/uno.mjs

@@ -2,9 +2,10 @@ import { readFile } from 'node:fs/promises';
 import { defu } from 'defu';
 import { logger } from '../../dist/runtime/logger.js';
 import { extractVariantBaseClasses, resolveVariantPrefixes } from './css-provider.mjs';
-import { s as simplifyCss, e as extractCssVars, a as extractPropertyInitialValues, b as extractUniversalVars, c as extractPerClassVars, d as extractClassStyles, p as postProcessStyles, f as extractVarsFromCss, r as resolveExtractedVars } from '../shared/nuxt-og-image.BM_Slo30.mjs';
+import { s as simplifyCss, e as extractCssVars, a as extractPropertyInitialValues, b as extractUniversalVars, c as extractPerClassVars, d as extractClassStyles, p as postProcessStyles, f as extractVarsFromCss, r as resolveExtractedVars } from '../shared/nuxt-og-image.8sPZ_PD5.mjs';
 import 'exsolve';
 import 'node:fs';
+import 'node:url';
 import '@nuxt/kit';
 import 'nuxt-site-config/kit';
 import 'ohash';
@@ -19,7 +20,6 @@ import '@nuxt/devtools-kit';
 import 'unstorage';
 import 'unstorage/drivers/fs-lite';
 import '../../dist/runtime/server/og-image/utils/css.js';
-import 'node:url';
 import 'magic-string';
 import 'strip-literal';
 import 'ufo';

package/dist/cli.cjs

@@ -40,6 +40,10 @@ const RE_EXCLUDE_OUTPUT = /\.output/;
 const RE_EXCLUDE_DATA = /\.data/;
 const RE_EXCLUDE_DIST = /dist/;
 const RE_VUE_OR_SCRIPT = /\.(?:vue|ts|tsx|js|jsx)$/;
+const RE_PASCAL_CASE_STRICT = /^[A-Z]\w*$/;
+const RE_PASCAL_CASE_START = /^[A-Z]/;
+const RE_SCRIPT_SETUP = /<script\s+setup[^>]*>\r?\n?/;
+const RE_PATH_SEPARATOR = /[\\/]|\.\./;
 const DEPRECATED_COMPOSABLE_NAMES = /* @__PURE__ */ new Set([
   "defineOgImageComponent",
   "defineOgImageStatic",
@@ -204,10 +208,13 @@ function hasChromiumSuffix(filename) {
   return RE_CHROMIUM_SUFFIX.test(filename);
 }
 function listTemplates() {
-  const templates = fs.readdirSync(communityDir).filter((f) => f.endsWith(".vue")).map(getBaseName);
-  console.log("\nAvailable community templates:");
-  templates.forEach((t) => console.log(`  - ${t}`));
-  console.log("\nUsage: npx nuxt-og-image eject <template-name>\n");
+  const templates = [...new Set(
+    fs.readdirSync(communityDir).filter((f) => f.endsWith(".vue")).map(getBaseName)
+  )];
+  p__namespace.intro("Community Templates");
+  p__namespace.note(templates.map((t) => `\u2022 ${t}`).join("\n"), "Available");
+  p__namespace.log.info("Usage: npx nuxt-og-image eject <template-name>");
+  p__namespace.outro("");
 }
 function findTemplateFile(name) {
   const files = fs.readdirSync(communityDir).filter((f) => f.endsWith(".vue"));
@@ -799,6 +806,439 @@ async function runMigrate(args2) {
   }
   p__namespace.outro(dryRun ? "Dry run complete" : "Migration complete!");
 }
+async function runSwitch(args2) {
+  const dryRun = args2.includes("--dry-run") || args2.includes("-d");
+  const skipConfirm = args2.includes("--yes") || args2.includes("-y");
+  const fromIdx = args2.indexOf("--from");
+  const toIdx = args2.indexOf("--to");
+  const cliFrom = fromIdx !== -1 ? args2[fromIdx + 1] : null;
+  const cliTo = toIdx !== -1 ? args2[toIdx + 1] : null;
+  const validRenderers = RENDERERS.map((r) => r.name);
+  if (cliFrom && !validRenderers.includes(cliFrom)) {
+    p__namespace.log.error(`Invalid --from renderer: ${cliFrom}. Must be ${validRenderers.join(", ")}`);
+    process.exit(1);
+  }
+  if (cliTo && !validRenderers.includes(cliTo)) {
+    p__namespace.log.error(`Invalid --to renderer: ${cliTo}. Must be ${validRenderers.join(", ")}`);
+    process.exit(1);
+  }
+  p__namespace.intro("Switch OG Image renderer");
+  const cwd = process.cwd();
+  const dirs = [cwd];
+  if (fs.existsSync(pathe.join(cwd, "app")))
+    dirs.push(pathe.join(cwd, "app"));
+  const layersDir = pathe.join(cwd, "layers");
+  if (fs.existsSync(layersDir)) {
+    const layerDirs = fs.readdirSync(layersDir, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => pathe.join(layersDir, d.name));
+    dirs.push(...layerDirs);
+  }
+  const allComponents = [];
+  for (const dir of dirs) {
+    const components = findOgImageComponents(dir);
+    for (const filepath of components) {
+      const match = pathe.basename(filepath).match(RE_RENDERER_SUFFIX);
+      if (match) {
+        allComponents.push({ path: filepath, renderer: match[1] });
+      }
+    }
+  }
+  if (allComponents.length === 0) {
+    p__namespace.log.warn("No OG image components with renderer suffixes found.");
+    p__namespace.outro("Nothing to do");
+    return;
+  }
+  const currentRenderers = [...new Set(allComponents.map((c) => c.renderer))];
+  p__namespace.log.info(`Found ${allComponents.length} component(s) using: ${currentRenderers.join(", ")}`);
+  let fromRenderer;
+  if (cliFrom) {
+    fromRenderer = cliFrom;
+  } else if (skipConfirm) {
+    if (currentRenderers.length === 1) {
+      fromRenderer = currentRenderers[0];
+    } else {
+      p__namespace.log.error("Multiple renderers detected. Use --from to specify which to migrate.");
+      process.exit(1);
+    }
+  } else {
+    const fromSelection = await p__namespace.select({
+      message: "Which renderer do you want to migrate from?",
+      options: currentRenderers.map((r) => ({
+        value: r,
+        label: RENDERERS.find((rd) => rd.name === r)?.label || r
+      })),
+      initialValue: currentRenderers[0]
+    });
+    if (p__namespace.isCancel(fromSelection)) {
+      p__namespace.cancel("Cancelled");
+      process.exit(0);
+    }
+    fromRenderer = fromSelection;
+  }
+  let toRenderer;
+  if (cliTo) {
+    toRenderer = cliTo;
+  } else if (skipConfirm) {
+    toRenderer = fromRenderer === "takumi" ? "satori" : "takumi";
+  } else {
+    const targetOptions = RENDERERS.filter((r) => r.name !== fromRenderer);
+    const toSelection = await p__namespace.select({
+      message: "Which renderer do you want to switch to?",
+      options: targetOptions.map((r) => ({
+        value: r.name,
+        label: r.label,
+        hint: r.description
+      })),
+      initialValue: targetOptions[0]?.name
+    });
+    if (p__namespace.isCancel(toSelection)) {
+      p__namespace.cancel("Cancelled");
+      process.exit(0);
+    }
+    toRenderer = toSelection;
+  }
+  if (fromRenderer === toRenderer) {
+    p__namespace.log.warn(`Source and target renderer are the same (${fromRenderer}).`);
+    p__namespace.outro("Nothing to do");
+    return;
+  }
+  const toMigrate = allComponents.filter((c) => c.renderer === fromRenderer);
+  if (toMigrate.length === 0) {
+    p__namespace.log.warn(`No components using ${fromRenderer} renderer found.`);
+    p__namespace.outro("Nothing to do");
+    return;
+  }
+  p__namespace.note(
+    toMigrate.map((c) => `${pathe.relative(cwd, c.path)} \u2192 ${pathe.basename(c.path).replace(`.${fromRenderer}.vue`, `.${toRenderer}.vue`)}`).join("\n"),
+    `Renaming ${toMigrate.length} component(s): ${fromRenderer} \u2192 ${toRenderer}`
+  );
+  if (dryRun) {
+    p__namespace.log.warn("[Dry run mode, no changes will be made]");
+    p__namespace.outro("Dry run complete");
+    return;
+  }
+  if (!skipConfirm) {
+    const confirmed = await p__namespace.confirm({
+      message: `Rename ${toMigrate.length} component(s) from ${fromRenderer} to ${toRenderer}?`,
+      initialValue: true
+    });
+    if (p__namespace.isCancel(confirmed) || !confirmed) {
+      p__namespace.cancel("Cancelled");
+      process.exit(0);
+    }
+  }
+  const conflicts = [];
+  for (const component of toMigrate) {
+    const newPath = component.path.replace(`.${fromRenderer}.vue`, `.${toRenderer}.vue`);
+    if (fs.existsSync(newPath))
+      conflicts.push(`${pathe.basename(component.path)} \u2192 ${pathe.basename(newPath)} (already exists)`);
+  }
+  if (conflicts.length > 0) {
+    p__namespace.log.error("Conflicts detected, aborting:");
+    for (const c of conflicts) p__namespace.log.error(`  ${c}`);
+    process.exit(1);
+  }
+  for (const component of toMigrate) {
+    const newPath = component.path.replace(`.${fromRenderer}.vue`, `.${toRenderer}.vue`);
+    fs.renameSync(component.path, newPath);
+    p__namespace.log.success(`${pathe.basename(component.path)} \u2192 ${pathe.basename(newPath)}`);
+  }
+  const hasPkg = fs.existsSync(pathe.join(cwd, "package.json"));
+  if (hasPkg) {
+    const noFromComponentsRemaining = allComponents.filter((c) => c.renderer === fromRenderer).length === toMigrate.length;
+    const detectedPreset = await detectDeploymentTarget(cwd);
+    const isEdge = detectedPreset ? EDGE_PRESETS.includes(detectedPreset) : false;
+    if (detectedPreset)
+      p__namespace.log.info(`Detected deployment target: ${detectedPreset}`);
+    const manageDeps = skipConfirm || await p__namespace.confirm({
+      message: `Manage dependencies? (install ${toRenderer}, ${noFromComponentsRemaining ? `remove ${fromRenderer}` : "keep existing"})`,
+      initialValue: true
+    }).then((v) => !p__namespace.isCancel(v) && v);
+    if (manageDeps) {
+      if (noFromComponentsRemaining) {
+        const oldDeps = [.../* @__PURE__ */ new Set([...getRendererDeps(fromRenderer, false), ...getRendererDeps(fromRenderer, true)])];
+        const newDeps = /* @__PURE__ */ new Set([...getRendererDeps(toRenderer, false), ...getRendererDeps(toRenderer, true)]);
+        const toRemove = oldDeps.filter((d) => !newDeps.has(d));
+        if (toRemove.length > 0) {
+          const pm = await nypm.detectPackageManager(cwd);
+          const spinner2 = p__namespace.spinner();
+          spinner2.start(`Removing ${fromRenderer} dependencies...`);
+          for (const dep of toRemove) {
+            await nypm.removeDependency(dep, { cwd }).catch(() => p__namespace.log.warn(`Could not remove ${dep}, remove manually: ${pm?.name || "npm"} remove ${dep}`));
+          }
+          spinner2.stop(`Removed ${fromRenderer} dependencies`);
+        }
+      }
+      await installRendererDeps([toRenderer], isEdge);
+    }
+    const spinner = p__namespace.spinner();
+    spinner.start("Running nuxt prepare to update types...");
+    const { exec } = await import('tinyexec');
+    try {
+      await exec("npx", ["nuxi", "prepare"], { nodeOptions: { cwd } });
+      spinner.stop("Types updated");
+    } catch {
+      spinner.stop("Failed to run nuxt prepare");
+      p__namespace.log.warn("Run manually: npx nuxt prepare");
+    }
+  }
+  p__namespace.outro("Renderer switch complete!");
+}
+function readPackageJson(cwd) {
+  const pkgPath = pathe.join(cwd, "package.json");
+  if (!fs.existsSync(pkgPath))
+    return null;
+  try {
+    return JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+function inferRenderer(cwd) {
+  const dirs = [cwd];
+  if (fs.existsSync(pathe.join(cwd, "app")))
+    dirs.push(pathe.join(cwd, "app"));
+  for (const dir of dirs) {
+    const components = findOgImageComponents(dir);
+    for (const filepath of components) {
+      const match = pathe.basename(filepath).match(RE_RENDERER_SUFFIX);
+      if (match)
+        return match[1];
+    }
+  }
+  const pkg = readPackageJson(cwd);
+  if (pkg) {
+    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (allDeps["@takumi-rs/core"] || allDeps["@takumi-rs/wasm"])
+      return "takumi";
+    if (allDeps.satori)
+      return "satori";
+  }
+  return null;
+}
+function detectCssFramework(cwd) {
+  const pkg = readPackageJson(cwd);
+  if (!pkg)
+    return "none";
+  const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+  if (allDeps["@unocss/nuxt"] || allDeps.unocss)
+    return "unocss";
+  if (allDeps["@nuxtjs/tailwindcss"] || allDeps.tailwindcss || allDeps["@nuxt/ui"])
+    return "tailwind";
+  return "none";
+}
+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 insertDefineOgImage(filePath, componentName) {
+  if (!fs.existsSync(filePath))
+    return false;
+  const content = fs.readFileSync(filePath, "utf-8");
+  if (content.includes("defineOgImage"))
+    return false;
+  const call = `defineOgImage('${componentName}', { title: 'Hello' })`;
+  const scriptSetupMatch = content.match(RE_SCRIPT_SETUP);
+  if (scriptSetupMatch) {
+    const insertPos = scriptSetupMatch.index + scriptSetupMatch[0].length;
+    const updated2 = `${content.slice(0, insertPos)}${call}
+${content.slice(insertPos)}`;
+    fs.writeFileSync(filePath, updated2, "utf-8");
+    return true;
+  }
+  const updated = `<script setup lang="ts">
+${call}
+<\/script>
+
+${content}`;
+  fs.writeFileSync(filePath, updated, "utf-8");
+  return true;
+}
+async function runCreate(name, args2) {
+  const cwd = process.cwd();
+  const rendererIdx = args2.indexOf("--renderer");
+  const cliRenderer = rendererIdx !== -1 ? args2[rendererIdx + 1] : null;
+  if (cliRenderer && !RENDERERS.some((r) => r.name === cliRenderer)) {
+    p__namespace.log.error(`Invalid renderer: ${cliRenderer}. Must be ${RENDERERS.map((r) => r.name).join(", ")}`);
+    process.exit(1);
+  }
+  const pathIdx = args2.indexOf("--path");
+  const cliPath = pathIdx !== -1 ? args2[pathIdx + 1] : null;
+  p__namespace.intro("Create OG Image Component");
+  const validateName = (v) => {
+    const trimmed = v?.trim();
+    if (!trimmed)
+      return "Name is required";
+    if (RE_PATH_SEPARATOR.test(trimmed))
+      return 'Name must not contain path separators or ".."';
+    if (!RE_PASCAL_CASE_STRICT.test(trimmed))
+      return "Must be PascalCase (e.g. MyOgImage)";
+  };
+  let componentName = name;
+  if (!componentName) {
+    const input = await p__namespace.text({
+      message: "Component name:",
+      placeholder: "MyOgImage",
+      validate: validateName
+    });
+    if (p__namespace.isCancel(input)) {
+      p__namespace.cancel("Cancelled");
+      process.exit(0);
+    }
+    componentName = input.trim();
+  } else {
+    componentName = componentName.trim();
+    if (!RE_PASCAL_CASE_START.test(componentName))
+      componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+    const err = validateName(componentName);
+    if (err) {
+      p__namespace.log.error(err);
+      process.exit(1);
+    }
+  }
+  let renderer;
+  if (cliRenderer) {
+    renderer = cliRenderer;
+  } else {
+    const inferred = inferRenderer(cwd);
+    if (inferred) {
+      renderer = inferred;
+      p__namespace.log.info(`Inferred renderer: ${renderer}`);
+    } else {
+      const selection = await p__namespace.select({
+        message: "Which renderer?",
+        options: RENDERERS.map((r) => ({
+          value: r.name,
+          label: r.label,
+          hint: r.description
+        })),
+        initialValue: "takumi"
+      });
+      if (p__namespace.isCancel(selection)) {
+        p__namespace.cancel("Cancelled");
+        process.exit(0);
+      }
+      renderer = selection;
+    }
+  }
+  const css = detectCssFramework(cwd);
+  if (css !== "none")
+    p__namespace.log.info(`Detected CSS framework: ${css}`);
+  const baseDir = fs.existsSync(pathe.join(cwd, "app")) ? pathe.join(cwd, "app") : cwd;
+  const outputDir = cliPath ? pathe.resolve(cwd, cliPath) : pathe.resolve(baseDir, "components", "OgImage");
+  if (!outputDir.startsWith(cwd)) {
+    p__namespace.log.error("Output path must be within the project directory");
+    process.exit(1);
+  }
+  if (!fs.existsSync(outputDir))
+    fs.mkdirSync(outputDir, { recursive: true });
+  const filename = `${componentName}.${renderer}.vue`;
+  const outputPath = pathe.join(outputDir, filename);
+  if (fs.existsSync(outputPath)) {
+    p__namespace.log.error(`File already exists: ${pathe.relative(cwd, outputPath)}`);
+    process.exit(1);
+  }
+  const template = getStarterTemplate(renderer, css);
+  fs.writeFileSync(outputPath, template, "utf-8");
+  p__namespace.log.success(`Created ${pathe.relative(cwd, outputPath)}`);
+  const pagesDir = fs.existsSync(pathe.join(baseDir, "pages")) ? pathe.join(baseDir, "pages") : null;
+  if (pagesDir) {
+    const pageInput = await p__namespace.text({
+      message: "Add defineOgImage to a page? (relative path from pages/, leave empty to skip)",
+      placeholder: "index.vue"
+    });
+    if (!p__namespace.isCancel(pageInput) && pageInput && pageInput.trim()) {
+      let pagePath = pageInput.trim();
+      if (!pagePath.endsWith(".vue"))
+        pagePath += ".vue";
+      const fullPagePath = pathe.resolve(pagesDir, pagePath);
+      if (!fullPagePath.startsWith(pagesDir)) {
+        p__namespace.log.warn("Page path must be within the pages directory");
+      } else if (insertDefineOgImage(fullPagePath, componentName)) {
+        p__namespace.log.success(`Added defineOgImage('${componentName}') to ${pathe.relative(cwd, fullPagePath)}`);
+      } else if (!fs.existsSync(fullPagePath)) {
+        p__namespace.log.warn(`Page not found: ${pathe.relative(cwd, fullPagePath)}`);
+      } else {
+        p__namespace.log.info("Page already has defineOgImage, skipped");
+      }
+    }
+  }
+  p__namespace.log.info(`Usage: defineOgImage('${componentName}', { title: 'Hello' })`);
+  p__namespace.outro("");
+}
 async function runEnable(renderer, args2) {
   const def = RENDERERS.find((r) => r.name === renderer);
   if (!def) {
@@ -824,9 +1264,30 @@ async function runEnable(renderer, args2) {
   await installRendererDeps([renderer], isEdge);
   p__namespace.outro("Done");
 }
+function showHelp() {
+  p__namespace.intro("nuxt-og-image CLI");
+  p__namespace.note([
+    "create [name]     Scaffold a new OG image component",
+    "                  Options: --renderer <renderer>, --path <dir>",
+    "list              List available community templates",
+    "eject <name>      Eject a community template to your project",
+    "switch            Switch components between renderers",
+    "                  Options: --from <renderer>, --to <renderer>, --dry-run, --yes",
+    "enable <renderer> Install dependencies for a renderer (satori, browser, takumi)",
+    "                  Options: --edge (install wasm versions for edge runtimes)",
+    "migrate v6        Migrate to v6 (component suffixes + new API)",
+    "                  Options: --dry-run, --yes, --renderer <renderer>"
+  ].join("\n"), "Commands");
+  p__namespace.outro("");
+}
 const args = process.argv.slice(2);
 const command = args[0];
-if (command === "eject") {
+const hasHelp = args.includes("--help") || args.includes("-h");
+if (hasHelp || !command) {
+  showHelp();
+} else if (command === "create") {
+  runCreate(args[1], args.slice(1));
+} else if (command === "eject") {
   const templateName = args[1];
   if (!templateName) {
     p__namespace.log.error("Please specify a template name.");
@@ -845,6 +1306,8 @@ if (command === "eject") {
     process.exit(1);
   }
   runMigrate(args);
+} else if (command === "switch") {
+  runSwitch(args.slice(1));
 } else if (command === "enable") {
   const renderer = args[1];
   if (!renderer) {
@@ -854,12 +1317,7 @@ if (command === "eject") {
   }
   runEnable(renderer, args);
 } else {
-  console.log("nuxt-og-image CLI\n");
-  console.log("Commands:");
-  console.log("  list              List available community templates");
-  console.log("  eject <name>      Eject a community template to your project");
-  console.log("  migrate v6        Migrate to v6 (component suffixes + new API)");
-  console.log("                    Options: --dry-run, --yes, --renderer <satori|browser|takumi>");
-  console.log("  enable <renderer> Install dependencies for a renderer (satori, browser, takumi)");
-  console.log("                    Options: --edge (install wasm versions for edge runtimes)");
+  p__namespace.log.error(`Unknown command: ${command}`);
+  showHelp();
+  process.exit(1);
 }