@christophervr/pptx-viewer 1.1.45 → 1.2.0

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+All notable changes to this project are documented here.
+This file is generated from [Conventional Commits](https://www.conventionalcommits.org)
+by [git-cliff](https://git-cliff.org); do not edit it by hand.
+
+## [1.1.46](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.1.46) - 2026-07-03
+
+### Features
+
+- **cli:** Arrow-key colour prompts and PowerPoint-ready scaffolds (by @ChristopherVR) ([8de03c9](https://github.com/ChristopherVR/pptx-viewer/commit/8de03c9da8c8d20e28cca253ff6d7083de65a0d8))
+
+## [1.1.45](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.1.45) - 2026-07-02
+
+### Features
+
+- **cli:** Add interactive @christophervr/pptx-viewer installer (by @ChristopherVR) ([4df680d](https://github.com/ChristopherVR/pptx-viewer/commit/4df680d9791d18e38c0f413420e8e1e5f9f2907e))

package/README.md

@@ -19,18 +19,21 @@ This is what you get one `npx` away: a working `.pptx` viewer/editor, wired up i
 npx @christophervr/pptx-viewer@latest
 ```
 
-It first asks what you're building (multiple choice, comma-separated):
+It first asks what you're building with an arrow-key checklist (`↑`/`↓` to move, `space` to toggle, `a` to select all, `enter` to confirm):
 
 ```
 What are you building with pptx-viewer? (you can pick more than one)
+(↑/↓ move, space toggle, a select all, enter confirm)
 
-  1) React - pptx-react-viewer, a viewer/editor component for a React 19 app
-  2) Vue - pptx-vue-viewer, a viewer/editor component for a Vue 3.5+ app
-  3) Angular - pptx-angular-viewer, a viewer/editor component for an Angular 22+ app
-  4) Core engine only - pptx-viewer-core, the framework-agnostic SDK, no UI
-  5) MCP server - pptx-viewer-mcp, PowerPoint editing tools for AI agents
+❯ ◉ React - pptx-react-viewer, a viewer/editor component for a React 19 app
+  ◯ Vue - pptx-vue-viewer, a viewer/editor component for a Vue 3.5+ app
+  ◯ Angular - pptx-angular-viewer, a viewer/editor component for an Angular 22+ app
+  ◯ Core engine only - pptx-viewer-core, the framework-agnostic SDK, no UI
+  ◯ MCP server - pptx-viewer-mcp, PowerPoint editing tools for AI agents
 ```
 
+The whole flow is colour-highlighted (current row, confirmations, warnings, errors) and falls back to a plain numbered prompt in shells without raw keyboard input (piped stdin, some CI runners) or when `NO_COLOR`/a non-TTY output disables colour.
+
 Picking more than one is fine, for example React plus the MCP server to get both a viewer and AI-agent tooling in the same repo. `pptx-viewer-mcp` never gets installed as a dependency: since it's meant to be launched by an MCP client via `npx`, this just prints the client config to paste in.
 
 ### Compatibility check
@@ -42,7 +45,7 @@ If you picked React, Vue, or Angular and a `package.json` already exists in the
 When exactly one UI framework is selected, you're asked how to set it up:
 
 - **Install here** adds the package(s) to the project in the current directory (a `package.json` must already exist; run `npm init -y` first if not).
-- **Scaffold a new project** bootstraps a brand-new starter app in its own folder, using the framework's own official scaffolding tool ([`create-vite`](https://www.npmjs.com/package/create-vite) for React/Vue, [`@angular/cli`](https://www.npmjs.com/package/@angular/cli) for Angular), then wires in a minimal working `PowerPointViewer` example and installs the viewer package on top.
+- **Scaffold a new project** bootstraps a brand-new starter app in its own folder, using the framework's own official scaffolding tool ([`create-vite`](https://www.npmjs.com/package/create-vite) for React/Vue, [`@angular/cli`](https://www.npmjs.com/package/@angular/cli) for Angular), then wires in a working `PowerPointViewer` example (same pattern as the [live demos](https://christophervr.github.io/pptx-viewer/demo/): open an existing `.pptx`, or click "New Presentation" to build a blank deck with `PptxHandler.createBlank` and start editing right away) and installs the viewer package plus `pptx-viewer-core` on top.
 
 Scaffolding is only offered for a single framework at a time; if you select more than one UI framework together, the CLI installs into the current project instead.
 

package/dist/index.mjs

@@ -52,6 +52,28 @@ function parseArgs(args) {
   return parsed;
 }
 
+// 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/project-deps.ts
 import { existsSync, readFileSync } from "fs";
 import { join } from "path";
@@ -150,6 +172,140 @@ function installCommand(pm, 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") {
@@ -171,15 +327,12 @@ function parseSelection(answer, count) {
 }
 function printOptions(options) {
   options.forEach((opt, i) => {
-    console.log(`  ${i + 1}) ${opt.label} - ${opt.description}`);
+    console.log(`  ${cyan(`${i + 1})`)} ${bold(opt.label)} ${dim(`- ${opt.description}`)}`);
   });
 }
-async function selectOption(question, options) {
+async function selectByNumber(options) {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
   try {
-    console.log(`
-${question}
-`);
     printOptions(options);
     for (; ; ) {
       const answer = (await rl.question(`
@@ -194,12 +347,9 @@ Enter a number (1-${options.length}): `)).trim();
     rl.close();
   }
 }
-async function multiSelect(question, options) {
+async function selectManyByNumber(options) {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
   try {
-    console.log(`
-${question}
-`);
     printOptions(options);
     for (; ; ) {
       const answer = await rl.question(
@@ -216,10 +366,32 @@ Enter one or more numbers, comma-separated (e.g. "1,3"), or "all": `
     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(`${question} (Y/n): `)).trim().toLowerCase();
+    const answer = (await rl.question(`${bold(question)} ${dim("(Y/n)")} `)).trim().toLowerCase();
     return answer === "" || answer === "y" || answer === "yes";
   } finally {
     rl.close();
@@ -228,7 +400,7 @@ async function confirm(question) {
 async function input(question, defaultValue) {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
   try {
-    const answer = (await rl.question(`${question} (${defaultValue}): `)).trim();
+    const answer = (await rl.question(`${bold(question)} ${dim(`(${defaultValue})`)} `)).trim();
     return answer === "" ? defaultValue : answer;
   } finally {
     rl.close();
@@ -236,48 +408,91 @@ async function input(question, defaultValue) {
 }
 
 // src/targets.ts
-var REACT_APP_TSX = `import { useState } from 'react';
+var REACT_APP_TSX = `import { useCallback, useState } from 'react';
+import { PptxHandler } from 'pptx-viewer-core';
 import { PowerPointViewer } from 'pptx-react-viewer';
-import 'pptx-react-viewer/styles';
+import 'pptx-react-viewer/styles.css';
 
 export default function App() {
-	const [content, setContent] = useState<ArrayBuffer | null>(null);
-
-	const onPick = (e: React.ChangeEvent<HTMLInputElement>) =>
-		e.target.files?.[0]?.arrayBuffer().then(setContent);
+	const [content, setContent] = useState<Uint8Array | null>(null);
+
+	const loadFile = useCallback((file: File) => {
+		const reader = new FileReader();
+		reader.onload = () => setContent(new Uint8Array(reader.result as ArrayBuffer));
+		reader.readAsArrayBuffer(file);
+	}, []);
+
+	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: '100vh' }}>
+				<PowerPointViewer content={content} canEdit />
+			</div>
+		);
+	}
 
 	return (
-		<div style={{ height: '100vh' }}>
-			{content ? (
-				<PowerPointViewer content={content} canEdit />
-			) : (
-				<input type="file" accept=".pptx" onChange={onPick} />
-			)}
+		<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, height: '100vh' }}>
+			<input
+				type="file"
+				accept=".pptx"
+				onChange={(e) => {
+					const file = e.target.files?.[0];
+					if (file) loadFile(file);
+				}}
+			/>
+			<button onClick={() => void newPresentation()}>or create a New Presentation</button>
 		</div>
 	);
 }
 `;
 var VUE_APP_VUE = `<script setup lang="ts">
 import { ref } from 'vue';
+import { PptxHandler } from 'pptx-viewer-core';
 import { PowerPointViewer } from 'pptx-vue-viewer';
-import 'pptx-vue-viewer/styles';
+import 'pptx-vue-viewer/styles.css';
 
 const content = ref<Uint8Array>();
 
+function loadFile(file: File) {
+	const reader = new FileReader();
+	reader.onload = () => (content.value = new Uint8Array(reader.result as ArrayBuffer));
+	reader.readAsArrayBuffer(file);
+}
+
 function onPick(e: Event) {
 	const file = (e.target as HTMLInputElement).files?.[0];
-	file?.arrayBuffer().then((buf) => (content.value = new Uint8Array(buf)));
+	if (file) 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 style="height: 100vh">
-		<PowerPointViewer v-if="content" :content="content" style="height: 100%" />
-		<input v-else type="file" accept=".pptx" @change="onPick" />
+	<div v-if="content" style="height: 100vh">
+		<PowerPointViewer :content="content" can-edit style="height: 100%" />
+	</div>
+	<div v-else style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100vh">
+		<input type="file" accept=".pptx" @change="onPick" />
+		<button @click="newPresentation">or create a New Presentation</button>
 	</div>
 </template>
 `;
 var ANGULAR_APP_TS = `import { Component, signal } from '@angular/core';
+import { PptxHandler } from 'pptx-viewer-core';
 import { PowerPointViewerComponent } from 'pptx-angular-viewer';
 
 @Component({
@@ -285,17 +500,20 @@ import { PowerPointViewerComponent } from 'pptx-angular-viewer';
 	standalone: true,
 	imports: [PowerPointViewerComponent],
 	template: \`
-		<div style="height: 100vh">
-			@if (content(); as c) {
-				<pptx-power-point-viewer [content]="c" style="height: 100%" />
-			} @else {
+		@if (content(); as c) {
+			<div style="height: 100vh">
+				<pptx-power-point-viewer [content]="c" [canEdit]="true" style="height: 100%" />
+			</div>
+		} @else {
+			<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100vh">
 				<input type="file" accept=".pptx" (change)="onPick($event)" />
-			}
-		</div>
+				<button (click)="newPresentation()">or create a New Presentation</button>
+			</div>
+		}
 	\`,
 })
 export class App {
-	content = signal<ArrayBuffer | null>(null);
+	content = signal<ArrayBuffer | Uint8Array | null>(null);
 
 	async onPick(e: Event) {
 		const file = (e.target as HTMLInputElement).files?.[0];
@@ -303,6 +521,14 @@ export class App {
 			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 TARGETS = [
@@ -311,6 +537,7 @@ var TARGETS = [
     label: "React",
     description: "pptx-react-viewer - viewer/editor component for a React 19 app",
     mode: "install",
+    group: "framework",
     packages: [
       "pptx-react-viewer",
       "react",
@@ -325,7 +552,7 @@ var TARGETS = [
       "react-i18next"
     ],
     nextSteps: `import { PowerPointViewer } from 'pptx-react-viewer';
-import 'pptx-react-viewer/styles';
+import 'pptx-react-viewer/styles.css';
 
 <PowerPointViewer content={arrayBuffer} canEdit />
 
@@ -333,9 +560,14 @@ Docs: https://www.npmjs.com/package/pptx-react-viewer`,
     compat: { peerPackage: "react", requiredMajor: 19 },
     scaffold: {
       command: "create-vite@latest",
-      args: (dir) => [dir, "--template", "react-ts"],
+      // --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",
@@ -354,10 +586,11 @@ Docs: https://www.npmjs.com/package/pptx-react-viewer`,
     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';
+import 'pptx-vue-viewer/styles.css';
 </script>
 
 <template>
@@ -368,8 +601,8 @@ Docs: https://www.npmjs.com/package/pptx-vue-viewer`,
     compat: { peerPackage: "vue", requiredMajor: 3 },
     scaffold: {
       command: "create-vite@latest",
-      args: (dir) => [dir, "--template", "vue-ts"],
-      extraPackages: ["pptx-vue-viewer", "jszip", "fast-xml-parser"],
+      args: (dir) => [dir, "--template", "vue-ts", "--no-interactive", "--no-immediate"],
+      extraPackages: ["pptx-vue-viewer", "pptx-viewer-core", "jszip", "fast-xml-parser"],
       entryCandidates: ["src/App.vue"],
       entryContent: VUE_APP_VUE
     }
@@ -379,9 +612,10 @@ Docs: https://www.npmjs.com/package/pptx-vue-viewer`,
     label: "Angular",
     description: "pptx-angular-viewer - viewer/editor component for an Angular 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';
+import 'pptx-angular-viewer/styles.css';
 
 <pptx-power-point-viewer [content]="content" />
 
@@ -389,8 +623,20 @@ Docs: https://www.npmjs.com/package/pptx-angular-viewer`,
     compat: { peerPackage: "@angular/core", requiredMajor: 22 },
     scaffold: {
       command: "@angular/cli@latest",
-      args: (dir) => ["new", dir, "--standalone", "--skip-git", "--style=css", "--skip-install"],
-      extraPackages: ["pptx-angular-viewer"],
+      // --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"],
       // 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
@@ -455,6 +701,24 @@ function findTargetsByIds(ids) {
     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 = [];
@@ -520,29 +784,35 @@ async function scaffoldProject(recipe, projectName, pm, cwd) {
 }
 
 // src/index.ts
+function printBanner() {
+  console.log(`
+${bold(cyan("pptx-viewer"))} ${dim("\xB7 interactive installer")}`);
+}
 function printUsage() {
+  printBanner();
   console.log(`
-@christophervr/pptx-viewer - interactive installer for the pptx-viewer packages
-
-Usage: npx @christophervr/pptx-viewer [options]
-
-Options:
-  --target <ids>  Skip the picker; comma-separated, any of: ${TARGETS.map((t) => t.id).join(", ")}
-  --scaffold      Bootstrap a brand-new starter project instead of installing here
-  --dir <name>    Project directory name for --scaffold
-  --pm <manager>  Package manager to use: bun, pnpm, yarn, npm (default: auto-detected)
-  --yes, -y       Skip confirmation prompts
-  --help, -h      Show this help
-
-Examples:
-  npx @christophervr/pptx-viewer
-  npx @christophervr/pptx-viewer --target react,mcp --yes
-  npx @christophervr/pptx-viewer --target react --scaffold --dir my-app --yes
+${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(", ")}
+                   (react, vue, and angular 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) {
-    return findTargetsByIds(parseTargetIds(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).");
@@ -559,7 +829,7 @@ async function confirmCompat(cwd, targets) {
       continue;
     }
     console.log(`
-Warning: ${result.message}`);
+${yellow("Warning:")} ${result.message}`);
     if (process.stdin.isTTY) {
       const proceed = await confirm("Continue anyway?");
       if (!proceed) {
@@ -577,12 +847,6 @@ async function resolveScaffoldChoice(installTargets, args) {
     }
     return { useScaffold: true, scaffoldTarget: scaffoldable[0] };
   }
-  if (scaffoldable.length > 1) {
-    console.log(
-      "\nScaffolding a new project only supports one UI framework at a time; installing instead."
-    );
-    return { useScaffold: false };
-  }
   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" },
@@ -609,13 +873,14 @@ async function runScaffoldMode(target, args, configTargets, cwd) {
   const pm = args.pm ?? detectPackageManager(cwd);
   console.log(
     `
-About to scaffold "${projectName}" with ${recipe.command} (${target.label}), then install with ${pm}.
+${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("\nSkipped.");
+      console.log(`
+${dim("Skipped.")}`);
       return;
     }
   }
@@ -623,15 +888,15 @@ About to scaffold "${projectName}" with ${recipe.command} (${target.label}), the
   if (!result.patchedFile) {
     console.log(
       `
-Scaffolded the project, but could not find an entry file to wire up automatically. See the quick-start snippet below and add it yourself.`
+${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.`
     );
   }
   console.log(
     `
-Done. Next steps:
+${green("\u2714")} ${bold("Done.")} Next steps:
 
-  cd ${projectName}
-  ${pm} run dev
+  ${cyan(`cd ${projectName}`)}
+  ${cyan(`${pm} run dev`)}
 
 ${target.nextSteps}
 `
@@ -650,22 +915,23 @@ async function runInstallMode(installTargets, configTargets, args, cwd) {
     }
     const proceedPastCompat = await confirmCompat(cwd, installTargets);
     if (!proceedPastCompat) {
-      console.log("\nAborted.");
+      console.log(`
+${red("Aborted.")}`);
       return;
     }
     const packages = mergePackages(installTargets);
     const pm = args.pm ?? detectPackageManager(cwd);
     const [command, cmdArgs] = installCommand(pm, packages);
     console.log(`
-About to run: ${command} ${cmdArgs.join(" ")}
+${bold("About to run:")} ${cyan(`${command} ${cmdArgs.join(" ")}`)}
 `);
     if (!args.yes && process.stdin.isTTY) {
       const proceed = await confirm("Install now?");
       if (!proceed) {
         console.log(
           `
-Skipped. Run this yourself when ready:
-  ${command} ${cmdArgs.join(" ")}
+${dim("Skipped.")} Run this yourself when ready:
+  ${cyan(`${command} ${cmdArgs.join(" ")}`)}
 `
         );
         return;
@@ -676,7 +942,7 @@ Skipped. Run this yourself when ready:
       throw new Error(`${command} exited with code ${exitCode}`);
     }
     console.log(`
-Done. Next steps:`);
+${green("\u2714")} ${bold("Done.")} Next steps:`);
     for (const target of installTargets) {
       console.log(`
 ${target.nextSteps}
@@ -695,9 +961,9 @@ async function main() {
     printUsage();
     return;
   }
+  printBanner();
   const targets = await resolveTargets(args.target);
-  console.log(`
-Selected: ${targets.map((t) => t.label).join(", ")}`);
+  assertSingleFramework(targets);
   const installTargets = targets.filter((t) => t.mode === "install");
   const configTargets = targets.filter((t) => t.mode === "print-config");
   const cwd = process.cwd();
@@ -710,6 +976,6 @@ Selected: ${targets.map((t) => t.label).join(", ")}`);
 }
 main().catch((err) => {
   const message = err instanceof Error ? err.message : String(err);
-  console.error(`Error: ${message}`);
+  console.error(`${red("\u2718 Error:")} ${message}`);
   process.exit(1);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@christophervr/pptx-viewer",
-	"version": "1.1.45",
+	"version": "1.2.0",
 	"description": "Interactive installer for the pptx-viewer family of packages: React, Vue, and Angular viewer components, the framework-agnostic core engine, and the MCP server.",
 	"keywords": [
 		"cli",