@christophervr/pptx-viewer 1.1.46 → 1.2.0

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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

package/dist/index.mjs

@@ -66,14 +66,13 @@ var blue = wrap(34, 39);
 var magenta = wrap(35, 39);
 var cyan = wrap(36, 39);
 var gray = wrap(90, 39);
-var symbols = {
-  pointer: "\u276F",
-  check: "\u2714",
-  cross: "\u2718",
-  radioOn: "\u25C9",
-  radioOff: "\u25EF",
-  bullet: "\xB7"
-};
+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";
@@ -179,15 +178,26 @@ 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") {
@@ -196,24 +206,34 @@ function runMenu(choices, multi) {
     }
     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)");
-    console.log(hint);
+    const totalLines = choices.length + 2;
     process.stdout.write(HIDE_CURSOR);
     function draw(first) {
       if (!first) {
-        process.stdout.write(moveUp(choices.length));
+        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) {
@@ -224,12 +244,30 @@ function runMenu(choices, multi) {
       cleanup();
       resolve(result);
     }
-    function onKeypress(_str, key) {
+    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);
@@ -240,20 +278,19 @@ function runMenu(choices, multi) {
         if (checked.has(cursor)) {
           checked.delete(cursor);
         } else {
-          checked.add(cursor);
+          check(cursor);
         }
         draw(false);
       } else if (multi && key?.name === "a") {
-        if (checked.size === choices.length) {
-          checked.clear();
-        } else {
-          choices.forEach((_, i) => checked.add(i));
-        }
+        toggleSelectAll();
         draw(false);
-      } else if (key?.name === "return") {
+      } 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]);
@@ -374,7 +411,7 @@ async function input(question, defaultValue) {
 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<Uint8Array | null>(null);
@@ -420,7 +457,7 @@ 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>();
 
@@ -500,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",
@@ -514,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 />
 
@@ -522,7 +560,11 @@ 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",
@@ -544,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>
@@ -558,7 +601,7 @@ 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"],
+      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
@@ -569,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" />
 
@@ -579,7 +623,19 @@ 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"],
+      // --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"],
@@ -645,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 = [];
@@ -721,6 +795,7 @@ ${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)
@@ -772,13 +847,6 @@ async function resolveScaffoldChoice(installTargets, args) {
     }
     return { useScaffold: true, scaffoldTarget: scaffoldable[0] };
   }
-  if (scaffoldable.length > 1) {
-    console.log(
-      `
-${dim("Scaffolding 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" },
@@ -895,6 +963,7 @@ async function main() {
   }
   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();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@christophervr/pptx-viewer",
-	"version": "1.1.46",
+	"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",