visio-react-viewer 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,5 +1,7 @@
 import { VISIO_RASTER_IMAGE_LIMITS, VISIO_VISIBILITY_LIMITS, getVisioPageLayers, inspectVisioRasterImage, parseVsdx, resolveVisioPageVisibility, validateVisioForeignVector } from "ooxml-core/visio";
-import { createElement, forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { registerControls } from "ooxml-ui/controls";
+import { getIcon, registerIcon } from "ooxml-ui/icons";
+import { createElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useSyncExternalStore } from "react";
 export * from "visio-core";
 //#region src/document-history.ts
 var EMPTY_EDIT_STATE = Object.freeze({
@@ -532,7 +534,7 @@ function createWorkerEditor(factory, timeoutMs = 2e4) {
 		if (typeof Worker === "undefined") throw new Error("Editing requires browser worker support.");
 		return new Worker(new URL(
 			/* @vite-ignore */
-			new URL("assets/edit-worker-DRgXgRud.js", import.meta.url).href,
+			new URL("assets/edit-worker-BcXrV_St.js", import.meta.url).href,
 			"" + import.meta.url
 		), { type: "module" });
 	});
@@ -2143,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);
@@ -2159,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);
@@ -2204,7 +2202,7 @@ function wireViewerInputs(controls, controller, fit) {
 		}
 		if (event.key === "0") {
 			event.preventDefault();
-			fit();
+			fit("page");
 		}
 	}, options);
 	return () => events.abort();
@@ -2308,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); }
@@ -2324,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; }
@@ -2404,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; } }
@@ -2416,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; }
@@ -2432,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); }
@@ -2449,29 +2422,413 @@ 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 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) {
@@ -2759,61 +3116,17 @@ var ViewerEditControls = class {
 	}
 };
 //#endregion
-//#region src/viewer-search.ts
-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 src/viewer-chrome.ts
-/** 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">
+/**
+* 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>
@@ -2822,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");
@@ -2848,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;
@@ -2884,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);
@@ -2898,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));
@@ -2906,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"
@@ -2961,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;
@@ -2976,17 +3339,405 @@ 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 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.";
@@ -3597,8 +4348,10 @@ var VisioViewerElement = class extends BaseElement {
 	#root;
 	#disposeInputs;
 	#viewport;
-	#pageSelect;
-	#zoomLabel;
+	#zoomSlider;
+	#shapeStatus;
+	#announcement;
+	#commands;
 	#status;
 	#diagnostics;
 	#toolbar;
@@ -3631,10 +4384,14 @@ var VisioViewerElement = class extends BaseElement {
 	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");
@@ -3645,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) => {
@@ -3718,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();
@@ -3794,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();
@@ -3822,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 });
@@ -3856,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;
@@ -3883,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";
 	}
@@ -4102,6 +4887,23 @@ 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;
+		}
+	};
+}
 //#endregion
 //#region packages/bindings/src/react.ts
 /** React owns only the host and lifecycle; the shared element owns all viewer behavior. */
@@ -4127,5 +4929,13 @@ var VisioViewer = forwardRef(function VisioViewer(props, ref) {
 		"aria-label": props["aria-label"]
 	});
 });
+/**
+* Reactive viewer state (page, zoom, selection, search, edit and undo state) for the `ref`
+* given to `<VisioViewer>`, through React's external-store hook. `null` until mounted.
+*/
+function useVisioViewerState(ref) {
+	const source = useMemo(() => viewerStateSource(() => ref.current), [ref]);
+	return useSyncExternalStore(source.subscribe, source.getSnapshot, () => null);
+}
 //#endregion
-export { MAX_SVG_EXPORT_BYTES, PRINT_SNAPSHOT_LIMITS, TEXT_SEARCH_LIMITS, VIEWER_LAYER_LIMITS, ViewerController, VisioViewer, VisioViewerElement, compatibilityNotes, compatibilityText, createPrintSnapshot, createWorkerParser, eventKeys, exportPageSvg, mountViewer, propertyKeys, registerVisioViewer, renderPage };
+export { MAX_SVG_EXPORT_BYTES, PRINT_SNAPSHOT_LIMITS, TEXT_SEARCH_LIMITS, VIEWER_LAYER_LIMITS, ViewerController, VisioViewer, VisioViewerElement, compatibilityNotes, compatibilityText, createPrintSnapshot, createWorkerParser, eventKeys, exportPageSvg, mountViewer, propertyKeys, registerVisioViewer, renderPage, useVisioViewerState };