visio-angular-viewer 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,7 +1,9 @@
 import { VISIO_RASTER_IMAGE_LIMITS, VISIO_VISIBILITY_LIMITS, getVisioPageLayers, inspectVisioRasterImage, parseVsdx, resolveVisioPageVisibility, validateVisioForeignVector } from "ooxml-core/visio";
-import { Component, ElementRef, EventEmitter, Input, Output, inject } from "@angular/core";
+import { registerControls } from "ooxml-ui/controls";
+import { getIcon, registerIcon } from "ooxml-ui/icons";
+import { Component, ElementRef, EventEmitter, Input, Output, inject, signal } from "@angular/core";
 export * from "visio-core";
-//#region .package-build/output/src/document-history.js
+//#region src/document-history.ts
 var EMPTY_EDIT_STATE = Object.freeze({
 	sourceAvailable: false,
 	busy: false,
@@ -18,6 +20,7 @@ var EDIT_HISTORY_LIMITS = Object.freeze({
 });
 /** Private controller-owned bytes; transient worker copies and models are separate from this budget. */
 var DocumentHistory = class {
+	original;
 	#entries;
 	#index = 0;
 	#truncated = false;
@@ -81,7 +84,7 @@ var DocumentHistory = class {
 	}
 };
 //#endregion
-//#region .package-build/output/src/edit-commands.js
+//#region src/edit-commands.ts
 /** Bound cloning and strip arbitrary host properties. Semantic validation belongs to core. */
 function snapshotEdits(edits) {
 	if (!Array.isArray(edits) || edits.length > 1e3) throw new Error("At most 1000 edits are accepted per operation.");
@@ -143,7 +146,7 @@ function snapshotEdits(edits) {
 	});
 }
 //#endregion
-//#region .package-build/output/src/scene-details.js
+//#region src/scene-details.ts
 /** Runtime model checks prevent implicit DOM stringification of host-provided objects. */
 function assertShapeDetails(shape, budget) {
 	const data = shape.shapeData ?? [], links = shape.hyperlinks ?? [];
@@ -210,7 +213,7 @@ function assertShapeDetails(shape, budget) {
 	}
 }
 //#endregion
-//#region .package-build/output/src/foreign-vector-budget.js
+//#region src/foreign-vector-budget.ts
 /** UI allocation limits, charged for every instance, including repeated shared resources. */
 var FOREIGN_VECTOR_SCENE_LIMITS = Object.freeze({
 	maxNodes: 1e5,
@@ -247,11 +250,9 @@ function inspectForeignVectorResource(source) {
 }
 /** Invocation-local budget. Never trusts frozen host objects or caches across calls. */
 var ForeignVectorBudget = class {
-	constructor() {
-		this.nodes = 0;
-		this.commands = 0;
-		this.operands = 0;
-	}
+	nodes = 0;
+	commands = 0;
+	operands = 0;
 	take(source) {
 		const resource = inspectForeignVectorResource(source);
 		this.nodes += resource.nodes;
@@ -527,13 +528,13 @@ function assertViewableDocument(model) {
 	}
 }
 //#endregion
-//#region .package-build/output/src/worker-editor.js
+//#region src/worker-editor.ts
 function createWorkerEditor(factory, timeoutMs = 2e4) {
 	const create = factory ?? (() => {
 		if (typeof Worker === "undefined") throw new Error("Editing requires browser worker support.");
 		return new Worker(new URL(
 			/* @vite-ignore */
-			new URL("assets/edit-worker-DnTSJ65K.js", import.meta.url).href,
+			new URL("assets/edit-worker-BcXrV_St.js", import.meta.url).href,
 			"" + import.meta.url
 		), { type: "module" });
 	});
@@ -602,7 +603,7 @@ function createWorkerEditor(factory, timeoutMs = 2e4) {
 	return edit;
 }
 //#endregion
-//#region .package-build/output/src/viewer-layers.js
+//#region src/viewer-layers.ts
 /** UI limits. Visibility semantics and shape traversal remain in ooxml-core. */
 var VIEWER_LAYER_LIMITS = Object.freeze({
 	overrides: VISIO_VISIBILITY_LIMITS.maxLayers,
@@ -659,7 +660,7 @@ function hasVisibleShapeContent(shape, visible, cache = /* @__PURE__ */ new Weak
 	return renderable;
 }
 //#endregion
-//#region .package-build/output/src/document-text-search.js
+//#region src/document-text-search.ts
 /** UTF-16 character bounds, applied before copying or case conversion. */
 var TEXT_SEARCH_LIMITS = Object.freeze({
 	queryCharacters: 256,
@@ -764,8 +765,11 @@ function textSearchStatus(search) {
 	return (search.activeIndex < 0 ? `${count}${search.resultsTruncated ? "+" : ""} matching shapes` : `${search.activeIndex + 1} of ${count}${search.resultsTruncated ? "+" : ""} matching shapes`) + (search.indexTruncated ? " · Partial text index" : "");
 }
 //#endregion
-//#region .package-build/output/src/controller.js
+//#region src/controller.ts
 var ViewerController = class {
+	parser;
+	listenerError;
+	editor;
 	#state = Object.freeze({
 		document: null,
 		edit: EMPTY_EDIT_STATE,
@@ -1183,7 +1187,7 @@ var ViewerController = class {
 	}
 };
 //#endregion
-//#region .package-build/output/src/contract.js
+//#region src/contract.ts
 var propertyKeys = [
 	"document",
 	"pageIndex",
@@ -1199,13 +1203,13 @@ var eventKeys = [
 	"shape-select"
 ];
 //#endregion
-//#region .package-build/output/src/worker-parser.js
+//#region src/worker-parser.ts
 /** One disposable worker per document prevents old parses and long CPU tasks from occupying the UI. */
 function createWorkerParser(factory, timeoutMs = 15e3) {
 	if (!factory && typeof Worker === "undefined") return parseVsdx;
 	const create = factory ?? (() => new Worker(new URL(
 		/* @vite-ignore */
-		new URL("assets/parse-worker-CvtlZkVJ.js", import.meta.url).href,
+		new URL("assets/parse-worker-B8EBQQpD.js", import.meta.url).href,
 		"" + import.meta.url
 	), { type: "module" }));
 	let cancel;
@@ -1252,7 +1256,7 @@ function createWorkerParser(factory, timeoutMs = 15e3) {
 	return parse;
 }
 //#endregion
-//#region .package-build/output/src/render-fill.js
+//#region src/render-fill.ts
 var gradientId = 0;
 function fillPaint(style, defs) {
 	if (!style.fillGradient) return safeColor(style.fill, "#fff");
@@ -1274,7 +1278,7 @@ function fillPaint(style, defs) {
 	return `url(#${gradient.id})`;
 }
 //#endregion
-//#region .package-build/output/src/render-image.js
+//#region src/render-image.ts
 var clipId$1 = 0;
 /** URLs are created only from bounded embedded raster bytes, never from document strings. */
 function renderImage(shape, resources) {
@@ -1307,7 +1311,7 @@ function renderImage(shape, resources) {
 	return group;
 }
 //#endregion
-//#region .package-build/output/src/render-foreign-vector.js
+//#region src/render-foreign-vector.ts
 var NS$1 = "http://www.w3.org/2000/svg";
 var nextResource = 0;
 var pathData = (commands) => commands.map(({ command, values }) => `${command}${values.length ? " " + values.join(" ") : ""}`).join(" ");
@@ -1373,7 +1377,7 @@ function renderForeignVector(source, owner = document, budget = new ForeignVecto
 	return root;
 }
 //#endregion
-//#region .package-build/output/src/render-foreign-vector-shape.js
+//#region src/render-foreign-vector-shape.ts
 var clipId = 0;
 /** Core supplies shape-local placement; converter coordinates have a downward Y axis. */
 function renderForeignVectorShape(shape, budget) {
@@ -1397,10 +1401,11 @@ function renderForeignVectorShape(shape, budget) {
 	return group;
 }
 //#endregion
-//#region .package-build/output/src/render-resources.js
+//#region src/render-resources.ts
 var MAX_EMBEDDED_BYTES = 16777216;
 /** One reference per shared core image resource, with explicit per-render disposal. */
 var RenderResources = class {
+	definitions;
 	#images = /* @__PURE__ */ new Map();
 	#disposed = false;
 	#embeddedBytes = 0;
@@ -1454,7 +1459,7 @@ function base64(bytes) {
 	return chunks.join("");
 }
 //#endregion
-//#region .package-build/output/src/arrowheads.js
+//#region src/arrowheads.ts
 var markerId = 0;
 /** Common Visio line/triangle and concave arrow styles. Sizes remain a documented visual approximation. */
 function applyArrowheads(path, style, defs, warnings) {
@@ -1498,7 +1503,7 @@ function applyArrowheads(path, style, defs, warnings) {
 	}
 }
 //#endregion
-//#region .package-build/output/src/text-layout.js
+//#region src/text-layout.ts
 var DEFAULT_LIMITS = {
 	maxCharacters: 25e4,
 	maxMeasurements: 5e4,
@@ -1518,6 +1523,9 @@ var TextLayoutBudgetError = class extends Error {
 };
 /** One bounded measurement cache and work budget per render; shape scopes share both. */
 var TextLayoutBudget = class TextLayoutBudget {
+	limits;
+	cache;
+	parent;
 	#characters = 0;
 	#measurements = 0;
 	#lines = 0;
@@ -1687,7 +1695,7 @@ function wrapText(runs, width, measure = measureBrowserText, firstLineIndent = 0
 	return lines;
 }
 //#endregion
-//#region .package-build/output/src/paragraph-layout.js
+//#region src/paragraph-layout.ts
 function layoutParagraphs(text, measure = measureBrowserText, budget = createTextLayoutBudget()) {
 	const scope = budget.forShape();
 	const runs = text.runs.length ? text.runs : [{
@@ -1785,7 +1793,7 @@ function sliceRuns(runs, offsets, start, end) {
 	return result;
 }
 //#endregion
-//#region .package-build/output/src/render-text.js
+//#region src/render-text.ts
 /** Browser-font layout is approximate until compared with the licensed Visio reference corpus. */
 function renderText(text, warnings, budget) {
 	const group = svgElement("g");
@@ -1863,7 +1871,7 @@ function renderText(text, warnings, budget) {
 	return group;
 }
 //#endregion
-//#region .package-build/output/src/render-svg.js
+//#region src/render-svg.ts
 var NS = "http://www.w3.org/2000/svg";
 function svgElement(name) {
 	return document.createElementNS(NS, name);
@@ -1996,7 +2004,7 @@ function drawOwn(shape, group, context) {
 	if (shape.kind === "foreign" && !shape.image && !shape.foreignVector) warnings.add("Embedded or foreign objects are not rendered in this build.");
 }
 //#endregion
-//#region .package-build/output/src/shape-inspector.js
+//#region src/shape-inspector.ts
 function selectedShape(document, selection, pageIndex) {
 	if (!document || !selection) return void 0;
 	const stack = [...(selection.pageId ? document.pages.find((page) => page.id === selection.pageId) : document.pages[pageIndex])?.shapes ?? []];
@@ -2094,7 +2102,7 @@ function shapeDetails(shape) {
 	return fragment;
 }
 //#endregion
-//#region .package-build/output/src/diagnostics.js
+//#region src/diagnostics.ts
 /** Presentation-only grouping keeps repeated per-shape diagnostics readable without losing counts. */
 function compatibilityNotes(diagnostics, renderWarnings = []) {
 	const notes = /* @__PURE__ */ new Map();
@@ -2126,7 +2134,7 @@ function compatibilityText(note) {
 	return note.message + (note.count > 1 ? ` (${note.count} occurrences)` : "");
 }
 //#endregion
-//#region .package-build/output/src/viewer-input.js
+//#region src/viewer-input.ts
 var targetShape = (event) => event.target?.closest?.("[data-shape-id]");
 function selection(target) {
 	return target ? {
@@ -2137,7 +2145,7 @@ function selection(target) {
 }
 /** Own every DOM listener and abort them together when the surface is disposed. */
 function wireViewerInputs(controls, controller, fit) {
-	const { viewport, commandRoot, pageSelect, searchInput } = controls;
+	const { viewport, commandRoot, zoomSlider, searchInput } = controls;
 	const events = new ((viewport.ownerDocument.defaultView?.AbortController) ?? AbortController)();
 	const options = { signal: events.signal };
 	searchInput.addEventListener("input", () => controller.setSearchQuery(searchInput.value), options);
@@ -2153,13 +2161,9 @@ function wireViewerInputs(controls, controller, fit) {
 			controller.setSearchQuery("");
 		}
 	}, options);
-	pageSelect.addEventListener("change", () => controller.setPage(Number(pageSelect.value)), options);
+	zoomSlider.addEventListener("input", () => controller.setZoom(zoomSlider.value / 100), options);
 	commandRoot.addEventListener("click", (event) => {
 		const action = event.target?.closest?.("button")?.dataset.action;
-		if (action === "in") controller.setZoom(controller.state.zoom * 1.25);
-		if (action === "out") controller.setZoom(controller.state.zoom / 1.25);
-		if (action === "fit") fit();
-		if (action === "actual") controller.setZoom(1);
 		if (action === "search-next") controller.nextSearchResult();
 		if (action === "search-previous") controller.previousSearchResult();
 	}, options);
@@ -2198,13 +2202,13 @@ function wireViewerInputs(controls, controller, fit) {
 		}
 		if (event.key === "0") {
 			event.preventDefault();
-			fit();
+			fit("page");
 		}
 	}, options);
 	return () => events.abort();
 }
 //#endregion
-//#region .package-build/output/src/viewer-layer-controls.js
+//#region src/viewer-layer-controls.ts
 var layerControlsTemplate = `<details class="layer-controls" hidden><summary>Layers</summary><p>Display changes only. SVG and print snapshots use saved visibility. Guides, NoShow and unknown hidden reasons remain hidden.</p><div data-layer-list></div><p data-layer-status role="status"></p><button type="button" data-layer-reset="all">Reset all layers</button></details>`;
 /** Static controls and text-only labels. Document strings never become selectors or markup. */
 function renderLayerControls(panel, state) {
@@ -2282,7 +2286,7 @@ function wireLayerControls(panel, controller) {
 	return () => events.abort();
 }
 //#endregion
-//#region .package-build/output/src/styles.js
+//#region src/styles.ts
 /** Inherited public tokens use local fallback aliases so host themes are never shadowed. */
 var viewerStyles = `
 :host {
@@ -2302,13 +2306,7 @@ button:disabled { opacity:.4; cursor:default; }
 button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--vv-focus,var(--_vv-accent)); outline-offset:2px; }
 button[aria-pressed="true"] { color:var(--_vv-accent); background:var(--_vv-accent-soft); }
 .toolbar { flex:none; min-width:0; border-bottom:1px solid var(--_vv-border); background:var(--_vv-surface); }
-.ribbon-primary { height:32px; display:flex; align-items:center; gap:6px; padding:2px 8px; }
-.page-picker { display:flex; min-width:0; align-items:center; gap:8px; color:var(--_vv-muted); font-size:11px; }
-.page-picker select { width:190px; max-width:42vw; height:26px; min-height:26px; padding:2px 6px; font-size:11px; color:var(--_vv-ink); }
-.page-stepper { display:flex; align-items:center; gap:2px; }
-.page-stepper button { width:26px; height:26px; min-height:26px; padding:0; font-size:18px; line-height:22px; background:transparent; border-color:transparent; }
 .spacer { flex:1; }
-.local-label { color:var(--_vv-muted); font-size:10px; white-space:nowrap; }
 .ribbon-tabs { height:35px; display:flex; align-items:stretch; padding:0 4px; border-bottom:1px solid var(--_vv-border); }
 .ribbon-tabs button { position:relative; min-height:34px; padding:7px 14px; border:0; border-radius:0; background:transparent; color:var(--_vv-muted); font-size:12px; font-weight:500; }
 .ribbon-tabs button[aria-selected="true"] { color:var(--_vv-accent); }
@@ -2318,15 +2316,6 @@ button[aria-pressed="true"] { color:var(--_vv-accent); background:var(--_vv-acce
 .group-label { font-size:10px; line-height:12px; color:var(--_vv-muted); text-align:center; }
 .ribbon-actions { display:flex; align-items:stretch; gap:2px; flex:1; }
 .ribbon-command { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-width:70px; padding:2px 6px; border-color:transparent; background:transparent; font-size:11px; white-space:nowrap; }
-.command-icon { display:grid; place-items:center; width:26px; height:26px; color:var(--_vv-accent); }
-.command-icon::before { content:""; width:24px; height:24px; background:currentColor; mask:var(--command-symbol) center / contain no-repeat; }
-[data-icon="selection"] { --command-symbol:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%203%2013%209-6%201-3%206z%22%2F%3E%3C%2Fsvg%3E"); }
-[data-icon="edit"] { --command-symbol:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16M12%205v14M8%2019h8%22%2F%3E%3C%2Fsvg%3E"); }
-[data-icon="layers"] { --command-symbol:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%208%209-5%209%205-9%205zM3%2012l9%205%209-5M3%2016l9%205%209-5%22%2F%3E%3C%2Fsvg%3E"); }
-[data-icon="pages"] { --command-symbol:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M8%208h8M8%2012h8M8%2016h5%22%2F%3E%3C%2Fsvg%3E"); }
-[data-icon="inspector"] { --command-symbol:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M14%204v16M17%208h1M17%2012h1M17%2016h1%22%2F%3E%3C%2Fsvg%3E"); }
-[data-icon="notes"] { --command-symbol:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16v12H9l-5%204z%22%2F%3E%3Cpath%20d%3D%22M8%208h8M8%2012h5%22%2F%3E%3C%2Fsvg%3E"); }
-.ribbon-command[data-chrome="edit"] .command-icon { font-family:ui-serif,Georgia,serif; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
 .ribbon-hint { align-self:center; flex:none; margin:0; padding:0 16px; font-size:11px; line-height:18px; color:var(--_vv-muted); }
 .search-group { width:330px; }
 .search-controls { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
@@ -2398,11 +2387,6 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
 .status { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; min-height:29px; padding:0 8px 0 12px; border-top:1px solid var(--_vv-border); color:var(--_vv-muted); background:var(--_vv-surface); font-size:10px; }
 .status-message { display:flex; gap:16px; min-width:0; }
 .status-message span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
-.zoom-controls { display:flex; flex:none; align-items:center; gap:3px; }
-.zoom-controls button { min-height:24px; height:24px; padding:1px 6px; border-color:transparent; background:transparent; font-size:10px; }
-.zoom-controls [data-action="in"],.zoom-controls [data-action="out"] { min-width:24px; padding:0; font-size:17px; line-height:20px; }
-.zoom-divider { width:1px; height:14px; background:var(--_vv-border); margin:0 3px; }
-.zoom { min-width:40px; font-size:10px; text-align:center; font-variant-numeric:tabular-nums; }
 .empty { max-width:360px; margin:60px auto; padding:16px; text-align:center; color:var(--_vv-muted); font-size:12px; }
 .empty strong { display:block; color:var(--_vv-ink); font-size:18px; font-weight:500; margin-bottom:8px; }
 @media(max-width:1100px) { .ribbon-hint { display:none; } [data-diagnostics] { display:none; } }
@@ -2410,11 +2394,6 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
   button,select,input,textarea { min-height:44px; }
   button { min-width:44px; }
   summary { min-height:44px; line-height:44px; }
-  .ribbon-primary { height:52px; padding:4px 8px; }
-  .page-picker { flex:1; }
-  .page-picker select { width:100%; max-width:none; min-height:44px; height:44px; font-size:12px; }
-  .page-stepper button { width:44px; min-height:44px; height:44px; }
-  .local-label,.ribbon-primary>.spacer { display:none; }
   .ribbon-tabs { height:44px; }
   .ribbon-tabs button { min-height:44px; padding:8px 16px; }
   .ribbon-content { min-height:86px; }
@@ -2426,7 +2405,7 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
   .search-controls button { min-width:44px; font-size:0; padding:3px; }
   .search-controls [data-action="search-previous"]::before { content:"‹"; font-size:22px; }
   .search-controls [data-action="search-next"]::before { content:"›"; font-size:22px; }
-  #home-panel>.ribbon-group:not(.search-group) { display:none; }
+  #home-panel>.ribbon-group:not(.search-group):not(.undo-group) { display:none; }
   .ribbon-command { min-width:90px; }
   .workspace { display:block; overflow:auto; }
   .page-rail { width:100%; max-height:190px; border-right:0; border-bottom:1px solid var(--_vv-border); }
@@ -2443,30 +2422,414 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
   .notes-strip button { min-height:44px; }
   .status { flex-wrap:wrap; gap:0; padding:4px 8px; }
   .status-message { width:100%; min-height:18px; }
-  .zoom-controls { justify-content:flex-end; width:100%; }
-  .zoom-controls button { min-height:44px; height:44px; min-width:44px; font-size:11px; }
-  .zoom-controls [data-action="in"],.zoom-controls [data-action="out"] { min-width:44px; font-size:20px; }
-  .zoom { font-size:11px; }
 }
 @media(pointer:coarse) {
   button,select,input,textarea { min-height:44px; }
   button { min-width:44px; }
   summary,.layer-controls label { min-height:44px; line-height:44px; }
-  .ribbon-primary { min-height:52px; height:52px; }
-  .page-picker select,.page-stepper button { min-height:44px; height:44px; }
-  .page-stepper button { min-width:44px; }
   .ribbon-tabs { min-height:44px; height:44px; }
   .ribbon-tabs button { min-height:44px; }
   .ribbon-content { min-height:96px; }
   .search-group { width:380px; max-width:100%; }
-  .zoom-controls button,.notes-strip button { min-height:44px; height:44px; }
-  .zoom-controls [data-action="in"],.zoom-controls [data-action="out"] { min-width:44px; }
+  .notes-strip button { min-height:44px; height:44px; }
   .layer-controls input { min-height:20px; }
 }
+/* Suite ribbon: tabs lead directly into Visio command groups. */
+.ribbon-tabs { height:40px; }
+.ribbon-tabs button { min-height:39px; padding:8px 16px; }
+.ribbon-content { min-height:104px; padding:4px 4px; }
+.search-group { order:2; width:320px; }
+.ribbon-hint { order:3; padding:10px 18px; }
+.ribbon-command { min-width:82px; }
+.pane-close { display:none; }
+@media(max-width:760px) {
+ .ribbon-tabs { height:44px; }
+ .ribbon-tabs button { min-height:44px; }
+ .ribbon-content { min-height:54px; padding:4px 0; }
+ .search-group { flex:0 0 100%; width:100%; min-height:54px; }
+ .search-feedback,.group-label { display:none; }
+ .ribbon-content { overflow-x:auto; scroll-snap-type:x mandatory; }
+ .workspace { display:flex; position:relative; overflow:hidden; }
+ .viewport { flex:1; width:100%; height:100%; min-height:0; padding:16px 4px; }
+ .inspector-pane { position:absolute; inset:0 0 0 auto; width:min(320px,100%); z-index:4; overflow:auto; border-left:1px solid var(--_vv-border); box-shadow:-8px 0 24px #0002; }
+ .pane-close { display:block; width:44px; height:44px; padding:0; font-size:22px; background:transparent; border:0; }
+ .inspector-kind { margin-left:auto; }
+ .page-rail { position:absolute; inset:0 auto 0 0; width:180px; max-height:none; z-index:3; border-right:1px solid var(--_vv-border); background:var(--_vv-secondary); }
+ .page-list { flex-direction:column; }
+ .page-list li { flex:none; }
+ .notes-strip { display:none; }
+ .status { min-height:48px; padding:2px 8px; }
+ .status-message { display:none; }
+}
+.toolbar { position:relative; }
+.ribbon-tools { display:flex; flex:none; order:0; }
+.tools-content { display:flex; align-items:stretch; }
+.ribbon-tools>summary { display:none; }
+.ribbon-command { font-size:12px; min-width:88px; }
+.ribbon-hint { font-size:12px; line-height:20px; flex:1; }
+.group-label { font-size:11px; line-height:14px; }
+.inspector-card,.edit-controls,.layer-controls { font-size:12px; line-height:18px; }
+.selection-hint,.document-card dl { font-size:12px; }
+.pane-heading { font-size:12px; }
+.inspector-pane .pane-heading { position:sticky; top:0; z-index:1; background:var(--_vv-secondary); flex:none; }
+.status .notes-strip { border:0; padding:0 8px; background:transparent; min-height:28px; }
+.status .notes-strip>span { display:none; }
+.status-message { flex:1; }
+@media(max-width:760px) {
+ #home-panel { overflow:visible; min-height:54px; padding:4px; }
+ .ribbon-tools { display:block; flex:0 0 84px; width:84px; order:1; }
+ .ribbon-tools>summary { display:flex; min-height:44px; align-items:center; justify-content:center; gap:6px; padding:0 10px; border:1px solid var(--_vv-border); background:var(--_vv-surface); border-radius:4px; font-size:12px; cursor:pointer; list-style:none; }
+ .ribbon-tools>summary::-webkit-details-marker { display:none; }
+ .ribbon-tools .tools-content { display:flex; position:absolute; top:100%; left:4px; right:4px; z-index:6; flex-direction:column; padding:12px; gap:12px; border:1px solid var(--_vv-border); border-radius:4px; background:var(--_vv-surface); box-shadow:0 12px 28px #0003; max-height:60vh; overflow:auto; }
+ .ribbon-tools:not([open])>.tools-content { display:none; }
+ .ribbon-tools .ribbon-group { display:flex; width:100%; min-height:64px; border:0; padding:0; }
+ .ribbon-tools .ribbon-actions { justify-content:space-between; }
+ .ribbon-tools .ribbon-command { min-width:88px; font-size:12px; }
+ .ribbon-tools .search-group { order:1; flex:auto; }
+ .ribbon-tools .search-feedback { display:block; }
+ .status { flex-wrap:nowrap; gap:4px; min-height:48px; }
+ .status .notes-strip { display:none; }
+}
+@media(pointer:coarse) { .ribbon-tabs {height:45px;min-height:45px;} .ribbon-tabs button {min-height:44px;height:44px;} }
 @media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }
 `;
 //#endregion
-//#region .package-build/output/src/edit-error.js
+//#region src/styles/index.ts
+/**
+* Viewer stylesheets as text for the shadow root. New styles are CSS files here; the legacy
+* `styles.ts` string moves into this directory when it is next changed.
+*/
+var canvasAndRibbonStyles = ["/*\n * Layout for the shared ooxml-ui ribbon, tab strip and status controls inside the viewer.\n * Viewer theme tokens feed the shared --office-* tokens, so host themes still apply.\n */\n:host {\n	--office-foreground: var(--_vv-ink);\n	--office-muted-foreground: var(--_vv-muted);\n	--office-background: var(--_vv-surface);\n	--office-surface: var(--_vv-accent-soft);\n	--office-border: var(--_vv-border);\n	--office-accent: var(--_vv-accent);\n	--office-accent-foreground: var(--vv-accent-ink, #fff);\n	--office-ring: var(--vv-focus, var(--_vv-accent));\n	--office-font: 'Segoe UI', Arial, sans-serif;\n}\n.ribbon-row {\n	display: flex;\n	flex-wrap: nowrap;\n	align-items: stretch;\n	gap: 0;\n	padding: 0;\n	border: 0;\n	background: transparent;\n}\n.ribbon-row office-ui-ribbon-group {\n	min-width: 0;\n}\n.ribbon-row office-ui-button {\n	--office-target-size: 28px;\n}\n.ribbon-row office-ui-button[variant='stacked']::part(button) {\n	min-width: 64px;\n	min-height: 62px;\n	font-size: 12px;\n}\noffice-ui-button[disabled]::part(button) {\n	opacity: 0.45;\n}\n.page-tabs {\n	flex: none;\n}\noffice-ui-status-bar.status {\n	gap: 16px;\n	min-height: 29px;\n	padding: 0 8px 0 12px;\n	font-size: 11px;\n	background: var(--_vv-surface);\n	color: var(--_vv-muted);\n}\noffice-ui-status-item[value=''] {\n	display: none;\n}\noffice-ui-status-item[data-page-status] {\n	color: var(--_vv-ink);\n}\n.status-message {\n	flex: 1;\n	min-width: 0;\n}\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='rectangle'] .paper [data-shape-id] {\n	cursor: crosshair;\n}\n.viewport[data-tool='rectangle'] {\n	touch-action: none;\n}\n.draw-preview {\n	fill: var(--_vv-accent-soft);\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 4 3;\n	pointer-events: none;\n}\n.viewport[data-grid='true'] .paper {\n	--_vv-grid-minor: rgb(0 0 0 / 7%);\n	--_vv-grid-major: rgb(0 0 0 / 16%);\n	background-image:\n		linear-gradient(to right, var(--_vv-grid-major) 1px, transparent 1px),\n		linear-gradient(to top, var(--_vv-grid-major) 1px, transparent 1px),\n		linear-gradient(to right, var(--_vv-grid-minor) 1px, transparent 1px),\n		linear-gradient(to top, var(--_vv-grid-minor) 1px, transparent 1px);\n	background-size:\n		var(--vv-inch, 96px) var(--vv-inch, 96px),\n		var(--vv-inch, 96px) var(--vv-inch, 96px),\n		calc(var(--vv-inch, 96px) / 4) calc(var(--vv-inch, 96px) / 4),\n		calc(var(--vv-inch, 96px) / 4) calc(var(--vv-inch, 96px) / 4);\n	background-position: left bottom;\n}\n:host(:fullscreen) {\n	width: 100vw;\n	height: 100vh;\n}\n@media (max-width: 760px) {\n	.ribbon-row {\n		flex: 1;\n		min-width: 0;\n	}\n	.undo-group {\n		flex: none;\n	}\n	.ribbon-row office-ui-button[variant='stacked']::part(button) {\n		min-width: 52px;\n		min-height: 44px;\n	}\n	.ribbon-tools .tools-content office-ui-ribbon-group {\n		width: 100%;\n	}\n	.search-group {\n		scroll-snap-align: start;\n	}\n	office-ui-status-bar.status {\n		gap: 4px;\n		min-height: 48px;\n	}\n	office-ui-status-bar .notes-strip,\n	office-ui-status-bar .status-message,\n	office-ui-status-item[data-shape-status],\n	office-ui-status-item[data-page-status] {\n		display: none;\n	}\n	.zoom-controls {\n		flex: 1;\n		min-width: 0;\n		--office-zoom-slider-width: 0;\n	}\n}\n", "/*\n * Drawing canvas focus. SVG outlines are drawn in drawing units (inches here), so a browser\n * focus ring on a shape becomes a page-sized blob. Shapes show focus with a dashed accent\n * stroke instead, only for keyboard focus; selection keeps its solid accent stroke.\n */\n.paper [data-shape-id]:focus,\n.paper [data-shape-id]:focus-visible {\n	outline: none;\n}\n.paper [data-shape-id]:focus-visible > [data-geometry] {\n	stroke: var(--vv-focus, var(--_vv-accent)) !important;\n	stroke-width: 0.04 !important;\n	stroke-dasharray: 0.08 0.05;\n}\n"].join("\n");
+//#endregion
+//#region src/ribbon-action.ts
+/** Event name shared by every ribbon control; detail is the typed action. */
+var RIBBON_ACTION_EVENT = "ribbon-action";
+/** Internal, non-composed event: it stays inside the viewer's shadow tree. */
+function emitRibbonAction(target, action) {
+	target.dispatchEvent(new CustomEvent(RIBBON_ACTION_EVENT, {
+		detail: action,
+		bubbles: true
+	}));
+}
+//#endregion
+//#region src/ribbon-parts.ts
+/**
+* A large stacked ribbon command. `id` is a stable name for state sync and tests; the typed
+* `action` is what runs. Labels, icons and shortcuts are static application strings.
+*/
+function tool(doc, id, label, icon, action, options = {}) {
+	const el = doc.createElement("office-ui-button");
+	el.setAttribute("variant", "stacked");
+	el.setAttribute("command", id);
+	el.setAttribute("icon", icon);
+	el.setAttribute("label", label);
+	el.setAttribute("title", options.keys ? `${label} (${options.keys[1]})` : label);
+	if (options.keys) el.setAttribute("keyshortcuts", options.keys[0]);
+	if (options.pressed !== void 0) el.setAttribute("pressed", String(options.pressed));
+	if (options.controls) el.setAttribute("aria-controls", options.controls);
+	el.addEventListener("office-command", (event) => {
+		event.stopPropagation();
+		emitRibbonAction(el, action);
+	});
+	return el;
+}
+/** A labelled ribbon group (the shared `office-ui-ribbon-group`). */
+function group(doc, label, children, className = "") {
+	const el = doc.createElement("office-ui-ribbon-group");
+	el.setAttribute("label", label);
+	if (className) el.className = className;
+	el.append(...children);
+	return el;
+}
+/** A keyboard-navigable row of groups (the shared `office-ui-toolbar`). */
+function commandRow(doc, label, children) {
+	const el = doc.createElement("office-ui-toolbar");
+	el.className = "ribbon-row";
+	el.setAttribute("aria-label", label);
+	el.append(...children);
+	return el;
+}
+/** Muted two-line guidance at the end of a ribbon panel. */
+function hint(doc, lines) {
+	const el = doc.createElement("p");
+	el.className = "ribbon-hint";
+	lines.forEach((line, index) => {
+		if (index) el.append(doc.createElement("br"));
+		el.append(line);
+	});
+	return el;
+}
+//#endregion
+//#region src/viewer-search.ts
+/** Builds the Find group: a search field, previous/next result buttons and a live status. */
+function createSearchGroup(doc) {
+	const group = doc.createElement("div");
+	group.className = "ribbon-group search-group";
+	group.setAttribute("role", "group");
+	group.setAttribute("aria-label", "Find");
+	const controls = doc.createElement("div");
+	controls.className = "search-controls";
+	controls.setAttribute("role", "search");
+	controls.setAttribute("aria-label", "Diagram text search");
+	const label = doc.createElement("label");
+	label.append("Find ");
+	const input = doc.createElement("input");
+	input.type = "search";
+	input.setAttribute("aria-label", "Search diagram text");
+	input.placeholder = "Text across pages";
+	input.maxLength = TEXT_SEARCH_LIMITS.queryCharacters;
+	input.autocomplete = "off";
+	input.spellcheck = false;
+	input.setAttribute("aria-describedby", "search-status");
+	label.append(input);
+	const step = (action, name, text) => {
+		const button = doc.createElement("button");
+		button.type = "button";
+		button.dataset.action = action;
+		button.setAttribute("aria-label", name);
+		button.textContent = text;
+		return button;
+	};
+	const status = doc.createElement("span");
+	status.id = "search-status";
+	status.setAttribute("role", "status");
+	status.setAttribute("aria-live", "polite");
+	status.setAttribute("aria-atomic", "true");
+	controls.append(label, step("search-previous", "Previous matching shape", "Previous"), step("search-next", "Next matching shape", "Next"), status);
+	const caption = doc.createElement("span");
+	caption.className = "group-label";
+	caption.textContent = "Find in drawing";
+	group.append(controls, caption);
+	return group;
+}
+function searchControls(root) {
+	return {
+		input: root.querySelector("input[type=\"search\"]"),
+		status: root.querySelector("#search-status"),
+		previous: root.querySelector("[data-action=\"search-previous\"]"),
+		next: root.querySelector("[data-action=\"search-next\"]")
+	};
+}
+function renderSearchControls(controls, state) {
+	if (controls.input.value !== state.search.query) controls.input.value = state.search.query;
+	controls.input.disabled = !state.document?.pages.length;
+	controls.previous.disabled = controls.next.disabled = !state.search.results.length;
+	controls.status.textContent = state.document ? textSearchStatus(state.search) : "Open a diagram to search";
+	const result = state.search.results[state.search.activeIndex];
+	controls.status.title = result ? `${result.pageName} · ${result.shapeName}: ${result.preview}` : "";
+}
+//#endregion
+//#region src/ribbon-home.ts
+/**
+* Visio's Home tab, limited to commands this build can honestly perform: Undo, Tools and
+* Editing. Clipboard, Font, Paragraph, Shape Styles and Arrange wait for core edit commands.
+* The compact (phone) layout folds every group but Undo into the Tools disclosure.
+*/
+function buildHomePanel(doc, panel) {
+	const tools = doc.createElement("details");
+	tools.className = "ribbon-tools";
+	tools.open = true;
+	const summary = doc.createElement("summary");
+	const caret = doc.createElement("span");
+	caret.setAttribute("aria-hidden", "true");
+	caret.textContent = "⌄";
+	summary.append("Tools ", caret);
+	const content = doc.createElement("div");
+	content.className = "tools-content";
+	content.append(group(doc, "Tools", [
+		tool(doc, "pointer", "Pointer Tool", "pointer", {
+			type: "tool",
+			tool: "pointer"
+		}, {
+			keys: ["Control+1", "Ctrl+1"],
+			pressed: true
+		}),
+		tool(doc, "rectangle", "Rectangle", "rectangle", {
+			type: "tool",
+			tool: "rectangle"
+		}, {
+			keys: ["Control+8", "Ctrl+8"],
+			pressed: false
+		}),
+		tool(doc, "edit", "Edit text", "pencil", {
+			type: "reveal",
+			panel: "edit"
+		}, { keys: ["F2", "F2"] })
+	]), createSearchGroup(doc), group(doc, "Editing", [
+		tool(doc, "delete", "Delete", "trash", { type: "delete" }, { keys: ["Delete", "Del"] }),
+		tool(doc, "layers", "Layers", "visioLayers", {
+			type: "reveal",
+			panel: "layers"
+		}),
+		tool(doc, "selection", "Shape details", "visioShapeData", {
+			type: "reveal",
+			panel: "selection"
+		})
+	]));
+	tools.append(summary, content);
+	panel.append(commandRow(doc, "Home commands", [group(doc, "Undo", [tool(doc, "undo", "Undo", "undo", {
+		type: "history",
+		key: "undo"
+	}, { keys: ["Control+Z", "Ctrl+Z"] }), tool(doc, "redo", "Redo", "redo", {
+		type: "history",
+		key: "redo"
+	}, { keys: ["Control+Y", "Ctrl+Y"] })], "undo-group"), tools]), hint(doc, ["Rectangle: drag on the page to draw.", "Editing is experimental. Keep your original file."]));
+}
+//#endregion
+//#region src/ribbon-view.ts
+/** Visio's View tab: Views, Show (grid and task panes) and Zoom. */
+function buildViewPanel(doc, panel) {
+	panel.append(commandRow(doc, "View commands", [
+		group(doc, "Views", [tool(doc, "fullscreen", "Full Screen", "fullscreen", { type: "fullscreen" }, {
+			keys: ["F5", "F5"],
+			pressed: false
+		})]),
+		group(doc, "Show", [
+			tool(doc, "grid", "Grid", "grid", { type: "grid" }, { pressed: false }),
+			tool(doc, "pages", "Pages pane", "visioPagesPane", {
+				type: "pane",
+				pane: "pages"
+			}, {
+				pressed: true,
+				controls: "page-rail"
+			}),
+			tool(doc, "inspector", "Inspector pane", "visioInspectorPane", {
+				type: "pane",
+				pane: "inspector"
+			}, {
+				pressed: true,
+				controls: "inspector-pane"
+			}),
+			tool(doc, "notes", "Review notes", "message", {
+				type: "reveal",
+				panel: "notes"
+			})
+		]),
+		group(doc, "Zoom", [
+			tool(doc, "zoom-fit", "Fit to Window", "fitPage", {
+				type: "zoom",
+				mode: "fit"
+			}, { keys: ["Control+Shift+W", "Ctrl+Shift+W"] }),
+			tool(doc, "page-width", "Page Width", "pageWidth", {
+				type: "zoom",
+				mode: "width"
+			}),
+			tool(doc, "actual-size", "100%", "search", {
+				type: "zoom",
+				mode: "actual"
+			})
+		])
+	]), hint(doc, ["Ctrl+wheel or + / − to zoom.", "Ctrl+Page Up / Page Down changes page."]));
+}
+//#endregion
+//#region src/ribbon.ts
+var TABS = [[
+	"home",
+	"Home",
+	buildHomePanel
+], [
+	"view",
+	"View",
+	buildViewPanel
+]];
+/**
+* The Visio ribbon: a tab list and one panel per tab. Tab switching and keyboard movement
+* belong to the chrome; commands emit `ribbon-action` events for the router.
+*/
+function createRibbon(doc) {
+	const toolbar = doc.createElement("div");
+	toolbar.className = "toolbar";
+	toolbar.setAttribute("role", "group");
+	toolbar.setAttribute("aria-label", "Diagram controls");
+	const tabs = doc.createElement("div");
+	tabs.className = "ribbon-tabs";
+	tabs.setAttribute("role", "tablist");
+	tabs.setAttribute("aria-label", "Ribbon");
+	toolbar.append(tabs);
+	for (const [key, name, build] of TABS) {
+		const selected = key === "home";
+		const tab = doc.createElement("button");
+		tab.type = "button";
+		tab.id = `${key}-tab`;
+		tab.dataset.tab = key;
+		tab.textContent = name;
+		tab.setAttribute("role", "tab");
+		tab.setAttribute("aria-selected", String(selected));
+		tab.setAttribute("aria-controls", `${key}-panel`);
+		if (!selected) tab.tabIndex = -1;
+		const panel = doc.createElement("div");
+		panel.className = "ribbon-content";
+		panel.id = `${key}-panel`;
+		panel.setAttribute("role", "tabpanel");
+		panel.setAttribute("aria-labelledby", tab.id);
+		panel.hidden = !selected;
+		build(doc, panel);
+		tabs.append(tab);
+		toolbar.append(panel);
+	}
+	return toolbar;
+}
+//#endregion
+//#region src/status-bar.ts
+/**
+* Visio's status bar on the shared `office-ui-status-bar`: page and shape metrics, a live
+* message region, compatibility notes, the host footer slot and the shared zoom slider.
+*/
+function createStatusBar(doc) {
+	const bar = doc.createElement("office-ui-status-bar");
+	bar.className = "status";
+	bar.setAttribute("label", "Status bar");
+	const item = (name) => {
+		const el = doc.createElement("office-ui-status-item");
+		el.setAttribute(name, "");
+		el.setAttribute("label", "");
+		el.setAttribute("value", "");
+		return el;
+	};
+	const message = doc.createElement("div");
+	message.className = "status-message";
+	message.setAttribute("role", "status");
+	const text = doc.createElement("span");
+	text.dataset.status = "";
+	const diagnostics = doc.createElement("span");
+	diagnostics.dataset.diagnostics = "";
+	message.append(text, diagnostics);
+	const notes = doc.createElement("div");
+	notes.className = "notes-strip";
+	const notesButton = doc.createElement("button");
+	notesButton.type = "button";
+	notesButton.dataset.chrome = "notes";
+	notesButton.setAttribute("aria-controls", "inspector-pane");
+	notesButton.setAttribute("aria-expanded", "false");
+	const count = doc.createElement("span");
+	count.className = "notes-count";
+	count.dataset.noteCount = "";
+	notesButton.append("Notes", count);
+	const local = doc.createElement("span");
+	local.textContent = "Files stay in your browser";
+	notes.append(notesButton, local);
+	const footer = doc.createElement("slot");
+	footer.name = "workspace-footer";
+	const zoom = doc.createElement("office-ui-zoom-slider");
+	zoom.slot = "end";
+	zoom.className = "zoom-controls";
+	zoom.setAttribute("label", "Canvas zoom");
+	zoom.setAttribute("fit", "Fit page to current window");
+	zoom.setAttribute("value", "100");
+	bar.append(item("data-page-status"), item("data-shape-status"), message, notes, footer, zoom);
+	return bar;
+}
+/** Visio's page tabs under the drawing, on the shared document tab strip. */
+function createPageTabs(doc) {
+	const strip = doc.createElement("office-ui-tab-strip");
+	strip.className = "page-tabs";
+	strip.setAttribute("label", "Pages");
+	strip.setAttribute("previous-label", "Previous page");
+	strip.setAttribute("next-label", "Next page");
+	return strip;
+}
+//#endregion
+//#region src/edit-error.ts
 /** Core error codes remain visible for a refused transaction; document content is plain text. */
 function editErrorMessage(error) {
 	const message = error instanceof Error ? error.message : String(error);
@@ -2478,10 +2841,13 @@ function isEditCancellation(error) {
 	return !!error && typeof error === "object" && "name" in error && error.name === "AbortError";
 }
 //#endregion
-//#region .package-build/output/src/viewer-geometry-controls.js
+//#region src/viewer-geometry-controls.ts
 var geometryControlsTemplate = `<fieldset data-geometry><legend>Geometry (experimental)</legend><p>Pin X/Y use drawing inches, bottom-left origin, Y up. Resize holds the rotation pin fixed. Core rejects unsupported formulas, protected cells, unsafe group/master dependencies and referenced deletion. Native Visio reopen fidelity is unverified.</p><label>New rectangle ID <input data-geometry-field="id" type="text" maxlength="256"></label><label>Rectangle text (optional) <input data-geometry-field="text" type="text" maxlength="1000000"></label><label>Pin X (inches) <input data-geometry-field="x" type="number" step="any"></label><label>Pin Y (inches) <input data-geometry-field="y" type="number" step="any"></label><label>Width (inches) <input data-geometry-field="width" type="number" min="0" step="any"></label><label>Height (inches) <input data-geometry-field="height" type="number" min="0" step="any"></label><div class="edit-actions"><button type="button" data-geometry-action="create-rectangle">Create rectangle</button><button type="button" data-geometry-action="move-shape">Move selected</button><button type="button" data-geometry-action="resize-shape">Resize selected</button><button type="button" data-geometry-action="delete-shape">Delete selected</button></div><p data-geometry-error role="alert" hidden></p></fieldset>`;
 /** Collect explicit coordinates; never infer a Visio pin from rendered SVG transforms. */
 var ViewerGeometryControls = class {
+	panel;
+	controller;
+	draftChanged;
 	#fields;
 	#buttons;
 	#error;
@@ -2602,10 +2968,12 @@ var ViewerGeometryControls = class {
 	}
 };
 //#endregion
-//#region .package-build/output/src/viewer-edit-controls.js
+//#region src/viewer-edit-controls.ts
 /** Static markup only. Document text is assigned exclusively through value/textContent. */
 var editControlsTemplate = `<details class="edit-controls"><summary>Edit diagram (experimental)</summary><p id="edit-warning">Experimental source-backed editing. Unsupported targets are rejected. Native Visio compatibility is not verified. Keep your original file.</p><p data-edit-target></p><label for="edit-text">Selected shape text</label><textarea id="edit-text" rows="3" aria-describedby="edit-warning edit-target edit-status"></textarea><div class="edit-actions"><button type="button" data-edit="apply">Apply text</button><button type="button" data-edit="cancel">Cancel</button><button type="button" data-edit="undo">Undo</button><button type="button" data-edit="redo">Redo</button></div><p id="edit-status" role="status" aria-live="polite"></p><p data-edit-error role="alert" hidden></p><ul data-edit-diagnostics></ul>${geometryControlsTemplate}</details>`;
 var ViewerEditControls = class {
+	panel;
+	input;
 	#target;
 	#status;
 	#error;
@@ -2748,61 +3116,17 @@ var ViewerEditControls = class {
 	}
 };
 //#endregion
-//#region .package-build/output/src/viewer-search.js
-var searchTemplate = `<div class="search-controls" role="search" aria-label="Diagram text search"><label>Find <input type="search" aria-label="Search diagram text" placeholder="Text across pages" maxlength="${TEXT_SEARCH_LIMITS.queryCharacters}" autocomplete="off" spellcheck="false" aria-describedby="search-status"></label><button type="button" data-action="search-previous" aria-label="Previous matching shape">Previous</button><button type="button" data-action="search-next" aria-label="Next matching shape">Next</button><span id="search-status" role="status" aria-live="polite" aria-atomic="true"></span></div>`;
-function searchControls(root) {
-	return {
-		input: root.querySelector("input[type=\"search\"]"),
-		status: root.querySelector("#search-status"),
-		previous: root.querySelector("[data-action=\"search-previous\"]"),
-		next: root.querySelector("[data-action=\"search-next\"]")
-	};
-}
-function renderSearchControls(controls, state) {
-	if (controls.input.value !== state.search.query) controls.input.value = state.search.query;
-	controls.input.disabled = !state.document?.pages.length;
-	controls.previous.disabled = controls.next.disabled = !state.search.results.length;
-	controls.status.textContent = state.document ? textSearchStatus(state.search) : "Open a diagram to search";
-	const result = state.search.results[state.search.activeIndex];
-	controls.status.title = result ? `${result.pageName} · ${result.shapeName}: ${result.preview}` : "";
-}
-//#endregion
-//#region .package-build/output/src/viewer-chrome.js
-/** Only static application markup belongs here. All document labels are inserted as text. */
-var viewerChromeTemplate = `
-<div class="toolbar" role="group" aria-label="Diagram controls">
-  <div class="ribbon-primary">
-    <label class="page-picker">Page <select aria-label="Page"></select></label>
-    <div class="page-stepper"><button type="button" data-chrome="previous-page" aria-label="Previous page">‹</button><button type="button" data-chrome="next-page" aria-label="Next page">›</button></div>
-    <span class="spacer"></span><span class="local-label">Local workspace</span>
-  </div>
-  <div class="ribbon-tabs" role="tablist" aria-label="Ribbon">
-    <button type="button" id="home-tab" role="tab" aria-selected="true" aria-controls="home-panel" data-tab="home">Home</button>
-    <button type="button" id="view-tab" role="tab" aria-selected="false" aria-controls="view-panel" tabindex="-1" data-tab="view">View</button>
-  </div>
-  <div class="ribbon-content" id="home-panel" role="tabpanel" aria-labelledby="home-tab">
-    <div class="ribbon-group search-group">${searchTemplate}<span class="group-label">Find in drawing</span></div>
-    <div class="ribbon-group"><div class="ribbon-actions">
-      <button class="ribbon-command" type="button" data-chrome="selection"><span class="command-icon" data-icon="selection" aria-hidden="true"></span><span>Shape details</span></button>
-      <button class="ribbon-command" type="button" data-chrome="edit"><span class="command-icon" data-icon="edit" aria-hidden="true"></span><span>Edit text</span></button>
-      <button class="ribbon-command" type="button" data-chrome="layers"><span class="command-icon" data-icon="layers" aria-hidden="true"></span><span>Layers</span></button>
-    </div><span class="group-label">Inspect and edit</span></div>
-    <p class="ribbon-hint">Select a shape to inspect its details.<br>Text editing is experimental.</p>
-  </div>
-  <div class="ribbon-content" id="view-panel" role="tabpanel" aria-labelledby="view-tab" hidden>
-    <div class="ribbon-group"><div class="ribbon-actions">
-      <button class="ribbon-command" type="button" data-chrome="pages" aria-pressed="true" aria-controls="page-rail"><span class="command-icon" data-icon="pages" aria-hidden="true"></span><span>Pages pane</span></button>
-      <button class="ribbon-command" type="button" data-chrome="inspector" aria-pressed="true" aria-controls="inspector-pane"><span class="command-icon" data-icon="inspector" aria-hidden="true"></span><span>Inspector pane</span></button>
-      <button class="ribbon-command" type="button" data-chrome="notes"><span class="command-icon" data-icon="notes" aria-hidden="true"></span><span>Review notes</span></button>
-    </div><span class="group-label">Workspace panes</span></div>
-    <p class="ribbon-hint">Canvas shortcuts: + / − to zoom, 0 to fit.<br>Arrow keys move between focused shapes.</p>
-  </div>
-</div>
-<div class="workspace">
+//#region src/viewer-chrome.ts
+/**
+* Static workspace markup (legacy; migrate to builders when next changed). The ribbon, page
+* tabs and status bar are built by `createRibbon`, `createPageTabs` and `createStatusBar`.
+* All document labels are inserted as text.
+*/
+var viewerChromeTemplate = `<div class="workspace">
   <nav id="page-rail" class="page-rail" aria-label="Diagram pages"><div class="pane-heading"><span>Pages</span><span data-page-count>0</span></div><ol class="page-list"></ol><p class="page-empty">Open a drawing to see its pages.</p></nav>
   <div class="viewport" tabindex="0" role="region" aria-label="Diagram canvas"></div>
   <aside id="inspector-pane" class="inspector-pane" aria-label="Drawing inspector">
-    <div class="pane-heading"><span>Inspector</span><span class="inspector-kind">Drawing</span></div>
+    <div class="pane-heading"><span>Inspector</span><span class="inspector-kind">Drawing</span><button class="pane-close" type="button" data-chrome="inspector" aria-label="Close inspector">×</button></div>
     <div class="inspector-body">
       <section class="inspector-card document-card" aria-label="Current page"><h2>Current page</h2><p class="current-page-name" data-page-name>No diagram open</p><dl><dt>Size</dt><dd data-page-size>No page</dd><dt>Shapes</dt><dd data-page-shapes>No shapes</dd></dl></section>
       <p class="selection-hint">Select a shape on the canvas to see its data and links.</p>
@@ -2811,24 +3135,28 @@ var viewerChromeTemplate = `
       <details class="notes inspector-card"><summary>Compatibility notes</summary><ul></ul></details>
     </div>
   </aside>
-</div>
-<div class="notes-strip"><button type="button" data-chrome="notes" aria-controls="inspector-pane" aria-expanded="false">Notes<span class="notes-count" data-note-count></span></button><span>Files stay in your browser</span></div>
-<div class="status"><div class="status-message" role="status"><span data-status></span><span data-diagnostics></span></div><div class="zoom-controls" role="group" aria-label="Canvas zoom"><button type="button" data-action="fit">Fit page</button><button type="button" data-action="actual">100%</button><span class="zoom-divider"></span><button type="button" data-action="out" aria-label="Zoom out">−</button><output class="zoom" aria-label="Zoom level">100%</output><button type="button" data-action="in" aria-label="Zoom in">+</button></div></div>`;
+</div>`;
 /** Presentation state stays local; page navigation uses the same controller as every binding. */
 var ViewerChrome = class {
 	#root;
 	#controller;
 	#document;
 	#pageList;
+	#pageTabs;
+	#tools;
 	#rail;
 	#inspector;
 	#notes;
 	#responsive;
+	#compact;
 	#pagesManuallyToggled = false;
+	#inspectorManuallyToggled = false;
 	constructor(root, controller) {
 		this.#root = root;
 		this.#controller = controller;
 		this.#pageList = root.querySelector(".page-list");
+		this.#pageTabs = root.querySelector("office-ui-tab-strip");
+		this.#tools = root.querySelector(".ribbon-tools");
 		this.#rail = root.querySelector(".page-rail");
 		this.#inspector = root.querySelector(".inspector-pane");
 		this.#notes = root.querySelector(".notes");
@@ -2837,26 +3165,45 @@ var ViewerChrome = class {
 		const view = this.#root.ownerDocument.defaultView;
 		const events = new ((view?.AbortController) ?? AbortController)(), options = { signal: events.signal };
 		this.#responsive = view?.matchMedia?.("(max-width: 980px)");
+		const compact = view?.matchMedia?.("(max-width: 760px)");
+		this.#compact = compact;
+		const tools = this.#tools;
+		const toolLayout = () => {
+			tools.open = !compact?.matches;
+		};
+		toolLayout();
+		compact?.addEventListener("change", toolLayout, options);
+		this.#root.addEventListener("keydown", (event) => {
+			if (event.key === "Escape" && compact?.matches && tools.open) {
+				event.preventDefault();
+				event.stopPropagation();
+				tools.open = false;
+				tools.querySelector("summary").focus();
+			}
+		}, {
+			...options,
+			capture: true
+		});
 		const responsive = () => {
 			if (!this.#pagesManuallyToggled) this.#setPane("pages", !this.#responsive?.matches);
+			if (!this.#inspectorManuallyToggled) this.#setPane("inspector", !compact?.matches);
 		};
 		responsive();
 		this.#responsive?.addEventListener("change", responsive, options);
+		compact?.addEventListener("change", responsive, options);
 		this.#root.addEventListener("click", (event) => {
 			const button = event.target?.closest?.("button");
 			if (!button || button.disabled) return;
 			const tab = button.dataset.tab;
-			if (tab === "home" || tab === "view") this.#showTab(tab);
+			if (tab === "home" || tab === "view") this.showTab(tab);
 			if (button.dataset.pageIndex !== void 0) this.#controller.setPage(Number(button.dataset.pageIndex));
 			const action = button.dataset.chrome;
-			if (action === "previous-page") this.#controller.setPage(this.#controller.state.pageIndex - 1);
-			if (action === "next-page") this.#controller.setPage(this.#controller.state.pageIndex + 1);
-			if (action === "pages") {
-				this.#pagesManuallyToggled = true;
-				this.#setPane("pages", this.#rail.hidden);
-			}
-			if (action === "inspector") this.#setPane("inspector", this.#inspector.hidden);
-			if (action === "notes" || action === "selection" || action === "edit" || action === "layers") this.#reveal(action);
+			if (action === "inspector") this.togglePane("inspector");
+			if (action === "notes") this.reveal("notes");
+		}, options);
+		this.#root.addEventListener("office-tab-select", (event) => {
+			const id = Number(event.detail.id);
+			if (Number.isSafeInteger(id)) this.#controller.setPage(id);
 		}, options);
 		this.#root.addEventListener("keydown", (event) => {
 			const key = event;
@@ -2873,11 +3220,11 @@ var ViewerChrome = class {
 				if (key.key === "ArrowUp" || key.key === "ArrowDown") return;
 				key.preventDefault();
 				const tab = key.key === "Home" ? "home" : key.key === "End" ? "view" : button.dataset.tab === "home" ? "view" : "home";
-				this.#showTab(tab);
+				this.showTab(tab);
 				this.#root.querySelector(`[data-tab="${tab}"]`).focus();
 			} else if (button.dataset.pageIndex !== void 0) {
 				key.preventDefault();
-				const pages = [...this.#pageList.querySelectorAll("button")];
+				const pages = [...this.#pageList.querySelectorAll("[data-page-index]")];
 				const current = Number(button.dataset.pageIndex);
 				const next = key.key === "Home" ? 0 : key.key === "End" ? pages.length - 1 : Math.max(0, Math.min(pages.length - 1, current + (["ArrowRight", "ArrowDown"].includes(key.key) ? 1 : -1)));
 				this.#controller.setPage(next);
@@ -2887,7 +3234,7 @@ var ViewerChrome = class {
 		this.#notes.addEventListener("toggle", () => this.#syncNotes(), options);
 		return () => events.abort();
 	}
-	#showTab(tab) {
+	showTab(tab) {
 		for (const button of this.#root.querySelectorAll("[data-tab]")) {
 			const selected = button.dataset.tab === tab;
 			button.setAttribute("aria-selected", String(selected));
@@ -2895,21 +3242,41 @@ var ViewerChrome = class {
 		}
 		for (const panel of this.#root.querySelectorAll("[role=\"tabpanel\"]")) panel.hidden = panel.id !== `${tab}-panel`;
 	}
+	/** Show or hide a task pane; compact layouts close the Tools menu afterwards. */
+	togglePane(pane) {
+		if (this.#compact?.matches) this.#tools.open = false;
+		if (pane === "pages") this.#pagesManuallyToggled = true;
+		else this.#inspectorManuallyToggled = true;
+		this.#setPane(pane, (pane === "pages" ? this.#rail : this.#inspector).hidden);
+	}
+	#command(name) {
+		return this.#root.querySelector(`office-ui-button[command="${name}"]`);
+	}
 	#setPane(pane, visible) {
+		if (visible && this.#compact?.matches) {
+			const other = pane === "pages" ? "inspector" : "pages";
+			(other === "pages" ? this.#rail : this.#inspector).hidden = true;
+			this.#command(other).setAttribute("pressed", "false");
+		}
 		(pane === "pages" ? this.#rail : this.#inspector).hidden = !visible;
-		this.#root.querySelector(`[data-chrome="${pane}"]`).setAttribute("aria-pressed", String(visible));
+		this.#command(pane).setAttribute("pressed", String(visible));
 		this.#syncNotes();
 	}
 	#syncNotes() {
 		this.#root.querySelector(".notes-strip button").setAttribute("aria-expanded", String(!this.#inspector.hidden && this.#notes.open));
 	}
-	#reveal(kind) {
+	/** Open an inspector disclosure; text editing may focus the text field directly (F2). */
+	reveal(kind, focusText = false) {
+		if (this.#compact?.matches) this.#tools.open = false;
+		this.#inspectorManuallyToggled = true;
 		this.#setPane("inspector", true);
 		const selector = kind === "notes" ? ".notes" : kind === "edit" ? ".edit-controls" : kind === "layers" ? ".layer-controls" : ".shape-inspector";
 		const panel = this.#root.querySelector(selector);
 		if (panel.hidden) return;
 		panel.open = true;
-		panel.querySelector("summary").focus();
+		const text = panel.querySelector("textarea");
+		if (focusText && text && !text.disabled) text.focus();
+		else panel.querySelector("summary").focus();
 		panel.scrollIntoView?.({
 			block: "nearest",
 			inline: "nearest"
@@ -2950,14 +3317,21 @@ var ViewerChrome = class {
 				fragment.append(item);
 			}
 			this.#pageList.replaceChildren(fragment);
+			this.#pageTabs.tabs = (state.document?.pages ?? []).map((candidate, index) => ({
+				id: String(index),
+				label: candidate.name,
+				title: candidate.isBackground ? `${candidate.name} (background page)` : candidate.name
+			}));
 			if (restoreFocus !== void 0) [...this.#pageList.querySelectorAll("button")].find((button) => button.dataset.pageIndex === restoreFocus)?.focus();
 		}
+		this.#pageTabs.selected = page ? String(state.pageIndex) : "";
 		for (const button of this.#pageList.querySelectorAll("button")) {
 			const selected = Number(button.dataset.pageIndex) === state.pageIndex;
 			if (selected) button.setAttribute("aria-current", "page");
 			else button.removeAttribute("aria-current");
 			button.tabIndex = selected ? 0 : -1;
 		}
+		this.#root.querySelector("[data-page-status]").setAttribute("value", page ? `Page ${state.pageIndex + 1} of ${state.document.pages.length}` : "");
 		const count = state.document?.pages.length ?? 0;
 		this.#root.querySelector("[data-page-count]").textContent = String(count);
 		this.#root.querySelector(".page-empty").hidden = count > 0;
@@ -2965,18 +3339,406 @@ var ViewerChrome = class {
 		this.#root.querySelector("[data-page-size]").textContent = page ? `${page.width} × ${page.height} in` : "No page";
 		this.#root.querySelector("[data-page-shapes]").textContent = page ? `${page.shapes.length} top-level` : "No shapes";
 		this.#root.querySelector(".selection-hint").hidden = !!state.selectedShape;
-		this.#root.querySelector("[data-chrome=\"previous-page\"]").disabled = !page || state.pageIndex === 0;
-		this.#root.querySelector("[data-chrome=\"next-page\"]").disabled = !page || state.pageIndex >= count - 1;
-		this.#root.querySelector("[data-chrome=\"selection\"]").disabled = !state.selectedShape;
-		this.#root.querySelector("[data-chrome=\"edit\"]").disabled = !page;
-		this.#root.querySelector("[data-chrome=\"layers\"]").disabled = this.#root.querySelector(".layer-controls").hidden;
-		for (const button of this.#root.querySelectorAll("[data-chrome=\"notes\"]")) button.disabled = noteCount === 0;
+		this.#command("selection").disabled = !state.selectedShape;
+		this.#command("edit").disabled = !page;
+		this.#command("layers").disabled = this.#root.querySelector(".layer-controls").hidden;
+		this.#command("notes").disabled = noteCount === 0;
+		this.#root.querySelector(".notes-strip button").disabled = noteCount === 0;
 		this.#root.querySelector("[data-note-count]").textContent = noteCount ? ` · ${noteCount}` : "";
 		this.#syncNotes();
 	}
 };
 //#endregion
-//#region .package-build/output/src/export-svg.js
+//#region src/ribbon-router.ts
+/** Routes a ribbon, status-bar or shortcut action to the controller that owns it. */
+function routeRibbonAction(targets, action) {
+	const { controller } = targets;
+	const page = controller.state.document?.pages[controller.state.pageIndex];
+	switch (action.type) {
+		case "history": return targets.history(action.key);
+		case "delete": return targets.deleteSelection();
+		case "tool": return targets.setTool(action.tool);
+		case "grid": return targets.toggleGrid();
+		case "fullscreen": return targets.toggleFullscreen();
+		case "pane": return targets.togglePane(action.pane);
+		case "reveal": return targets.reveal(action.panel, action.focusText ?? false);
+		case "search": return targets.focusSearch();
+		case "page": return controller.setPage(controller.state.pageIndex + action.step);
+		case "zoom":
+			if (!page) return;
+			if (action.mode === "actual") return controller.setZoom(1);
+			return targets.fit(action.mode === "fit" ? "page" : "width");
+	}
+}
+//#endregion
+//#region src/viewer-draw-tool.ts
+/** Visio snaps new geometry to ruler subdivisions; 1/16 inch matches its default fine grid. */
+var SNAP = 1 / 16;
+var MIN_SIZE = SNAP;
+var snap = (value) => Math.round(value / SNAP) * SNAP;
+/** Next free numeric shape ID on the page tree. Core still rejects any collision. */
+function nextShapeId(page) {
+	let max = 0;
+	const pending = [...page.shapes];
+	while (pending.length) {
+		const shape = pending.pop();
+		if (/^\d{1,9}$/.test(shape.id)) max = Math.max(max, Number(shape.id));
+		pending.push(...shape.children);
+	}
+	return String(max + 1);
+}
+/** Page inches with a top-left origin (SVG user space) from a client point. */
+function pagePoint(svg, page, event) {
+	const matrix = svg.getScreenCTM?.();
+	if (!matrix) return void 0;
+	const point = new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix.inverse());
+	return {
+		x: snap(Math.max(0, Math.min(page.width, point.x))),
+		y: snap(Math.max(0, Math.min(page.height, point.y)))
+	};
+}
+/** Drag-to-draw rectangle tool. The preview is viewer-only; the shape is created by core. */
+var RectangleDrawTool = class {
+	viewport;
+	controller;
+	options;
+	#drag;
+	#request = 0;
+	constructor(viewport, controller, options) {
+		this.viewport = viewport;
+		this.controller = controller;
+		this.options = options;
+	}
+	get drawing() {
+		return !!this.#drag;
+	}
+	wire() {
+		const events = new ((this.viewport.ownerDocument.defaultView?.AbortController) ?? AbortController)();
+		const options = { signal: events.signal };
+		const viewport = this.viewport;
+		viewport.addEventListener("click", (event) => {
+			if (this.options.active()) event.stopImmediatePropagation();
+		}, {
+			...options,
+			capture: true
+		});
+		viewport.addEventListener("pointerdown", (event) => this.#start(event), options);
+		viewport.addEventListener("pointermove", (event) => this.#move(event), options);
+		viewport.addEventListener("pointerup", (event) => void this.#finish(event), options);
+		viewport.addEventListener("pointercancel", () => this.#cancel(), options);
+		viewport.addEventListener("keydown", (event) => {
+			if (event.key === "Escape" && this.#drag) {
+				event.preventDefault();
+				this.#cancel();
+			}
+		}, options);
+		return () => {
+			++this.#request;
+			this.#cancel();
+			events.abort();
+		};
+	}
+	#start(event) {
+		if (!this.options.active() || event.button !== 0 || this.#drag) return;
+		const state = this.controller.state;
+		const page = state.document?.pages[state.pageIndex];
+		const svg = this.viewport.querySelector("svg.paper");
+		if (!page || !svg || !state.edit.sourceAvailable || state.edit.busy) return;
+		const start = pagePoint(svg, page, event);
+		if (!start) return;
+		event.preventDefault();
+		const rect = this.viewport.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "rect");
+		rect.classList.add("draw-preview");
+		rect.setAttribute("vector-effect", "non-scaling-stroke");
+		svg.append(rect);
+		this.#drag = {
+			pointer: event.pointerId,
+			svg,
+			page,
+			...start,
+			rect
+		};
+		this.viewport.setPointerCapture?.(event.pointerId);
+		this.#update(start);
+	}
+	#move(event) {
+		if (!this.#drag || event.pointerId !== this.#drag.pointer) return;
+		const point = pagePoint(this.#drag.svg, this.#drag.page, event);
+		if (point) this.#update(point);
+	}
+	#update(point) {
+		const { x, y, rect } = this.#drag;
+		rect.setAttribute("x", String(Math.min(x, point.x)));
+		rect.setAttribute("y", String(Math.min(y, point.y)));
+		rect.setAttribute("width", String(Math.abs(point.x - x)));
+		rect.setAttribute("height", String(Math.abs(point.y - y)));
+	}
+	#cancel() {
+		this.#drag?.rect.remove();
+		this.#drag = void 0;
+	}
+	async #finish(event) {
+		const drag = this.#drag;
+		if (!drag || event.pointerId !== drag.pointer) return;
+		const end = pagePoint(drag.svg, drag.page, event) ?? drag;
+		this.#cancel();
+		const width = Math.abs(end.x - drag.x), height = Math.abs(end.y - drag.y);
+		if (width < MIN_SIZE || height < MIN_SIZE) {
+			this.options.announce("Drag on the page to draw a rectangle.");
+			return;
+		}
+		const state = this.controller.state;
+		if (state.document?.pages[state.pageIndex] !== drag.page) return;
+		const shapeId = nextShapeId(drag.page);
+		const pageId = drag.page.id;
+		const request = ++this.#request;
+		try {
+			await this.controller.applyEdits([{
+				type: "create-rectangle",
+				pageId,
+				shapeId,
+				x: (drag.x + end.x) / 2,
+				y: drag.page.height - (drag.y + end.y) / 2,
+				width,
+				height
+			}]);
+			if (request !== this.#request) return;
+			const created = this.controller.state.document?.pages.find((page) => page.id === pageId)?.shapes.find((shape) => shape.id === shapeId);
+			if (created) this.controller.selectShape({
+				id: shapeId,
+				name: created.name,
+				pageId
+			});
+			this.options.announce(`Rectangle ${shapeId} added (${+width.toFixed(4)} × ${+height.toFixed(4)} in).`);
+		} catch (error) {
+			if (request === this.#request && !isEditCancellation(error)) this.options.announce(editErrorMessage(error));
+		}
+	}
+};
+//#endregion
+//#region src/viewer-commands.ts
+var editable = (target) => target instanceof Element && !!target.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])");
+/**
+* Visio command state (tool, grid, pending edits) and keyboard shortcuts. Ribbon controls emit
+* typed `ribbon-action` events and shortcuts build the same actions; both go through
+* `routeRibbonAction`. Document mutation stays in the controller and core.
+*/
+var ViewerCommands = class {
+	host;
+	#tool = "pointer";
+	#grid = false;
+	#pending = 0;
+	#draw;
+	#targets;
+	constructor(host) {
+		this.host = host;
+		this.#draw = new RectangleDrawTool(host.viewport, host.controller, {
+			active: () => this.#tool === "rectangle",
+			announce: host.announce
+		});
+		this.#targets = {
+			controller: host.controller,
+			history: (key) => this.#history(key),
+			deleteSelection: () => this.#delete(),
+			setTool: (tool) => this.setTool(tool),
+			toggleGrid: () => {
+				this.#grid = !this.#grid;
+				this.render(host.controller.state);
+			},
+			toggleFullscreen: () => this.#toggleFullscreen(),
+			togglePane: host.togglePane,
+			reveal: host.reveal,
+			fit: host.fit,
+			focusSearch: host.focusSearch
+		};
+	}
+	get tool() {
+		return this.#tool;
+	}
+	/** Run one typed action, exactly as a ribbon control or shortcut would. */
+	run(action) {
+		routeRibbonAction(this.#targets, action);
+	}
+	wire() {
+		const { root, viewport } = this.host;
+		const doc = root.ownerDocument;
+		const events = new ((doc.defaultView?.AbortController) ?? AbortController)();
+		const options = { signal: events.signal };
+		root.addEventListener(RIBBON_ACTION_EVENT, (event) => this.run(event.detail), options);
+		root.addEventListener("office-command", (event) => {
+			if (event.detail?.command === "zoom-fit") this.run({
+				type: "zoom",
+				mode: "fit"
+			});
+		}, options);
+		root.addEventListener("keydown", (event) => this.#shortcut(event), options);
+		viewport.addEventListener("wheel", (event) => {
+			if (!event.ctrlKey && !event.metaKey) return;
+			event.preventDefault();
+			const zoom = this.host.controller.state.zoom;
+			this.host.controller.setZoom(event.deltaY < 0 ? zoom * 1.1 : zoom / 1.1);
+		}, {
+			...options,
+			passive: false
+		});
+		viewport.addEventListener("pointerdown", () => {
+			if (!viewport.contains(root.activeElement)) viewport.focus({ preventScroll: true });
+		}, options);
+		viewport.addEventListener("dblclick", (event) => {
+			if (this.#tool !== "pointer") return;
+			if (event.target?.closest?.("[data-shape-id]")) this.run({
+				type: "reveal",
+				panel: "edit",
+				focusText: true
+			});
+		}, options);
+		doc.addEventListener("fullscreenchange", () => this.render(this.host.controller.state), options);
+		const disposeDraw = this.#draw.wire();
+		return () => {
+			++this.#pending;
+			events.abort();
+			disposeDraw();
+		};
+	}
+	setTool(tool) {
+		if (tool === "rectangle" && !this.#canEdit(this.host.controller.state)) return;
+		this.#tool = tool;
+		this.render(this.host.controller.state);
+	}
+	#canEdit(state) {
+		return state.edit.sourceAvailable && !state.loading && !state.edit.busy;
+	}
+	#history(key) {
+		const { controller } = this.host;
+		const { edit, loading } = controller.state;
+		if ((key === "undo" ? edit.canUndo : edit.canRedo) && !edit.busy && !loading) this.#edit(() => controller[key]());
+	}
+	#delete() {
+		const state = this.host.controller.state;
+		const shape = state.selectedShape;
+		const pageId = shape?.pageId ?? state.document?.pages[state.pageIndex]?.id;
+		if (!shape || pageId === void 0 || !this.#canEdit(state)) return;
+		this.#edit(() => this.host.controller.applyEdits([{
+			type: "delete-shape",
+			pageId,
+			shapeId: shape.id
+		}]), `Deleted ${shape.name || `shape ${shape.id}`}.`);
+	}
+	async #edit(action, success) {
+		const request = ++this.#pending;
+		const { root, viewport } = this.host;
+		const canvasFocused = viewport.contains(root.activeElement);
+		try {
+			await action();
+			if (canvasFocused && !viewport.contains(root.activeElement)) viewport.focus({ preventScroll: true });
+			if (success && request === this.#pending) this.host.announce(success);
+		} catch (error) {
+			if (request === this.#pending && !isEditCancellation(error) && !this.host.controller.state.edit.error) this.host.announce(editErrorMessage(error));
+		}
+	}
+	#toggleFullscreen() {
+		const host = this.host.root.host;
+		const doc = this.host.root.ownerDocument;
+		(doc.fullscreenElement === host ? doc.exitFullscreen?.() : host.requestFullscreen?.())?.catch?.(() => this.host.announce("Full screen is not available in this browser frame."));
+	}
+	/** Visio shortcuts as typed actions. Text fields keep native undo, deletion and editing keys. */
+	#shortcutAction(event) {
+		const state = this.host.controller.state;
+		const control = event.ctrlKey || event.metaKey;
+		const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+		if (control && key === "f") return { type: "search" };
+		if (control && event.shiftKey && key === "w") return {
+			type: "zoom",
+			mode: "fit"
+		};
+		if (control && (key === "PageDown" || key === "PageUp")) return {
+			type: "page",
+			step: key === "PageDown" ? 1 : -1
+		};
+		if (key === "F5" && !control) return { type: "fullscreen" };
+		if (editable(event.target)) return void 0;
+		if (control && !event.shiftKey && key === "z") return {
+			type: "history",
+			key: "undo"
+		};
+		if (control && (key === "y" || event.shiftKey && key === "z")) return {
+			type: "history",
+			key: "redo"
+		};
+		if (control && key === "1") return {
+			type: "tool",
+			tool: "pointer"
+		};
+		if (control && key === "8") return {
+			type: "tool",
+			tool: "rectangle"
+		};
+		if (!control && key === "Delete" && state.selectedShape) return { type: "delete" };
+		if (!control && key === "F2" && state.document) return {
+			type: "reveal",
+			panel: "edit",
+			focusText: true
+		};
+		if (key === "Escape" && this.#tool !== "pointer" && !this.#draw.drawing) return {
+			type: "tool",
+			tool: "pointer"
+		};
+	}
+	#shortcut(event) {
+		if (event.defaultPrevented || event.isComposing || event.altKey) return;
+		const action = this.#shortcutAction(event);
+		if (!action) return;
+		event.preventDefault();
+		this.run(action);
+	}
+	render(state) {
+		const { root, viewport } = this.host;
+		const button = (name) => root.querySelector(`office-ui-button[command="${name}"]`);
+		const editing = this.#canEdit(state);
+		if (this.#tool === "rectangle" && !state.edit.sourceAvailable) this.#tool = "pointer";
+		const page = state.document?.pages[state.pageIndex];
+		button("undo").disabled = !state.edit.canUndo || state.edit.busy || state.loading;
+		button("redo").disabled = !state.edit.canRedo || state.edit.busy || state.loading;
+		button("delete").disabled = !editing || !state.selectedShape;
+		button("pointer").setAttribute("pressed", String(this.#tool === "pointer"));
+		const rectangle = button("rectangle");
+		rectangle.setAttribute("pressed", String(this.#tool === "rectangle"));
+		rectangle.disabled = !editing || !page;
+		rectangle.title = state.edit.sourceAvailable ? "Rectangle (Ctrl+8)" : "Rectangle (Ctrl+8): open a .vsdx file to draw. Model-only documents are read only.";
+		button("grid").setAttribute("pressed", String(this.#grid));
+		button("grid").disabled = !page;
+		for (const name of [
+			"zoom-fit",
+			"page-width",
+			"actual-size"
+		]) button(name).disabled = !page;
+		const fullscreen = button("fullscreen");
+		const host = root.host;
+		fullscreen.disabled = typeof host.requestFullscreen !== "function";
+		fullscreen.setAttribute("pressed", String(root.ownerDocument.fullscreenElement === host));
+		viewport.dataset.tool = this.#tool;
+		viewport.dataset.grid = String(this.#grid);
+	}
+};
+//#endregion
+//#region src/office-ui.ts
+/**
+* Visio-only glyphs (20x20 path data). Neutral Office glyphs come from ooxml-ui; add a glyph
+* there instead when another Office product could use it.
+*/
+var VISIO_ICONS = {
+	visioLayers: "m2.5 7 7.5-4 7.5 4-7.5 4ZM2.5 10.5l7.5 4 7.5-4M2.5 14l7.5 4 7.5-4",
+	visioShapeData: "M3 3.5h14v13H3ZM3 7.5h14M8 7.5v9M10.5 11h4M10.5 14h4",
+	visioPagesPane: "M2.5 3h15v14h-15ZM7 3v14M3.8 6h1.9M3.8 9h1.9M3.8 12h1.9",
+	visioInspectorPane: "M2.5 3h15v14h-15ZM13 3v14M14.5 6h1.5M14.5 9h1.5M14.5 12h1.5"
+};
+/** Define the shared Office controls the viewer chrome uses. Idempotent; browser only. */
+function registerViewerControls(registry) {
+	for (const [name, path] of Object.entries(VISIO_ICONS)) if (!getIcon(name)) registerIcon(name, path);
+	registerControls(registry);
+}
+//#endregion
+//#region src/export-svg.ts
 var MAX_SVG_EXPORT_BYTES = 16777216;
 var APPROXIMATION = "Static SVG export is a rendered approximation, not an editable VSDX round-trip or a guarantee of Microsoft Visio fidelity. Fonts are not embedded.";
 var INVALID_XML = "Invalid XML characters were replaced with the Unicode replacement character in the SVG export.";
@@ -3146,7 +3908,7 @@ function assertSerializedBudget(root, maxBytes) {
 	}
 }
 //#endregion
-//#region .package-build/output/src/snapshot-scene.js
+//#region src/snapshot-scene.ts
 /** Copy only named scalar fields, never arbitrary host properties or their getters. */
 function fields(source, keys) {
 	const result = {};
@@ -3362,7 +4124,7 @@ function copySnapshotScene(model) {
 	};
 }
 //#endregion
-//#region .package-build/output/src/print-snapshot.js
+//#region src/print-snapshot.ts
 /** Application guardrails, not printer capabilities or Microsoft Visio limits. */
 var PRINT_SNAPSHOT_LIMITS = Object.freeze({
 	maxPages: 32,
@@ -3579,14 +4341,17 @@ function validationCost(model) {
 	};
 }
 //#endregion
-//#region .package-build/output/src/viewer-element.js
+//#region src/viewer-element.ts
 var BaseElement = typeof HTMLElement === "undefined" ? class {} : HTMLElement;
 var VisioViewerElement = class extends BaseElement {
+	controller = new ViewerController(createWorkerParser());
 	#root;
 	#disposeInputs;
 	#viewport;
-	#pageSelect;
-	#zoomLabel;
+	#zoomSlider;
+	#shapeStatus;
+	#announcement;
+	#commands;
 	#status;
 	#diagnostics;
 	#toolbar;
@@ -3600,38 +4365,33 @@ var VisioViewerElement = class extends BaseElement {
 	#notesPanel;
 	#inspector;
 	#inspectedShape;
-	#renderedSelection;
+	#renderedSelection = null;
 	#unsubscribe;
 	#eventUnsubscribe;
-	#document;
-	#renderedPage;
-	#disposed;
-	#suspended;
-	#renderWarnings;
-	#disposeRenderer;
+	#document = null;
+	#renderedPage = -1;
+	#disposed = false;
+	#suspended = false;
+	#renderWarnings = [];
+	#disposeRenderer = () => {};
 	#fontEvents;
-	#fontsChanged;
-	constructor() {
-		super();
-		this.controller = new ViewerController(createWorkerParser());
-		this.#renderedSelection = null;
+	#fontsChanged = () => {
+		if (this.#disposed) return;
 		this.#document = null;
 		this.#renderedPage = -1;
-		this.#disposed = false;
-		this.#suspended = false;
-		this.#renderWarnings = [];
-		this.#disposeRenderer = () => {};
-		this.#fontsChanged = () => {
-			if (this.#disposed) return;
-			this.#document = null;
-			this.#renderedPage = -1;
-			this.#render(this.controller.state);
-		};
+		this.#render(this.controller.state);
+	};
+	constructor() {
+		super();
 		this.#root = this.attachShadow({ mode: "open" });
-		this.#root.innerHTML = `<style>${viewerStyles}</style>${viewerChromeTemplate}`;
+		registerViewerControls();
+		this.#root.innerHTML = `<style>${viewerStyles}${canvasAndRibbonStyles}</style>${viewerChromeTemplate}`;
+		const workspace = this.#root.querySelector(".workspace");
+		workspace.before(createRibbon(document));
+		workspace.after(createPageTabs(document), createStatusBar(document));
 		this.#viewport = this.#root.querySelector(".viewport");
-		this.#pageSelect = this.#root.querySelector("select");
-		this.#zoomLabel = this.#root.querySelector("output");
+		this.#zoomSlider = this.#root.querySelector("office-ui-zoom-slider");
+		this.#shapeStatus = this.#root.querySelector("[data-shape-status]");
 		this.#status = this.#root.querySelector("[data-status]");
 		this.#diagnostics = this.#root.querySelector("[data-diagnostics]");
 		this.#toolbar = this.#root.querySelector(".toolbar");
@@ -3642,6 +4402,23 @@ var VisioViewerElement = class extends BaseElement {
 		this.#notesPanel = this.#root.querySelector(".notes");
 		this.#inspector = this.#root.querySelector(".shape-inspector");
 		this.#chrome = new ViewerChrome(this.#root, this.controller);
+		this.#commands = new ViewerCommands({
+			root: this.#root,
+			viewport: this.#viewport,
+			controller: this.controller,
+			fit: (mode) => this.#fit(mode),
+			togglePane: (pane) => this.#chrome.togglePane(pane),
+			reveal: (panel, focusText) => this.#chrome.reveal(panel, focusText),
+			focusSearch: () => {
+				this.#chrome.showTab("home");
+				this.#search.input.focus();
+				this.#search.input.select();
+			},
+			announce: (message) => {
+				this.#announcement = message;
+				this.#status.textContent = message;
+			}
+		});
 		this.#disposeInputs = this.#wireInputs();
 		this.#unsubscribe = this.controller.subscribe((state) => this.#render(state));
 		this.#eventUnsubscribe = this.controller.onEvent((name, detail) => {
@@ -3715,13 +4492,24 @@ var VisioViewerElement = class extends BaseElement {
 	}
 	fit() {
 		this.#assertAlive();
+		this.#fit("page");
+	}
+	/** Visio Fit to Window shows the whole page; Page Width fills the canvas width. */
+	#fit(mode) {
 		const page = this.document?.pages[this.pageIndex];
 		if (!page) return;
 		const style = this.ownerDocument.defaultView?.getComputedStyle(this.#viewport);
 		const padding = (value) => Number.parseFloat(value ?? "") || 0;
 		const width = Math.max(1, this.#viewport.clientWidth - padding(style?.paddingLeft) - padding(style?.paddingRight));
 		const height = Math.max(1, this.#viewport.clientHeight - padding(style?.paddingTop) - padding(style?.paddingBottom));
-		this.zoom = Math.min(1, width / (page.width * 96), height / (page.height * 96));
+		if (mode === "page") {
+			this.zoom = Math.min(1, width / (page.width * 96), height / (page.height * 96));
+			return;
+		}
+		const scrollbar = this.#viewport.offsetWidth - this.#viewport.clientWidth;
+		const fitted = width / (page.width * 96);
+		const reserve = page.height * 96 * fitted > height && scrollbar <= 0 ? 17 : 0;
+		this.zoom = Math.max(1, width - reserve - 1) / (page.width * 96);
 	}
 	setLayerVisibility(pageId, layerId, visible) {
 		this.#assertAlive();
@@ -3791,16 +4579,18 @@ var VisioViewerElement = class extends BaseElement {
 	}
 	#wireInputs() {
 		const disposeChrome = this.#chrome.wire();
+		const disposeCommands = this.#commands.wire();
 		const disposeEdit = this.#edit.wire();
 		const disposeLayers = wireLayerControls(this.#layers, this.controller);
 		const disposeInputs = wireViewerInputs({
 			viewport: this.#viewport,
 			commandRoot: this.#root,
-			pageSelect: this.#pageSelect,
+			zoomSlider: this.#zoomSlider,
 			searchInput: this.#search.input
-		}, this.controller, () => this.fit());
+		}, this.controller, (mode) => this.#fit(mode));
 		return () => {
 			disposeChrome();
+			disposeCommands();
 			disposeInputs();
 			disposeLayers();
 			disposeEdit();
@@ -3819,14 +4609,7 @@ var VisioViewerElement = class extends BaseElement {
 			this.#document = state.document;
 			this.#renderedPage = state.pageIndex;
 			this.#renderedLayerOverrides = state.layerVisibilityOverrides;
-			this.#pageSelect.replaceChildren();
-			for (const [index, candidate] of (state.document?.pages ?? []).entries()) {
-				const option = document.createElement("option");
-				option.value = String(index);
-				option.textContent = candidate.name + (candidate.isBackground ? " (background)" : "");
-				this.#pageSelect.append(option);
-			}
-			this.#pageSelect.value = String(state.pageIndex);
+			this.#announcement = void 0;
 			this.#renderWarnings = [];
 			if (state.document && page) {
 				const result = renderPage(state.document, page, { layerVisibilityOverrides: state.layerVisibilityOverrides });
@@ -3853,6 +4636,7 @@ var VisioViewerElement = class extends BaseElement {
 		if (svg && page) {
 			svg.style.width = `${page.width * 96 * state.zoom}px`;
 			svg.style.height = `${page.height * 96 * state.zoom}px`;
+			svg.style.setProperty("--vv-inch", `${96 * state.zoom}px`);
 		}
 		const searchResult = state.search.results[state.search.activeIndex];
 		const selection = state.selectedShape;
@@ -3880,16 +4664,20 @@ var VisioViewerElement = class extends BaseElement {
 			this.#renderedSelection = selection ? { ...selection } : null;
 		}
 		if (!searchResult) this.#revealedSearchResult = void 0;
-		this.#zoomLabel.value = `${Math.round(state.zoom * 100)}%`;
-		this.#pageSelect.disabled = !page;
+		this.#zoomSlider.value = Math.round(state.zoom * 100);
+		this.#zoomSlider.disabled = !page;
+		const inspected = selectedShape(state.document, state.selectedShape, state.pageIndex);
+		const inches = (value) => `${+value.toFixed(3)} in`;
+		this.#shapeStatus.setAttribute("value", inspected ? `Width: ${inches(inspected.width)}  Height: ${inches(inspected.height)}` : "");
 		for (const button of this.#root.querySelectorAll("[data-action]")) button.disabled = !page;
 		renderSearchControls(this.#search, state);
 		this.#edit.render(state);
 		if (changed) renderLayerControls(this.#layers, state);
 		else this.#layers.querySelector("[data-layer-reset=\"all\"]").disabled = state.layerVisibilityOverrides.length === 0;
 		this.#chrome.render(state, this.#notes.children.length);
+		this.#commands.render(state);
 		this.#viewport.setAttribute("aria-busy", String(state.loading || state.edit.busy));
-		this.#status.textContent = state.loading ? "Opening diagram…" : state.error?.message ?? (page ? `${page.name} · ${page.shapes.length} top-level shapes` : "No diagram open");
+		this.#status.textContent = state.loading ? "Opening diagram…" : state.edit.busy ? "Updating diagram…" : state.error?.message ?? (state.edit.error ? `Edit rejected: ${editErrorMessage(state.edit.error)}` : void 0) ?? this.#announcement ?? (page ? `${page.name} · ${page.shapes.length} top-level shapes` : "No diagram open");
 		const warnings = (state.document?.diagnostics.length ?? 0) + this.#renderWarnings.length;
 		this.#diagnostics.textContent = warnings ? `${this.#notes.children.length} compatibility notes` : "Local-only viewing";
 	}
@@ -3899,7 +4687,7 @@ function registerVisioViewer() {
 	if (!customElements.get("visio-viewer")) customElements.define("visio-viewer", VisioViewerElement);
 }
 //#endregion
-//#region .package-build/output/src/binding.js
+//#region src/binding.ts
 /** One client-only lifecycle adapter; framework wrappers forward to this implementation. */
 function mountViewer(container, initial = {}) {
 	registerVisioViewer();
@@ -4000,7 +4788,7 @@ function mountViewer(container, initial = {}) {
 	};
 }
 //#endregion
-//#region .package-build/output/packages/bindings/src/common.js
+//#region packages/bindings/src/common.ts
 /** One mapping for every property and event, shared by every framework adapter. */
 function viewerOptions(props) {
 	const result = { events: props.events ?? {} };
@@ -4099,13 +4887,30 @@ function viewerHandle(current) {
 		}
 	};
 }
+function viewerStateSource(current) {
+	const controller = () => {
+		try {
+			return current()?.controller;
+		} catch {
+			return;
+		}
+	};
+	return {
+		subscribe(onChange) {
+			return controller()?.subscribe(() => onChange()) ?? (() => {});
+		},
+		getSnapshot() {
+			return controller()?.state ?? null;
+		}
+	};
+}
 /** Native framework emits and callback-map props share one complete event inventory. */
 function withEventEmitter(props, emit) {
 	const options = viewerOptions(props);
 	const callbacks = {};
 	for (const name of eventKeys) Object.assign(callbacks, { [name]: (value) => {
 		try {
-			props.events?.[name]?.(value);
+			(props.events?.[name])?.(value);
 		} finally {
 			emit(name, value);
 		}
@@ -4116,14 +4921,15 @@ function withEventEmitter(props, emit) {
 	};
 }
 //#endregion
-//#region .package-build/output/packages/bindings/src/angular.js
-var __decorate = function(decorators, target, key, desc) {
+//#region \0@oxc-project+runtime@0.152.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
 	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
 	return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/** Angular input/output and lifecycle wiring over the one shared browser binding. */
+}
+//#endregion
+//#region packages/bindings/src/angular.ts
 var VisioViewerComponent = class VisioViewerComponent {
 	constructor() {
 		this.documentLoad = new EventEmitter();
@@ -4134,6 +4940,9 @@ var VisioViewerComponent = class VisioViewerComponent {
 		this.shapeSelect = new EventEmitter();
 		this.host = inject(ElementRef);
 		this.handle = viewerHandle(() => this.binding);
+		this.stopState = () => {};
+		this.viewerState = signal(null);
+		this.state = this.viewerState.asReadonly();
 		this.outputs = {
 			"document-load": this.documentLoad,
 			"document-change": this.documentChange,
@@ -4150,11 +4959,17 @@ var VisioViewerComponent = class VisioViewerComponent {
 	}
 	ngAfterViewInit() {
 		this.binding = mountFrameworkViewer(this.host.nativeElement, this.options());
+		const source = viewerStateSource(() => this.handle);
+		this.viewerState.set(source.getSnapshot());
+		this.stopState = source.subscribe(() => this.viewerState.set(source.getSnapshot()));
 	}
 	ngOnChanges() {
 		this.binding?.update(this.options());
 	}
 	ngOnDestroy() {
+		this.stopState();
+		this.stopState = () => {};
+		this.viewerState.set(null);
 		const mounted = this.binding;
 		this.binding = void 0;
 		mounted?.destroy();