@office-kit/pptx-dev 0.9.0 → 0.11.0

package/dist/cli.mjs

@@ -1,11 +1,13 @@
 #!/usr/bin/env node
-import { a as createDeckBuilder, i as initProject, n as exportDeck, r as inspectTemplate } from "./src-YH6kAXbA.mjs";
+import { a as editorStore, c as createDeckBuilder, i as initProject, n as exportDeck, o as mergeDecks, r as inspectTemplate, s as sourceFingerprint } from "./src-CI73YbYS.mjs";
+import { n as renderDeck } from "./build-cpmt-r9Q.mjs";
 import { createRequire } from "node:module";
-import { chmod, lstat, mkdir, readFile, readdir, realpath, stat, unlink, writeFile } from "node:fs/promises";
-import { dirname, extname, isAbsolute, join, relative, resolve, sep } from "node:path";
+import { chmod, lstat, mkdir, readFile, readdir, realpath, rename, rm, stat, unlink, writeFile } from "node:fs/promises";
+import { basename, dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
 import { watch } from "node:fs";
-import ts from "typescript";
-import { randomBytes, randomUUID } from "node:crypto";
+import { createHash, randomBytes, randomUUID } from "node:crypto";
+import { getGroupChildren, getShapeBounds, getShapeId, getShapeKind, getShapeRotation, getShapeXmlString, getSlideShapes, getSlideXmlString, getSlides, loadPresentation } from "@office-kit/pptx";
+import { planPropEdit, planTextEdit, verifyTextEdit } from "@office-kit/pptx-dsl/source-edit";
 import { chromium } from "playwright";
 import { createServer } from "node:http";
 import MarkdownIt from "markdown-it";
@@ -112,10 +114,21 @@ async function createHistory(directory, notify = () => {}) {
 	async function replace(change, expected, next) {
 		if (!equal(await contents(change.file), expected)) throw new Error(`History conflict in ${change.file}. Newer changes were preserved.`);
 		const file = join(root, change.file);
-		if (next) {
-			await mkdir(dirname(file), { recursive: true });
-			await writeFile(file, next);
-		} else await unlink(file);
+		if (!next) return unlink(file);
+		await mkdir(dirname(file), { recursive: true });
+		const temporary = `${file}.${randomUUID()}.tmp`;
+		try {
+			await writeFile(temporary, next, { flag: "wx" });
+			const mode = await lstat(file).then((info) => info.mode, (cause) => {
+				if (cause.code === "ENOENT") return void 0;
+				throw cause;
+			});
+			if (mode !== void 0) await chmod(temporary, mode & 4095);
+			if (!equal(await contents(change.file), expected)) throw new Error(`History conflict in ${change.file}. Newer changes were preserved.`);
+			await rename(temporary, file);
+		} finally {
+			await rm(temporary, { force: true });
+		}
 	}
 	try {
 		record(await snapshot(), "Initial state");
@@ -188,12 +201,19 @@ async function createHistory(directory, notify = () => {}) {
 }
 //#endregion
 //#region src/text-edit.ts
+const planErrors = {
+	invalid: "Invalid text edit.",
+	"not-unique-on-slide": "Text cannot be located uniquely on this slide. Use Apply with AI.",
+	"not-found": "Text is computed or has multiple source matches. Use Apply with AI.",
+	ambiguous: "Text is computed or has multiple source matches. Use Apply with AI."
+};
+const message = (error) => error instanceof Error ? error.message : String(error);
 /** Literal edits are deliberately conservative: computed and ambiguous text goes to the agent. */
 function createTextEditor(entry, preview, verify) {
 	let busy = false;
 	async function restore(change) {
-		if (await realpath(change.file) !== change.file || await readFile(change.file, "utf8") !== change.after) throw new Error("Source changed during editing. Your newer changes were preserved.");
-		await writeFile(change.file, change.before);
+		if (await realpath(change.path) !== change.path || await readFile(change.path, "utf8") !== change.after) throw new Error("Source changed during editing. Your newer changes were preserved.");
+		await writeFile(change.path, change.before);
 	}
 	return { async edit(value) {
 		if (busy) throw new Error("A text edit is already running.");
@@ -201,51 +221,329 @@ function createTextEditor(entry, preview, verify) {
 		try {
 			const current = preview();
 			if (value.revision !== current.revision) throw new Error("Preview changed. Select the text again.");
-			if (!Number.isInteger(value.slide) || !current.slides[value.slide] || typeof value.before !== "string" || !value.before.trim() || value.before.length > 12e3 || typeof value.after !== "string" || value.after.length > 12e3 || value.after === value.before) throw new Error("Invalid text edit.");
-			if (current.slideTexts[value.slide].split(value.before).length !== 2) throw new Error("Text cannot be located uniquely on this slide. Use Apply with AI.");
+			if (!Number.isInteger(value.slide) || !current.slides[value.slide] || typeof value.before !== "string" || typeof value.after !== "string") throw new Error(planErrors.invalid);
 			const root = await realpath(dirname(entry));
-			const files = await Promise.all([...new Set(current.dependencies)].filter((file) => /\.[cm]?[jt]sx?$/.test(file)).map(async (file) => {
-				const path = await realpath(file), local = relative(root, path);
-				if (local.startsWith("..") || isAbsolute(local) || local.split(/[\\/]/).includes("node_modules")) return null;
-				return {
-					file: path,
-					before: await readFile(path, "utf8")
-				};
-			}));
-			const candidates = [];
-			for (const item of files) {
-				if (!item) continue;
-				const source = ts.createSourceFile(item.file, item.before, ts.ScriptTarget.Latest, true, /[jt]sx$/.test(extname(item.file)) ? ts.ScriptKind.TSX : ts.ScriptKind.TS);
-				const visit = (node) => {
-					if ((ts.isJsxText(node) ? node.text.split(/\r\n|\n|\r/).map((line, index, lines) => {
-						let value = line.replaceAll("	", " ");
-						if (index) value = value.trimStart();
-						if (index < lines.length - 1) value = value.trimEnd();
-						return value;
-					}).filter(Boolean).join(" ") : ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node) ? node.text : void 0) === value.before) {
-						const replacement = ts.isJsxText(node) || ts.isJsxAttribute(node.parent) ? "{" + JSON.stringify(value.after) + "}" : JSON.stringify(value.after);
-						const start = ts.isJsxText(node) ? node.pos : node.getStart(source);
-						candidates.push({
-							...item,
-							after: item.before.slice(0, start) + replacement + item.before.slice(node.end)
+			const plan = planTextEdit({
+				files: (await Promise.all([...new Set(current.dependencies)].filter((file) => /\.[cm]?[jt]sx?$/.test(file)).map(async (file) => {
+					const path = await realpath(file), local = relative(root, path);
+					if (local.startsWith("..") || isAbsolute(local) || local.split(/[\\/]/).includes("node_modules")) return null;
+					return {
+						path,
+						source: await readFile(path, "utf8")
+					};
+				}))).filter((file) => file !== null),
+				slideText: current.slideTexts[value.slide],
+				before: value.before,
+				after: value.after
+			});
+			if (!plan.ok) throw new Error(planErrors[plan.reason]);
+			const { change } = plan;
+			if (preview().revision !== current.revision || await realpath(change.path) !== change.path || await readFile(change.path, "utf8") !== change.before) throw new Error("Source changed. Select the text again.");
+			await writeFile(change.path, change.after);
+			try {
+				if (await verify()) throw new Error("The text change did not build.");
+				if (!verifyTextEdit({
+					previous: current,
+					next: preview(),
+					slide: value.slide,
+					before: value.before,
+					after: value.after
+				}).ok) throw new Error("This source affects other text or slides. Use Apply with AI for a local edit.");
+				if (await realpath(change.path) !== change.path || await readFile(change.path, "utf8") !== change.after) throw new Error("Source changed during editing.");
+			} catch (error) {
+				try {
+					await restore(change);
+					await verify();
+				} catch (cleanup) {
+					throw new Error(`${message(error)} ${message(cleanup)}`, { cause: error });
+				}
+				throw error;
+			}
+		} finally {
+			busy = false;
+		}
+	} };
+}
+//#endregion
+//#region src/deck-diff.ts
+const ANGLE_UNITS = 6e4;
+function shapesById(shapes) {
+	const result = /* @__PURE__ */ new Map();
+	const visit = (shape, grouped) => {
+		result.set(getShapeId(shape), {
+			shape,
+			grouped
+		});
+		for (const child of getGroupChildren(shape)) visit(child, true);
+	};
+	for (const shape of shapes) visit(shape, false);
+	return result;
+}
+function withoutTransform(xml) {
+	return xml.replace(/(<a:xfrm\b[^>]*?) rot="-?\d+"/, "$1").replace(/<a:off x="-?\d+" y="-?\d+"\/>/, "").replace(/<a:ext cx="\d+" cy="\d+"\/>/, "");
+}
+function withoutShapes(xml) {
+	return xml.replace(/<p:spTree>[\s\S]*<\/p:spTree>/, "");
+}
+function geometryEdits(source, edited) {
+	const before = getShapeBounds(source);
+	const after = getShapeBounds(edited);
+	const edits = [];
+	if (before && after) {
+		const pairs = [
+			[
+				"x",
+				before.x,
+				after.x
+			],
+			[
+				"y",
+				before.y,
+				after.y
+			],
+			[
+				"width",
+				before.w,
+				after.w
+			],
+			[
+				"height",
+				before.h,
+				after.h
+			]
+		];
+		for (const [prop, from, to] of pairs) if (from !== to) edits.push({
+			prop,
+			from,
+			to
+		});
+	}
+	const fromAngle = Math.round(getShapeRotation(source) * ANGLE_UNITS);
+	const toAngle = Math.round(getShapeRotation(edited) * ANGLE_UNITS);
+	if (fromAngle !== toAngle) edits.push({
+		prop: "rotation",
+		from: fromAngle,
+		to: toAngle
+	});
+	return edits;
+}
+/**
+* What the editor changed relative to the deck built from source. Shapes are
+* matched by slide index and shape id — the editor edits the deck the server
+* built, so ids agree. A change this diff cannot state as typed props is
+* reported as `unsupported`, never dropped.
+*/
+function diffDecks(source, edited) {
+	const changes = [];
+	const sourceSlides = getSlides(source);
+	const editedSlides = getSlides(edited);
+	if (sourceSlides.length !== editedSlides.length) changes.push({
+		kind: "unsupported",
+		slide: null,
+		shapeId: null,
+		description: `slide count ${sourceSlides.length} → ${editedSlides.length}`
+	});
+	const count = Math.min(sourceSlides.length, editedSlides.length);
+	for (let slide = 0; slide < count; slide++) {
+		const sourceSlide = sourceSlides[slide];
+		const editedSlide = editedSlides[slide];
+		if (withoutShapes(getSlideXmlString(sourceSlide)) !== withoutShapes(getSlideXmlString(editedSlide))) changes.push({
+			kind: "unsupported",
+			slide,
+			shapeId: null,
+			description: "slide properties"
+		});
+		const before = shapesById(getSlideShapes(sourceSlide));
+		const after = shapesById(getSlideShapes(editedSlide));
+		for (const [shapeId, { shape, grouped }] of after) {
+			const original = before.get(shapeId)?.shape;
+			if (!original) {
+				changes.push({
+					kind: "unsupported",
+					slide,
+					shapeId,
+					description: "shape added"
+				});
+				continue;
+			}
+			if (getShapeKind(shape) === "group") {
+				if (geometryEdits(original, shape).length) changes.push({
+					kind: "unsupported",
+					slide,
+					shapeId,
+					description: "group transform"
+				});
+				continue;
+			}
+			if (withoutTransform(getShapeXmlString(original)) !== withoutTransform(getShapeXmlString(shape))) changes.push({
+				kind: "unsupported",
+				slide,
+				shapeId,
+				description: "properties other than position, size and rotation"
+			});
+			const edits = geometryEdits(original, shape);
+			if (edits.length && grouped) changes.push({
+				kind: "unsupported",
+				slide,
+				shapeId,
+				description: "grouped shape geometry"
+			});
+			else if (edits.length) changes.push({
+				kind: "geometry",
+				slide,
+				shapeId,
+				edits
+			});
+		}
+		for (const shapeId of before.keys()) if (!after.has(shapeId)) changes.push({
+			kind: "unsupported",
+			slide,
+			shapeId,
+			description: "shape removed"
+		});
+	}
+	return changes;
+}
+//#endregion
+//#region src/source-sync.ts
+const key = (change) => `${change.kind}:${change.slide}:${change.shapeId}:${change.kind === "unsupported" ? change.description : ""}`;
+/**
+* Writes the editor's changes back into the TSX source as typed prop edits.
+* Every write is verified by rebuilding: the changes it claims must disappear
+* from the diff and no other change may appear, or every file is restored.
+*/
+function createSourceSync(entry, source, rebuild) {
+	let busy = false;
+	async function localFile(fileName) {
+		const root = await realpath(dirname(entry));
+		let path;
+		try {
+			path = await realpath(fileName);
+		} catch {
+			return null;
+		}
+		const local = relative(root, path);
+		if (local.startsWith("..") || isAbsolute(local) || local.split(/[\\/]/).includes("node_modules")) return null;
+		return path;
+	}
+	return { async sync(edited) {
+		if (busy) throw new Error("A source write-back is already running.");
+		busy = true;
+		try {
+			const built = source();
+			if (!built?.shapeSources) throw new Error("The source deck is not built yet.");
+			const shapeSources = built.shapeSources;
+			const editedDeck = await loadPresentation(edited);
+			const changes = diffDecks(await loadPresentation(built.bytes), editedDeck);
+			const uses = /* @__PURE__ */ new Map();
+			for (const bySlide of Object.values(shapeSources)) for (const chain of Object.values(bySlide)) {
+				const at = chain.at(-1);
+				if (at) {
+					const id = `${at.fileName}:${at.lineNumber}:${at.columnNumber}`;
+					uses.set(id, (uses.get(id) ?? 0) + 1);
+				}
+			}
+			const pending = [];
+			const targets = [];
+			for (const change of changes) {
+				if (change.kind !== "geometry") {
+					pending.push(change);
+					continue;
+				}
+				const anchor = shapeSources[change.slide]?.[change.shapeId]?.at(-1);
+				if (!anchor) {
+					pending.push({
+						...change,
+						reason: "no source element"
+					});
+					continue;
+				}
+				if ((uses.get(`${anchor.fileName}:${anchor.lineNumber}:${anchor.columnNumber}`) ?? 0) > 1) {
+					pending.push({
+						...change,
+						reason: "element makes several shapes"
+					});
+					continue;
+				}
+				targets.push({
+					change,
+					anchor
+				});
+			}
+			const byFile = /* @__PURE__ */ new Map();
+			for (const target of targets) {
+				const path = await localFile(target.anchor.fileName);
+				if (!path) {
+					pending.push({
+						...target.change,
+						reason: "source outside the project"
+					});
+					continue;
+				}
+				byFile.set(path, [...byFile.get(path) ?? [], target]);
+			}
+			const files = [];
+			const written = [];
+			for (const [path, fileTargets] of byFile) {
+				const before = await readFile(path, "utf8");
+				let text = before;
+				fileTargets.sort((a, b) => b.anchor.lineNumber - a.anchor.lineNumber || b.anchor.columnNumber - a.anchor.columnNumber);
+				for (const { change, anchor } of fileTargets) {
+					const plan = planPropEdit({
+						file: {
+							path,
+							source: text
+						},
+						anchor: {
+							path,
+							lineNumber: anchor.lineNumber,
+							columnNumber: anchor.columnNumber
+						},
+						edits: change.edits
+					});
+					if (!plan.ok) {
+						pending.push({
+							...change,
+							reason: plan.reason
 						});
+						continue;
 					}
-					ts.forEachChild(node, visit);
-				};
-				visit(source);
+					text = plan.change.after;
+					written.push(change);
+				}
+				if (text !== before) files.push({
+					path,
+					before,
+					after: text
+				});
 			}
-			if (candidates.length !== 1) throw new Error("Text is computed or has multiple source matches. Use Apply with AI.");
-			const change = candidates[0];
-			if (preview().revision !== current.revision || await realpath(change.file) !== change.file || await readFile(change.file, "utf8") !== change.before) throw new Error("Source changed. Select the text again.");
-			await writeFile(change.file, change.after);
+			if (files.length === 0) return {
+				written: [],
+				pending,
+				complete: false
+			};
+			const restore = async () => {
+				for (const file of files) if (await readFile(file.path, "utf8") !== file.after) throw new Error("Source changed during write-back. Your newer changes were preserved.");
+				for (const file of files) await writeFile(file.path, file.before);
+				await rebuild();
+			};
+			for (const file of files) if (await readFile(file.path, "utf8") !== file.before) throw new Error("Source changed. Save again.");
+			for (const file of files) await writeFile(file.path, file.after);
 			try {
-				if (await verify()) throw new Error("The text change did not build.");
-				const next = preview();
-				if (next.slides.length !== current.slides.length || next.slides.some((svg, index) => index !== value.slide && svg !== current.slides[index]) || next.slideTexts[value.slide] !== current.slideTexts[value.slide].replace(value.before, value.after)) throw new Error("This source affects other text or slides. Use Apply with AI for a local edit.");
-				if (await realpath(change.file) !== change.file || await readFile(change.file, "utf8") !== change.after) throw new Error("Source changed during editing.");
+				const error = await rebuild();
+				if (error) throw new Error("The written source did not build: " + error);
+				const rebuilt = source();
+				if (!rebuilt) throw new Error("The written source did not build.");
+				const remaining = diffDecks(await loadPresentation(rebuilt.bytes), editedDeck);
+				const expected = new Set(pending.map(key));
+				if (remaining.some((change) => !expected.has(key(change)))) throw new Error("The written source changed more than the edited shapes.");
+				return {
+					written,
+					pending,
+					complete: remaining.length === 0 && sourceFingerprint(rebuilt.bytes) === sourceFingerprint(edited)
+				};
 			} catch (error) {
-				await restore(change);
-				await verify();
+				await restore();
 				throw error;
 			}
 		} finally {
@@ -323,65 +621,365 @@ function createVisualReviewer(entry, slides) {
 	};
 }
 //#endregion
+//#region src/preview-i18n.ts
+/** Labels for the preview shell; the editor sends its active locale via editor-focus. */
+const previewI18nScript = `
+let previewLocale=navigator.language?.toLowerCase().startsWith('ja')?'ja':'en';
+try{const stored=localStorage.getItem('ok-editor-locale');if(stored==='ja'||stored==='en')previewLocale=stored;}catch{}
+let connectionLost=false;
+const previewJapanese={
+ 'Normal':'標準','Normal (Esc)':'標準 (Esc)','Agents':'エージェント','Close Agents':'エージェントを閉じる','Presentation views':'プレゼンテーションの表示','Present':'プレゼンテーション','Presenter view':'発表者ビュー',
+ 'Download PPTX':'PPTXをダウンロード','Slides':'スライド','Slide viewer':'スライドビューアー','Presentation editor':'プレゼンテーション編集',
+ 'Chat width':'チャットの幅','Drag to resize · Double-click to reset':'ドラッグで幅を変更・ダブルクリックでリセット',
+ 'Previous slide':'前のスライド','Next slide':'次のスライド','Zoom':'ズーム','Fit':'画面に合わせる',
+ 'Exit · Esc':'終了 · Esc','Exit view · Esc':'表示を終了 · Esc','Slide position':'スライドの位置','No slides':'スライドがありません','Whole project':'プロジェクト全体',
+ 'Waiting for slides…':'スライドを待っています…','Building…':'ビルド中…','Updating…':'更新中…','Reconnecting…':'再接続中…',
+ 'Build failed · showing last successful output':'ビルドに失敗しました・最後に成功した結果を表示中',
+ 'Changes appear automatically · Text can be selected and copied':'変更は自動的に反映されます・文字を選択してコピーできます',
+ 'Skipped during presentation':'プレゼンテーションでスキップされます',
+ 'Allow popups to open presenter view.':'発表者ビューを開くにはポップアップを許可してください。',
+ 'Office Kit — PowerPoint preview':'Office Kit — PowerPoint プレビュー'
+};
+const pt=key=>previewLocale==='ja'?(previewJapanese[key]??key):key;
+const slideLabel=i=>previewLocale==='ja'?'スライド '+(i+1):'Slide '+(i+1);
+const slideCount=()=>!state.slides.length?pt('No slides'):previewLocale==='ja'?'スライド '+(index+1)+' / '+state.slides.length:'Slide '+(index+1)+' of '+state.slides.length;
+function updatePreviewStatus(){
+ byId('status').textContent=connectionLost?pt('Reconnecting…'):state.error?pt('Build failed · showing last successful output'):state.building?pt('Updating…'):previewLocale==='ja'?state.slides.length+' スライド・ライブ':state.slides.length+' slides · Live';
+}
+function updatePreviewLabels(){
+ document.documentElement.lang=previewLocale;document.title=pt('Office Kit — PowerPoint preview');
+ const labels={'#present':'Present','#presenter':'Presenter view','.download':'Download PPTX','#toggle-chat span':'Agents','#agents-title':'Agents','.filmstrip h2':'Slides','#empty':'Waiting for slides…','footer .hint':'Changes appear automatically · Text can be selected and copied','label[for="zoom"]':'Zoom','#zoom option[value="fit"]':'Fit'};
+ for(const [selector,key] of Object.entries(labels))document.querySelector(selector).textContent=pt(key);
+ for(const [selector,key] of Object.entries({'.filmstrip':'Slides','main':'Slide viewer','#chat-resizer':'Chat width','#close-chat':'Close Agents','#toggle-editor':'Normal','.status-views':'Presentation views','#prev':'Previous slide','#present-prev':'Previous slide','#next':'Next slide','#present-next':'Next slide'}))document.querySelector(selector).setAttribute('aria-label',pt(key));
+ byId('editor-frame').title=pt('Presentation editor');byId('chat-resizer').title=pt('Drag to resize · Double-click to reset');
+ byId('exit-present').textContent=pt('Exit · Esc');
+ byId('close-chat').title=pt('Close Agents');byId('toggle-editor').title=pt('Normal (Esc)');
+ byId('count').textContent=slideCount();byId('present-count').textContent=slideCount();
+ updateAnimationNotice();
+ slide.setAttribute('aria-label',slideLabel(index));
+ for(const [i,item] of Array.from(thumbnails.children).entries()){
+  item.firstElementChild.setAttribute('aria-label',slideLabel(i));
+  item.firstElementChild.title=state.hiddenSlides?.[i]?pt('Skipped during presentation'):'';
+ }
+ updateChatWidthAria();updatePreviewStatus();
+}
+`;
+//#endregion
+//#region src/transition-script.ts
+/** Presentation-only visual transitions. All layers stay inside the clipped slide. */
+const transitionScript = `
+let transitionAnimations=[],transitionCleanup;
+const reducedMotion=matchMedia('(prefers-reduced-motion: reduce)');
+function cancelTransition(){
+  const cleanup=transitionCleanup;transitionCleanup=undefined;
+  for(const animation of transitionAnimations)animation.cancel();
+  transitionAnimations=[];cleanup?.();
+}
+reducedMotion.addEventListener('change',()=>{if(reducedMotion.matches){cancelTransition();scheduleAdvance();}});
+function renderSlide(svg,options){
+  const previous=displayedSvg;
+  cancelTransition();
+  // What the viewer last saw, not the drawing the slide started as: leaving a
+  // slide part-way through its build must not flash the effects still to come.
+  const previousMarkup=canvas.innerHTML;
+  displayedSvg=svg;
+  const style='<style>svg{display:block;width:100%;height:100%}.transition-layer{position:absolute;inset:0;background:white;overflow:hidden}.transition-old{pointer-events:none}</style>';
+  canvas.innerHTML=svg?style+svg:'';
+  const playableEffects=['fade','push','wipe','cover','pull','zoom','split','circle','diamond','plus','blinds','comb','checker','strips','randomBar','dissolve','wedge','newsflash','wheel'];
+  // Choose per visit without replacing the persisted random transition or its timing.
+  const effect=options?.effect==='random'?playableEffects[Math.floor(Math.random()*playableEffects.length)]:options?.effect;
+  if(!previous||!svg||reducedMotion.matches||(effect==='cut'&&!options.thruBlack)||!(effect==='cut'||playableEffects.includes(effect)))return;
+  const incoming=document.createElement('div'),outgoing=document.createElement('div');
+  incoming.className='transition-layer';incoming.innerHTML=svg;
+  outgoing.className='transition-layer transition-old';outgoing.innerHTML=previousMarkup;
+  outgoing.setAttribute('aria-hidden','true');outgoing.inert=true;
+  canvas.innerHTML=style;canvas.append(outgoing,incoming);
+  // PowerPoint plays fast/med/slow as 0.5/0.75/1 s; p14:dur overrides them.
+  const duration=options.durationMs??(options.speed==='slow'?1000:options.speed==='fast'?500:750);
+  const timing={duration,easing:'ease-in-out',fill:'both'};
+  const animate=(node,frames,easing=timing.easing)=>transitionAnimations.push(node.animate(frames,{...timing,easing}));
+  const vectors={l:[-100,0],r:[100,0],u:[0,-100],d:[0,100],lu:[-100,-100],ru:[100,-100],ld:[-100,100],rd:[100,100]};
+  const [x,y]=vectors[options.direction]??vectors.l;
+  const shift=(a,b)=>'translate('+a+'%,'+b+'%)';
+  if(effect==='cut'){
+    slide.style.background='black';outgoing.style.visibility='hidden';
+    animate(incoming,[{opacity:0},{opacity:1}],'steps(1,end)');
+  }else if(effect==='fade'){
+    if(options.thruBlack){
+      outgoing.style.background='black';incoming.style.background='black';slide.style.background='black';
+      animate(outgoing,[{opacity:1,offset:0},{opacity:0,offset:.5},{opacity:0,offset:1}]);
+      animate(incoming,[{opacity:0,offset:0},{opacity:0,offset:.5},{opacity:1,offset:1}]);
+    }else animate(incoming,[{opacity:0},{opacity:1}]);
+  }else if(effect==='push'||effect==='cover'){
+    animate(incoming,[{transform:shift(-x,-y)},{transform:shift(0,0)}]);
+    if(effect==='push')animate(outgoing,[{transform:shift(0,0)},{transform:shift(x,y)}]);
+  }else if(effect==='pull'){
+    canvas.append(outgoing);
+    animate(outgoing,[{transform:shift(0,0)},{transform:shift(x,y)}]);
+  }else if(effect==='wipe'){
+    const clips={l:'inset(0 0 0 100%)',r:'inset(0 100% 0 0)',u:'inset(100% 0 0 0)',d:'inset(0 0 100% 0)'};
+    animate(incoming,[{clipPath:clips[options.direction]??clips.l},{clipPath:'inset(0 0 0 0)'}]);
+  }else if(effect==='blinds'||effect==='comb'){
+    const vertical=options.direction==='vert';
+    const bands=(progress)=>{
+      const points=[];
+      for(let band=0;band<8;band++){
+        const start=band*12.5,end=start+12.5;
+        const left=effect==='comb'&&band%2?100*(1-progress):0;
+        const right=effect==='comb'&&band%2?100:100*progress;
+        const rect=effect==='blinds'
+          ?[[start,0],[start+12.5*progress,0],[start+12.5*progress,100],[start,100]]
+          :[[left,start],[right,start],[right,end],[left,end]];
+        // Return along the same bridge so disconnected bands share one clip polygon.
+        points.push([0,0],...rect,rect[0],[0,0]);
+      }
+      return 'polygon('+points.map(([x,y])=>vertical?y+'% '+x+'%':x+'% '+y+'%').join(',')+')';
+    };
+    animate(incoming,[{clipPath:bands(0)},{clipPath:bands(1)}]);
+  }else if(effect==='checker'){
+    const cells=(progress)=>{
+      const points=[];
+      for(let row=0;row<6;row++)for(let col=0;col<8;col++){
+        const amount=Math.max(0,Math.min(1,2*progress-(row+col)%2));
+        const left=col*100/8,top=row*100/6;
+        const right=(col+(options.direction==='vert'?1:amount))*100/8;
+        const bottom=(row+(options.direction==='vert'?amount:1))*100/6;
+        // Keep zero-area bridges on cell boundaries to avoid diagonal antialiasing artifacts.
+        points.push([0,0],[left,0],[left,top],[right,top],[right,bottom],[left,bottom],[left,top],[left,0],[0,0]);
+      }
+      return 'polygon('+points.map(([x,y])=>x+'% '+y+'%').join(',')+')';
+    };
+    animate(incoming,[{clipPath:cells(0)},{clipPath:cells(.5)},{clipPath:cells(1)}]);
+  }else if(effect==='newsflash'){
+    animate(incoming,[{transform:'rotate(720deg) scale(0)'},{transform:'rotate(0deg) scale(1)'}]);
+  }else if(effect==='wheel'){
+    const spokes=options.spokes??4;
+    if(spokes===0)animate(incoming,[{opacity:0},{opacity:1}]);
+    else{
+      const stages=64,sector=360/spokes;
+      // A repeating mask keeps memory bounded even for the schema's maximum unsigned integer.
+      const mask=(progress)=>'repeating-conic-gradient(#000 0deg '+sector*progress+'deg,transparent '+sector*progress+'deg '+sector+'deg)';
+      // Gradient images are discrete values; explicit stages avoid a halfway-only image swap.
+      animate(incoming,Array.from({length:stages+1},(_,step)=>({maskImage:mask(step/stages),offset:step/stages,easing:'steps(1,end)'})),'linear');
+    }
+  }else if(effect==='wedge'){
+    const segments=32;
+    const wedge=(progress)=>{
+      const points=['50% 50%'];
+      for(let point=0;point<=segments;point++){
+        const angle=-Math.PI/2+Math.PI*progress*(2*point/segments-1);
+        points.push((50+100*Math.cos(angle))+'% '+(50+100*Math.sin(angle))+'%');
+      }
+      return 'polygon('+points.join(',')+')';
+    };
+    // Intermediate angles keep the radial boundaries rotating instead of shrinking across the slide.
+    animate(incoming,Array.from({length:segments+1},(_,step)=>({clipPath:wedge(step/segments),offset:step/segments})));
+  }else if(effect==='dissolve'){
+    const columns=32,stages=16,bounds=incoming.getBoundingClientRect();
+    const rows=Math.max(1,Math.round(columns*bounds.height/bounds.width)),count=columns*rows;
+    const order=Array.from({length:count},(_,i)=>i);
+    for(let i=count-1;i>0;i--){
+      const j=Math.floor(Math.random()*(i+1));
+      [order[i],order[j]]=[order[j],order[i]];
+    }
+    const cells=(step)=>{
+      const points=['0% 0%'];
+      for(let i=0;i<Math.floor(count*step/stages);i++){
+        const cell=order[i],col=cell%columns,row=Math.floor(cell/columns);
+        const left=100*col/columns,right=100*(col+1)/columns,top=100*row/rows,bottom=100*(row+1)/rows;
+        // Retrace bridges along cell boundaries to avoid diagonal clipping artifacts.
+        for(const [x,y] of [[left,0],[left,top],[right,top],[right,bottom],[left,bottom],[left,top],[left,0],[0,0]])
+          points.push(x+'% '+y+'%');
+      }
+      return step===0?'polygon(0% 0%,0% 0%,0% 0%)':'polygon('+points.join(',')+')';
+    };
+    // Discrete masks add whole squares instead of morphing unrelated polygon vertices.
+    animate(incoming,Array.from({length:stages+1},(_,step)=>({clipPath:cells(step),offset:step/stages,easing:'steps(1,end)'})),'linear');
+  }else if(effect==='randomBar'){
+    const bands=16,vertical=options.direction==='vert';
+    const ranks=Array.from({length:bands},(_,i)=>i);
+    for(let i=bands-1;i>0;i--){
+      const j=Math.floor(Math.random()*(i+1));
+      [ranks[i],ranks[j]]=[ranks[j],ranks[i]];
+    }
+    const bars=(step)=>{
+      const points=[];
+      for(let band=0;band<bands;band++){
+        const top=100*band/bands,bottom=top+100/bands*Math.max(0,Math.min(1,step-ranks[band]));
+        // Retrace the edge bridge so disconnected bars do not clip diagonal slivers.
+        for(const [x,y] of [[0,0],[0,top],[100,top],[100,bottom],[0,bottom],[0,top],[0,0]])
+          points.push((vertical?y:x)+'% '+(vertical?x:y)+'%');
+      }
+      return 'polygon('+points.join(',')+')';
+    };
+    animate(incoming,Array.from({length:bands+1},(_,step)=>({clipPath:bars(step),offset:step/bands})));
+  }else if(effect==='strips'){
+    const direction=options.direction??'lu';
+    const strips=(progress)=>{
+      const points=[];
+      for(let band=0;band<8;band++){
+        const top=band*12.5,bottom=(band+1)*12.5;
+        const right=100*Math.max(0,Math.min(1,(15*progress-band)/8));
+        points.push([0,0],[0,top],[right,top],[right,bottom],[0,bottom],[0,top],[0,0]);
+      }
+      return 'polygon('+points.map(([x,y])=>(direction.startsWith('l')?100-x:x)+'% '+(direction.endsWith('u')?100-y:y)+'%').join(',')+')';
+    };
+    // Include every band's start/end so interpolation preserves the staggered wipe.
+    animate(incoming,Array.from({length:16},(_,step)=>({clipPath:strips(step/15),offset:step/15})));
+  }else if(effect==='split'){
+    const collapsed=options.orientation==='vert'?'inset(0 50%)':'inset(50% 0)';
+    const expanded='inset(0 0)';
+    if(options.direction==='in'){
+      canvas.append(outgoing);
+      animate(outgoing,[{clipPath:expanded},{clipPath:collapsed}]);
+    }else animate(incoming,[{clipPath:collapsed},{clipPath:expanded}]);
+  }else if(effect==='circle'){
+    animate(incoming,[{clipPath:'circle(0% at 50% 50%)'},{clipPath:'circle(100% at 50% 50%)'}]);
+  }else if(effect==='diamond'){
+    animate(incoming,[{clipPath:'polygon(50% 50%,50% 50%,50% 50%,50% 50%)'},{clipPath:'polygon(50% -50%,150% 50%,50% 150%,-50% 50%)'}]);
+  }else if(effect==='plus'){
+    const cross=(low,high)=>'polygon('+low+'% 0%,'+high+'% 0%,'+high+'% '+low+'%,100% '+low+'%,100% '+high+'%,'+high+'% '+high+'%,'+high+'% 100%,'+low+'% 100%,'+low+'% '+high+'%,0% '+high+'%,0% '+low+'%,'+low+'% '+low+'%)';
+    animate(incoming,[{clipPath:cross(50,50)},{clipPath:cross(0,100)}]);
+  }else if(effect==='zoom'){
+    animate(incoming,[{transform:options.direction==='out'?'scale(2)':'scale(0.1)',opacity:0},{transform:'scale(1)',opacity:1}]);
+  }
+  clearTimeout(advanceTimer);advanceKey=null;
+  const cleanup=()=>{
+    outgoing.remove();
+    // The incoming layer keeps its own nodes rather than being re-parsed into
+    // the canvas: the slide's build may already be running on them — a leading
+    // 'with previous' effect starts as the slide appears — and new nodes would
+    // lose both the animation and what it was hiding. Dropping the class is
+    // enough to leave no transition layer behind.
+    incoming.className='';incoming.style.cssText='position:absolute;inset:0';
+    slide.style.background='';
+  };
+  transitionCleanup=cleanup;
+  Promise.all(transitionAnimations.map(animation=>animation.finished)).then(()=>{
+    if(transitionCleanup!==cleanup)return;
+    cancelTransition();scheduleAdvance();
+  },()=>{});
+}
+`;
+//#endregion
 //#region src/styles.ts
-const previewStyles = `*{box-sizing:border-box}
-body{margin:0;height:100dvh;overflow:hidden;background:#e9eaf4;color:#dce1f1;font:13px system-ui;display:grid;grid-template-rows:60px minmax(0,1fr) 42px}
-button,a,select{font:inherit;color:inherit}button,select,.download{border:1px solid #30364d;border-radius:9px;background:#191e30;padding:7px 12px;text-decoration:none;cursor:pointer}
-button:hover:not(:disabled),.download:hover{background:#292f48}button:disabled{opacity:.4;cursor:default}
-:focus-visible{outline:2px solid #9b87ff;outline-offset:3px}
-header{display:flex;align-items:center;gap:16px;padding:0 20px;background:linear-gradient(110deg,#171b2f,#211c38 60%,#171b2f);border-bottom:1px solid #38304d;min-width:0}
-.brand{font-weight:700;font-size:17px;white-space:nowrap}.badge{font-size:11px;color:#b2a4fb;background:#342c54;border-radius:4px;padding:3px 6px}
-#status{flex:1;color:#9ba5be;min-width:0}#present{background:#7154e8;color:#191e30;border-color:#7154e8}
+const tokenStyles = `:root{
+--ok-accent:#b4235a;--ok-accent-2:#d6336c;--ok-bg:#f4f5f7;--ok-panel:#ffffff;--ok-panel-2:#f9fafb;--ok-ribbon:#f7f8fa;--ok-ribbon-active:#ffffff;
+--ok-border:#dfe2e7;--ok-border-strong:#c9cdd6;--ok-text:#15171c;--ok-text-2:#545b69;--ok-text-3:#8a909c;--ok-hover:#eef0f3;--ok-selected:#fdebf1;--ok-selected-border:#b4235a;
+--ok-canvas-bg:#d3d6dc;--ok-danger:#c92a2a;--ok-radius:3px;--ok-radius-lg:6px;
+--ok-shadow:0 1px 2px rgba(16, 18, 23, 0.08), 0 0 0 1px rgba(16, 18, 23, 0.04);--ok-shadow-lg:0 12px 32px -8px rgba(16, 18, 23, 0.22), 0 2px 6px rgba(16, 18, 23, 0.08);
+--ok-font:system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;--ok-mono:ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
+--shell-alert-bg:#fff0cd;--shell-alert-text:#583b00;
+color-scheme:light;
+}
+@media (prefers-color-scheme: dark){:root{
+color-scheme:dark;
+--ok-accent:#e85a90;--ok-accent-2:#ff9cbf;--ok-bg:#1f1f1f;--ok-panel:#2b2b2b;--ok-panel-2:#252525;--ok-ribbon:#2a2a2a;--ok-ribbon-active:#333333;
+--ok-border:#3d3d3d;--ok-border-strong:#555555;--ok-text:#f0f0f0;--ok-text-2:#c4c4c4;--ok-text-3:#8f8f8f;--ok-hover:#3a3a3a;--ok-selected:#3a2230;--ok-selected-border:#ff7aa8;
+--ok-canvas-bg:#1b1b1b;--ok-danger:#f1707a;
+--ok-shadow:0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);--ok-shadow-lg:0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
+--shell-alert-bg:#4a3a12;--shell-alert-text:#ffe2a3;
+}}
+*{box-sizing:border-box}
+body{margin:0;background:var(--ok-bg);color:var(--ok-text);font:13px var(--ok-font);-webkit-font-smoothing:antialiased}
+button,a,select,textarea{font:inherit;color:inherit}
+button,select,.download{border:1px solid transparent;border-radius:var(--ok-radius);background:transparent;padding:3px 8px;text-decoration:none;cursor:pointer;white-space:nowrap}
+button:hover:not(:disabled),.download:hover{background:var(--ok-hover);border-color:var(--ok-border)}
+button:active:not(:disabled){background:var(--ok-selected)}
+button[aria-pressed="true"]{background:var(--ok-selected);border-color:var(--ok-selected-border)}
+button:disabled{color:var(--ok-text-3);cursor:default}
+select{border-color:var(--ok-border-strong);background:var(--ok-panel);padding:2px 6px}
+select:hover:not(:disabled){border-color:var(--ok-border-strong)}
+:focus-visible{outline:2px solid var(--ok-selected-border);outline-offset:1px}
+.primary{background:var(--ok-accent);border-color:var(--ok-accent);color:#fff}
+.primary:hover:not(:disabled){background:var(--ok-accent-2);border-color:var(--ok-accent-2)}
+.primary:disabled{background:var(--ok-hover);border-color:var(--ok-border);color:var(--ok-text-3)}
+[hidden]{display:none!important}
+@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
+`;
+const previewStyles = `${tokenStyles}
+body{height:100dvh;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) 26px}
 .workspace{--filmstrip-width:190px;--chat-width:38vw;display:grid;grid-template-columns:var(--filmstrip-width) minmax(0,1fr) clamp(280px,var(--chat-width),calc(100vw - var(--filmstrip-width) - 240px));min-height:0}
-.filmstrip{background:#111625;border-right:1px solid #30364d;overflow:auto;overscroll-behavior:contain;padding:16px 12px}
-.filmstrip h2{margin:0 0 12px 26px;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:#8490ac;font-weight:600}
-#thumbnails{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
-.thumbnail{display:flex;align-items:flex-start;gap:8px;width:100%;padding:4px 3px;border:0;background:transparent;border-radius:5px;text-align:left}
-.slide-number{width:18px;flex:none;text-align:right;font-size:11px;color:#8995b0;padding-top:5px}
-.thumbnail img{display:block;min-width:0;width:calc(100% - 26px);background:white;box-shadow:0 1px 4px #080b1933;border:2px solid transparent;border-radius:3px;aspect-ratio:var(--slide-ratio,16/9);object-fit:contain}
-.thumbnail[aria-current="true"]{background:#31274e}.thumbnail[aria-current="true"] img{border-color:#9b87ff}.thumbnail[aria-current="true"] .slide-number{color:#b6a5ff;font-weight:700}
+.filmstrip{background:var(--ok-panel-2);border-right:1px solid var(--ok-border);overflow:auto;overscroll-behavior:contain;padding:8px}
+.filmstrip h2{margin:4px 0 8px 26px;font-size:11px;font-weight:600;color:var(--ok-text-2)}
+#thumbnails{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
+.thumbnail{display:flex;align-items:flex-start;gap:6px;width:100%;padding:6px 6px 8px 4px;border:0;background:transparent;border-radius:0;text-align:left}
+.thumbnail:hover:not(:disabled){background:transparent;border-color:transparent}
+.slide-number{width:16px;flex:none;text-align:right;font-size:11px;color:var(--ok-text-2);padding-top:2px}
+.thumbnail img{display:block;min-width:0;width:calc(100% - 22px);background:white;border:1px solid var(--ok-border);border-radius:4px;aspect-ratio:var(--slide-ratio,16/9);object-fit:contain}
+.thumbnail:hover img{outline:3px solid var(--ok-border-strong);outline-offset:2px}
+.thumbnail[aria-current="true"] img{outline:3px solid var(--ok-accent);outline-offset:2px}.thumbnail[aria-current="true"] .slide-number{color:var(--ok-accent);font-weight:600}
+.thumbnail[data-skipped="true"] .slide-number{text-decoration:line-through}
+.thumbnail[data-skipped="true"] img{opacity:.6}
 main{min-width:0;min-height:0;display:flex;flex-direction:column}
-#error{flex:none;max-height:30%;overflow:auto;background:#fff0ef;color:#922e25;margin:0;padding:16px 20px;white-space:pre-wrap;border-bottom:1px solid #e8bbb7}
-#error[hidden]{display:none}
-#stage{background:radial-gradient(ellipse at 20% 15%,#ddd8f6aa,transparent 65%),radial-gradient(#a0a4bf33 1px,transparent 1px),#edeef6;background-size:auto,18px 18px,auto;flex:1;min-height:0;overflow:auto;display:flex;padding:32px;overscroll-behavior:contain}
-#slide{position:relative;flex:none;margin:auto;background:white;box-shadow:0 20px 70px #28234825,0 2px 8px #28234815;overflow:hidden}
-#slide{user-select:text;-webkit-user-select:text}
-#empty{margin:auto;color:#8995b0}
-footer{display:flex;align-items:center;gap:14px;padding:0 16px;background:#191e30;border-top:1px solid #30364d;font-size:12px}
-#count{min-width:90px}footer .hint{flex:1;color:#8995b0}footer button{padding:3px 10px}footer select{padding:3px 8px}
+#error{flex:none;max-height:30%;overflow:auto;background:var(--shell-alert-bg);color:var(--shell-alert-text);margin:0;padding:8px 12px;font:12px var(--ok-mono);white-space:pre-wrap;border-bottom:1px solid var(--ok-border)}
+#stage{background:var(--ok-canvas-bg);flex:1;min-height:0;overflow:auto;display:flex;padding:32px;overscroll-behavior:contain}
+#slide{position:relative;flex:none;margin:auto;background:white;box-shadow:var(--ok-shadow-lg);overflow:hidden;user-select:text;-webkit-user-select:text}
+#empty{margin:auto;color:var(--ok-text-2)}
+footer{display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--ok-ribbon);border-top:1px solid var(--ok-border);color:var(--ok-text-2);font-size:11px;min-width:0;white-space:nowrap}
+footer button,footer .download,footer select{font-size:11px;padding:1px 6px;line-height:16px}
+footer .hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ok-text-3)}
+#status{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.status-views{display:flex;gap:2px}
+footer svg{display:block;fill:none;stroke:currentColor;stroke-width:1.1}
+#toggle-editor{padding:2px 6px}
+#toggle-chat svg{width:13px;height:13px}#toggle-chat[aria-pressed="true"] svg{fill:var(--ok-accent);stroke:var(--ok-accent)}#toggle-chat{display:inline-flex;align-items:center;gap:4px}
+#notice{position:fixed;z-index:40;left:50%;bottom:36px;transform:translateX(-50%);max-width:min(480px,calc(100vw - 32px));padding:8px 12px;border:1px solid var(--ok-border);border-radius:var(--ok-radius-lg);background:var(--ok-panel);color:var(--ok-text);box-shadow:var(--ok-shadow-lg);font-size:12px}
 #presentation-controls{display:none}
 body.presenting{grid-template-rows:minmax(0,1fr);background:#111}
-.presenting header,.presenting footer,.presenting .filmstrip,.presenting #chat{display:none}
+.presenting footer,.presenting .filmstrip,.presenting #chat{display:none}
 .presenting .workspace{grid-template-columns:minmax(0,1fr)}.presenting #stage{padding:0;background:#111}.presenting #slide{box-shadow:none}
 .presenting #presentation-controls{display:flex;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);align-items:center;gap:12px;background:#202735e8;color:white;padding:6px;border-radius:8px;opacity:0;transition:opacity .15s}
 .presenting #presentation-controls:hover,.presenting #presentation-controls:focus-within{opacity:1}
-#presentation-controls button{background:transparent;color:white;border-color:#5d6575}
-@media(max-width:700px){.workspace{grid-template-columns:140px minmax(0,1fr)}.filmstrip{padding:12px 5px}header{padding:0 12px;gap:10px}.badge,footer .hint{display:none}#stage{padding:16px}footer{gap:8px}#status{font-size:11px}.download{padding:7px 8px}}
-#chat{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:#191e30;border-left:1px solid #30364d}
-#chat-resizer{position:absolute;left:-5px;top:0;bottom:0;width:10px;z-index:3;cursor:col-resize;touch-action:none}#chat-resizer::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px}#chat-resizer:hover::after,#chat-resizer:focus-visible::after,.resizing-chat #chat-resizer::after{background:#9b87ff}body.resizing-chat,body.resizing-chat *{cursor:col-resize!important;user-select:none!important}
-.chat-heading{display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid #2a3046}.chat-heading strong{flex:1}.chat-heading button{padding:5px 8px}
-#messages{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain}
-.chat-message{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.chat-message.user{background:#302752;border-radius:8px;padding:10px 12px}.chat-message small{display:block;color:#a4afc6;font-size:11px;margin-bottom:4px}.chat-intro{color:#8995b0;line-height:1.7}
-#chat-form{padding:14px;border-top:1px solid #2a3046}#chat-context{font-size:11px;color:#9b87ff;margin-bottom:8px}#chat-input{font:inherit;resize:vertical;min-height:90px;max-height:200px;width:100%;padding:10px;border:1px solid #30364d;border-radius:8px} .chat-actions{display:flex;gap:8px;margin-top:8px;align-items:center}.chat-actions select{min-width:0;flex:1}#chat-send{background:#7154e8;color:white}#chat-status{padding:0 14px 12px;color:#9ba5be;font-size:11px;white-space:pre-wrap;max-height:90px;overflow:auto}
-body.chat-hidden .workspace{grid-template-columns:190px minmax(0,1fr)}body.chat-hidden #chat{display:none}
+.presenting.browse-scrollbar #stage{padding-right:18px}
+#presentation-scrollbar{position:fixed;z-index:4;top:0;bottom:0;right:0;width:16px;touch-action:none;border:1px solid #5d6575;background:#202735e8;cursor:pointer}
+#presentation-scrollbar span{position:absolute;left:3px;right:3px;min-height:8px;border-radius:5px;background:#c4c4c4;pointer-events:none}
+.kiosk-presenting #present-prev,.kiosk-presenting #present-next{display:none}
+#presentation-controls button{background:transparent;color:white;border-color:#5d6575;padding:5px 10px}
+#presentation-controls button:hover:not(:disabled){background:#ffffff1f}
+#present-note{max-width:38ch;color:#ffd9a8;font-size:11px;line-height:1.35}
+#chat{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--ok-panel);color:var(--ok-text);border-left:1px solid var(--ok-border)}
+#chat-resizer{position:absolute;left:-4px;top:0;bottom:0;width:7px;z-index:3;cursor:col-resize;touch-action:none}#chat-resizer::after{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px}#chat-resizer:hover::after,#chat-resizer:focus-visible::after,.resizing-chat #chat-resizer::after{background:var(--ok-selected-border)}#chat-resizer:focus-visible{outline:none}
+body.resizing-chat,body.resizing-chat *{cursor:col-resize!important;user-select:none!important}
+.pane-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--ok-border);background:var(--ok-panel);flex:none}
+.pane-head strong{font-size:13px;font-weight:600}
+.pane-close{margin-left:auto;padding:0 4px;border:none;background:none;color:var(--ok-text-2);font-size:20px;line-height:20px}
+.pane-close:hover:not(:disabled){background:var(--ok-hover);border-color:transparent;color:var(--ok-text)}
+body.chat-hidden .workspace{grid-template-columns:var(--filmstrip-width) minmax(0,1fr)}body.chat-hidden #chat{display:none}
 body.presenting .workspace{grid-template-columns:minmax(0,1fr)}
-@media(max-width:1000px){.workspace{--filmstrip-width:120px;--chat-width:380px}.filmstrip{padding:12px 5px}#stage{padding:16px}}
-@media(max-width:700px){#chat-resizer{display:none}.workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(160px,1fr) minmax(200px,1fr)}.filmstrip{display:none}#chat{border-top:1px solid #30364d}.chat-heading{padding:8px 12px}#chat-form{padding:8px 12px}#chat-input{min-height:50px}body.chat-hidden .workspace,.presenting .workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.brand{font-size:14px}header{gap:6px}.download{font-size:11px}}
-@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
-
-[hidden]{display:none!important}
-.chat-heading{padding:10px 14px}.chat-heading select{flex:1;min-width:0;font-weight:600;border:0;padding-left:0}
-#chat-context{margin:0;padding:8px 14px;border-bottom:1px solid #2a3046;color:#9ba5be;font-size:11px}
+@media(max-width:1000px){.workspace{--filmstrip-width:120px;--chat-width:380px}#stage{padding:16px}}
+@media(max-width:700px){#chat-resizer{display:none}.workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(160px,1fr) minmax(200px,1fr)}.filmstrip{display:none}#chat{border-left:0;border-top:1px solid var(--ok-border)}body.chat-hidden .workspace,.presenting .workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}footer .hint,#status,.download{display:none}#stage{padding:16px}}
+`;
+/** The agent page renders inside one agent pane of the docked Agents task pane. */
+const agentStyles = `${tokenStyles}
+body{display:flex;flex-direction:column;background:var(--ok-panel);height:100dvh;min-width:0;overflow:auto;overflow-x:hidden}
+.chat-heading{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 12px 2px;flex-shrink:0}
+.chat-heading select{flex:1;min-width:100px;font-size:12px}
+#chat-context{flex-shrink:0;margin:0;padding:4px 12px 6px;color:var(--ok-text-2);font-size:11px;border-bottom:1px solid var(--ok-border)}
 #claude-panel,#codex-panel{display:flex;flex-direction:column;flex:1;min-height:0}
-#claude-panel{background:#171b24;color:#e4e8f0}
-.terminal-toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:11px;min-height:40px}.terminal-toolbar span{flex:1;overflow-wrap:anywhere}.terminal-toolbar button{font-size:11px;padding:5px 8px;background:#262d3b;border-color:#45516a;color:#e4e8f0}
-.terminal-toolbar button:hover:not(:disabled){background:#35415a}
-#terminal{flex:1;min-height:0;overflow:hidden;padding:0}.xterm{height:100%}
-#chat-input{min-height:70px;resize:vertical}.chat-shortcut{flex:1;color:#9098a7;font-size:10px}
-.markdown{white-space:normal;line-height:1.65}.markdown>:first-child{margin-top:0}.markdown>:last-child{margin-bottom:0}.markdown p{margin:0 0 .8em}.markdown pre{overflow:auto;padding:10px;background:#22283b;border:1px solid #2a3046;border-radius:6px;white-space:pre}.markdown code{font-size:.9em;background:#22283b;border-radius:3px;padding:1px 4px}.markdown pre code{padding:0}.markdown ul,.markdown ol{padding-left:22px}.markdown blockquote{margin-left:0;padding-left:12px;border-left:3px solid #30364d;color:#9ba5be}.markdown table{display:block;overflow:auto;border-collapse:collapse}.markdown th,.markdown td{padding:6px 8px;border:1px solid #30364d}.markdown h1,.markdown h2,.markdown h3{font-size:1.1em}.markdown a{color:#b6a5ff;text-decoration:underline}
-
-.brand{display:flex;align-items:center;gap:10px;letter-spacing:-.5px}.brand svg{width:32px;height:32px;flex:none}.brand em{font-style:normal;font-weight:400;color:#aca4ce}.badge{text-transform:uppercase;letter-spacing:.14em;font-size:9px;border:1px solid #61508866;border-radius:5px}#status{font-size:11px}#present,#chat-send{color:#fff;background:linear-gradient(120deg,#8061ed,#634de0);border-color:#a38aef55;box-shadow:0 3px 15px #7455e82a}#toggle-chat[aria-expanded="true"]{background:#35294f;border-color:#6f528b;color:#d6c5ff}.download{background:transparent;color:#bcc5dc}header button,header .download{font-size:12px}.filmstrip{background:linear-gradient(180deg,#161b2c,#111625)}.thumbnail{transition:background .15s}.thumbnail[aria-current="true"]{box-shadow:inset 0 0 0 1px #9980ef33}.thumbnail[aria-current="true"] img{box-shadow:0 0 16px #9567ed22}footer{background:#141929;color:#b9c2d8}footer .hint{font-size:10px}#count{font-size:11px;font-weight:600}#chat{background:#101422}.workspace-heading{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;color:#c7bee5;font-size:10px;font-weight:600;letter-spacing:.12em}.workspace-heading b{font-size:9px;color:#89cdbc;font-weight:500;letter-spacing:.08em}.workspace-heading b::before{content:"";display:inline-block;width:5px;height:5px;background:#86d5bb;border-radius:50%;margin-right:6px;box-shadow:0 0 8px #86d5bb66}.chat-heading{background:#191e30}.chat-heading select{background:transparent;color:#e4e5f3;font-size:12px}.chat-heading option{background:#191e30}#chat-context{background:#1a1e30;color:#a59abb;font-size:10px}.terminal-toolbar{gap:6px;padding:8px;font-size:10px}.terminal-toolbar button{white-space:nowrap}#terminal-start{background:#6c52c9;border-color:#9678e9}.terminal-frame{display:flex;flex:1;min-height:0;min-width:0;padding:4px 8px 8px;overflow:hidden}#terminal{width:100%;min-width:0}#chat-input{color:#e2e5f3;background:#131827;border-color:#3b3f58}#chat-input:focus{outline:none;border-color:#9b87ff;box-shadow:0 0 0 3px #9b87ff18}.chat-message.user{border:1px solid #67509655}.chat-intro{font-size:12px}.markdown pre{border-color:#3a4059}.markdown code{color:#d2c6fa}#error{background:#38242b;color:#ffb8b0}
-@media(max-width:700px){.brand svg{width:26px;height:26px}.brand{gap:6px}.workspace-heading{padding:7px 12px}header .download{font-size:10px;padding:7px}.badge{display:none}}
+#claude-panel{min-height:100px}#codex-panel{min-height:240px}
+.terminal-toolbar{display:flex;align-items:center;gap:6px;padding:6px 12px;min-height:34px;font-size:11px;color:var(--ok-text-2)}
+.terminal-toolbar span{flex:1;overflow-wrap:anywhere}
+.terminal-toolbar button{font-size:11px;padding:2px 8px;border-color:var(--ok-border-strong)}
+.terminal-frame{display:flex;flex:1;min-height:0;min-width:0;padding:2px 4px 4px 12px;overflow:hidden}
+#terminal{flex:1;width:100%;min-width:0;min-height:0;overflow:hidden;padding:0}.xterm{height:100%}
+/* xterm's stylesheet paints the viewport black; the rows below the last full line show it. */
+#terminal .xterm-viewport{background-color:var(--ok-panel)!important}
+#messages{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
+.chat-message{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}.chat-message.user{background:var(--ok-panel-2);border:1px solid var(--ok-border);border-radius:var(--ok-radius-lg);padding:8px 10px}
+.chat-message small{display:block;color:var(--ok-text-2);font-size:11px;margin-bottom:4px}.chat-intro{color:var(--ok-text-2);line-height:1.6;font-size:12px}
+#chat-form{padding:8px 12px;border-top:1px solid var(--ok-border)}
+#chat-input{resize:vertical;min-height:70px;max-height:200px;width:100%;padding:6px 8px;border:1px solid var(--ok-border-strong);border-radius:var(--ok-radius);background:var(--ok-panel);color:var(--ok-text)}
+#chat-input:focus{outline:2px solid var(--ok-selected-border);outline-offset:-1px}
+.chat-actions{display:flex;gap:6px;margin-top:6px;align-items:center}.chat-actions button{border-color:var(--ok-border-strong)}.chat-actions .primary{border-color:var(--ok-accent)}
+.chat-shortcut{flex:1;color:var(--ok-text-3);font-size:10px}
+#chat-status{padding:0 12px 8px;color:var(--ok-text-2);font-size:11px;white-space:pre-wrap;max-height:90px;overflow:auto}
+.markdown{white-space:normal;line-height:1.6}.markdown>:first-child{margin-top:0}.markdown>:last-child{margin-bottom:0}.markdown p{margin:0 0 .8em}
+.markdown pre{overflow:auto;padding:8px;background:var(--ok-panel-2);border:1px solid var(--ok-border);border-radius:var(--ok-radius);white-space:pre;font-family:var(--ok-mono)}
+.markdown code{font:.9em var(--ok-mono);background:var(--ok-panel-2);border-radius:3px;padding:1px 4px}.markdown pre code{padding:0}
+.markdown ul,.markdown ol{padding-left:22px}.markdown blockquote{margin-left:0;padding-left:12px;border-left:3px solid var(--ok-border);color:var(--ok-text-2)}
+.markdown table{display:block;overflow:auto;border-collapse:collapse}.markdown th,.markdown td{padding:6px 8px;border:1px solid var(--ok-border)}
+.markdown h1,.markdown h2,.markdown h3{font-size:1.1em}.markdown a{color:var(--ok-accent);text-decoration:underline}
 `;
 //#endregion
 //#region src/page.ts
@@ -392,24 +990,201 @@ const page = `<!doctype html>
 <link rel="stylesheet" href="/terminal.css">
 <style>
 ${previewStyles}
-.slide-edit-tools{display:flex;gap:6px;padding:8px 14px;flex-shrink:0}.slide-edit-tools{align-items:center;flex-wrap:wrap}.slide-edit-tools [data-undo],.slide-edit-tools [data-redo]{width:32px;height:32px;padding:0;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:transparent;color:#625873;box-shadow:none}.slide-edit-tools [data-undo]:hover:not(:disabled),.slide-edit-tools [data-redo]:hover:not(:disabled){background:#ede7fa;border-color:#d6cbea;color:#513399}.slide-edit-tools button:disabled{opacity:.35}.slide-edit-tools button:focus-visible{outline:2px solid #8966df;outline-offset:2px}.slide-edit-tools [hidden]{display:none}.slide-edit-tools span{font-size:11px;color:#625873;flex:1}.slide-edit-tools small{font-size:11px;color:#634396}.slide-hover{position:fixed;border:1px solid #b094ff;pointer-events:none;z-index:19;border-radius:2px}.slide-text-input{position:fixed;z-index:22;resize:none;background:#202438;color:#fff;border:2px solid #b094ff;border-radius:3px;padding:0;box-shadow:0 0 0 3px #b094ff30;line-height:1.15}.slide-text-input[hidden],.slide-hover[hidden]{display:none}.slide-selection{position:fixed;border:2px solid #b094ff;background:#a080ff18;pointer-events:none;z-index:20;box-shadow:0 0 0 1px #201632}.slide-edit-panel{position:fixed;z-index:21;width:min(380px,calc(100vw - 16px));padding:14px;background:#202438;border:1px solid #776591;border-radius:14px;box-shadow:0 16px 50px #0008;display:flex;flex-direction:column;gap:12px}.slide-edit-panel[hidden],.slide-selection[hidden]{display:none}.selection-heading,.selection-actions{display:flex;align-items:center;gap:8px}.selection-heading strong{flex:1}.slide-edit-panel textarea{width:100%;min-height:90px;max-height:35vh;resize:vertical;background:#141a2b;color:#f4efff;border:1px solid #514969;border-radius:8px;padding:10px;font:inherit}.selection-actions{flex-wrap:wrap}.selection-actions select{min-width:80px;flex:1}.slide-edit-panel small{color:#d1c9e3;line-height:1.5}.presenting .slide-edit-tools{display:none}
+.slide-edit-tools{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:4px 12px;flex-shrink:0;background:var(--ok-ribbon);border-bottom:1px solid var(--ok-border)}.slide-edit-tools [data-undo],.slide-edit-tools [data-redo]{width:26px;height:26px;padding:0;display:grid;place-items:center;color:var(--ok-text-2)}.slide-edit-tools [data-undo]:hover:not(:disabled),.slide-edit-tools [data-redo]:hover:not(:disabled){color:var(--ok-text)}.slide-edit-tools span{font-size:11px;color:var(--ok-text-2);flex:1}.slide-edit-tools small{font-size:11px;color:var(--ok-accent)}.slide-hover{position:fixed;border:1px solid var(--ok-selected-border);pointer-events:none;z-index:19;border-radius:2px}.slide-text-input{position:fixed;z-index:22;resize:none;background:var(--ok-panel);color:var(--ok-text);border:2px solid var(--ok-selected-border);border-radius:var(--ok-radius);padding:0;line-height:1.15}.slide-selection{position:fixed;border:2px solid var(--ok-selected-border);background:color-mix(in srgb,var(--ok-selected-border) 10%,transparent);pointer-events:none;z-index:20}.slide-edit-panel{position:fixed;z-index:21;width:min(380px,calc(100vw - 16px));padding:12px;background:var(--ok-panel);color:var(--ok-text);border:1px solid var(--ok-border);border-radius:var(--ok-radius-lg);box-shadow:var(--ok-shadow-lg);display:flex;flex-direction:column;gap:10px}.selection-heading,.selection-actions{display:flex;align-items:center;gap:6px}.selection-heading strong{flex:1}.slide-edit-panel textarea{width:100%;min-height:90px;max-height:35vh;resize:vertical;background:var(--ok-panel);color:var(--ok-text);border:1px solid var(--ok-border-strong);border-radius:var(--ok-radius);padding:6px 8px}.slide-edit-panel textarea:focus{outline:2px solid var(--ok-selected-border);outline-offset:-1px}.selection-actions{flex-wrap:wrap}.selection-actions select{min-width:80px;flex:1}.selection-actions button{border-color:var(--ok-border-strong)}.slide-edit-panel small{color:var(--ok-text-2);line-height:1.5}.presenting .slide-edit-tools{display:none}
+.editing:not(.presenting) .slide-edit-tools{display:none}
 
-#agent-workspace{position:relative;flex:1;min-height:0;min-width:0;display:flex;overflow:auto}.agent-pane{position:absolute;padding:3px 5px;display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;overflow:hidden}.agent-pane iframe{border:0;width:100%;flex:1;min-height:0;border-radius:0 0 9px 9px}.agent-tools{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:6px;background:#20253a;border:1px solid #34334e;border-radius:9px 9px 0 0}.agent-tools span{flex:1;font-size:10px;letter-spacing:.04em;color:#b3abc9}.agent-tools svg{width:14px;height:14px}.agent-pane:focus-within .agent-tools{border-color:#8b6ed577;background:#29243e}.agent-tools button{font-size:11px;padding:5px;background:transparent;border:0;display:grid;place-items:center}.agent-divider{position:absolute;z-index:2;background:#101422;cursor:col-resize;touch-action:none}.agent-divider.vertical{cursor:row-resize}.agent-divider:hover,.agent-divider:focus-visible{background:#9b87ff}.splitting-agents iframe,.resizing-chat iframe{pointer-events:none}
+#agent-workspace{position:relative;flex:1;min-height:0;min-width:0;display:flex;overflow:auto}.agent-pane{position:absolute;display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;overflow:hidden}.agent-pane iframe{border:0;width:100%;flex:1;min-height:0;background:var(--ok-panel)}.agent-tools{display:flex;gap:2px;align-items:center;padding:3px 6px 3px 12px;min-height:30px;background:var(--ok-panel-2);border-bottom:1px solid var(--ok-border)}.agent-tools span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;color:var(--ok-text-2)}.agent-pane:focus-within .agent-tools span{color:var(--ok-text)}.agent-tools button{width:24px;height:24px;padding:0;display:grid;place-items:center;color:var(--ok-text-2)}.agent-tools button:hover:not(:disabled){color:var(--ok-text)}.agent-tools svg{width:14px;height:14px}.agent-divider{position:absolute;z-index:2;background:transparent;cursor:col-resize;touch-action:none}.agent-divider.vertical{cursor:row-resize}.agent-divider::after{content:"";position:absolute;background:var(--ok-border)}.agent-divider.horizontal::after{top:0;bottom:0;left:50%;width:1px}.agent-divider.vertical::after{left:0;right:0;top:50%;height:1px}.agent-divider:hover::after,.agent-divider:focus-visible::after{background:var(--ok-selected-border)}.agent-divider.horizontal:hover::after,.agent-divider.horizontal:focus-visible::after{width:2px}.agent-divider.vertical:hover::after,.agent-divider.vertical:focus-visible::after{height:2px}.agent-divider:focus-visible{outline:none}.splitting-agents iframe,.resizing-chat iframe{pointer-events:none}
+#editor-frame{display:none;border:0;width:100%;height:100%;flex:1;min-height:0}
+body.editing:not(.presenting){grid-template-rows:minmax(0,1fr)}
+.editing:not(.presenting) .workspace{--filmstrip-width:0px;grid-template-columns:minmax(0,1fr) clamp(280px,var(--chat-width),calc(100vw - 500px))}
+.editing.chat-hidden:not(.presenting) .workspace{grid-template-columns:minmax(0,1fr)}
+.editing:not(.presenting) .filmstrip,.editing:not(.presenting) footer,.editing:not(.presenting) #stage{display:none}
+.editing:not(.presenting) #editor-frame{display:block}
+/* Too narrow to dock beside the editor: the pane floats over its right edge. */
+@media(max-width:900px){.editing:not(.presenting) .workspace{grid-template-columns:minmax(0,1fr)}.editing:not(.presenting) #chat{position:fixed;z-index:30;top:0;right:0;bottom:0;width:min(380px,100vw);box-shadow:var(--ok-shadow-lg)}.editing:not(.presenting) #chat-resizer{display:none}}
 </style>
-<header><span class="brand"><svg viewBox="0 0 36 36" aria-hidden="true"><defs><linearGradient id="brand-gradient" x2="1" y2="1"><stop stop-color="#c39aff"/><stop offset="1" stop-color="#7165f4"/></linearGradient></defs><rect x="2" y="2" width="32" height="32" rx="10" fill="url(#brand-gradient)"/><path d="M11 10h9l6 6v10H11z" fill="none" stroke="white" stroke-width="1.8" stroke-linejoin="round"/><path d="M20 10v7h6M15 21h7M15 25h4" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round"/><path d="m28 3 1.2 3.8L33 8l-3.8 1.2L28 13l-1.2-3.8L23 8l3.8-1.2z" fill="#e7dbff"/></svg>Office <em>Kit</em></span><span class="badge">Studio</span><span id="status" role="status">Building…</span><button id="toggle-chat" aria-expanded="true" aria-controls="chat">✦ Agents</button><button id="present" disabled>Present</button><a class="download" href="/deck.pptx">Download PPTX</a></header>
+<body class="editing chat-hidden">
 <div class="workspace">
 <nav class="filmstrip" aria-label="Slides"><h2>Slides</h2><ol id="thumbnails"></ol></nav>
-<main aria-label="Slide viewer"><pre id="error" role="alert" hidden></pre><div id="stage" tabindex="-1"><div id="empty">Waiting for slides…</div><div id="slide" hidden></div></div></main>
-<aside id="chat" aria-label="Slide chat">
+<main aria-label="Slide viewer"><iframe id="editor-frame" title="Presentation editor"></iframe><pre id="error" role="alert" hidden></pre><div id="stage" tabindex="-1"><div id="empty">Waiting for slides…</div><div id="slide" hidden></div></div></main>
+<aside id="chat" aria-labelledby="agents-title">
 <div id="chat-resizer" role="separator" tabindex="0" aria-label="Chat width" aria-orientation="vertical" aria-controls="chat" title="Drag to resize · Double-click to reset"></div>
-<div class="workspace-heading"><span>✦ AI WORKSPACE</span><b>LOCAL</b></div><div id="agent-workspace"></div><div id="chat-context" hidden></div></aside>
+<div class="pane-head"><strong id="agents-title">Agents</strong><button id="close-chat" class="pane-close" aria-label="Close Agents" title="Close Agents">×</button></div><div id="agent-workspace"></div><div id="chat-context" hidden></div></aside>
 </div>
-<footer><span id="count" aria-live="polite">No slides</span><span class="hint">Select an area to ask AI · Edit text directly</span><button id="prev" aria-label="Previous slide" disabled>‹</button><button id="next" aria-label="Next slide" disabled>›</button><label for="zoom">Zoom</label><select id="zoom"><option value="fit">Fit</option><option value="0.5">50%</option><option value="0.75">75%</option><option value="1">100%</option><option value="1.25">125%</option><option value="1.5">150%</option><option value="2">200%</option></select></footer>
-<div id="presentation-controls"><button id="present-prev" aria-label="Previous slide">‹</button><span id="present-count"></span><button id="present-next" aria-label="Next slide">›</button><button id="exit-present">Exit · Esc</button></div>
+<footer><span id="count" aria-live="polite">No slides</span><span id="status" role="status">Building…</span><span class="hint">Select an area to ask AI · Edit text directly</span><button id="prev" aria-label="Previous slide" disabled>‹</button><button id="next" aria-label="Next slide" disabled>›</button><button id="present" disabled>Present</button><button id="presenter" disabled>Presenter view</button><a class="download" href="/deck.pptx">Download PPTX</a><button id="toggle-chat" aria-pressed="false" aria-controls="chat"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 9.4 6.6 14.5 8 9.4 9.4 8 14.5 6.6 9.4 1.5 8 6.6 6.6Z" stroke-linejoin="round"/></svg><span>Agents</span></button><span class="status-views" role="group" aria-label="Presentation views"><button id="toggle-editor" aria-label="Normal" title="Normal (Esc)"><svg width="16" height="12" viewBox="0 0 16 12" aria-hidden="true"><rect x=".5" y=".5" width="15" height="11" rx="1"/><path d="M5 1v10"/></svg></button></span><label for="zoom">Zoom</label><select id="zoom"><option value="fit">Fit</option><option value="0.5">50%</option><option value="0.75">75%</option><option value="1">100%</option><option value="1.25">125%</option><option value="1.5">150%</option><option value="2">200%</option></select></footer><div id="notice" role="alert" hidden></div>
+<div id="presentation-scrollbar" role="scrollbar" aria-label="Slide position" aria-controls="slide" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0" tabindex="0" hidden><span></span></div><div id="presentation-controls"><button id="present-prev" aria-label="Previous slide">‹</button><span id="present-count"></span><span id="rehearsal-timer" role="timer" aria-label="Rehearsal time" hidden></span><span id="present-note" role="status" hidden></span><button id="animation-retry" hidden></button><button id="present-next" aria-label="Next slide">›</button><button id="exit-present">Exit · Esc</button></div>
 <script>
-let state={slides:[],error:null,aspectRatio:16/9},index=0,urls=[],presenting=false;
+let state={slides:[],error:null,aspectRatio:16/9,showProperties:null,customShows:[]},index=0,urls=[],presenting=false;
+let showOrder=[],showCursor=0,lastViewed=null,linkedShowId=null;
+let showReturns=[];
+// The fullscreen request of the show now starting. Starting or ending any show
+// (Present, presenter view, Escape) drops it, so a grant arriving after that
+// belongs to no show and is released instead of adopted.
+let presentationFullscreen=false,fullscreenRequest=null;
+function loopShow(){return showReturns.length===0&&(state.showProperties?.loop||state.showProperties?.mode?.kind==='kiosk');}
 let displayedSvg;
+let presenterWindow;
+${previewI18nScript}
+function rebuildShowOrder(){
+ const previousSlide=showOrder[showCursor];
+ const settings=state.showProperties;
+ let order;
+ if(linkedShowId!==null){
+  order=state.customShows?.find(show=>show.id===linkedShowId)?.slideIndices??[];
+ }else if(settings?.slides?.kind==='range'){
+  const start=Math.max(1,settings.slides.start),end=Math.min(state.slides.length,settings.slides.end);
+  order=Array.from({length:Math.max(0,end-start+1)},(_,offset)=>start-1+offset);
+ }else if(settings?.slides?.kind==='customShow'){
+  order=state.customShows?.find(show=>show.id===settings.slides.id)?.slideIndices??[];
+ }else order=Array.from({length:state.slides.length},(_,slide)=>slide);
+ showOrder=order.filter(slide=>slide>=0&&slide<state.slides.length);
+ if(previousSlide!==undefined){
+  if(showOrder[showCursor]===previousSlide)return;
+  const candidates=showOrder.map((slide,position)=>slide===previousSlide?position:-1).filter(position=>position>=0);
+  if(candidates.length){showCursor=candidates.reduce((best,position)=>Math.abs(position-showCursor)<Math.abs(best-showCursor)?position:best,candidates[0]);return;}
+ }
+ const current=showOrder.indexOf(index);
+ if(current>=0)showCursor=current;
+ else showCursor=Math.min(showCursor,Math.max(0,showOrder.length-1));
+}
+function showSlideAt(position,step=1,skipHidden=presenting){
+ if(!showOrder.length)return -1;
+ let cursor=position;
+ for(let n=0;n<showOrder.length;n++){
+  if(cursor<0||cursor>=showOrder.length){
+   if(loopShow())cursor=(cursor+showOrder.length)%showOrder.length;
+   else return -1;
+  }
+  const candidate=showOrder[cursor];
+  if(!skipHidden||!state.hiddenSlides?.[candidate])return candidate;
+  cursor+=step;
+ }
+ return -1;
+}
+function firstShowSlide(){return showSlideAt(0,1,true);}
+function nextShowPosition(step){
+ if(!showOrder.length)return -1;
+ let cursor=showCursor+step;
+ for(let n=0;n<showOrder.length;n++){
+  if(cursor<0||cursor>=showOrder.length){
+   if(loopShow())cursor=(cursor+showOrder.length)%showOrder.length;
+   else return -1;
+  }
+  if(!presenting||!state.hiddenSlides?.[showOrder[cursor]])return cursor;
+  cursor+=step;
+ }
+ return -1;
+}
+function nextShowSlide(step){
+ const position=nextShowPosition(step);
+ return position<0?-1:showOrder[position];
+}
+function browsePositions(){
+ return showOrder.map((slide,position)=>({slide,position})).filter(({slide})=>!state.hiddenSlides?.[slide]);
+}
+function syncBrowseScrollbar(){
+ const scrollbar=byId('presentation-scrollbar');
+ const enabled=presenting&&state.showProperties?.mode?.kind==='browse'&&state.showProperties?.mode?.showScrollbar===true;
+ scrollbar.setAttribute('aria-label',pt('Slide position'));
+ scrollbar.hidden=!enabled;
+ document.body.classList.toggle('browse-scrollbar',enabled);
+ if(!enabled)return;
+ const positions=browsePositions();
+ const max=Math.max(0,positions.length-1);
+ scrollbar.setAttribute('aria-valuemax',String(max));
+ const current=positions.findIndex(({position})=>position===showCursor);
+ const value=Math.max(0,current);
+ scrollbar.setAttribute('aria-valuenow',String(value));
+ const thumbPercent=positions.length?Math.max(8,100/positions.length):100;
+ scrollbar.firstElementChild.style.height=thumbPercent+'%';
+ scrollbar.firstElementChild.style.top=(max?(value/max)*(100-thumbPercent):0)+'%';
+ scrollbar.setAttribute('aria-valuetext',positions.length?slideLabel(positions[value].slide):pt('No slides'));
+}
+function findSlide(start,step,skipHidden=presenting){
+ if(skipHidden&&presenting)return showSlideAt(showCursor+step,step);
+ for(let i=start;i>=0&&i<state.slides.length;i+=step)if(!skipHidden||!state.hiddenSlides?.[i])return i;
+ return -1;
+}
+function moveSlide(step,skipHidden=presenting,focusThumbnail=false){
+ // The slide has effects and the player is still on its way: moving on now
+ // would skip them, so the click waits rather than costing the viewer content.
+ if(animationsWaiting())return;
+ // A build comes before the slide: the click that would move on first plays
+ // whatever the current slide still has to show, in either direction.
+ if(animationPlayer&&(step>0?animationPlayer.advance():animationPlayer.back()))return;
+ const previousShowCursor=showCursor;
+ const nextPosition=skipHidden&&presenting?nextShowPosition(step):-1;
+ const next=skipHidden&&presenting?(nextPosition<0?-1:showOrder[nextPosition]):findSlide(index+step,step,skipHidden);
+ // Arriving backwards lands on a slide that has already played out, the way
+ // PowerPoint shows it; arriving forwards starts its build from the top.
+ if(next>=0){
+  selectSlide(next,focusThumbnail,true,step<0?'end':'start',nextPosition);
+  if(presenting&&step>0&&nextPosition>=0&&nextPosition<=previousShowCursor&&loopShow())scheduleKioskRestart();
+ }
+ else if(presenting&&step>0&&linkedShowId!==null)void exitPresentation();
+}
+let advanceTimer,advanceKey;
+let kioskRestartTimer,kioskRestartKey;
+function clearKioskRestart(){
+  clearTimeout(kioskRestartTimer);kioskRestartTimer=undefined;kioskRestartKey=null;
+}
+function scheduleKioskRestart(){
+  clearKioskRestart();
+  const restart=state.showProperties?.mode?.kind==='kiosk'?Number(state.showProperties.mode.restart):NaN;
+  // The OOXML attribute is an unsigned duration, but the schema does not
+  // define a special meaning for zero. Do not turn an unconfigured/zero value
+  // into a busy immediate restart loop; only a positive duration schedules it.
+  if(!presenting||!Number.isFinite(restart)||restart<=0)return;
+  const key={};kioskRestartKey=key;
+  const deadline=performance.now()+restart;
+  function tick(){
+    if(kioskRestartKey!==key||!presenting)return;
+    const remaining=deadline-performance.now();
+    if(remaining>0){kioskRestartTimer=setTimeout(tick,Math.min(remaining,2147483647));return;}
+    const first=firstShowSlide();
+    if(first>=0){
+      const position=showOrder.indexOf(first);
+      clearTimeout(advanceTimer);advanceTimer=undefined;advanceKey=null;
+      selectSlide(first,false,true,'start',position);
+      scheduleKioskRestart();
+    }else clearKioskRestart();
+  }
+  kioskRestartTimer=setTimeout(tick,Math.min(restart,2147483647));
+}
+function scheduleAdvance(){
+  const delay=state.transitions?.[index]?.advanceAfterMs;
+  // A slide that still has effects to play — or one whose last click is still
+  // playing out — is not finished, whatever its transition says about
+  // advancing itself.
+  const settled=!animationsWaiting()&&(!animationPlayer||!(animationPlayer.pending||animationPlayer.running));
+  const key=presenting&&state.showProperties?.useTimings!==false&&settled&&(nextShowSlide(1)>=0||linkedShowId!==null)&&Number.isFinite(delay)&&delay>=0?index+':'+showCursor+':'+delay:null;
+  if(key===advanceKey)return;
+  clearTimeout(advanceTimer);advanceKey=key;
+  if(key===null)return;
+  // OOXML unsigned milliseconds can exceed the browser's signed timer limit.
+  const deadline=performance.now()+delay;
+  function tick(){
+    const remaining=deadline-performance.now();
+    if(remaining>0)advanceTimer=setTimeout(tick,Math.min(remaining,2147483647));
+    else {advanceKey=null;moveSlide(1);}
+  }
+  advanceTimer=setTimeout(tick,Math.min(delay,2147483647));
+}
 const byId=id=>document.getElementById(id);
+// Next and previous move through the slide's own build before they move
+// through the deck, so the last slide's remaining effects are still reachable
+// and the first step back is the one inside this slide.
+// True while this slide has effects but the player has not arrived yet. Its
+// clicks belong to the build, so they are held rather than spent on the deck.
+function animationsWaiting(){return state.showProperties?.showAnimation!==false&&animationLoad==='loading'&&presenting&&animationStepsAt(index).length>0;}
+function animationsPending(){return state.showProperties?.showAnimation!==false&&(animationsWaiting()||Boolean(animationPlayer&&animationPlayer.pending));}
+function animationsBehind(){return Boolean(animationPlayer&&animationPlayer.cursor>0);}
+function updateNavigationButtons(){
+  for(const id of ['prev','present-prev'])byId(id).disabled=presenting?nextShowSlide(-1)<0&&!animationsBehind():findSlide(index-1,-1)<0&&!animationsBehind();
+  for(const id of ['next','present-next'])byId(id).disabled=presenting?nextShowSlide(1)<0&&linkedShowId===null&&!animationsPending():findSlide(index+1,1)<0&&!animationsPending();
+  byId('present').disabled=firstShowSlide()<0;
+  byId('presenter').disabled=byId('present').disabled;
+}
 const stage=byId('stage'),slide=byId('slide'),thumbnails=byId('thumbnails');
 const workspace=document.querySelector('.workspace'),chatResizer=byId('chat-resizer');
 const chatWidthKey='office-kit-chat-width',minChatWidth=280,minStageWidth=240;
@@ -418,7 +1193,7 @@ function updateChatWidthAria(){
   const {min,max}=chatWidthLimits();
   chatResizer.setAttribute('aria-valuemin',String(min));chatResizer.setAttribute('aria-valuemax',String(Math.round(max)));
   const width=Math.round(byId('chat').getBoundingClientRect().width);
-  chatResizer.setAttribute('aria-valuenow',String(width));chatResizer.setAttribute('aria-valuetext',width+' pixels');
+  chatResizer.setAttribute('aria-valuenow',String(width));chatResizer.setAttribute('aria-valuetext',width+(previewLocale==='ja'?' ピクセル':' pixels'));
 }
 function setChatWidth(width){const {min,max}=chatWidthLimits();workspace.style.setProperty('--chat-width',Math.min(max,Math.max(min,width))+'px');}
 function saveChatWidth(){try{const width=workspace.style.getPropertyValue('--chat-width');if(width)localStorage.setItem(chatWidthKey,String(parseFloat(width)));else localStorage.removeItem(chatWidthKey);}catch(error){console.warn('Could not save chat width',error);}}
@@ -446,6 +1221,153 @@ new ResizeObserver(updateChatWidthAria).observe(byId('chat'));
 // SVG stays out of the viewer's own DOM and CSS. Keyboard events still reach the
 // document, so arrow-key navigation keeps working after clicking into a slide.
 const canvas=slide.attachShadow({mode:'open'});
+${transitionScript}
+// The slide's object animations. One player per slide, kept while the slide and
+// its timing stay as they are: an unrelated rebuild (new speaker notes, say)
+// must not throw away how far the viewer has clicked through a build.
+//
+// The player is the editor's module, served as one build, so the show, the
+// presenter window and the editor panel cannot disagree about a timing tree.
+let animationPlayer,animationPlayerKey,createAnimationPlayer,pendingAnimationPosition;
+// 'loading' | 'ready' | 'failed'. A slide show holds its clicks while the
+// player is on its way; if it never arrives, the viewer is told so and can ask
+// for it again rather than watching a deck quietly skip its animations.
+let animationLoad='loading',animationLoadAttempt=0;
+function loadAnimationPlayer(){
+  if(animationLoad==='ready')return;
+  animationLoad='loading';updateAnimationNotice();
+  // A module that failed to load stays failed in the browser's module map, so
+  // asking again means asking for a different URL.
+  const url='/animation-player.js'+(animationLoadAttempt++?'?retry='+animationLoadAttempt:'');
+  import(url).then(module=>{
+    createAnimationPlayer=module.createAnimationPlayer;animationLoad='ready';
+    const position=pendingAnimationPosition;pendingAnimationPosition=undefined;
+    if(position!==undefined)syncAnimationPlayer(position);
+    updateNavigationButtons();updateAnimationNotice();scheduleAdvance();
+  },error=>{
+    animationLoad='failed';console.warn('Could not load the animation player',error);
+    updateNavigationButtons();updateAnimationNotice();scheduleAdvance();
+  });
+}
+const animationStepsAt=i=>state.animations?.[i]??[];
+const animationKeyAt=i=>i+'\u0000'+(state.slides[i]??'')+'\u0000'+JSON.stringify(animationStepsAt(i));
+// A transition draws the arriving slide into a layer of its own, beside a layer
+// holding the slide being left — whose shapes carry ids of their own, from a
+// different slide's id space. Only the arriving one is this slide.
+const slideRoot=()=>canvas.querySelector('.transition-layer:not(.transition-old)')??canvas;
+let mediaPlayer,mediaPlayerKey,mediaPlayerConfigKey,createMediaPlayer,mediaLoading=false,mediaGeneration=0;
+const backgroundMedia=[];
+const backgroundMediaRoot=document.createElement('div');
+backgroundMediaRoot.hidden=true;
+stage.append(backgroundMediaRoot);
+const mediaRetry=document.createElement('button');
+mediaRetry.hidden=true;
+byId('presentation-controls').append(mediaRetry);
+mediaRetry.onclick=()=>syncMediaPlayer();
+function disposeCurrentMediaPlayer(){
+  mediaPlayer?.dispose();mediaPlayer=undefined;mediaPlayerKey=undefined;mediaPlayerConfigKey=undefined;
+}
+function disposeMediaPlayer(){
+  disposeCurrentMediaPlayer();
+  for(const retained of backgroundMedia)retained.player.dispose();
+  backgroundMedia.length=0;
+}
+function leaveMediaSlide(previousIndex,previousCursor){
+  if(!presenting){disposeMediaPlayer();return;}
+  if(mediaPlayer){backgroundMedia.push({player:mediaPlayer,index:previousIndex,cursor:previousCursor});mediaPlayer=undefined;mediaPlayerKey=undefined;mediaPlayerConfigKey=undefined;}
+  for(let i=backgroundMedia.length-1;i>=0;i--){
+    const retained=backgroundMedia[i];
+    if(index===retained.index||!retained.player.retainAcrossSlides(showCursor-retained.cursor,backgroundMediaRoot)){
+      retained.player.dispose();backgroundMedia.splice(i,1);
+    }
+  }
+}
+function syncMediaPlayer(){
+  const clips=(state.media??[]).filter(clip=>clip.slideIndex===index&&clip.kind!=='online');
+  if(!presenting){disposeMediaPlayer();mediaRetry.hidden=true;return;}
+  if(!clips.length){disposeCurrentMediaPlayer();mediaRetry.hidden=true;return;}
+  if(!createMediaPlayer){
+    if(mediaLoading)return;
+    mediaLoading=true;mediaRetry.hidden=true;
+    import('/media-player.js?attempt='+Date.now()).then(module=>{
+      createMediaPlayer=module.createMediaPlayer;mediaLoading=false;syncMediaPlayer();
+    },error=>{
+      mediaLoading=false;console.warn('Could not load the media player',error);
+      mediaRetry.textContent=previewLocale==='ja'?'メディアを読み込めませんでした · 再試行':'Media could not load · Retry';
+      mediaRetry.hidden=!presenting;
+    });
+    return;
+  }
+  const key=JSON.stringify([index,clips]);
+  if(mediaPlayerConfigKey===key)return;
+  disposeCurrentMediaPlayer();
+  mediaPlayer=createMediaPlayer({root:slideRoot(),overlayRoot:stage,clips,locale:previewLocale});
+  mediaPlayerConfigKey=key;
+  mediaPlayerKey=String(++mediaGeneration)+':'+key;
+  updatePresenter();
+}
+function updateAnimationNotice(){
+  const note=byId('present-note'),retry=byId('animation-retry');
+  const slideHasEffects=presenting&&state.showProperties?.showAnimation!==false&&animationStepsAt(index).length>0;
+  retry.hidden=!(slideHasEffects&&animationLoad==='failed');
+  retry.textContent=previewLocale==='ja'?'再試行':'Try again';
+  if(slideHasEffects&&animationLoad==='failed'){
+    note.hidden=false;
+    note.textContent=previewLocale==='ja'
+      ?'アニメーションを読み込めませんでした。このスライドの効果は再生されません。'
+      :'The animations could not be loaded, so this slide’s effects are not played.';
+    return;
+  }
+  if(animationsWaiting()){
+    note.hidden=false;
+    note.textContent=previewLocale==='ja'?'アニメーションを準備中…':'Preparing animations…';
+    return;
+  }
+  const skipped=animationPlayer?animationPlayer.unsupported:[];
+  note.hidden=skipped.length===0;
+  note.textContent=skipped.length===0?'':previewLocale==='ja'
+    ?'このスライドの '+skipped.length+' 件のアニメーションは未対応のため再生されません'
+    :skipped.length===1
+      ?'1 animation on this slide is not supported yet, so it is not played'
+      :skipped.length+' animations on this slide are not supported yet, so they are not played';
+}
+function syncAnimationPlayer(position){
+  // Animations belong to the slide show. The still preview shows the slide as
+  // it ends, which is what the renderer drew.
+ const wanted=presenting&&state.showProperties?.showAnimation!==false&&animationStepsAt(index).length>0;
+  if(!wanted){
+    if(animationPlayer){animationPlayer.dispose();animationPlayer=undefined;animationPlayerKey=undefined;}
+    updateAnimationNotice();
+    return;
+  }
+  if(!createAnimationPlayer){
+    // Still on its way, or it never arrived. The slide keeps the picture the
+    // renderer drew; this position is applied the moment the player is there.
+    pendingAnimationPosition=position;
+    updateAnimationNotice();
+    return;
+  }
+  const key=animationKeyAt(index);
+  if(!animationPlayer||animationPlayerKey!==key){
+    // A changed timing makes the old cursor meaningless — the effects it
+    // counted are not the effects there are now.
+    animationPlayer?.dispose();
+    animationPlayer=createAnimationPlayer({
+      root:slideRoot,
+      steps:animationStepsAt(index),
+      reducedMotion:()=>reducedMotion.matches,
+      onChange:()=>{updateNavigationButtons();updatePresenter();scheduleAdvance();},
+    });
+    animationPlayerKey=key;
+    position==='end'?animationPlayer.finish():animationPlayer.reset();
+    updateAnimationNotice();
+    return;
+  }
+  if(position==='end')animationPlayer.finish();
+  else if(position==='start')animationPlayer.reset();
+  // 'keep' leaves the cursor where the viewer left it.
+  updateAnimationNotice();
+}
 function resize(){
   if(!state.slides.length)return;
   const style=getComputedStyle(stage);
@@ -456,36 +1378,56 @@ function resize(){
   const slideWidth=presenting||zoom==='fit'?Math.min(width,height*ratio):1280*Number(zoom);
   slide.style.width=slideWidth+'px';slide.style.height=slideWidth/ratio+'px';
 }
-function selectSlide(next,focusThumbnail=false,reveal=true){
-  index=Math.max(0,Math.min(next,state.slides.length-1));
-  const count=state.slides.length?'Slide '+(index+1)+' of '+state.slides.length:'No slides';
-  byId('chat-context').textContent=state.slides.length?count:'Whole project';
+function selectSlide(next,focusThumbnail=false,reveal=true,position='start',showPosition=-1){
+ const previousIndex=index,previousCursor=showCursor;
+ index=Math.max(0,Math.min(next,state.slides.length-1));
+ if(showPosition>=0)showCursor=showPosition;
+ else if(presenting){if(showOrder[showCursor]!==index){const naturalPosition=showOrder.indexOf(index);if(naturalPosition>=0)showCursor=naturalPosition;}}
+ else {const naturalPosition=showOrder.indexOf(index);if(naturalPosition>=0)showCursor=naturalPosition;}
+  if(presenting&&state.hiddenSlides?.[index]){
+    const forwardPosition=nextShowPosition(1),backwardPosition=forwardPosition<0?nextShowPosition(-1):-1;
+    const position=forwardPosition>=0?forwardPosition:backwardPosition;
+    if(position>=0){showCursor=position;index=showOrder[position];}
+  }
+  if(presenting&&(previousIndex!==index||previousCursor!==showCursor))lastViewed={index:previousIndex,cursor:previousCursor};
+  const count=slideCount();
+  byId('chat-context').textContent=state.slides.length?count:pt('Whole project');
   byId('chat-context').dataset.focus=JSON.stringify({slide:state.slides.length?index:null,revision:state.revision??0});
   window.dispatchEvent(new Event('agent-focus'));
+  if(document.body.classList.contains('editing')&&editorFocus)applyEditorFocus();
   byId('count').textContent=count;byId('present-count').textContent=count;
-  for(const id of ['prev','present-prev'])byId(id).disabled=index===0;
-  for(const id of ['next','present-next'])byId(id).disabled=index>=state.slides.length-1;
-  byId('present').disabled=!state.slides.length;
+  document.body.classList.toggle('kiosk-presenting',presenting&&state.showProperties?.mode?.kind==='kiosk');
   byId('zoom').disabled=!state.slides.length;
   slide.hidden=!state.slides.length;byId('empty').hidden=!!state.slides.length;
   const svg=state.slides[index];
-  if(svg!==displayedSvg){
-    displayedSvg=svg;
-    canvas.innerHTML=svg?'<style>svg{display:block;width:100%;height:100%}</style>'+svg:'';
+  if(previousIndex!==index||previousCursor!==showCursor)leaveMediaSlide(previousIndex,previousCursor);
+  else if(svg!==displayedSvg||position!=='keep')disposeMediaPlayer();
+  if(svg!==displayedSvg||previousIndex!==index){
+    renderSlide(svg,presenting&&previousIndex!==index?state.transitions?.[index]:null);
   }
-  slide.setAttribute('aria-label','Slide '+(index+1));
+  syncAnimationPlayer(position);
+  syncMediaPlayer();
+  updateNavigationButtons();
+  slide.setAttribute('aria-label',slideLabel(index));
   for(const [position,item] of Array.from(thumbnails.children).entries()){
     const button=item.firstElementChild,selected=position===index;
     button.setAttribute('aria-current',String(selected));button.tabIndex=selected?0:-1;
+    button.dataset.skipped=String(!!state.hiddenSlides?.[position]);
+    button.title=state.hiddenSlides?.[position]?pt('Skipped during presentation'):'';
     if(selected){if(reveal)button.scrollIntoView({block:'nearest'});if(focusThumbnail)button.focus({preventScroll:true});}
   }
+  syncBrowseScrollbar();
   resize();
+  if(!transitionCleanup)scheduleAdvance();
+  updatePresenter();
 }
 function update(updated){
   const focusedThumbnail=thumbnails.contains(document.activeElement);
   const previous=state;
+  if(JSON.stringify(previous.media)!==JSON.stringify(updated.media))disposeMediaPlayer();
   state=updated;
-  byId('status').textContent=state.error?'Build failed · showing last successful output':state.building?'Updating…':state.slides.length+' slides · Live';
+  rebuildShowOrder();
+  connectionLost=false;updatePreviewStatus();
   byId('error').textContent=state.error||'';byId('error').hidden=!state.error;
   document.documentElement.style.setProperty('--slide-ratio',String(state.aspectRatio));
   for(let i=state.slides.length;i<urls.length;i++){
@@ -500,7 +1442,7 @@ function update(updated){
     if(!item){
       item=document.createElement('li');
       const button=document.createElement('button'),number=document.createElement('span'),image=document.createElement('img');
-      button.className='thumbnail';button.setAttribute('aria-label','Slide '+(i+1));button.onclick=()=>selectSlide(i,true);
+      button.className='thumbnail';button.setAttribute('aria-label',slideLabel(i));button.onclick=()=>selectSlide(i,true);
       number.className='slide-number';number.textContent=String(i+1);
       image.alt='';image.draggable=false;image.loading='lazy';
       button.append(number,image);item.append(button);thumbnails.append(item);
@@ -508,63 +1450,488 @@ function update(updated){
     item.querySelector('img').src=urls[i];
     if(oldUrl)URL.revokeObjectURL(oldUrl);
   });
-  selectSlide(index,focusedThumbnail,false);
-  if(!state.slides.length&&presenting)void exitPresentation();
+  if(presenting&&firstShowSlide()<0)void exitPresentation();
+  selectSlide(index,focusedThumbnail,false,'keep');
+  if(presenting&&(previous.showProperties?.mode?.kind!==state.showProperties?.mode?.kind||previous.showProperties?.mode?.restart!==state.showProperties?.mode?.restart))scheduleKioskRestart();
 }
-function setPresenting(value){
-  presenting=value;document.body.classList.toggle('presenting',value);resize();
-  if(value)stage.focus();else{
+function setPresenting(value,from){
+  if(!value){presentationFullscreen=false;finishRehearsal();}
+  fullscreenRequest=null;
+  clearKioskRestart();
+  linkedShowId=null;showReturns=[];
+  lastViewed=null;
+  cancelTransition();
+  rebuildShowOrder();
+  presenting=value&&firstShowSlide()>=0;document.body.classList.toggle('presenting',presenting);
+  if(presenting){const first=from??firstShowSlide();if(first>=0){index=first;showCursor=showOrder.findIndex(slide=>slide===first);}}
+  selectSlide(index);
+  if(presenting)scheduleKioskRestart();
+  if(presenting)stage.focus();else{
     byId('present').focus();
     thumbnails.children[index]?.firstElementChild.scrollIntoView({block:'nearest'});
   }
 }
+function returnToLastViewed(){
+ if(!presenting||!lastViewed||lastViewed.index>=state.slides.length)return;
+ const target=lastViewed;
+ selectSlide(target.index,false,true,'start',showOrder[target.cursor]===target.index?target.cursor:-1);
+}
+function followNavigationLink(href){
+ const directions={'#pptx-next-slide':1,'#pptx-prev-slide':-1,'#pptx-first-slide':0,'#pptx-last-slide':0};
+ if(!Object.hasOwn(directions,href))return false;
+ const step=directions[href];
+ let position=-1,target=-1;
+ if(step){
+  position=presenting?nextShowPosition(step):-1;
+  target=presenting?(position>=0?showOrder[position]:-1):findSlide(index+step,step,true);
+ }else{
+  const first=href==='#pptx-first-slide';
+  target=presenting?showSlideAt(first?0:showOrder.length-1,first?1:-1):findSlide(first?0:state.slides.length-1,first?1:-1,true);
+  if(presenting)position=first?showOrder.indexOf(target):showOrder.lastIndexOf(target);
+ }
+ if(target>=0)selectSlide(target,false,true,'start',position);
+ else if(presenting&&step>0)void exitPresentation();
+ return true;
+}
+function launchCustomShow(id,returnToShow){
+ if(!presenting)return;
+ const show=state.customShows?.find(show=>show.id===id);
+ const first=show?.slideIndices.find(slide=>slide>=0&&slide<state.slides.length&&!state.hiddenSlides?.[slide]);
+ if(first===undefined)return;
+ const caller={id:linkedShowId,index,cursor:showCursor,lastViewed,animation:animationPlayer?.progress};
+ if(returnToShow)showReturns.push(caller);else showReturns=[];
+ linkedShowId=id;showCursor=0;lastViewed=null;
+ rebuildShowOrder();
+ selectSlide(first,false,true,'start',showOrder.indexOf(first));
+ lastViewed=null;
+}
+function followCustomShowLink(href){
+ if(!href.startsWith('#pptx-custom-show?'))return false;
+ const params=new URLSearchParams(href.slice('#pptx-custom-show?'.length));
+ const id=params.get('id');
+ if(id!==null&&/^[0-9]+$/.test(id))launchCustomShow(Number(id),params.get('return')==='true');
+ return true;
+}
+// Slide Show ▸ Rehearse Timings: time each slide while presenting, then hand
+// the times to the editor, which asks whether to keep them as slide timings.
+let rehearsal=null;
+const clock=ms=>{const total=Math.floor(ms/1000),two=n=>String(n).padStart(2,'0');return Math.floor(total/3600)+':'+two(Math.floor(total/60)%60)+':'+two(total%60);};
+function rehearsalTick(){
+ if(!rehearsal)return;
+ const now=performance.now();
+ // The show's cursor names the slide on screen; a custom show can repeat one.
+ const showing=showOrder[showCursor]??index;
+ if(showing!==rehearsal.slide){rehearsal.times.set(rehearsal.slide,(rehearsal.times.get(rehearsal.slide)??0)+now-rehearsal.since);rehearsal.slide=showing;rehearsal.since=now;}
+ byId('rehearsal-timer').textContent=clock(now-rehearsal.since)+' · '+clock(now-rehearsal.started);
+}
+function startRehearsal(){
+ const now=performance.now();
+ rehearsal={times:new Map(),slide:showOrder[showCursor]??index,since:now,started:now,timer:setInterval(rehearsalTick,200)};
+ byId('rehearsal-timer').hidden=false;rehearsalTick();
+}
+function finishRehearsal(){
+ if(!rehearsal)return;
+ rehearsalTick();
+ const now=performance.now();
+ rehearsal.times.set(rehearsal.slide,(rehearsal.times.get(rehearsal.slide)??0)+now-rehearsal.since);
+ clearInterval(rehearsal.timer);byId('rehearsal-timer').hidden=true;
+ const timings=[...rehearsal.times].map(([slide,ms])=>({slide,ms:Math.round(ms)}));
+ rehearsal=null;
+ editorFrame.contentWindow?.postMessage({type:'rehearsal-timings',timings},location.origin);
+}
 async function exitPresentation(){
+  if(presenting&&showReturns.length){
+    const caller=showReturns.pop();
+    linkedShowId=caller.id;showCursor=caller.cursor;
+    rebuildShowOrder();
+    selectSlide(caller.index,false,true,'start',caller.cursor);
+    lastViewed=caller.lastViewed;
+    if(caller.animation&&animationPlayer)animationPlayer.resume(caller.animation.cursor,caller.animation.elapsed);
+    return;
+  }
   setPresenting(false);
   if(document.fullscreenElement)await document.exitFullscreen();
 }
-byId('present').onclick=async()=>{
-  setPresenting(true);
+async function startPresentation(from){
+  setPresenting(true,from);
+  if(state.showProperties?.mode?.kind==='browse')return;
+  const request=fullscreenRequest={};
   try{await document.documentElement.requestFullscreen();}
-  catch{byId('exit-present').textContent='Exit view · Esc';}
+  catch{if(fullscreenRequest===request){fullscreenRequest=null;byId('exit-present').textContent=pt('Exit view · Esc');}}
+}
+byId('present').onclick=()=>startPresentation();
+// Messages that used to sit in the shell's header now float over whichever
+// view is showing, so they are not lost while the editor fills the window.
+const NOTICE_MS=6000;
+let noticeTimer;
+function showNotice(text){const notice=byId('notice');notice.textContent=text;notice.hidden=false;clearTimeout(noticeTimer);noticeTimer=setTimeout(()=>{notice.hidden=true;},NOTICE_MS);}
+function updatePresenter(){
+ if(!presenterWindow||presenterWindow.closed)return;
+ // The presenter runs the same player over its own copy of the slide, from the
+ // same cursor and the same moment within the stop in hand, so what it shows
+ // is what the audience sees — including an effect still fading in.
+ const progress=animationPlayer?animationPlayer.progress:null;
+ const animationSteps=animationPlayer?animationStepsAt(index):null;
+ presenterWindow.postMessage({type:'presenter-state',index,count:state.slides.length,animationSteps,current:state.slides[index]??null,next:state.slides[nextShowSlide(1)]??null,hasPrevious:nextShowSlide(-1)>=0||animationsBehind(),hasNext:nextShowSlide(1)>=0||linkedShowId!==null||animationsPending(),animation:progress,notes:state.notes?.[index]??'',aspectRatio:state.aspectRatio,locale:previewLocale,presenting,media:presenting?(state.media??[]).filter(clip=>clip.slideIndex===index):[],mediaKey:mediaPlayerKey,mediaProgress:mediaPlayer?.progress??[]},location.origin);
+}
+setInterval(()=>{
+ if(!presenterWindow||presenterWindow.closed||!mediaPlayer)return;
+ presenterWindow.postMessage({type:'presenter-media-state',index,mediaKey:mediaPlayerKey,mediaProgress:mediaPlayer.progress},location.origin);
+},250);
+byId('presenter').onclick=()=>{
+ if(presenterWindow&&!presenterWindow.closed){setPresenting(true);presenterWindow.focus();return;}
+ presenterWindow=window.open('/presenter','office-kit-presenter','popup,width=1100,height=800');
+ if(presenterWindow)setPresenting(true);
+ else showNotice(pt('Allow popups to open presenter view.'));
 };
+window.addEventListener('message',event=>{
+ if(event.origin!==location.origin||event.source!==presenterWindow||event.data?.type!=='presenter-command')return;
+ if(event.data.action==='ready')updatePresenter();
+ else if(event.data.action==='media'){
+  const command=event.data.index;
+  if(!presenting||!mediaPlayer||event.data.mediaKey!==mediaPlayerKey||!command||!Number.isInteger(command.shapeId)||!['play','pause','seek'].includes(command.action))return;
+  if(command.action==='seek'&&(!Number.isFinite(command.time)||command.time<0))return;
+  mediaPlayer.command(command);updatePresenter();
+ }
+ else if(event.data.action==='next')moveSlide(1,true);
+ else if(event.data.action==='previous')moveSlide(-1,true);
+ else if(event.data.action==='exit')void exitPresentation();
+ else if(event.data.action==='lastViewed')returnToLastViewed();
+ else if(event.data.action==='navigation'&&typeof event.data.index==='string')followNavigationLink(event.data.index);
+ else if(event.data.action==='customShow'&&typeof event.data.index==='string')followCustomShowLink(event.data.index);
+ else if(event.data.action==='jump'&&Number.isInteger(event.data.index)&&event.data.index>=0&&event.data.index<state.slides.length)selectSlide(event.data.index);
+});
 byId('exit-present').onclick=exitPresentation;
-document.addEventListener('fullscreenchange',()=>{if(!document.fullscreenElement&&presenting)setPresenting(false);});
-for(const id of ['prev','present-prev'])byId(id).onclick=()=>selectSlide(index-1);
-for(const id of ['next','present-next'])byId(id).onclick=()=>selectSlide(index+1);
+function scrollToBrowsePosition(value){
+ const positions=browsePositions();
+ const position=positions[Math.max(0,Math.min(positions.length-1,value))];
+ if(position&&position.position!==showCursor)selectSlide(position.slide,false,true,'start',position.position);
+}
+const browseScrollbar=byId('presentation-scrollbar');
+let scrollbarDragOffset;
+function dragBrowseScrollbar(event){
+ const rect=browseScrollbar.getBoundingClientRect();
+ const thumb=browseScrollbar.firstElementChild.getBoundingClientRect();
+ const travel=rect.height-thumb.height;
+ if(travel<=0)return;
+ const max=Number(browseScrollbar.getAttribute('aria-valuemax'));
+ scrollToBrowsePosition(Math.round(((event.clientY-rect.top-scrollbarDragOffset)/travel)*max));
+}
+browseScrollbar.onpointerdown=event=>{
+ if(event.button!==0)return;
+ event.preventDefault();browseScrollbar.focus();
+ const thumb=browseScrollbar.firstElementChild.getBoundingClientRect();
+ scrollbarDragOffset=event.clientY>=thumb.top&&event.clientY<=thumb.bottom?event.clientY-thumb.top:thumb.height/2;
+ browseScrollbar.setPointerCapture(event.pointerId);
+ dragBrowseScrollbar(event);
+};
+browseScrollbar.onpointermove=event=>{
+ if(browseScrollbar.hasPointerCapture(event.pointerId))dragBrowseScrollbar(event);
+};
+browseScrollbar.onpointerup=event=>{
+ if(browseScrollbar.hasPointerCapture(event.pointerId))browseScrollbar.releasePointerCapture(event.pointerId);
+};
+browseScrollbar.onkeydown=event=>{
+ const current=Number(browseScrollbar.getAttribute('aria-valuenow'));
+ const max=Number(browseScrollbar.getAttribute('aria-valuemax'));
+ let next;
+ if(event.key==='ArrowDown'||event.key==='PageDown')next=current+1;
+ else if(event.key==='ArrowUp'||event.key==='PageUp')next=current-1;
+ else if(event.key==='Home')next=0;
+ else if(event.key==='End')next=max;
+ else return;
+ event.preventDefault();event.stopPropagation();scrollToBrowsePosition(next);
+};
+byId('animation-retry').onclick=()=>{loadAnimationPlayer();};
+loadAnimationPlayer();
+document.addEventListener('fullscreenchange',()=>{
+ // Only the page itself is ever requested here. A native video control can put
+ // its <video> into fullscreen (and return to the page) on its own; that is the
+ // viewer's choice, not a stale grant.
+ if(document.fullscreenElement){
+  if(document.fullscreenElement!==document.documentElement||presentationFullscreen)return;
+  if(fullscreenRequest){fullscreenRequest=null;presentationFullscreen=true;}
+  else void document.exitFullscreen();
+ }
+ else if(presentationFullscreen){presentationFullscreen=false;if(presenting)setPresenting(false);}
+});
+for(const id of ['prev','present-prev'])byId(id).onclick=()=>{if(!presenting||state.showProperties?.mode?.kind!=='kiosk')moveSlide(-1);};
+for(const id of ['next','present-next'])byId(id).onclick=()=>{if(!presenting||state.showProperties?.mode?.kind!=='kiosk')moveSlide(1);};
 byId('zoom').onchange=resize;
-stage.onclick=()=>{if(presenting&&!getSelection().toString())selectSlide(index+1);};
+stage.onclick=event=>{
+  const link=event.composedPath().find(node=>node instanceof Element&&node.localName==='a');
+  if(link){
+    const href=link.getAttribute('href')??link.getAttributeNS('http://www.w3.org/1999/xlink','href')??'';
+    if(followNavigationLink(href)||followCustomShowLink(href)){event.preventDefault();return;}
+    if(href==='#pptx-end-show'||href==='#pptx-last-slide-viewed'){
+      event.preventDefault();
+      if(!presenting)return;
+      if(href==='#pptx-end-show'){void exitPresentation();return;}
+      returnToLastViewed();
+      return;
+    }
+    if(href.startsWith('#slide-')){
+      event.preventDefault();
+      const number=Number(href.slice(7));
+      if(Number.isInteger(number)&&number>=1&&number<=state.slides.length)selectSlide(number-1);
+    }
+    return;
+  }
+  if(!presenting||state.showProperties?.mode?.kind==='kiosk'||getSelection().toString())return;
+  // 'advClick' says whether a click moves to the next *slide*. A build still
+  // belongs to this one, so its remaining effects play either way.
+  if(animationsPending()||state.transitions?.[index]?.advanceOnClick!==false)moveSlide(1);
+};
 document.addEventListener('keydown',event=>{
   if(event.key==='Escape'&&presenting){event.preventDefault();void exitPresentation();return;}
+  // As in PowerPoint's Reading View, Esc goes back to Normal view, unless it
+  // is closing the viewer's own text field or area selection first.
+  if(event.key==='Escape'&&!document.body.classList.contains('editing')&&!event.target.closest('select,input,textarea,[contenteditable]')&&document.querySelector('.slide-edit-panel')?.hidden!==false){event.preventDefault();chooseView(true);return;}
+  if(presenting&&state.showProperties?.mode?.kind==='kiosk')return;
   if(event.altKey||event.ctrlKey||event.metaKey||event.target.closest('select,input,textarea,[contenteditable]'))return;
-  let next=index;
-  if(['ArrowLeft','ArrowUp','PageUp'].includes(event.key))next--;
-  else if(['ArrowRight','ArrowDown','PageDown'].includes(event.key))next++;
-  else if(event.key==='Home')next=0;
-  else if(event.key==='End')next=state.slides.length-1;
-  else if(event.key===' '&&presenting&&!event.target.closest('button,a'))next+=event.shiftKey?-1:1;
+  const focusThumbnail=thumbnails.contains(document.activeElement);
+  let step=0,jump=-1,jumpPosition=-1;
+  if(['ArrowLeft','ArrowUp','PageUp'].includes(event.key))step=-1;
+  else if(['ArrowRight','ArrowDown','PageDown'].includes(event.key))step=1;
+  else if(event.key==='Home'){
+    jump=presenting?firstShowSlide():findSlide(0,1);
+    if(presenting)jumpPosition=showOrder.findIndex(slide=>slide===jump&&!state.hiddenSlides?.[slide]);
+  }
+  else if(event.key==='End'){
+    jump=presenting?showSlideAt(showOrder.length-1,-1):findSlide(state.slides.length-1,-1);
+    if(presenting)jumpPosition=showOrder.findLastIndex(slide=>slide===jump&&!state.hiddenSlides?.[slide]);
+  }
+  else if(event.key===' '&&presenting&&!event.target.closest('button,a'))step=event.shiftKey?-1:1;
   else return;
-  event.preventDefault();selectSlide(next,thumbnails.contains(document.activeElement));
+  event.preventDefault();
+  // Home and End are a jump, not a step: they land on a slide with its build
+  // at the start rather than walking through the one in hand.
+  if(step!==0)moveSlide(step,presenting,focusThumbnail);
+  else if(jump>=0)selectSlide(jump,focusThumbnail,true,'start',jumpPosition);
 });
 new ResizeObserver(resize).observe(stage);
 let refreshId=0;
 async function refresh(){
   const id=++refreshId;
   try{const response=await fetch('/state'+(state.revision===undefined?'':'?since='+state.revision));if(!response.ok)throw new Error('Preview unavailable');const updated=await response.json();if(id===refreshId){if(updated.changes){updated.slides=state.slides.slice(0,updated.count);updated.slides.length=updated.count;for(const [position,svg] of Object.entries(updated.changes))updated.slides[Number(position)]=svg;}update(updated);}}
-  catch{if(id===refreshId)byId('status').textContent='Reconnecting…';}
+  catch{if(id===refreshId){connectionLost=true;updatePreviewStatus();}}
+}
+const editorFrame=byId('editor-frame');
+let editorFocus;
+// The Agents task pane opens on demand, like PowerPoint's panes; the editor's
+// Agents button (in its tab row) mirrors that state, so every change is reported back.
+const agentsKey='office-kit-agents-open';
+function agentsOpen(){return !document.body.classList.contains('chat-hidden');}
+function postAgentsState(focusButton=false){editorFrame.contentWindow?.postMessage({type:'host-panes',agents:agentsOpen(),focus:focusButton},location.origin);}
+function setAgentsOpen(open,{focusPane=false,returnFocus=false}={}){
+ document.body.classList.toggle('chat-hidden',!open);
+ byId('toggle-chat').setAttribute('aria-pressed',String(open));
+ try{sessionStorage.setItem(agentsKey,open?'1':'0');}catch(error){console.warn('Could not save the Agents pane state',error);}
+ postAgentsState(returnFocus&&document.body.classList.contains('editing'));
+ resize();
+ if(open&&focusPane)byId('close-chat').focus();
+ else if(returnFocus){if(document.body.classList.contains('editing'))editorFrame.focus();else byId('toggle-chat').focus();}
 }
-byId('toggle-chat').onclick=()=>{const hidden=document.body.classList.toggle('chat-hidden');byId('toggle-chat').setAttribute('aria-expanded',String(!hidden));resize();};
-const events=new EventSource('/events');events.onmessage=event=>{if(event.data==='history'){window.dispatchEvent(new Event('agent-history'));return;}if(event.data==='chat'){window.dispatchEvent(new Event('agent-chat'));return;}if(event.data==='ready'){delete state.revision;}void refresh();};events.onerror=()=>{byId('status').textContent='Reconnecting…'};refresh();
+byId('toggle-chat').onclick=()=>setAgentsOpen(!agentsOpen());
+byId('close-chat').onclick=()=>setAgentsOpen(false,{returnFocus:true});
+try{if(sessionStorage.getItem(agentsKey)==='1')setAgentsOpen(true);}catch(error){console.warn('Could not restore the Agents pane state',error);}
+function setEditorMode(editing){
+ document.body.classList.toggle('editing',editing);
+ if(editing&&!editorFrame.getAttribute('src'))editorFrame.src='/editor';
+ if(editing&&editorFocus)applyEditorFocus();else selectSlide(index);
+ resize();
+}
+// The rendered viewer is the editor's Reading View; Normal (or Esc) returns.
+function chooseView(editing){
+ setEditorMode(editing);
+ try{sessionStorage.setItem('office-kit-view',editing?'editor':'preview');}catch(error){console.warn('Could not save view preference',error);}
+ if(editing)editorFrame.focus();else stage.focus();
+}
+byId('toggle-editor').onclick=()=>chooseView(true);
+try{setEditorMode(sessionStorage.getItem('office-kit-view')!=='preview');}catch(error){console.warn('Could not restore view preference',error);setEditorMode(true);}
+function applyEditorFocus(){
+ if(!editorFocus)return;
+ index=Math.max(0,editorFocus.slide);
+ byId('chat-context').textContent=(editorFocus.locale==='ja'?'スライド ':'Slide ')+(index+1)+' / '+editorFocus.count+(editorFocus.dirty?' · '+(editorFocus.locale==='ja'?'未保存':'Unsaved'):'');
+ byId('chat-context').dataset.focus=JSON.stringify({slide:editorFocus.count?index:null,revision:editorFocus.dirty?-1:editorFocus.revision});
+ window.dispatchEvent(new Event('agent-focus'));
+}
+window.addEventListener('message',event=>{
+ if(event.origin!==location.origin||event.source!==editorFrame.contentWindow||event.data?.type!=='editor-command')return;
+ const slide=event.data.slide;
+ if(event.data.action==='agents'){setAgentsOpen(!agentsOpen(),{focusPane:true});return;}
+ if(event.data.action==='reading'){
+  if(Number.isInteger(slide)&&slide>=0&&slide<state.slides.length)index=slide;
+  chooseView(false);
+  return;
+ }
+ // The editor's Slide Show tab; the click's user activation reaches this page,
+ // so fullscreen and the presenter popup are still allowed.
+ if(byId('present').disabled)return;
+ if(event.data.action==='start')void startPresentation();
+ else if(event.data.action==='current'&&Number.isInteger(slide)&&slide>=0&&slide<state.slides.length)void startPresentation(slide);
+ else if(event.data.action==='presenter')byId('presenter').click();
+ else if(event.data.action==='rehearse'){void startPresentation();if(presenting)startRehearsal();}
+});
+window.addEventListener('message',event=>{
+ if(event.origin!==location.origin||event.source!==editorFrame.contentWindow||event.data?.type!=='editor-focus')return;
+ editorFocus=event.data;
+ if(previewLocale!==editorFocus.locale&&(editorFocus.locale==='ja'||editorFocus.locale==='en')){previewLocale=editorFocus.locale;updatePreviewLabels();}
+ updatePresenter();
+ if(document.body.classList.contains('editing'))applyEditorFocus();
+ postAgentsState();
+});
+updatePreviewLabels();
+const events=new EventSource('/events');events.onmessage=event=>{if(event.data==='history'){window.dispatchEvent(new Event('agent-history'));return;}if(event.data==='chat'){window.dispatchEvent(new Event('agent-chat'));return;}if(event.data==='ready'){delete state.revision;}void refresh();};events.onerror=()=>{connectionLost=true;updatePreviewStatus()};refresh();
 <\/script><script type="module" src="/terminal.js"><\/script></html>`;
 //#endregion
+//#region src/presenter-page.ts
+/** Separate window so speaker notes never appear on the audience surface. */
+const presenterPage = `<!doctype html>
+<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width">
+<title>Presenter view — Office Kit</title>
+<style>
+*{box-sizing:border-box}body{margin:0;background:#141929;color:#e4e8f0;font:15px system-ui,sans-serif;height:100vh;display:flex;flex-direction:column}header,footer{display:flex;align-items:center;gap:14px;padding:16px;flex-wrap:wrap}h1{font-size:18px;margin:0;flex:1}h2{font-size:13px;color:#b9c2d8;margin:0 0 10px}button{font:inherit;color:inherit;background:#29243e;border:1px solid #675487;border-radius:6px;padding:8px 12px;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline:2px solid #bca3ff;outline-offset:3px}main{display:grid;grid-template-columns:minmax(0,3fr) minmax(240px,2fr);gap:20px;padding:0 20px;flex:1;min-height:0;overflow:auto}section{min-width:0}#current{position:relative}#current [hidden]{display:none!important}#current,#next{background:#090c14;aspect-ratio:16/9}#current svg,#next svg{width:100%;height:100%}#notes{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;max-height:40vh;overflow:auto;padding:14px;background:#1e2538;border-radius:8px}#notes-title{margin-top:20px}#count{flex:1}#message{padding:0 20px;color:#ffc9bd}#elapsed{font-variant-numeric:tabular-nums}footer{justify-content:flex-end}@media(max-width:640px){main{grid-template-columns:1fr}#notes{max-height:none}}
+</style>
+<header><h1 id="title">Presenter view</h1><span id="timer-label">Elapsed</span><output id="elapsed">00:00</output><button id="reset">Reset timer</button></header>
+<p id="message" role="status">Connecting to presentation…</p>
+<main><section><h2 id="current-title">Current slide</h2><div id="current"></div><button id="media-retry" hidden></button><h2 id="notes-title">Speaker notes</h2><div id="notes" tabindex="0"></div></section><section><h2 id="next-title">Next slide</h2><div id="next"></div><p id="end" hidden></p></section></main>
+<footer><span id="count" aria-live="polite"></span><button id="prev" disabled>Previous</button><button id="next-button" disabled>Next</button><button id="exit">Exit presentation</button></footer>
+<script>
+const byId=id=>document.getElementById(id);
+const canvases={current:byId('current').attachShadow({mode:'open'}),next:byId('next').attachShadow({mode:'open'})};
+const displayed={};
+let locale='en',started=performance.now(),connected=false;
+const text=(en,ja)=>locale==='ja'?ja:en;
+// The presenter shows the slide the audience is looking at, so it runs the very
+// same player over its own copy, resumed at the same point in the same stop,
+// rather than being told after the fact what is on screen.
+let makePlayer,animationPlayer,animationKey,animationGeneration,lastState;
+const presenterReducedMotion=matchMedia('(prefers-reduced-motion: reduce)');
+import('/animation-player.js').then(module=>{makePlayer=module.createAnimationPlayer;if(lastState)syncAnimation(lastState);},()=>{});
+function syncAnimation(data){
+ const steps=data.presenting?data.animationSteps:null;
+ if(!steps||!steps.length||!makePlayer){
+  if(animationPlayer){animationPlayer.dispose();animationPlayer=undefined;animationKey=undefined;animationGeneration=undefined;}
+  return;
+ }
+ const key=data.index+'\\u0000'+(data.current??'')+'\\u0000'+JSON.stringify(steps);
+ if(key!==animationKey){
+  animationPlayer?.dispose();
+  animationPlayer=makePlayer({root:canvases.current,steps,reducedMotion:()=>presenterReducedMotion.matches});
+  animationKey=key;animationGeneration=undefined;
+ }
+ const progress=data.animation;
+ if(!progress)return;
+ // Follow the audience only when it actually moved. The effects inside a stop
+ // run on the same clock here, so re-running them on every passing report would
+ // restart a fade; a seek that lands on the cursor it is already on — jumping
+ // to the end of the stop in hand, say — still has to be followed, which is
+ // what the generation says and the cursor alone does not.
+ if(progress.generation===animationGeneration)return;
+ animationGeneration=progress.generation;
+ animationPlayer.resume(progress.cursor,progress.elapsed);
+}
+let makeMediaPlayer,mediaPlayer,mediaOverlay,mediaKey,mediaLoading=false;
+function disposeMedia(){mediaPlayer?.dispose();mediaOverlay?.remove();mediaPlayer=undefined;mediaOverlay=undefined;mediaKey=undefined;}
+function syncMedia(data){
+ const clips=(data.media??[]).filter(clip=>clip.kind!=='online');
+ if(!data.presenting||!data.mediaKey||!clips.length){disposeMedia();byId('media-retry').hidden=true;return;}
+ if(!makeMediaPlayer){
+  if(mediaLoading)return;
+  mediaLoading=true;byId('media-retry').hidden=true;
+  import('/media-player.js?attempt='+Date.now()).then(module=>{
+   makeMediaPlayer=module.createMediaPlayer;mediaLoading=false;if(lastState)syncMedia(lastState);
+  },error=>{
+   mediaLoading=false;console.warn('Could not load presenter media',error);
+   byId('media-retry').textContent=text('Media could not load · Retry','メディアを読み込めませんでした · 再試行');
+   byId('media-retry').hidden=!lastState?.presenting;
+  });
+  return;
+ }
+ const key=data.mediaKey+'\\u0000'+data.current;
+ if(key!==mediaKey){
+  disposeMedia();
+  // Overlays must live inside the canvas shadow tree; the host has no slot
+  // and would not render children appended to its light DOM.
+  mediaOverlay=document.createElement('div');canvases.current.append(mediaOverlay);
+  mediaPlayer=makeMediaPlayer({root:canvases.current,overlayRoot:mediaOverlay,clips,locale,
+   onCommand:command=>{
+    if(window.opener&&!window.opener.closed)window.opener.postMessage({type:'presenter-command',action:'media',index:command,mediaKey:data.mediaKey},location.origin);
+   }});
+  mediaKey=key;
+ }
+ mediaPlayer.sync(data.mediaProgress??[]);
+}
+byId('media-retry').onclick=()=>{if(lastState)syncMedia(lastState);};
+function send(action,index){if(window.opener&&!window.opener.closed)window.opener.postMessage({type:'presenter-command',action,index},location.origin);}
+for(const canvas of Object.values(canvases))canvas.addEventListener('click',event=>{
+ const link=event.composedPath().find(node=>node instanceof Element&&node.localName==='a');
+ const href=link?.getAttribute('href')??link?.getAttributeNS('http://www.w3.org/1999/xlink','href')??'';
+ if(['#pptx-next-slide','#pptx-prev-slide','#pptx-first-slide','#pptx-last-slide'].includes(href)){
+  event.preventDefault();send('navigation',href);
+ }else if(href.startsWith('#pptx-custom-show?')){
+  event.preventDefault();send('customShow',href);
+ }else if(href==='#pptx-end-show'||href==='#pptx-last-slide-viewed'){
+  event.preventDefault();send(href==='#pptx-end-show'?'exit':'lastViewed');
+ }else if(href.startsWith('#slide-')){
+  event.preventDefault();
+  const number=Number(href.slice(7));
+  if(Number.isInteger(number)&&number>=1)send('jump',number-1);
+ }
+});
+function update(data){
+ connected=true;locale=data.locale;document.documentElement.lang=locale;
+ for(const [id,en,ja] of [['title','Presenter view','発表者ビュー'],['timer-label','Elapsed','経過時間'],['reset','Reset timer','タイマーをリセット'],['current-title','Current slide','現在のスライド'],['notes-title','Speaker notes','発表者ノート'],['next-title','Next slide','次のスライド'],['prev','Previous','前へ'],['next-button','Next','次へ'],['exit','Exit presentation','プレゼンテーションを終了']])byId(id).textContent=text(en,ja);
+ document.title=text('Presenter view — Office Kit','発表者ビュー — Office Kit');
+ byId('message').textContent=data.presenting?'':text('Presentation is stopped.','プレゼンテーションは停止中です。');
+ const animation=data.animation&&data.animation.stops>0
+  ? ' · '+text('Click '+data.animation.cursor+' of '+data.animation.stops,'クリック '+data.animation.cursor+' / '+data.animation.stops)
+  : '';
+ byId('count').textContent=data.count?text('Slide '+(data.index+1)+' of '+data.count,'スライド '+(data.index+1)+' / '+data.count)+animation:text('No slides','スライドがありません');
+ for(const name of ['current','next']){
+  const svg=data[name];
+  if(displayed[name]!==svg){if(name==='current')disposeMedia();displayed[name]=svg;canvases[name].innerHTML=svg?'<style>svg{display:block;width:100%;height:100%}</style>'+svg:'';}
+  byId(name).style.aspectRatio=String(data.aspectRatio);byId(name).hidden=!svg;
+ }
+ byId('notes').textContent=data.notes||text('No speaker notes.','発表者ノートはありません。');
+ byId('prev').disabled=!data.hasPrevious;
+ // The next click may be an effect on this slide rather than the next slide.
+ byId('next-button').disabled=!(data.hasNext??data.next);
+ byId('exit').disabled=!data.presenting;
+ byId('end').hidden=!!(data.hasNext??data.next);byId('end').textContent=text('End of presentation','プレゼンテーションの最後です');
+ lastState=data;syncAnimation(data);syncMedia(data);
+}
+window.addEventListener('message',event=>{
+ if(event.origin!==location.origin||event.source!==window.opener)return;
+ if(event.data?.type==='presenter-state')update(event.data);
+ else if(event.data?.type==='presenter-media-state'&&lastState&&event.data.index===lastState.index&&event.data.mediaKey===lastState.mediaKey){
+  lastState.mediaProgress=event.data.mediaProgress;mediaPlayer?.sync(lastState.mediaProgress);
+ }
+});
+byId('prev').onclick=()=>send('previous');byId('next-button').onclick=()=>send('next');byId('exit').onclick=()=>send('exit');
+byId('reset').onclick=()=>{started=performance.now();byId('elapsed').textContent='00:00';};
+document.addEventListener('keydown',event=>{
+ if(event.altKey||event.ctrlKey||event.metaKey||(event.key!=='Escape'&&event.target.closest('button')))return;
+ const action=['ArrowRight','ArrowDown','PageDown',' '].includes(event.key)?'next':['ArrowLeft','ArrowUp','PageUp'].includes(event.key)?'previous':event.key==='Escape'?'exit':null;
+ if(action){event.preventDefault();send(action);}
+});
+setInterval(()=>{
+ const seconds=Math.floor((performance.now()-started)/1000);byId('elapsed').textContent=String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0');
+ if(!window.opener||window.opener.closed){disposeMedia();byId('message').textContent=text('The presentation window is closed.','プレゼンテーションのウィンドウは閉じられています。');for(const id of ['prev','next-button','exit'])byId(id).disabled=true;}
+ else if(!connected)send('ready');
+},250);
+send('ready');
+<\/script></html>`;
+//#endregion
 //#region src/agent-page.ts
-const agentPage = `<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="/terminal.css"><style>${previewStyles}
-body{display:flex;flex-direction:column;background:#191e30;height:100dvh;min-width:0;overflow:auto;overflow-x:hidden} .chat-heading{flex-wrap:wrap} .chat-heading select{min-width:100px}.chat-heading,#chat-context{flex-shrink:0}#claude-panel{min-height:100px}#codex-panel{min-height:240px}
+const agentPage = `<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="/terminal.css"><style>${agentStyles}
 </style><div class="chat-heading"><select id="chat-provider" aria-label="AI provider"><option value="claude">Claude Code</option><option value="codex">Codex</option></select><button id="chat-reset" hidden>New chat</button></div>
 <div id="chat-context">No slide selected</div>
-<section id="claude-panel" aria-label="Claude Code terminal"><div class="terminal-toolbar"><span id="terminal-status" role="status">Start Claude Code to edit your slides.</span><button id="terminal-start">Start</button><button id="terminal-stop" hidden>End session</button></div><div class="terminal-frame"><div id="terminal"></div></div></section>
+<section id="claude-panel" aria-label="Claude Code terminal"><div class="terminal-toolbar"><span id="terminal-status" role="status">Start Claude Code to edit your slides.</span><button id="terminal-start" class="primary">Start</button><button id="terminal-stop" hidden>End session</button></div><div class="terminal-frame"><div id="terminal"></div></div></section>
 <div id="codex-panel" hidden>
 <div id="messages" role="log" aria-label="Conversation"><p class="chat-intro">Describe what you want to change. The current slide is included automatically. You can also ask about other slides or the whole deck.<br><br>Uses your locally installed Codex. Sign in through its CLI first. Sending a message allows it to edit this project.</p></div>
-<form id="chat-form"><textarea id="chat-input" aria-label="Message" maxlength="16000" placeholder="Ask for a change…" required></textarea><div class="chat-actions"><span class="chat-shortcut">⌘ / Ctrl + Enter</span><button id="chat-stop" type="button" hidden>Stop</button><button id="chat-send" type="submit">Send</button></div></form>
+<form id="chat-form"><textarea id="chat-input" aria-label="Message" maxlength="16000" placeholder="Ask for a change…" required></textarea><div class="chat-actions"><span class="chat-shortcut">⌘ / Ctrl + Enter</span><button id="chat-stop" type="button" hidden>Stop</button><button id="chat-send" class="primary" type="submit">Send</button></div></form>
 <div id="chat-status" role="status">Ready</div>
 </div>
 <script>
@@ -1195,8 +2562,88 @@ Current request and preview context (JSON): ${JSON.stringify(user)}`;
 }
 //#endregion
 //#region src/server.ts
+const embeddedMediaUrl = /^data:([^;,]+);base64,(.*)$/s;
+function cacheEmbeddedMedia(media) {
+	const cache = /* @__PURE__ */ new Map();
+	return {
+		cache,
+		published: media.map((item) => {
+			if (item.kind === "online") return item;
+			const match = embeddedMediaUrl.exec(item.src);
+			if (!match) return item;
+			const bytes = Buffer.from(match[2], "base64");
+			const hash = createHash("sha256").update(bytes).digest("hex");
+			if (!cache.has(hash)) cache.set(hash, {
+				bytes,
+				contentType: item.contentType ?? match[1]
+			});
+			return {
+				...item,
+				src: `/media/${hash}`
+			};
+		})
+	};
+}
+function mediaRange(value, length) {
+	if (!value) return {
+		start: 0,
+		end: length - 1,
+		partial: false
+	};
+	const match = /^bytes=(\d*)-(\d*)$/.exec(value);
+	if (!match || !match[1] && !match[2] || length === 0) return null;
+	let start;
+	let end;
+	if (!match[1]) {
+		const suffix = Number(match[2]);
+		if (!Number.isSafeInteger(suffix) || suffix <= 0) return null;
+		start = Math.max(0, length - suffix);
+		end = length - 1;
+	} else {
+		start = Number(match[1]);
+		end = match[2] ? Number(match[2]) : length - 1;
+		if (!Number.isSafeInteger(start) || !Number.isSafeInteger(end) || start > end || start >= length) return null;
+		end = Math.min(end, length - 1);
+	}
+	return {
+		start,
+		end,
+		partial: true
+	};
+}
+const REMEMBERED_DOCUMENTS = 32;
+const BUNDLED_ASSETS = {
+	"/terminal.js": "terminal-client.js",
+	"/terminal.css": "terminal-client.css",
+	"/editor.js": "editor.js",
+	"/editor.css": "editor.css",
+	"/animation-player.js": "animation-player.js",
+	"/media-player.js": "media-player.js"
+};
 async function serveDeck(entry, port = 4173) {
 	let latest;
+	let source;
+	let sourceHash;
+	let documentHash;
+	let mediaCache = /* @__PURE__ */ new Map();
+	let publishedMedia = [];
+	const store = editorStore(entry);
+	let saved = await store.read();
+	let conflicts = [];
+	const documents = /* @__PURE__ */ new Map();
+	let uploads = 0;
+	function remember(id, bytes) {
+		documents.set(id, bytes);
+		if (documents.size > REMEMBERED_DOCUMENTS) documents.delete(documents.keys().next().value);
+	}
+	const serverId = randomUUID();
+	const projectId = createHash("sha256").update(resolve(entry)).digest("hex");
+	let publishing = Promise.resolve();
+	function publish(fn) {
+		const result = publishing.then(fn);
+		publishing = result.then(() => {}, () => {});
+		return result;
+	}
 	let error = null;
 	let building = false;
 	let revision = 0;
@@ -1232,6 +2679,240 @@ async function serveDeck(entry, port = 4173) {
 		}
 		return result;
 	}
+	function editorState() {
+		const conflict = !!saved && !!sourceHash && saved.sourceHash !== sourceHash;
+		return {
+			projectId,
+			revision: `${serverId}:${revision}`,
+			previewRevision: revision,
+			documentHash,
+			sourceHash,
+			fileName: basename(entry).replace(/\.[^.]+$/, "") + ".pptx",
+			hasEdits: !!saved,
+			conflict,
+			conflicts: conflict ? conflicts : [],
+			building,
+			error,
+			available: !!latest
+		};
+	}
+	function update(result) {
+		patch = {};
+		result.slides.forEach((svg, index) => {
+			if (svg !== latest?.slides[index]) patch[index] = svg;
+		});
+		latest = result;
+		({cache: mediaCache, published: publishedMedia} = cacheEmbeddedMedia(result.media));
+		documentHash = sourceFingerprint(result.bytes);
+		revision++;
+		remember(`${serverId}:${revision}`, result.bytes);
+	}
+	function notify() {
+		for (const client of clients) client.write("data: updated\n\n");
+	}
+	/**
+	* Accepts an editor upload. An upload based on an older document the editor
+	* loaded (the source rebuilt meanwhile) is merged with the current one.
+	*/
+	function acceptUpload(bytes, basis, keepEdits) {
+		if (!source || !sourceHash || !latest || building || error || closed) return {
+			ok: false,
+			refused: "busy",
+			conflicts: []
+		};
+		const state = editorState();
+		if (state.conflict && !keepEdits) return {
+			ok: false,
+			refused: "conflict",
+			conflicts: state.conflicts
+		};
+		const accepted = {
+			ok: true,
+			source,
+			sourceHash
+		};
+		if (basis === state.revision) return {
+			...accepted,
+			bytes,
+			merged: false
+		};
+		const based = basis !== void 0 && !keepEdits ? documents.get(basis) : void 0;
+		if (!based) return {
+			ok: false,
+			refused: "stale",
+			conflicts: []
+		};
+		const merged = mergeDecks(based, bytes, latest.bytes);
+		return merged.ok ? {
+			...accepted,
+			bytes: merged.bytes,
+			merged: true
+		} : {
+			ok: false,
+			refused: "conflict",
+			conflicts: merged.conflicts
+		};
+	}
+	async function edit(request, response) {
+		const json = (status, message, extra = {}) => {
+			response.writeHead(status, { "Content-Type": "application/json" });
+			response.end(JSON.stringify({
+				...editorState(),
+				...message ? { message } : {},
+				...extra
+			}));
+		};
+		const refuse = (upload) => json(409, upload.refused === "conflict" ? "These edits conflict with changes in the source." : "The preview changed. Review the current source before saving.", {
+			refused: upload.refused,
+			mergeConflicts: upload.conflicts
+		});
+		if (request.headers.origin !== `http://${request.headers.host}` || request.headers["sec-fetch-site"] === "cross-site") {
+			request.resume();
+			json(403, "Editor requests must come from this preview.");
+			return;
+		}
+		const useSource = request.url === "/editor/resolve" && request.method === "POST";
+		const save = request.url === "/editor/document" && request.method === "PUT";
+		if (!useSource && !save) {
+			request.resume();
+			json(405);
+			return;
+		}
+		if (save && request.headers["content-type"] !== "application/octet-stream") {
+			request.resume();
+			json(415);
+			return;
+		}
+		const chunks = [];
+		let length = 0;
+		const MAX_EDITOR_BYTES = 64 * 1024 * 1024;
+		const basis = request.headers["if-match"];
+		const keepEdits = request.headers["x-editor-resolve"] === "edits";
+		const uploaded = (bytes, upload) => {
+			if (!upload.merged) return {};
+			const id = `${serverId}:upload:${++uploads}`;
+			remember(id, bytes);
+			return {
+				merged: true,
+				uploadRevision: id
+			};
+		};
+		try {
+			for await (const chunk of request) {
+				length += chunk.length;
+				if (length > MAX_EDITOR_BYTES) {
+					json(413, "The editor upload exceeds 64 MiB.");
+					return;
+				}
+				chunks.push(chunk);
+			}
+			if (save && sourceSync) {
+				const received = new Uint8Array(Buffer.concat(chunks));
+				const upload = acceptUpload(received, basis, keepEdits);
+				if (!upload.ok) {
+					refuse(upload);
+					return;
+				}
+				const bytes = upload.bytes;
+				let synced;
+				try {
+					synced = await sourceSync.sync(bytes);
+				} catch (cause) {
+					synced = {
+						written: [],
+						pending: [{
+							kind: "unsupported",
+							slide: null,
+							shapeId: null,
+							description: cause instanceof Error ? cause.message : String(cause)
+						}],
+						complete: false
+					};
+				}
+				await publish(async () => {
+					if (!source || !sourceHash || closed) {
+						json(409, "The preview changed. Review the current source before saving.", { refused: "busy" });
+						return;
+					}
+					if (synced.complete) {
+						await store.clear();
+						saved = void 0;
+						update(source);
+					} else {
+						let result;
+						try {
+							result = (await renderDeck(bytes, source.dependencies)).result;
+						} catch (cause) {
+							json(400, cause instanceof Error ? cause.message : String(cause));
+							return;
+						}
+						const edits = {
+							sourceHash,
+							base: source.bytes,
+							bytes
+						};
+						await store.write(edits);
+						saved = edits;
+						update(result);
+					}
+					json(200, void 0, {
+						...uploaded(received, upload),
+						writeBack: {
+							written: synced.written.length,
+							pending: synced.pending
+						}
+					});
+					notify();
+				});
+				return;
+			}
+			await publish(async () => {
+				if (useSource) {
+					if (!source || !sourceHash || building || error || closed || basis !== editorState().revision) {
+						json(409, "The preview changed. Review the current source before saving.", { refused: "busy" });
+						return;
+					}
+					await store.clear();
+					saved = void 0;
+					update(source);
+					json(200);
+					notify();
+					return;
+				}
+				const received = new Uint8Array(Buffer.concat(chunks));
+				const upload = acceptUpload(received, basis, keepEdits);
+				if (!upload.ok) {
+					refuse(upload);
+					return;
+				}
+				const started = generation;
+				let result;
+				try {
+					result = (await renderDeck(upload.bytes, upload.source.dependencies)).result;
+				} catch (cause) {
+					json(400, cause instanceof Error ? cause.message : String(cause));
+					return;
+				}
+				if (started !== generation) {
+					json(409, "Source changed during save.", { refused: "busy" });
+					return;
+				}
+				const edits = {
+					sourceHash: upload.sourceHash,
+					base: upload.source.bytes,
+					bytes: upload.bytes
+				};
+				await store.write(edits);
+				saved = edits;
+				update(result);
+				json(200, void 0, uploaded(received, upload));
+				notify();
+			});
+		} catch (cause) {
+			if (!response.headersSent) json(500, cause instanceof Error ? cause.message : String(cause));
+		}
+	}
+	const sourceSync = process.env.OFFICE_KIT_TSX_WRITE_BACK === "1" ? createSourceSync(resolve(entry), () => source, verify) : void 0;
 	const textEditor = createTextEditor(resolve(entry), () => {
 		if (!latest || building || pending || timer || error) throw new Error("Wait for a successful preview build.");
 		return {
@@ -1251,6 +2932,39 @@ async function serveDeck(entry, port = 4173) {
 			response.writeHead(404).end();
 			return;
 		}
+		const mediaMatch = request.url?.match(/^\/media\/([a-f0-9]{64})(?:\?.*)?$/);
+		if (mediaMatch) {
+			if (request.method !== "GET") {
+				response.writeHead(405).end();
+				return;
+			}
+			const cached = mediaCache.get(mediaMatch[1]);
+			if (!cached) {
+				response.writeHead(404).end();
+				return;
+			}
+			const range = mediaRange(request.headers.range, cached.bytes.length);
+			const immutableHeaders = {
+				"Accept-Ranges": "bytes",
+				"Cache-Control": "public, max-age=31536000, immutable",
+				"Content-Type": cached.contentType
+			};
+			if (!range) {
+				response.writeHead(416, {
+					...immutableHeaders,
+					"Content-Range": `bytes */${cached.bytes.length}`
+				}).end();
+				return;
+			}
+			const bytes = cached.bytes.subarray(range.start, range.end + 1);
+			response.writeHead(range.partial ? 206 : 200, {
+				...immutableHeaders,
+				"Content-Length": bytes.length,
+				...range.partial ? { "Content-Range": `bytes ${range.start}-${range.end}/${cached.bytes.length}` } : {}
+			});
+			response.end(bytes);
+			return;
+		}
 		if (request.url === "/history" && request.method === "GET") {
 			response.writeHead(200, { "Content-Type": "application/json" }).end(JSON.stringify(history.state()));
 			return;
@@ -1364,12 +3078,25 @@ async function serveDeck(entry, port = 4173) {
 					buildError: error
 				};
 			});
-		} else if (request.method === "GET" && ["/terminal.js", "/terminal.css"].includes(request.url ?? "")) {
-			const asset = request.url === "/terminal.js" ? "terminal-client.js" : "terminal-client.css";
+		} else if (request.method === "GET" && BUNDLED_ASSETS[(request.url ?? "").split("?")[0]] !== void 0) {
+			const asset = BUNDLED_ASSETS[(request.url ?? "").split("?")[0]];
 			readFile(new URL(asset, import.meta.url)).then((bytes) => {
 				response.writeHead(200, { "Content-Type": asset.endsWith(".css") ? "text/css" : "text/javascript" });
 				response.end(bytes);
-			}, () => response.writeHead(500).end("Terminal assets unavailable. Rebuild pptx-dev."));
+			}, () => response.writeHead(500).end("Preview assets unavailable. Rebuild pptx-dev."));
+		} else if (request.url?.startsWith("/editor/") && request.method !== "GET") edit(request, response);
+		else if (request.method === "GET" && request.url === "/editor/state") response.writeHead(200, { "Content-Type": "application/json" }).end(JSON.stringify(editorState()));
+		else if (request.method === "GET" && ["/editor/document", "/editor/source"].includes(request.url ?? "")) {
+			const result = request.url === "/editor/source" ? source : latest;
+			if (!result) {
+				response.writeHead(503).end();
+				return;
+			}
+			response.writeHead(200, {
+				"Content-Type": "application/octet-stream",
+				ETag: editorState().revision
+			});
+			response.end(result.bytes);
 		} else if (request.method !== "GET") response.writeHead(405).end();
 		else if (request.url === "/events") {
 			response.writeHead(200, { "Content-Type": "text/event-stream" });
@@ -1388,6 +3115,13 @@ async function serveDeck(entry, port = 4173) {
 					count: latest?.slides.length ?? 0
 				} : { slides: latest?.slides ?? [] },
 				aspectRatio: latest?.aspectRatio ?? 16 / 9,
+				transitions: latest?.transitions ?? [],
+				animations: latest?.animations ?? [],
+				media: publishedMedia,
+				showProperties: latest?.showProperties ?? null,
+				customShows: latest?.customShows ?? [],
+				notes: latest?.notes ?? [],
+				hiddenSlides: latest?.hiddenSlides ?? [],
 				error,
 				diagnostics: latest?.diagnostics ?? []
 			}));
@@ -1397,6 +3131,12 @@ async function serveDeck(entry, port = 4173) {
 				"Content-Disposition": "attachment; filename=\"deck.pptx\""
 			});
 			response.end(latest.bytes);
+		} else if (request.url === "/editor") {
+			response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+			response.end("<!doctype html><html><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><title>Office Kit Editor</title><link rel=\"stylesheet\" href=\"/editor.css\"><body><script type=\"module\" src=\"/editor.js\"><\/script></body></html>");
+		} else if (request.url === "/presenter") {
+			response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+			response.end(presenterPage);
 		} else if (request.url === "/") {
 			response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
 			response.end(page);
@@ -1422,15 +3162,33 @@ async function serveDeck(entry, port = 4173) {
 		for (const client of clients) client.write("data: building\n\n");
 		try {
 			const result = await builder.build();
-			if (started === generation && !closed) {
-				patch = {};
-				result.slides.forEach((svg, index) => {
-					if (svg !== latest?.slides[index]) patch[index] = svg;
-				});
-				latest = result;
-				revision++;
+			await publish(async () => {
+				if (started !== generation || closed) return;
+				const nextHash = sourceFingerprint(result.bytes);
+				let unmerged = [];
+				let merged;
+				if (saved?.base && saved.sourceHash !== nextHash) {
+					const merge = mergeDecks(saved.base, saved.bytes, result.bytes);
+					if (!merge.ok) unmerged = merge.conflicts;
+					else if (sourceFingerprint(merge.bytes) === nextHash) merged = null;
+					else merged = {
+						sourceHash: nextHash,
+						base: result.bytes,
+						bytes: merge.bytes
+					};
+				}
+				const edits = merged === void 0 ? saved : merged ?? void 0;
+				const edited = edits ? (await renderDeck(edits.bytes, result.dependencies)).result : result;
+				if (started !== generation || closed) return;
+				if (merged) await store.write(merged);
+				else if (merged === null) await store.clear();
+				saved = edits;
+				source = result;
+				sourceHash = nextHash;
+				conflicts = unmerged;
+				update(edited);
 				error = null;
-			}
+			});
 		} catch (cause) {
 			if (started === generation) error = cause instanceof Error ? cause.stack ?? cause.message : String(cause);
 		} finally {
@@ -1487,6 +3245,7 @@ async function serveDeck(entry, port = 4173) {
 			watcher.close();
 			await Promise.all([...sessions.values()].flatMap(({ terminal, chat }) => [terminal.close(), chat.close()]));
 			await builder.close();
+			await publishing;
 			for (const client of clients) client.end();
 			await new Promise((done, reject) => server.close((cause) => cause ? reject(cause) : done()));
 		}