@christophervr/pptx-viewer 1.5.9 → 1.7.0

package/dist/cli.mjs

@@ -0,0 +1,1641 @@
+#!/usr/bin/env node
+
+// src/colors.ts
+var isColorEnabled = process.env.NO_COLOR === void 0 && (process.env.FORCE_COLOR !== void 0 || Boolean(process.stdout.isTTY));
+function wrap(open, close) {
+  return (text) => isColorEnabled ? `\x1B[${open}m${text}\x1B[${close}m` : text;
+}
+var bold = wrap(1, 22);
+var dim = wrap(2, 22);
+var red = wrap(31, 39);
+var green = wrap(32, 39);
+var yellow = wrap(33, 39);
+var blue = wrap(34, 39);
+var magenta = wrap(35, 39);
+var cyan = wrap(36, 39);
+var gray = wrap(90, 39);
+function isUnicodeSupported() {
+  if (process.platform !== "win32") {
+    return true;
+  }
+  return Boolean(process.env.CI) || Boolean(process.env.WT_SESSION) || Boolean(process.env.ConEmuTask) || process.env.TERM_PROGRAM === "vscode" || process.env.TERM === "xterm-256color";
+}
+var symbols = isUnicodeSupported() ? { pointer: "\u276F", check: "\u2714", cross: "\u2718", radioOn: "\u25C9", radioOff: "\u25EF", bullet: "\xB7" } : { pointer: ">", check: "\u221A", cross: "\xD7", radioOn: "(*)", radioOff: "( )", bullet: "*" };
+
+// src/orchestrate.ts
+import { existsSync as existsSync4 } from "fs";
+
+// src/args.ts
+var KNOWN_PMS = ["bun", "pnpm", "yarn", "npm"];
+function readFlagValue(args, index, flag) {
+  const value = args[index + 1];
+  if (!value) {
+    throw new Error(`${flag} needs a value`);
+  }
+  return value;
+}
+function parseArgs(args) {
+  const parsed = { help: false, yes: false, scaffold: false };
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    switch (arg) {
+      case "--help":
+      case "-h":
+        parsed.help = true;
+        break;
+      case "--yes":
+      case "-y":
+        parsed.yes = true;
+        break;
+      case "--scaffold":
+        parsed.scaffold = true;
+        break;
+      case "--target":
+        parsed.target = readFlagValue(args, i, arg);
+        i++;
+        break;
+      case "--dir":
+        parsed.dir = readFlagValue(args, i, arg);
+        i++;
+        break;
+      case "--pm": {
+        const value = readFlagValue(args, i, arg);
+        if (!KNOWN_PMS.includes(value)) {
+          throw new Error(`--pm must be one of: ${KNOWN_PMS.join(", ")}`);
+        }
+        parsed.pm = value;
+        i++;
+        break;
+      }
+      default:
+        throw new Error(`Unknown option: ${arg}`);
+    }
+  }
+  return parsed;
+}
+
+// src/project-deps.ts
+import { existsSync, readFileSync } from "fs";
+import { join } from "path";
+function readJson(path) {
+  if (!existsSync(path)) {
+    return null;
+  }
+  try {
+    return JSON.parse(readFileSync(path, "utf8"));
+  } catch {
+    return null;
+  }
+}
+function findInstalledVersion(cwd, pkgName) {
+  const resolved = readJson(join(cwd, "node_modules", pkgName, "package.json"));
+  if (resolved?.version) {
+    return { version: resolved.version, source: "resolved" };
+  }
+  const projectPkg = readJson(join(cwd, "package.json"));
+  if (!projectPkg) {
+    return null;
+  }
+  const declared = projectPkg.dependencies?.[pkgName] ?? projectPkg.devDependencies?.[pkgName] ?? projectPkg.peerDependencies?.[pkgName];
+  return declared ? { version: declared, source: "declared" } : null;
+}
+
+// src/semver.ts
+function extractMajor(version) {
+  const match = /(?<major>\d+)\.\d+\.\d+/u.exec(version);
+  if (!match?.groups) {
+    return null;
+  }
+  return Number.parseInt(match.groups.major, 10);
+}
+
+// src/compat.ts
+function checkCompat(cwd, target) {
+  if (!target.compat) {
+    return { compatible: true, message: null };
+  }
+  const installed = findInstalledVersion(cwd, target.compat.peerPackage);
+  if (!installed) {
+    return { compatible: true, message: null };
+  }
+  const major = extractMajor(installed.version);
+  if (major === null || target.compat.requiredMajors.includes(major)) {
+    return { compatible: true, message: null };
+  }
+  const sourceLabel = installed.source === "resolved" ? "installed" : "declared in package.json";
+  const supported = target.compat.requiredMajors.map((m) => `^${m}`).join(" or ");
+  return {
+    compatible: false,
+    message: `Detected ${target.compat.peerPackage}@${installed.version} (${sourceLabel}) in this project, but ${target.label} requires ${target.compat.peerPackage}@${supported}. Continuing may change your ${target.compat.peerPackage} version.`
+  };
+}
+
+// src/package-manager.ts
+import { existsSync as existsSync2 } from "fs";
+import { join as join2 } from "path";
+var LOCKFILES = {
+  "bun.lock": "bun",
+  "bun.lockb": "bun",
+  "pnpm-lock.yaml": "pnpm",
+  "yarn.lock": "yarn",
+  "package-lock.json": "npm"
+};
+function detectPackageManager(cwd) {
+  for (const [file, pm] of Object.entries(LOCKFILES)) {
+    if (existsSync2(join2(cwd, file))) {
+      return pm;
+    }
+  }
+  const userAgent = process.env.npm_config_user_agent ?? "";
+  if (userAgent.startsWith("bun")) {
+    return "bun";
+  }
+  if (userAgent.startsWith("pnpm")) {
+    return "pnpm";
+  }
+  if (userAgent.startsWith("yarn")) {
+    return "yarn";
+  }
+  return "npm";
+}
+function installCommand(pm, packages) {
+  switch (pm) {
+    case "bun":
+      return ["bun", ["add", ...packages]];
+    case "pnpm":
+      return ["pnpm", ["add", ...packages]];
+    case "yarn":
+      return ["yarn", ["add", ...packages]];
+    case "npm":
+      return ["npm", ["install", ...packages]];
+  }
+}
+
+// src/prompt.ts
+import { createInterface } from "readline/promises";
+
+// src/interactive-menu.ts
+import { emitKeypressEvents } from "readline";
+var HIDE_CURSOR = "\x1B[?25l";
+var SHOW_CURSOR = "\x1B[?25h";
+var CLEAR_LINE = "\x1B[2K";
+var ERASE_DOWN = "\x1B[0J";
+function moveUp(lines) {
+  return lines > 0 ? `\x1B[${lines}A` : "";
+}
+function isEnterKey(str, key) {
+  return key?.name === "return" || key?.name === "enter" || str === "\r" || str === "\n";
+}
+function renderChoice(choice, isCursor, checked) {
+  const pointer = isCursor ? cyan(symbols.pointer) : " ";
+  const box = checked === null ? "" : `${checked ? green(symbols.radioOn) : gray(symbols.radioOff)} `;
+  const label = isCursor ? bold(choice.label) : choice.label;
+  return `${pointer} ${box}${label} ${dim(`- ${choice.description}`)}`;
+}
+function groupMatesOf(choices, index) {
+  const group = choices[index].group;
+  if (!group) {
+    return [];
+  }
+  return choices.flatMap((c, i) => i !== index && c.group === group ? [i] : []);
+}
+function runMenu(choices, multi) {
+  return new Promise((resolve) => {
+    if (!process.stdin.isTTY || typeof process.stdin.setRawMode !== "function") {
+      resolve(null);
+      return;
+    }
+    let cursor = 0;
+    const checked = /* @__PURE__ */ new Set();
+    let statusMessage = "";
+    let settled = false;
+    const hint = multi ? dim("(\u2191/\u2193 move, space toggle, a select all, enter confirm)") : dim("(\u2191/\u2193 move, enter confirm)");
+    const totalLines = choices.length + 2;
+    process.stdout.write(HIDE_CURSOR);
+    function draw(first) {
+      if (!first) {
+        process.stdout.write(moveUp(totalLines));
+      }
+      process.stdout.write(`${CLEAR_LINE}${hint}
+`);
+      for (const [i, choice] of choices.entries()) {
+        const checkedState = multi ? checked.has(i) : null;
+        process.stdout.write(`${CLEAR_LINE}${renderChoice(choice, i === cursor, checkedState)}
+`);
+      }
+      process.stdout.write(`${CLEAR_LINE}${statusMessage}
+`);
+    }
+    function eraseWidget() {
+      process.stdout.write(moveUp(totalLines));
+      process.stdout.write(ERASE_DOWN);
+    }
+    function cleanup() {
+      process.stdin.setRawMode?.(false);
+      process.stdin.removeListener("keypress", onKeypress);
+      process.stdin.pause();
+      eraseWidget();
+      process.stdout.write(SHOW_CURSOR);
+    }
+    function finish(result) {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      cleanup();
+      resolve(result);
+    }
+    function check(index) {
+      for (const mate of groupMatesOf(choices, index)) {
+        checked.delete(mate);
+      }
+      checked.add(index);
+    }
+    function toggleSelectAll() {
+      const selectable = choices.flatMap((c, i) => c.group ? [] : [i]);
+      const allSelected = selectable.every((i) => checked.has(i));
+      for (const i of selectable) {
+        if (allSelected) {
+          checked.delete(i);
+        } else {
+          checked.add(i);
+        }
+      }
+    }
+    function onKeypress(str, key) {
+      if (key?.ctrl && key.name === "c") {
+        finish(null);
+        process.exit(130);
+        return;
+      }
+      statusMessage = "";
+      if (key?.name === "up") {
+        cursor = (cursor - 1 + choices.length) % choices.length;
+        draw(false);
+      } else if (key?.name === "down") {
+        cursor = (cursor + 1) % choices.length;
+        draw(false);
+      } else if (multi && key?.name === "space") {
+        if (checked.has(cursor)) {
+          checked.delete(cursor);
+        } else {
+          check(cursor);
+        }
+        draw(false);
+      } else if (multi && key?.name === "a") {
+        toggleSelectAll();
+        draw(false);
+      } else if (isEnterKey(str, key)) {
+        if (multi) {
+          if (checked.size > 0) {
+            finish([...checked].sort((a, b) => a - b));
+          } else {
+            statusMessage = dim("Select at least one option with space, then press enter.");
+            draw(false);
+          }
+        } else {
+          finish([cursor]);
+        }
+      }
+    }
+    emitKeypressEvents(process.stdin);
+    process.stdin.setRawMode(true);
+    process.stdin.on("keypress", onKeypress);
+    process.stdin.resume();
+    draw(true);
+  });
+}
+
+// src/prompt.ts
+function parseSelection(answer, count) {
+  const trimmed = answer.trim().toLowerCase();
+  if (trimmed === "all" || trimmed === "a") {
+    return Array.from({ length: count }, (_, i) => i);
+  }
+  const tokens = trimmed.split(/[,\s]+/u).filter(Boolean);
+  if (tokens.length === 0) {
+    return null;
+  }
+  const indices = /* @__PURE__ */ new Set();
+  for (const token of tokens) {
+    const n = Number.parseInt(token, 10);
+    if (!Number.isInteger(n) || n < 1 || n > count) {
+      return null;
+    }
+    indices.add(n - 1);
+  }
+  return [...indices].sort((a, b) => a - b);
+}
+function printOptions(options) {
+  options.forEach((opt, i) => {
+    console.log(`  ${cyan(`${i + 1})`)} ${bold(opt.label)} ${dim(`- ${opt.description}`)}`);
+  });
+}
+async function selectByNumber(options) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  try {
+    printOptions(options);
+    for (; ; ) {
+      const answer = (await rl.question(`
+Enter a number (1-${options.length}): `)).trim();
+      const index = Number.parseInt(answer, 10) - 1;
+      if (Number.isInteger(index) && index >= 0 && index < options.length) {
+        return options[index];
+      }
+      console.log(`Please enter a number between 1 and ${options.length}.`);
+    }
+  } finally {
+    rl.close();
+  }
+}
+async function selectManyByNumber(options) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  try {
+    printOptions(options);
+    for (; ; ) {
+      const answer = await rl.question(
+        `
+Enter one or more numbers, comma-separated (e.g. "1,3"), or "all": `
+      );
+      const indices = parseSelection(answer, options.length);
+      if (indices && indices.length > 0) {
+        return indices.map((i) => options[i]);
+      }
+      console.log(`Please enter at least one number between 1 and ${options.length}, or "all".`);
+    }
+  } finally {
+    rl.close();
+  }
+}
+async function selectOption(question, options) {
+  console.log(`
+${bold(question)}`);
+  const picked = await runMenu(options, false);
+  if (!picked) {
+    return selectByNumber(options);
+  }
+  const choice = options[picked[0]];
+  console.log(`${green("\u2714")} ${choice.label}`);
+  return choice;
+}
+async function multiSelect(question, options) {
+  console.log(`
+${bold(question)}`);
+  const picked = await runMenu(options, true);
+  if (!picked) {
+    return selectManyByNumber(options);
+  }
+  const choices = picked.map((i) => options[i]);
+  console.log(`${green("\u2714")} ${choices.map((c) => c.label).join(", ")}`);
+  return choices;
+}
+async function confirm(question) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  try {
+    const answer = (await rl.question(`${bold(question)} ${dim("(Y/n)")} `)).trim().toLowerCase();
+    return answer === "" || answer === "y" || answer === "yes";
+  } finally {
+    rl.close();
+  }
+}
+async function input(question, defaultValue) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  try {
+    const answer = (await rl.question(`${bold(question)} ${dim(`(${defaultValue})`)} `)).trim();
+    return answer === "" ? defaultValue : answer;
+  } finally {
+    rl.close();
+  }
+}
+
+// src/templates/angular.ts
+var ANGULAR_APP_TS = `import { Component, signal } from '@angular/core';
+import { PptxHandler } from 'pptx-viewer-core';
+import type { CollaborationConfig } from 'pptx-angular-viewer';
+import { PowerPointViewerComponent } from 'pptx-angular-viewer';
+
+/**
+ * The presentation formats this viewer can open: OOXML and the legacy binary
+ * PowerPoint format, which pptx-viewer-core converts on load. Kept as an
+ * explicit check because a drop event carries no accept filtering.
+ */
+function isPresentation(file: File | undefined): file is File {
+	const name = file?.name.toLowerCase() ?? '';
+	return name.endsWith('.pptx') || name.endsWith('.ppt');
+}
+
+@Component({
+	selector: 'app-root',
+	standalone: true,
+	imports: [PowerPointViewerComponent],
+	styles: [\`
+		:host { display: block; height: 100dvh; }
+		.stage { display: flex; align-items: center; justify-content: center; height: 100dvh; padding: 2rem; cursor: default; }
+		.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; max-width: 520px; width: 100%; padding: 3rem; text-align: center; border: 2px dashed var(--pptx-border, #374151); border-radius: 0.75rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
+		.dropzone.over, .dropzone:hover { border-color: var(--pptx-primary, #6366f1); background: var(--pptx-muted, rgba(255,255,255,0.04)); }
+		h1 { margin: 0; font-size: 1.5rem; font-weight: 500; }
+		p { margin: 0; font-size: 0.875rem; color: var(--pptx-muted-foreground, #9ca3af); }
+		.pick-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: 1px solid var(--pptx-border, #374151); background: var(--pptx-muted, #1f2937); color: var(--pptx-foreground, #f3f4f6); cursor: pointer; font-size: 0.875rem; transition: background 0.15s; }
+		.pick-label:hover { background: var(--pptx-accent, #374151); }
+		.or-sep { font-size: 0.8rem; color: var(--pptx-muted-foreground, #6b7280); }
+		.new-btn { padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: none; background: var(--pptx-primary, #6366f1); color: #fff; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: opacity 0.15s; }
+		.new-btn:hover { opacity: 0.9; }
+	\`],
+	template: \`
+		@if (content(); as c) {
+			<div style="height: 100dvh">
+				<pptx-power-point-viewer
+					[content]="c"
+					[canEdit]="true"
+					style="height: 100%"
+					[collaboration]="collab()"
+					(startCollaboration)="collab.set($event)"
+					(stopCollaboration)="collab.set(undefined)"
+				/>
+			</div>
+		} @else {
+			<div
+				class="stage"
+				[class.over]="over()"
+				(dragover)="$event.preventDefault(); over.set(true)"
+				(dragleave)="over.set(false)"
+				(drop)="onDrop($event)"
+				(click)="fileInput.click()"
+			>
+				<div class="dropzone">
+					<h1>Open a Presentation</h1>
+					<p>Drag &amp; drop a .pptx or .ppt file here, or</p>
+					<label class="pick-label" (click)="$event.stopPropagation()">
+						Choose a file
+						<input #fileInput type="file" accept=".pptx,.ppt" style="display: none" (change)="onPick($event)" />
+					</label>
+					<span class="or-sep">or</span>
+					<button class="new-btn" (click)="$event.stopPropagation(); newPresentation()">New Presentation</button>
+				</div>
+			</div>
+		}
+	\`,
+})
+export class App {
+	content = signal<ArrayBuffer | Uint8Array | null>(null);
+	collab = signal<CollaborationConfig | undefined>(undefined);
+	over = signal(false);
+
+	async onDrop(e: DragEvent) {
+		e.preventDefault();
+		this.over.set(false);
+		const file = e.dataTransfer?.files?.[0];
+		if (isPresentation(file)) this.content.set(await file.arrayBuffer());
+	}
+
+	async onPick(e: Event) {
+		const file = (e.target as HTMLInputElement).files?.[0];
+		if (file) this.content.set(await file.arrayBuffer());
+	}
+
+	async newPresentation() {
+		const { handler, data } = await PptxHandler.createBlank({
+			title: 'Untitled Presentation',
+			initialSlideCount: 1,
+		});
+		this.content.set(await handler.save(data.slides));
+	}
+}
+`;
+var ANGULAR_MAIN_TS = `import 'zone.js';
+import '@angular/compiler';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { Injectable } from '@angular/core';
+import type { MissingTranslationHandlerParams } from '@ngx-translate/core';
+import { MissingTranslationHandler, provideTranslateService } from '@ngx-translate/core';
+import { keyToLabel } from 'pptx-angular-viewer';
+
+import { App } from './app/app.ts';
+
+@Injectable()
+class LabelFallbackHandler implements MissingTranslationHandler {
+	handle(params: MissingTranslationHandlerParams): string {
+		return keyToLabel(params.key);
+	}
+}
+
+bootstrapApplication(App, {
+	providers: [
+		provideTranslateService({
+			lang: 'en',
+			fallbackLang: 'en',
+			missingTranslationHandler: {
+				provide: MissingTranslationHandler,
+				useClass: LabelFallbackHandler,
+			},
+		}),
+	],
+}).catch((err) => console.error(err));
+`;
+
+// src/templates/react.ts
+var REACT_APP_TSX = `import { useCallback, useState } from 'react';
+import { PptxHandler } from 'pptx-viewer-core';
+import type { CollaborationConfig } from 'pptx-react-viewer';
+import { PowerPointViewer } from 'pptx-react-viewer';
+import 'pptx-react-viewer/styles.css';
+import './i18n';
+
+/**
+ * The presentation formats this viewer can open: OOXML and the legacy binary
+ * PowerPoint format, which pptx-viewer-core converts on load. Kept as an
+ * explicit check because a drop event carries no accept filtering.
+ */
+function isPresentation(file: File | undefined): file is File {
+	const name = file?.name.toLowerCase() ?? '';
+	return name.endsWith('.pptx') || name.endsWith('.ppt');
+}
+
+export default function App() {
+	const [content, setContent] = useState<Uint8Array | null>(null);
+	const [over, setOver] = useState(false);
+	const [collab, setCollab] = useState<CollaborationConfig | undefined>();
+
+	const loadFile = useCallback(async (file: File) => {
+		setContent(new Uint8Array(await file.arrayBuffer()));
+	}, []);
+
+	const newPresentation = useCallback(async () => {
+		const { handler, data } = await PptxHandler.createBlank({
+			title: 'Untitled Presentation',
+			initialSlideCount: 1,
+		});
+		setContent(await handler.save(data.slides));
+	}, []);
+
+	if (content) {
+		return (
+			<div style={{ height: '100dvh' }}>
+				<PowerPointViewer
+					content={content}
+					canEdit
+					collaboration={collab}
+					onStartCollaboration={setCollab}
+					onStopCollaboration={() => setCollab(undefined)}
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<div className="stage">
+			<div
+				className={\`dropzone\${over ? ' over' : ''}\`}
+				onDragOver={(e) => { e.preventDefault(); setOver(true); }}
+				onDragLeave={() => setOver(false)}
+				onDrop={(e) => {
+					e.preventDefault();
+					setOver(false);
+					const file = e.dataTransfer.files[0];
+					if (isPresentation(file)) void loadFile(file);
+				}}
+				onClick={() => document.getElementById('file-input')?.click()}
+			>
+				<h1>Open a Presentation</h1>
+				<p>Drag &amp; drop a .pptx or .ppt file here, or</p>
+				<label className="pick-label" onClick={(e) => e.stopPropagation()}>
+					Choose a file
+					<input
+						id="file-input"
+						type="file"
+						accept=".pptx,.ppt"
+						style={{ display: 'none' }}
+						onChange={(e) => {
+							const file = e.target.files?.[0];
+							if (file) void loadFile(file);
+						}}
+					/>
+				</label>
+				<span className="or-sep">or</span>
+				<button
+					className="new-btn"
+					onClick={(e) => { e.stopPropagation(); void newPresentation(); }}
+				>
+					New Presentation
+				</button>
+			</div>
+		</div>
+	);
+}
+`;
+var REACT_I18N_TS = `import { createInstance } from 'i18next';
+import { translationsEn, keyToLabel } from 'pptx-react-viewer/i18n';
+import { initReactI18next } from 'react-i18next';
+
+const i18n = createInstance();
+
+i18n.use(initReactI18next).init({
+	resources: {
+		en: { translation: translationsEn },
+	},
+	lng: 'en',
+	fallbackLng: 'en',
+	interpolation: { escapeValue: false },
+	parseMissingKeyHandler: (key: string) => keyToLabel(key),
+	missingKeyHandler: false,
+});
+
+export default i18n;
+`;
+
+// src/templates/shared.ts
+var MINIMAL_APP_CSS = `:root {
+  color-scheme: dark;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  overflow-x: hidden;
+  background: var(--pptx-background, #030712);
+  color: var(--pptx-foreground, #f3f4f6);
+}
+
+#app,
+#root {
+  height: 100dvh;
+}
+
+.stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100dvh;
+  padding: 2rem;
+}
+
+.dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  max-width: 520px;
+  width: 100%;
+  padding: 3rem;
+  text-align: center;
+  border: 2px dashed var(--pptx-border, #374151);
+  border-radius: 0.75rem;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+}
+
+.dropzone.over,
+.dropzone:hover {
+  border-color: var(--pptx-primary, #6366f1);
+  background: var(--pptx-muted, rgba(255, 255, 255, 0.04));
+}
+
+.dropzone h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.dropzone p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--pptx-muted-foreground, #9ca3af);
+}
+
+.pick-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.25rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--pptx-border, #374151);
+  background: var(--pptx-muted, #1f2937);
+  color: var(--pptx-foreground, #f3f4f6);
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background 0.15s;
+}
+
+.pick-label:hover {
+  background: var(--pptx-accent, #374151);
+}
+
+.or-sep {
+  font-size: 0.8rem;
+  color: var(--pptx-muted-foreground, #6b7280);
+}
+
+.new-btn {
+  padding: 0.5rem 1.25rem;
+  border-radius: 0.5rem;
+  border: none;
+  background: var(--pptx-primary, #6366f1);
+  color: #fff;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: opacity 0.15s;
+}
+
+.new-btn:hover {
+  opacity: 0.9;
+}
+`;
+var ANGULAR_GLOBAL_CSS = `:root {
+  color-scheme: dark;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  background: var(--pptx-background, #030712);
+  color: var(--pptx-foreground, #f3f4f6);
+}
+
+app-root {
+  display: block;
+  height: 100dvh;
+}
+`;
+
+// src/templates/svelte.ts
+var SVELTE_APP_SVELTE = `<script lang="ts">
+	import { PptxHandler } from 'pptx-viewer-core';
+	import type { CollaborationConfig } from 'pptx-svelte-viewer';
+	import { PowerPointViewer } from 'pptx-svelte-viewer';
+
+	/**
+	 * The presentation formats this viewer can open: OOXML and the legacy binary
+	 * PowerPoint format, which pptx-viewer-core converts on load. Kept as an
+	 * explicit check because a drop event carries no accept filtering.
+	 */
+	function isPresentation(file: File | undefined): file is File {
+		const name = file?.name.toLowerCase() ?? '';
+		return name.endsWith('.pptx') || name.endsWith('.ppt');
+	}
+
+	let content = $state<Uint8Array | null>(null);
+	let over = $state(false);
+	let collab = $state<CollaborationConfig | undefined>();
+
+	async function loadFile(file: File) {
+		content = new Uint8Array(await file.arrayBuffer());
+	}
+
+	function onDrop(e: DragEvent) {
+		over = false;
+		const file = e.dataTransfer?.files?.[0];
+		if (isPresentation(file)) void loadFile(file);
+	}
+
+	function onPick(e: Event) {
+		const file = (e.target as HTMLInputElement).files?.[0];
+		if (file) void loadFile(file);
+	}
+
+	async function newPresentation() {
+		const { handler, data } = await PptxHandler.createBlank({
+			title: 'Untitled Presentation',
+			initialSlideCount: 1,
+		});
+		content = await handler.save(data.slides);
+	}
+</script>
+
+{#if content}
+	<div style="height: 100dvh">
+		<PowerPointViewer
+			source={content}
+			editable
+			collaboration={collab}
+			onstartcollaboration={(cfg) => { collab = cfg; }}
+			onstopcollaboration={() => { collab = undefined; }}
+		/>
+	</div>
+{:else}
+	<div
+		class="stage"
+		ondragover={(e) => { e.preventDefault(); over = true; }}
+		ondragleave={() => { over = false; }}
+		ondrop={(e) => { e.preventDefault(); onDrop(e); }}
+		onclick={() => document.getElementById('file-input')?.click()}
+		role="button"
+		tabindex="0"
+	>
+		<div class="dropzone" class:over>
+			<h1>Open a Presentation</h1>
+			<p>Drag &amp; drop a .pptx or .ppt file here, or</p>
+			<label class="pick-label" onclick={(e) => e.stopPropagation()}>
+				Choose a file
+				<input id="file-input" type="file" accept=".pptx,.ppt" style="display: none" onchange={onPick} />
+			</label>
+			<span class="or-sep">or</span>
+			<button class="new-btn" onclick={(e) => { e.stopPropagation(); void newPresentation(); }}>
+				New Presentation
+			</button>
+		</div>
+	</div>
+{/if}
+`;
+
+// src/templates/vanilla.ts
+var VANILLA_MAIN_TS = `import { createPptxViewer } from 'pptx-vanilla-viewer';
+import { PptxHandler } from 'pptx-viewer-core';
+
+import './style.css';
+
+/**
+ * The presentation formats this viewer can open: OOXML and the legacy binary
+ * PowerPoint format, which pptx-viewer-core converts on load. Kept as an
+ * explicit check because a drop event carries no accept filtering.
+ */
+function isPresentation(file: File | undefined): file is File {
+	const name = file?.name.toLowerCase() ?? '';
+	return name.endsWith('.pptx') || name.endsWith('.ppt');
+}
+
+const app = document.querySelector<HTMLDivElement>('#app')!;
+
+function show(source: ArrayBuffer | Uint8Array): void {
+	app.innerHTML = '';
+	app.style.height = '100dvh';
+	createPptxViewer(app, { source, editable: true });
+}
+
+function showLanding(): void {
+	app.style.height = '';
+	app.innerHTML = '';
+
+	const stage = document.createElement('div');
+	stage.className = 'stage';
+
+	const zone = document.createElement('div');
+	zone.className = 'dropzone';
+
+	const h1 = document.createElement('h1');
+	h1.textContent = 'Open a Presentation';
+
+	const hint = document.createElement('p');
+	hint.textContent = 'Drag & drop a .pptx or .ppt file here, or';
+
+	const label = document.createElement('label');
+	label.className = 'pick-label';
+	label.textContent = 'Choose a file';
+
+	const input = document.createElement('input');
+	input.type = 'file';
+	input.accept = '.pptx,.ppt';
+	input.style.display = 'none';
+	label.append(input);
+
+	const orSep = document.createElement('span');
+	orSep.className = 'or-sep';
+	orSep.textContent = 'or';
+
+	const newBtn = document.createElement('button');
+	newBtn.className = 'new-btn';
+	newBtn.textContent = 'New Presentation';
+
+	zone.append(h1, hint, label, orSep, newBtn);
+	stage.append(zone);
+	app.append(stage);
+
+	zone.addEventListener('dragover', (e) => {
+		e.preventDefault();
+		zone.classList.add('over');
+	});
+	zone.addEventListener('dragleave', () => zone.classList.remove('over'));
+	zone.addEventListener('drop', (e) => {
+		e.preventDefault();
+		zone.classList.remove('over');
+		const file = e.dataTransfer?.files?.[0];
+		if (isPresentation(file)) void file.arrayBuffer().then(show);
+	});
+
+	// Click the zone to open the file picker (but not if the button was clicked).
+	zone.addEventListener('click', () => input.click());
+	label.addEventListener('click', (e) => e.stopPropagation());
+	input.addEventListener('click', (e) => e.stopPropagation());
+	input.addEventListener('change', () => {
+		const file = input.files?.[0];
+		if (file) void file.arrayBuffer().then(show);
+	});
+
+	newBtn.addEventListener('click', async (e) => {
+		e.stopPropagation();
+		newBtn.textContent = 'Creating...';
+		newBtn.disabled = true;
+		const { handler, data } = await PptxHandler.createBlank({
+			title: 'Untitled Presentation',
+			initialSlideCount: 1,
+		});
+		show(await handler.save(data.slides));
+	});
+}
+
+showLanding();
+`;
+
+// src/templates/vue.ts
+var VUE_APP_VUE = `<script setup lang="ts">
+import { ref } from 'vue';
+import { PptxHandler } from 'pptx-viewer-core';
+import type { CollaborationConfig } from 'pptx-vue-viewer';
+import { PowerPointViewer } from 'pptx-vue-viewer';
+import 'pptx-vue-viewer/styles.css';
+
+/**
+ * The presentation formats this viewer can open: OOXML and the legacy binary
+ * PowerPoint format, which pptx-viewer-core converts on load. Kept as an
+ * explicit check because a drop event carries no accept filtering.
+ */
+function isPresentation(file: File | undefined): file is File {
+	const name = file?.name.toLowerCase() ?? '';
+	return name.endsWith('.pptx') || name.endsWith('.ppt');
+}
+
+const content = ref<Uint8Array>();
+const over = ref(false);
+const collab = ref<CollaborationConfig | undefined>();
+
+async function loadFile(file: File) {
+	content.value = new Uint8Array(await file.arrayBuffer());
+}
+
+function onDrop(e: DragEvent) {
+	over.value = false;
+	const file = e.dataTransfer?.files?.[0];
+	if (isPresentation(file)) void loadFile(file);
+}
+
+function onPick(e: Event) {
+	const file = (e.target as HTMLInputElement).files?.[0];
+	if (file) void loadFile(file);
+}
+
+async function newPresentation() {
+	const { handler, data } = await PptxHandler.createBlank({
+		title: 'Untitled Presentation',
+		initialSlideCount: 1,
+	});
+	content.value = await handler.save(data.slides);
+}
+</script>
+
+<template>
+	<div v-if="content" style="height: 100dvh">
+		<PowerPointViewer
+			:content="content"
+			can-edit
+			style="height: 100%"
+			:collaboration="collab"
+			@start-collaboration="collab = $event"
+			@stop-collaboration="collab = undefined"
+		/>
+	</div>
+	<div
+		v-else
+		class="stage"
+		@dragover.prevent="over = true"
+		@dragleave="over = false"
+		@drop.prevent="onDrop($event as DragEvent)"
+		@click="($refs.input as HTMLInputElement).click()"
+	>
+		<div :class="['dropzone', { over }]">
+			<h1>Open a Presentation</h1>
+			<p>Drag &amp; drop a .pptx or .ppt file here, or</p>
+			<label class="pick-label" @click.stop>
+				Choose a file
+				<input ref="input" type="file" accept=".pptx,.ppt" style="display: none" @change="onPick" />
+			</label>
+			<span class="or-sep">or</span>
+			<button class="new-btn" @click.stop="newPresentation">New Presentation</button>
+		</div>
+	</div>
+</template>
+
+<style>
+:root { color-scheme: dark; }
+*, *::before, *::after { box-sizing: border-box; }
+body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--pptx-background, #030712); color: var(--pptx-foreground, #f3f4f6); }
+#app { height: 100dvh; }
+.stage { display: flex; align-items: center; justify-content: center; height: 100dvh; padding: 2rem; }
+.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; max-width: 520px; width: 100%; padding: 3rem; text-align: center; border: 2px dashed var(--pptx-border, #374151); border-radius: 0.75rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
+.dropzone.over, .dropzone:hover { border-color: var(--pptx-primary, #6366f1); background: var(--pptx-muted, rgba(255, 255, 255, 0.04)); }
+.dropzone h1 { margin: 0; font-size: 1.5rem; font-weight: 500; }
+.dropzone p { margin: 0; font-size: 0.875rem; color: var(--pptx-muted-foreground, #9ca3af); }
+.pick-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: 1px solid var(--pptx-border, #374151); background: var(--pptx-muted, #1f2937); color: var(--pptx-foreground, #f3f4f6); cursor: pointer; font-size: 0.875rem; transition: background 0.15s; }
+.pick-label:hover { background: var(--pptx-accent, #374151); }
+.or-sep { font-size: 0.8rem; color: var(--pptx-muted-foreground, #6b7280); }
+.new-btn { padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: none; background: var(--pptx-primary, #6366f1); color: #fff; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: opacity 0.15s; }
+.new-btn:hover { opacity: 0.9; }
+</style>
+`;
+var VUE_MAIN_TS = `import { createApp } from 'vue';
+import { createI18n } from 'vue-i18n';
+import { translationsEn, keyToLabel } from 'pptx-vue-viewer/i18n';
+import App from './App.vue';
+
+const i18n = createI18n({
+	legacy: false,
+	locale: 'en',
+	fallbackLocale: 'en',
+	messages: { en: translationsEn },
+	missing: (_locale, key) => keyToLabel(key),
+	missingWarn: false,
+	fallbackWarn: false,
+});
+
+createApp(App).use(i18n).mount('#app');
+`;
+
+// src/targets.ts
+var COLLAB_EXTRAS = [
+  {
+    prompt: "Include real-time collaboration? (adds yjs, y-websocket, y-webrtc)",
+    packages: ["yjs", "y-websocket", "y-webrtc"]
+    // defaultInclude is true (the default) - demo apps ship with collab packages.
+  }
+];
+var TARGETS = [
+  {
+    id: "react",
+    label: "React",
+    description: "pptx-react-viewer - viewer/editor component for a React 18/19 app",
+    mode: "install",
+    group: "framework",
+    packages: [
+      "pptx-react-viewer",
+      "react",
+      "react-dom",
+      "framer-motion",
+      "lucide-react",
+      "react-icons",
+      "jspdf",
+      "jszip",
+      "fast-xml-parser",
+      "i18next",
+      "react-i18next"
+    ],
+    nextSteps: `import { PowerPointViewer } from 'pptx-react-viewer';
+import 'pptx-react-viewer/styles.css';
+
+<PowerPointViewer content={arrayBuffer} canEdit />
+
+Docs: https://www.npmjs.com/package/pptx-react-viewer`,
+    compat: { peerPackage: "react", requiredMajors: [18, 19] },
+    scaffold: {
+      command: "create-vite@latest",
+      // --no-interactive/--no-immediate stop create-vite from prompting for a linter
+      // choice and then auto-installing + auto-starting its own dev server; if it did,
+      // that dev server would block forever and our own entry-file patch + extra
+      // package install below would never run, leaving the default Vite template in place.
+      args: (dir) => [dir, "--template", "react-ts", "--no-interactive", "--no-immediate"],
+      extraPackages: [
+        "pptx-react-viewer",
+        "pptx-viewer-core",
+        "framer-motion",
+        "lucide-react",
+        "react-icons",
+        "jspdf",
+        "jszip",
+        "fast-xml-parser",
+        "i18next",
+        "react-i18next"
+      ],
+      entryCandidates: ["src/App.tsx"],
+      entryContent: REACT_APP_TSX,
+      extraFiles: {
+        "src/i18n.ts": REACT_I18N_TS,
+        "src/index.css": MINIMAL_APP_CSS
+      },
+      optionalExtras: COLLAB_EXTRAS
+    }
+  },
+  {
+    id: "vue",
+    label: "Vue",
+    description: "pptx-vue-viewer - viewer/editor component for a Vue 3.5+ app",
+    mode: "install",
+    group: "framework",
+    packages: ["pptx-vue-viewer", "vue", "jszip", "fast-xml-parser"],
+    nextSteps: `<script setup lang="ts">
+import { PowerPointViewer } from 'pptx-vue-viewer';
+import 'pptx-vue-viewer/styles.css';
+</script>
+
+<template>
+  <PowerPointViewer :content="content" style="height: 100vh" />
+</template>
+
+Docs: https://www.npmjs.com/package/pptx-vue-viewer`,
+    compat: { peerPackage: "vue", requiredMajors: [3] },
+    scaffold: {
+      command: "create-vite@latest",
+      args: (dir) => [dir, "--template", "vue-ts", "--no-interactive", "--no-immediate"],
+      extraPackages: [
+        "pptx-vue-viewer",
+        "pptx-viewer-core",
+        "vue-i18n",
+        "jszip",
+        "fast-xml-parser"
+      ],
+      entryCandidates: ["src/App.vue"],
+      entryContent: VUE_APP_VUE,
+      extraFiles: { "src/main.ts": VUE_MAIN_TS },
+      optionalExtras: COLLAB_EXTRAS
+    }
+  },
+  {
+    id: "angular",
+    label: "Angular",
+    description: "pptx-angular-viewer - viewer/editor component for an Angular 19-22 app",
+    mode: "install",
+    group: "framework",
+    packages: ["pptx-angular-viewer", "@angular/core", "@angular/common", "rxjs"],
+    nextSteps: `import { PowerPointViewerComponent } from 'pptx-angular-viewer';
+import 'pptx-angular-viewer/styles.css';
+
+<pptx-power-point-viewer [content]="content" />
+
+Docs: https://www.npmjs.com/package/pptx-angular-viewer`,
+    compat: { peerPackage: "@angular/core", requiredMajors: [19, 20, 21, 22] },
+    scaffold: {
+      command: "@angular/cli@latest",
+      // --no-interactive matters even with the flags above supplied: the
+      // `application` schematic's `ssr` option has an `x-prompt`, and `ng new`
+      // prompts for it (plus anything else not already given a value) whenever
+      // stdin is a TTY, which ours is (we inherit the real user's terminal).
+      args: (dir) => [
+        "new",
+        dir,
+        "--standalone",
+        "--skip-git",
+        "--style=css",
+        "--skip-install",
+        "--no-interactive"
+      ],
+      extraPackages: ["pptx-angular-viewer", "pptx-viewer-core", "@ngx-translate/core"],
+      // Angular v20+ generates `app.ts`; older schematics generate `app.component.ts`.
+      entryCandidates: ["src/app/app.ts", "src/app/app.component.ts"],
+      entryContent: ANGULAR_APP_TS,
+      extraFiles: { "src/main.ts": ANGULAR_MAIN_TS, "src/styles.css": ANGULAR_GLOBAL_CSS },
+      // @angular/cli@22 requires Node.js >=22.22.0, >=24.13.1, or >=26.0.0. Check
+      // BEFORE the project-name prompt so the user sees the real reason immediately.
+      preflight: () => {
+        const node = process.versions.node;
+        const [maj, min, pat] = node.split(".").map(Number);
+        const ok = maj === 22 && min >= 22 || maj === 24 && (min > 13 || min === 13 && pat >= 1) || maj >= 26;
+        if (!ok) {
+          throw new Error(
+            `@angular/cli@latest requires Node.js v22.22.0+, v24.13.1+, or v26.0.0+.
+  You are running Node.js v${node}.
+  Update Node.js at: https://nodejs.org`
+          );
+        }
+      },
+      optionalExtras: COLLAB_EXTRAS
+    }
+  },
+  {
+    id: "svelte",
+    label: "Svelte",
+    description: "pptx-svelte-viewer - viewer/editor component for a Svelte 5 app",
+    mode: "install",
+    group: "framework",
+    packages: ["pptx-svelte-viewer", "svelte", "jszip", "fast-xml-parser"],
+    // The Svelte binding compiles its styles into the components, so there
+    // is no `/styles.css` subpath to import.
+    nextSteps: `<script lang="ts">
+	import { PowerPointViewer } from 'pptx-svelte-viewer';
+</script>
+
+<PowerPointViewer source={bytes} editable />
+
+Docs: https://www.npmjs.com/package/pptx-svelte-viewer`,
+    compat: { peerPackage: "svelte", requiredMajors: [5] },
+    scaffold: {
+      command: "create-vite@latest",
+      args: (dir) => [dir, "--template", "svelte-ts", "--no-interactive", "--no-immediate"],
+      extraPackages: ["pptx-svelte-viewer", "pptx-viewer-core", "jszip", "fast-xml-parser"],
+      entryCandidates: ["src/App.svelte"],
+      entryContent: SVELTE_APP_SVELTE,
+      // The starter's main.ts imports ./app.css; replace the Vite demo
+      // styles (centred #app with padding) with a full-viewport reset.
+      extraFiles: { "src/app.css": MINIMAL_APP_CSS },
+      optionalExtras: COLLAB_EXTRAS
+    }
+  },
+  {
+    id: "vanilla",
+    label: "Vanilla JS",
+    description: "pptx-vanilla-viewer - zero-framework viewer/editor, plain DOM, no framework at all",
+    mode: "install",
+    group: "framework",
+    // The vanilla binding injects its own stylesheet at runtime; jszip and
+    // fast-xml-parser are its only peers.
+    packages: ["pptx-vanilla-viewer", "jszip", "fast-xml-parser"],
+    nextSteps: `import { createPptxViewer } from 'pptx-vanilla-viewer';
+
+const viewer = createPptxViewer(document.getElementById('host')!, {
+  source: '/deck.pptx', // URL, ArrayBuffer, Uint8Array, Blob, or File
+  editable: true,
+});
+
+Docs: https://www.npmjs.com/package/pptx-vanilla-viewer`,
+    scaffold: {
+      command: "create-vite@latest",
+      args: (dir) => [dir, "--template", "vanilla-ts", "--no-interactive", "--no-immediate"],
+      extraPackages: [
+        "pptx-vanilla-viewer",
+        "pptx-viewer-core",
+        "three",
+        "jszip",
+        "fast-xml-parser"
+      ],
+      entryCandidates: ["src/main.ts"],
+      entryContent: VANILLA_MAIN_TS,
+      // main.ts imports ./style.css; replace the Vite demo styles with a
+      // full-viewport reset.
+      extraFiles: { "src/style.css": MINIMAL_APP_CSS },
+      optionalExtras: COLLAB_EXTRAS
+    }
+  },
+  {
+    id: "core",
+    label: "Core engine only",
+    description: "pptx-viewer-core - framework-agnostic parse/edit/save/convert SDK, no UI",
+    mode: "install",
+    // jszip and fast-xml-parser are regular dependencies of pptx-viewer-core,
+    // so npm/yarn/pnpm/bun pull them in automatically. Nothing else to add.
+    packages: ["pptx-viewer-core"],
+    nextSteps: `import { PptxHandler } from 'pptx-viewer-core';
+
+const handler = new PptxHandler();
+const data = await handler.load(arrayBuffer);
+const bytes = await handler.save(data.slides);
+
+Docs: https://www.npmjs.com/package/pptx-viewer-core`
+  },
+  {
+    id: "mcp",
+    label: "MCP server",
+    description: "pptx-viewer-mcp - PowerPoint editing tools for AI agents (Claude, Cursor, ...)",
+    mode: "print-config",
+    packages: ["pptx-viewer-mcp"],
+    nextSteps: `Add this to your MCP client config (Claude Desktop, Claude Code, Cursor, ...):
+
+{
+  "mcpServers": {
+    "pptx": {
+      "command": "npx",
+      "args": ["pptx-viewer-mcp"]
+    }
+  }
+}
+
+npx downloads pptx-viewer-mcp (and its bundled pptx-viewer-core engine) the
+first time your MCP client starts it, so there is nothing to install by hand.
+
+Docs: https://www.npmjs.com/package/pptx-viewer-mcp`
+  }
+];
+
+// src/resolve.ts
+function parseTargetIds(csv) {
+  return [
+    ...new Set(
+      csv.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean)
+    )
+  ];
+}
+function findTargetsByIds(ids) {
+  return ids.map((id) => {
+    const match = TARGETS.find((t) => t.id === id);
+    if (!match) {
+      throw new Error(
+        `Unknown target "${id}". Choose one of: ${TARGETS.map((t) => t.id).join(", ")}`
+      );
+    }
+    return match;
+  });
+}
+function assertSingleFramework(targets) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const target of targets) {
+    if (!target.group) {
+      continue;
+    }
+    const mates = grouped.get(target.group) ?? [];
+    mates.push(target);
+    grouped.set(target.group, mates);
+  }
+  for (const mates of grouped.values()) {
+    if (mates.length > 1) {
+      throw new Error(
+        `${mates.map((t) => t.label).join(", ")} can't be selected together; pick a single UI framework.`
+      );
+    }
+  }
+}
+function mergePackages(targets) {
+  const seen = /* @__PURE__ */ new Set();
+  const merged = [];
+  for (const target of targets) {
+    for (const pkg of target.packages) {
+      if (!seen.has(pkg)) {
+        seen.add(pkg);
+        merged.push(pkg);
+      }
+    }
+  }
+  return merged;
+}
+
+// src/run-command.ts
+import { spawn } from "child_process";
+function runCommand(command, args, cwd, options) {
+  return new Promise((resolve, reject) => {
+    const isWindows = process.platform === "win32";
+    const stdio = options?.silent ? ["inherit", "ignore", "inherit"] : "inherit";
+    const child = isWindows ? spawn([command, ...args].join(" "), { cwd, stdio, shell: true }) : spawn(command, args, { cwd, stdio });
+    child.on("error", reject);
+    child.on("close", (code) => resolve(code ?? 1));
+  });
+}
+
+// src/scaffold.ts
+import { existsSync as existsSync3, mkdirSync, writeFileSync } from "fs";
+import { dirname, join as join3 } from "path";
+function sanitizeProjectName(name) {
+  const cleaned = name.trim().replace(/[^a-zA-Z0-9._-]+/gu, "-").replace(/-{2,}/gu, "-").replace(/^-+|-+$/gu, "");
+  return cleaned || "pptx-viewer-app";
+}
+function findEntryFile(projectDir, candidates) {
+  for (const candidate of candidates) {
+    if (existsSync3(join3(projectDir, candidate))) {
+      return candidate;
+    }
+  }
+  return null;
+}
+async function scaffoldProject(recipe, projectName, pm, cwd) {
+  const scaffoldExit = await runCommand(
+    "npx",
+    ["--yes", recipe.command, ...recipe.args(projectName)],
+    cwd,
+    { silent: true }
+  );
+  if (scaffoldExit !== 0) {
+    throw new Error(`${recipe.command} exited with code ${scaffoldExit}`);
+  }
+  const projectDir = join3(cwd, projectName);
+  const patchedFile = findEntryFile(projectDir, recipe.entryCandidates);
+  if (patchedFile) {
+    writeFileSync(join3(projectDir, patchedFile), recipe.entryContent);
+  }
+  if (recipe.extraFiles) {
+    for (const [relativePath, content] of Object.entries(recipe.extraFiles)) {
+      const fullPath = join3(projectDir, relativePath);
+      mkdirSync(dirname(fullPath), { recursive: true });
+      writeFileSync(fullPath, content);
+    }
+  }
+  if (recipe.extraPackages.length > 0) {
+    const [command, args] = installCommand(pm, recipe.extraPackages);
+    const installExit = await runCommand(command, args, projectDir);
+    if (installExit !== 0) {
+      throw new Error(`${command} exited with code ${installExit}`);
+    }
+  }
+  return { projectDir, patchedFile };
+}
+
+// src/orchestrate.ts
+function printBanner() {
+  console.log(`
+${bold(cyan("pptx-viewer"))} ${dim("\xB7 interactive installer")}`);
+}
+function printUsage() {
+  printBanner();
+  console.log(`
+${bold("Usage:")} npx @christophervr/pptx-viewer [options]
+
+${bold("Options:")}
+  ${cyan("--target <ids>")}  Skip the picker; comma-separated, any of: ${TARGETS.map((t) => t.id).join(", ")}
+                   (the UI bindings - react, vue, angular, svelte, vanilla - are mutually exclusive; pick at most one)
+  ${cyan("--scaffold")}      Bootstrap a brand-new starter project instead of installing here
+  ${cyan("--dir <name>")}    Project directory name for --scaffold
+  ${cyan("--pm <manager>")}  Package manager to use: bun, pnpm, yarn, npm (default: auto-detected)
+  ${cyan("--yes, -y")}       Skip confirmation prompts
+  ${cyan("--help, -h")}      Show this help
+
+${bold("Examples:")}
+  ${gray("npx @christophervr/pptx-viewer")}
+  ${gray("npx @christophervr/pptx-viewer --target react,mcp --yes")}
+  ${gray("npx @christophervr/pptx-viewer --target react --scaffold --dir my-app --yes")}
+`);
+}
+async function resolveTargets(requested) {
+  if (requested) {
+    const targets = findTargetsByIds(parseTargetIds(requested));
+    console.log(`${green("\u2714")} ${targets.map((t) => t.label).join(", ")}`);
+    return targets;
+  }
+  if (!process.stdin.isTTY) {
+    throw new Error("Not running in a terminal: pass --target explicitly (see --help).");
+  }
+  return multiSelect(
+    "What are you building with pptx-viewer? (you can pick more than one)",
+    TARGETS
+  );
+}
+async function confirmCompat(cwd, targets) {
+  for (const target of targets) {
+    const result = checkCompat(cwd, target);
+    if (result.compatible) {
+      continue;
+    }
+    console.log(`
+${yellow("Warning:")} ${result.message}`);
+    if (process.stdin.isTTY) {
+      const proceed = await confirm("Continue anyway?");
+      if (!proceed) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+async function resolveScaffoldChoice(installTargets, args) {
+  const scaffoldable = installTargets.filter((t) => t.scaffold);
+  if (args.scaffold) {
+    if (scaffoldable.length !== 1) {
+      const scaffoldIds = TARGETS.filter((t) => t.scaffold).map((t) => t.id).join(", ");
+      throw new Error(`--scaffold requires exactly one of: ${scaffoldIds} to be selected.`);
+    }
+    return { useScaffold: true, scaffoldTarget: scaffoldable[0] };
+  }
+  if (scaffoldable.length === 1 && process.stdin.isTTY) {
+    const choice = await selectOption("Install into the current project, or scaffold a new one?", [
+      { label: "Install here", description: "Add the package(s) to the project in this directory" },
+      {
+        label: "Scaffold a new project",
+        description: "Bootstrap a brand-new starter app in its own folder"
+      }
+    ]);
+    return {
+      useScaffold: choice.label === "Scaffold a new project",
+      scaffoldTarget: scaffoldable[0]
+    };
+  }
+  return { useScaffold: false };
+}
+async function runScaffoldMode(target, args, configTargets, cwd) {
+  const recipe = target.scaffold;
+  if (!recipe) {
+    throw new Error(`${target.label} has no scaffold recipe.`);
+  }
+  recipe.preflight?.();
+  const optionalPkgs = [];
+  if (recipe.optionalExtras) {
+    for (const extra of recipe.optionalExtras) {
+      const defaultChoice = extra.defaultInclude !== false;
+      const include = args.yes || !process.stdin.isTTY ? defaultChoice : await confirm(extra.prompt);
+      if (include) {
+        optionalPkgs.push(...extra.packages);
+      }
+    }
+  }
+  const effectiveRecipe = optionalPkgs.length > 0 ? { ...recipe, extraPackages: [...recipe.extraPackages, ...optionalPkgs] } : recipe;
+  const defaultName = `pptx-${target.id}-app`;
+  const rawName = args.dir ?? (process.stdin.isTTY ? await input("Project directory name", defaultName) : defaultName);
+  const projectName = sanitizeProjectName(rawName);
+  const pm = args.pm ?? detectPackageManager(cwd);
+  console.log(
+    `
+${bold("About to scaffold")} "${cyan(projectName)}" with ${recipe.command} (${target.label}), then install with ${pm}.
+`
+  );
+  if (!args.yes && process.stdin.isTTY) {
+    const proceed = await confirm("Continue?");
+    if (!proceed) {
+      console.log(`
+${dim("Skipped.")}`);
+      return;
+    }
+  }
+  const result = await scaffoldProject(effectiveRecipe, projectName, pm, cwd);
+  if (!result.patchedFile) {
+    console.log(
+      `
+${yellow("Scaffolded the project, but could not find an entry file to wire up automatically.")} See the quick-start snippet below and add it yourself.`
+    );
+  }
+  for (const configTarget of configTargets) {
+    console.log(`
+${configTarget.nextSteps}
+`);
+  }
+  console.log(`
+${green("\u2714")} ${bold("Done!")} Starting dev server...
+`);
+  const projectDir = result.projectDir;
+  const devExit = await runCommand(pm, ["run", "dev"], projectDir);
+  if (devExit !== 0) {
+    console.log(`
+  ${cyan(`cd ${projectName}`)}
+  ${cyan(`${pm} run dev`)}
+`);
+  }
+}
+async function runInstallMode(installTargets, configTargets, args, cwd) {
+  if (installTargets.length > 0) {
+    if (!existsSync4(`${cwd}/package.json`)) {
+      throw new Error(
+        `No package.json found in ${cwd}. Run "npm init -y" first, then re-run this command.`
+      );
+    }
+    const proceedPastCompat = await confirmCompat(cwd, installTargets);
+    if (!proceedPastCompat) {
+      console.log(`
+${red("Aborted.")}`);
+      return;
+    }
+    const packages = mergePackages(installTargets);
+    const pm = args.pm ?? detectPackageManager(cwd);
+    const [command, cmdArgs] = installCommand(pm, packages);
+    console.log(`
+${bold("About to run:")} ${cyan(`${command} ${cmdArgs.join(" ")}`)}
+`);
+    if (!args.yes && process.stdin.isTTY) {
+      const proceed = await confirm("Install now?");
+      if (!proceed) {
+        console.log(
+          `
+${dim("Skipped.")} Run this yourself when ready:
+  ${cyan(`${command} ${cmdArgs.join(" ")}`)}
+`
+        );
+        return;
+      }
+    }
+    const exitCode = await runCommand(command, cmdArgs, cwd);
+    if (exitCode !== 0) {
+      throw new Error(`${command} exited with code ${exitCode}`);
+    }
+    console.log(`
+${green("\u2714")} ${bold("Done.")} Next steps:`);
+    for (const target of installTargets) {
+      console.log(`
+${target.nextSteps}
+`);
+    }
+  }
+  for (const target of configTargets) {
+    console.log(`
+${target.nextSteps}
+`);
+  }
+}
+async function runCli() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help) {
+    printUsage();
+    return;
+  }
+  printBanner();
+  const targets = await resolveTargets(args.target);
+  assertSingleFramework(targets);
+  const installTargets = targets.filter((t) => t.mode === "install");
+  const configTargets = targets.filter((t) => t.mode === "print-config");
+  const cwd = process.cwd();
+  const { useScaffold, scaffoldTarget } = await resolveScaffoldChoice(installTargets, args);
+  if (useScaffold && scaffoldTarget) {
+    await runScaffoldMode(scaffoldTarget, args, configTargets, cwd);
+    return;
+  }
+  await runInstallMode(installTargets, configTargets, args, cwd);
+}
+
+// src/cli.ts
+runCli().catch((err) => {
+  const message = err instanceof Error ? err.message : String(err);
+  console.error(`${red("\u2718 Error:")} ${message}`);
+  process.exit(1);
+});