@christophervr/pptx-viewer 1.5.0 → 1.5.1

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.5.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.5.0) - 2026-07-11
+
+### Features
+
+- **cli:** Add svelte and vanilla js install/scaffold targets (by @ChristopherVR) ([768aafe](https://github.com/ChristopherVR/pptx-viewer/commit/768aafe14f57b75cc3d91a00c62be261c4044789))
+
 ## [1.4.2](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.4.2) - 2026-07-07
 
 ## [1.4.1](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.4.1) - 2026-07-05

package/dist/index.mjs

@@ -410,38 +410,76 @@ async function input(question, defaultValue) {
 // 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';
 
 @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: 100vh">
-				<pptx-power-point-viewer [content]="c" [canEdit]="true" style="height: 100%" />
+			<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 style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh; font-family: system-ui, sans-serif">
-				<h1 style="margin: 0; font-size: 24px; font-weight: 500; color: #e5e7eb">Open a Presentation</h1>
-				<label style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; border: 1px solid #4b5563; background: #1f2937; color: #f3f4f6; cursor: pointer; font-size: 14px">
-					Choose .pptx file
-					<input type="file" accept=".pptx" style="display: none" (change)="onPick($event)" />
-				</label>
-				<span style="color: #6b7280; font-size: 13px">or</span>
-				<button style="padding: 10px 20px; border-radius: 8px; border: none; background: #2563eb; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500" (click)="newPresentation()">New Presentation</button>
+			<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 file here, or</p>
+					<label class="pick-label" (click)="$event.stopPropagation()">
+						Choose .pptx file
+						<input #fileInput type="file" accept=".pptx" 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 (file?.name.endsWith('.pptx')) 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());
-		}
+		if (file) this.content.set(await file.arrayBuffer());
 	}
 
 	async newPresentation() {
@@ -487,17 +525,18 @@ bootstrapApplication(App, {
 // 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';
 
 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((file: File) => {
-		const reader = new FileReader();
-		reader.onload = () => setContent(new Uint8Array(reader.result as ArrayBuffer));
-		reader.readAsArrayBuffer(file);
+	const loadFile = useCallback(async (file: File) => {
+		setContent(new Uint8Array(await file.arrayBuffer()));
 	}, []);
 
 	const newPresentation = useCallback(async () => {
@@ -510,34 +549,55 @@ export default function App() {
 
 	if (content) {
 		return (
-			<div style={{ height: '100vh' }}>
-				<PowerPointViewer content={content} canEdit />
+			<div style={{ height: '100dvh' }}>
+				<PowerPointViewer
+					content={content}
+					canEdit
+					collaboration={collab}
+					onStartCollaboration={setCollab}
+					onStopCollaboration={() => setCollab(undefined)}
+				/>
 			</div>
 		);
 	}
 
 	return (
-		<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24, height: '100vh', fontFamily: 'system-ui, sans-serif' }}>
-			<h1 style={{ margin: 0, fontSize: 24, fontWeight: 500, color: '#e5e7eb' }}>Open a Presentation</h1>
-			<label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 20px', borderRadius: 8, border: '1px solid #4b5563', background: '#1f2937', color: '#f3f4f6', cursor: 'pointer', fontSize: 14, transition: 'background 0.15s' }}>
-				Choose .pptx file
-				<input
-					type="file"
-					accept=".pptx"
-					style={{ display: 'none' }}
-					onChange={(e) => {
-						const file = e.target.files?.[0];
-						if (file) loadFile(file);
-					}}
-				/>
-			</label>
-			<span style={{ color: '#6b7280', fontSize: 13 }}>or</span>
-			<button
-				onClick={() => void newPresentation()}
-				style={{ padding: '10px 20px', borderRadius: 8, border: 'none', background: '#2563eb', color: '#fff', cursor: 'pointer', fontSize: 14, fontWeight: 500 }}
+		<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 (file?.name.endsWith('.pptx')) void loadFile(file);
+				}}
+				onClick={() => document.getElementById('file-input')?.click()}
 			>
-				New Presentation
-			</button>
+				<h1>Open a Presentation</h1>
+				<p>Drag &amp; drop a .pptx file here, or</p>
+				<label className="pick-label" onClick={(e) => e.stopPropagation()}>
+					Choose .pptx file
+					<input
+						id="file-input"
+						type="file"
+						accept=".pptx"
+						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>
 	);
 }
@@ -564,27 +624,157 @@ export default i18n;
 
 // src/templates/shared.ts
 var MINIMAL_APP_CSS = `:root {
-  color-scheme: light dark;
+  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';
 
 	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 (file?.name.endsWith('.pptx')) void loadFile(file);
+	}
 
 	function onPick(e: Event) {
 		const file = (e.target as HTMLInputElement).files?.[0];
-		if (!file) return;
-		const reader = new FileReader();
-		reader.onload = () => (content = new Uint8Array(reader.result as ArrayBuffer));
-		reader.readAsArrayBuffer(file);
+		if (file) void loadFile(file);
 	}
 
 	async function newPresentation() {
@@ -597,88 +787,154 @@ var SVELTE_APP_SVELTE = `<script lang="ts">
 </script>
 
 {#if content}
-	<div style="height: 100vh">
-		<PowerPointViewer source={content} editable />
+	<div style="height: 100dvh">
+		<PowerPointViewer
+			source={content}
+			editable
+			collaboration={collab}
+			onstartcollaboration={(cfg) => { collab = cfg; }}
+			onstopcollaboration={() => { collab = undefined; }}
+		/>
 	</div>
 {:else}
-	<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh; font-family: system-ui, sans-serif">
-		<h1 style="margin: 0; font-size: 24px; font-weight: 500; color: #e5e7eb">Open a Presentation</h1>
-		<label style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; border: 1px solid #4b5563; background: #1f2937; color: #f3f4f6; cursor: pointer; font-size: 14px">
-			Choose .pptx file
-			<input type="file" accept=".pptx" style="display: none" onchange={onPick} />
-		</label>
-		<span style="color: #6b7280; font-size: 13px">or</span>
-		<button style="padding: 10px 20px; border-radius: 8px; border: none; background: #2563eb; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500" onclick={() => void newPresentation()}>New Presentation</button>
+	<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 file here, or</p>
+			<label class="pick-label" onclick={(e) => e.stopPropagation()}>
+				Choose .pptx file
+				<input id="file-input" type="file" accept=".pptx" 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 { PptxHandler } from 'pptx-viewer-core';
-import { createPptxViewer } from 'pptx-vanilla-viewer';
+var VANILLA_MAIN_TS = `import { createPptxViewer } from 'pptx-vanilla-viewer';
+import { PptxHandler } from 'pptx-viewer-core';
 
 import './style.css';
 
 const app = document.querySelector<HTMLDivElement>('#app')!;
 
-const picker = document.createElement('div');
-picker.setAttribute(
-	'style',
-	'display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh; font-family: system-ui, sans-serif',
-);
-picker.innerHTML = \`
-	<h1 style="margin: 0; font-size: 24px; font-weight: 500; color: #e5e7eb">Open a Presentation</h1>
-	<label style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; border: 1px solid #4b5563; background: #1f2937; color: #f3f4f6; cursor: pointer; font-size: 14px">
-		Choose .pptx file
-		<input id="file-input" type="file" accept=".pptx" style="display: none" />
-	</label>
-	<span style="color: #6b7280; font-size: 13px">or</span>
-	<button id="new-presentation" style="padding: 10px 20px; border-radius: 8px; border: none; background: #2563eb; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500">New Presentation</button>
-\`;
-app.append(picker);
-
-function show(content: ArrayBuffer | Uint8Array) {
-	picker.remove();
-	app.style.height = '100vh';
-	createPptxViewer(app, { source: content, editable: true });
-}
-
-picker.querySelector<HTMLInputElement>('#file-input')!.addEventListener('change', (e) => {
-	const file = (e.target as HTMLInputElement).files?.[0];
-	if (file) {
-		void file.arrayBuffer().then(show);
-	}
-});
+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 file here, or';
+
+	const label = document.createElement('label');
+	label.className = 'pick-label';
+	label.textContent = 'Choose .pptx file';
+
+	const input = document.createElement('input');
+	input.type = 'file';
+	input.accept = '.pptx';
+	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 (file?.name.endsWith('.pptx')) void file.arrayBuffer().then(show);
+	});
 
-picker.querySelector<HTMLButtonElement>('#new-presentation')!.addEventListener('click', () => {
-	void (async () => {
+	// 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';
 
 const content = ref<Uint8Array>();
+const over = ref(false);
+const collab = ref<CollaborationConfig | undefined>();
 
-function loadFile(file: File) {
-	const reader = new FileReader();
-	reader.onload = () => (content.value = new Uint8Array(reader.result as ArrayBuffer));
-	reader.readAsArrayBuffer(file);
+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 (file?.name.endsWith('.pptx')) void loadFile(file);
 }
 
 function onPick(e: Event) {
 	const file = (e.target as HTMLInputElement).files?.[0];
-	if (file) loadFile(file);
+	if (file) void loadFile(file);
 }
 
 async function newPresentation() {
@@ -691,19 +947,53 @@ async function newPresentation() {
 </script>
 
 <template>
-	<div v-if="content" style="height: 100vh">
-		<PowerPointViewer :content="content" can-edit style="height: 100%" />
+	<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 style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh; font-family: system-ui, sans-serif">
-		<h1 style="margin: 0; font-size: 24px; font-weight: 500; color: #e5e7eb">Open a Presentation</h1>
-		<label style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; border: 1px solid #4b5563; background: #1f2937; color: #f3f4f6; cursor: pointer; font-size: 14px">
-			Choose .pptx file
-			<input type="file" accept=".pptx" style="display: none" @change="onPick" />
-		</label>
-		<span style="color: #6b7280; font-size: 13px">or</span>
-		<button style="padding: 10px 20px; border-radius: 8px; border: none; background: #2563eb; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500" @click="newPresentation">New Presentation</button>
+	<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 file here, or</p>
+			<label class="pick-label" @click.stop>
+				Choose .pptx file
+				<input ref="input" type="file" accept=".pptx" 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';
@@ -724,6 +1014,13 @@ 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",
@@ -775,7 +1072,8 @@ Docs: https://www.npmjs.com/package/pptx-react-viewer`,
       extraFiles: {
         "src/i18n.ts": REACT_I18N_TS,
         "src/index.css": MINIMAL_APP_CSS
-      }
+      },
+      optionalExtras: COLLAB_EXTRAS
     }
   },
   {
@@ -808,7 +1106,8 @@ Docs: https://www.npmjs.com/package/pptx-vue-viewer`,
       ],
       entryCandidates: ["src/App.vue"],
       entryContent: VUE_APP_VUE,
-      extraFiles: { "src/main.ts": VUE_MAIN_TS }
+      extraFiles: { "src/main.ts": VUE_MAIN_TS },
+      optionalExtras: COLLAB_EXTRAS
     }
   },
   {
@@ -844,7 +1143,22 @@ Docs: https://www.npmjs.com/package/pptx-angular-viewer`,
       // 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 }
+      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
     }
   },
   {
@@ -872,7 +1186,8 @@ Docs: https://www.npmjs.com/package/pptx-svelte-viewer`,
       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 }
+      extraFiles: { "src/app.css": MINIMAL_APP_CSS },
+      optionalExtras: COLLAB_EXTRAS
     }
   },
   {
@@ -895,12 +1210,19 @@ 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", "jszip", "fast-xml-parser"],
+      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 }
+      extraFiles: { "src/style.css": MINIMAL_APP_CSS },
+      optionalExtras: COLLAB_EXTRAS
     }
   },
   {
@@ -999,7 +1321,7 @@ 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 ? "ignore" : "inherit";
+    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));
@@ -1138,6 +1460,18 @@ async function runScaffoldMode(target, args, configTargets, cwd) {
   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);
@@ -1155,7 +1489,7 @@ ${dim("Skipped.")}`);
       return;
     }
   }
-  const result = await scaffoldProject(recipe, projectName, pm, cwd);
+  const result = await scaffoldProject(effectiveRecipe, projectName, pm, cwd);
   if (!result.patchedFile) {
     console.log(
       `

package/package.json

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