visio-svelte-viewer 0.4.0 → 0.5.1

package/dist/index.js

@@ -1,6 +1,7 @@
 import { VISIO_RASTER_IMAGE_LIMITS, VISIO_VISIBILITY_LIMITS, getVisioPageLayers, inspectVisioRasterImage, loadVisio, resolveVisioPageVisibility, validateVisioForeignVector } from "ooxml-core/visio";
-import { attachKeyTips, registerControls } from "ooxml-ui/controls";
+import { attachKeyTips, readOfficeProfile, registerControls, sanitizeOfficeProfile, writeOfficeProfile } from "ooxml-ui/controls";
 import { getIcon, registerIcon } from "ooxml-ui/icons";
+import { definePresence } from "ooxml-ui/presence";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { readonly, writable } from "svelte/store";
@@ -1074,6 +1075,13 @@ var ViewerController = class {
 	async undo() {
 		return this.#mutate("undo");
 	}
+	/**
+	* Adopt a package from a shared session as one undoable history step. Emits `document-change`
+	* with kind `remote`, which a session must not publish back.
+	*/
+	async applyRemoteSource(bytes) {
+		return this.#mutate("remote", void 0, bytes);
+	}
 	async redo() {
 		return this.#mutate("redo");
 	}
@@ -1097,13 +1105,13 @@ var ViewerController = class {
 	#sourceEditState() {
 		return this.#sourceFormat === "vsdx" && this.#state.document?.format === "vsdx" ? this.#history?.state ?? EMPTY_EDIT_STATE : EMPTY_EDIT_STATE;
 	}
-	async #mutate(kind, commands) {
+	async #mutate(kind, commands, remote) {
 		this.#assertAlive();
 		const history = this.#history;
 		if (!history || this.#sourceFormat !== "vsdx" || this.#state.document?.format !== "vsdx") throw new Error("Load a VSDX file before editing. Model-only documents are read only.");
 		if (this.#state.loading || this.#state.edit.busy) throw new Error("Another document operation is in progress.");
 		const target = kind === "undo" ? history.undoTarget : kind === "redo" ? history.redoTarget : void 0;
-		if (kind !== "edit" && !target) return;
+		if ((kind === "undo" || kind === "redo") && !target) return;
 		const id = ++this.#editId;
 		const loadId = this.#loadId;
 		const current = () => !this.#destroyed && id === this.#editId && loadId === this.#loadId && history === this.#history;
@@ -1123,6 +1131,9 @@ var ViewerController = class {
 				assertCurrent();
 				if (edited.bytes.byteLength > 33554432) throw new Error("The modified VSDX exceeds 32 MiB.");
 				document = edited.document;
+			} else if (kind === "remote") {
+				if (remote.byteLength > 33554432) throw new Error("The shared VSDX exceeds 32 MiB.");
+				document = await this.parser(Uint8Array.from(remote));
 			} else document = await this.parser(Uint8Array.from(target.bytes));
 			assertCurrent();
 			assertViewableDocument(document);
@@ -1137,6 +1148,7 @@ var ViewerController = class {
 			const selection = this.#state.selectedShape;
 			const selectedShape = selection && visibleSelection(document, this.#state.pageIndex, selection, visible) ? selection : null;
 			if (edited) history.append(edited.bytes, edited.diagnostics);
+			else if (kind === "remote") history.append(Uint8Array.from(remote), []);
 			else history.move(target);
 			this.#visible = visible;
 			this.#searchIndex = searchIndex;
@@ -1375,28 +1387,10 @@ function selection(target) {
 }
 /** Own every DOM listener and abort them together when the surface is disposed. */
 function wireViewerInputs(controls, controller, fit) {
-	const { viewport, commandRoot, zoomSlider, searchInput } = controls;
+	const { viewport, zoomSlider } = controls;
 	const events = new ((viewport.ownerDocument.defaultView?.AbortController) ?? AbortController)();
 	const options = { signal: events.signal };
-	searchInput.addEventListener("input", () => controller.setSearchQuery(searchInput.value), options);
-	searchInput.addEventListener("keydown", (event) => {
-		if (event.isComposing) return;
-		if (event.key === "Enter") {
-			event.preventDefault();
-			if (event.shiftKey) controller.previousSearchResult();
-			else controller.nextSearchResult();
-		}
-		if (event.key === "Escape") {
-			event.preventDefault();
-			controller.setSearchQuery("");
-		}
-	}, options);
 	zoomSlider.addEventListener("input", () => controller.setZoom(zoomSlider.value / 100), options);
-	commandRoot.addEventListener("click", (event) => {
-		const action = event.target?.closest?.("button")?.dataset.action;
-		if (action === "search-next") controller.nextSearchResult();
-		if (action === "search-previous") controller.previousSearchResult();
-	}, options);
 	viewport.addEventListener("click", (event) => controller.selectShape(selection(targetShape$1(event))), options);
 	viewport.addEventListener("keydown", (event) => {
 		const target = targetShape$1(event);
@@ -1537,22 +1531,12 @@ button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-vis
 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); }
 .spacer { flex:1; }
-.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); }
-.ribbon-tabs button[aria-selected="true"]::after { content:""; position:absolute; inset:auto 0 -1px; height:2.5px; background:var(--_vv-accent); }
 .ribbon-content { min-height:82px; display:flex; align-items:stretch; gap:0; padding:2px 4px; overflow-x:auto; }
 .ribbon-group { display:flex; flex-direction:column; justify-content:space-between; flex:none; gap:2px; padding:3px 10px 4px; border-right:1px solid var(--_vv-border); }
 .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; }
 .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; }
-.search-controls label { display:flex; align-items:center; min-width:0; gap:6px; flex:1; font-size:11px; }
-.search-controls input { width:100%; min-width:0; padding:3px 6px; font-size:11px; }
-.search-controls button { padding:3px 6px; font-size:10px; background:var(--_vv-secondary); }
-.search-controls [role="status"] { display:block; width:100%; min-height:15px; font-size:10px; line-height:15px; color:var(--_vv-muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
 .workspace { position:relative; display:flex; flex:1; min-width:0; min-height:0; overflow:hidden; }
 .pane-heading { height:37px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid var(--_vv-border); font-size:11px; font-weight:600; }
 .inspector-kind { color:var(--_vv-muted); font-size:10px; font-weight:400; }
@@ -1611,17 +1595,8 @@ 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-tabs { height:44px; }
-  .ribbon-tabs button { min-height:44px; padding:8px 16px; }
   .ribbon-content { min-height:86px; }
   .ribbon-group { padding:4px 8px; }
-  .search-group { width:100%; border-right:0; }
-  .search-controls { gap:4px; }
-  .search-controls label { font-size:12px; }
-  .search-controls input { font-size:12px; }
-  .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):not(.undo-group) { display:none; }
   .ribbon-command { min-width:90px; }
   .workspace { display:block; overflow:auto; }
@@ -1640,26 +1615,17 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
   button,select,input,textarea { min-height:44px; }
   button { min-width:44px; }
   summary,.layer-controls label { min-height:44px; line-height: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%; }
   .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; }
@@ -1695,12 +1661,10 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
  .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
@@ -1710,9 +1674,9 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
 * `styles.ts` string moves into this directory when it is next changed.
 */
 var canvasAndRibbonStyles = [
-	"/*\n * Microsoft Visio ribbon layout on the shared ooxml-ui controls. Viewer theme tokens feed the\n * shared --office-* tokens, so host themes still apply. Loaded after the legacy styles.ts.\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\n/* Tab row: Quick Access Toolbar, then Visio's tabs. */\n.ribbon-head {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.qat {\n	display: flex;\n	align-items: center;\n	gap: 0;\n	padding: 0 6px;\n	border-right: 1px solid var(--_vv-border);\n}\n.qat office-ui-button {\n	--office-target-size: 30px;\n}\n.ribbon-head .ribbon-tabs {\n	flex: 0 1 auto;\n	min-width: 0;\n	height: 36px;\n	border-bottom: 0;\n	overflow-x: auto;\n	scrollbar-width: none;\n}\n.ribbon-head .ribbon-tabs button {\n	flex: none;\n	min-height: 35px;\n	padding: 6px 12px;\n	font-size: 13px;\n}\n\n/* Panels: groups of large commands and three-row stacks, as dense as Visio's. */\n.ribbon-content {\n	min-height: 96px;\n	padding: 2px 2px 0;\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.tools-content office-ui-ribbon-group {\n	min-width: 0;\n}\noffice-ui-ribbon-group office-ui-button,\noffice-ui-ribbon-group office-ui-menu-button {\n	--office-target-size: 24px;\n}\noffice-ui-ribbon-group [data-size='large'] {\n	--office-target-size: 30px;\n}\noffice-ui-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 66px;\n	padding: 2px 6px;\n	font-size: 12px;\n}\noffice-ui-menu-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 50px;\n	font-size: 12px;\n}\noffice-ui-ribbon-group [data-size='small']::part(button) {\n	justify-content: flex-start;\n	font-size: 12px;\n}\noffice-ui-ribbon-stack:not([orientation]) {\n	justify-content: flex-start;\n	padding-top: 2px;\n}\noffice-ui-ribbon-stack:not([orientation]) > * {\n	min-height: 24px;\n}\noffice-ui-ribbon-group > office-ui-ribbon-stack > office-ui-ribbon-stack[orientation] {\n	min-height: 32px;\n}\noffice-ui-select[data-combo] {\n	--office-target-size: 24px;\n}\noffice-ui-menu-button[data-active]::part(button) {\n	background: var(--_vv-accent-soft);\n	box-shadow: inset 0 0 0 1px var(--_vv-accent);\n}\n[data-unsupported] {\n	cursor: not-allowed;\n}\n.ribbon-check {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	min-height: 24px;\n	padding: 0 6px;\n	font-size: 12px;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-check[data-unsupported] {\n	color: var(--_vv-muted);\n	opacity: 0.6;\n}\n.ribbon-hint {\n	display: none;\n}\n\n/* Find bar: Visio opens Find on demand instead of keeping a box in the ribbon. */\n.find-bar {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	min-height: 40px;\n	padding: 4px 8px 4px 12px;\n	border-bottom: 1px solid var(--_vv-border);\n	background: var(--_vv-secondary);\n}\n.find-bar .search-group {\n	flex: 1;\n	width: auto;\n	max-width: 640px;\n	padding: 0;\n	border: 0;\n}\n.find-bar .search-group .group-label {\n	display: none;\n}\n.find-bar .search-controls {\n	flex-wrap: nowrap;\n}\n.find-bar [role='status'] {\n	width: auto;\n	flex: 1;\n}\n.find-close {\n	margin-left: auto;\n	width: 28px;\n	padding: 0;\n	border-color: transparent;\n	background: transparent;\n	font-size: 18px;\n}\n\n/* Drawing window with optional rulers. */\n.canvas-area {\n	display: grid;\n	flex: 1;\n	min-width: 0;\n	min-height: 0;\n	grid-template-columns: 0 1fr;\n	grid-template-rows: 0 1fr;\n}\n.canvas-area[data-ruler='true'] {\n	grid-template-columns: 18px 1fr;\n	grid-template-rows: 18px 1fr;\n}\n.canvas-area > .viewport {\n	grid-column: 2;\n	grid-row: 2;\n}\n.ruler,\n.ruler-corner {\n	display: none;\n	background: var(--_vv-surface);\n}\n.canvas-area[data-ruler='true'] > .ruler,\n.canvas-area[data-ruler='true'] > .ruler-corner {\n	display: block;\n}\n.ruler-corner {\n	grid-column: 1;\n	grid-row: 1;\n	border-right: 1px solid var(--_vv-border);\n	border-bottom: 1px solid var(--_vv-border);\n}\n.ruler-h {\n	grid-column: 2;\n	grid-row: 1;\n	width: 100%;\n	height: 18px;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.ruler-v {\n	grid-column: 1;\n	grid-row: 2;\n	width: 18px;\n	height: 100%;\n	border-right: 1px solid var(--_vv-border);\n}\n\n.page-bar {\n	display: flex;\n	flex: none;\n	align-items: stretch;\n	min-width: 0;\n	border-top: 1px solid var(--_vv-border);\n	background: var(--_vv-secondary);\n}\n.page-bar office-ui-menu-button {\n	--office-target-size: 28px;\n	flex: none;\n	padding: 0 2px;\n}\n.page-tabs {\n	flex: 1;\n	min-width: 0;\n	border-top: 0;\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\n@media (max-width: 760px) {\n	.ribbon-row {\n		flex: 1;\n		min-width: 0;\n	}\n	.qat office-ui-button {\n		--office-target-size: 44px;\n	}\n	.ribbon-tools .tools-content office-ui-ribbon-group {\n		width: 100%;\n	}\n	.find-bar {\n		flex-wrap: wrap;\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/* Visio's Tell me box sits right after the tabs. */\n.tell-me {\n	flex: 0 1 280px;\n	min-width: 140px;\n	margin: 0 8px;\n	--office-target-size: 28px;\n}\n.presentation-mode {\n	--office-target-size: 24px;\n}\n@media (max-width: 760px) {\n	.tell-me {\n		display: none;\n	}\n}\n",
+	"/*\n * Microsoft Visio ribbon layout on the shared ooxml-ui controls. Viewer theme tokens feed the\n * shared --office-* tokens, so host themes still apply. Loaded after the legacy styles.ts.\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\n/* Tab row: Quick Access Toolbar, then Visio's tabs. */\n.ribbon-head {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.qat {\n	display: flex;\n	align-items: center;\n	gap: 0;\n	padding: 0 6px;\n	border-right: 1px solid var(--_vv-border);\n}\n.qat office-ui-button {\n	--office-target-size: 30px;\n}\n.ribbon-head .ribbon-tabs {\n	flex: 0 1 auto;\n	min-width: 0;\n	height: 36px;\n	border-bottom: 0;\n	overflow-x: auto;\n	scrollbar-width: none;\n}\n.ribbon-head .ribbon-tabs button {\n	flex: none;\n	min-height: 35px;\n	padding: 6px 12px;\n	font-size: 13px;\n}\n\n/* Panels: groups of large commands and three-row stacks, as dense as Visio's. */\n.ribbon-content {\n	min-height: 96px;\n	padding: 2px 2px 0;\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.tools-content office-ui-ribbon-group {\n	min-width: 0;\n}\noffice-ui-ribbon-group office-ui-button,\noffice-ui-ribbon-group office-ui-menu-button {\n	--office-target-size: 24px;\n}\noffice-ui-ribbon-group [data-size='large'] {\n	--office-target-size: 30px;\n}\noffice-ui-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 66px;\n	padding: 2px 6px;\n	font-size: 12px;\n}\noffice-ui-menu-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 50px;\n	font-size: 12px;\n}\noffice-ui-ribbon-group [data-size='small']::part(button) {\n	justify-content: flex-start;\n	font-size: 12px;\n}\noffice-ui-ribbon-stack:not([orientation]) {\n	justify-content: flex-start;\n	padding-top: 2px;\n}\noffice-ui-ribbon-stack:not([orientation]) > * {\n	min-height: 24px;\n}\noffice-ui-ribbon-group > office-ui-ribbon-stack > office-ui-ribbon-stack[orientation] {\n	min-height: 32px;\n}\noffice-ui-select[data-combo] {\n	--office-target-size: 24px;\n}\noffice-ui-menu-button[data-active]::part(button) {\n	background: var(--_vv-accent-soft);\n	box-shadow: inset 0 0 0 1px var(--_vv-accent);\n}\n[data-unsupported] {\n	cursor: not-allowed;\n}\n.ribbon-check {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	min-height: 24px;\n	padding: 0 6px;\n	font-size: 12px;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-check[data-unsupported] {\n	color: var(--_vv-muted);\n	opacity: 0.6;\n}\n.ribbon-hint {\n	display: none;\n}\n\n/* Drawing window with optional rulers. */\n.canvas-area {\n	display: grid;\n	flex: 1;\n	min-width: 0;\n	min-height: 0;\n	grid-template-columns: 0 1fr;\n	grid-template-rows: 0 1fr;\n}\n.canvas-area[data-ruler='true'] {\n	grid-template-columns: 18px 1fr;\n	grid-template-rows: 18px 1fr;\n}\n.canvas-area > .viewport {\n	grid-column: 2;\n	grid-row: 2;\n}\n.ruler,\n.ruler-corner {\n	display: none;\n	background: var(--_vv-surface);\n}\n.canvas-area[data-ruler='true'] > .ruler,\n.canvas-area[data-ruler='true'] > .ruler-corner {\n	display: block;\n}\n.ruler-corner {\n	grid-column: 1;\n	grid-row: 1;\n	border-right: 1px solid var(--_vv-border);\n	border-bottom: 1px solid var(--_vv-border);\n}\n/* The shared office-ui-ruler draws ticks, labels and its own edge. */\n.ruler-h {\n	grid-column: 2;\n	grid-row: 1;\n}\n.ruler-v {\n	grid-column: 1;\n	grid-row: 2;\n}\n\n.page-bar {\n	display: flex;\n	flex: none;\n	align-items: stretch;\n	min-width: 0;\n	border-top: 1px solid var(--_vv-border);\n	background: var(--_vv-secondary);\n}\n.page-bar office-ui-menu-button {\n	--office-target-size: 28px;\n	flex: none;\n	padding: 0 2px;\n}\n.page-tabs {\n	flex: 1;\n	min-width: 0;\n	border-top: 0;\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\n@media (max-width: 760px) {\n	.ribbon-row {\n		flex: 1;\n		min-width: 0;\n	}\n	.qat office-ui-button {\n		--office-target-size: 44px;\n	}\n	.ribbon-tools .tools-content office-ui-ribbon-group {\n		width: 100%;\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/* Visio's Tell me box sits right after the tabs. */\n.tell-me {\n	flex: 0 1 280px;\n	min-width: 140px;\n	margin: 0 8px;\n	--office-target-size: 28px;\n}\n.presentation-mode {\n	--office-target-size: 24px;\n}\n@media (max-width: 760px) {\n	.tell-me {\n		display: none;\n	}\n}\n",
 	"/* Visio's Shapes window: stencil views, More/Quick Shapes rows and a two-column master grid. */\n.shapes-pane {\n	display: flex;\n	flex: 0 0 232px;\n	flex-direction: column;\n	width: 232px;\n	min-width: 0;\n	overflow: hidden;\n	border-right: 1px solid var(--_vv-border);\n	background: var(--_vv-secondary);\n}\n.shapes-pane .pane-heading {\n	height: 42px;\n	font-size: 18px;\n	font-weight: 400;\n	color: var(--_vv-accent);\n}\n.pane-collapse {\n	min-height: 28px;\n	width: 28px;\n	padding: 0;\n	border-color: transparent;\n	background: transparent;\n	font-size: 18px;\n	line-height: 1;\n}\n.shapes-views {\n	display: flex;\n	gap: 14px;\n	padding: 4px 12px 0;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.shapes-views button {\n	position: relative;\n	min-height: 28px;\n	padding: 2px 0 6px;\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: var(--_vv-muted);\n	font-size: 11px;\n	font-weight: 600;\n	letter-spacing: 0.06em;\n	text-transform: uppercase;\n}\n.shapes-views button[aria-selected='true'] {\n	color: var(--_vv-ink);\n}\n.shapes-views button[aria-selected='true']::after {\n	content: '';\n	position: absolute;\n	inset: auto 0 -1px;\n	height: 2px;\n	background: var(--_vv-accent);\n}\n#shapes-stencils,\n#shapes-search {\n	flex: 1;\n	min-height: 0;\n	overflow: auto;\n	padding: 4px 0 8px;\n}\n.shapes-row {\n	display: flex;\n	align-items: center;\n	width: 100%;\n	min-height: 30px;\n	padding: 0 12px;\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	font-size: 12px;\n	text-align: left;\n}\n.shapes-row::after {\n	content: '›';\n	margin-left: auto;\n	font-size: 15px;\n}\n.stencil-title {\n	margin: 2px 0;\n	padding: 6px 12px;\n	border-left: 3px solid var(--_vv-accent);\n	background: var(--_vv-accent-soft);\n	font-size: 12px;\n	font-weight: 600;\n}\n.masters {\n	display: grid;\n	grid-template-columns: 1fr 1fr;\n	gap: 2px;\n	margin: 0;\n	padding: 4px 6px;\n	list-style: none;\n}\n.masters li[hidden] {\n	display: none;\n}\n.master {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	width: 100%;\n	min-height: 40px;\n	padding: 4px 6px;\n	border-color: transparent;\n	background: transparent;\n	font-size: 11px;\n	line-height: 1.2;\n	text-align: left;\n	cursor: grab;\n}\n.master svg {\n	flex: none;\n	width: 28px;\n	height: 28px;\n	fill: var(--_vv-surface);\n	stroke: var(--_vv-accent);\n	stroke-width: 1.2;\n	stroke-linejoin: round;\n}\n.master[data-unsupported] {\n	cursor: not-allowed;\n	opacity: 0.45;\n}\n.master[data-unsupported]:hover {\n	border-color: transparent;\n	background: transparent;\n}\n.shapes-search-field {\n	display: block;\n	width: calc(100% - 24px);\n	margin: 6px 12px;\n}\n.shapes-empty {\n	margin: 8px 12px;\n	color: var(--_vv-muted);\n	font-size: 12px;\n}\n@media (max-width: 760px) {\n	.shapes-pane {\n		position: absolute;\n		inset: 0 auto 0 0;\n		z-index: 3;\n		width: min(260px, 100%);\n		box-shadow: 8px 0 24px #0002;\n	}\n	.master {\n		min-height: 44px;\n	}\n}\n.shapes-strip {\n	display: flex;\n	flex: 0 0 28px;\n	flex-direction: column;\n	align-items: center;\n	gap: 10px;\n	width: 28px;\n	min-width: 28px;\n	padding: 8px 0;\n	border: 0;\n	border-right: 1px solid var(--_vv-border);\n	border-radius: 0;\n	background: var(--_vv-secondary);\n	color: var(--_vv-accent);\n	font-size: 16px;\n}\n.shapes-strip[hidden] {\n	display: none;\n}\n.shapes-strip-label {\n	writing-mode: vertical-rl;\n	color: var(--_vv-ink);\n	font-size: 12px;\n}\n/* Visio's floating Pan & Zoom window. */\n.pan-zoom {\n	position: absolute;\n	right: 16px;\n	bottom: 16px;\n	z-index: 5;\n	width: 240px;\n	border: 1px solid var(--_vv-border);\n	background: var(--_vv-surface);\n	box-shadow: 0 6px 20px rgb(0 0 0 / 18%);\n}\n.pan-zoom[hidden] {\n	display: none;\n}\n.pan-zoom-heading {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 2px 4px 2px 10px;\n	border-bottom: 1px solid var(--_vv-border);\n	font-size: 12px;\n	font-weight: 600;\n}\n.pan-zoom-close {\n	min-height: 24px;\n	width: 24px;\n	padding: 0;\n	border-color: transparent;\n	background: transparent;\n}\n.pan-zoom-view {\n	display: grid;\n	place-items: center;\n	height: 180px;\n	padding: 8px;\n	background: var(--_vv-bg);\n	cursor: crosshair;\n	touch-action: none;\n}\n.pan-zoom-view svg {\n	max-width: 100%;\n	max-height: 100%;\n	background: #fff;\n	box-shadow: 0 1px 3px rgb(0 0 0 / 20%);\n}\n.pan-zoom-frame {\n	fill: rgb(220 38 38 / 8%);\n	stroke: #dc2626;\n	stroke-width: 2px;\n}\n",
-	"/* Visio's File tab and backstage. */\n:host {\n	position: relative;\n}\n.file-tab {\n	flex: none;\n	min-height: 35px;\n	margin: 0 4px 0 0;\n	padding: 6px 16px;\n	border: 0;\n	border-radius: 0;\n	background: var(--_vv-accent);\n	color: var(--vv-accent-ink, #fff);\n	font-size: 13px;\n}\n.file-tab:hover:enabled {\n	background: color-mix(in srgb, var(--_vv-accent) 85%, #000);\n	color: var(--vv-accent-ink, #fff);\n}\n.backstage {\n	position: absolute;\n	inset: 0;\n	z-index: 30;\n	display: flex;\n	min-width: 0;\n	background: var(--_vv-surface);\n}\n.backstage[hidden] {\n	display: none;\n}\n.backstage-nav {\n	display: flex;\n	flex: 0 0 200px;\n	flex-direction: column;\n	padding: 12px 0;\n	overflow: auto;\n	background: var(--_vv-accent);\n	color: var(--vv-accent-ink, #fff);\n}\n.backstage-nav button {\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: inherit;\n	text-align: left;\n}\n.backstage-back {\n	width: 36px;\n	min-height: 36px;\n	margin: 0 0 12px 16px;\n	padding: 0;\n	border: 1.5px solid currentColor !important;\n	border-radius: 50% !important;\n	font-size: 18px;\n	text-align: center !important;\n}\n.backstage-item {\n	min-height: 38px;\n	padding: 6px 24px;\n	font-size: 14px;\n}\n.backstage-item:hover:enabled,\n.backstage-item[aria-current] {\n	background: color-mix(in srgb, #000 22%, transparent) !important;\n	color: inherit;\n}\n.backstage-item:disabled {\n	opacity: 0.55;\n}\n.backstage-footer {\n	display: flex;\n	flex-direction: column;\n	margin-top: auto;\n	padding-top: 16px;\n}\n.backstage-body {\n	flex: 1;\n	min-width: 0;\n	overflow: auto;\n	padding: 28px 40px;\n}\n.backstage-page h1 {\n	margin: 0 0 24px;\n	font-size: 34px;\n	font-weight: 300;\n}\n.backstage-page h2 {\n	margin: 20px 0 8px;\n	font-size: 16px;\n	font-weight: 600;\n}\n.backstage-file {\n	margin-top: 0 !important;\n	font-size: 20px !important;\n	font-weight: 400 !important;\n	overflow-wrap: anywhere;\n}\n.backstage-facts {\n	display: grid;\n	grid-template-columns: max-content 1fr;\n	gap: 8px 24px;\n	max-width: 520px;\n	margin: 0;\n	font-size: 13px;\n}\n.backstage-facts dt {\n	color: var(--_vv-muted);\n}\n.backstage-facts dd {\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.backstage-action {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-start;\n	gap: 2px;\n	width: min(420px, 100%);\n	min-height: 64px;\n	margin: 0 0 10px;\n	padding: 10px 16px;\n	text-align: left;\n	background: var(--_vv-surface);\n}\n.backstage-action strong {\n	font-size: 14px;\n	font-weight: 600;\n}\n.backstage-action span,\n.backstage-muted,\n.backstage-note-count {\n	color: var(--_vv-muted);\n	font-size: 12px;\n}\n.backstage-templates {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 12px;\n}\n.backstage-templates .backstage-action,\n.backstage-templates ::slotted(*) {\n	width: 200px;\n	min-height: 120px;\n}\n.backstage-print-preview {\n	max-width: 420px;\n	padding: 12px;\n	border: 1px solid var(--_vv-border);\n	background: #fff;\n}\n.backstage-print-preview svg {\n	display: block;\n	width: 100%;\n	height: auto;\n}\n@media (max-width: 760px), (pointer: coarse) {\n	.file-tab {\n		min-height: 44px;\n		min-width: 52px;\n	}\n}\n@media (max-width: 760px) {\n	.backstage {\n		flex-direction: column;\n	}\n	.backstage-nav {\n		flex: none;\n		flex-direction: row;\n		flex-wrap: wrap;\n		padding: 6px;\n	}\n	.backstage-back {\n		margin: 4px;\n	}\n	.backstage-item {\n		min-height: 44px;\n		padding: 6px 12px;\n	}\n	.backstage-footer {\n		flex-direction: row;\n		margin-top: 0;\n		padding-top: 0;\n	}\n	.backstage-body {\n		padding: 16px;\n	}\n}\n",
+	"/* Visio's File tab and backstage. */\n:host {\n	position: relative;\n}\n/* The shared office-ui-backstage draws the File column; these style Visio's page content. */\n.backstage {\n	--office-accent: var(--_vv-accent);\n	--office-accent-foreground: var(--vv-accent-ink, #fff);\n}\n.backstage-page h1 {\n	margin: 0 0 24px;\n	font-size: 34px;\n	font-weight: 300;\n}\n.backstage-page h2 {\n	margin: 20px 0 8px;\n	font-size: 16px;\n	font-weight: 600;\n}\n.backstage-file {\n	margin-top: 0 !important;\n	font-size: 20px !important;\n	font-weight: 400 !important;\n	overflow-wrap: anywhere;\n}\n.backstage-facts {\n	display: grid;\n	grid-template-columns: max-content 1fr;\n	gap: 8px 24px;\n	max-width: 520px;\n	margin: 0;\n	font-size: 13px;\n}\n.backstage-facts dt {\n	color: var(--_vv-muted);\n}\n.backstage-facts dd {\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.backstage-action {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-start;\n	gap: 2px;\n	width: min(420px, 100%);\n	min-height: 64px;\n	margin: 0 0 10px;\n	padding: 10px 16px;\n	text-align: left;\n	background: var(--_vv-surface);\n}\n.backstage-action strong {\n	font-size: 14px;\n	font-weight: 600;\n}\n.backstage-action span,\n.backstage-muted,\n.backstage-note-count {\n	color: var(--_vv-muted);\n	font-size: 12px;\n}\n.backstage-templates {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 12px;\n}\n.backstage-templates .backstage-action,\n.backstage-templates ::slotted(*) {\n	width: 200px;\n	min-height: 120px;\n}\n/* Account: the shared profile editor, then Visio's product information. */\n.backstage-page office-ui-account {\n	max-width: 560px;\n}\n.backstage-product {\n	margin-top: 24px;\n}\n/* Share with people: a live session between windows of this browser. */\n.share-panel {\n	max-width: 560px;\n	margin-bottom: 16px;\n}\n.share-panel h2 {\n	margin-top: 0 !important;\n}\n.share-field {\n	display: grid;\n	gap: 4px;\n	max-width: 320px;\n	margin: 12px 0;\n	font-size: 13px;\n}\n.share-room {\n	min-height: 30px;\n	padding: 2px 8px;\n	border: 1px solid var(--_vv-border);\n	border-radius: 3px;\n	background: var(--_vv-surface);\n	color: inherit;\n	font: inherit;\n}\n.share-buttons button {\n	min-height: 32px;\n	padding: 0 16px;\n}\n.share-buttons button[hidden] {\n	display: none;\n}\n.share-status {\n	min-height: 20px;\n	font-size: 13px;\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
@@ -2829,8 +2793,7 @@ function ribbonCommands(root) {
 	const commands = [];
 	const context = (node) => {
 		const group = node.closest("office-ui-ribbon-group")?.getAttribute("label") ?? "";
-		const panel = node.closest(".ribbon-content");
-		return [panel ? root.querySelector(`[aria-controls="${panel.id}"]`)?.textContent ?? "" : "", group].filter(Boolean).join(" › ");
+		return [node.closest("[data-ribbon-tab]")?.dataset.label ?? "", group].filter(Boolean).join(" › ");
 	};
 	for (const node of root.querySelectorAll(".toolbar [command]")) {
 		const id = node.getAttribute("command");
@@ -2962,50 +2925,32 @@ function quickAccess(doc) {
 	return qat;
 }
 /**
-* The Visio ribbon: Quick Access Toolbar, tab list and one panel per tab. Tab switching and
-* keyboard movement belong to the chrome; commands emit `ribbon-action` events for the router.
+* The Visio ribbon on the shared `office-ui-ribbon`: Quick Access Toolbar, File, one panel per
+* tab and Tell me. The shared element owns the tab row, selection and arrow-key movement;
+* 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 head = doc.createElement("div");
-	head.className = "ribbon-head";
-	const tabs = doc.createElement("div");
-	tabs.className = "ribbon-tabs";
-	tabs.setAttribute("role", "tablist");
-	tabs.setAttribute("aria-label", "Ribbon");
-	const file = doc.createElement("button");
-	file.type = "button";
-	file.className = "file-tab";
-	file.textContent = "File";
-	file.setAttribute("aria-haspopup", "dialog");
-	file.setAttribute("aria-expanded", "false");
-	head.append(quickAccess(doc), file, tabs, createTellMe(doc));
-	toolbar.append(head);
+	const ribbon = doc.createElement("office-ui-ribbon");
+	ribbon.className = "toolbar";
+	ribbon.setAttribute("role", "group");
+	ribbon.setAttribute("aria-label", "Diagram controls");
+	ribbon.setAttribute("label", "Ribbon");
+	ribbon.setAttribute("selected", "home");
+	const qat = quickAccess(doc);
+	qat.slot = "quick-access";
+	const tellMe = createTellMe(doc);
+	tellMe.slot = "search";
+	ribbon.append(qat, tellMe);
 	for (const [key, name, build] of RIBBON_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;
+		panel.dataset.ribbonTab = key;
+		panel.dataset.label = name;
 		build(doc, panel);
-		tabs.append(tab);
-		toolbar.append(panel);
+		ribbon.append(panel);
 	}
-	return toolbar;
+	return ribbon;
 }
 //#endregion
 //#region src/ribbon-keytips.ts
@@ -3111,13 +3056,13 @@ function generated(label, used, singles) {
 }
 /** Annotate the ribbon for KeyTips. Labels and ids are static application strings. */
 function applyKeyTips(toolbar) {
-	toolbar.querySelector(".file-tab").dataset.keytip = "F";
+	toolbar.setAttribute("file-keytip", "F");
 	toolbar.querySelector(".tell-me").dataset.keytip = "Q";
 	toolbar.querySelector(".qat [command=\"undo\"]").dataset.keytip = "1";
 	toolbar.querySelector(".qat [command=\"redo\"]").dataset.keytip = "2";
-	for (const tab of toolbar.querySelectorAll("[data-tab]")) {
-		tab.dataset.keytip = TABS[tab.dataset.tab] ?? tab.dataset.tab.slice(0, 1).toUpperCase();
-		tab.dataset.keytipPanel = `${tab.dataset.tab}-panel`;
+	for (const panel of toolbar.querySelectorAll("[data-ribbon-tab]")) {
+		const tab = panel.dataset.ribbonTab;
+		panel.dataset.tabKeytip = TABS[tab] ?? tab.slice(0, 1).toUpperCase();
 	}
 	for (const panel of toolbar.querySelectorAll(".ribbon-content")) {
 		panel.dataset.keytipLevel = "";
@@ -3222,98 +3167,42 @@ function createPageTabs(doc) {
 }
 //#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;
-}
 /**
-* Visio opens Find from Home > Editing rather than keeping a box in the ribbon. The find bar
-* sits under the ribbon, hidden until Find... or Ctrl+F, and closes with its button or Escape.
+* Visio opens Find from Home > Editing rather than keeping a box in the ribbon. The shared
+* `office-ui-find-bar` sits under the ribbon, hidden until Find... or Ctrl+F; Enter and
+* Shift+Enter step through matching shapes and Escape clears, then closes.
 */
 function createFindBar(doc) {
-	const bar = doc.createElement("div");
+	const bar = doc.createElement("office-ui-find-bar");
 	bar.className = "find-bar";
-	bar.hidden = true;
-	const close = doc.createElement("button");
-	close.type = "button";
-	close.className = "find-close";
-	close.dataset.action = "find-close";
-	close.setAttribute("aria-label", "Close Find");
-	close.title = "Close Find (Esc)";
-	close.textContent = "×";
-	bar.append(createSearchGroup(doc), close);
+	bar.setAttribute("label", "Diagram text search");
+	bar.setAttribute("input-label", "Search diagram text");
+	bar.setAttribute("placeholder", "Text across pages");
+	bar.setAttribute("maxlength", String(TEXT_SEARCH_LIMITS.queryCharacters));
+	bar.setAttribute("previous-label", "Previous matching shape");
+	bar.setAttribute("next-label", "Next matching shape");
 	return bar;
 }
-/** The find bar closes from its button, or Escape once the query is already empty. */
-function wireFindBar(bar, input, closed) {
+/** Route the find bar's queries and steps to the controller; `closed` restores focus. */
+function wireFindBar(bar, controller, closed) {
 	const events = new ((bar.ownerDocument.defaultView?.AbortController) ?? AbortController)();
-	const close = () => {
-		bar.hidden = true;
-		closed();
-	};
-	bar.addEventListener("click", (event) => {
-		if (event.target.closest?.("[data-action=\"find-close\"]")) close();
-	}, { signal: events.signal });
-	bar.addEventListener("keydown", (event) => {
-		if (event.key === "Escape" && input.value === "") close();
-	}, {
-		signal: events.signal,
-		capture: true
-	});
+	const options = { signal: events.signal };
+	bar.addEventListener("office-find-input", (event) => controller.setSearchQuery(event.detail.query), options);
+	bar.addEventListener("office-find-step", (event) => {
+		const { direction } = event.detail;
+		if (direction === "next") controller.nextSearchResult();
+		else controller.previousSearchResult();
+	}, options);
+	bar.addEventListener("office-find-close", closed, options);
 	return () => events.abort();
 }
-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";
+function renderFindBar(bar, state) {
+	bar.value = state.search.query;
+	bar.toggleAttribute("disabled", !state.document?.pages.length);
+	bar.toggleAttribute("navigation-disabled", !state.search.results.length);
+	bar.status = 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}` : "";
+	bar.statusTitle = result ? `${result.pageName} · ${result.shapeName}: ${result.preview}` : "";
 }
 //#endregion
 //#region src/viewer-fit.ts
@@ -3607,6 +3496,17 @@ var BACKSTAGE_FOOTER = [
 	["feedback", "Feedback"],
 	["options", "Options"]
 ];
+/** The navigation items, with optional disabled states (Save and Close follow the drawing). */
+function backstageItems(state = {}) {
+	const item = (id, label, group) => ({
+		id,
+		label,
+		...group ? { group } : {},
+		...state[id]?.disabled ? { disabled: true } : {},
+		...state[id]?.title ? { title: state[id].title } : {}
+	});
+	return [...BACKSTAGE_ITEMS.map(([id, label]) => item(id, label)), ...BACKSTAGE_FOOTER.map(([id, label]) => item(id, label, "footer"))];
+}
 var LOCAL = "Documents stay in this browser; nothing is uploaded.";
 function el(doc, tag, className, text) {
 	const node = doc.createElement(tag);
@@ -3630,7 +3530,6 @@ function action(doc, id, label, description, unsupported) {
 function page(doc, id, title, ...content) {
 	const section = el(doc, "section", "backstage-page");
 	section.dataset.backstagePage = id;
-	section.hidden = true;
 	section.setAttribute("aria-labelledby", `backstage-${id}-title`);
 	const heading = el(doc, "h1", "", title);
 	heading.id = `backstage-${id}-title`;
@@ -3638,31 +3537,55 @@ function page(doc, id, title, ...content) {
 	return section;
 }
 /**
+* Share with people: a live session (Yjs) between tabs and windows of this browser. The room name
+* is all a second window needs; nothing is uploaded.
+*/
+function share(doc) {
+	const panel = el(doc, "section", "share-panel");
+	panel.setAttribute("aria-labelledby", "share-title");
+	const title = el(doc, "h2", "", "Share with people");
+	title.id = "share-title";
+	const field = el(doc, "label", "share-field");
+	const room = el(doc, "input", "share-room");
+	room.type = "text";
+	room.maxLength = 64;
+	room.autocomplete = "off";
+	room.spellcheck = false;
+	field.append(el(doc, "span", "", "Session name"), room);
+	const buttons = el(doc, "div", "share-buttons");
+	const start = el(doc, "button", "share-start", "Start sharing");
+	start.type = "button";
+	start.dataset.share = "start";
+	const stop = el(doc, "button", "share-stop", "Stop sharing");
+	stop.type = "button";
+	stop.dataset.share = "stop";
+	stop.hidden = true;
+	buttons.append(start, stop);
+	const status = el(doc, "p", "share-status");
+	status.setAttribute("role", "status");
+	const people = doc.createElement("office-ui-presence");
+	people.className = "share-people";
+	people.setAttribute("label", "People in this session");
+	panel.append(title, el(doc, "p", "", "Edit this drawing together with other windows of this browser. Open the same session name in another window to join."), field, buttons, status, people, el(doc, "p", "backstage-muted", "The whole drawing is shared; when two people change it at once, the last change wins. Nothing leaves this device."));
+	return panel;
+}
+/** Visio's Account page: the shared Office profile editor and product information. */
+function account(doc) {
+	const profile = doc.createElement("office-ui-account");
+	const product = el(doc, "section", "backstage-product");
+	product.append(el(doc, "h2", "", "Product Information"), el(doc, "p", "", "Visio viewer (beta). No sign-in or subscription is used."), el(doc, "p", "backstage-muted", LOCAL));
+	profile.append(product);
+	return profile;
+}
+/**
 * Visio's backstage: a full-window File view with a navigation column and one page per item.
 * Static application structure only; document values are filled in later as text.
 */
 function createBackstage(doc) {
-	const root = el(doc, "div", "backstage");
-	root.hidden = true;
-	root.setAttribute("role", "dialog");
-	root.setAttribute("aria-modal", "true");
-	root.setAttribute("aria-label", "File");
-	const nav = el(doc, "nav", "backstage-nav");
-	nav.setAttribute("aria-label", "File");
-	const back = el(doc, "button", "backstage-back", "←");
-	back.type = "button";
-	back.dataset.backstage = "back";
-	back.setAttribute("aria-label", "Back to the drawing");
-	back.title = "Back (Esc)";
-	const item = ([id, label]) => {
-		const button = el(doc, "button", "backstage-item", label);
-		button.type = "button";
-		button.dataset.backstageItem = id;
-		return button;
-	};
-	const footer = el(doc, "div", "backstage-footer");
-	footer.append(...BACKSTAGE_FOOTER.map(item));
-	nav.append(back, ...BACKSTAGE_ITEMS.map(item), footer);
+	const root = doc.createElement("office-ui-backstage");
+	root.className = "backstage";
+	root.setAttribute("back-label", "Back to the drawing");
+	root.items = backstageItems();
 	const facts = el(doc, "dl", "backstage-facts");
 	for (const [key, label] of [
 		["pages", "Pages"],
@@ -3688,67 +3611,61 @@ function createBackstage(doc) {
 	input.accept = ".vsdx,.vsd";
 	input.hidden = true;
 	input.setAttribute("aria-label", "Choose a Visio drawing");
-	const preview = el(doc, "div", "backstage-print-preview");
-	preview.setAttribute("aria-label", "Print preview of the current page");
-	const body = el(doc, "div", "backstage-body");
-	body.append(page(doc, "info", "Info", file, facts, notes), page(doc, "new", "New", templates), page(doc, "open", "Open", action(doc, "open", "Browse", "Open a .vsdx drawing or a legacy .vsd preview from this device."), input, el(doc, "p", "backstage-muted", `Recent drawings are not tracked. ${LOCAL}`)), page(doc, "save-as", "Save As", action(doc, "download", "Download a copy", "Save the drawing, with your edits, as a .vsdx file."), action(doc, "export-svg", "Export the current page as SVG", "An approximate picture with compatibility notes.")), page(doc, "print", "Print", action(doc, "print", "Print", "Print the current page."), preview), page(doc, "share", "Share", action(doc, "share", "Share with people", "Invite people to the drawing.", LOCAL), action(doc, "email", "Email", "Send the drawing as an attachment.", LOCAL)), page(doc, "export", "Export", action(doc, "export-svg", "Export the current page as SVG", "An approximate picture with compatibility notes."), action(doc, "export-pdf", "Create PDF/XPS Document", "A fixed-layout document.", "Needs PDF output."), action(doc, "change-type", "Change File Type", "Save in another Visio format.", "Needs core format conversion.")), page(doc, "account", "Account", el(doc, "p", "backstage-muted", `No account is used. ${LOCAL}`)), page(doc, "feedback", "Feedback", el(doc, "p", "backstage-muted", "Feedback is not collected by this viewer.")), page(doc, "options", "Options", el(doc, "p", "backstage-muted", "Visio Options are not available in this viewer.")));
-	root.append(nav, body);
+	const preview = doc.createElement("office-ui-print-preview");
+	preview.className = "backstage-print-preview";
+	preview.setAttribute("label", "Print preview of the current page");
+	preview.setAttribute("empty-label", "Open a drawing to print it.");
+	root.append(page(doc, "info", "Info", file, facts, notes), page(doc, "new", "New", templates), page(doc, "open", "Open", action(doc, "open", "Browse", "Open a .vsdx drawing or a legacy .vsd preview from this device."), input, el(doc, "p", "backstage-muted", `Recent drawings are not tracked. ${LOCAL}`)), page(doc, "save-as", "Save As", action(doc, "download", "Download a copy", "Save the drawing, with your edits, as a .vsdx file."), action(doc, "export-svg", "Export the current page as SVG", "An approximate picture with compatibility notes.")), page(doc, "print", "Print", action(doc, "print", "Print", "Print the current page."), preview), page(doc, "share", "Share", share(doc), action(doc, "email", "Email", "Send the drawing as an attachment.", LOCAL)), page(doc, "export", "Export", action(doc, "export-svg", "Export the current page as SVG", "An approximate picture with compatibility notes."), action(doc, "export-pdf", "Create PDF/XPS Document", "A fixed-layout document.", "Needs PDF output."), action(doc, "change-type", "Change File Type", "Save in another Visio format.", "Needs core format conversion.")), page(doc, "account", "Account", account(doc)), page(doc, "feedback", "Feedback", el(doc, "p", "backstage-muted", "Feedback is not collected by this viewer.")));
 	return root;
 }
 //#endregion
 //#region src/viewer-backstage.ts
-/**
-* Visio's File backstage: opened from the File tab, closed with Back or Escape (focus returns to
-* File). Open, Save, Save As, Export, Print and Close are real; the rest is shown disabled.
-*/
 var ViewerBackstage = class {
 	host;
 	#root;
-	#file;
+	#ribbon;
 	#input;
 	#state;
+	#items = "";
 	#urls = /* @__PURE__ */ new Set();
 	constructor(host) {
 		this.host = host;
-		this.#root = host.root.querySelector(".backstage");
-		this.#file = host.root.querySelector(".file-tab");
+		this.#root = host.root.querySelector("office-ui-backstage");
+		this.#ribbon = host.root.querySelector("office-ui-ribbon");
 		this.#input = this.#root.querySelector(".backstage-file-input");
 	}
 	get open() {
-		return !this.#root.hidden;
+		return this.#root.open;
 	}
 	show(page = "info") {
-		this.#root.hidden = false;
-		this.#file.setAttribute("aria-expanded", "true");
-		this.#select(page);
-		this.#root.querySelector(`[data-backstage-item="${page}"]`)?.focus();
+		this.#ribbon.setAttribute("file-expanded", "true");
+		this.#root.show(page);
+		if (page === "print") this.#preview();
 	}
 	hide() {
-		if (!this.open) return;
-		this.#root.hidden = true;
-		this.#file.setAttribute("aria-expanded", "false");
-		this.#file.focus();
+		this.#root.close();
 	}
 	wire() {
 		const events = new ((this.host.root.ownerDocument.defaultView?.AbortController) ?? AbortController)();
 		const options = { signal: events.signal };
-		this.#file.addEventListener("click", () => this.open ? this.hide() : this.show(), options);
+		this.#ribbon.addEventListener("office-ribbon-file", () => this.open ? this.hide() : this.show(), options);
+		this.#root.addEventListener("office-backstage-select", (event) => {
+			const id = event.detail.id;
+			if (id === "save") this.#download();
+			else if (id === "close") this.#close();
+			else if (id === "options") {
+				this.hide();
+				this.host.showOptions();
+			} else if (id === "print") this.#preview();
+		}, options);
+		this.#root.addEventListener("office-backstage-close", () => {
+			this.#ribbon.setAttribute("file-expanded", "false");
+			this.#ribbon.focusFile();
+		}, options);
 		this.#root.addEventListener("click", (event) => {
-			const target = event.target;
-			if (target.closest?.("[data-backstage=\"back\"]")) return this.hide();
-			const item = target.closest?.("[data-backstage-item]")?.dataset.backstageItem;
-			if (item === "save") return this.#download();
-			if (item === "close") return this.#close();
-			if (item) return this.#select(item);
-			const action = target.closest?.("[data-backstage-action]");
+			const action = event.target.closest?.("[data-backstage-action]");
 			if (action && !action.disabled) this.#run(action.dataset.backstageAction);
 		}, options);
-		this.#root.addEventListener("keydown", (event) => {
-			if (event.key !== "Escape") return;
-			event.preventDefault();
-			event.stopPropagation();
-			this.hide();
-		}, options);
 		this.#input.addEventListener("change", () => {
 			const file = this.#input.files?.[0];
 			this.#input.value = "";
@@ -3762,11 +3679,6 @@ var ViewerBackstage = class {
 			this.#urls.clear();
 		};
 	}
-	#select(page) {
-		for (const item of this.#root.querySelectorAll("[data-backstage-item]")) item.toggleAttribute("aria-current", item.dataset.backstageItem === page);
-		for (const section of this.#root.querySelectorAll("[data-backstage-page]")) section.hidden = section.dataset.backstagePage !== page;
-		if (page === "print") this.#preview();
-	}
 	#run(action) {
 		if (action === "open") this.#input.click();
 		else if (action === "download") this.#download();
@@ -3816,14 +3728,11 @@ var ViewerBackstage = class {
 			this.host.announce(error instanceof Error ? error.message : String(error));
 		}
 	}
-	/** Preview is a DOM clone of the rendered page, never document markup parsed from text. */
+	/** The shared print preview shows an inert clone of the rendered page, never parsed markup. */
 	#preview() {
-		const target = this.#root.querySelector(".backstage-print-preview");
+		const preview = this.#root.querySelector("office-ui-print-preview");
 		const paper = this.host.viewport.querySelector("svg.paper");
-		target.replaceChildren(...paper ? [paper.cloneNode(true)] : []);
-		const clone = target.querySelector("svg");
-		clone?.removeAttribute("style");
-		clone?.querySelectorAll("[tabindex]").forEach((node) => node.removeAttribute("tabindex"));
+		preview.pages = paper ? [paper] : [];
 	}
 	#print() {
 		const doc = this.host.root.ownerDocument;
@@ -3867,13 +3776,24 @@ var ViewerBackstage = class {
 		this.#root.querySelector(".backstage-note-count").textContent = notes ? `${notes} compatibility notes describe what this viewer approximates or omits.` : "No compatibility notes.";
 		const busy = state.loading || state.edit.busy;
 		const saveReason = state.document?.format === "vsd" ? "Legacy VSD drawings are read only here." : "Open a .vsdx file to save a copy.";
-		for (const node of this.#root.querySelectorAll("[data-backstage-action=\"download\"], [data-backstage-item=\"save\"]")) {
-			node.disabled = !state.edit.sourceAvailable || busy;
-			node.title = node.disabled ? saveReason : "";
+		const saveDisabled = !state.edit.sourceAvailable || busy;
+		const download = this.#root.querySelector("[data-backstage-action=\"download\"]");
+		download.disabled = saveDisabled;
+		download.title = saveDisabled ? saveReason : "";
+		const items = backstageItems({
+			save: {
+				disabled: saveDisabled,
+				...saveDisabled ? { title: saveReason } : {}
+			},
+			close: { disabled: !state.document }
+		});
+		const key = JSON.stringify(items);
+		if (key !== this.#items) {
+			this.#items = key;
+			this.#root.items = items;
 		}
 		for (const node of this.#root.querySelectorAll("[data-backstage-action=\"export-svg\"], [data-backstage-action=\"print\"]")) node.disabled = !page || busy;
 		this.#root.querySelector("[data-backstage-action=\"notes\"]").disabled = notes === 0;
-		this.#root.querySelector("[data-backstage-item=\"close\"]").disabled = !state.document;
 	}
 };
 //#endregion
@@ -4215,6 +4135,396 @@ var ViewerPanZoom = class {
 	}
 };
 //#endregion
+//#region src/viewer-options.ts
+var disabled = (reason) => ({ disabled: `Not available yet. ${reason}` });
+/**
+* Visio's File > Options categories, in Visio's order. Only User name and Initials are honoured
+* today (they are the local profile, also used as the identity in a shared session); every other
+* setting is shown disabled with the capability it is waiting for.
+*/
+var VISIO_OPTION_CATEGORIES = [
+	{
+		id: "general",
+		label: "General",
+		description: "General options for working with Visio.",
+		sections: [{
+			id: "ui",
+			title: "User Interface options",
+			controls: [
+				{
+					kind: "toggle",
+					key: "miniToolbar",
+					label: "Show Mini Toolbar on selection",
+					...disabled("Needs rich text formatting.")
+				},
+				{
+					kind: "toggle",
+					key: "livePreview",
+					label: "Enable Live Preview",
+					...disabled("Needs Quick Styles and themes.")
+				},
+				{
+					kind: "select",
+					key: "screenTips",
+					label: "ScreenTip style",
+					choices: [{
+						value: "descriptions",
+						label: "Show feature descriptions in ScreenTips"
+					}],
+					...disabled("ScreenTips always describe the command.")
+				}
+			]
+		}, {
+			id: "personalize",
+			title: "Personalize your copy of Microsoft Office",
+			description: "Stored on this device only. Shared sessions show this name to others.",
+			controls: [{
+				kind: "text",
+				key: "userName",
+				label: "User name",
+				maxLength: 64
+			}, {
+				kind: "text",
+				key: "userInitials",
+				label: "Initials",
+				maxLength: 2
+			}]
+		}]
+	},
+	{
+		id: "proofing",
+		label: "Proofing",
+		description: "Change how Visio corrects and formats your text.",
+		disabled: "Not available yet. Spelling and AutoCorrect need rich text editing.",
+		sections: []
+	},
+	{
+		id: "save",
+		label: "Save",
+		description: "Customize how drawings are saved.",
+		disabled: "Not available yet. Drawings are saved as downloaded copies; AutoRecover is not kept.",
+		sections: []
+	},
+	{
+		id: "language",
+		label: "Language",
+		description: "Set the Office Language Preferences.",
+		disabled: "Not available yet. The viewer is English only.",
+		sections: []
+	},
+	{
+		id: "advanced",
+		label: "Advanced",
+		description: "Advanced options for working with Visio.",
+		sections: [{
+			id: "editing",
+			title: "Editing options",
+			controls: [{
+				kind: "number",
+				key: "undoLevels",
+				label: "Number of undo levels",
+				min: 1,
+				max: 99,
+				...disabled("The history depth is fixed.")
+			}, {
+				kind: "toggle",
+				key: "autoSizeText",
+				label: "Auto-size text while editing",
+				...disabled("Needs core text layout.")
+			}]
+		}]
+	},
+	{
+		id: "ribbon",
+		label: "Customize Ribbon",
+		description: "Customize the Ribbon and keyboard shortcuts.",
+		disabled: "Not available yet. The ribbon layout is fixed.",
+		sections: []
+	},
+	{
+		id: "qat",
+		label: "Quick Access Toolbar",
+		description: "Customize the Quick Access Toolbar.",
+		disabled: "Not available yet. The Quick Access Toolbar shows Undo and Redo.",
+		sections: []
+	},
+	{
+		id: "add-ins",
+		label: "Add-ins",
+		description: "View and manage Microsoft Office Add-ins.",
+		disabled: "Not available. Add-ins and macros never run in this viewer.",
+		sections: []
+	},
+	{
+		id: "trust",
+		label: "Trust Center",
+		description: "Help keep your documents safe and your computer secure and healthy.",
+		disabled: "Not available. Documents stay local and active content is never run.",
+		sections: []
+	}
+];
+function profileValues(profile) {
+	return {
+		miniToolbar: false,
+		livePreview: false,
+		screenTips: "descriptions",
+		undoLevels: 20,
+		autoSizeText: false,
+		userName: profile.displayName,
+		userInitials: profile.initial ?? ""
+	};
+}
+/** The Options dialog element. Built once and appended to the viewer's shadow root. */
+function createOptionsDialog(doc) {
+	const dialog = doc.createElement("office-ui-options-dialog");
+	dialog.setAttribute("heading", "Visio Options");
+	dialog.categories = VISIO_OPTION_CATEGORIES;
+	return dialog;
+}
+/**
+* File > Account and File > Options share one local profile. Edits in either are written to the
+* suite-wide profile store, mirrored into the other and reported through `onProfile`.
+*/
+var ViewerProfile = class {
+	onProfile;
+	#profile = readOfficeProfile();
+	#dialog;
+	#account;
+	constructor(root, onProfile = () => {}) {
+		this.onProfile = onProfile;
+		this.#dialog = root.querySelector("office-ui-options-dialog");
+		this.#account = root.querySelector("office-ui-account");
+		this.#sync();
+	}
+	get profile() {
+		return { ...this.#profile };
+	}
+	/** Open Visio Options, on General as Visio does. */
+	showOptions(category = "general") {
+		this.#dialog.values = profileValues(this.#profile);
+		this.#dialog.category = category;
+		this.#dialog.show();
+	}
+	wire() {
+		const events = new ((this.#dialog.ownerDocument.defaultView?.AbortController) ?? AbortController)();
+		const options = { signal: events.signal };
+		this.#dialog.addEventListener("office-options-change", (event) => {
+			const { values } = event.detail;
+			const initial = String(values.userInitials ?? "").trim();
+			this.#update({
+				displayName: String(values.userName ?? "").trim(),
+				avatarColor: this.#profile.avatarColor,
+				...initial ? { initial } : {}
+			});
+		}, options);
+		this.#account?.addEventListener("office-profile-change", (event) => this.#update(event.detail.profile), options);
+		return () => events.abort();
+	}
+	#update(profile) {
+		this.#profile = sanitizeOfficeProfile(profile);
+		writeOfficeProfile(this.#profile);
+		this.#sync();
+		this.onProfile(this.profile);
+	}
+	#sync() {
+		if (this.#account) this.#account.profile = this.#profile;
+		this.#dialog.values = profileValues(this.#profile);
+	}
+};
+//#endregion
+//#region src/viewer-share.ts
+/** Room names the core accepts: 1-64 letters, digits, hyphens or underscores. */
+var ROOM = /^[A-Za-z0-9_-]{1,64}$/;
+/**
+* File > Share: a live session over `ooxml-core/collab` (Yjs). Peers in other windows of this
+* browser share the whole VSDX package through a BroadcastChannel; remote changes arrive as one
+* undoable history step. The collab runtime loads only when sharing starts.
+*/
+var ViewerShare = class {
+	controller;
+	profile;
+	loadCollab;
+	#panel;
+	#room;
+	#start;
+	#stop;
+	#status;
+	#people;
+	#session = null;
+	#teardown = null;
+	#revision = 0;
+	/** The package this window last published or adopted, to skip repeats of it. */
+	#last = null;
+	#adopting = false;
+	#pending = null;
+	#starting = false;
+	constructor(root, controller, profile, loadCollab = () => import("ooxml-core/collab")) {
+		this.controller = controller;
+		this.profile = profile;
+		this.loadCollab = loadCollab;
+		this.#panel = root.querySelector(".share-panel");
+		this.#room = this.#panel.querySelector(".share-room");
+		this.#start = this.#panel.querySelector("[data-share=\"start\"]");
+		this.#stop = this.#panel.querySelector("[data-share=\"stop\"]");
+		this.#status = this.#panel.querySelector(".share-status");
+		this.#people = this.#panel.querySelector("office-ui-presence");
+		this.#room.value = `visio-${Math.random().toString(36).slice(2, 8)}`;
+	}
+	get active() {
+		return this.#session !== null;
+	}
+	wire() {
+		const events = new ((this.#panel.ownerDocument.defaultView?.AbortController) ?? AbortController)();
+		this.#panel.addEventListener("click", (event) => {
+			const action = event.target.closest?.("[data-share]");
+			if (action?.dataset.share === "start") this.start(this.#room.value.trim());
+			if (action?.dataset.share === "stop") this.stop();
+		}, { signal: events.signal });
+		return () => {
+			events.abort();
+			this.stop();
+		};
+	}
+	async start(roomId) {
+		if (this.#session || this.#starting) return;
+		if (!ROOM.test(roomId)) return this.#say("Use 1 to 64 letters, digits, hyphens or underscores for the session name.");
+		this.#starting = true;
+		this.#render();
+		try {
+			const collab = await this.loadCollab();
+			if (!collab.canBroadcast()) return this.#say("Sharing needs BroadcastChannel, which this browser does not provide.");
+			this.#join(collab, roomId);
+		} catch (error) {
+			this.#say(error instanceof Error ? error.message : String(error));
+		} finally {
+			this.#starting = false;
+			this.#render();
+		}
+	}
+	stop() {
+		this.#teardown?.();
+		this.#teardown = null;
+		this.#session?.destroy();
+		this.#session = null;
+		this.#pending = null;
+		this.#revision = 0;
+		this.#last = null;
+		this.#people.participants = [];
+		this.#say("Not sharing.");
+		this.#render();
+	}
+	#join(collab, roomId) {
+		const adapter = collab.packageAdapter();
+		const me = this.profile();
+		const session = collab.createCollabSession({
+			roomId: `visio-${roomId}`,
+			provider: collab.transportProvider({ transport: collab.createBroadcastTransport({ roomId: `visio-${roomId}` }) }),
+			user: {
+				name: me.displayName || "Visio user",
+				color: me.avatarColor
+			},
+			teardown: true
+		});
+		this.#session = session;
+		const publish = () => {
+			const bytes = this.#localBytes();
+			if (!bytes || !session.canWrite()) return;
+			adapter.write(session.doc, {
+				bytes,
+				revision: this.#revision
+			}, collab.LOCAL_ORIGIN);
+			this.#revision = adapter.read(session.doc).revision;
+			this.#last = bytes;
+		};
+		const adopt = () => {
+			if (adapter.isEmpty(session.doc)) return;
+			const model = adapter.read(session.doc);
+			if (model.revision < this.#revision) return;
+			if (model.revision === this.#revision && same(model.bytes, this.#last)) return;
+			this.#revision = model.revision;
+			this.#last = model.bytes;
+			this.#apply(model.bytes);
+		};
+		const map = session.doc.getMap("package");
+		const observer = (_event, transaction) => {
+			if (transaction.origin !== collab.LOCAL_ORIGIN) adopt();
+		};
+		map.observe(observer);
+		const settle = () => adapter.isEmpty(session.doc) ? publish() : adopt();
+		const stopReady = session.on("ready", settle);
+		const stopPeers = session.on("peers", (peers) => this.#showPeers(peers));
+		const stopEvents = this.controller.onEvent((name, detail) => {
+			if (name === "document-change" && detail.kind !== "remote") publish();
+			if (name === "document-load" && !this.#adopting) publish();
+		});
+		const stopState = this.controller.subscribe((state) => this.#flush(state));
+		this.#teardown = () => {
+			map.unobserve(observer);
+			stopReady();
+			stopPeers();
+			stopEvents();
+			stopState();
+		};
+		if (session.canWrite()) settle();
+		this.#showPeers(session.peers());
+		this.#say(`Sharing as ${me.displayName || "Visio user"} in session ${roomId}.`);
+	}
+	#localBytes() {
+		const { edit, loading } = this.controller.state;
+		if (!edit.sourceAvailable || edit.busy || loading) return null;
+		try {
+			return this.controller.exportVsdx().bytes;
+		} catch {
+			return null;
+		}
+	}
+	#apply(bytes) {
+		const { edit, loading, document } = this.controller.state;
+		if (edit.busy || loading) {
+			this.#pending = bytes;
+			return;
+		}
+		this.#pending = null;
+		const done = (error) => {
+			this.#adopting = false;
+			if (error) this.#say(error instanceof Error ? error.message : String(error));
+		};
+		this.#adopting = true;
+		(document && edit.sourceAvailable ? this.controller.applyRemoteSource(bytes) : this.controller.load(bytes)).then(() => done(), done);
+	}
+	#flush(state) {
+		if (this.#pending && !state.edit.busy && !state.loading) this.#apply(this.#pending);
+	}
+	#showPeers(peers) {
+		const me = this.profile();
+		this.#people.participants = [{
+			id: "self",
+			name: me.displayName || "Visio user",
+			color: me.avatarColor,
+			self: true
+		}, ...peers.map((peer) => ({
+			id: String(peer.clientId),
+			name: peer.userName,
+			color: peer.userColor
+		}))];
+	}
+	#say(message) {
+		this.#status.textContent = message;
+	}
+	#render() {
+		const active = this.active;
+		this.#start.hidden = active;
+		this.#stop.hidden = !active;
+		this.#start.disabled = this.#starting;
+		this.#room.disabled = active || this.#starting;
+	}
+};
+function same(a, b) {
+	if (!b || a.byteLength !== b.byteLength) return false;
+	for (let i = 0; i < a.byteLength; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
+//#endregion
 //#region src/edit-error.ts
 /** Core error codes remain visible for a refused transaction; document content is plain text. */
 function editErrorMessage(error) {
@@ -4445,12 +4755,6 @@ function wireStencil(pane, viewport, controller, announce) {
 }
 //#endregion
 //#region src/viewer-ruler.ts
-/**
-* Visio's rulers: inch scales along the top and left of the drawing window with 0 at the page's
-* left and bottom edges (vertical values grow upward, as in Visio). Viewer-only presentation:
-* nothing is read from or written to the document beyond the rendered page box.
-*/
-var SIZE = 18;
 /** Wraps the viewport in a grid with a corner, a top ruler and a left ruler. */
 function createRulers(viewport) {
 	const doc = viewport.ownerDocument;
@@ -4458,79 +4762,35 @@ function createRulers(viewport) {
 	area.className = "canvas-area";
 	const corner = doc.createElement("div");
 	corner.className = "ruler-corner";
-	const top = doc.createElement("canvas");
+	corner.setAttribute("aria-hidden", "true");
+	const top = doc.createElement("office-ui-ruler");
 	top.className = "ruler ruler-h";
-	const left = doc.createElement("canvas");
+	const left = doc.createElement("office-ui-ruler");
 	left.className = "ruler ruler-v";
-	for (const ruler of [
-		corner,
-		top,
-		left
-	]) ruler.setAttribute("aria-hidden", "true");
+	left.setAttribute("orientation", "vertical");
+	left.setAttribute("direction", "reverse");
 	viewport.replaceWith(area);
 	area.append(corner, top, left, viewport);
 	let visible = false;
 	let zoom = 1;
 	let frame = 0;
-	const draw = () => {
+	const place = () => {
 		frame = 0;
 		if (!visible) return;
 		const paper = viewport.querySelector("svg.paper");
-		const ratio = doc.defaultView?.devicePixelRatio ?? 1;
-		const ink = (doc.defaultView?.getComputedStyle(area))?.getPropertyValue("--_vv-muted").trim() || "#605e5c";
+		if (!paper) return;
 		const base = viewport.getBoundingClientRect();
-		const page = paper?.getBoundingClientRect();
-		const inch = 96 * zoom;
-		const divisions = inch >= 192 ? 16 : inch >= 96 ? 8 : inch >= 48 ? 4 : 2;
-		const paint = (canvas, horizontal) => {
-			const length = horizontal ? base.width : base.height;
-			canvas.width = Math.max(1, Math.round(length * ratio));
-			canvas.height = Math.round(SIZE * ratio);
-			if (!horizontal) [canvas.width, canvas.height] = [canvas.height, canvas.width];
-			const context = canvas.getContext?.("2d");
-			if (!context || !page) return;
-			context.scale(ratio, ratio);
-			context.strokeStyle = ink;
-			context.fillStyle = ink;
-			context.lineWidth = 1;
-			context.font = "9px \"Segoe UI\", Arial, sans-serif";
-			const origin = horizontal ? page.left - base.left : page.bottom - base.top;
-			const step = inch / divisions;
-			const first = Math.floor((horizontal ? -origin : origin - length) / step) - 1;
-			const last = Math.ceil((horizontal ? length - origin : origin) / step) + 1;
-			context.beginPath();
-			for (let index = first; index <= last; index++) {
-				const position = horizontal ? origin + index * step : origin - index * step;
-				const tick = index % divisions === 0 ? SIZE : index % (divisions / 2) === 0 ? SIZE * .5 : SIZE * .3;
-				const at = Math.round(position) + .5;
-				if (horizontal) {
-					context.moveTo(at, SIZE);
-					context.lineTo(at, SIZE - tick);
-				} else {
-					context.moveTo(SIZE, at);
-					context.lineTo(SIZE - tick, at);
-				}
-				if (index % divisions === 0) {
-					const label = String(index / divisions);
-					if (horizontal) context.fillText(label, at + 2, 9);
-					else {
-						context.save();
-						context.translate(9, at - 2);
-						context.rotate(-Math.PI / 2);
-						context.fillText(label, 0, 0);
-						context.restore();
-					}
-				}
-			}
-			context.stroke();
-		};
-		paint(top, true);
-		paint(left, false);
+		const page = paper.getBoundingClientRect();
+		const scale = String(96 * zoom);
+		top.setAttribute("scale", scale);
+		left.setAttribute("scale", scale);
+		top.setAttribute("origin", String(page.left - base.left));
+		left.setAttribute("origin", String(page.bottom - base.top));
 	};
 	const schedule = () => {
 		if (!visible || frame) return;
-		frame = doc.defaultView?.requestAnimationFrame?.(draw) ?? 0;
-		if (!frame) draw();
+		frame = doc.defaultView?.requestAnimationFrame?.(place) ?? 0;
+		if (!frame) place();
 	};
 	return {
 		element: area,
@@ -4914,8 +5174,6 @@ var ViewerChrome = class {
 		this.#root.addEventListener("click", (event) => {
 			const button = event.target?.closest?.("button");
 			if (!button || button.disabled) return;
-			const tab = button.dataset.tab;
-			if (tab) this.showTab(tab);
 			const action = button.dataset.chrome;
 			if (action === "inspector" || action === "shapes") this.togglePane(action);
 			if (action === "notes") this.reveal("notes");
@@ -4931,33 +5189,13 @@ var ViewerChrome = class {
 			event.stopPropagation();
 			this.#controller.setPage(Number(index));
 		}, options);
-		this.#root.addEventListener("keydown", (event) => {
-			const key = event;
-			const button = event.target?.closest?.("button");
-			if (!button?.dataset.tab || ![
-				"ArrowLeft",
-				"ArrowRight",
-				"Home",
-				"End"
-			].includes(key.key)) return;
-			key.preventDefault();
-			const tabs = [...this.#root.querySelectorAll("[data-tab]")];
-			const index = tabs.indexOf(button);
-			const next = key.key === "Home" ? tabs[0] : key.key === "End" ? tabs.at(-1) : tabs[(index + (key.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length];
-			if (!next?.dataset.tab) return;
-			this.showTab(next.dataset.tab);
-			next.focus();
-		}, options);
+		this.#root.addEventListener("office-ribbon-select", () => this.closeCompactTools(), options);
 		this.#notes.addEventListener("toggle", () => this.#syncNotes(), options);
 		return () => events.abort();
 	}
 	showTab(tab) {
-		for (const button of this.#root.querySelectorAll("[data-tab]")) {
-			const selected = button.dataset.tab === tab;
-			button.setAttribute("aria-selected", String(selected));
-			button.tabIndex = selected ? 0 : -1;
-		}
-		for (const panel of this.#root.querySelectorAll(".ribbon-content")) panel.hidden = panel.id !== `${tab}-panel`;
+		const ribbon = this.#root.querySelector("office-ui-ribbon");
+		if (ribbon) ribbon.selected = tab;
 	}
 	/** On phones, close the Tools sheet once a command runs. */
 	closeCompactTools() {
@@ -6204,6 +6442,7 @@ var VISIO_ICONS = {
 function registerViewerControls(registry) {
 	for (const [name, path] of Object.entries(VISIO_ICONS)) if (!getIcon(name)) registerIcon(name, path);
 	registerControls(registry);
+	definePresence(registry);
 }
 //#endregion
 //#region src/export-svg.ts
@@ -6823,6 +7062,8 @@ var VisioViewerElement = class extends BaseElement {
 	#rulers;
 	#canvas;
 	#panZoom;
+	#profile;
+	#share;
 	#backstage;
 	#fileName = "";
 	#loadToken = 0;
@@ -6831,7 +7072,6 @@ var VisioViewerElement = class extends BaseElement {
 	#diagnostics;
 	#toolbar;
 	#chrome;
-	#search;
 	#edit;
 	#layers;
 	#notes;
@@ -6857,7 +7097,7 @@ var VisioViewerElement = class extends BaseElement {
 		workspace.before(ribbon, this.#findBar);
 		workspace.prepend(createShapesStrip(document), createShapesWindow(document));
 		workspace.append(createPanZoom(document));
-		this.#root.append(createBackstage(document), ...createContextMenus(document));
+		this.#root.append(createBackstage(document), createOptionsDialog(document), ...createContextMenus(document));
 		workspace.after(createPageTabs(document), createStatusBar(document));
 		this.#viewport = this.#root.querySelector(".viewport");
 		this.#rulers = createRulers(this.#viewport);
@@ -6866,7 +7106,6 @@ var VisioViewerElement = class extends BaseElement {
 		this.#status = this.#root.querySelector("[data-status]");
 		this.#diagnostics = this.#root.querySelector("[data-diagnostics]");
 		this.#toolbar = this.#root.querySelector(".toolbar");
-		this.#search = searchControls(this.#root);
 		this.#edit = new ViewerEditControls(this.#root, this.controller);
 		this.#layers = this.#root.querySelector(".layer-controls");
 		this.#notes = this.#root.querySelector(".notes ul");
@@ -6884,15 +7123,15 @@ var VisioViewerElement = class extends BaseElement {
 			togglePanZoom: () => this.#panZoom.toggle(),
 			focusSearch: () => {
 				this.#chrome.closeCompactTools();
-				this.#findBar.hidden = false;
-				this.#search.input.focus();
-				this.#search.input.select();
+				this.#findBar.show();
 			},
 			announce: (message) => {
 				this.#announcement = message;
 				this.#status.textContent = message;
 			}
 		});
+		this.#profile = new ViewerProfile(this.#root);
+		this.#share = new ViewerShare(this.#root, this.controller, () => this.#profile.profile);
 		this.#backstage = new ViewerBackstage({
 			root: this.#root,
 			viewport: this.#viewport,
@@ -6905,6 +7144,7 @@ var VisioViewerElement = class extends BaseElement {
 				this.controller.setDocument(null);
 			},
 			revealNotes: () => this.#chrome.reveal("notes"),
+			showOptions: () => this.#profile.showOptions(),
 			announce: (message) => {
 				this.#announcement = message;
 				this.#status.textContent = message;
@@ -7082,19 +7322,19 @@ var VisioViewerElement = class extends BaseElement {
 		const disposeTellMe = wireTellMe(this.#root);
 		const keyTips = attachKeyTips(this.#root);
 		const disposePanZoom = this.#panZoom.wire();
+		const disposeProfile = this.#profile.wire();
+		const disposeShare = this.#share.wire();
 		const disposeRulers = this.#rulers.wire();
 		const disposeStencil = wireStencil(this.#root.querySelector(".shapes-pane"), this.#viewport, this.controller, (message) => {
 			this.#announcement = message;
 			this.#status.textContent = message;
 		});
-		const disposeFind = wireFindBar(this.#findBar, this.#search.input, () => this.#viewport.focus({ preventScroll: true }));
+		const disposeFind = wireFindBar(this.#findBar, this.controller, () => this.#viewport.focus({ preventScroll: true }));
 		const disposeEdit = this.#edit.wire();
 		const disposeLayers = wireLayerControls(this.#layers, this.controller);
 		const disposeInputs = wireViewerInputs({
 			viewport: this.#viewport,
-			commandRoot: this.#root,
-			zoomSlider: this.#zoomSlider,
-			searchInput: this.#search.input
+			zoomSlider: this.#zoomSlider
 		}, this.controller, (mode) => this.#fit(mode));
 		return () => {
 			disposeChrome();
@@ -7104,6 +7344,8 @@ var VisioViewerElement = class extends BaseElement {
 			disposeTellMe();
 			keyTips.dispose();
 			disposePanZoom();
+			disposeProfile();
+			disposeShare();
 			disposeRulers();
 			disposeStencil();
 			disposeFind();
@@ -7126,7 +7368,7 @@ var VisioViewerElement = class extends BaseElement {
 		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);
+		renderFindBar(this.#findBar, state);
 		this.#edit.render(state);
 		if (changed) renderLayerControls(this.#layers, state);
 		else this.#layers.querySelector("[data-layer-reset=\"all\"]").disabled = state.layerVisibilityOverrides.length === 0;