ooxml-ui 1.0.0 → 1.2.0

package/dist/visio.js

@@ -1,8 +1,9 @@
-import { attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-T3HB5LMH.js';
+import { themeBridge, installOfficeUiTheme } from './chunk-JAJFLFAV.js';
+import { attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-7FNDOWTX.js';
 import { getIcon, registerIcon } from './chunk-BOX43CZD.js';
-import { definePresence } from './chunk-OXKWNNNJ.js';
-import './chunk-ZV2Z4IWH.js';
-import './chunk-JFJXBYRD.js';
+import { definePresence } from './chunk-VUB44CAJ.js';
+import './chunk-YK2DPYMU.js';
+import './chunk-XNCWB2X6.js';
 import { FOREIGN_VECTOR_SCENE_LIMITS, EMPTY_TEXT_SEARCH, EMPTY_EDIT_STATE, assertViewableDocument, indexDocumentText, searchDocumentText, validateSearchQuery, MAX_INPUT_BYTES, DocumentHistory, snapshotEdits, ForeignVectorBudget, VISIO_IDENTITY_TRANSFORM, composeVisioTransform, compatibilityNotes, compatibilityText, visioGradientInstances, visioRenderedGradientStopCount, inspectForeignVectorResource, copySnapshotScene, editErrorMessage, eventKeys, propertyKeys, TEXT_SEARCH_LIMITS, isEditCancellation, visioPageInsertCommand, visioQuarterTurnCommand, visioLocalRotationShape, visioStraightLineHandles, visioPageEditToDrawing, textSearchStatus, visioRotationPreviewTransform, visioFillPatternTransform, visioRenderedGradientStops, visioStrokeGradient, visioNextShapeId } from 'ooxml-core/visio/ui';
 export { TEXT_SEARCH_LIMITS, compatibilityNotes, compatibilityText, demoDocument, eventKeys, propertyKeys } from 'ooxml-core/visio/ui';
 import { VISIO_VISIBILITY_LIMITS, loadVisio, getVisioPageLayers, resolveVisioPageVisibility, visioFilledArrow, layoutVisioFilledArrowLine, visioOpenArrowPath } from 'ooxml-core/visio';
@@ -886,10 +887,6 @@ function wireLayerControls(panel, controller) {
 // src/visio/styles.ts
 var viewerStyles = `
 :host {
-  --_vv-bg:var(--vv-background,#eceae8); --_vv-surface:var(--vv-surface,#fff);
-  --_vv-secondary:var(--vv-secondary,#f3f2f1); --_vv-ink:var(--vv-ink,#1f1f1f);
-  --_vv-muted:var(--vv-muted,#605e5c); --_vv-border:var(--vv-border,#e1dfdd);
-  --_vv-accent:var(--vv-accent,#3955a3); --_vv-accent-soft:var(--vv-accent-soft,rgba(57,85,163,.10));
   display:flex; flex-direction:column; min-width:0; min-height:320px; height:100%; overflow:hidden;
   color:var(--_vv-ink); background:var(--_vv-bg); font:12px/1.5 "Segoe UI",Arial,sans-serif; contain:layout;
 }
@@ -899,7 +896,7 @@ button,select,input,textarea { font:inherit; color:inherit; border:1px solid var
 button { cursor:pointer; }
 button:hover:enabled { background:var(--_vv-accent-soft); border-color:var(--_vv-accent); }
 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:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--_vv-focus); 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); }
 .spacer { flex:1; }
@@ -913,7 +910,7 @@ button[aria-pressed="true"] { color:var(--_vv-accent); background:var(--_vv-acce
 .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; }
 .viewport { position:relative; display:flex; flex-direction:column; flex:1; overflow:auto; min-width:0; min-height:0; padding:16px 4px; background:var(--_vv-bg); }
-.paper { display:block; flex:none; background:white; box-shadow:var(--vv-shadow,0 2px 8px rgb(0 0 0 / 14%)); margin:auto; }
+.paper { display:block; flex:none; background:white; box-shadow:var(--_vv-shadow); margin:auto; }
 .paper [data-shape-id] { cursor:pointer; }
 .paper [data-selected="true"] > [data-geometry] { stroke:var(--_vv-accent) !important; stroke-width:.025 !important; }
 .inspector-pane { flex:0 0 288px; width:288px; min-width:0; overflow:auto; border-left:1px solid var(--_vv-border); background:var(--_vv-secondary); }
@@ -939,11 +936,11 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
 .edit-controls label { display:block; margin-top:8px; }
 .edit-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
 .edit-actions button { font-size:11px; padding:3px 7px; }
-.edit-actions [data-edit="apply"]:enabled { background:var(--_vv-accent); border-color:var(--_vv-accent); color:var(--vv-accent-ink,#fff); }
+.edit-actions [data-edit="apply"]:enabled { background:var(--_vv-accent); border-color:var(--_vv-accent); color:var(--_vv-accent-ink); }
 .edit-controls [data-geometry] { min-width:0; margin:8px 0 0; padding:6px; border:1px solid var(--_vv-border); }
 .edit-controls [data-geometry-field] { display:block; width:100%; min-width:0; margin-top:4px; }
-.edit-controls [data-geometry-error] { color:var(--vv-danger,#b42318); }
-.edit-controls [data-edit-error] { color:var(--vv-danger,#b42318); }
+.edit-controls [data-geometry-error] { color:var(--_vv-danger); }
+.edit-controls [data-edit-error] { color:var(--_vv-danger); }
 .edit-controls [data-edit-diagnostics] { max-height:100px; overflow:auto; padding-left:16px; }
 .layer-controls [data-layer-list] { max-height:240px; overflow:auto; }
 .layer-controls fieldset { border:1px solid var(--_vv-border); margin:6px 0; padding:6px; min-width:0; }
@@ -1041,19 +1038,49 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
 `;
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/backstage.css?raw
-var backstage_default = "/* 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";
+var backstage_default = "/* 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-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";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/canvas.css?raw
-var canvas_default = "/*\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\n.paper [data-line-endpoint],\n.rotation-overlay [data-rotation-handle] {\n	fill: var(--_vv-accent);\n	stroke: white;\n	stroke-width: 1.5px;\n	cursor: crosshair;\n	touch-action: none;\n	pointer-events: all;\n}\n.paper .endpoint-preview,\n.paper .rotation-preview,\n.rotation-overlay .rotation-stem {\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 5 3;\n	pointer-events: none;\n}\n\n.rotation-overlay {\n	position: absolute;\n	z-index: 1;\n	pointer-events: none;\n}\n";
+var canvas_default = "/*\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) !important;\n	stroke-width: 0.04 !important;\n	stroke-dasharray: 0.08 0.05;\n}\n\n.paper [data-line-endpoint],\n.rotation-overlay [data-rotation-handle] {\n	fill: var(--_vv-accent);\n	stroke: white;\n	stroke-width: 1.5px;\n	cursor: crosshair;\n	touch-action: none;\n	pointer-events: all;\n}\n.paper .endpoint-preview,\n.paper .rotation-preview,\n.rotation-overlay .rotation-stem {\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 5 3;\n	pointer-events: none;\n}\n\n.rotation-overlay {\n	position: absolute;\n	z-index: 1;\n	pointer-events: none;\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/ribbon.css?raw
-var ribbon_default = "/*\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='ellipse'],\n.viewport[data-tool='ellipse'] .paper [data-shape-id],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='rectangle'] .paper [data-shape-id],\n.viewport[data-tool='line'],\n.viewport[data-tool='line'] .paper [data-shape-id] {\n	cursor: crosshair;\n}\n.viewport[data-tool='ellipse'],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='line'] {\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";
+var ribbon_default = "/*\n * Microsoft Visio ribbon layout on the shared ooxml-ui controls. The shared --office-* tokens come\n * from the bridge in styles/theme.ts. Loaded after the legacy styles.ts.\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='ellipse'],\n.viewport[data-tool='ellipse'] .paper [data-shape-id],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='rectangle'] .paper [data-shape-id],\n.viewport[data-tool='line'],\n.viewport[data-tool='line'] .paper [data-shape-id] {\n	cursor: crosshair;\n}\n.viewport[data-tool='ellipse'],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='line'] {\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";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/shapes.css?raw
 var shapes_default = "/* 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: '\u203A';\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";
 
+// src/visio/styles/theme.ts
+var visioThemeAliases = `:host {
+  --_vv-bg:var(--vv-background,var(--office-surface,#eceae8));
+  --_vv-surface:var(--vv-surface,var(--office-background,#fff));
+  --_vv-secondary:var(--vv-secondary,var(--office-surface,#f3f2f1));
+  --_vv-ink:var(--vv-ink,var(--office-foreground,#1f1f1f));
+  --_vv-muted:var(--vv-muted,var(--office-muted-foreground,#605e5c));
+  --_vv-border:var(--vv-border,var(--office-border,#e1dfdd));
+  --_vv-accent:var(--vv-accent,var(--office-accent,#3955a3));
+  --_vv-accent-soft:var(--vv-accent-soft,color-mix(in srgb,var(--_vv-accent) 10%,transparent));
+  --_vv-accent-ink:var(--vv-accent-ink,var(--office-accent-foreground,#fff));
+  --_vv-focus:var(--vv-focus,var(--office-ring,var(--_vv-accent)));
+  --_vv-danger:var(--vv-danger,var(--office-danger,#b42318));
+  --_vv-shadow:var(--vv-shadow,var(--office-shadow,0 2px 8px rgb(0 0 0 / 14%)));
+}
+`;
+var visioThemeBridge = themeBridge(":host > *", {
+  "--office-foreground": "var(--_vv-ink)",
+  "--office-muted-foreground": "var(--_vv-muted)",
+  "--office-background": "var(--_vv-surface)",
+  "--office-surface": "var(--_vv-accent-soft)",
+  "--office-border": "var(--_vv-border)",
+  "--office-accent": "var(--_vv-accent)",
+  "--office-accent-foreground": "var(--_vv-accent-ink)",
+  "--office-ring": "var(--_vv-focus)",
+  "--office-font": "'Segoe UI', Arial, sans-serif"
+});
+
 // src/visio/styles/index.ts
-var canvasAndRibbonStyles = [ribbon_default, shapes_default, backstage_default, canvas_default].join("\n");
+var canvasAndRibbonStyles = [ribbon_default, shapes_default, backstage_default, canvas_default, visioThemeBridge].join(
+  "\n"
+);
 
 // src/visio/ribbon-action.ts
 var RIBBON_ACTION_EVENT = "ribbon-action";
@@ -3687,8 +3714,12 @@ var ViewerShare = class {
   #revision = 0;
   /** The package this window last published or adopted, to skip repeats of it. */
   #last = null;
+  /** The drawing this window last published or adopted, so a local load or edit is sent once. */
+  #shared = null;
   #adopting = false;
   #pending = null;
+  /** Publishes a local drawing the room has not seen; set once the session has settled. */
+  #catchUp = null;
   #starting = false;
   get active() {
     return this.#session !== null;
@@ -3734,6 +3765,8 @@ var ViewerShare = class {
     this.#session?.destroy();
     this.#session = null;
     this.#pending = null;
+    this.#shared = null;
+    this.#catchUp = null;
     this.#revision = 0;
     this.#last = null;
     this.#people.participants = [];
@@ -3753,11 +3786,15 @@ var ViewerShare = class {
     });
     this.#session = session;
     const publish = () => {
+      const { document: document2 } = this.controller.state;
+      if (this.#adopting || this.#pending || document2 === this.#shared || !session.canWrite())
+        return;
       const bytes = this.#localBytes();
-      if (!bytes || !session.canWrite()) return;
+      if (!bytes) return;
       adapter.write(session.doc, { bytes, revision: this.#revision }, collab.LOCAL_ORIGIN);
       this.#revision = adapter.read(session.doc).revision;
       this.#last = bytes;
+      this.#shared = document2;
     };
     const adopt = () => {
       if (adapter.isEmpty(session.doc)) return;
@@ -3773,7 +3810,11 @@ var ViewerShare = class {
       if (transaction.origin !== collab.LOCAL_ORIGIN) adopt();
     };
     map.observe(observer);
-    const settle = () => adapter.isEmpty(session.doc) ? publish() : adopt();
+    const settle = () => {
+      this.#catchUp = publish;
+      if (adapter.isEmpty(session.doc)) publish();
+      else adopt();
+    };
     const stopReady = session.on("ready", settle);
     const stopPeers = session.on("peers", (peers) => this.#showPeers(peers));
     const stopEvents = this.controller.onEvent((name, detail) => {
@@ -3787,6 +3828,7 @@ var ViewerShare = class {
       stopPeers();
       stopEvents();
       stopState();
+      this.#catchUp = null;
     };
     if (session.canWrite()) settle();
     this.#showPeers(session.peers());
@@ -3811,6 +3853,7 @@ var ViewerShare = class {
     const done = (error) => {
       this.#adopting = false;
       if (error) this.#say(error instanceof Error ? error.message : String(error));
+      else this.#shared = this.controller.state.document;
     };
     this.#adopting = true;
     const run = document2 && edit.sourceAvailable ? this.controller.applyRemoteSource(bytes) : this.controller.load(bytes);
@@ -3818,6 +3861,7 @@ var ViewerShare = class {
   }
   #flush(state) {
     if (this.#pending && !state.edit.busy && !state.loading) this.#apply(this.#pending);
+    else this.#catchUp?.();
   }
   #showPeers(peers) {
     const me = this.profile();
@@ -6226,7 +6270,7 @@ var ViewerCommands = class {
     const state = this.host.controller.state;
     const page2 = state.document?.pages[state.pageIndex];
     if (!page2 || !state.selectedShape || !this.#canEdit(state)) return;
-    const command2 = action2.type === "rotate" ? visioQuarterTurnCommand(page2, state.selectedShape.id, action2.direction) : visioLocalRotationShape(page2, state.selectedShape.id) ? {
+    const command2 = action2.type === "rotate" ? visioQuarterTurnCommand(page2, state.selectedShape.id, action2.direction) : visioLocalRotationShape(page2, state.selectedShape.id, false) ? {
       type: "flip-shape",
       pageId: page2.id,
       shapeId: state.selectedShape.id,
@@ -6307,8 +6351,9 @@ var ViewerCommands = class {
     if (this.#tool !== "pointer" && !state.edit.sourceAvailable) this.#tool = "pointer";
     const page2 = state.document?.pages[state.pageIndex];
     const rotating = editing && !!page2 && !!state.selectedShape && !!visioLocalRotationShape(page2, state.selectedShape.id);
-    for (const name of ["rotate-left", "rotate-right", "flip-horizontal", "flip-vertical"])
-      button(name).disabled = !rotating;
+    for (const name of ["rotate-left", "rotate-right"]) button(name).disabled = !rotating;
+    const flipping = rotating && !!page2 && !!state.selectedShape && !!visioLocalRotationShape(page2, state.selectedShape.id, false);
+    for (const name of ["flip-horizontal", "flip-vertical"]) button(name).disabled = !flipping;
     root.querySelector('[data-menu="rotate"]').disabled = !rotating;
     root.querySelector('[data-menu="position"]').disabled = !rotating;
     button("undo").disabled = !state.edit.canUndo || state.edit.busy || state.loading;
@@ -7264,6 +7309,7 @@ var VisioViewerElement = class extends BaseElement {
   #commands;
   #lineEndpoints;
   #rotationHandle;
+  #handleState;
   #rulers;
   #canvas;
   #panZoom;
@@ -7294,7 +7340,8 @@ var VisioViewerElement = class extends BaseElement {
     super();
     this.#root = this.attachShadow({ mode: "open" });
     registerViewerControls();
-    this.#root.innerHTML = `<style>${viewerStyles}${canvasAndRibbonStyles}</style>${viewerChromeTemplate}`;
+    installOfficeUiTheme();
+    this.#root.innerHTML = `<style>${visioThemeAliases}${viewerStyles}${canvasAndRibbonStyles}</style>${viewerChromeTemplate}`;
     const workspace = this.#root.querySelector(".workspace");
     this.#findBar = createFindBar(document);
     const ribbon = createRibbon(document);
@@ -7612,8 +7659,12 @@ var VisioViewerElement = class extends BaseElement {
     if (this.#suspended) return;
     const page2 = state.document?.pages[state.pageIndex];
     const changed = this.#canvas.render(state);
-    this.#lineEndpoints.render(state);
-    this.#rotationHandle.render(state);
+    const previous = this.#handleState;
+    this.#handleState = state;
+    if (changed || !previous || previous.zoom !== state.zoom || previous.selectedShape !== state.selectedShape || previous.loading !== state.loading || previous.edit.busy !== state.edit.busy || previous.edit.sourceAvailable !== state.edit.sourceAvailable) {
+      this.#lineEndpoints.render(state);
+      this.#rotationHandle.render(state);
+    }
     if (changed) this.#announcement = void 0;
     this.#zoomSlider.value = Math.round(state.zoom * 100);
     this.#zoomSlider.disabled = !page2;

package/dist/xlsx/backstage/index.d.ts

@@ -1,8 +1,9 @@
 import type { BackstageHost } from './parts.js';
 export type { BackstageHost, EditorOptions, CalculationMode, IterationSettings } from './parts.js';
+export { participants, type ShareHost } from './pages-share.js';
 export { compatibilityNotes, formatNotes } from './pages-info.js';
 export { createTemplateWorkbook, TEMPLATES, type TemplateId } from 'ooxml-core/xlsx/ui';
-export type BackstagePage = 'info' | 'new' | 'open' | 'saveAs' | 'print' | 'export' | 'options' | 'customize';
+export type BackstagePage = 'info' | 'new' | 'open' | 'saveAs' | 'print' | 'share' | 'export' | 'options' | 'customize';
 export interface Backstage {
     readonly element: HTMLElement;
     open(page?: BackstagePage): void;
@@ -10,5 +11,7 @@ export interface Backstage {
     readonly isOpen: boolean;
     /** Re-renders the open page (after a locale change). */
     relocalize(): void;
+    /** Re-renders `page` when it is the one open (its state changed). */
+    refresh(page: BackstagePage): void;
 }
 export declare function createBackstage(host: BackstageHost): Backstage;

package/dist/xlsx/backstage/pages-share.d.ts

@@ -0,0 +1,19 @@
+/**
+ * File > Share: start or stop co-editing this workbook in a named room and see who is in it. The
+ * same panel as Visio's (room name, Start / Stop sharing, status, the shared presence stack); the
+ * editor's `collaboration` API does the work.
+ */
+import { type PresenceParticipant } from '../../presence.js';
+import type { XlsxCollaborationState } from '../collaboration-types.js';
+import { type PageContext } from './parts.js';
+/** What the Share page needs from the editor. */
+export interface ShareHost {
+    state(): XlsxCollaborationState;
+    start(roomId: string): Promise<void>;
+    stop(): void;
+}
+/** A fresh room name a second window can type: `book-` and six letters or digits. */
+export declare const suggestRoom: () => string;
+export declare function renderShare(page: PageContext): void;
+/** The people in the room as the shared presence stack lists them. */
+export declare function participants(state: XlsxCollaborationState): PresenceParticipant[];

package/dist/xlsx/backstage/parts.d.ts

@@ -4,6 +4,7 @@ import type { EditorContext } from 'ooxml-core/xlsx/ui';
 import type { FileCommand } from '../events.js';
 import type { SaveState } from '../title-bar.js';
 import type { TemplateId } from 'ooxml-core/xlsx/ui';
+import type { ShareHost } from './pages-share.js';
 export type CalculationMode = 'automatic' | 'manual';
 /** Iterative calculation: maximum iterations and maximum change; undefined when off. */
 export type IterationSettings = {
@@ -34,6 +35,8 @@ export interface BackstageHost {
     removePassword?(): void;
     hiddenActions(): readonly string[];
     setHiddenActions(ids: string[]): void;
+    /** File > Share; without it the page only shows its title. */
+    share?: ShareHost;
 }
 export interface PageContext {
     host: BackstageHost;

package/dist/xlsx/chart-fill-binding.d.ts

@@ -1,11 +1,11 @@
 import { type ChartObject, type ChartViewModel, type ChartPatch, type Color, type ChartGradientEdit, type ChartFillPart } from 'ooxml-core/xlsx';
-import type { DiagramFill } from 'ooxml-core/diagram';
+import type { DrawingFill } from 'ooxml-core/drawingml';
 import type { ChartGradientFill } from 'ooxml-core/chart';
 /** UI target binding; every model edit and temporary model remains in core. */
 export interface ChartFillBinding {
     commandId: string;
     key(): number | ChartFillPart;
-    fill(chart: ChartObject): DiagramFill | undefined;
+    fill(chart: ChartObject): DrawingFill | undefined;
     gradient(view: ChartViewModel): ChartGradientFill | undefined;
     paint(view: ChartViewModel): string | undefined;
     rectangular(chart: ChartObject): boolean;

package/dist/xlsx/chart-series-gradient-type.d.ts

@@ -1,9 +1,10 @@
-import type { DiagramFill, DrawingGradientGeometryType } from 'ooxml-core/diagram';
+import type { DrawingGradientGeometryType } from 'ooxml-core/diagram';
+import type { DrawingFill } from 'ooxml-core/drawingml';
 import type { EditorContext } from 'ooxml-core/xlsx/ui';
 /** A native type field that keeps unsupported imported types visible until explicitly changed. */
 export declare function createGradientTypeField(ctx: EditorContext, onPick: (type: DrawingGradientGeometryType) => void): {
     element: HTMLLabelElement;
-    refresh(fill: Extract<DiagramFill, {
+    refresh(fill: Extract<DrawingFill, {
         kind: 'gradient';
     }>, disabled: boolean, rectangularMarks?: boolean): void;
 };

package/dist/xlsx/collaboration-session.d.ts

@@ -0,0 +1,9 @@
+import type { CollabSession } from 'ooxml-core/collab';
+import type { XlsxPresence } from 'ooxml-core/xlsx/collab';
+import type { XlsxCollaborationOptions } from './collaboration-types.js';
+/** The two runtime modules sharing needs; loaded only when sharing starts. */
+export type CollabRuntime = [
+    typeof import('ooxml-core/collab'),
+    typeof import('ooxml-core/xlsx/collab')
+];
+export declare function createRoomSession(collab: CollabRuntime[0], xlsx: CollabRuntime[1], options: XlsxCollaborationOptions, defaultName: string): CollabSession<XlsxPresence>;

package/dist/xlsx/collaboration-types.d.ts

@@ -0,0 +1,41 @@
+import type { CollabSession, CollaborationRole, ConnectionStatus, ProviderFactory } from 'ooxml-core/collab';
+import type { XlsxPresence } from 'ooxml-core/xlsx/collab';
+/**
+ * How to join a shared workbook. One transport is used, in this order: `session` (host-owned,
+ * never destroyed by the editor), `provider`, `serverUrl` (a y-websocket compatible server), else a
+ * BroadcastChannel between tabs and windows of this browser.
+ */
+export interface XlsxCollaborationOptions {
+    /** Room name: 1-128 letters, digits, hyphens or underscores. Not needed with `session`. */
+    roomId?: string;
+    /** Base URL of a y-websocket compatible server (`wss://host/collab`); the room is appended. */
+    serverUrl?: string;
+    /** A provider factory of your own (WebRTC, an existing provider through `externalProvider`). */
+    provider?: ProviderFactory;
+    /** An existing session; create it with `sanitizePayload: sanitizeXlsxPresence`. */
+    session?: CollabSession<XlsxPresence>;
+    /** Who this window is. The name defaults to `authorName`, the colour to a palette colour. */
+    user?: {
+        name?: string;
+        color?: string;
+        role?: CollaborationRole;
+    };
+}
+/** One person in the room, as the title bar and `collaboration-change` list them. */
+export interface XlsxCollaborator {
+    clientId: number;
+    name: string;
+    color: string;
+    self: boolean;
+}
+/** Collaboration state, reported by `collaborationState` and the `collaboration-change` event. */
+export interface XlsxCollaborationState {
+    active: boolean;
+    roomId: string | undefined;
+    /** `off` when not sharing; otherwise the provider's connection status. */
+    status: ConnectionStatus | 'off';
+    /** The first exchange with the room finished. */
+    synced: boolean;
+    people: XlsxCollaborator[];
+}
+export declare const OFF_STATE: XlsxCollaborationState;

package/dist/xlsx/collaboration.d.ts

@@ -0,0 +1,56 @@
+import type { CellRange, EditSession, RemoteRange } from 'ooxml-core/xlsx';
+import type { EditHistory, Selection, SelectionModel } from 'ooxml-core/xlsx/ui';
+import { type CollabRuntime } from './collaboration-session.js';
+import type { EditorCore } from './editor-core.js';
+import { type XlsxCollaborationOptions, type XlsxCollaborationState } from './collaboration-types.js';
+/** What the controller needs from the editor. */
+export interface CollaborationHost {
+    edit(): EditSession | undefined;
+    readonly selection: SelectionModel;
+    userName(): string;
+    t(key: string, vars?: Record<string, string | number>): string;
+    toast(message: string, kind: 'info' | 'warning' | 'error'): void;
+    /** Reports a failure as `workbook-error`. */
+    error(error: Error): void;
+    /** Announces `collaboration-change` and refreshes the title bar. */
+    changed(state: XlsxCollaborationState): void;
+    setReadOnly(readOnly: boolean): void;
+}
+/** The part of the selection a collaborator sees: the range holding the active cell. */
+export declare function presenceRange(selection: Selection): CellRange;
+export declare class XlsxCollaboration {
+    #private;
+    private readonly host;
+    private readonly load;
+    constructor(host: CollaborationHost, load?: () => Promise<CollabRuntime>);
+    get active(): boolean;
+    /** Joined or joining. */
+    get busy(): boolean;
+    /** The options of the declarative `collaboration` property, if set. */
+    get wanted(): XlsxCollaborationOptions | undefined;
+    /**
+     * Declarative sharing: while set, the open workbook is shared in that room, and a workbook
+     * opened later joins it too (the room's content wins when it already has one). Undefined stops.
+     */
+    want(options: XlsxCollaborationOptions | undefined): void;
+    /** Leaves the room before the workbook is replaced; true when it was shared. */
+    suspend(): boolean;
+    /** Joins the wanted room with the workbook now open. */
+    resume(): void;
+    /** Joins a room. Rejects when one is active, no workbook is open or the room is invalid. */
+    start(options: XlsxCollaborationOptions): Promise<void>;
+    /**
+     * Leaves the room and forgets the `collaboration` property. A session the host passed in stays
+     * alive; one the editor made is destroyed.
+     */
+    stop(): void;
+    /** Restarts the connection, keeping the shared workbook and queued changes. */
+    reconnect(): void;
+    /** The binding's history while shared (only this window's edits), else undefined. */
+    history(): EditHistory | undefined;
+    remoteSelections(): readonly RemoteRange[];
+    onRemoteChange(listener: () => void): () => void;
+    state(): XlsxCollaborationState;
+}
+/** The controller of one editor, reporting through its toasts, events and render loop. */
+export declare function collaborationFor(core: EditorCore): XlsxCollaboration;

package/dist/xlsx/component.d.ts

@@ -5,6 +5,7 @@
 import type { Workbook } from 'ooxml-core/xlsx';
 import { XlsxEditorApi } from './element-api.js';
 import type { XlsxEditorEventMap } from './events.js';
+import type { XlsxCollaborationOptions } from './collaboration-types.js';
 import type { EditorLocale, EditorLocaleInput } from 'ooxml-core/xlsx/ui';
 import { type EditorThemeMode, type XlsxTheme } from './theme/index.js';
 /** Theme tokens, applied to the host as `--xve-<kebab-key>` custom properties. */
@@ -53,6 +54,13 @@ export declare class XlsxEditorElement extends XlsxEditorApi {
     set workbook(value: Workbook | null);
     /** Unsaved changes since the last load, save or `markClean()`. */
     get dirty(): boolean;
+    /**
+     * Shares the open workbook in a room while set: a workbook opened later joins the same room
+     * (the room's content wins when it already has a workbook); `null` leaves it. A window joining
+     * an existing room still needs a workbook open (`newWorkbook()` is enough).
+     */
+    get collaboration(): XlsxCollaborationOptions | null;
+    set collaboration(value: XlsxCollaborationOptions | null | undefined);
     get activeSheet(): number;
     set activeSheet(index: number);
 }

package/dist/xlsx/dialogs/comments-list.d.ts

@@ -1,2 +1,6 @@
+import { type Comment } from 'ooxml-core/xlsx';
 import type { EditorContext } from 'ooxml-core/xlsx/ui';
+import type { OfficeCommentThread } from '../../comments/types.js';
+/** Excel notes and threaded comments as neutral threads, in sheet order, keyed by address. */
+export declare function excelCommentThreads(comments: readonly Comment[]): OfficeCommentThread[];
 export declare function openCommentsList(ctx: EditorContext): Promise<string | undefined>;

package/dist/xlsx/dialogs/help-dialogs.d.ts

@@ -1,5 +1,5 @@
 import type { EditorContext } from 'ooxml-core/xlsx/ui';
 export declare function openShortcutHelp(ctx: EditorContext): Promise<undefined>;
 export declare const SUPPORTED_FEATURES: readonly ['Cell editing with undo and redo', 'Formulas calculated by the built-in calculation engine', 'Number formats', 'Conditional formatting display', 'Tables', 'Charts (display and basic editing)', 'Comments and notes', 'Hyperlinks', 'Data validation', 'Sort and filter', 'Freeze panes'];
-export declare const UNSUPPORTED_FEATURES: readonly ['Pivot tables and sparklines (kept in the file but not shown)', 'Show Formulas', 'Manual calculation', 'Outline (grouping) for columns', 'Password protection hashes', 'Editing threaded comment replies', 'Macros (VBA is kept in the file but never run)', 'Changing the workbook theme', 'Page Layout view'];
+export declare const UNSUPPORTED_FEATURES: readonly ['Pivot tables (kept in the file but not shown)', 'Creating or editing sparklines (existing ones are shown)', 'Show Formulas', 'Manual calculation', 'Outline (grouping) for columns', 'Password protection hashes', 'Editing threaded comment replies', 'Macros (VBA is kept in the file but never run)', 'Changing the workbook theme', 'Page Layout view'];
 export declare function openFeatureStatus(ctx: EditorContext): Promise<undefined>;

package/dist/xlsx/editor-core.d.ts

@@ -11,6 +11,7 @@ import { type DialogRegistry } from 'ooxml-core/xlsx/ui';
 import { DirtyState } from 'ooxml-core/xlsx/ui';
 import { type EditorLocale } from 'ooxml-core/xlsx/ui';
 import type { CalculationMode } from './backstage/index.js';
+import { type XlsxCollaboration } from './collaboration.js';
 import type { EditorThemeMode, XlsxTheme } from './theme/index.js';
 /** What the shell exposes back to the core (filled in when the element connects). */
 export interface ShellHooks {
@@ -41,6 +42,8 @@ export declare class EditorCore {
     readonly dialogs: DialogRegistry;
     readonly dirty: DirtyState;
     readonly ctx: EditorContext;
+    /** Co-editing over `ooxml-core/collab`; undo and redo go through it while shared. */
+    readonly collab: XlsxCollaboration;
     private gridController;
     private readonly modelListeners;
     private stopSession;

package/dist/xlsx/element-api.d.ts

@@ -1,16 +1,19 @@
 /**
  * The public methods of `<xlsx-editor>` (load, newWorkbook, save, saveBytes, download, markClean,
- * select, getSelection, setActiveSheet, undo, redo, focusGrid). The properties and lifecycle are
+ * select, getSelection, setActiveSheet, collaboration, share, undo, redo, focusGrid). The properties and lifecycle are
  * in component.ts; the state is the EditorCore.
  */
 import { EditorCore } from './editor-core.js';
 import { type FileChrome } from './editor-files.js';
+import type { XlsxCollaborationOptions, XlsxCollaborationState } from './collaboration-types.js';
 /** Server rendering has no HTMLElement; the class still has to be definable there. */
 export declare const HTMLElementBase: typeof HTMLElement;
 export declare class XlsxEditorApi extends HTMLElementBase {
     protected readonly core: EditorCore;
     /** Set by the shell once connected. */
     protected chrome: FileChrome | undefined;
+    /** Set by the shell once connected: opens File > Share. */
+    protected openShare: (() => void) | undefined;
     /** Opens .xlsx, .xlsm, .xltx, .xls or .csv bytes; `fileName` helps detection and names the file. */
     load(bytes: Uint8Array | ArrayBuffer, fileName?: string): Promise<void>;
     /** Starts a blank workbook named Book1.xlsx. */
@@ -30,6 +33,21 @@ export declare class XlsxEditorApi extends HTMLElementBase {
     /** The selection as A1 text (`B2:C5`, several ranges joined by commas). */
     getSelection(): string;
     setActiveSheet(index: number): void;
+    /**
+     * Shares the open workbook in a room (see `XlsxCollaborationOptions`). Resolves once joined;
+     * the room's workbook replaces this one when the room already has one. Rejects when sharing is
+     * already active or no workbook is open.
+     */
+    startCollaboration(options: XlsxCollaborationOptions): Promise<void>;
+    /** Leaves the room (and clears `collaboration`). The workbook stays as it is. */
+    stopCollaboration(): void;
+    /** Restarts the connection, keeping the shared workbook and changes made offline. */
+    reconnectCollaboration(): void;
+    /** Who is in the room and how the connection is. */
+    get collaborationState(): XlsxCollaborationState;
+    /** Opens File > Share, where the user starts or stops sharing and sees who is in the room. */
+    share(): void;
+    /** Undo the last edit; while shared, only this window's edits are undone. */
     undo(): void;
     redo(): void;
     focusGrid(): void;

package/dist/xlsx/events.d.ts

@@ -1,4 +1,5 @@
 import type { Workbook } from 'ooxml-core/xlsx';
+import type { XlsxCollaborationState } from './collaboration-types.js';
 export type FileCommand = 'new' | 'open' | 'save' | 'saveAs' | 'export' | 'exportCsv' | 'print';
 export interface FileCommandDetail {
     command: FileCommand;
@@ -50,11 +51,13 @@ export interface XlsxEditorEventMap {
     'dirty-change': {
         dirty: boolean;
     };
+    /** Sharing started or stopped, the connection changed, or someone joined, left or synced. */
+    'collaboration-change': XlsxCollaborationState;
 }
 export type XlsxEditorEventName = keyof XlsxEditorEventMap;
 export type XlsxEditorEventDetail<K extends XlsxEditorEventName> = XlsxEditorEventMap[K];
 /** Runtime list of every event name; the `satisfies` check keeps it a subset of the map. */
-export declare const XLSX_EDITOR_EVENTS: readonly ["workbook-change", "workbook-error", "workbook-warning", "readonly-change", "ribbon-action", "ribbon-customize", "file-command", "selection-change", "sheet-change", "dirty-change"];
+export declare const XLSX_EDITOR_EVENTS: readonly ["workbook-change", "workbook-error", "workbook-warning", "readonly-change", "ribbon-action", "ribbon-customize", "file-command", "selection-change", "sheet-change", "dirty-change", "collaboration-change"];
 /**
  * Dispatches a bubbling, composed CustomEvent. Returns false when a cancelable event was canceled
  * (the `EventTarget.dispatchEvent` contract).

package/dist/xlsx/grid/remote-layer.d.ts

@@ -0,0 +1,3 @@
+import type { GridView } from './grid-view.js';
+/** Adds the remote-selection layer to every quadrant; returns the remover. */
+export declare function installRemoteSelections(view: GridView): () => void;

package/dist/xlsx/grid/sparkline.d.ts

@@ -0,0 +1,3 @@
+import type { SparklineView } from 'ooxml-core/xlsx';
+/** Builds the `<svg class="xg-spark">` for a `w` x `h` px cell at `zoom` percent. */
+export declare function sparklineSvg(doc: Document, view: SparklineView, w: number, h: number, zoom: number): Element;