ooxml-ui 1.6.2 → 1.7.0

package/dist/visio.js

@@ -1,13 +1,13 @@
 import { themeBridge, installOfficeUiTheme } from './chunk-BCH2ZLWI.js';
-import { attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile, OFFICE_COLOR_SWATCHES, commentInitials } from './chunk-QHAE6Y5B.js';
+import { attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile, OFFICE_COLOR_SWATCHES, commentInitials } from './chunk-SCWCZSTE.js';
 import { getIcon, registerIcon } from './chunk-M6GF5ED2.js';
 import { definePresence } from './chunk-L7JV5FVE.js';
 import './chunk-OGNNNTKI.js';
 import './chunk-SPNWHKSR.js';
-import { VISIO_TEXT_LANGUAGES, VISIO_BULLET_STYLES, FOREIGN_VECTOR_SCENE_LIMITS, EMPTY_TEXT_SEARCH, EMPTY_SELECTION, EMPTY_EDIT_STATE, assertViewableDocument, snapshotSelection, selectionKey, indexDocumentText, searchDocumentText, sameSelection, validateSearchQuery, MAX_INPUT_BYTES, DocumentHistory, snapshotEdits, visioWithContainerMembers, visioSelectionIsOnPage, visioDuplicateCommand, visioGroupCommand, visioUngroupCommand, visioContainerCommand, visioCalloutCommand, visioPasteCommand, visioTextOccurrenceSelection, ForeignVectorBudget, VISIO_IDENTITY_TRANSFORM, hasVisibleShapeContent, composeVisioTransform, compatibilityNotes, compatibilityText, visioGradientInstances, visioRenderedGradientStopCount, inspectForeignVectorResource, copySnapshotScene, editErrorMessage, eventKeys, propertyKeys, VISIO_TEXT_REPLACE_LIMITS, visioTextReplaceOccurrences, visioTextReplacePlan, visioTextReplaceCommands, TEXT_SEARCH_LIMITS, visioTextShape, visioTextDraftEdit, isEditCancellation, visioSizePositionCommand, visioSizePositionState, visioWithCalloutLeaders, visioPageInsertCommand, visioQuarterTurnCommand, visioLocalRotationShape, visioMovementShape, visioMoveCommands, visioMoveTargets, visioMarqueeBox, visioPageDragDelta, visioMarqueeSelection, visioConnectorRouteOf, visioPageEditToDrawing, visioResizeShape, visioResizeDrag, textSearchStatus, visioSvgStrokeStyle, visioLineDashLengths, VISIO_DIAGRAM_RULE_SETS, visioClipboardShape, visioArrangeCommands, visioChangeShapeRefusal, visioChangeShapeCommand, visioChangeCaseShape, visioChangeCaseCommand, visioOrderingShape, visioStyleFormattingShape, visioFormattingShape, visioTextFormattingState, visioTextIndentCommand, visioTextFontStepCommand, visioFontFamilies, visioPictureInsertCommand, normalizeVisioHyperlinkAddress, visioFitToDrawingEdits, VISIO_PAPER_SIZES, visioPageSizePresetEdits, visioOrientationEdits, visioPageDecorationState, visioNewPageId, visioMatchingPaperSize, visioPageBreaks, visioRemoveDataGraphicEdits, visioDataGraphicFields, visioDataGraphicEdits, visioShapeDataRow, VISIO_DATA_GRAPHIC_FILL_ROW, visioColorRules, visioLegendEdits, visioTextDialogValues, visioTextDialogPatch, visioShapeFormattingState, visioFormatPainterSnapshot, visioFormatPainterEdits, VISIO_FORMAT_PAINTER_LIMITS, isVisioPathTool, visioPathDrawPlan, visioDrawPlan, visioDrawIsLargeEnough, visioConnectorCreationCommand, visioConnectableShape, visioAddConnectionPointCommand, visioDrawBounds, visioDrawingPoint, visioMovePreviewTransform, visioStraightLineHandles, visioConnectorEndHandles, visioNearestConnectionPoint, visioRotationPreviewTransform, VISIO_RESIZE_HANDLES, visioFillPatternTransform, visioRenderedGradientStops, visioStrokeGradient, VISIO_LAYOUT_STYLES, visioGlowKey, visioShapeEffectValues, visioReflectionKey, visioFollowTarget, visioPaperSize, visioKeepAutoSize, checkVisioDiagram, visioShapeReport, visioShapeReportTable, visioShapeReportCsv, visioShapeReportText, visioSubprocessCommand, visioShapeDataText, VISIO_LAYOUT_LABELS, visioAutoAlignCommands, visioReLayoutCommands, visioLayerAssignState, visioNewLayerNames, visioLayerAssignCommands, VISIO_SELECT_TYPES, VISIO_SELECT_TYPE_LABELS, visioPageMasters, visioSelectByType, visioPasteTextCommand, visioSnapMoveDelta, visioPageGuides, VISIO_FIELD_CATEGORIES, visioTextAppendEdit, visioTextSource, visioTextBlockShape, visioTextBlockFrame, visioTextBlockMatrix, VISIO_TEXT_BLOCK_HANDLES, visioShapeLocalPoint, visioTextBlockDrag, visioTextBlockEdit, visioPathPreview, visioConnectorMovePreviews, visioConnectorPreviewPath, visioShapePageBox, visioDataGraphicMarker, visioParseRange, visioDataTable, visioWorkbookGrid, visioGuideCreateCommand, visioGuideMoveCommand, visioBoxCreationCommand } from 'ooxml-core/visio/ui';
+import { VISIO_TEXT_LANGUAGES, VISIO_BULLET_STYLES, FOREIGN_VECTOR_SCENE_LIMITS, EMPTY_TEXT_SEARCH, EMPTY_SELECTION, EMPTY_EDIT_STATE, assertViewableDocument, snapshotSelection, selectionKey, indexDocumentText, searchDocumentText, sameSelection, validateSearchQuery, MAX_INPUT_BYTES, DocumentHistory, snapshotEdits, visioWithContainerMembers, visioSelectionIsOnPage, visioDuplicateCommand, visioGroupCommand, visioUngroupCommand, visioContainerCommand, visioCalloutCommand, visioPasteCommand, visioTextOccurrenceSelection, ForeignVectorBudget, VISIO_IDENTITY_TRANSFORM, hasVisibleShapeContent, composeVisioTransform, compatibilityNotes, compatibilityText, visioGradientInstances, visioRenderedGradientStopCount, inspectForeignVectorResource, copySnapshotScene, editErrorMessage, eventKeys, propertyKeys, VISIO_TEXT_REPLACE_LIMITS, visioTextReplaceOccurrences, visioTextReplacePlan, visioTextReplaceCommands, TEXT_SEARCH_LIMITS, visioTextShape, visioTextDraftEdit, isEditCancellation, visioSizePositionCommand, visioSizePositionState, visioWithCalloutLeaders, visioPageInsertCommand, visioQuarterTurnCommand, visioLocalRotationShape, visioMovementShape, visioMoveCommands, visioMoveTargets, visioMarqueeBox, visioPageDragDelta, visioMarqueeSelection, visioConnectorRouteOf, visioPageEditToDrawing, visioResizeShape, visioResizeDrag, textSearchStatus, visioSvgStrokeStyle, visioLineDashLengths, VISIO_DIAGRAM_RULE_SETS, visioClipboardShape, visioArrangeCommands, visioChangeShapeRefusal, visioChangeShapeCommand, visioChangeCaseShape, visioChangeCaseCommand, visioOrderingShape, visioStyleFormattingShape, visioFormattingShape, visioTextFormattingState, visioTextIndentCommand, visioTextFontStepCommand, visioFontFamilies, visioPictureInsertCommand, normalizeVisioHyperlinkAddress, visioFitToDrawingEdits, VISIO_PAPER_SIZES, visioPageSizePresetEdits, visioOrientationEdits, visioPageDecorationState, visioNewPageId, visioMatchingPaperSize, visioPageBreaks, visioRemoveDataGraphicEdits, visioDataGraphicFields, visioDataGraphicEdits, visioShapeDataRow, VISIO_DATA_GRAPHIC_FILL_ROW, visioColorRules, visioLegendEdits, visioTextDialogValues, visioTextDialogPatch, visioShapeFormattingState, visioFormatPainterSnapshot, visioFormatPainterEdits, VISIO_FORMAT_PAINTER_LIMITS, isVisioPathTool, visioPathDrawPlan, visioDrawPlan, visioDrawIsLargeEnough, visioConnectorCreationCommand, visioConnectableShape, visioAddConnectionPointCommand, visioDrawBounds, visioDrawingPoint, visioMovePreviewTransform, visioStraightLineHandles, visioConnectorEndHandles, visioNearestConnectionPoint, visioRotationPreviewTransform, VISIO_RESIZE_HANDLES, visioNudgeCommands, visioFillPatternTransform, visioRenderedGradientStops, visioStrokeGradient, VISIO_LAYOUT_STYLES, visioGlowKey, visioShapeEffectValues, visioReflectionKey, visioFollowTarget, visioPaperSize, visioKeepAutoSize, checkVisioDiagram, visioShapeReport, visioShapeReportTable, visioShapeReportCsv, visioShapeReportText, visioSubprocessCommand, visioShapeDataText, VISIO_LAYOUT_LABELS, visioAutoAlignCommands, visioReLayoutCommands, visioLayerAssignState, visioNewLayerNames, visioLayerAssignCommands, VISIO_SELECT_TYPES, VISIO_SELECT_TYPE_LABELS, visioPageMasters, visioSelectByType, visioPasteTextCommand, visioSnapMoveDelta, visioPageGuides, VISIO_FIELD_CATEGORIES, visioTextAppendEdit, visioTextSource, visioTextBlockShape, visioTextBlockFrame, visioTextBlockMatrix, VISIO_TEXT_BLOCK_HANDLES, visioShapeLocalPoint, visioTextBlockDrag, visioTextBlockEdit, visioPathPreview, visioConnectorMovePreviews, visioConnectorPreviewPath, visioShapePageBox, visioDataGraphicMarker, visioParseRange, visioDataTable, visioWorkbookGrid, visioGuideCreateCommand, visioGuideMoveCommand, visioBoxCreationCommand } from 'ooxml-core/visio/ui';
 export { TEXT_SEARCH_LIMITS, compatibilityNotes, compatibilityText, demoDocument, eventKeys, propertyKeys } from 'ooxml-core/visio/ui';
 import { VISIO_VISIBILITY_LIMITS, VISIO_STENCILS, visioOutlineShape, loadVisio, createVsdx, deserializeVisioClipboard, getVisioPageLayers, resolveVisioPageVisibility, VISIO_CLIPBOARD_MAX_CHARS, VISIO_GLOW_TRANSPARENCY, VISIO_METADATA_TEXT_LIMIT, VISIO_PICTURE_MAX_BYTES, inspectVisioRasterImage, VISIO_BUILT_IN_THEMES, VISIO_CONNECTOR_ROUTES, visioFilledArrow, layoutVisioFilledArrowLine, visioOpenArrowPath, VISIO_SHADOW_PRESETS, isVisioChangeShapeTarget, VISIO_CONTAINER_STYLES, VISIO_CALLOUT_STYLES, visioFallbackQuickStyle, VISIO_GLOW_SIZES, VISIO_SOFT_EDGE_SIZES, VISIO_REFLECTION_PRESETS, VISIO_BACKGROUND_STYLES, visioBackgroundShapes, VISIO_BORDER_STYLES, visioBorderShapes, VISIO_SHAPE_DATA_TYPES, visioShapeDataRowName, VISIO_CLIPBOARD_MAGIC, visioThemeVariantColors, isVisioBuiltInThemeId, VISIO_SCALE_UNITS, VISIO_QUICK_STYLE_COLORS } from 'ooxml-core/visio';
-import { resolveRotateHandlePlacement, createRotationDrag } from 'ooxml-core/geometry';
+import { resolveRotateHandlePlacement, createRotationDrag, snapAngle } from 'ooxml-core/geometry';
 
 function createWorkerEditor(factory, timeoutMs = 2e4) {
   const create = (() => {
@@ -190,7 +190,7 @@ var ViewerClipboardCapture = class {
   token() {
     const context = this.context();
     if (this.#destroyed || !context)
-      throw new Error("Load an idle source-backed VSDX before using the clipboard.");
+      throw new Error("Open a .vsdx file before using the clipboard.");
     const token = Object.freeze({ [tokenBrand]: true });
     this.#tokens.set(token, context);
     return token;
@@ -400,9 +400,9 @@ var ViewerTextReplacement = class {
     return this.#issue(context, Object.freeze({ scope, pageId: context.pageId, selection: owned }));
   }
   current(token) {
-    const saved = this.#tokens.get(token);
-    const context = saved && this.bridge.context();
-    return !!saved && !!context && sameReplacementContext(saved.context, context);
+    const saved2 = this.#tokens.get(token);
+    const context = saved2 && this.bridge.context();
+    return !!saved2 && !!context && sameReplacementContext(saved2.context, context);
   }
   /** Cancellation is bound to this token's application, even after scope intent changes. */
   cancel(token) {
@@ -474,9 +474,9 @@ var ViewerTextReplacement = class {
     this.#tokens.set(token, { context, scope });
     return token;
   }
-  #requireContext(saved) {
+  #requireContext(saved2) {
     const current = this.bridge.context();
-    if (!current || !sameReplacementContext(saved, current)) throw replacementCancelled();
+    if (!current || !sameReplacementContext(saved2, current)) throw replacementCancelled();
   }
   #require(token) {
     const record = this.#tokens.get(token);
@@ -1105,7 +1105,7 @@ var ViewerController = class {
   exportVsdx() {
     this.#assertAlive();
     if (!this.#history || this.#sourceFormat !== "vsdx" || this.#state.document?.format !== "vsdx")
-      throw new Error("Load a VSDX file before downloading a source-backed copy.");
+      throw new Error("Open a .vsdx file before downloading a copy.");
     if (this.#state.edit.busy || this.#state.loading)
       throw new Error("Wait for the current document operation before downloading.");
     return this.#history.export();
@@ -1220,7 +1220,7 @@ var ViewerController = class {
     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.");
+      throw new Error("Open a .vsdx file before editing.");
     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;
@@ -1574,7 +1574,7 @@ function shapeDetails(shape) {
     fragment.append(list);
   } else {
     const empty = document.createElement("p");
-    empty.textContent = "No visible shape data.";
+    empty.textContent = "No Shape Data";
     fragment.append(empty);
   }
   const define = document.createElement("button");
@@ -1642,7 +1642,31 @@ function selection(target) {
     ...target.dataset.pageId ? { pageId: target.dataset.pageId } : {}
   } : null;
 }
-function wireViewerInputs(controls, controller, fit) {
+var NUDGE_STEP = 1 / 16;
+var editableTarget = (event) => event.target?.closest?.("input, textarea, select, [contenteditable]");
+function nudge(event, controller, announce) {
+  const state = controller.state;
+  const page3 = state.document?.pages[state.pageIndex];
+  if (!page3 || !state.selectedShapes.length || !state.edit.sourceAvailable || state.loading || event.ctrlKey || event.metaKey || event.altKey || editableTarget(event))
+    return false;
+  const step = event.shiftKey ? 1 / (96 * (state.zoom || 1)) : NUDGE_STEP;
+  const ids = state.selectedShapes.map((shape) => shape.id);
+  const edits = visioNudgeCommands(page3, ids, event.key, step);
+  if (edits === null) return false;
+  event.preventDefault();
+  if (state.edit.busy) return true;
+  if (!edits) {
+    announce("The selection cannot be nudged.");
+    return true;
+  }
+  if (edits.length)
+    controller.applySelectionEdits(edits).catch((error) => {
+      if (!isEditCancellation(error)) announce(editErrorMessage(error));
+    });
+  return true;
+}
+function wireViewerInputs(controls, controller, fit, announce = () => {
+}, typeText = () => false) {
   const { viewport, zoomSlider } = controls;
   const Abort = viewport.ownerDocument.defaultView?.AbortController ?? AbortController, events = new Abort();
   const options2 = { signal: events.signal };
@@ -1666,6 +1690,12 @@ function wireViewerInputs(controls, controller, fit) {
   viewport.addEventListener(
     "keydown",
     (event) => {
+      if (nudge(event, controller, announce)) return;
+      if (event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey && !event.isComposing && !editableTarget(event) && controller.state.selectedShapes.length === 1 && controller.state.edit.sourceAvailable && typeText(event.key)) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
       const target = targetShape(event);
       if (target && ["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft", "Home", "End"].includes(event.key)) {
         event.preventDefault();
@@ -1699,98 +1729,6 @@ function wireViewerInputs(controls, controller, fit) {
   );
   return () => events.abort();
 }
-var layerControlsTemplate = `<details class="layer-controls" hidden><summary>Layers</summary><p>Display changes only. SVG and print snapshots use saved visibility. Guides, NoShow and unknown hidden reasons remain hidden.</p><div data-layer-list></div><p data-layer-status role="status"></p><button type="button" data-layer-reset="all">Reset all layers</button></details>`;
-function renderLayerControls(panel, state) {
-  const model = state.document, page3 = model?.pages[state.pageIndex];
-  const list = panel.querySelector("[data-layer-list]");
-  const active = panel.getRootNode();
-  const focused = active.activeElement;
-  const focus = focused && panel.contains(focused) ? { ...focused.dataset } : void 0;
-  const fragment = panel.ownerDocument.createDocumentFragment();
-  const overrides = layerOverrideMaps(model, state.layerVisibilityOverrides);
-  let total = 0, shown = 0;
-  for (const source of model && page3 ? getVisioPageLayers(model, page3.id) : []) {
-    const ids = /* @__PURE__ */ new Set();
-    const fieldset2 = panel.ownerDocument.createElement("fieldset");
-    const legend = panel.ownerDocument.createElement("legend");
-    const pageLabel = `${source.name.slice(0, 256)} (page ${source.id})`;
-    legend.textContent = `${pageLabel}${source.id === page3.id ? "" : " (background)"}`;
-    fieldset2.append(legend);
-    let rows = 0;
-    for (const layer of source.layers ?? []) {
-      if (ids.has(layer.id)) continue;
-      ids.add(layer.id);
-      ++total;
-      if (shown >= VIEWER_LAYER_LIMITS.controls) continue;
-      ++shown;
-      ++rows;
-      const row = panel.ownerDocument.createElement("div");
-      const label = panel.ownerDocument.createElement("label");
-      const input = panel.ownerDocument.createElement("input");
-      const override = overrides.get(source.id)?.get(layer.id);
-      input.type = "checkbox";
-      input.dataset.layerId = layer.id;
-      input.dataset.pageId = source.id;
-      input.checked = override ?? layer.visible;
-      const name = `${layer.name.slice(0, 256) || "Layer"} (ID ${layer.id})`;
-      input.setAttribute("aria-label", `${pageLabel}: ${name}`);
-      const description = `${name} \xB7 saved ${layer.visible ? "visible" : "hidden"}${override === void 0 ? "" : ` \xB7 override ${override ? "visible" : "hidden"}`}`;
-      label.append(input, description);
-      row.append(label);
-      if (override !== void 0) {
-        const reset = panel.ownerDocument.createElement("button");
-        reset.type = "button";
-        reset.textContent = "Reset";
-        reset.dataset.layerReset = "one";
-        reset.dataset.layerId = layer.id;
-        reset.dataset.pageId = source.id;
-        reset.setAttribute("aria-label", `Reset ${pageLabel}: ${name}`);
-        row.append(reset);
-      }
-      fieldset2.append(row);
-    }
-    if (rows) fragment.append(fieldset2);
-  }
-  list.replaceChildren(fragment);
-  panel.hidden = total === 0 && state.layerVisibilityOverrides.length === 0;
-  panel.querySelector("[data-layer-status]").textContent = total > shown ? `Showing ${shown} of ${total} layers. Other layers are available through the viewer API.` : `${total} layers in this drawing \xB7 ${state.layerVisibilityOverrides.length} document display overrides`;
-  panel.querySelector('[data-layer-reset="all"]').disabled = state.layerVisibilityOverrides.length === 0;
-  if (focus) {
-    const controls = [...panel.querySelectorAll("input,button")];
-    const match = (control) => control.dataset.layerId === focus.layerId && control.dataset.pageId === focus.pageId;
-    const target = controls.find(
-      (control) => match(control) && control.dataset.layerReset === focus.layerReset
-    ) ?? controls.find(match);
-    target?.focus();
-  }
-}
-function wireLayerControls(panel, controller) {
-  const Abort = panel.ownerDocument.defaultView?.AbortController ?? AbortController;
-  const events = new Abort(), options2 = { signal: events.signal };
-  panel.addEventListener(
-    "change",
-    (event) => {
-      const input = event.target;
-      if (input.matches('input[type="checkbox"]') && input.dataset.pageId !== void 0 && input.dataset.layerId !== void 0)
-        controller.setLayerVisibility(input.dataset.pageId, input.dataset.layerId, input.checked);
-    },
-    options2
-  );
-  panel.addEventListener(
-    "click",
-    (event) => {
-      const button = event.target.closest(
-        "button[data-layer-reset]"
-      );
-      if (!button || !panel.contains(button)) return;
-      if (button.dataset.layerReset === "all") controller.resetLayerVisibility();
-      else if (button.dataset.pageId !== void 0 && button.dataset.layerId !== void 0)
-        controller.setLayerVisibility(button.dataset.pageId, button.dataset.layerId, null);
-    },
-    options2
-  );
-  return () => events.abort();
-}
 
 // src/visio/styles.ts
 var viewerStyles = `
@@ -1816,21 +1754,10 @@ button[aria-pressed="true"] { color:var(--_vv-accent); background:var(--_vv-acce
 .ribbon-hint { align-self:center; flex:none; margin:0; padding:0 16px; font-size:11px; line-height:18px; color:var(--_vv-muted); }
 .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; }
 .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); margin:auto; }
 .paper [data-shape-id] { cursor:pointer; }
-.paper [data-selected="true"] > [data-geometry] { stroke:var(--_vv-accent) !important; stroke-width:.025 !important; }
-.paper [role="group"][data-selected="true"] [data-geometry] { stroke:var(--_vv-accent) !important; stroke-dasharray:.06 .04; }
 .inspector-pane { flex:0 0 288px; width:288px; min-width:0; overflow:auto; border-left:1px solid var(--_vv-border); background:var(--_vv-secondary); }
-.inspector-body { display:flex; flex-direction:column; gap:12px; padding:12px 10px; }
-.inspector-card,.edit-controls,.layer-controls { min-width:0; padding:8px; margin:0; border:1px solid var(--_vv-border); border-radius:4px; background:var(--_vv-surface); font-size:11px; line-height:17px; }
-.document-card h2 { margin:0 0 8px; font-size:10px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:var(--_vv-muted); }
-.current-page-name { margin:0 0 8px; font-size:12px; font-weight:500; overflow-wrap:anywhere; }
-.document-card dl { display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin:0; font-size:11px; }
-.document-card dt { color:var(--_vv-muted); }
-.document-card dd { margin:0; text-align:right; overflow-wrap:anywhere; }
-.selection-hint { margin:0; padding:0 2px; color:var(--_vv-muted); font-size:11px; }
 summary { cursor:pointer; min-height:22px; line-height:22px; font-weight:500; }
 summary::marker { color:var(--_vv-muted); font-size:10px; }
 .shape-inspector div { max-height:260px; overflow:auto; }
@@ -1840,35 +1767,12 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
 .shape-inspector dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
 .shape-inspector h3 { margin:12px 0 5px; font-size:11px; }
 .shape-inspector a { color:var(--_vv-accent); overflow-wrap:anywhere; }
-.edit-controls p,.layer-controls p { margin:6px 0; color:var(--_vv-muted); overflow-wrap:anywhere; }
-.edit-controls textarea { display:block; width:100%; resize:vertical; max-height:180px; margin-top:4px; background:var(--_vv-secondary); }
-.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); }
-.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); }
-.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; }
-.layer-controls legend { max-width:100%; overflow-wrap:anywhere; }
-.layer-controls fieldset div { display:flex; align-items:center; gap:6px; margin:3px 0; }
-.layer-controls label { display:flex; align-items:center; gap:6px; overflow-wrap:anywhere; }
-.layer-controls input { flex-shrink:0; width:16px; height:16px; min-height:16px; padding:0; accent-color:var(--_vv-accent); }
-.notes ul { max-height:220px; overflow:auto; padding-left:17px; margin:6px 0 0; color:var(--_vv-muted); }
-.notes li { margin:5px 0; overflow-wrap:anywhere; }
-.notes-strip { flex:none; display:flex; align-items:center; justify-content:space-between; min-height:25.5px; padding:0 12px; border-top:1px solid var(--_vv-border); background:var(--_vv-bg); color:var(--_vv-muted); font-size:10px; }
-.notes-strip button { min-height:24.5px; padding:2px 0; border:0; background:transparent; color:var(--_vv-muted); font-size:11px; }
-.notes-strip button::before { content:"\u25B8"; margin-right:6px; }
-.notes-strip button[aria-expanded="true"]::before { content:"\u25BE"; }
 .status { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; min-height:29px; padding:0 8px 0 12px; border-top:1px solid var(--_vv-border); color:var(--_vv-muted); background:var(--_vv-surface); font-size:10px; }
 .status-message { display:flex; gap:16px; min-width:0; }
 .status-message span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
 .empty { max-width:360px; margin:60px auto; padding:16px; text-align:center; color:var(--_vv-muted); font-size:12px; }
 .empty strong { display:block; color:var(--_vv-ink); font-size:18px; font-weight:500; margin-bottom:8px; }
-@media(max-width:1100px) { .ribbon-hint { display:none; } [data-diagnostics] { display:none; } }
+@media(max-width:1100px) { .ribbon-hint { display:none; } }
 @media(max-width:760px) {
   button,select,input,textarea { min-height:44px; }
   button { min-width:44px; }
@@ -1880,22 +1784,14 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
   .workspace { display:block; overflow:auto; }
   .viewport { height:340px; min-height:260px; padding:16px 4px; }
   .inspector-pane { width:100%; overflow:visible; border-left:0; border-top:1px solid var(--_vv-border); }
-  .inspector-body { gap:8px; padding:10px; }
-  .inspector-card,.edit-controls,.layer-controls { font-size:12px; }
-  .layer-controls label { min-height:44px; }
-  .layer-controls input { min-width:20px; width:20px; height:20px; min-height:20px; }
-  .notes-strip { min-height:44px; padding:0 10px; }
-  .notes-strip button { min-height:44px; }
   .status { flex-wrap:wrap; gap:0; padding:4px 8px; }
   .status-message { width:100%; min-height:18px; }
 }
 @media(pointer:coarse) {
   button,select,input,textarea { min-height:44px; }
   button { min-width:44px; }
-  summary,.layer-controls label { min-height:44px; line-height:44px; }
+  summary { min-height:44px; line-height:44px; }
   .ribbon-content { min-height:96px; }
-  .notes-strip button { min-height:44px; height:44px; }
-  .layer-controls input { min-height:20px; }
 }
 /* Suite ribbon: tabs lead directly into Visio command groups. */
 .ribbon-content { min-height:104px; padding:4px 4px; }
@@ -1910,8 +1806,6 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
  .viewport { flex:1; width:100%; height:100%; min-height:0; padding:16px 4px; }
  .inspector-pane { position:absolute; inset:0 0 0 auto; width:min(320px,100%); z-index:4; overflow:auto; border-left:1px solid var(--_vv-border); box-shadow:-8px 0 24px #0002; }
  .pane-close { display:block; width:44px; height:44px; padding:0; font-size:22px; background:transparent; border:0; }
- .inspector-kind { margin-left:auto; }
- .notes-strip { display:none; }
  .status { min-height:48px; padding:2px 8px; }
  .status-message { display:none; }
 }
@@ -1922,12 +1816,7 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
 .ribbon-command { font-size:12px; min-width:88px; }
 .ribbon-hint { font-size:12px; line-height:20px; flex:1; }
 .group-label { font-size:11px; line-height:14px; }
-.inspector-card,.edit-controls,.layer-controls { font-size:12px; line-height:18px; }
-.selection-hint,.document-card dl { font-size:12px; }
 .pane-heading { font-size:12px; }
-.inspector-pane .pane-heading { position:sticky; top:0; z-index:1; background:var(--_vv-secondary); flex:none; }
-.status .notes-strip { border:0; padding:0 8px; background:transparent; min-height:28px; }
-.status .notes-strip>span { display:none; }
 .status-message { flex:1; }
 @media(max-width:760px) {
  #home-panel { overflow:visible; min-height:54px; padding:4px; }
@@ -1941,7 +1830,6 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
  .ribbon-tools .ribbon-command { min-width:88px; font-size:12px; }
  .ribbon-tools .search-feedback { display:block; }
  .status { flex-wrap:nowrap; gap:4px; min-height:48px; }
- .status .notes-strip { display:none; }
 }
 @media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }
 `;
@@ -1950,16 +1838,16 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
 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) !important;\n	stroke-width: 0.04 !important;\n	stroke-dasharray: 0.08 0.05;\n}\n\n.paper [data-line-endpoint],\n.paper [data-resize-handle],\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 [data-resize-frame] {\n	fill: none;\n	stroke: var(--_vv-accent);\n	stroke-width: 1px;\n	pointer-events: none;\n}\n.paper [data-resize-frame-preview] {\n	stroke-dasharray: 5 3;\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/* View > Visual Aids > Connection Points: blue x markers (presentation only, never exported). */\n.paper [data-connection-points] path {\n	fill: none;\n	stroke: #1f6fd1;\n	stroke-width: 1.25px;\n	pointer-events: none;\n}\n.paper [data-connection-points] path[data-inherited='true'] {\n	stroke-opacity: 0.55;\n}\n.paper [data-connection-points] path[data-selected='true'] {\n	stroke: var(--_vv-accent);\n	stroke-width: 2.5px;\n}\n/* A connector end over a connection point glues to that point. */\n.paper .connect-point-target {\n	fill: none;\n	stroke: #2e9d43;\n	stroke-width: 2px;\n	pointer-events: none;\n}\n/* Connectors glued to dragged shapes, re-routed live until the move is committed. */\n.paper .connector-preview {\n	fill: none;\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 4 3;\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/* Visio's selection: white handles with a grey outline on a thin grey frame. */\n.paper [data-line-endpoint],\n.paper [data-resize-handle],\n.rotation-overlay [data-rotation-handle] {\n	fill: #fff;\n	stroke: var(--_vv-handle, #7a7a7a);\n	stroke-width: 1.25px;\n	cursor: crosshair;\n	touch-action: none;\n	pointer-events: all;\n}\n.paper [data-resize-handle]:hover,\n.paper [data-line-endpoint]:hover,\n.rotation-overlay [data-rotation-handle]:hover {\n	fill: var(--_vv-accent-soft, #dfe5f6);\n}\n.paper [data-resize-handle='n'],\n.paper [data-resize-handle='s'] {\n	cursor: ns-resize;\n}\n.paper [data-resize-handle='e'],\n.paper [data-resize-handle='w'] {\n	cursor: ew-resize;\n}\n.paper [data-resize-handle='ne'],\n.paper [data-resize-handle='sw'] {\n	cursor: nesw-resize;\n}\n.paper [data-resize-handle='nw'],\n.paper [data-resize-handle='se'] {\n	cursor: nwse-resize;\n}\n.rotation-overlay [data-rotation-handle] {\n	stroke: transparent;\n	cursor: grab;\n}\n.rotation-overlay .rotation-glyph {\n	fill: none;\n	stroke: var(--_vv-handle, #7a7a7a);\n	stroke-width: 1.5px;\n	stroke-linecap: round;\n	stroke-linejoin: round;\n	pointer-events: none;\n}\n.rotation-overlay [data-rotation-handle]:hover + .rotation-glyph {\n	stroke: var(--_vv-accent);\n}\n.paper [data-resize-frame] {\n	fill: none;\n	stroke: var(--_vv-handle, #7a7a7a);\n	stroke-width: 1px;\n	pointer-events: none;\n}\n/*\n * A selection with no frame or endpoint handles (several shapes, a group, a glued connector) is\n * marked on the shapes themselves; a framed shape keeps its own outline, as in Visio.\n */\n.viewport:not([data-selection-frame]) .paper [data-selected='true'] > [data-geometry] {\n	stroke: var(--_vv-accent) !important;\n	stroke-width: 0.025 !important;\n}\n.viewport:not([data-selection-frame]) .paper [role='group'][data-selected='true'] [data-geometry] {\n	stroke: var(--_vv-accent) !important;\n	stroke-dasharray: 0.06 0.04;\n}\n/* Handles step aside while a shape's text is edited in place. */\n.viewport[data-text-editing] [data-resize-overlay],\n.viewport[data-text-editing] .rotation-overlay,\n.viewport[data-text-editing] [data-line-endpoint] {\n	display: none;\n}\n.paper [data-resize-frame-preview] {\n	stroke-dasharray: 5 3;\n}\n.paper .endpoint-preview,\n.paper .rotation-preview {\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 5 3;\n	pointer-events: none;\n}\n/* Visio shows no line from the pin to the rotation handle. */\n.rotation-overlay .rotation-stem {\n	display: none;\n}\n\n.rotation-overlay {\n	position: absolute;\n	z-index: 1;\n	pointer-events: none;\n}\n/* View > Visual Aids > Connection Points: blue x markers (presentation only, never exported). */\n.paper [data-connection-points] path {\n	fill: none;\n	stroke: #1f6fd1;\n	stroke-width: 1.25px;\n	pointer-events: none;\n}\n.paper [data-connection-points] path[data-inherited='true'] {\n	stroke-opacity: 0.55;\n}\n.paper [data-connection-points] path[data-selected='true'] {\n	stroke: var(--_vv-accent);\n	stroke-width: 2.5px;\n}\n/* A connector end over a connection point glues to that point. */\n.paper .connect-point-target {\n	fill: none;\n	stroke: #2e9d43;\n	stroke-width: 2px;\n	pointer-events: none;\n}\n/* Connectors glued to dragged shapes, re-routed live until the move is committed. */\n.paper .connector-preview {\n	fill: none;\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 4 3;\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. 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.viewport[data-tool='freeform'],\n.viewport[data-tool='freeform'] .paper [data-shape-id],\n.viewport[data-tool='arc'],\n.viewport[data-tool='arc'] .paper [data-shape-id],\n.viewport[data-tool='pencil'],\n.viewport[data-tool='pencil'] .paper [data-shape-id],\n.viewport[data-tool='connector'],\n.viewport[data-tool='connector'] .paper [data-shape-id],\n.viewport[data-tool='connection-point'],\n.viewport[data-tool='connection-point'] .paper [data-shape-id] {\n	cursor: crosshair;\n}\n.viewport[data-tool='ellipse'],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='line'],\n.viewport[data-tool='freeform'],\n.viewport[data-tool='arc'],\n.viewport[data-tool='pencil'],\n.viewport[data-tool='connector'] {\n	touch-action: none;\n}\n/* Connector tool: the shape under the pointer is the glue target (Visio's green glue box). */\n.viewport .paper [data-connect-target='true'] > path[data-geometry] {\n	/* Drawing units (inches), like the canvas focus stroke; wins over a focused shape's dashes. */\n	stroke: var(--_vv-accent) !important;\n	stroke-width: 0.05 !important;\n	stroke-opacity: 1 !important;\n	stroke-dasharray: none !important;\n}\npath.draw-preview {\n	fill: 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.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-ink);\n}\noffice-ui-status-item[value=''] {\n	display: none;\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.viewport[data-tool='freeform'],\n.viewport[data-tool='freeform'] .paper [data-shape-id],\n.viewport[data-tool='arc'],\n.viewport[data-tool='arc'] .paper [data-shape-id],\n.viewport[data-tool='pencil'],\n.viewport[data-tool='pencil'] .paper [data-shape-id],\n.viewport[data-tool='connector'],\n.viewport[data-tool='connector'] .paper [data-shape-id],\n.viewport[data-tool='connection-point'],\n.viewport[data-tool='connection-point'] .paper [data-shape-id] {\n	cursor: crosshair;\n}\n.viewport[data-tool='ellipse'],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='line'],\n.viewport[data-tool='freeform'],\n.viewport[data-tool='arc'],\n.viewport[data-tool='pencil'],\n.viewport[data-tool='connector'] {\n	touch-action: none;\n}\n/* Connector tool: the shape under the pointer is the glue target (Visio's green glue box). */\n.viewport .paper [data-connect-target='true'] > path[data-geometry] {\n	/* Drawing units (inches), like the canvas focus stroke; wins over a focused shape's dashes. */\n	stroke: var(--_vv-accent) !important;\n	stroke-width: 0.05 !important;\n	stroke-opacity: 1 !important;\n	stroke-dasharray: none !important;\n}\npath.draw-preview {\n	fill: 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	.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-item:not([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.shapes-row[aria-expanded='true']::after {\n	transform: rotate(90deg);\n}\n.stencil-header {\n	display: flex;\n	align-items: stretch;\n	margin: 2px 0;\n	border-left: 3px solid var(--_vv-accent);\n	background: var(--_vv-accent-soft);\n}\n.stencil-title {\n	flex: 1;\n	min-width: 0;\n	padding: 6px 12px;\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	font-size: 12px;\n	font-weight: 600;\n	text-align: left;\n}\n.stencil-title::before {\n	content: '\\25BE';\n	display: inline-block;\n	width: 12px;\n	color: var(--_vv-muted);\n}\n.stencil-title[aria-expanded='false']::before {\n	content: '\\25B8';\n}\n.stencil-close {\n	min-height: 0;\n	width: 26px;\n	padding: 0;\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: var(--_vv-muted);\n	font-size: 14px;\n}\n#shapes-quick {\n	border-bottom: 1px solid var(--_vv-border);\n}\n#shapes-quick[hidden],\n.masters[hidden] {\n	display: none;\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";
+var shapes_default = "/* Visio's Shapes window: Search shapes, 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-surface);\n}\n.shapes-pane .pane-heading {\n	height: 46px;\n	padding: 10px 8px 4px 12px;\n	border-bottom: 0;\n	font-size: 21px;\n	font-weight: 300;\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-search-box {\n	position: relative;\n	margin: 6px 12px 10px;\n}\n.shapes-search-box office-ui-icon {\n	position: absolute;\n	top: 50%;\n	right: 8px;\n	translate: 0 -50%;\n	color: var(--_vv-accent);\n	font-size: 15px;\n	pointer-events: none;\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/* More Shapes opens a menu, so it alone carries Visio's small arrow, right after its label. */\n.shapes-row[aria-haspopup]::after {\n	content: '';\n	margin-left: 12px;\n	border: 4px solid transparent;\n	border-left-color: currentColor;\n}\n.shapes-row:hover,\n.stencil-header:hover {\n	background: var(--_vv-secondary);\n}\n.stencil-header {\n	display: flex;\n	align-items: stretch;\n	margin: 1px 6px;\n}\n/* The open stencil is Visio's filled, bold title bar. */\n.stencil-header:has(.stencil-title[aria-expanded='true']),\n.stencil-header:has(.stencil-title[aria-expanded='true']):hover {\n	background: color-mix(in srgb, var(--_vv-accent) 28%, var(--_vv-surface));\n}\n.stencil-title {\n	flex: 1;\n	min-width: 0;\n	padding: 5px 6px;\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	font-size: 12px;\n	font-weight: 400;\n	text-align: left;\n}\n.stencil-title[aria-expanded='true'] {\n	font-weight: 600;\n}\n.stencil-close {\n	min-height: 0;\n	width: 26px;\n	padding: 0;\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: var(--_vv-muted);\n	font-size: 14px;\n}\n#shapes-quick {\n	border-bottom: 1px solid var(--_vv-border);\n}\n.stencil-header + .masters {\n	margin-top: 6px;\n	border-top: 1px solid var(--_vv-border);\n}\n#shapes-quick[hidden],\n.masters[hidden] {\n	display: none;\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: 12px;\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-ink);\n	stroke-width: 1;\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: 100%;\n	padding-right: 28px;\n	border-radius: 0;\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";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/size-position.css?raw
-var size_position_default = ".size-position {\n	position: absolute;\n	right: 16px;\n	bottom: 16px;\n	z-index: 8;\n	width: 250px;\n	max-width: calc(100% - 32px);\n	max-height: calc(100% - 32px);\n	overflow: auto;\n	padding: 12px;\n	background: var(--_vv-surface);\n	color: var(--_vv-ink);\n	border: 1px solid var(--_vv-border);\n	border-radius: 4px;\n	box-shadow: 0 4px 16px #0002;\n}\n.size-position[hidden] {\n	display: none;\n}\n.size-position .pane-heading {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	margin-bottom: 12px;\n}\n.size-position label {\n	display: grid;\n	grid-template-columns: 90px 1fr;\n	align-items: center;\n	gap: 8px;\n	margin: 8px 0;\n}\n.size-position input {\n	min-width: 0;\n	width: 100%;\n	box-sizing: border-box;\n	padding: 5px;\n	font: inherit;\n	color: inherit;\n	background: var(--_vv-surface);\n	border: 1px solid var(--_vv-border);\n}\n.size-position p {\n	font-size: 12px;\n	margin: 8px 0 0;\n}\n.size-position [role='alert'] {\n	color: var(--_vv-error, #a4262c);\n}\n";
+var size_position_default = "/* Visio's Size & Position window: anchored at the bottom left of the drawing, a vertical caption\n   strip and rows of label, value and unit. */\n.size-position {\n	position: absolute;\n	left: 16px;\n	bottom: 16px;\n	z-index: 8;\n	display: flex;\n	width: 236px;\n	max-width: calc(100% - 32px);\n	max-height: calc(100% - 32px);\n	overflow: auto;\n	background: var(--_vv-surface);\n	color: var(--_vv-ink);\n	border: 1px solid var(--_vv-border);\n	box-shadow: 0 2px 8px #0002;\n	font-size: 12px;\n}\n.size-position[hidden] {\n	display: none;\n}\n/* Anchored to the drawing window, so it clears the Shapes window or its minimised strip. */\n.shapes-pane:not([hidden]) ~ .size-position {\n	left: 248px;\n}\n.shapes-strip:not([hidden]) ~ .size-position {\n	left: 44px;\n}\n@media (max-width: 760px) {\n	.shapes-pane:not([hidden]) ~ .size-position {\n		left: 16px;\n	}\n}\n.size-caption {\n	display: flex;\n	flex: none;\n	flex-direction: column;\n	align-items: center;\n	justify-content: space-between;\n	gap: 6px;\n	width: 24px;\n	padding: 8px 0 4px;\n}\n.size-caption strong {\n	writing-mode: vertical-rl;\n	color: var(--_vv-accent);\n	font-size: 10px;\n	font-weight: 700;\n	letter-spacing: 0.04em;\n	text-transform: uppercase;\n	white-space: nowrap;\n}\n.size-caption button {\n	width: 22px;\n	min-width: 0;\n	min-height: 22px;\n	padding: 0;\n	border: 0;\n	background: transparent;\n	color: var(--_vv-muted);\n	font-size: 15px;\n	line-height: 1;\n}\n.size-body {\n	flex: 1;\n	min-width: 0;\n	padding: 4px 6px 4px 0;\n}\n.size-position label {\n	display: grid;\n	grid-template-columns: 58px 1fr auto;\n	align-items: center;\n	gap: 4px;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.size-position label > span:first-child {\n	padding: 4px 6px;\n	border-right: 1px solid var(--_vv-border);\n	color: var(--_vv-muted);\n}\n.size-position input {\n	min-width: 0;\n	width: 100%;\n	min-height: 0;\n	box-sizing: border-box;\n	padding: 3px 4px;\n	font: inherit;\n	color: inherit;\n	background: transparent;\n	border: 0;\n	border-radius: 0;\n}\n.size-position input:focus-visible {\n	outline: 1px solid var(--_vv-focus);\n	outline-offset: -1px;\n}\n.size-unit {\n	padding-right: 4px;\n	color: var(--_vv-muted);\n}\n.size-position p {\n	margin: 6px 6px 2px;\n	color: var(--_vv-muted);\n}\n.size-position p:empty {\n	display: none;\n}\n.size-position [role='alert'] {\n	color: var(--_vv-danger);\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/text-tool.css?raw
 var text_tool_default = ".viewport[data-tool='text'] {\n	cursor: text;\n	touch-action: none;\n}\n.text-box-draft {\n	box-sizing: border-box;\n	overflow: auto;\n	position: absolute;\n	z-index: 3;\n	width: 300px;\n	max-width: calc(100% - 16px);\n	padding: 12px;\n	background: var(--_vv-surface);\n	color: var(--_vv-ink);\n	border: 1px solid var(--_vv-accent);\n	border-radius: 4px;\n	box-shadow: 0 2px 12px #0003;\n}\n.text-box-draft label {\n	display: grid;\n	gap: 6px;\n	font-weight: 600;\n}\n.text-box-draft textarea {\n	box-sizing: border-box;\n	width: 100%;\n	resize: vertical;\n	font: inherit;\n}\n.text-box-draft p {\n	margin: 8px 0;\n	font-size: 12px;\n}\n.text-box-draft > div {\n	display: flex;\n	gap: 8px;\n}\n.text-box-draft-frame {\n	pointer-events: none;\n}\n.paper [data-shape-id][data-selected='true'] > [data-text-hit],\n.paper [data-shape-id]:focus-visible > [data-text-hit] {\n	stroke: var(--_vv-accent);\n	stroke-width: 1px;\n}\n";
@@ -1988,6 +1876,194 @@ var layout_default = "/* Layout, Assign to Layer, Select by Type, Paste Special
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/text-features.css?raw
 var text_features_default = "/* Text dialog, Symbol, Field and Language dialogs, and the Text Block tool overlay. */\n.text-dialog-tabs {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 2px;\n	margin: 0 0 12px;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.text-dialog-tabs [role='tab'] {\n	padding: 6px 10px;\n	color: inherit;\n	background: transparent;\n	border: 1px solid transparent;\n	border-bottom: 2px solid transparent;\n	cursor: pointer;\n	font: inherit;\n}\n.text-dialog-tabs [role='tab'][aria-selected='true'] {\n	border-bottom-color: var(--_vv-accent);\n	font-weight: 600;\n}\n.text-dialog-panel {\n	display: grid;\n	gap: 10px;\n	min-width: min(420px, 80vw);\n}\n.field-dialog label,\n.language-dialog label {\n	min-width: min(420px, 80vw);\n	margin: 0 0 10px;\n}\n.text-dialog-panel label,\n.field-dialog label,\n.language-dialog label {\n	display: grid;\n	grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr);\n	align-items: center;\n	gap: 12px;\n}\n.text-dialog-panel label.text-dialog-check {\n	display: flex;\n	gap: 8px;\n}\n.text-dialog-panel input:not([type='checkbox']),\n.text-dialog-panel select,\n.field-dialog input,\n.field-dialog select,\n.language-dialog select {\n	box-sizing: border-box;\n	width: 100%;\n	min-height: 28px;\n	padding: 4px 6px;\n	color: inherit;\n	background: var(--_vv-surface);\n	border: 1px solid var(--_vv-border);\n	border-radius: 3px;\n}\n.text-dialog .text-dialog-note,\n.field-dialog .text-dialog-note,\n.symbol-dialog .text-dialog-note {\n	max-width: 440px;\n	margin: 8px 0 0;\n	font-size: 12px;\n}\n.text-dialog [role='alert'],\n.field-dialog [role='alert'],\n.symbol-dialog [role='alert'],\n.language-dialog [role='alert'] {\n	margin: 6px 0 0;\n	color: var(--office-error, #b00020);\n}\n.symbol-dialog office-ui-symbol-picker {\n	min-width: min(360px, 80vw);\n}\n@media (max-width: 480px) {\n	.text-dialog-panel label,\n	.field-dialog label,\n	.language-dialog label {\n		grid-template-columns: 1fr;\n		gap: 5px;\n	}\n}\n\n/* Text Block tool: the text block frame replaces the shape's resize and rotation handles. */\n.viewport[data-text-block='true'] [data-resize-overlay],\n.viewport[data-text-block='true'] .rotation-overlay {\n	display: none;\n}\n.paper [data-text-block-frame] {\n	fill: transparent;\n	stroke: var(--_vv-accent);\n	stroke-width: 1px;\n	stroke-dasharray: 4 3;\n	cursor: move;\n	pointer-events: all;\n	touch-action: none;\n}\n.paper circle[data-text-block-handle] {\n	fill: white;\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	cursor: crosshair;\n	pointer-events: all;\n	touch-action: none;\n}\n.paper circle[data-text-block-handle='rotate'] {\n	fill: var(--_vv-accent);\n	cursor: grab;\n}\n.paper [data-text-block-preview] [data-text-block-frame] {\n	stroke-dasharray: 2 2;\n}\n.text-dialog-panel[hidden],\n.field-dialog label[hidden] {\n	display: none;\n}\n";
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/task-pane.css?raw
+var task_pane_default = `/* The right task pane (Shape Data, Layers): the shared office-ui-task-pane, one view at a time. */
+.inspector-pane {
+	flex: 0 0 288px;
+	width: 288px;
+	overflow: hidden;
+	border-left: 1px solid var(--_vv-border);
+	background: var(--_vv-surface);
+	--office-background: var(--_vv-surface);
+	--office-surface: var(--_vv-secondary);
+	--office-foreground: var(--_vv-ink);
+}
+.inspector-pane [data-pane-view]:not([data-active]) {
+	display: none;
+}
+.selection-hint {
+	margin: 24px 0;
+	text-align: center;
+	color: var(--_vv-muted);
+	font-size: 12px;
+}
+/* Shape Data reads as Visio's two-column window: a label column and a value column in rows. */
+.shape-inspector {
+	font-size: 12px;
+	line-height: 18px;
+}
+.shape-inspector div {
+	max-height: none;
+	overflow: visible;
+}
+.shape-inspector dl {
+	gap: 0;
+	margin: 6px 0;
+	border-top: 1px solid var(--_vv-border);
+}
+.shape-inspector dt,
+.shape-inspector dd {
+	padding: 4px 6px;
+	border-bottom: 1px solid var(--_vv-border);
+}
+.shape-inspector dt {
+	font-weight: 400;
+	color: var(--_vv-muted);
+	border-right: 1px solid var(--_vv-border);
+}
+.shape-inspector h3 {
+	font-size: 12px;
+}
+
+/* Status bar: Visio's Page, Width, Height, Angle and language; messages are for screen readers. */
+office-ui-status-bar.status {
+	gap: 18px;
+	/* A host may recolour the bar: see the status aliases in theme.ts. */
+	background: var(--_vv-status-bg);
+	color: var(--_vv-status-ink);
+}
+/*
+ * Office Theme "Colorful" (File > Options, or the status-bar attribute): the bar takes the product
+ * colour, as desktop Visio's does, and its controls draw in the bar's own ink.
+ */
+:host([status-bar='colorful']) office-ui-status-bar.status {
+	border-top-color: transparent;
+	accent-color: var(--_vv-status-ink);
+	--office-foreground: currentColor;
+	--office-muted-foreground: currentColor;
+	--office-accent: currentColor;
+	--office-ring: currentColor;
+	--office-border: color-mix(in srgb, currentColor 45%, transparent);
+	--office-surface: color-mix(in srgb, currentColor 18%, transparent);
+	--office-background: color-mix(in srgb, currentColor 18%, transparent);
+}
+:host([status-bar='colorful']) .status-message[data-error] {
+	color: inherit;
+	font-weight: 600;
+}
+/* Presentation Mode sits beside the zoom, at the trailing edge. */
+office-ui-status-bar.status .zoom-controls {
+	margin-inline-start: 0;
+}
+.status-message:not([data-error]) {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+.status-message[data-error] {
+	flex: 1;
+	min-width: 0;
+	color: var(--_vv-danger);
+}
+
+/* In-place text editing: the editor sits on the shape and replaces its drawn text. */
+.inline-text {
+	position: absolute;
+	z-index: 3;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0 4px;
+	overflow: hidden;
+	resize: none;
+	border: 0;
+	border-radius: 0;
+	outline: 1px dashed var(--_vv-accent);
+	outline-offset: 2px;
+	background: transparent;
+	line-height: 1.2;
+	min-height: 0;
+}
+.paper [data-editing-text] text {
+	visibility: hidden;
+}
+
+/* File > Info lists what the drawing shows approximately. */
+.backstage-notes-list {
+	max-height: 240px;
+	margin: 6px 0 0;
+	padding-left: 18px;
+	overflow: auto;
+	color: var(--_vv-muted);
+}
+.backstage-notes-list li {
+	margin: 5px 0;
+	overflow-wrap: anywhere;
+}
+@media (max-width: 760px) {
+	.inspector-pane {
+		position: absolute;
+		inset: 0 0 0 auto;
+		z-index: 4;
+		width: min(320px, 100%);
+		box-shadow: -8px 0 24px #0002;
+	}
+}
+
+/* Layer Properties: Visio's table of layers with their flags. */
+.layer-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 12px;
+}
+.layer-table th,
+.layer-table td {
+	padding: 4px 8px;
+	border: 1px solid var(--_vv-border);
+	text-align: center;
+}
+.layer-table thead th {
+	background: var(--_vv-secondary);
+	font-weight: 600;
+}
+.layer-table tbody th {
+	text-align: left;
+	font-weight: 400;
+	overflow-wrap: anywhere;
+}
+.layer-table .layer-page th {
+	background: var(--_vv-secondary);
+	color: var(--_vv-muted);
+	font-size: 11px;
+}
+.layer-table input {
+	width: 16px;
+	height: 16px;
+	min-height: 16px;
+	padding: 0;
+	accent-color: var(--_vv-accent);
+}
+.layer-colour {
+	display: inline-block;
+	width: 28px;
+	height: 12px;
+	border: 1px solid var(--_vv-border);
+}
+.layer-note:empty {
+	display: none;
+}
+.layer-note {
+	color: var(--_vv-muted);
+	font-size: 12px;
+}
+`;
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/title-bar.css?raw
+var title_bar_default = "/* Visio's title bar: the shared office-ui-title-bar, with the signed-in name at its right end. */\n.title-bar {\n	flex: none;\n}\n.title-bar[hidden] {\n	display: none;\n}\n.title-account {\n	display: inline-flex;\n	align-items: center;\n	gap: 8px;\n	font-size: 12px;\n	color: var(--_vv-ink);\n}\n.title-account[hidden] {\n	display: none;\n}\n.title-account-avatar {\n	display: inline-grid;\n	place-items: center;\n	width: 24px;\n	height: 24px;\n	border-radius: 50%;\n	color: #fff;\n	font-size: 10px;\n	font-weight: 600;\n}\n@media (max-width: 760px) {\n	.title-account-name {\n		display: none;\n	}\n}\n";
+
 // src/visio/styles/theme.ts
 var visioThemeAliases = `:host {
   --_vv-bg:var(--vv-background,var(--office-surface,#eceae8));
@@ -2002,6 +2078,12 @@ var visioThemeAliases = `:host {
   --_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%)));
+  --_vv-status-bg:var(--vv-status-background,var(--_vv-surface));
+  --_vv-status-ink:var(--vv-status-ink,var(--_vv-ink));
+}
+:host([status-bar='colorful']) {
+  --_vv-status-bg:var(--vv-status-background,var(--_vv-accent));
+  --_vv-status-ink:var(--vv-status-ink,var(--_vv-accent-ink));
 }
 `;
 var visioThemeBridge = themeBridge(":host > *", {
@@ -2032,6 +2114,8 @@ var canvasAndRibbonStyles = [
   data_default,
   layout_default,
   text_features_default,
+  task_pane_default,
+  title_bar_default,
   visioThemeBridge
 ].join("\n");
 
@@ -2858,27 +2942,27 @@ function storage(doc) {
   }
 }
 function load(doc) {
-  const saved = { open: [], quick: {} };
+  const saved2 = { open: [], quick: {} };
   try {
     const raw = storage(doc)?.getItem(SHAPES_STORAGE_KEY);
     const value = raw ? JSON.parse(raw) : {};
     const known = new Set(STENCILS.map((stencil) => stencil.id));
     if (Array.isArray(value.open))
-      saved.open = value.open.filter(
+      saved2.open = value.open.filter(
         (id) => typeof id === "string" && known.has(id) && id !== BASIC_STENCIL_ID
       );
     for (const [stencil, ids] of Object.entries(value.quick ?? {}))
       if (known.has(stencil) && Array.isArray(ids))
-        saved.quick[stencil] = ids.filter(
+        saved2.quick[stencil] = ids.filter(
           (id) => typeof id === "string" && findMaster(id)?.stencil.id === stencil
         );
   } catch {
   }
-  return saved;
+  return saved2;
 }
-function save(doc, saved) {
+function save(doc, saved2) {
   try {
-    storage(doc)?.setItem(SHAPES_STORAGE_KEY, JSON.stringify(saved));
+    storage(doc)?.setItem(SHAPES_STORAGE_KEY, JSON.stringify(saved2));
   } catch {
   }
 }
@@ -2923,7 +3007,7 @@ function unsupportedItem(item, reason) {
   return item;
 }
 function buildStencilsView(doc, panel, pane) {
-  const saved = load(doc);
+  const saved2 = load(doc);
   const row = (id, label) => {
     const button = doc.createElement("button");
     button.type = "button";
@@ -2934,7 +3018,7 @@ function buildStencilsView(doc, panel, pane) {
   };
   const more = row("shapes-more", "More Shapes");
   more.setAttribute("aria-haspopup", "menu");
-  more.title = "More Shapes: open a built-in stencil. Stencil files (.vssx) cannot be opened.";
+  more.title = "More Shapes: open another stencil.";
   const quickToggle = row("shapes-quick-toggle", "Quick Shapes");
   quickToggle.setAttribute("aria-expanded", "false");
   quickToggle.setAttribute("aria-controls", "shapes-quick");
@@ -2951,8 +3035,8 @@ function buildStencilsView(doc, panel, pane) {
   masterMenu.dataset.shapesMenu = "master";
   masterMenu.setAttribute("label", "Master");
   let menuMaster;
-  const openIds = () => [BASIC_STENCIL_ID, ...saved.open];
-  const quickIds = (stencil) => saved.quick[stencil.id] ?? stencil.masters.slice(0, DEFAULT_QUICK).map((master) => master.id);
+  const openIds = () => [BASIC_STENCIL_ID, ...saved2.open];
+  const quickIds = (stencil) => saved2.quick[stencil.id] ?? stencil.masters.slice(0, DEFAULT_QUICK).map((master) => master.id);
   const renderQuick = () => {
     if (quick.hidden) return quick.replaceChildren();
     const masters = openIds().map((id) => STENCILS.find((stencil) => stencil.id === id)).flatMap((stencil) => quickIds(stencil).map((id) => findMaster(id).master));
@@ -3004,7 +3088,7 @@ function buildStencilsView(doc, panel, pane) {
   };
   const renderMenu = () => moreMenu.replaceChildren(
     ...STENCILS.filter((stencil) => stencil.id !== BASIC_STENCIL_ID).map(
-      (stencil) => menuItem(doc, `stencil:${stencil.id}`, stencil.name, saved.open.includes(stencil.id))
+      (stencil) => menuItem(doc, `stencil:${stencil.id}`, stencil.name, saved2.open.includes(stencil.id))
     ),
     doc.createElement("office-ui-menu-separator"),
     unsupportedItem(
@@ -3018,8 +3102,8 @@ function buildStencilsView(doc, panel, pane) {
     renderQuick();
   };
   const toggleStencil = (id) => {
-    saved.open = saved.open.includes(id) ? saved.open.filter((candidate) => candidate !== id) : [...saved.open, id];
-    save(doc, saved);
+    saved2.open = saved2.open.includes(id) ? saved2.open.filter((candidate) => candidate !== id) : [...saved2.open, id];
+    save(doc, saved2);
     render();
   };
   more.addEventListener("click", () => {
@@ -3065,8 +3149,8 @@ function buildStencilsView(doc, panel, pane) {
     const found = menuMaster && findMaster(menuMaster);
     if (!found) return;
     const ids = quickIds(found.stencil);
-    saved.quick[found.stencil.id] = ids.includes(found.master.id) ? ids.filter((id) => id !== found.master.id) : [...ids, found.master.id];
-    save(doc, saved);
+    saved2.quick[found.stencil.id] = ids.includes(found.master.id) ? ids.filter((id) => id !== found.master.id) : [...ids, found.master.id];
+    save(doc, saved2);
     renderQuick();
   });
   render();
@@ -3093,70 +3177,48 @@ function createShapesWindow(doc) {
   collapse.title = "Close Shapes";
   collapse.textContent = "\u2039";
   heading.append(title2, collapse);
-  const views = doc.createElement("div");
-  views.className = "shapes-views";
-  views.setAttribute("role", "tablist");
-  views.setAttribute("aria-label", "Shapes views");
-  const view = (key, label, selected) => {
-    const tab = doc.createElement("button");
-    tab.type = "button";
-    tab.id = `shapes-${key}-tab`;
-    tab.dataset.shapesView = key;
-    tab.textContent = label;
-    tab.setAttribute("role", "tab");
-    tab.setAttribute("aria-selected", String(selected));
-    tab.setAttribute("aria-controls", `shapes-${key}`);
-    tab.tabIndex = selected ? 0 : -1;
-    return tab;
-  };
-  views.append(view("stencils", "Stencils", true), view("search", "Search", false));
+  const box2 = doc.createElement("div");
+  box2.className = "shapes-search-box";
+  const field = doc.createElement("input");
+  field.type = "search";
+  field.className = "shapes-search-field";
+  field.placeholder = "Search shapes";
+  field.setAttribute("aria-label", "Search shapes");
+  field.setAttribute("aria-controls", "shapes-search");
+  field.autocomplete = "off";
+  const glass = doc.createElement("office-ui-icon");
+  glass.setAttribute("name", "search");
+  glass.setAttribute("aria-hidden", "true");
+  box2.append(field, glass);
   const stencils = doc.createElement("div");
   stencils.id = "shapes-stencils";
-  stencils.setAttribute("role", "tabpanel");
-  stencils.setAttribute("aria-labelledby", "shapes-stencils-tab");
   const menus = buildStencilsView(doc, stencils, pane);
   const search = doc.createElement("div");
   search.id = "shapes-search";
   search.hidden = true;
-  search.setAttribute("role", "tabpanel");
-  search.setAttribute("aria-labelledby", "shapes-search-tab");
-  const field = doc.createElement("input");
-  field.type = "search";
-  field.className = "shapes-search-field";
-  field.placeholder = "Search for shapes";
-  field.setAttribute("aria-label", "Search for shapes");
-  field.autocomplete = "off";
+  search.setAttribute("role", "region");
+  search.setAttribute("aria-label", "Search results");
   const results = masterList(
     doc,
     STENCILS.flatMap((stencil) => stencil.masters)
   );
   const empty = doc.createElement("p");
   empty.className = "shapes-empty";
-  empty.textContent = "No matching shapes in the built-in stencils.";
+  empty.textContent = "No shapes match your search.";
   empty.hidden = true;
   field.addEventListener("input", () => {
     const query = field.value.trim().toLowerCase();
     let shown = 0;
     for (const item of results.querySelectorAll("li")) {
-      item.hidden = !!query && !item.dataset.name.toLowerCase().includes(query);
+      item.hidden = !item.dataset.name.toLowerCase().includes(query);
       if (!item.hidden) shown++;
     }
     empty.hidden = shown > 0;
+    search.hidden = !query;
+    stencils.hidden = !!query;
   });
-  search.append(field, results, empty);
-  views.addEventListener("click", (event) => {
-    const tab = event.target.closest("[data-shapes-view]");
-    if (!tab) return;
-    for (const candidate of views.querySelectorAll("[data-shapes-view]")) {
-      const selected = candidate === tab;
-      candidate.setAttribute("aria-selected", String(selected));
-      candidate.tabIndex = selected ? 0 : -1;
-    }
-    stencils.hidden = tab.dataset.shapesView !== "stencils";
-    search.hidden = !stencils.hidden;
-    if (!search.hidden) field.focus();
-  });
-  pane.append(heading, views, stencils, search, ...menus);
+  search.append(results, empty);
+  pane.append(heading, box2, stencils, search, ...menus);
   return pane;
 }
 function createShapesStrip(doc) {
@@ -3519,7 +3581,7 @@ function buildHomePanel(doc, panel) {
           {
             id: "layer-properties",
             label: "Layer Properties...",
-            action: { type: "reveal", panel: "layers" }
+            action: { type: "layer-properties" }
           },
           {
             id: "assign-layer",
@@ -4408,22 +4470,11 @@ function buildViewPanel(doc, panel) {
                 action: { type: "pane", pane: "shapes" },
                 checked: true
               },
-              {
-                id: "inspector",
-                label: "Inspector",
-                action: { type: "pane", pane: "inspector" },
-                checked: true
-              },
               {
                 id: "shape-data",
                 label: "Shape Data",
-                action: { type: "reveal", panel: "selection" }
-              },
-              { id: "layers-pane", label: "Layers", action: { type: "reveal", panel: "layers" } },
-              {
-                id: "notes",
-                label: "Compatibility Notes",
-                action: { type: "reveal", panel: "notes" }
+                action: { type: "reveal", panel: "selection" },
+                checked: false
               },
               { id: "pan-zoom", label: "Pan & Zoom", action: { type: "panZoom" }, checked: false },
               {
@@ -4615,31 +4666,6 @@ var RIBBON_TABS = [
   ["view", "View", buildViewPanel],
   ["help", "Help", buildHelpPanel]
 ];
-function quickAccess(doc) {
-  const qat = doc.createElement("div");
-  qat.className = "qat";
-  qat.setAttribute("role", "toolbar");
-  qat.setAttribute("aria-label", "Quick Access Toolbar");
-  qat.append(
-    command(doc, {
-      id: "undo",
-      label: "Undo",
-      icon: "undo",
-      size: "icon",
-      action: { type: "history", key: "undo" },
-      keys: ["Control+Z", "Ctrl+Z"]
-    }),
-    command(doc, {
-      id: "redo",
-      label: "Redo",
-      icon: "redo",
-      size: "icon",
-      action: { type: "history", key: "redo" },
-      keys: ["Control+Y", "Ctrl+Y"]
-    })
-  );
-  return qat;
-}
 function createRibbon(doc) {
   const ribbon = doc.createElement("office-ui-ribbon");
   ribbon.className = "toolbar";
@@ -4647,11 +4673,9 @@ function createRibbon(doc) {
   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);
+  ribbon.append(tellMe);
   for (const [key, name, build] of RIBBON_TABS) {
     const panel = doc.createElement("div");
     panel.className = "ribbon-content";
@@ -4763,8 +4787,6 @@ function generated(label, used, singles) {
 function applyKeyTips(toolbar) {
   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 panel of toolbar.querySelectorAll("[data-ribbon-tab]")) {
     const tab = panel.dataset.ribbonTab;
     panel.dataset.tabKeytip = TABS[tab] ?? tab.slice(0, 1).toUpperCase();
@@ -4814,23 +4836,7 @@ function createStatusBar(doc) {
   message.setAttribute("role", "status");
   const text = doc.createElement("span");
   text.dataset.status = "";
-  const diagnostics = doc.createElement("span");
-  diagnostics.dataset.diagnostics = "";
-  message.append(text, diagnostics);
-  const notes = doc.createElement("div");
-  notes.className = "notes-strip";
-  const notesButton = doc.createElement("button");
-  notesButton.type = "button";
-  notesButton.dataset.chrome = "notes";
-  notesButton.setAttribute("aria-controls", "inspector-pane");
-  notesButton.setAttribute("aria-expanded", "false");
-  const count = doc.createElement("span");
-  count.className = "notes-count";
-  count.dataset.noteCount = "";
-  notesButton.append("Notes", count);
-  const local = doc.createElement("span");
-  local.textContent = "Files stay in your browser";
-  notes.append(notesButton, local);
+  message.append(text);
   const footer2 = doc.createElement("slot");
   footer2.name = "workspace-footer";
   const zoom = doc.createElement("office-ui-zoom-slider");
@@ -4849,15 +4855,28 @@ function createStatusBar(doc) {
   presentation.setAttribute("title", "Presentation Mode: open a drawing with a foreground page.");
   bar.append(
     item("data-page-status"),
-    item("data-shape-status"),
+    item("data-width-status"),
+    item("data-height-status"),
+    item("data-angle-status"),
+    item("data-language-status"),
     message,
-    notes,
     footer2,
     presentation,
     zoom
   );
   return bar;
 }
+function statusLanguage(tag) {
+  try {
+    const locale = new Intl.Locale(tag || "en-US").maximize();
+    const names = new Intl.DisplayNames(["en"], { type: "language" });
+    const language = names.of(locale.language) ?? "";
+    const region = locale.region ? new Intl.DisplayNames(["en"], { type: "region" }).of(locale.region) : "";
+    return region ? `${language} (${region})` : language;
+  } catch {
+    return "";
+  }
+}
 function createPageTabs(doc) {
   const bar = doc.createElement("div");
   bar.className = "page-bar";
@@ -4874,9 +4893,82 @@ function createPageTabs(doc) {
   strip.setAttribute("add-label", "Insert Page");
   strip.setAttribute("add-disabled", "");
   strip.setAttribute("add-title", "Insert Page: open a .vsdx file to edit pages.");
-  bar.append(all, strip);
+  strip.toggleAttribute("plain", true);
+  all.slot = "after-tabs";
+  strip.append(all);
+  bar.append(strip);
+  return bar;
+}
+
+// src/visio/title-bar.ts
+function createTitleBar(doc) {
+  const bar = doc.createElement("office-ui-title-bar");
+  bar.className = "title-bar";
+  const account2 = doc.createElement("span");
+  account2.slot = "account";
+  account2.className = "title-account";
+  const name = doc.createElement("span");
+  name.className = "title-account-name";
+  const avatar = doc.createElement("span");
+  avatar.className = "title-account-avatar";
+  avatar.setAttribute("aria-hidden", "true");
+  account2.append(name, avatar);
+  bar.append(account2);
+  bar.state = { appMark: "V", fileName: "Visio" };
   return bar;
 }
+function initials(profile) {
+  if (profile.initial) return profile.initial.slice(0, 2).toUpperCase();
+  const words = profile.displayName.trim().split(/\s+/).filter(Boolean);
+  return ((words[0]?.[0] ?? "") + (words.length > 1 ? words.at(-1)?.[0] ?? "" : "")).toUpperCase();
+}
+function status(state) {
+  if (!state.document) return "";
+  if (state.loading) return "Opening...";
+  if (state.document.format === "vsd" || !state.edit.sourceAvailable) return "Read-only";
+  return state.edit.dirty ? "Unsaved changes" : "";
+}
+function renderTitleBar(bar, state, fileName, profile) {
+  const busy = state.loading || state.edit.busy;
+  bar.state = {
+    appMark: "V",
+    fileName: fileName || (state.document ? "Drawing1" : "Visio"),
+    status: status(state),
+    tone: state.loading ? "saving" : "idle",
+    quickAccess: {
+      label: "Quick Access Toolbar",
+      items: [
+        {
+          id: "save",
+          icon: "save",
+          label: "Save",
+          title: state.edit.sourceAvailable ? "Save (Ctrl+S): download a copy" : "Save: open a .vsdx file to save a copy",
+          disabled: !state.edit.sourceAvailable || busy
+        },
+        {
+          id: "undo",
+          icon: "undo",
+          label: "Undo",
+          title: "Undo (Ctrl+Z)",
+          disabled: !state.edit.canUndo || busy
+        },
+        {
+          id: "redo",
+          icon: "redo",
+          label: "Redo",
+          title: "Redo (Ctrl+Y)",
+          disabled: !state.edit.canRedo || busy
+        }
+      ]
+    }
+  };
+  const account2 = bar.querySelector(".title-account");
+  account2.hidden = !profile.displayName;
+  account2.querySelector(".title-account-name").textContent = profile.displayName;
+  const avatar = account2.querySelector(".title-account-avatar");
+  avatar.textContent = initials(profile);
+  avatar.style.background = profile.avatarColor;
+}
 function createFindBar(doc) {
   const bar = doc.createElement("office-ui-find-bar");
   bar.className = "find-bar";
@@ -5267,8 +5359,8 @@ function share(doc) {
   stop.dataset.share = "stop";
   stop.hidden = true;
   buttons.append(start, stop);
-  const status = el(doc, "p", "share-status");
-  status.setAttribute("role", "status");
+  const status2 = el(doc, "p", "share-status");
+  status2.setAttribute("role", "status");
   const people = doc.createElement("office-ui-presence");
   people.className = "share-people";
   people.setAttribute("label", "People in this session");
@@ -5282,7 +5374,7 @@ function share(doc) {
     ),
     field,
     buttons,
-    status,
+    status2,
     people,
     el(
       doc,
@@ -5322,10 +5414,11 @@ function createBackstage(doc) {
     facts.append(el(doc, "dt", "", label), value);
   }
   const notes = el(doc, "div", "backstage-notes");
+  notes.hidden = true;
   notes.append(
     el(doc, "h2", "", "Compatibility"),
     el(doc, "p", "backstage-note-count"),
-    action(doc, "notes", "View compatibility notes", "What this viewer approximates or omits.")
+    el(doc, "ul", "backstage-notes-list")
   );
   const file = el(doc, "h2", "backstage-file");
   file.dataset.info = "name";
@@ -5584,9 +5677,6 @@ var ViewerBackstage = class {
     else if (action2 === "page-setup") {
       this.hide();
       this.host.pageSetup?.();
-    } else if (action2 === "notes") {
-      this.hide();
-      this.host.revealNotes();
     }
   }
   #save(blob2, name) {
@@ -5607,6 +5697,10 @@ var ViewerBackstage = class {
   #base() {
     return this.host.fileName().replace(/\.vsdx?$/i, "") || "Drawing";
   }
+  /** Save: download the edited drawing as a copy (File > Save and the Quick Access Toolbar). */
+  download() {
+    this.#download();
+  }
   #download() {
     if (!this.#state?.edit.sourceAvailable) return;
     try {
@@ -5616,9 +5710,7 @@ var ViewerBackstage = class {
         `${this.#base()}-${result.dirty ? "edited" : "original"}-copy.vsdx`
       );
       this.hide();
-      this.host.announce(
-        "VSDX copy download requested. Native Visio compatibility is not verified."
-      );
+      this.host.announce("Downloaded a copy of the drawing.");
     } catch (error) {
       this.host.announce(error instanceof Error ? error.message : String(error));
     }
@@ -5697,10 +5789,10 @@ var ViewerBackstage = class {
     set("shapes", page3 ? `${page3.shapes.length} top-level` : "None");
     set(
       "state",
-      state.document?.format === "vsd" ? "Legacy VSD preview (read only)" : !state.edit.sourceAvailable ? state.document ? "Model-only preview (read only)" : "None" : state.edit.dirty ? "Edited copy (not saved)" : "Original"
+      state.document?.format === "vsd" ? "Legacy VSD preview (read only)" : !state.edit.sourceAvailable ? state.document ? "Preview (read-only)" : "None" : state.edit.dirty ? "Edited copy (not saved)" : "Original"
     );
     const notes = this.host.noteCount();
-    this.#root.querySelector(".backstage-note-count").textContent = notes ? `${notes} compatibility notes describe what this viewer approximates or omits.` : "No compatibility notes.";
+    this.#root.querySelector(".backstage-note-count").textContent = notes ? `${notes === 1 ? "One part" : `${notes} parts`} of this drawing ${notes === 1 ? "is" : "are"} shown approximately or not at all:` : "No compatibility notes.";
     const busy = state.loading || state.edit.busy;
     const blank = this.#root.querySelector(
       '[data-backstage-action="new-blank"]'
@@ -5735,7 +5827,6 @@ var ViewerBackstage = class {
       '[data-backstage-action^="export-"], [data-backstage-action="print"]'
     ))
       node.disabled = !page3 || busy;
-    this.#root.querySelector('[data-backstage-action="notes"]').disabled = notes === 0;
   }
 };
 function pagePoint(svg2, page3, event, options2 = {}) {
@@ -7564,45 +7655,53 @@ var labels = {
   height: "Height (in)",
   angle: "Angle (\xB0)"
 };
+var captions = { x: "X", y: "Y", width: "Width", height: "Height", angle: "Angle" };
 function createSizePosition(doc) {
   const pane = doc.createElement("section");
   pane.className = "size-position";
   pane.hidden = true;
   pane.setAttribute("aria-label", "Size & Position");
   const heading = doc.createElement("div");
-  heading.className = "pane-heading";
+  heading.className = "size-caption";
   const title2 = doc.createElement("strong");
   title2.textContent = "Size & Position";
   const close = doc.createElement("button");
   close.type = "button";
   close.setAttribute("aria-label", "Close Size & Position");
+  close.title = "Close";
   close.textContent = "\xD7";
   heading.append(title2, close);
+  const body = doc.createElement("div");
+  body.className = "size-body";
   const target = doc.createElement("p");
   target.dataset.sizeTarget = "";
-  const hint = doc.createElement("p");
-  hint.textContent = "Drawing inches. X/Y locate the rotation pin; Y increases upward.";
   const controls = doc.createElement("div");
   controls.dataset.sizeFields = "";
-  const status = doc.createElement("p");
-  status.dataset.sizeStatus = "";
-  status.setAttribute("role", "status");
-  status.setAttribute("aria-live", "polite");
+  const status2 = doc.createElement("p");
+  status2.dataset.sizeStatus = "";
+  status2.setAttribute("role", "status");
+  status2.setAttribute("aria-live", "polite");
   const error = doc.createElement("p");
   error.dataset.sizeError = "";
   error.setAttribute("role", "alert");
   error.hidden = true;
-  pane.append(heading, target, hint, controls, status, error);
+  body.append(controls, target, status2, error);
+  pane.append(heading, body);
   for (const field of fields) {
     const label = doc.createElement("label");
-    label.textContent = labels[field];
+    const caption = doc.createElement("span");
+    caption.textContent = captions[field];
+    const unit2 = doc.createElement("span");
+    unit2.className = "size-unit";
+    unit2.setAttribute("aria-hidden", "true");
+    unit2.textContent = field === "angle" ? "deg." : "in.";
     const input = doc.createElement("input");
     input.type = "number";
     input.step = "any";
     input.dataset.sizeField = field;
     input.setAttribute("aria-label", labels[field]);
     if (field === "width" || field === "height") input.min = "0";
-    label.append(input);
+    label.append(caption, input, unit2);
     controls.append(label);
   }
   return pane;
@@ -7757,7 +7856,7 @@ var ViewerSizePosition = class {
       input.disabled = !values || !state.edit.sourceAvailable || state.loading || state.edit.busy || this.#pending;
     }
     this.#pane.setAttribute("aria-busy", String(state.loading || state.edit.busy || this.#pending));
-    this.#pane.querySelector("[data-size-target]").textContent = values ? `Shape ${values.shapeId}` : "Select one local, unconnected 2D shape.";
+    this.#pane.querySelector("[data-size-target]").textContent = values ? "" : "Select a shape to see its size and position.";
   }
 };
 function createContextMenus(doc) {
@@ -8179,7 +8278,18 @@ var VISIO_OPTION_CATEGORIES = [
         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 }
+          { kind: "text", key: "userInitials", label: "Initials", maxLength: 2 },
+          {
+            kind: "select",
+            key: "officeTheme",
+            label: "Office Theme",
+            info: "Colorful gives the status bar the Visio colour, White keeps it neutral and Black is the dark theme.",
+            choices: [
+              { value: "colorful", label: "Colorful" },
+              { value: "neutral", label: "White" },
+              { value: "dark", label: "Black" }
+            ]
+          }
         ]
       }
     ]
@@ -8261,8 +8371,26 @@ var VISIO_OPTION_CATEGORIES = [
     sections: []
   }
 ];
-function profileValues(profile) {
+var THEME_KEY = "ooxml-visio-office-theme";
+var isStatusBarTheme = (value) => value === "colorful" || value === "neutral";
+function readStatusBarTheme() {
+  try {
+    const stored = globalThis.localStorage?.getItem(THEME_KEY);
+    return isStatusBarTheme(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStatusBarTheme(theme) {
+  try {
+    globalThis.localStorage?.setItem(THEME_KEY, theme);
+  } catch {
+  }
+}
+var isOfficeThemeChoice = (value) => value === "dark" || isStatusBarTheme(value);
+function profileValues(profile, officeTheme) {
   return {
+    officeTheme,
     miniToolbar: false,
     livePreview: false,
     screenTips: "descriptions",
@@ -8280,13 +8408,19 @@ function createOptionsDialog(doc) {
 }
 var ViewerProfile = class {
   constructor(root, onProfile = () => {
+  }, theme = {
+    get: () => "neutral",
+    set: () => {
+    }
   }) {
     this.onProfile = onProfile;
+    this.theme = theme;
     this.#dialog = root.querySelector("office-ui-options-dialog");
     this.#account = root.querySelector("office-ui-account");
     this.#sync();
   }
   onProfile;
+  theme;
   #profile = readOfficeProfile();
   #dialog;
   #account;
@@ -8295,7 +8429,7 @@ var ViewerProfile = class {
   }
   /** Open Visio Options, on General as Visio does. */
   showOptions(category = "general") {
-    this.#dialog.values = profileValues(this.#profile);
+    this.#dialog.values = profileValues(this.#profile, this.theme.get());
     this.#dialog.category = category;
     this.#dialog.show();
   }
@@ -8307,6 +8441,10 @@ var ViewerProfile = class {
       "office-options-change",
       (event) => {
         const { values } = event.detail;
+        if (isOfficeThemeChoice(values.officeTheme) && values.officeTheme !== this.theme.get()) {
+          this.theme.set(values.officeTheme);
+          if (values.officeTheme !== "dark") writeStatusBarTheme(values.officeTheme);
+        }
         const initial = String(values.userInitials ?? "").trim();
         this.#update({
           displayName: String(values.userName ?? "").trim(),
@@ -8331,7 +8469,7 @@ var ViewerProfile = class {
   }
   #sync() {
     if (this.#account) this.#account.profile = this.#profile;
-    this.#dialog.values = profileValues(this.#profile);
+    this.#dialog.values = profileValues(this.#profile, this.theme.get());
   }
 };
 
@@ -8566,7 +8704,7 @@ function wireStencil(pane, viewport, controller, announce) {
     const page3 = state.document?.pages[state.pageIndex];
     if (!master || !page3) return queue;
     if (!editable3()) {
-      announce("Open a .vsdx file to add shapes. Model-only documents are read only.");
+      announce("Open a .vsdx file to add shapes.");
       return queue;
     }
     const { size } = master;
@@ -8697,336 +8835,215 @@ function createRulers(viewport) {
     }
   };
 }
-var geometryControlsTemplate = `<fieldset data-geometry><legend>Geometry (experimental)</legend><p>Pin X/Y use drawing inches, bottom-left origin, Y up. Resize holds the rotation pin fixed. Core rejects unsupported formulas, protected cells, unsafe group/master dependencies and referenced deletion. Native Visio reopen fidelity is unverified.</p><label>New rectangle ID <input data-geometry-field="id" type="text" maxlength="256"></label><label>Rectangle text (optional) <input data-geometry-field="text" type="text" maxlength="1000000"></label><label>Pin X (inches) <input data-geometry-field="x" type="number" step="any"></label><label>Pin Y (inches) <input data-geometry-field="y" type="number" step="any"></label><label>Width (inches) <input data-geometry-field="width" type="number" min="0" step="any"></label><label>Height (inches) <input data-geometry-field="height" type="number" min="0" step="any"></label><div class="edit-actions"><button type="button" data-geometry-action="create-rectangle">Create rectangle</button><button type="button" data-geometry-action="move-shape">Move selected</button><button type="button" data-geometry-action="resize-shape">Resize selected</button><button type="button" data-geometry-action="delete-shape">Delete selected</button></div><p data-geometry-error role="alert" hidden></p></fieldset>`;
-var ViewerGeometryControls = class {
-  constructor(panel, controller, draftChanged = () => {
-  }) {
-    this.panel = panel;
+var ViewerInlineText = class {
+  constructor(viewport, controller, announce) {
+    this.viewport = viewport;
     this.controller = controller;
-    this.draftChanged = draftChanged;
-    const field = (name) => panel.querySelector(`[data-geometry-field="${name}"]`);
-    const doc = panel.ownerDocument;
-    const label = doc.createElement("label");
-    label.textContent = "Angle (degrees) ";
-    const angle = doc.createElement("input");
-    angle.type = "number";
-    angle.step = "any";
-    angle.dataset.geometryField = "angle";
-    label.append(angle);
-    const actions = panel.querySelector("[data-geometry] .edit-actions");
-    actions.before(label);
-    const rotate = doc.createElement("button");
-    rotate.type = "button";
-    rotate.dataset.geometryAction = "rotate-shape";
-    rotate.textContent = "Rotate selected";
-    actions.append(rotate);
-    this.#fields = {
-      id: field("id"),
-      text: field("text"),
-      x: field("x"),
-      y: field("y"),
-      width: field("width"),
-      height: field("height"),
-      angle
-    };
-    this.#buttons = [...panel.querySelectorAll("[data-geometry-action]")];
-    this.#error = panel.querySelector("[data-geometry-error]");
+    this.announce = announce;
+    const doc = viewport.ownerDocument;
+    this.input = doc.createElement("textarea");
+    this.input.id = "edit-text";
+    this.input.className = "inline-text";
+    this.input.spellcheck = true;
+    this.input.hidden = true;
+    this.input.setAttribute("aria-label", "Shape text");
   }
-  panel;
+  viewport;
   controller;
-  draftChanged;
-  #fields;
-  #buttons;
-  #error;
-  #identity = "";
-  #request = 0;
-  wire() {
-    const Abort = this.panel.ownerDocument.defaultView?.AbortController ?? AbortController;
-    const events = new Abort();
-    for (const field of Object.values(this.#fields))
-      field.addEventListener(
-        "input",
-        () => {
-          this.render(this.controller.state);
-          this.draftChanged();
-        },
-        {
-          signal: events.signal
-        }
-      );
-    for (const button of this.#buttons)
-      button.addEventListener(
-        "click",
-        () => {
-          void this.#run(button);
-        },
-        { signal: events.signal }
-      );
-    return () => {
-      ++this.#request;
-      events.abort();
-    };
-  }
-  async #run(button) {
-    if (button.disabled) return;
-    const state = this.controller.state;
-    const pageId = state.selectedShape?.pageId ?? state.document?.pages[state.pageIndex]?.id;
-    if (pageId === void 0) return;
-    const type = button.dataset.geometryAction;
-    if (type !== "create-rectangle" && state.selectedShapes.length !== 1) return;
-    const shapeId = type === "create-rectangle" ? this.#fields.id.value : state.selectedShape?.id;
-    if (!shapeId) return;
-    const x = this.#fields.x.valueAsNumber, y = this.#fields.y.valueAsNumber;
-    const width = this.#fields.width.valueAsNumber, height = this.#fields.height.valueAsNumber;
-    const target = { pageId, shapeId };
-    const command2 = type === "create-rectangle" ? {
-      type,
-      ...target,
-      x,
-      y,
-      width,
-      height,
-      ...this.#fields.text.value ? { text: this.#fields.text.value } : {}
-    } : type === "move-shape" ? { type, ...target, x, y } : type === "resize-shape" ? { type, ...target, width, height } : type === "rotate-shape" ? { type, ...target, angle: this.#fields.angle.valueAsNumber * Math.PI / 180 } : { type: "delete-shape", ...target };
-    const request = ++this.#request;
-    this.#error.hidden = true;
-    try {
-      await this.controller.applyEdits([command2]);
-      if (request === this.#request) {
-        this.reset();
-        this.render(this.controller.state);
-        this.draftChanged();
-      }
-    } catch (error) {
-      if (request === this.#request && !isEditCancellation(error)) {
-        this.#error.textContent = editErrorMessage(error);
-        this.#error.hidden = false;
-      }
-    }
-  }
-  get hasDraft() {
-    return Object.values(this.#fields).some((field) => field.value !== "");
-  }
-  reset() {
-    ++this.#request;
-    this.#error.hidden = true;
-    for (const field of Object.values(this.#fields)) field.value = "";
-  }
-  render(state) {
-    const pageId = state.selectedShape?.pageId ?? state.document?.pages[state.pageIndex]?.id;
-    const identity = JSON.stringify([
-      this.controller.sourceGeneration,
-      state.pageIndex,
-      pageId,
-      state.selectedShape?.id,
-      state.selectedShapes.length
-    ]);
-    if (identity !== this.#identity) {
-      this.#identity = identity;
-      ++this.#request;
-      this.#error.hidden = true;
-      for (const field of Object.values(this.#fields)) field.value = "";
-    }
-    const available = state.edit.sourceAvailable && pageId !== void 0 && !state.loading && !state.edit.busy;
-    for (const field of Object.values(this.#fields)) field.disabled = !available;
-    const position = [this.#fields.x, this.#fields.y].every(
-      (field) => Number.isFinite(field.valueAsNumber)
-    );
-    const size = [this.#fields.width, this.#fields.height].every(
-      (field) => Number.isFinite(field.valueAsNumber) && field.valueAsNumber > 0
-    );
-    const selected = selectedShape(state.document, state.selectedShape, state.pageIndex);
-    const lineSize = selected?.kind === "connector" && selected.height === 0 && Number.isFinite(this.#fields.width.valueAsNumber) && this.#fields.width.valueAsNumber > 0 && this.#fields.height.valueAsNumber === 0;
-    for (const button of this.#buttons) {
-      const action2 = button.dataset.geometryAction;
-      button.disabled = !available || (action2 === "create-rectangle" ? !this.#fields.id.value || !position || !size : !state.selectedShape || state.selectedShapes.length !== 1 || action2 === "move-shape" && !position || action2 === "resize-shape" && !size && !lineSize || action2 === "rotate-shape" && (!Number.isFinite(this.#fields.angle.valueAsNumber) || selected?.kind === "connector"));
-    }
-  }
-};
-
-// src/visio/viewer-edit-controls.ts
-var editControlsTemplate = `<details class="edit-controls"><summary>Edit diagram (experimental)</summary><p id="edit-warning">Experimental source-backed editing. Unsupported targets are rejected. Native Visio compatibility is not verified. Keep your original file.</p><p data-edit-target></p><label for="edit-text">Selected shape text</label><textarea id="edit-text" rows="3" spellcheck="true" aria-describedby="edit-warning edit-target edit-status"></textarea><div class="edit-actions"><button type="button" data-edit="apply">Apply text</button><button type="button" data-edit="cancel">Cancel</button><button type="button" data-edit="undo">Undo</button><button type="button" data-edit="redo">Redo</button></div><p id="edit-status" role="status" aria-live="polite"></p><p data-edit-error role="alert" hidden></p><ul data-edit-diagnostics></ul>${geometryControlsTemplate}</details>`;
-var ViewerEditControls = class {
-  panel;
+  announce;
   input;
-  #target;
-  #status;
-  #error;
-  #diagnostics;
-  #buttons;
-  #identity = "";
-  #initial = "";
-  #pageId;
-  #shapeId;
+  #session;
   #request = 0;
-  #pending = false;
-  #localError;
-  #controller;
-  #geometry;
-  constructor(root, controller) {
-    this.#controller = controller;
-    this.panel = root.querySelector(".edit-controls");
-    this.#geometry = new ViewerGeometryControls(
-      this.panel,
-      controller,
-      () => this.render(controller.state)
-    );
-    this.input = this.panel.querySelector("textarea");
-    this.#target = this.panel.querySelector("[data-edit-target]");
-    this.#target.id = "edit-target";
-    this.#status = this.panel.querySelector("#edit-status");
-    this.#error = this.panel.querySelector("[data-edit-error]");
-    this.#diagnostics = this.panel.querySelector("[data-edit-diagnostics]");
-    const button = (name) => this.panel.querySelector(`[data-edit="${name}"]`);
-    this.#buttons = {
-      apply: button("apply"),
-      cancel: button("cancel"),
-      undo: button("undo"),
-      redo: button("redo")
-    };
+  get editing() {
+    return !!this.#session;
   }
   wire() {
-    const disposeGeometry = this.#geometry.wire();
-    const Abort = this.panel.ownerDocument.defaultView?.AbortController ?? AbortController;
+    const Abort = this.viewport.ownerDocument.defaultView?.AbortController ?? AbortController;
     const events = new Abort();
     const options2 = { signal: events.signal };
-    this.input.addEventListener("input", () => this.render(this.#controller.state), options2);
-    this.input.addEventListener(
+    const input = this.input;
+    input.addEventListener("input", () => this.#layout(), options2);
+    input.addEventListener(
       "keydown",
       (event) => {
+        event.stopPropagation();
         if (event.isComposing) return;
-        if (event.key === "Escape") {
+        if (event.key === "Escape" || event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
           event.preventDefault();
-          this.reset();
-        }
-        if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
-          event.preventDefault();
-          this.#buttons.apply.click();
+          void this.commit(true);
         }
       },
       options2
     );
-    this.#buttons.cancel.addEventListener("click", () => this.reset(), options2);
-    for (const action2 of ["apply", "undo", "redo"])
-      this.#buttons[action2].addEventListener(
-        "click",
-        () => {
-          void this.#run(action2);
-        },
-        options2
-      );
+    for (const name of ["pointerdown", "click", "dblclick", "contextmenu"])
+      input.addEventListener(name, (event) => event.stopPropagation(), options2);
+    this.viewport.addEventListener(
+      "pointerdown",
+      (event) => {
+        if (this.#session && event.target !== input) void this.commit(false);
+      },
+      { ...options2, capture: true }
+    );
     return () => {
-      disposeGeometry();
       events.abort();
       ++this.#request;
-      this.#pending = false;
-      this.#localError = void 0;
-      this.#identity = "";
-      this.input.value = this.#initial;
+      this.#close();
+      input.remove();
     };
   }
-  reset(focus = true) {
-    this.#geometry.reset();
-    ++this.#request;
-    this.#pending = false;
-    this.#localError = void 0;
-    this.#controller.cancelEdit();
-    this.input.value = this.#initial;
-    this.render(this.#controller.state);
-    if (focus && !this.input.disabled) this.input.focus();
-  }
-  async #run(action2) {
-    if (this.#buttons[action2].disabled) return;
-    if (action2 === "apply" && this.#controller.state.selectedShapes.length !== 1) return;
+  /**
+   * Start editing the one selected shape's text. `typed` replaces the text with a typed character,
+   * as typing on a selected shape does in Visio. False when the selection has no editable text.
+   */
+  start(typed) {
+    const state = this.controller.state;
+    const page3 = state.document?.pages[state.pageIndex];
+    const selected = state.selectedShape;
+    if (this.#session) {
+      this.input.focus();
+      return true;
+    }
+    if (!page3 || !selected || state.selectedShapes.length !== 1) {
+      this.announce("Select one shape to edit its text.");
+      return false;
+    }
+    if (!state.edit.sourceAvailable || state.edit.busy || state.loading) {
+      this.announce("This drawing cannot be edited.");
+      return false;
+    }
+    const shape = visioTextShape(page3, selected.id);
+    if (!shape) return false;
+    const group2 = this.viewport.querySelector(
+      `svg.paper [data-shape-id="${CSS.escape(shape.id)}"]`
+    );
+    const initial = shape.text?.plainText ?? "";
+    this.#session = {
+      pageId: page3.id,
+      shapeId: shape.id,
+      initial,
+      generation: this.controller.sourceGeneration,
+      document: state.document,
+      group: group2
+    };
+    group2?.setAttribute("data-editing-text", "");
+    this.viewport.dataset.textEditing = "";
+    this.#style(shape, state.zoom || 1);
+    this.input.value = typed ?? initial;
+    this.input.hidden = false;
+    this.viewport.append(this.input);
+    this.#layout();
+    this.input.focus({ preventScroll: true });
+    const end = this.input.value.length;
+    this.input.setSelectionRange(end, end);
+    return true;
+  }
+  /** Save the draft as one edit; `focusCanvas` returns keyboard focus to the drawing. */
+  async commit(focusCanvas) {
+    const session = this.#session;
+    if (!session) return;
+    const draft = this.input.value;
+    this.#close();
+    if (focusCanvas) this.viewport.focus({ preventScroll: true });
+    const state = this.controller.state;
+    const page3 = state.document?.pages.find((item) => item.id === session.pageId);
+    if (!page3 || this.controller.sourceGeneration !== session.generation || draft === session.initial)
+      return;
     const request = ++this.#request;
-    this.#pending = true;
-    this.#localError = void 0;
-    this.render(this.#controller.state);
     try {
-      if (action2 === "apply") {
-        if (this.#pageId === void 0 || this.#shapeId === void 0) return;
-        const page3 = this.#controller.state.document?.pages.find(
-          (item) => item.id === this.#pageId
-        );
-        if (page3 && visioTextShape(page3, this.#shapeId)?.text.fields?.length) {
-          const edit = visioTextDraftEdit(page3, this.#shapeId, this.input.value);
-          if (edit) await this.#controller.applyEdits([edit]);
-        } else
-          await this.#controller.replacePlainText(this.#pageId, this.#shapeId, this.input.value);
-      } else await this.#controller[action2]();
+      const shape = visioTextShape(page3, session.shapeId);
+      const rich = !!shape && shape.masterId === void 0 && shape.text.runs.length > 1;
+      const edit = visioTextDraftEdit(page3, session.shapeId, draft, rich ? { ranges: true } : {});
+      if (edit) await this.controller.applyEdits([edit]);
     } catch (error) {
       if (request === this.#request && !isEditCancellation(error))
-        this.#localError = editErrorMessage(error);
-    } finally {
-      if (request === this.#request) {
-        this.#pending = false;
-        this.render(this.#controller.state);
-      }
+        this.announce(editErrorMessage(error));
     }
   }
+  /**
+   * Selecting something else or changing page saves; another edit to the same drawing (formatting,
+   * a move, undo) keeps the draft on the redrawn shape; a different file discards it.
+   */
   render(state) {
-    this.#geometry.render(state);
-    const selection2 = state.selectedShape;
-    const pageId = selection2?.pageId ?? state.document?.pages[state.pageIndex]?.id;
-    const shape = selectedShape(state.document, selection2, state.pageIndex);
-    const identity = JSON.stringify([
-      this.#controller.sourceGeneration,
-      state.pageIndex,
-      pageId,
-      selection2?.id,
-      state.selectedShapes.length
-    ]);
-    if (identity !== this.#identity) {
-      this.#identity = identity;
-      ++this.#request;
-      this.#pending = false;
-      this.#localError = void 0;
-      this.#pageId = shape ? pageId : void 0;
-      this.#shapeId = shape?.id;
-      this.#initial = shape?.text?.plainText ?? "";
-      this.input.value = this.#initial;
-    } else if (shape) {
-      const dirty = this.input.value !== this.#initial;
-      this.#initial = shape.text?.plainText ?? "";
-      if (!dirty) this.input.value = this.#initial;
-    }
-    const busy = state.loading || state.edit.busy || this.#pending;
-    const available = state.edit.sourceAvailable && !!shape && pageId !== void 0 && state.selectedShapes.length === 1;
-    this.panel.setAttribute("aria-busy", String(busy));
-    this.#target.textContent = state.selectedShapes.length > 1 ? "Select one shape to edit its plain text." : shape ? `Page ID: ${pageId} \xB7 Shape ID: ${shape.id} \xB7 ${shape.name || "Unnamed shape"}${shape.text?.fields?.length ? ` \xB7 ${shape.text.fields.length} text field${shape.text.fields.length > 1 ? "s" : ""} (kept as whole values; edit the text around them)` : ""}` : "Select a shape to replace its plain text.";
-    this.input.disabled = !available || busy;
-    this.#buttons.apply.disabled = !available || busy || this.input.value === this.#initial;
-    this.#buttons.cancel.disabled = !state.edit.busy && !this.#pending && this.input.value === this.#initial && !this.#geometry.hasDraft;
-    this.#buttons.undo.disabled = busy || !state.edit.canUndo;
-    this.#buttons.redo.disabled = busy || !state.edit.canRedo;
-    this.#status.textContent = state.loading ? "Opening diagram\u2026" : busy ? "Updating diagram\u2026" : !state.edit.sourceAvailable ? "Open a .vsdx file to edit or download a VSDX copy. Model-only documents cannot be saved." : `${state.edit.dirty ? "Edited copy" : "Original bytes"}${state.edit.historyTruncated ? " \xB7 Earlier undo history was discarded." : ""}`;
-    const error = this.#localError ?? (state.edit.error ? editErrorMessage(state.edit.error) : void 0);
-    this.#error.hidden = !error;
-    this.#error.textContent = error ?? "";
-    this.#diagnostics.replaceChildren(
-      ...state.edit.diagnostics.map((diagnostic) => {
-        const item = this.panel.ownerDocument.createElement("li");
-        item.textContent = `${diagnostic.code}: ${diagnostic.message}`;
-        return item;
-      })
-    );
+    const session = this.#session;
+    if (!session) return;
+    const page3 = state.document?.pages[state.pageIndex];
+    const shape = page3?.id === session.pageId ? visioTextShape(page3, session.shapeId) : void 0;
+    if (this.controller.sourceGeneration !== session.generation || !state.document) {
+      this.#close();
+      return;
+    }
+    if (!shape || state.selectedShapes.length !== 1 || state.selectedShape?.id !== session.shapeId) {
+      void this.commit(false);
+      return;
+    }
+    if (state.document !== session.document) {
+      const dirty = this.input.value !== session.initial;
+      session.document = state.document;
+      session.initial = shape.text?.plainText ?? "";
+      if (!dirty) this.input.value = session.initial;
+      session.group = this.viewport.querySelector(
+        `svg.paper [data-shape-id="${CSS.escape(shape.id)}"]`
+      );
+      session.group?.setAttribute("data-editing-text", "");
+      this.#style(shape, state.zoom || 1);
+    }
+    if (!this.input.isConnected) {
+      const { selectionStart, selectionEnd } = this.input;
+      this.viewport.append(this.input);
+      this.viewport.dataset.textEditing = "";
+      this.input.focus({ preventScroll: true });
+      this.input.setSelectionRange(selectionStart, selectionEnd);
+    }
+    this.#layout();
+  }
+  #close() {
+    const session = this.#session;
+    this.#session = void 0;
+    session?.group?.removeAttribute("data-editing-text");
+    delete this.viewport.dataset.textEditing;
+    this.input.hidden = true;
+    this.input.remove();
+  }
+  /** Match the shape's text: family, size at this zoom, colour and alignment. */
+  #style(shape, zoom) {
+    const text = shape.text;
+    const style = this.input.style;
+    style.fontFamily = text?.fontFamily ? `"${text.fontFamily}", var(--office-font)` : "";
+    style.fontSize = `${Math.max(8, (text?.fontSize ?? 12 / 72) * 96 * zoom)}px`;
+    style.color = text?.color ?? "";
+    style.textAlign = text?.horizontalAlign === "justify" ? "justify" : text?.horizontalAlign ?? "center";
+    this.input.dataset.verticalAlign = text?.verticalAlign ?? "middle";
+  }
+  /** Cover the shape's drawn box and keep the text vertically placed as the shape aligns it. */
+  #layout() {
+    const session = this.#session;
+    if (!session) return;
+    const box2 = this.viewport.getBoundingClientRect();
+    const rect = session.group?.getBoundingClientRect();
+    const width = Math.max(48, rect?.width ?? 160);
+    const height = Math.max(24, rect?.height ?? 48);
+    const style = this.input.style;
+    style.left = `${(rect ? rect.left - box2.left : 16) + this.viewport.scrollLeft}px`;
+    style.top = `${(rect ? rect.top - box2.top : 16) + this.viewport.scrollTop}px`;
+    style.width = `${width}px`;
+    style.paddingTop = "0px";
+    style.height = "0px";
+    const content = this.input.scrollHeight;
+    const free = Math.max(0, height - content);
+    style.height = `${Math.max(height, content)}px`;
+    const align = this.input.dataset.verticalAlign;
+    style.paddingTop = `${align === "top" ? 0 : align === "bottom" ? free : free / 2}px`;
   }
 };
 
 // src/visio/viewer-chrome.ts
 var viewerChromeTemplate = `<div class="workspace">
   <div class="viewport" tabindex="0" role="region" aria-label="Diagram canvas"></div>
-  <aside id="inspector-pane" class="inspector-pane" aria-label="Drawing inspector">
-    <div class="pane-heading"><span>Inspector</span><span class="inspector-kind">Drawing</span><button class="pane-close" type="button" data-chrome="inspector" aria-label="Close inspector">\xD7</button></div>
-    <div class="inspector-body">
-      <section class="inspector-card document-card" aria-label="Current page"><h2>Current page</h2><p class="current-page-name" data-page-name>No diagram open</p><dl><dt>Size</dt><dd data-page-size>No page</dd><dt>Shapes</dt><dd data-page-shapes>No shapes</dd></dl></section>
-      <p class="selection-hint">Select a shape on the canvas to see its data and links.</p>
-      <details class="shape-inspector inspector-card" hidden><summary>Selected shape</summary><div></div></details>
-      ${editControlsTemplate}${layerControlsTemplate}
-      <details class="notes inspector-card"><summary>Compatibility notes</summary><ul></ul></details>
-    </div>
-  </aside>
+  <office-ui-task-pane id="inspector-pane" class="inspector-pane" label="Shape Data" hidden>
+    <section class="shape-inspector" data-pane-view="selection"><p class="selection-hint">No Shape Data</p><div></div></section>
+  </office-ui-task-pane>
 </div>`;
+var PANE_TITLES = { selection: "Shape Data" };
 var ViewerChrome = class {
   #root;
   #controller;
@@ -9036,7 +9053,7 @@ var ViewerChrome = class {
   #tools;
   #inspector;
   #panes;
-  #notes;
+  #view = "selection";
   #responsive;
   #compact;
   /** Panes the user showed or hid; responsive defaults leave them alone afterwards. */
@@ -9049,7 +9066,6 @@ var ViewerChrome = class {
     this.#tools = root.querySelector(".ribbon-tools");
     this.#inspector = root.querySelector(".inspector-pane");
     this.#panes = { shapes: root.querySelector(".shapes-pane"), inspector: this.#inspector };
-    this.#notes = root.querySelector(".notes");
   }
   wire() {
     const view = this.#root.ownerDocument.defaultView;
@@ -9078,7 +9094,7 @@ var ViewerChrome = class {
     );
     const responsive = () => {
       if (!this.#manual.has("shapes")) this.#setPane("shapes", !this.#responsive?.matches);
-      if (!this.#manual.has("inspector")) this.#setPane("inspector", !compact?.matches);
+      if (!this.#manual.has("inspector")) this.#setPane("inspector", false);
     };
     responsive();
     this.#responsive?.addEventListener("change", responsive, options2);
@@ -9090,7 +9106,15 @@ var ViewerChrome = class {
         if (!button || button.disabled) return;
         const action2 = button.dataset.chrome;
         if (action2 === "inspector" || action2 === "shapes") this.togglePane(action2);
-        if (action2 === "notes") this.reveal("notes");
+      },
+      options2
+    );
+    this.#inspector.addEventListener(
+      "office-pane-close",
+      () => {
+        this.#manual.add("inspector");
+        this.#setPane("inspector", false);
+        this.#root.querySelector(".viewport")?.focus({ preventScroll: true });
       },
       options2
     );
@@ -9114,7 +9138,6 @@ var ViewerChrome = class {
       options2
     );
     this.#root.addEventListener("office-ribbon-select", () => this.closeCompactTools(), options2);
-    this.#notes.addEventListener("toggle", () => this.#syncNotes(), options2);
     return () => events.abort();
   }
   showTab(tab) {
@@ -9140,36 +9163,33 @@ var ViewerChrome = class {
       for (const other of Object.keys(this.#panes))
         if (other !== pane) {
           this.#panes[other].hidden = true;
-          this.#command(other).setAttribute("checked", "false");
+          this.#command(other)?.setAttribute("checked", "false");
         }
     }
     this.#panes[pane].hidden = !visible;
-    this.#command(pane).setAttribute("checked", String(visible));
+    this.#command(pane)?.setAttribute("checked", String(visible));
+    this.#command("shape-data")?.setAttribute(
+      "checked",
+      String(!this.#inspector.hidden && this.#view === "selection")
+    );
     if (pane === "shapes") {
       const strip = this.#root.querySelector(".shapes-strip");
       if (strip) strip.hidden = visible || !!this.#compact?.matches;
     }
-    this.#syncNotes();
-  }
-  #syncNotes() {
-    this.#root.querySelector(".notes-strip button").setAttribute("aria-expanded", String(!this.#inspector.hidden && this.#notes.open));
   }
-  /** Open an inspector disclosure; text editing may focus the text field directly (F2). */
-  reveal(kind, focusText = false) {
+  /** Show a task pane view (Shape Data) and move focus into it. */
+  reveal(kind) {
     if (this.#compact?.matches) this.#tools.open = false;
+    this.#view = kind;
+    for (const view of this.#inspector.querySelectorAll("[data-pane-view]"))
+      view.toggleAttribute("data-active", view.dataset.paneView === kind);
+    this.#inspector.setAttribute("label", PANE_TITLES[kind]);
     this.#manual.add("inspector");
     this.#setPane("inspector", true);
-    const selector = kind === "notes" ? ".notes" : kind === "edit" ? ".edit-controls" : kind === "layers" ? ".layer-controls" : ".shape-inspector";
-    const panel = this.#root.querySelector(selector);
-    if (panel.hidden) return;
-    panel.open = true;
-    const text = panel.querySelector("textarea");
-    if (focusText && text && !text.disabled) text.focus();
-    else panel.querySelector("summary").focus();
-    panel.scrollIntoView?.({ block: "nearest", inline: "nearest" });
-    this.#syncNotes();
-  }
-  render(state, noteCount) {
+    const panel = this.#inspector.querySelector(`[data-pane-view="${kind}"]`);
+    (panel.querySelector("input, button, a[href]") ?? this.#inspector).focus();
+  }
+  render(state) {
     const page3 = state.document?.pages[state.pageIndex];
     const doc = this.#root.ownerDocument;
     if (state.document !== this.#document) {
@@ -9235,18 +9255,7 @@ var ViewerChrome = class {
       "value",
       page3 ? `Page ${state.pageIndex + 1} of ${state.document.pages.length}` : ""
     );
-    this.#root.querySelector("[data-page-name]").textContent = page3?.name ?? "No diagram open";
-    this.#root.querySelector("[data-page-size]").textContent = page3 ? `${page3.width} \xD7 ${page3.height} in` : "No page";
-    this.#root.querySelector("[data-page-shapes]").textContent = page3 ? `${page3.shapes.length} top-level` : "No shapes";
     this.#root.querySelector(".selection-hint").hidden = !!state.selectedShape;
-    const layers = Boolean(this.#root.querySelector(".layer-controls").hidden);
-    this.#command("shape-data").disabled = !state.selectedShape;
-    this.#command("layer-properties").disabled = layers;
-    this.#command("layers-pane").disabled = layers;
-    this.#command("notes").disabled = noteCount === 0;
-    this.#root.querySelector(".notes-strip button").disabled = noteCount === 0;
-    this.#root.querySelector("[data-note-count]").textContent = noteCount ? ` \xB7 ${noteCount}` : "";
-    this.#syncNotes();
   }
 };
 var ViewerCanvas = class {
@@ -9366,8 +9375,6 @@ var ViewerCanvas = class {
       const inspected = selectedShape(state.document, selection2, state.pageIndex);
       if (inspected !== this.#inspected) {
         this.#inspected = inspected;
-        this.inspector.hidden = !inspected;
-        if (inspected) this.inspector.open = true;
         this.inspector.querySelector("div").replaceChildren(...inspected ? [shapeDetails(inspected)] : []);
       }
       this.#selection = selection2 ? { ...selection2 } : null;
@@ -9388,6 +9395,7 @@ function routeRibbonAction(targets, action2) {
     case "re-layout":
     case "layout-options":
     case "assign-layers":
+    case "layer-properties":
     case "select-by-type":
     case "paste-special":
     case "guides":
@@ -11064,8 +11072,7 @@ var ViewerDuplication = class {
   controller;
   edit;
   reason(state) {
-    if (!state.edit.sourceAvailable)
-      return "Open a .vsdx file to duplicate shapes. Model-only documents are read only.";
+    if (!state.edit.sourceAvailable) return "Open a .vsdx file to duplicate shapes.";
     if (state.loading || state.edit.busy) return "Wait for the current operation to finish.";
     if (!state.selectedShapes.length) return "Select shapes to duplicate.";
     const page3 = state.document?.pages[state.pageIndex];
@@ -11106,8 +11113,7 @@ var ViewerGrouping = class {
   controller;
   edit;
   reason(state, operation) {
-    if (!state.edit.sourceAvailable)
-      return "Open a .vsdx file to group shapes. Model-only documents are read only.";
+    if (!state.edit.sourceAvailable) return "Open a .vsdx file to group shapes.";
     if (state.loading || state.edit.busy) return "Wait for the current operation to finish.";
     const page3 = state.document?.pages[state.pageIndex];
     if (!page3 || state.selectedShapes.some((shape) => !visioSelectionIsOnPage(shape, page3.id)))
@@ -11170,8 +11176,7 @@ var ViewerClipboard = class {
     return operation === "paste" ? typeof this.clipboard?.readText === "function" : this.hasPromiseWrite() || typeof this.clipboard?.writeText === "function";
   }
   baseReason(state) {
-    if (!state.edit.sourceAvailable)
-      return "Open a .vsdx file. Model-only documents are read only.";
+    if (!state.edit.sourceAvailable) return "Open a .vsdx file.";
     if (state.loading || state.edit.busy || this.#pending)
       return "Wait for the current operation to finish.";
     if (!state.document?.pages[state.pageIndex]) return "Open a page before using the clipboard.";
@@ -11978,8 +11983,8 @@ var ViewerPageSetupDialog = class {
     const paper = f("paper");
     if (paper && Number(paper) !== setup?.paperKind) print.paperKind = Number(paper);
     const orientation = f("print-orientation");
-    const saved = setup?.printPageOrientation === 1 ? "portrait" : setup?.printPageOrientation === 2 ? "landscape" : "";
-    if ((orientation === "portrait" || orientation === "landscape") && orientation !== saved)
+    const saved2 = setup?.printPageOrientation === 1 ? "portrait" : setup?.printPageOrientation === 2 ? "landscape" : "";
+    if ((orientation === "portrait" || orientation === "landscape") && orientation !== saved2)
       print.printOrientation = orientation;
     if (Object.keys(print).length > 2) edits.push(print);
     return visioKeepAutoSize(page3, edits);
@@ -12844,7 +12849,7 @@ var ViewerComments = class {
     if (this.pane.labels.newComment !== newComment)
       this.pane.labels = { empty: "No comments on this page.", newComment };
     const button = (name) => this.root.querySelector(`[command="${name}"]`);
-    const reason = !page3 ? "Open a drawing first." : !state.edit.sourceAvailable ? "Open a .vsdx file to add comments. Model-only documents are read only." : !editable3 ? "Wait for the current operation to finish." : "";
+    const reason = !page3 ? "Open a drawing first." : !state.edit.sourceAvailable ? "Open a .vsdx file to add comments." : !editable3 ? "Wait for the current operation to finish." : "";
     for (const name of ["new-comment", "ctx-comment", "ctx-page-comment"]) {
       const control = button(name);
       if (!control) continue;
@@ -13235,8 +13240,7 @@ var ViewerSubprocess = class {
     return state.selectedShapes.map((shape) => shape.id);
   }
   reason(state, mode) {
-    if (!state.edit.sourceAvailable)
-      return "Open a .vsdx file to create subprocesses. Model-only documents are read only.";
+    if (!state.edit.sourceAvailable) return "Open a .vsdx file to create subprocesses.";
     if (state.loading || state.edit.busy) return "Wait for the current operation to finish.";
     const page3 = this.#page(state);
     if (!page3 || page3.isBackground) return "Open a foreground page.";
@@ -13427,8 +13431,7 @@ var ViewerDiagramParts = class {
   edit;
   revealText;
   reason(state, part) {
-    if (!state.edit.sourceAvailable)
-      return "Open a .vsdx file to insert diagram parts. Model-only documents are read only.";
+    if (!state.edit.sourceAvailable) return "Open a .vsdx file to insert diagram parts.";
     if (state.loading || state.edit.busy) return "Wait for the current operation to finish.";
     const page3 = state.document?.pages[state.pageIndex];
     if (!page3 || state.selectedShapes.some((shape) => !visioSelectionIsOnPage(shape, page3.id)))
@@ -14711,7 +14714,8 @@ var ViewerGuides = class {
   controller;
   announce;
   #shown = false;
-  #dynamic = false;
+  /** On by default, as in Visio: moving shapes snap to other shapes' edges and centres. */
+  #dynamic = true;
   #selected;
   #drag;
   get shown() {
@@ -14736,16 +14740,20 @@ var ViewerGuides = class {
   #editable(state) {
     return state.edit.sourceAvailable && !state.loading && !state.edit.busy;
   }
-  /** Snap a shape drag; draws alignment hints. Unchanged when no snapping is active. */
-  snap(page3, ids, delta) {
+  /**
+   * Snap a shape drag; draws alignment hints. `grid` is the Snap to Grid step in page inches (0
+   * while the grid is hidden). Unchanged when no snapping is active.
+   */
+  snap(page3, ids, delta, grid = 0) {
     const svg2 = this.#svg();
     this.clearHints();
-    if (!this.#shown && !this.#dynamic) return delta;
+    if (!this.#shown && !this.#dynamic && !grid) return delta;
     const zoom = this.controller.state.zoom || 1;
     const result = visioSnapMoveDelta(page3, ids, delta, {
       shapes: this.#dynamic,
       guides: this.#shown,
-      threshold: SNAP_PIXELS / (96 * zoom)
+      threshold: SNAP_PIXELS / (96 * zoom),
+      grid
     });
     if (!svg2 || !result.lines.length) return result.delta;
     const hints = svg2.ownerDocument.createElementNS(SVG3, "g");
@@ -15101,6 +15109,180 @@ var ViewerLayerAssign = class {
       this.dialog.close();
   }
 };
+var LABEL4 = "Layer Properties";
+var FLAGS = [
+  ["visible", "Visible"],
+  ["print", "Print"],
+  ["lock", "Lock"]
+];
+var saved = (layer, flag) => flag === "visible" ? layer.visible : flag === "print" ? layer.printable : layer.locked;
+var ViewerLayerProperties = class {
+  constructor(root, controller, announce) {
+    this.root = root;
+    this.controller = controller;
+    this.announce = announce;
+    const doc = root.ownerDocument;
+    this.dialog = new ViewerDialog(
+      root,
+      "layer-properties-dialog",
+      LABEL4,
+      ["OK", "Cancel"],
+      (b) => b === "OK" ? void this.#apply() : this.dialog.close()
+    );
+    this.#table = doc.createElement("table");
+    this.#table.className = "layer-table";
+    this.#note = doc.createElement("p");
+    this.#note.className = "layer-note";
+    this.dialog.body.append(this.#table, this.#note);
+  }
+  root;
+  controller;
+  announce;
+  dialog;
+  #table;
+  #note;
+  #generation;
+  #sources(state) {
+    const model = state.document;
+    const page3 = model?.pages[state.pageIndex];
+    return model && page3 ? getVisioPageLayers(model, page3.id) : [];
+  }
+  open() {
+    const state = this.controller.state;
+    const model = state.document;
+    const sources = this.#sources(state);
+    if (!model || !sources.some((source) => source.layers?.length)) {
+      this.announce(`${LABEL4}: this page has no layers. Use Assign to Layer to add one.`);
+      return;
+    }
+    const doc = this.root.ownerDocument;
+    const editable3 = state.edit.sourceAvailable;
+    const overrides = layerOverrideMaps(model, state.layerVisibilityOverrides);
+    const cell = (tag, text = "") => Object.assign(doc.createElement(tag), { textContent: text });
+    const head = doc.createElement("thead");
+    const titles = doc.createElement("tr");
+    for (const title2 of ["Name", "#", "Visible", "Print", "Lock", "Color"])
+      titles.append(Object.assign(cell("th", title2), { scope: "col" }));
+    head.append(titles);
+    const body = doc.createElement("tbody");
+    let shown = 0;
+    for (const source of sources) {
+      const page3 = model.pages.find((candidate) => candidate.id === source.id);
+      const layers = source.layers ?? [];
+      if (!layers.length) continue;
+      if (sources.length > 1) {
+        const caption = doc.createElement("tr");
+        const label = cell(
+          "th",
+          source.id === sources[0].id ? source.name : `${source.name} (background)`
+        );
+        label.colSpan = 6;
+        label.scope = "rowgroup";
+        caption.className = "layer-page";
+        caption.append(label);
+        body.append(caption);
+      }
+      for (const layer of layers) {
+        if (shown >= VIEWER_LAYER_LIMITS.controls) break;
+        ++shown;
+        const name = layer.name.slice(0, 256) || "Layer";
+        const row = doc.createElement("tr");
+        row.dataset.pageId = source.id;
+        row.dataset.layerId = layer.id;
+        const count = (page3?.shapes ?? []).filter(
+          (shape) => shape.layerIds?.includes(layer.id)
+        ).length;
+        row.append(Object.assign(cell("th", name), { scope: "row" }), cell("td", String(count)));
+        for (const [flag, title2] of FLAGS) {
+          const box2 = doc.createElement("input");
+          box2.type = "checkbox";
+          box2.dataset.flag = flag;
+          box2.setAttribute("aria-label", `${name}: ${title2}`);
+          const override = flag === "visible" ? overrides.get(source.id)?.get(layer.id) : void 0;
+          box2.checked = override ?? saved(layer, flag);
+          box2.disabled = !editable3 && flag !== "visible";
+          const holder = cell("td");
+          holder.append(box2);
+          row.append(holder);
+        }
+        const colour = cell("td");
+        if (layer.color) {
+          const swatch = doc.createElement("span");
+          swatch.className = "layer-colour";
+          swatch.style.background = layer.color;
+          swatch.title = layer.color;
+          colour.append(swatch);
+        }
+        row.append(colour);
+        body.append(row);
+      }
+    }
+    this.#table.replaceChildren(head, body);
+    this.#note.textContent = editable3 ? "" : "This drawing is read-only: Visible changes how it is shown here and is not saved.";
+    this.#generation = this.controller.documentGeneration;
+    this.dialog.show();
+    this.#table.querySelector("input:not([disabled])")?.focus();
+  }
+  async #apply() {
+    const state = this.controller.state;
+    const model = state.document;
+    if (!model || this.controller.documentGeneration !== this.#generation) {
+      this.dialog.close();
+      return;
+    }
+    const editable3 = state.edit.sourceAvailable;
+    const sources = new Map(this.#sources(state).map((source) => [source.id, source]));
+    const edits = [];
+    const shown = [];
+    for (const row of this.#table.querySelectorAll("tr[data-layer-id]")) {
+      const pageId = row.dataset.pageId, layerId = row.dataset.layerId;
+      const layer = sources.get(pageId)?.layers?.find((candidate) => candidate.id === layerId);
+      if (!layer) continue;
+      const value = (flag) => row.querySelector(`input[data-flag="${flag}"]`).checked;
+      if (!editable3) {
+        shown.push({
+          pageId,
+          layerId,
+          visible: value("visible") === layer.visible ? null : value("visible")
+        });
+        continue;
+      }
+      const changed = FLAGS.filter(([flag]) => value(flag) !== saved(layer, flag));
+      if (changed.length)
+        edits.push({
+          type: "set-layer-properties",
+          pageId,
+          layerId,
+          ...Object.fromEntries(changed.map(([flag]) => [flag, value(flag)]))
+        });
+      shown.push({ pageId, layerId, visible: null });
+    }
+    this.dialog.busy(true);
+    try {
+      if (edits.length) await this.controller.applyEdits(edits);
+      for (const item of shown)
+        this.controller.setLayerVisibility(item.pageId, item.layerId, item.visible);
+      this.dialog.close();
+      if (edits.length)
+        this.announce(`Updated ${edits.length} layer${edits.length === 1 ? "" : "s"}.`);
+    } catch (error) {
+      if (this.dialog.open && !isEditCancellation(error))
+        this.dialog.error.textContent = editErrorMessage(error);
+    } finally {
+      this.dialog.busy(false);
+    }
+  }
+  render(state) {
+    const none = !this.#sources(state).some((source) => source.layers?.length);
+    const command2 = this.root.querySelector('[command="layer-properties"]');
+    if (command2) {
+      command2.disabled = none;
+      command2.title = none ? `${LABEL4}: this page has no layers.` : `${LABEL4}...`;
+    }
+    if (this.dialog.open && (state.loading || this.controller.documentGeneration !== this.#generation))
+      this.dialog.close();
+  }
+};
 var AUTO_ALIGN = "Auto Align & Space";
 var ViewerLayout = class {
   constructor(root, controller, run) {
@@ -15513,6 +15695,7 @@ var ViewerLayoutCommands = class {
     const { root, controller, announce } = host;
     this.layout = new ViewerLayout(root, controller, host.edit);
     this.layers = new ViewerLayerAssign(root, controller, announce);
+    this.layerProperties = new ViewerLayerProperties(root, controller, announce);
     this.select = new ViewerSelectType(root, controller, announce);
     this.paste = new ViewerPasteSpecial(root, controller, announce, host.pasteShapes);
     this.guides = new ViewerGuides(root, host.viewport, host.rulers, controller, announce);
@@ -15521,6 +15704,7 @@ var ViewerLayoutCommands = class {
   host;
   layout;
   layers;
+  layerProperties;
   select;
   paste;
   guides;
@@ -15535,6 +15719,8 @@ var ViewerLayoutCommands = class {
         return this.layout.showOptions();
       case "assign-layers":
         return this.layers.open();
+      case "layer-properties":
+        return this.layerProperties.open();
       case "select-by-type":
         return this.select.open();
       case "paste-special":
@@ -15571,6 +15757,7 @@ var ViewerLayoutCommands = class {
   render(state) {
     this.layout.render(state);
     this.layers.render(state);
+    this.layerProperties.render(state);
     this.select.render(state);
     this.paste.render(state);
     this.guides.render(state);
@@ -16371,7 +16558,7 @@ var ViewerTextFeatures = class {
   /** The shape text editor, when it holds the caret for the selected shape. */
   #activeEditor() {
     const editor = this.#editor;
-    return editor?.isConnected && !editor.disabled && editor.closest("details")?.open ? editor : void 0;
+    return editor?.isConnected && !editor.disabled && !editor.hidden ? editor : void 0;
   }
   run(feature) {
     const { state, page: page3, editing, shapes, formattable, single } = this.#state();
@@ -16477,7 +16664,6 @@ var ViewerTextFeatures = class {
       this.#language.dialog.close();
   }
   #spelling(page3) {
-    const editor = this.root.querySelector(EDITOR);
     const state = this.controller.state;
     const selected = state.selectedShape;
     const texts = [];
@@ -16489,17 +16675,15 @@ var ViewerTextFeatures = class {
     };
     visit(page3.shapes);
     const shape = texts.find((item) => item.id === selected?.id) ?? texts[0];
-    if (!editor || !shape) {
-      this.announce(
-        editor ? "This page has no shape text to check." : "Spelling needs the shape text editor."
-      );
+    if (!shape) {
+      this.announce("This page has no shape text to check.");
       return;
     }
     if (shape.id !== selected?.id || state.selectedShapes.length !== 1)
       this.controller.selectShape({ id: shape.id, name: shape.name, pageId: page3.id });
     this.reveal("edit", true);
     this.announce(
-      `Spelling uses your browser's spell checker: misspelled words in "${shape.name || `Shape ${shape.id}`}" are underlined in the shape text editor. Right-click a word for suggestions, then Apply text. ${texts.length > 1 ? `${texts.length - 1} more shapes on this page have text.` : ""}`.trim()
+      `Spelling uses your browser's spell checker: misspelled words in "${shape.name || `Shape ${shape.id}`}" are underlined in the shape. Right-click a word for suggestions, then press Esc to keep the change. ${texts.length > 1 ? `${texts.length - 1} more shapes on this page have text.` : ""}`.trim()
     );
   }
   wire() {
@@ -16507,8 +16691,8 @@ var ViewerTextFeatures = class {
       const target = event.composedPath()[0];
       if (target instanceof HTMLTextAreaElement && target.matches(EDITOR)) this.#editor = target;
     };
-    const pointer = () => {
-      this.#editor = void 0;
+    const pointer = (event) => {
+      if (event.target !== this.#editor) this.#editor = void 0;
     };
     this.root.addEventListener("focusin", focus);
     this.viewport.addEventListener("pointerdown", pointer, true);
@@ -16573,6 +16757,7 @@ var ViewerTextFeatures = class {
 var editable2 = (target) => target instanceof Element && !!target.closest(
   'input, textarea, select, office-ui-select, [contenteditable]:not([contenteditable="false"])'
 );
+var GRID_STEP = 1 / 4;
 var ViewerCommands = class {
   constructor(host) {
     this.host = host;
@@ -16767,6 +16952,10 @@ var ViewerCommands = class {
   layoutCommands;
   #textFeatures;
   #targets;
+  /** Page inches between minor grid lines while View > Grid is on (Snap to Grid), else 0. */
+  get gridStep() {
+    return this.#grid ? GRID_STEP : 0;
+  }
   get tool() {
     return this.#tool;
   }
@@ -17090,8 +17279,6 @@ var ViewerCommands = class {
     root.querySelector('[data-menu="position"]').disabled = !rotating && !distributing && !this.layoutCommands.layout.available(state);
     button("select-all").disabled = !page3 || state.loading;
     button("clear-selection").disabled = !state.selectedShapes.length;
-    button("undo").disabled = !state.edit.canUndo || state.edit.busy || state.loading;
-    button("redo").disabled = !state.edit.canRedo || state.edit.busy || state.loading;
     button("pointer").setAttribute("pressed", String(this.#tool === "pointer"));
     button("connector").setAttribute("pressed", String(this.#tool === "connector"));
     button("connector").disabled = !editing || !page3;
@@ -17119,7 +17306,7 @@ var ViewerCommands = class {
     button("replace").title = editing ? "Replace literal, case-sensitive text occurrences (Ctrl+H)." : "Open a .vsdx file to replace text.";
     for (const name of ["text-tool", "text-box"])
       button(name).title = editing ? "Drag a fixed-size text box, or click a shape to edit plain text." : "Open a .vsdx file to add text boxes.";
-    rectangle.title = state.edit.sourceAvailable ? "Rectangle (Ctrl+8)" : "Rectangle (Ctrl+8): open a .vsdx file to draw. Model-only documents are read only.";
+    rectangle.title = state.edit.sourceAvailable ? "Rectangle (Ctrl+8)" : "Rectangle (Ctrl+8): open a .vsdx file to draw.";
     box2("grid").checked = this.#grid;
     box2("grid").disabled = !page3;
     box2("ruler").checked = this.#ruler;
@@ -17674,6 +17861,7 @@ function createRotationPreview(model, page3, shape, source) {
 // src/visio/viewer-rotation-handle.ts
 var SVG6 = "http://www.w3.org/2000/svg";
 var pointOptions3 = { snap: false, bounded: false };
+var radians = (degrees, snap) => -(snap ? snapAngle(degrees) : degrees) * Math.PI / 180;
 var ViewerRotationHandle = class {
   constructor(viewport, controller, options2) {
     this.viewport = viewport;
@@ -17738,10 +17926,14 @@ var ViewerRotationHandle = class {
     handle.dataset.rotationHandle = shape.id;
     handle.setAttribute("cx", String(point.x));
     handle.setAttribute("cy", String(point.y));
-    handle.setAttribute("r", "6");
+    handle.setAttribute("r", "8");
     handle.setAttribute("vector-effect", "non-scaling-stroke");
     handle.setAttribute("aria-label", "Drag rotation handle");
-    overlay.append(stem, handle);
+    const glyph = this.viewport.ownerDocument.createElementNS(SVG6, "path");
+    glyph.classList.add("rotation-glyph");
+    glyph.setAttribute("transform", `translate(${point.x} ${point.y})`);
+    glyph.setAttribute("d", "M4.6 -2.9A5.4 5.4 0 1 0 5.4 .6M5.6 -5.9V-2.4H2.1");
+    overlay.append(stem, handle, glyph);
     this.viewport.append(overlay);
     this.#overlay = overlay;
   }
@@ -17829,7 +18021,7 @@ var ViewerRotationHandle = class {
     }
     const point = pagePoint(drag.svg, drag.page, event, pointOptions3);
     if (point) {
-      const angle = -drag.rotate(point) * Math.PI / 180;
+      const angle = radians(drag.rotate(point), event.shiftKey);
       try {
         drag.shapePreview.update(angle);
       } catch (error) {
@@ -17861,7 +18053,7 @@ var ViewerRotationHandle = class {
     event.preventDefault();
     event.stopImmediatePropagation();
     const point = pagePoint(drag.svg, drag.page, event, pointOptions3);
-    const angle = point ? -drag.rotate(point) * Math.PI / 180 : void 0;
+    const angle = point ? radians(drag.rotate(point), event.shiftKey) : void 0;
     this.#cancel();
     if (angle === void 0 || Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < 0.5 || this.controller.state.document !== drag.document)
       return;
@@ -18679,7 +18871,6 @@ var VisioViewerElement = class extends BaseElement {
   #disposeInputs;
   #viewport;
   #zoomSlider;
-  #shapeStatus;
   #announcement;
   #commands;
   #presentation;
@@ -18700,11 +18891,10 @@ var VisioViewerElement = class extends BaseElement {
   #findBar;
   #replace;
   #status;
-  #diagnostics;
+  #titleBar;
   #toolbar;
   #chrome;
   #edit;
-  #layers;
   #notes;
   #unsubscribe;
   #eventUnsubscribe;
@@ -18726,7 +18916,8 @@ var VisioViewerElement = class extends BaseElement {
     this.#findBar = createFindBar(document);
     const ribbon = createRibbon(document);
     applyKeyTips(ribbon);
-    workspace.before(ribbon, this.#findBar);
+    this.#titleBar = createTitleBar(document);
+    workspace.before(this.#titleBar, ribbon, this.#findBar);
     workspace.prepend(createShapesStrip(document), createShapesWindow(document));
     workspace.append(createPanZoom(document), createSizePosition(document));
     this.#root.append(
@@ -18738,17 +18929,17 @@ var VisioViewerElement = class extends BaseElement {
     this.#viewport = this.#root.querySelector(".viewport");
     this.#rulers = createRulers(this.#viewport);
     this.#zoomSlider = this.#root.querySelector("office-ui-zoom-slider");
-    this.#shapeStatus = this.#root.querySelector("[data-shape-status]");
     this.#status = this.#root.querySelector("[data-status]");
-    this.#diagnostics = this.#root.querySelector("[data-diagnostics]");
     this.#toolbar = this.#root.querySelector(".toolbar");
-    this.#edit = new ViewerEditControls(this.#root, this.controller);
-    this.#layers = this.#root.querySelector(".layer-controls");
-    this.#notes = this.#root.querySelector(".notes ul");
+    this.#edit = new ViewerInlineText(this.#viewport, this.controller, (message) => {
+      this.#announcement = message;
+      this.#status.textContent = message;
+    });
+    this.#notes = this.#root.querySelector(".backstage-notes ul");
     this.#canvas = new ViewerCanvas(
       this.#viewport,
       this.#notes,
-      this.#root.querySelector(".notes"),
+      this.#root.querySelector(".backstage-notes"),
       this.#root.querySelector(".shape-inspector")
     );
     this.#chrome = new ViewerChrome(this.#root, this.controller);
@@ -18780,7 +18971,7 @@ var VisioViewerElement = class extends BaseElement {
       },
       fit: (mode) => this.#fit(mode),
       togglePane: (pane) => this.#chrome.togglePane(pane),
-      reveal: (panel, focusText) => this.#chrome.reveal(panel, focusText),
+      reveal: (panel) => this.#reveal(panel),
       rulers: this.#rulers,
       togglePanZoom: () => this.#panZoom.toggle(),
       present: () => this.#presentation.start(),
@@ -18799,14 +18990,22 @@ var VisioViewerElement = class extends BaseElement {
         this.#status.textContent = message;
       }
     });
-    this.#profile = new ViewerProfile(this.#root);
+    const profileChanged = () => renderTitleBar(this.#titleBar, this.controller.state, this.#fileName, this.#profile.profile);
+    this.#profile = new ViewerProfile(this.#root, profileChanged, {
+      get: () => this.#dark() ? "dark" : this.statusBar,
+      set: (theme) => {
+        if (theme !== "dark") this.statusBar = theme;
+        if (theme === "dark" !== this.#dark())
+          this.#requestScheme(theme === "dark" ? "dark" : "light");
+      }
+    });
     this.#pointer = new ViewerPointerGestures(this.#viewport, this.controller, {
       active: () => this.#commands.tool === "pointer",
       announce: (message) => {
         this.#announcement = message;
         this.#status.textContent = message;
       },
-      snap: (page3, ids, delta) => this.#commands.layoutCommands.guides.snap(page3, ids, delta),
+      snap: (page3, ids, delta) => this.#commands.layoutCommands.guides.snap(page3, ids, delta, this.#commands.gridStep),
       clearSnap: () => this.#commands.layoutCommands.guides.clearHints()
     });
     this.#lineEndpoints = new ViewerLineEndpoints(this.#viewport, this.controller, {
@@ -18852,7 +19051,6 @@ var VisioViewerElement = class extends BaseElement {
         this.#fileName = "";
         this.controller.setDocument(null);
       },
-      revealNotes: () => this.#chrome.reveal("notes"),
       showOptions: () => this.#profile.showOptions(),
       announce: (message) => {
         this.#announcement = message;
@@ -18887,12 +19085,43 @@ var VisioViewerElement = class extends BaseElement {
   set zoom(value) {
     this.controller.setZoom(value);
   }
+  /**
+   * The status bar's look: `'neutral'` (the suite's bar, the default) or `'colorful'` (Visio's
+   * product colour). Reflects the `status-bar` attribute; `--vv-status-background` and
+   * `--vv-status-ink` recolour either.
+   */
+  get statusBar() {
+    return this.getAttribute("status-bar") === "colorful" ? "colorful" : "neutral";
+  }
+  set statusBar(value) {
+    this.setAttribute("status-bar", value === "colorful" ? "colorful" : "neutral");
+  }
+  /** Whether the page the viewer sits in is using the dark theme. */
+  #dark() {
+    const root = this.ownerDocument.documentElement;
+    return (root.dataset.officeTheme ?? root.dataset.theme) === "dark";
+  }
+  /**
+   * Light or dark belongs to the page, which every editor on it shares. Ask the host with a
+   * cancelable `office-theme-request` (`{ scheme }`); when no host takes it, set the shared
+   * theme's `data-office-theme` on the document.
+   */
+  #requestScheme(scheme) {
+    const event = new CustomEvent("office-theme-request", {
+      detail: { scheme },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    if (this.dispatchEvent(event)) this.ownerDocument.documentElement.dataset.officeTheme = scheme;
+  }
   get showToolbar() {
     return !this.#toolbar.hidden;
   }
   set showToolbar(value) {
     this.#assertAlive();
     this.#toolbar.hidden = !value;
+    this.#titleBar.hidden = !value;
     this.#root.querySelector(".zoom-controls").hidden = !value;
   }
   get renderWarnings() {
@@ -18984,7 +19213,32 @@ var VisioViewerElement = class extends BaseElement {
   }
   cancelEdit() {
     this.#assertAlive();
-    this.#edit.reset(false);
+    this.controller.cancelEdit();
+  }
+  /** Visio's status bar: Page n of m, then the selection's Width, Height and Angle, and language. */
+  #renderStatus(state) {
+    const set = (name, value) => this.#root.querySelector(`[data-${name}-status]`).setAttribute("value", value);
+    const shape = selectedShape(state.document, state.selectedShape, state.pageIndex);
+    const inches2 = (value) => `${+value.toFixed(3)} in.`;
+    const many = state.selectedShapes.length > 1;
+    set(
+      "width",
+      many ? `${state.selectedShapes.length} shapes selected` : shape ? `Width: ${inches2(shape.width)}` : ""
+    );
+    set("height", !many && shape ? `Height: ${inches2(shape.height)}` : "");
+    const turn = shape?.rotation ? (shape.rotation.angle * 180 / Math.PI % 360 + 360) % 360 : 0;
+    const angle = turn > 180 ? turn - 360 : turn;
+    set("angle", !many && shape ? `Angle: ${+angle.toFixed(2)}\xB0` : "");
+    set(
+      "language",
+      state.document ? statusLanguage(this.lang || this.ownerDocument.documentElement.lang || navigator.language) : ""
+    );
+  }
+  /** Shape text edits in place on the canvas; compatibility notes live in File > Info. */
+  #reveal(panel) {
+    if (panel === "edit") this.#edit.start();
+    else if (panel === "notes") this.#backstage.show("info");
+    else this.#chrome.reveal(panel);
   }
   exportVsdx() {
     this.#assertAlive();
@@ -19056,6 +19310,8 @@ var VisioViewerElement = class extends BaseElement {
   }
   connectedCallback() {
     if (this.#disposed) return;
+    const savedTheme = readStatusBarTheme();
+    if (!this.hasAttribute("status-bar") && savedTheme) this.statusBar = savedTheme;
     if (this.#suspended) this.#disposeInputs = this.#wireInputs();
     this.#suspended = false;
     this.#fontEvents = this.ownerDocument.fonts;
@@ -19089,6 +19345,13 @@ var VisioViewerElement = class extends BaseElement {
     const disposePanZoom = this.#panZoom.wire();
     const disposeSizePosition = this.#sizePosition.wire();
     const disposeProfile = this.#profile.wire();
+    const quickAccess = (event) => {
+      const id = event.detail.command;
+      event.stopPropagation();
+      if (id === "save") this.#backstage.download();
+      else if (id === "undo" || id === "redo") this.#commands.run({ type: "history", key: id });
+    };
+    this.#titleBar.addEventListener("office-command", quickAccess);
     const disposeShare = this.#share.wire();
     const disposeRulers = this.#rulers.wire();
     const disposeStencil = wireStencil(
@@ -19107,14 +19370,18 @@ var VisioViewerElement = class extends BaseElement {
     );
     const disposeReplace = this.#replace.wire();
     const disposeEdit = this.#edit.wire();
-    const disposeLayers = wireLayerControls(this.#layers, this.controller);
     const disposeInputs = wireViewerInputs(
       {
         viewport: this.#viewport,
         zoomSlider: this.#zoomSlider
       },
       this.controller,
-      (mode) => this.#fit(mode)
+      (mode) => this.#fit(mode),
+      (message) => {
+        this.#announcement = message;
+        this.#status.textContent = message;
+      },
+      (character) => this.#commands.tool === "pointer" && this.#edit.start(character)
     );
     return () => {
       disposeChrome();
@@ -19131,13 +19398,13 @@ var VisioViewerElement = class extends BaseElement {
       disposePanZoom();
       disposeSizePosition();
       disposeProfile();
+      this.#titleBar.removeEventListener("office-command", quickAccess);
       disposeShare();
       disposeRulers();
       disposeStencil();
       disposeFind();
       disposeReplace();
       disposeInputs();
-      disposeLayers();
       disposeEdit();
     };
   }
@@ -19154,25 +19421,22 @@ var VisioViewerElement = class extends BaseElement {
       this.#lineEndpoints.render(state);
       this.#rotationHandle.render(state);
       this.#resizeHandles.render(state);
+      this.#viewport.toggleAttribute(
+        "data-selection-frame",
+        !!this.#viewport.querySelector("[data-resize-overlay], [data-line-endpoint]")
+      );
     }
     if (changed) this.#announcement = void 0;
     this.#zoomSlider.value = Math.round(state.zoom * 100);
     this.#zoomSlider.disabled = !page3;
-    const inspected = selectedShape(state.document, state.selectedShape, state.pageIndex);
-    const inches2 = (value) => `${+value.toFixed(3)} in`;
-    this.#shapeStatus.setAttribute(
-      "value",
-      state.selectedShapes.length > 1 ? `${state.selectedShapes.length} shapes selected` : inspected ? `Width: ${inches2(inspected.width)}  Height: ${inches2(inspected.height)}` : ""
-    );
+    this.#renderStatus(state);
+    renderTitleBar(this.#titleBar, state, this.#fileName, this.#profile.profile);
     for (const button of this.#root.querySelectorAll("[data-action]"))
       button.disabled = !page3;
     renderFindBar(this.#findBar, state);
     this.#replace.render(state);
     this.#edit.render(state);
-    if (changed) renderLayerControls(this.#layers, state);
-    else
-      this.#layers.querySelector('[data-layer-reset="all"]').disabled = state.layerVisibilityOverrides.length === 0;
-    this.#chrome.render(state, this.#notes.children.length);
+    this.#chrome.render(state);
     this.#commands.render(state);
     this.#presentation.render(state);
     this.#backstage.render(state);
@@ -19180,9 +19444,11 @@ var VisioViewerElement = class extends BaseElement {
     this.#panZoom.render();
     this.#sizePosition.render(state);
     this.#viewport.setAttribute("aria-busy", String(state.loading || state.edit.busy));
-    this.#status.textContent = state.loading ? "Opening diagram\u2026" : state.edit.busy ? "Updating diagram\u2026" : state.error?.message ?? (state.edit.error ? `Edit rejected: ${editErrorMessage(state.edit.error)}` : void 0) ?? this.#announcement ?? (page3 ? `${page3.name} \xB7 ${page3.shapes.length} top-level shapes` : "No diagram open");
-    const warnings = (state.document?.diagnostics.length ?? 0) + this.#canvas.warnings.length;
-    this.#diagnostics.textContent = warnings ? `${this.#notes.children.length} compatibility notes` : "Local-only viewing";
+    this.#status.textContent = state.loading ? "Opening diagram\u2026" : state.edit.busy ? "Updating diagram\u2026" : state.error?.message ?? (state.edit.error ? `Edit rejected: ${editErrorMessage(state.edit.error)}` : void 0) ?? this.#announcement ?? "";
+    this.#status.parentElement.toggleAttribute(
+      "data-error",
+      !state.loading && !state.edit.busy && !!(state.error ?? state.edit.error)
+    );
   }
 };
 function registerVisioViewer() {