ooxml-ui 1.1.0 → 1.3.0

package/dist/teams.js

@@ -1,8 +1,8 @@
-export { EMOJI, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, applyTeamsProps, colorFor, createTeams, dayLabel, defineAppRail, defineAvatar, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, formatElapsed, formatSize, formatTime, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, registerTeams, safeStorage, saveConfig, saveIdentity, withStyles } from './chunk-KVKKXRL7.js';
+export { EMOJI, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, applyTeamsProps, colorFor, createTeams, dayLabel, defineAppRail, defineAvatar, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, formatElapsed, formatSize, formatTime, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, registerTeams, safeStorage, saveConfig, saveIdentity, withStyles } from './chunk-5OFAJDMQ.js';
 export { TeamsPresentationPreview, defineTeamsPresentationPreview } from './chunk-SNV6YKPC.js';
-import './chunk-X7RINDJQ.js';
-import './chunk-M5DTJSOV.js';
-import './chunk-BOX43CZD.js';
-import './chunk-3FPW7M6U.js';
-import './chunk-USDLALB5.js';
-import './chunk-JFJXBYRD.js';
+import './chunk-56A2JK63.js';
+import './chunk-723JC3OC.js';
+import './chunk-M6GF5ED2.js';
+import './chunk-TWQ45BFL.js';
+import './chunk-IY7QJLQG.js';
+import './chunk-2WLRFPMW.js';

package/dist/theme.js

@@ -1,2 +1,2 @@
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, shadcnBridge, themeBridge } from './chunk-X7RINDJQ.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-JFJXBYRD.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, shadcnBridge, themeBridge } from './chunk-56A2JK63.js';
+export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-2WLRFPMW.js';

package/dist/tokens.d.ts

@@ -43,6 +43,8 @@ export declare const OFFICE_TOKENS: {
     readonly '--office-font-size-md': '14px';
     readonly '--office-font-size-lg': '15px';
     readonly '--office-font-size-xl': '18px';
+    /** Smallest text size that keeps mobile browsers from zooming a focused field. */
+    readonly '--office-font-size-touch': '16px';
     readonly '--office-font-weight-medium': '500';
     readonly '--office-font-weight-bold': '600';
     readonly '--office-line-height': '1.4';
@@ -71,6 +73,8 @@ export declare const OFFICE_TOKENS: {
     readonly '--office-focus-offset': '2px';
     readonly '--office-target-size': '28px';
     readonly '--office-target-size-touch': '44px';
+    /** Minimum pointer target on touch layouts. */
+    readonly '--office-touch-target': '36px';
     readonly '--office-control-height': '24px';
     readonly '--office-control-height-md': '28px';
     readonly '--office-control-height-lg': '32px';
@@ -154,6 +158,7 @@ export declare const OFFICE_TOKENS: {
     readonly '--office-launcher-height': '14px';
     readonly '--office-tab-indicator-width': '2.5px';
     readonly '--office-status-bar-height': '24px';
+    readonly '--office-status-bar-separator-opacity': '1';
     readonly '--office-tab-height': '28px';
     readonly '--office-tab-max-width': '220px';
     readonly '--office-zoom-slider-width': '120px';
@@ -202,6 +207,8 @@ export declare const OFFICE_TOKENS: {
     readonly '--office-avatar-size': '48px';
     readonly '--office-avatar-color': 'var(--office-muted-foreground, #6b7280)';
     readonly '--office-toast-width': '360px';
+    readonly '--office-comments-pane-width': '300px';
+    readonly '--office-comment-avatar-size': '24px';
     readonly '--office-account-field-width': '320px';
     readonly '--office-gallery-trigger-height': '24px';
     readonly '--office-gallery-strip-background': 'color-mix(in srgb, var(--office-surface, #f3f4f6) 30%, transparent)';
@@ -218,6 +225,8 @@ export declare const OFFICE_TOKENS: {
     readonly '--office-title-bar-mark-size': '20px';
     readonly '--office-title-bar-mark-background': 'var(--office-accent, #2563eb)';
     readonly '--office-title-bar-mark-foreground': 'var(--office-accent-foreground, #ffffff)';
+    readonly '--office-title-bar-name-foreground': 'var(--office-title-bar-foreground, var(--office-foreground, #1f2937))';
+    readonly '--office-title-bar-result-selected': 'var(--office-selected, #e5e7eb)';
     readonly '--office-title-bar-name-max-width': '240px';
     readonly '--office-title-bar-name-max-width-narrow': '140px';
     readonly '--office-title-bar-search-max-width': '448px';

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}

package/dist/visio/styles/index.d.ts

@@ -1,5 +1,7 @@
+import { visioThemeAliases } from './theme.js';
 /**
  * Viewer stylesheets as text for the shadow root. New styles are CSS files here; the legacy
  * `styles.ts` string moves into this directory when it is next changed.
  */
 export declare const canvasAndRibbonStyles: string;
+export { visioThemeAliases };

package/dist/visio/styles/theme.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The viewer's colours follow the shared `--office-*` theme (light/dark, the launcher's choice).
+ * The `--vv-*` custom properties stay as optional host overrides and appear only in this block.
+ * `inch` is not a colour: it is the canvas scale set by `viewer-canvas.ts`.
+ */
+export declare const visioThemeAliases = ":host {\n  --_vv-bg:var(--vv-background,var(--office-surface,#eceae8));\n  --_vv-surface:var(--vv-surface,var(--office-background,#fff));\n  --_vv-secondary:var(--vv-secondary,var(--office-surface,#f3f2f1));\n  --_vv-ink:var(--vv-ink,var(--office-foreground,#1f1f1f));\n  --_vv-muted:var(--vv-muted,var(--office-muted-foreground,#605e5c));\n  --_vv-border:var(--vv-border,var(--office-border,#e1dfdd));\n  --_vv-accent:var(--vv-accent,var(--office-accent,#3955a3));\n  --_vv-accent-soft:var(--vv-accent-soft,color-mix(in srgb,var(--_vv-accent) 10%,transparent));\n  --_vv-accent-ink:var(--vv-accent-ink,var(--office-accent-foreground,#fff));\n  --_vv-focus:var(--vv-focus,var(--office-ring,var(--_vv-accent)));\n  --_vv-danger:var(--vv-danger,var(--office-danger,#b42318));\n  --_vv-shadow:var(--vv-shadow,var(--office-shadow,0 2px 8px rgb(0 0 0 / 14%)));\n}\n";
+/**
+ * Feeds the shared controls (ribbon, dialogs) from the aliases above. It sits on the shadow
+ * root's children, not on `:host`, because a custom property cannot read the value it replaces.
+ */
+export declare const visioThemeBridge: string;

package/dist/visio/styles.d.ts

@@ -1,2 +1,2 @@
-/** Inherited public tokens use local fallback aliases so host themes are never shadowed. */
-export declare const viewerStyles = "\n:host {\n  --_vv-bg:var(--vv-background,#eceae8); --_vv-surface:var(--vv-surface,#fff);\n  --_vv-secondary:var(--vv-secondary,#f3f2f1); --_vv-ink:var(--vv-ink,#1f1f1f);\n  --_vv-muted:var(--vv-muted,#605e5c); --_vv-border:var(--vv-border,#e1dfdd);\n  --_vv-accent:var(--vv-accent,#3955a3); --_vv-accent-soft:var(--vv-accent-soft,rgba(57,85,163,.10));\n  display:flex; flex-direction:column; min-width:0; min-height:320px; height:100%; overflow:hidden;\n  color:var(--_vv-ink); background:var(--_vv-bg); font:12px/1.5 \"Segoe UI\",Arial,sans-serif; contain:layout;\n}\n* { box-sizing:border-box; }\n[hidden] { display:none !important; }\nbutton,select,input,textarea { font:inherit; color:inherit; border:1px solid var(--_vv-border); background:var(--_vv-surface); border-radius:4px; min-height:28px; padding:3px 8px; }\nbutton { cursor:pointer; }\nbutton:hover:enabled { background:var(--_vv-accent-soft); border-color:var(--_vv-accent); }\nbutton:disabled { opacity:.4; cursor:default; }\nbutton:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--vv-focus,var(--_vv-accent)); outline-offset:2px; }\nbutton[aria-pressed=\"true\"] { color:var(--_vv-accent); background:var(--_vv-accent-soft); }\n.toolbar { flex:none; min-width:0; border-bottom:1px solid var(--_vv-border); background:var(--_vv-surface); }\n.spacer { flex:1; }\n.ribbon-content { min-height:82px; display:flex; align-items:stretch; gap:0; padding:2px 4px; overflow-x:auto; }\n.ribbon-group { display:flex; flex-direction:column; justify-content:space-between; flex:none; gap:2px; padding:3px 10px 4px; border-right:1px solid var(--_vv-border); }\n.group-label { font-size:10px; line-height:12px; color:var(--_vv-muted); text-align:center; }\n.ribbon-actions { display:flex; align-items:stretch; gap:2px; flex:1; }\n.ribbon-command { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-width:70px; padding:2px 6px; border-color:transparent; background:transparent; font-size:11px; white-space:nowrap; }\n.ribbon-hint { align-self:center; flex:none; margin:0; padding:0 16px; font-size:11px; line-height:18px; color:var(--_vv-muted); }\n.workspace { position:relative; display:flex; flex:1; min-width:0; min-height:0; overflow:hidden; }\n.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; }\n.inspector-kind { color:var(--_vv-muted); font-size:10px; font-weight:400; }\n.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); }\n.paper { display:block; flex:none; background:white; box-shadow:var(--vv-shadow,0 2px 8px rgb(0 0 0 / 14%)); margin:auto; }\n.paper [data-shape-id] { cursor:pointer; }\n.paper [data-selected=\"true\"] > [data-geometry] { stroke:var(--_vv-accent) !important; stroke-width:.025 !important; }\n.inspector-pane { flex:0 0 288px; width:288px; min-width:0; overflow:auto; border-left:1px solid var(--_vv-border); background:var(--_vv-secondary); }\n.inspector-body { display:flex; flex-direction:column; gap:12px; padding:12px 10px; }\n.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; }\n.document-card h2 { margin:0 0 8px; font-size:10px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:var(--_vv-muted); }\n.current-page-name { margin:0 0 8px; font-size:12px; font-weight:500; overflow-wrap:anywhere; }\n.document-card dl { display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin:0; font-size:11px; }\n.document-card dt { color:var(--_vv-muted); }\n.document-card dd { margin:0; text-align:right; overflow-wrap:anywhere; }\n.selection-hint { margin:0; padding:0 2px; color:var(--_vv-muted); font-size:11px; }\nsummary { cursor:pointer; min-height:22px; line-height:22px; font-weight:500; }\nsummary::marker { color:var(--_vv-muted); font-size:10px; }\n.shape-inspector div { max-height:260px; overflow:auto; }\n.shape-inspector p { margin:6px 0; overflow-wrap:anywhere; }\n.shape-inspector dl { display:grid; grid-template-columns:minmax(60px,1fr) 1.5fr; gap:6px 10px; }\n.shape-inspector dt { font-weight:500; }\n.shape-inspector dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }\n.shape-inspector h3 { margin:12px 0 5px; font-size:11px; }\n.shape-inspector a { color:var(--_vv-accent); overflow-wrap:anywhere; }\n.edit-controls p,.layer-controls p { margin:6px 0; color:var(--_vv-muted); overflow-wrap:anywhere; }\n.edit-controls textarea { display:block; width:100%; resize:vertical; max-height:180px; margin-top:4px; background:var(--_vv-secondary); }\n.edit-controls label { display:block; margin-top:8px; }\n.edit-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }\n.edit-actions button { font-size:11px; padding:3px 7px; }\n.edit-actions [data-edit=\"apply\"]:enabled { background:var(--_vv-accent); border-color:var(--_vv-accent); color:var(--vv-accent-ink,#fff); }\n.edit-controls [data-geometry] { min-width:0; margin:8px 0 0; padding:6px; border:1px solid var(--_vv-border); }\n.edit-controls [data-geometry-field] { display:block; width:100%; min-width:0; margin-top:4px; }\n.edit-controls [data-geometry-error] { color:var(--vv-danger,#b42318); }\n.edit-controls [data-edit-error] { color:var(--vv-danger,#b42318); }\n.edit-controls [data-edit-diagnostics] { max-height:100px; overflow:auto; padding-left:16px; }\n.layer-controls [data-layer-list] { max-height:240px; overflow:auto; }\n.layer-controls fieldset { border:1px solid var(--_vv-border); margin:6px 0; padding:6px; min-width:0; }\n.layer-controls legend { max-width:100%; overflow-wrap:anywhere; }\n.layer-controls fieldset div { display:flex; align-items:center; gap:6px; margin:3px 0; }\n.layer-controls label { display:flex; align-items:center; gap:6px; overflow-wrap:anywhere; }\n.layer-controls input { flex-shrink:0; width:16px; height:16px; min-height:16px; padding:0; accent-color:var(--_vv-accent); }\n.notes ul { max-height:220px; overflow:auto; padding-left:17px; margin:6px 0 0; color:var(--_vv-muted); }\n.notes li { margin:5px 0; overflow-wrap:anywhere; }\n.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; }\n.notes-strip button { min-height:24.5px; padding:2px 0; border:0; background:transparent; color:var(--_vv-muted); font-size:11px; }\n.notes-strip button::before { content:\"\u25B8\"; margin-right:6px; }\n.notes-strip button[aria-expanded=\"true\"]::before { content:\"\u25BE\"; }\n.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; }\n.status-message { display:flex; gap:16px; min-width:0; }\n.status-message span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\n.empty { max-width:360px; margin:60px auto; padding:16px; text-align:center; color:var(--_vv-muted); font-size:12px; }\n.empty strong { display:block; color:var(--_vv-ink); font-size:18px; font-weight:500; margin-bottom:8px; }\n@media(max-width:1100px) { .ribbon-hint { display:none; } [data-diagnostics] { display:none; } }\n@media(max-width:760px) {\n  button,select,input,textarea { min-height:44px; }\n  button { min-width:44px; }\n  summary { min-height:44px; line-height:44px; }\n  .ribbon-content { min-height:86px; }\n  .ribbon-group { padding:4px 8px; }\n  #home-panel>.ribbon-group:not(.search-group):not(.undo-group) { display:none; }\n  .ribbon-command { min-width:90px; }\n  .workspace { display:block; overflow:auto; }\n  .viewport { height:340px; min-height:260px; padding:16px 4px; }\n  .inspector-pane { width:100%; overflow:visible; border-left:0; border-top:1px solid var(--_vv-border); }\n  .inspector-body { gap:8px; padding:10px; }\n  .inspector-card,.edit-controls,.layer-controls { font-size:12px; }\n  .layer-controls label { min-height:44px; }\n  .layer-controls input { min-width:20px; width:20px; height:20px; min-height:20px; }\n  .notes-strip { min-height:44px; padding:0 10px; }\n  .notes-strip button { min-height:44px; }\n  .status { flex-wrap:wrap; gap:0; padding:4px 8px; }\n  .status-message { width:100%; min-height:18px; }\n}\n@media(pointer:coarse) {\n  button,select,input,textarea { min-height:44px; }\n  button { min-width:44px; }\n  summary,.layer-controls label { min-height:44px; line-height:44px; }\n  .ribbon-content { min-height:96px; }\n  .notes-strip button { min-height:44px; height:44px; }\n  .layer-controls input { min-height:20px; }\n}\n/* Suite ribbon: tabs lead directly into Visio command groups. */\n.ribbon-content { min-height:104px; padding:4px 4px; }\n.ribbon-hint { order:3; padding:10px 18px; }\n.ribbon-command { min-width:82px; }\n.pane-close { display:none; }\n@media(max-width:760px) {\n .ribbon-content { min-height:54px; padding:4px 0; }\n .search-feedback,.group-label { display:none; }\n .ribbon-content { overflow-x:auto; scroll-snap-type:x mandatory; }\n .workspace { display:flex; position:relative; overflow:hidden; }\n .viewport { flex:1; width:100%; height:100%; min-height:0; padding:16px 4px; }\n .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; }\n .pane-close { display:block; width:44px; height:44px; padding:0; font-size:22px; background:transparent; border:0; }\n .inspector-kind { margin-left:auto; }\n .notes-strip { display:none; }\n .status { min-height:48px; padding:2px 8px; }\n .status-message { display:none; }\n}\n.toolbar { position:relative; }\n.ribbon-tools { display:flex; flex:none; order:0; }\n.tools-content { display:flex; align-items:stretch; }\n.ribbon-tools>summary { display:none; }\n.ribbon-command { font-size:12px; min-width:88px; }\n.ribbon-hint { font-size:12px; line-height:20px; flex:1; }\n.group-label { font-size:11px; line-height:14px; }\n.inspector-card,.edit-controls,.layer-controls { font-size:12px; line-height:18px; }\n.selection-hint,.document-card dl { font-size:12px; }\n.pane-heading { font-size:12px; }\n.inspector-pane .pane-heading { position:sticky; top:0; z-index:1; background:var(--_vv-secondary); flex:none; }\n.status .notes-strip { border:0; padding:0 8px; background:transparent; min-height:28px; }\n.status .notes-strip>span { display:none; }\n.status-message { flex:1; }\n@media(max-width:760px) {\n #home-panel { overflow:visible; min-height:54px; padding:4px; }\n .ribbon-tools { display:block; flex:0 0 84px; width:84px; order:1; }\n .ribbon-tools>summary { display:flex; min-height:44px; align-items:center; justify-content:center; gap:6px; padding:0 10px; border:1px solid var(--_vv-border); background:var(--_vv-surface); border-radius:4px; font-size:12px; cursor:pointer; list-style:none; }\n .ribbon-tools>summary::-webkit-details-marker { display:none; }\n .ribbon-tools .tools-content { display:flex; position:absolute; top:100%; left:4px; right:4px; z-index:6; flex-direction:column; padding:12px; gap:12px; border:1px solid var(--_vv-border); border-radius:4px; background:var(--_vv-surface); box-shadow:0 12px 28px #0003; max-height:60vh; overflow:auto; }\n .ribbon-tools:not([open])>.tools-content { display:none; }\n .ribbon-tools .ribbon-group { display:flex; width:100%; min-height:64px; border:0; padding:0; }\n .ribbon-tools .ribbon-actions { justify-content:space-between; }\n .ribbon-tools .ribbon-command { min-width:88px; font-size:12px; }\n .ribbon-tools .search-feedback { display:block; }\n .status { flex-wrap:nowrap; gap:4px; min-height:48px; }\n .status .notes-strip { display:none; }\n}\n@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }\n";
+/** Colours come from the alias block in `styles/theme.ts`, which follows the shared theme. */
+export declare const viewerStyles = "\n:host {\n  display:flex; flex-direction:column; min-width:0; min-height:320px; height:100%; overflow:hidden;\n  color:var(--_vv-ink); background:var(--_vv-bg); font:12px/1.5 \"Segoe UI\",Arial,sans-serif; contain:layout;\n}\n* { box-sizing:border-box; }\n[hidden] { display:none !important; }\nbutton,select,input,textarea { font:inherit; color:inherit; border:1px solid var(--_vv-border); background:var(--_vv-surface); border-radius:4px; min-height:28px; padding:3px 8px; }\nbutton { cursor:pointer; }\nbutton:hover:enabled { background:var(--_vv-accent-soft); border-color:var(--_vv-accent); }\nbutton:disabled { opacity:.4; cursor:default; }\nbutton:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--_vv-focus); outline-offset:2px; }\nbutton[aria-pressed=\"true\"] { color:var(--_vv-accent); background:var(--_vv-accent-soft); }\n.toolbar { flex:none; min-width:0; border-bottom:1px solid var(--_vv-border); background:var(--_vv-surface); }\n.spacer { flex:1; }\n.ribbon-content { min-height:82px; display:flex; align-items:stretch; gap:0; padding:2px 4px; overflow-x:auto; }\n.ribbon-group { display:flex; flex-direction:column; justify-content:space-between; flex:none; gap:2px; padding:3px 10px 4px; border-right:1px solid var(--_vv-border); }\n.group-label { font-size:10px; line-height:12px; color:var(--_vv-muted); text-align:center; }\n.ribbon-actions { display:flex; align-items:stretch; gap:2px; flex:1; }\n.ribbon-command { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-width:70px; padding:2px 6px; border-color:transparent; background:transparent; font-size:11px; white-space:nowrap; }\n.ribbon-hint { align-self:center; flex:none; margin:0; padding:0 16px; font-size:11px; line-height:18px; color:var(--_vv-muted); }\n.workspace { position:relative; display:flex; flex:1; min-width:0; min-height:0; overflow:hidden; }\n.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; }\n.inspector-kind { color:var(--_vv-muted); font-size:10px; font-weight:400; }\n.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); }\n.paper { display:block; flex:none; background:white; box-shadow:var(--_vv-shadow); margin:auto; }\n.paper [data-shape-id] { cursor:pointer; }\n.paper [data-selected=\"true\"] > [data-geometry] { stroke:var(--_vv-accent) !important; stroke-width:.025 !important; }\n.inspector-pane { flex:0 0 288px; width:288px; min-width:0; overflow:auto; border-left:1px solid var(--_vv-border); background:var(--_vv-secondary); }\n.inspector-body { display:flex; flex-direction:column; gap:12px; padding:12px 10px; }\n.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; }\n.document-card h2 { margin:0 0 8px; font-size:10px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:var(--_vv-muted); }\n.current-page-name { margin:0 0 8px; font-size:12px; font-weight:500; overflow-wrap:anywhere; }\n.document-card dl { display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin:0; font-size:11px; }\n.document-card dt { color:var(--_vv-muted); }\n.document-card dd { margin:0; text-align:right; overflow-wrap:anywhere; }\n.selection-hint { margin:0; padding:0 2px; color:var(--_vv-muted); font-size:11px; }\nsummary { cursor:pointer; min-height:22px; line-height:22px; font-weight:500; }\nsummary::marker { color:var(--_vv-muted); font-size:10px; }\n.shape-inspector div { max-height:260px; overflow:auto; }\n.shape-inspector p { margin:6px 0; overflow-wrap:anywhere; }\n.shape-inspector dl { display:grid; grid-template-columns:minmax(60px,1fr) 1.5fr; gap:6px 10px; }\n.shape-inspector dt { font-weight:500; }\n.shape-inspector dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }\n.shape-inspector h3 { margin:12px 0 5px; font-size:11px; }\n.shape-inspector a { color:var(--_vv-accent); overflow-wrap:anywhere; }\n.edit-controls p,.layer-controls p { margin:6px 0; color:var(--_vv-muted); overflow-wrap:anywhere; }\n.edit-controls textarea { display:block; width:100%; resize:vertical; max-height:180px; margin-top:4px; background:var(--_vv-secondary); }\n.edit-controls label { display:block; margin-top:8px; }\n.edit-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }\n.edit-actions button { font-size:11px; padding:3px 7px; }\n.edit-actions [data-edit=\"apply\"]:enabled { background:var(--_vv-accent); border-color:var(--_vv-accent); color:var(--_vv-accent-ink); }\n.edit-controls [data-geometry] { min-width:0; margin:8px 0 0; padding:6px; border:1px solid var(--_vv-border); }\n.edit-controls [data-geometry-field] { display:block; width:100%; min-width:0; margin-top:4px; }\n.edit-controls [data-geometry-error] { color:var(--_vv-danger); }\n.edit-controls [data-edit-error] { color:var(--_vv-danger); }\n.edit-controls [data-edit-diagnostics] { max-height:100px; overflow:auto; padding-left:16px; }\n.layer-controls [data-layer-list] { max-height:240px; overflow:auto; }\n.layer-controls fieldset { border:1px solid var(--_vv-border); margin:6px 0; padding:6px; min-width:0; }\n.layer-controls legend { max-width:100%; overflow-wrap:anywhere; }\n.layer-controls fieldset div { display:flex; align-items:center; gap:6px; margin:3px 0; }\n.layer-controls label { display:flex; align-items:center; gap:6px; overflow-wrap:anywhere; }\n.layer-controls input { flex-shrink:0; width:16px; height:16px; min-height:16px; padding:0; accent-color:var(--_vv-accent); }\n.notes ul { max-height:220px; overflow:auto; padding-left:17px; margin:6px 0 0; color:var(--_vv-muted); }\n.notes li { margin:5px 0; overflow-wrap:anywhere; }\n.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; }\n.notes-strip button { min-height:24.5px; padding:2px 0; border:0; background:transparent; color:var(--_vv-muted); font-size:11px; }\n.notes-strip button::before { content:\"\u25B8\"; margin-right:6px; }\n.notes-strip button[aria-expanded=\"true\"]::before { content:\"\u25BE\"; }\n.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; }\n.status-message { display:flex; gap:16px; min-width:0; }\n.status-message span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\n.empty { max-width:360px; margin:60px auto; padding:16px; text-align:center; color:var(--_vv-muted); font-size:12px; }\n.empty strong { display:block; color:var(--_vv-ink); font-size:18px; font-weight:500; margin-bottom:8px; }\n@media(max-width:1100px) { .ribbon-hint { display:none; } [data-diagnostics] { display:none; } }\n@media(max-width:760px) {\n  button,select,input,textarea { min-height:44px; }\n  button { min-width:44px; }\n  summary { min-height:44px; line-height:44px; }\n  .ribbon-content { min-height:86px; }\n  .ribbon-group { padding:4px 8px; }\n  #home-panel>.ribbon-group:not(.search-group):not(.undo-group) { display:none; }\n  .ribbon-command { min-width:90px; }\n  .workspace { display:block; overflow:auto; }\n  .viewport { height:340px; min-height:260px; padding:16px 4px; }\n  .inspector-pane { width:100%; overflow:visible; border-left:0; border-top:1px solid var(--_vv-border); }\n  .inspector-body { gap:8px; padding:10px; }\n  .inspector-card,.edit-controls,.layer-controls { font-size:12px; }\n  .layer-controls label { min-height:44px; }\n  .layer-controls input { min-width:20px; width:20px; height:20px; min-height:20px; }\n  .notes-strip { min-height:44px; padding:0 10px; }\n  .notes-strip button { min-height:44px; }\n  .status { flex-wrap:wrap; gap:0; padding:4px 8px; }\n  .status-message { width:100%; min-height:18px; }\n}\n@media(pointer:coarse) {\n  button,select,input,textarea { min-height:44px; }\n  button { min-width:44px; }\n  summary,.layer-controls label { min-height:44px; line-height:44px; }\n  .ribbon-content { min-height:96px; }\n  .notes-strip button { min-height:44px; height:44px; }\n  .layer-controls input { min-height:20px; }\n}\n/* Suite ribbon: tabs lead directly into Visio command groups. */\n.ribbon-content { min-height:104px; padding:4px 4px; }\n.ribbon-hint { order:3; padding:10px 18px; }\n.ribbon-command { min-width:82px; }\n.pane-close { display:none; }\n@media(max-width:760px) {\n .ribbon-content { min-height:54px; padding:4px 0; }\n .search-feedback,.group-label { display:none; }\n .ribbon-content { overflow-x:auto; scroll-snap-type:x mandatory; }\n .workspace { display:flex; position:relative; overflow:hidden; }\n .viewport { flex:1; width:100%; height:100%; min-height:0; padding:16px 4px; }\n .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; }\n .pane-close { display:block; width:44px; height:44px; padding:0; font-size:22px; background:transparent; border:0; }\n .inspector-kind { margin-left:auto; }\n .notes-strip { display:none; }\n .status { min-height:48px; padding:2px 8px; }\n .status-message { display:none; }\n}\n.toolbar { position:relative; }\n.ribbon-tools { display:flex; flex:none; order:0; }\n.tools-content { display:flex; align-items:stretch; }\n.ribbon-tools>summary { display:none; }\n.ribbon-command { font-size:12px; min-width:88px; }\n.ribbon-hint { font-size:12px; line-height:20px; flex:1; }\n.group-label { font-size:11px; line-height:14px; }\n.inspector-card,.edit-controls,.layer-controls { font-size:12px; line-height:18px; }\n.selection-hint,.document-card dl { font-size:12px; }\n.pane-heading { font-size:12px; }\n.inspector-pane .pane-heading { position:sticky; top:0; z-index:1; background:var(--_vv-secondary); flex:none; }\n.status .notes-strip { border:0; padding:0 8px; background:transparent; min-height:28px; }\n.status .notes-strip>span { display:none; }\n.status-message { flex:1; }\n@media(max-width:760px) {\n #home-panel { overflow:visible; min-height:54px; padding:4px; }\n .ribbon-tools { display:block; flex:0 0 84px; width:84px; order:1; }\n .ribbon-tools>summary { display:flex; min-height:44px; align-items:center; justify-content:center; gap:6px; padding:0 10px; border:1px solid var(--_vv-border); background:var(--_vv-surface); border-radius:4px; font-size:12px; cursor:pointer; list-style:none; }\n .ribbon-tools>summary::-webkit-details-marker { display:none; }\n .ribbon-tools .tools-content { display:flex; position:absolute; top:100%; left:4px; right:4px; z-index:6; flex-direction:column; padding:12px; gap:12px; border:1px solid var(--_vv-border); border-radius:4px; background:var(--_vv-surface); box-shadow:0 12px 28px #0003; max-height:60vh; overflow:auto; }\n .ribbon-tools:not([open])>.tools-content { display:none; }\n .ribbon-tools .ribbon-group { display:flex; width:100%; min-height:64px; border:0; padding:0; }\n .ribbon-tools .ribbon-actions { justify-content:space-between; }\n .ribbon-tools .ribbon-command { min-width:88px; font-size:12px; }\n .ribbon-tools .search-feedback { display:block; }\n .status { flex-wrap:nowrap; gap:4px; min-height:48px; }\n .status .notes-strip { display:none; }\n}\n@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }\n";

package/dist/visio.js

@@ -1,8 +1,9 @@
-import { attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-M5DTJSOV.js';
-import { getIcon, registerIcon } from './chunk-BOX43CZD.js';
-import { definePresence } from './chunk-3FPW7M6U.js';
-import './chunk-USDLALB5.js';
-import './chunk-JFJXBYRD.js';
+import { themeBridge, installOfficeUiTheme } from './chunk-56A2JK63.js';
+import { attachKeyTips, registerControls, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-723JC3OC.js';
+import { getIcon, registerIcon } from './chunk-M6GF5ED2.js';
+import { definePresence } from './chunk-TWQ45BFL.js';
+import './chunk-IY7QJLQG.js';
+import './chunk-2WLRFPMW.js';
 import { FOREIGN_VECTOR_SCENE_LIMITS, EMPTY_TEXT_SEARCH, EMPTY_EDIT_STATE, assertViewableDocument, indexDocumentText, searchDocumentText, validateSearchQuery, MAX_INPUT_BYTES, DocumentHistory, snapshotEdits, ForeignVectorBudget, VISIO_IDENTITY_TRANSFORM, composeVisioTransform, compatibilityNotes, compatibilityText, visioGradientInstances, visioRenderedGradientStopCount, inspectForeignVectorResource, copySnapshotScene, editErrorMessage, eventKeys, propertyKeys, TEXT_SEARCH_LIMITS, isEditCancellation, visioPageInsertCommand, visioQuarterTurnCommand, visioLocalRotationShape, visioStraightLineHandles, visioPageEditToDrawing, textSearchStatus, visioRotationPreviewTransform, visioFillPatternTransform, visioRenderedGradientStops, visioStrokeGradient, visioNextShapeId } from 'ooxml-core/visio/ui';
 export { TEXT_SEARCH_LIMITS, compatibilityNotes, compatibilityText, demoDocument, eventKeys, propertyKeys } from 'ooxml-core/visio/ui';
 import { VISIO_VISIBILITY_LIMITS, loadVisio, getVisioPageLayers, resolveVisioPageVisibility, visioFilledArrow, layoutVisioFilledArrowLine, visioOpenArrowPath } from 'ooxml-core/visio';
@@ -886,10 +887,6 @@ function wireLayerControls(panel, controller) {
 // src/visio/styles.ts
 var viewerStyles = `
 :host {
-  --_vv-bg:var(--vv-background,#eceae8); --_vv-surface:var(--vv-surface,#fff);
-  --_vv-secondary:var(--vv-secondary,#f3f2f1); --_vv-ink:var(--vv-ink,#1f1f1f);
-  --_vv-muted:var(--vv-muted,#605e5c); --_vv-border:var(--vv-border,#e1dfdd);
-  --_vv-accent:var(--vv-accent,#3955a3); --_vv-accent-soft:var(--vv-accent-soft,rgba(57,85,163,.10));
   display:flex; flex-direction:column; min-width:0; min-height:320px; height:100%; overflow:hidden;
   color:var(--_vv-ink); background:var(--_vv-bg); font:12px/1.5 "Segoe UI",Arial,sans-serif; contain:layout;
 }
@@ -899,7 +896,7 @@ button,select,input,textarea { font:inherit; color:inherit; border:1px solid var
 button { cursor:pointer; }
 button:hover:enabled { background:var(--_vv-accent-soft); border-color:var(--_vv-accent); }
 button:disabled { opacity:.4; cursor:default; }
-button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--vv-focus,var(--_vv-accent)); outline-offset:2px; }
+button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--_vv-focus); outline-offset:2px; }
 button[aria-pressed="true"] { color:var(--_vv-accent); background:var(--_vv-accent-soft); }
 .toolbar { flex:none; min-width:0; border-bottom:1px solid var(--_vv-border); background:var(--_vv-surface); }
 .spacer { flex:1; }
@@ -913,7 +910,7 @@ button[aria-pressed="true"] { color:var(--_vv-accent); background:var(--_vv-acce
 .pane-heading { height:37px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid var(--_vv-border); font-size:11px; font-weight:600; }
 .inspector-kind { color:var(--_vv-muted); font-size:10px; font-weight:400; }
 .viewport { position:relative; display:flex; flex-direction:column; flex:1; overflow:auto; min-width:0; min-height:0; padding:16px 4px; background:var(--_vv-bg); }
-.paper { display:block; flex:none; background:white; box-shadow:var(--vv-shadow,0 2px 8px rgb(0 0 0 / 14%)); margin:auto; }
+.paper { display:block; flex:none; background:white; box-shadow:var(--_vv-shadow); margin:auto; }
 .paper [data-shape-id] { cursor:pointer; }
 .paper [data-selected="true"] > [data-geometry] { stroke:var(--_vv-accent) !important; stroke-width:.025 !important; }
 .inspector-pane { flex:0 0 288px; width:288px; min-width:0; overflow:auto; border-left:1px solid var(--_vv-border); background:var(--_vv-secondary); }
@@ -939,11 +936,11 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
 .edit-controls label { display:block; margin-top:8px; }
 .edit-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
 .edit-actions button { font-size:11px; padding:3px 7px; }
-.edit-actions [data-edit="apply"]:enabled { background:var(--_vv-accent); border-color:var(--_vv-accent); color:var(--vv-accent-ink,#fff); }
+.edit-actions [data-edit="apply"]:enabled { background:var(--_vv-accent); border-color:var(--_vv-accent); color:var(--_vv-accent-ink); }
 .edit-controls [data-geometry] { min-width:0; margin:8px 0 0; padding:6px; border:1px solid var(--_vv-border); }
 .edit-controls [data-geometry-field] { display:block; width:100%; min-width:0; margin-top:4px; }
-.edit-controls [data-geometry-error] { color:var(--vv-danger,#b42318); }
-.edit-controls [data-edit-error] { color:var(--vv-danger,#b42318); }
+.edit-controls [data-geometry-error] { color:var(--_vv-danger); }
+.edit-controls [data-edit-error] { color:var(--_vv-danger); }
 .edit-controls [data-edit-diagnostics] { max-height:100px; overflow:auto; padding-left:16px; }
 .layer-controls [data-layer-list] { max-height:240px; overflow:auto; }
 .layer-controls fieldset { border:1px solid var(--_vv-border); margin:6px 0; padding:6px; min-width:0; }
@@ -1041,19 +1038,49 @@ summary::marker { color:var(--_vv-muted); font-size:10px; }
 `;
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/backstage.css?raw
-var backstage_default = "/* Visio's File tab and backstage. */\n:host {\n	position: relative;\n}\n/* The shared office-ui-backstage draws the File column; these style Visio's page content. */\n.backstage {\n	--office-accent: var(--_vv-accent);\n	--office-accent-foreground: var(--vv-accent-ink, #fff);\n}\n.backstage-page h1 {\n	margin: 0 0 24px;\n	font-size: 34px;\n	font-weight: 300;\n}\n.backstage-page h2 {\n	margin: 20px 0 8px;\n	font-size: 16px;\n	font-weight: 600;\n}\n.backstage-file {\n	margin-top: 0 !important;\n	font-size: 20px !important;\n	font-weight: 400 !important;\n	overflow-wrap: anywhere;\n}\n.backstage-facts {\n	display: grid;\n	grid-template-columns: max-content 1fr;\n	gap: 8px 24px;\n	max-width: 520px;\n	margin: 0;\n	font-size: 13px;\n}\n.backstage-facts dt {\n	color: var(--_vv-muted);\n}\n.backstage-facts dd {\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.backstage-action {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-start;\n	gap: 2px;\n	width: min(420px, 100%);\n	min-height: 64px;\n	margin: 0 0 10px;\n	padding: 10px 16px;\n	text-align: left;\n	background: var(--_vv-surface);\n}\n.backstage-action strong {\n	font-size: 14px;\n	font-weight: 600;\n}\n.backstage-action span,\n.backstage-muted,\n.backstage-note-count {\n	color: var(--_vv-muted);\n	font-size: 12px;\n}\n.backstage-templates {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 12px;\n}\n.backstage-templates .backstage-action,\n.backstage-templates ::slotted(*) {\n	width: 200px;\n	min-height: 120px;\n}\n/* Account: the shared profile editor, then Visio's product information. */\n.backstage-page office-ui-account {\n	max-width: 560px;\n}\n.backstage-product {\n	margin-top: 24px;\n}\n/* Share with people: a live session between windows of this browser. */\n.share-panel {\n	max-width: 560px;\n	margin-bottom: 16px;\n}\n.share-panel h2 {\n	margin-top: 0 !important;\n}\n.share-field {\n	display: grid;\n	gap: 4px;\n	max-width: 320px;\n	margin: 12px 0;\n	font-size: 13px;\n}\n.share-room {\n	min-height: 30px;\n	padding: 2px 8px;\n	border: 1px solid var(--_vv-border);\n	border-radius: 3px;\n	background: var(--_vv-surface);\n	color: inherit;\n	font: inherit;\n}\n.share-buttons button {\n	min-height: 32px;\n	padding: 0 16px;\n}\n.share-buttons button[hidden] {\n	display: none;\n}\n.share-status {\n	min-height: 20px;\n	font-size: 13px;\n}\n";
+var backstage_default = "/* Visio's File tab and backstage. */\n:host {\n	position: relative;\n}\n/* The shared office-ui-backstage draws the File column; these style Visio's page content. */\n.backstage-page h1 {\n	margin: 0 0 24px;\n	font-size: 34px;\n	font-weight: 300;\n}\n.backstage-page h2 {\n	margin: 20px 0 8px;\n	font-size: 16px;\n	font-weight: 600;\n}\n.backstage-file {\n	margin-top: 0 !important;\n	font-size: 20px !important;\n	font-weight: 400 !important;\n	overflow-wrap: anywhere;\n}\n.backstage-facts {\n	display: grid;\n	grid-template-columns: max-content 1fr;\n	gap: 8px 24px;\n	max-width: 520px;\n	margin: 0;\n	font-size: 13px;\n}\n.backstage-facts dt {\n	color: var(--_vv-muted);\n}\n.backstage-facts dd {\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.backstage-action {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-start;\n	gap: 2px;\n	width: min(420px, 100%);\n	min-height: 64px;\n	margin: 0 0 10px;\n	padding: 10px 16px;\n	text-align: left;\n	background: var(--_vv-surface);\n}\n.backstage-action strong {\n	font-size: 14px;\n	font-weight: 600;\n}\n.backstage-action span,\n.backstage-muted,\n.backstage-note-count {\n	color: var(--_vv-muted);\n	font-size: 12px;\n}\n.backstage-templates {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 12px;\n}\n.backstage-templates .backstage-action,\n.backstage-templates ::slotted(*) {\n	width: 200px;\n	min-height: 120px;\n}\n/* Account: the shared profile editor, then Visio's product information. */\n.backstage-page office-ui-account {\n	max-width: 560px;\n}\n.backstage-product {\n	margin-top: 24px;\n}\n/* Share with people: a live session between windows of this browser. */\n.share-panel {\n	max-width: 560px;\n	margin-bottom: 16px;\n}\n.share-panel h2 {\n	margin-top: 0 !important;\n}\n.share-field {\n	display: grid;\n	gap: 4px;\n	max-width: 320px;\n	margin: 12px 0;\n	font-size: 13px;\n}\n.share-room {\n	min-height: 30px;\n	padding: 2px 8px;\n	border: 1px solid var(--_vv-border);\n	border-radius: 3px;\n	background: var(--_vv-surface);\n	color: inherit;\n	font: inherit;\n}\n.share-buttons button {\n	min-height: 32px;\n	padding: 0 16px;\n}\n.share-buttons button[hidden] {\n	display: none;\n}\n.share-status {\n	min-height: 20px;\n	font-size: 13px;\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/canvas.css?raw
-var canvas_default = "/*\n * Drawing canvas focus. SVG outlines are drawn in drawing units (inches here), so a browser\n * focus ring on a shape becomes a page-sized blob. Shapes show focus with a dashed accent\n * stroke instead, only for keyboard focus; selection keeps its solid accent stroke.\n */\n.paper [data-shape-id]:focus,\n.paper [data-shape-id]:focus-visible {\n	outline: none;\n}\n.paper [data-shape-id]:focus-visible > [data-geometry] {\n	stroke: var(--vv-focus, var(--_vv-accent)) !important;\n	stroke-width: 0.04 !important;\n	stroke-dasharray: 0.08 0.05;\n}\n\n.paper [data-line-endpoint],\n.rotation-overlay [data-rotation-handle] {\n	fill: var(--_vv-accent);\n	stroke: white;\n	stroke-width: 1.5px;\n	cursor: crosshair;\n	touch-action: none;\n	pointer-events: all;\n}\n.paper .endpoint-preview,\n.paper .rotation-preview,\n.rotation-overlay .rotation-stem {\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 5 3;\n	pointer-events: none;\n}\n\n.rotation-overlay {\n	position: absolute;\n	z-index: 1;\n	pointer-events: none;\n}\n";
+var canvas_default = "/*\n * Drawing canvas focus. SVG outlines are drawn in drawing units (inches here), so a browser\n * focus ring on a shape becomes a page-sized blob. Shapes show focus with a dashed accent\n * stroke instead, only for keyboard focus; selection keeps its solid accent stroke.\n */\n.paper [data-shape-id]:focus,\n.paper [data-shape-id]:focus-visible {\n	outline: none;\n}\n.paper [data-shape-id]:focus-visible > [data-geometry] {\n	stroke: var(--_vv-focus) !important;\n	stroke-width: 0.04 !important;\n	stroke-dasharray: 0.08 0.05;\n}\n\n.paper [data-line-endpoint],\n.rotation-overlay [data-rotation-handle] {\n	fill: var(--_vv-accent);\n	stroke: white;\n	stroke-width: 1.5px;\n	cursor: crosshair;\n	touch-action: none;\n	pointer-events: all;\n}\n.paper .endpoint-preview,\n.paper .rotation-preview,\n.rotation-overlay .rotation-stem {\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 5 3;\n	pointer-events: none;\n}\n\n.rotation-overlay {\n	position: absolute;\n	z-index: 1;\n	pointer-events: none;\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/ribbon.css?raw
-var ribbon_default = "/*\n * Microsoft Visio ribbon layout on the shared ooxml-ui controls. Viewer theme tokens feed the\n * shared --office-* tokens, so host themes still apply. Loaded after the legacy styles.ts.\n */\n:host {\n	--office-foreground: var(--_vv-ink);\n	--office-muted-foreground: var(--_vv-muted);\n	--office-background: var(--_vv-surface);\n	--office-surface: var(--_vv-accent-soft);\n	--office-border: var(--_vv-border);\n	--office-accent: var(--_vv-accent);\n	--office-accent-foreground: var(--vv-accent-ink, #fff);\n	--office-ring: var(--vv-focus, var(--_vv-accent));\n	--office-font: 'Segoe UI', Arial, sans-serif;\n}\n\n/* Tab row: Quick Access Toolbar, then Visio's tabs. */\n.ribbon-head {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.qat {\n	display: flex;\n	align-items: center;\n	gap: 0;\n	padding: 0 6px;\n	border-right: 1px solid var(--_vv-border);\n}\n.qat office-ui-button {\n	--office-target-size: 30px;\n}\n.ribbon-head .ribbon-tabs {\n	flex: 0 1 auto;\n	min-width: 0;\n	height: 36px;\n	border-bottom: 0;\n	overflow-x: auto;\n	scrollbar-width: none;\n}\n.ribbon-head .ribbon-tabs button {\n	flex: none;\n	min-height: 35px;\n	padding: 6px 12px;\n	font-size: 13px;\n}\n\n/* Panels: groups of large commands and three-row stacks, as dense as Visio's. */\n.ribbon-content {\n	min-height: 96px;\n	padding: 2px 2px 0;\n}\n.ribbon-row {\n	display: flex;\n	flex-wrap: nowrap;\n	align-items: stretch;\n	gap: 0;\n	padding: 0;\n	border: 0;\n	background: transparent;\n}\n.ribbon-row office-ui-ribbon-group,\n.tools-content office-ui-ribbon-group {\n	min-width: 0;\n}\noffice-ui-ribbon-group office-ui-button,\noffice-ui-ribbon-group office-ui-menu-button {\n	--office-target-size: 24px;\n}\noffice-ui-ribbon-group [data-size='large'] {\n	--office-target-size: 30px;\n}\noffice-ui-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 66px;\n	padding: 2px 6px;\n	font-size: 12px;\n}\noffice-ui-menu-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 50px;\n	font-size: 12px;\n}\noffice-ui-ribbon-group [data-size='small']::part(button) {\n	justify-content: flex-start;\n	font-size: 12px;\n}\noffice-ui-ribbon-stack:not([orientation]) {\n	justify-content: flex-start;\n	padding-top: 2px;\n}\noffice-ui-ribbon-stack:not([orientation]) > * {\n	min-height: 24px;\n}\noffice-ui-ribbon-group > office-ui-ribbon-stack > office-ui-ribbon-stack[orientation] {\n	min-height: 32px;\n}\noffice-ui-select[data-combo] {\n	--office-target-size: 24px;\n}\noffice-ui-menu-button[data-active]::part(button) {\n	background: var(--_vv-accent-soft);\n	box-shadow: inset 0 0 0 1px var(--_vv-accent);\n}\n[data-unsupported] {\n	cursor: not-allowed;\n}\n.ribbon-check {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	min-height: 24px;\n	padding: 0 6px;\n	font-size: 12px;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-check[data-unsupported] {\n	color: var(--_vv-muted);\n	opacity: 0.6;\n}\n.ribbon-hint {\n	display: none;\n}\n\n/* Drawing window with optional rulers. */\n.canvas-area {\n	display: grid;\n	flex: 1;\n	min-width: 0;\n	min-height: 0;\n	grid-template-columns: 0 1fr;\n	grid-template-rows: 0 1fr;\n}\n.canvas-area[data-ruler='true'] {\n	grid-template-columns: 18px 1fr;\n	grid-template-rows: 18px 1fr;\n}\n.canvas-area > .viewport {\n	grid-column: 2;\n	grid-row: 2;\n}\n.ruler,\n.ruler-corner {\n	display: none;\n	background: var(--_vv-surface);\n}\n.canvas-area[data-ruler='true'] > .ruler,\n.canvas-area[data-ruler='true'] > .ruler-corner {\n	display: block;\n}\n.ruler-corner {\n	grid-column: 1;\n	grid-row: 1;\n	border-right: 1px solid var(--_vv-border);\n	border-bottom: 1px solid var(--_vv-border);\n}\n/* The shared office-ui-ruler draws ticks, labels and its own edge. */\n.ruler-h {\n	grid-column: 2;\n	grid-row: 1;\n}\n.ruler-v {\n	grid-column: 1;\n	grid-row: 2;\n}\n\n.page-bar {\n	display: flex;\n	flex: none;\n	align-items: stretch;\n	min-width: 0;\n	border-top: 1px solid var(--_vv-border);\n	background: var(--_vv-secondary);\n}\n.page-bar office-ui-menu-button {\n	--office-target-size: 28px;\n	flex: none;\n	padding: 0 2px;\n}\n.page-tabs {\n	flex: 1;\n	min-width: 0;\n	border-top: 0;\n}\noffice-ui-status-bar.status {\n	gap: 16px;\n	min-height: 29px;\n	padding: 0 8px 0 12px;\n	font-size: 11px;\n	background: var(--_vv-surface);\n	color: var(--_vv-muted);\n}\noffice-ui-status-item[value=''] {\n	display: none;\n}\noffice-ui-status-item[data-page-status] {\n	color: var(--_vv-ink);\n}\n.status-message {\n	flex: 1;\n	min-width: 0;\n}\n.viewport[data-tool='ellipse'],\n.viewport[data-tool='ellipse'] .paper [data-shape-id],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='rectangle'] .paper [data-shape-id],\n.viewport[data-tool='line'],\n.viewport[data-tool='line'] .paper [data-shape-id] {\n	cursor: crosshair;\n}\n.viewport[data-tool='ellipse'],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='line'] {\n	touch-action: none;\n}\n.draw-preview {\n	fill: var(--_vv-accent-soft);\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 4 3;\n	pointer-events: none;\n}\n.viewport[data-grid='true'] .paper {\n	--_vv-grid-minor: rgb(0 0 0 / 7%);\n	--_vv-grid-major: rgb(0 0 0 / 16%);\n	background-image:\n		linear-gradient(to right, var(--_vv-grid-major) 1px, transparent 1px),\n		linear-gradient(to top, var(--_vv-grid-major) 1px, transparent 1px),\n		linear-gradient(to right, var(--_vv-grid-minor) 1px, transparent 1px),\n		linear-gradient(to top, var(--_vv-grid-minor) 1px, transparent 1px);\n	background-size:\n		var(--vv-inch, 96px) var(--vv-inch, 96px),\n		var(--vv-inch, 96px) var(--vv-inch, 96px),\n		calc(var(--vv-inch, 96px) / 4) calc(var(--vv-inch, 96px) / 4),\n		calc(var(--vv-inch, 96px) / 4) calc(var(--vv-inch, 96px) / 4);\n	background-position: left bottom;\n}\n:host(:fullscreen) {\n	width: 100vw;\n	height: 100vh;\n}\n\n@media (max-width: 760px) {\n	.ribbon-row {\n		flex: 1;\n		min-width: 0;\n	}\n	.qat office-ui-button {\n		--office-target-size: 44px;\n	}\n	.ribbon-tools .tools-content office-ui-ribbon-group {\n		width: 100%;\n	}\n	office-ui-status-bar.status {\n		gap: 4px;\n		min-height: 48px;\n	}\n	office-ui-status-bar .notes-strip,\n	office-ui-status-bar .status-message,\n	office-ui-status-item[data-shape-status],\n	office-ui-status-item[data-page-status] {\n		display: none;\n	}\n	.zoom-controls {\n		flex: 1;\n		min-width: 0;\n		--office-zoom-slider-width: 0;\n	}\n}\n\n/* Visio's Tell me box sits right after the tabs. */\n.tell-me {\n	flex: 0 1 280px;\n	min-width: 140px;\n	margin: 0 8px;\n	--office-target-size: 28px;\n}\n.presentation-mode {\n	--office-target-size: 24px;\n}\n@media (max-width: 760px) {\n	.tell-me {\n		display: none;\n	}\n}\n";
+var ribbon_default = "/*\n * Microsoft Visio ribbon layout on the shared ooxml-ui controls. The shared --office-* tokens come\n * from the bridge in styles/theme.ts. Loaded after the legacy styles.ts.\n */\n\n/* Tab row: Quick Access Toolbar, then Visio's tabs. */\n.ribbon-head {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.qat {\n	display: flex;\n	align-items: center;\n	gap: 0;\n	padding: 0 6px;\n	border-right: 1px solid var(--_vv-border);\n}\n.qat office-ui-button {\n	--office-target-size: 30px;\n}\n.ribbon-head .ribbon-tabs {\n	flex: 0 1 auto;\n	min-width: 0;\n	height: 36px;\n	border-bottom: 0;\n	overflow-x: auto;\n	scrollbar-width: none;\n}\n.ribbon-head .ribbon-tabs button {\n	flex: none;\n	min-height: 35px;\n	padding: 6px 12px;\n	font-size: 13px;\n}\n\n/* Panels: groups of large commands and three-row stacks, as dense as Visio's. */\n.ribbon-content {\n	min-height: 96px;\n	padding: 2px 2px 0;\n}\n.ribbon-row {\n	display: flex;\n	flex-wrap: nowrap;\n	align-items: stretch;\n	gap: 0;\n	padding: 0;\n	border: 0;\n	background: transparent;\n}\n.ribbon-row office-ui-ribbon-group,\n.tools-content office-ui-ribbon-group {\n	min-width: 0;\n}\noffice-ui-ribbon-group office-ui-button,\noffice-ui-ribbon-group office-ui-menu-button {\n	--office-target-size: 24px;\n}\noffice-ui-ribbon-group [data-size='large'] {\n	--office-target-size: 30px;\n}\noffice-ui-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 66px;\n	padding: 2px 6px;\n	font-size: 12px;\n}\noffice-ui-menu-button[variant='stacked']::part(button) {\n	min-width: 48px;\n	min-height: 50px;\n	font-size: 12px;\n}\noffice-ui-ribbon-group [data-size='small']::part(button) {\n	justify-content: flex-start;\n	font-size: 12px;\n}\noffice-ui-ribbon-stack:not([orientation]) {\n	justify-content: flex-start;\n	padding-top: 2px;\n}\noffice-ui-ribbon-stack:not([orientation]) > * {\n	min-height: 24px;\n}\noffice-ui-ribbon-group > office-ui-ribbon-stack > office-ui-ribbon-stack[orientation] {\n	min-height: 32px;\n}\noffice-ui-select[data-combo] {\n	--office-target-size: 24px;\n}\noffice-ui-menu-button[data-active]::part(button) {\n	background: var(--_vv-accent-soft);\n	box-shadow: inset 0 0 0 1px var(--_vv-accent);\n}\n[data-unsupported] {\n	cursor: not-allowed;\n}\n.ribbon-check {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	min-height: 24px;\n	padding: 0 6px;\n	font-size: 12px;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-check[data-unsupported] {\n	color: var(--_vv-muted);\n	opacity: 0.6;\n}\n.ribbon-hint {\n	display: none;\n}\n\n/* Drawing window with optional rulers. */\n.canvas-area {\n	display: grid;\n	flex: 1;\n	min-width: 0;\n	min-height: 0;\n	grid-template-columns: 0 1fr;\n	grid-template-rows: 0 1fr;\n}\n.canvas-area[data-ruler='true'] {\n	grid-template-columns: 18px 1fr;\n	grid-template-rows: 18px 1fr;\n}\n.canvas-area > .viewport {\n	grid-column: 2;\n	grid-row: 2;\n}\n.ruler,\n.ruler-corner {\n	display: none;\n	background: var(--_vv-surface);\n}\n.canvas-area[data-ruler='true'] > .ruler,\n.canvas-area[data-ruler='true'] > .ruler-corner {\n	display: block;\n}\n.ruler-corner {\n	grid-column: 1;\n	grid-row: 1;\n	border-right: 1px solid var(--_vv-border);\n	border-bottom: 1px solid var(--_vv-border);\n}\n/* The shared office-ui-ruler draws ticks, labels and its own edge. */\n.ruler-h {\n	grid-column: 2;\n	grid-row: 1;\n}\n.ruler-v {\n	grid-column: 1;\n	grid-row: 2;\n}\n\n.page-bar {\n	display: flex;\n	flex: none;\n	align-items: stretch;\n	min-width: 0;\n	border-top: 1px solid var(--_vv-border);\n	background: var(--_vv-secondary);\n}\n.page-bar office-ui-menu-button {\n	--office-target-size: 28px;\n	flex: none;\n	padding: 0 2px;\n}\n.page-tabs {\n	flex: 1;\n	min-width: 0;\n	border-top: 0;\n}\noffice-ui-status-bar.status {\n	gap: 16px;\n	min-height: 29px;\n	padding: 0 8px 0 12px;\n	font-size: 11px;\n	background: var(--_vv-surface);\n	color: var(--_vv-muted);\n}\noffice-ui-status-item[value=''] {\n	display: none;\n}\noffice-ui-status-item[data-page-status] {\n	color: var(--_vv-ink);\n}\n.status-message {\n	flex: 1;\n	min-width: 0;\n}\n.viewport[data-tool='ellipse'],\n.viewport[data-tool='ellipse'] .paper [data-shape-id],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='rectangle'] .paper [data-shape-id],\n.viewport[data-tool='line'],\n.viewport[data-tool='line'] .paper [data-shape-id] {\n	cursor: crosshair;\n}\n.viewport[data-tool='ellipse'],\n.viewport[data-tool='rectangle'],\n.viewport[data-tool='line'] {\n	touch-action: none;\n}\n.draw-preview {\n	fill: var(--_vv-accent-soft);\n	stroke: var(--_vv-accent);\n	stroke-width: 1.5px;\n	stroke-dasharray: 4 3;\n	pointer-events: none;\n}\n.viewport[data-grid='true'] .paper {\n	--_vv-grid-minor: rgb(0 0 0 / 7%);\n	--_vv-grid-major: rgb(0 0 0 / 16%);\n	background-image:\n		linear-gradient(to right, var(--_vv-grid-major) 1px, transparent 1px),\n		linear-gradient(to top, var(--_vv-grid-major) 1px, transparent 1px),\n		linear-gradient(to right, var(--_vv-grid-minor) 1px, transparent 1px),\n		linear-gradient(to top, var(--_vv-grid-minor) 1px, transparent 1px);\n	background-size:\n		var(--vv-inch, 96px) var(--vv-inch, 96px),\n		var(--vv-inch, 96px) var(--vv-inch, 96px),\n		calc(var(--vv-inch, 96px) / 4) calc(var(--vv-inch, 96px) / 4),\n		calc(var(--vv-inch, 96px) / 4) calc(var(--vv-inch, 96px) / 4);\n	background-position: left bottom;\n}\n:host(:fullscreen) {\n	width: 100vw;\n	height: 100vh;\n}\n\n@media (max-width: 760px) {\n	.ribbon-row {\n		flex: 1;\n		min-width: 0;\n	}\n	.qat office-ui-button {\n		--office-target-size: 44px;\n	}\n	.ribbon-tools .tools-content office-ui-ribbon-group {\n		width: 100%;\n	}\n	office-ui-status-bar.status {\n		gap: 4px;\n		min-height: 48px;\n	}\n	office-ui-status-bar .notes-strip,\n	office-ui-status-bar .status-message,\n	office-ui-status-item[data-shape-status],\n	office-ui-status-item[data-page-status] {\n		display: none;\n	}\n	.zoom-controls {\n		flex: 1;\n		min-width: 0;\n		--office-zoom-slider-width: 0;\n	}\n}\n\n/* Visio's Tell me box sits right after the tabs. */\n.tell-me {\n	flex: 0 1 280px;\n	min-width: 140px;\n	margin: 0 8px;\n	--office-target-size: 28px;\n}\n.presentation-mode {\n	--office-target-size: 24px;\n}\n@media (max-width: 760px) {\n	.tell-me {\n		display: none;\n	}\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/visio/styles/shapes.css?raw
 var shapes_default = "/* Visio's Shapes window: stencil views, More/Quick Shapes rows and a two-column master grid. */\n.shapes-pane {\n	display: flex;\n	flex: 0 0 232px;\n	flex-direction: column;\n	width: 232px;\n	min-width: 0;\n	overflow: hidden;\n	border-right: 1px solid var(--_vv-border);\n	background: var(--_vv-secondary);\n}\n.shapes-pane .pane-heading {\n	height: 42px;\n	font-size: 18px;\n	font-weight: 400;\n	color: var(--_vv-accent);\n}\n.pane-collapse {\n	min-height: 28px;\n	width: 28px;\n	padding: 0;\n	border-color: transparent;\n	background: transparent;\n	font-size: 18px;\n	line-height: 1;\n}\n.shapes-views {\n	display: flex;\n	gap: 14px;\n	padding: 4px 12px 0;\n	border-bottom: 1px solid var(--_vv-border);\n}\n.shapes-views button {\n	position: relative;\n	min-height: 28px;\n	padding: 2px 0 6px;\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: var(--_vv-muted);\n	font-size: 11px;\n	font-weight: 600;\n	letter-spacing: 0.06em;\n	text-transform: uppercase;\n}\n.shapes-views button[aria-selected='true'] {\n	color: var(--_vv-ink);\n}\n.shapes-views button[aria-selected='true']::after {\n	content: '';\n	position: absolute;\n	inset: auto 0 -1px;\n	height: 2px;\n	background: var(--_vv-accent);\n}\n#shapes-stencils,\n#shapes-search {\n	flex: 1;\n	min-height: 0;\n	overflow: auto;\n	padding: 4px 0 8px;\n}\n.shapes-row {\n	display: flex;\n	align-items: center;\n	width: 100%;\n	min-height: 30px;\n	padding: 0 12px;\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	font-size: 12px;\n	text-align: left;\n}\n.shapes-row::after {\n	content: '\u203A';\n	margin-left: auto;\n	font-size: 15px;\n}\n.stencil-title {\n	margin: 2px 0;\n	padding: 6px 12px;\n	border-left: 3px solid var(--_vv-accent);\n	background: var(--_vv-accent-soft);\n	font-size: 12px;\n	font-weight: 600;\n}\n.masters {\n	display: grid;\n	grid-template-columns: 1fr 1fr;\n	gap: 2px;\n	margin: 0;\n	padding: 4px 6px;\n	list-style: none;\n}\n.masters li[hidden] {\n	display: none;\n}\n.master {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	width: 100%;\n	min-height: 40px;\n	padding: 4px 6px;\n	border-color: transparent;\n	background: transparent;\n	font-size: 11px;\n	line-height: 1.2;\n	text-align: left;\n	cursor: grab;\n}\n.master svg {\n	flex: none;\n	width: 28px;\n	height: 28px;\n	fill: var(--_vv-surface);\n	stroke: var(--_vv-accent);\n	stroke-width: 1.2;\n	stroke-linejoin: round;\n}\n.master[data-unsupported] {\n	cursor: not-allowed;\n	opacity: 0.45;\n}\n.master[data-unsupported]:hover {\n	border-color: transparent;\n	background: transparent;\n}\n.shapes-search-field {\n	display: block;\n	width: calc(100% - 24px);\n	margin: 6px 12px;\n}\n.shapes-empty {\n	margin: 8px 12px;\n	color: var(--_vv-muted);\n	font-size: 12px;\n}\n@media (max-width: 760px) {\n	.shapes-pane {\n		position: absolute;\n		inset: 0 auto 0 0;\n		z-index: 3;\n		width: min(260px, 100%);\n		box-shadow: 8px 0 24px #0002;\n	}\n	.master {\n		min-height: 44px;\n	}\n}\n.shapes-strip {\n	display: flex;\n	flex: 0 0 28px;\n	flex-direction: column;\n	align-items: center;\n	gap: 10px;\n	width: 28px;\n	min-width: 28px;\n	padding: 8px 0;\n	border: 0;\n	border-right: 1px solid var(--_vv-border);\n	border-radius: 0;\n	background: var(--_vv-secondary);\n	color: var(--_vv-accent);\n	font-size: 16px;\n}\n.shapes-strip[hidden] {\n	display: none;\n}\n.shapes-strip-label {\n	writing-mode: vertical-rl;\n	color: var(--_vv-ink);\n	font-size: 12px;\n}\n/* Visio's floating Pan & Zoom window. */\n.pan-zoom {\n	position: absolute;\n	right: 16px;\n	bottom: 16px;\n	z-index: 5;\n	width: 240px;\n	border: 1px solid var(--_vv-border);\n	background: var(--_vv-surface);\n	box-shadow: 0 6px 20px rgb(0 0 0 / 18%);\n}\n.pan-zoom[hidden] {\n	display: none;\n}\n.pan-zoom-heading {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 2px 4px 2px 10px;\n	border-bottom: 1px solid var(--_vv-border);\n	font-size: 12px;\n	font-weight: 600;\n}\n.pan-zoom-close {\n	min-height: 24px;\n	width: 24px;\n	padding: 0;\n	border-color: transparent;\n	background: transparent;\n}\n.pan-zoom-view {\n	display: grid;\n	place-items: center;\n	height: 180px;\n	padding: 8px;\n	background: var(--_vv-bg);\n	cursor: crosshair;\n	touch-action: none;\n}\n.pan-zoom-view svg {\n	max-width: 100%;\n	max-height: 100%;\n	background: #fff;\n	box-shadow: 0 1px 3px rgb(0 0 0 / 20%);\n}\n.pan-zoom-frame {\n	fill: rgb(220 38 38 / 8%);\n	stroke: #dc2626;\n	stroke-width: 2px;\n}\n";
 
+// src/visio/styles/theme.ts
+var visioThemeAliases = `:host {
+  --_vv-bg:var(--vv-background,var(--office-surface,#eceae8));
+  --_vv-surface:var(--vv-surface,var(--office-background,#fff));
+  --_vv-secondary:var(--vv-secondary,var(--office-surface,#f3f2f1));
+  --_vv-ink:var(--vv-ink,var(--office-foreground,#1f1f1f));
+  --_vv-muted:var(--vv-muted,var(--office-muted-foreground,#605e5c));
+  --_vv-border:var(--vv-border,var(--office-border,#e1dfdd));
+  --_vv-accent:var(--vv-accent,var(--office-accent,#3955a3));
+  --_vv-accent-soft:var(--vv-accent-soft,color-mix(in srgb,var(--_vv-accent) 10%,transparent));
+  --_vv-accent-ink:var(--vv-accent-ink,var(--office-accent-foreground,#fff));
+  --_vv-focus:var(--vv-focus,var(--office-ring,var(--_vv-accent)));
+  --_vv-danger:var(--vv-danger,var(--office-danger,#b42318));
+  --_vv-shadow:var(--vv-shadow,var(--office-shadow,0 2px 8px rgb(0 0 0 / 14%)));
+}
+`;
+var visioThemeBridge = themeBridge(":host > *", {
+  "--office-foreground": "var(--_vv-ink)",
+  "--office-muted-foreground": "var(--_vv-muted)",
+  "--office-background": "var(--_vv-surface)",
+  "--office-surface": "var(--_vv-accent-soft)",
+  "--office-border": "var(--_vv-border)",
+  "--office-accent": "var(--_vv-accent)",
+  "--office-accent-foreground": "var(--_vv-accent-ink)",
+  "--office-ring": "var(--_vv-focus)",
+  "--office-font": "'Segoe UI', Arial, sans-serif"
+});
+
 // src/visio/styles/index.ts
-var canvasAndRibbonStyles = [ribbon_default, shapes_default, backstage_default, canvas_default].join("\n");
+var canvasAndRibbonStyles = [ribbon_default, shapes_default, backstage_default, canvas_default, visioThemeBridge].join(
+  "\n"
+);
 
 // src/visio/ribbon-action.ts
 var RIBBON_ACTION_EVENT = "ribbon-action";
@@ -3687,8 +3714,12 @@ var ViewerShare = class {
   #revision = 0;
   /** The package this window last published or adopted, to skip repeats of it. */
   #last = null;
+  /** The drawing this window last published or adopted, so a local load or edit is sent once. */
+  #shared = null;
   #adopting = false;
   #pending = null;
+  /** Publishes a local drawing the room has not seen; set once the session has settled. */
+  #catchUp = null;
   #starting = false;
   get active() {
     return this.#session !== null;
@@ -3734,6 +3765,8 @@ var ViewerShare = class {
     this.#session?.destroy();
     this.#session = null;
     this.#pending = null;
+    this.#shared = null;
+    this.#catchUp = null;
     this.#revision = 0;
     this.#last = null;
     this.#people.participants = [];
@@ -3753,11 +3786,15 @@ var ViewerShare = class {
     });
     this.#session = session;
     const publish = () => {
+      const { document: document2 } = this.controller.state;
+      if (this.#adopting || this.#pending || document2 === this.#shared || !session.canWrite())
+        return;
       const bytes = this.#localBytes();
-      if (!bytes || !session.canWrite()) return;
+      if (!bytes) return;
       adapter.write(session.doc, { bytes, revision: this.#revision }, collab.LOCAL_ORIGIN);
       this.#revision = adapter.read(session.doc).revision;
       this.#last = bytes;
+      this.#shared = document2;
     };
     const adopt = () => {
       if (adapter.isEmpty(session.doc)) return;
@@ -3773,7 +3810,11 @@ var ViewerShare = class {
       if (transaction.origin !== collab.LOCAL_ORIGIN) adopt();
     };
     map.observe(observer);
-    const settle = () => adapter.isEmpty(session.doc) ? publish() : adopt();
+    const settle = () => {
+      this.#catchUp = publish;
+      if (adapter.isEmpty(session.doc)) publish();
+      else adopt();
+    };
     const stopReady = session.on("ready", settle);
     const stopPeers = session.on("peers", (peers) => this.#showPeers(peers));
     const stopEvents = this.controller.onEvent((name, detail) => {
@@ -3787,6 +3828,7 @@ var ViewerShare = class {
       stopPeers();
       stopEvents();
       stopState();
+      this.#catchUp = null;
     };
     if (session.canWrite()) settle();
     this.#showPeers(session.peers());
@@ -3811,6 +3853,7 @@ var ViewerShare = class {
     const done = (error) => {
       this.#adopting = false;
       if (error) this.#say(error instanceof Error ? error.message : String(error));
+      else this.#shared = this.controller.state.document;
     };
     this.#adopting = true;
     const run = document2 && edit.sourceAvailable ? this.controller.applyRemoteSource(bytes) : this.controller.load(bytes);
@@ -3818,6 +3861,7 @@ var ViewerShare = class {
   }
   #flush(state) {
     if (this.#pending && !state.edit.busy && !state.loading) this.#apply(this.#pending);
+    else this.#catchUp?.();
   }
   #showPeers(peers) {
     const me = this.profile();
@@ -7296,7 +7340,8 @@ var VisioViewerElement = class extends BaseElement {
     super();
     this.#root = this.attachShadow({ mode: "open" });
     registerViewerControls();
-    this.#root.innerHTML = `<style>${viewerStyles}${canvasAndRibbonStyles}</style>${viewerChromeTemplate}`;
+    installOfficeUiTheme();
+    this.#root.innerHTML = `<style>${visioThemeAliases}${viewerStyles}${canvasAndRibbonStyles}</style>${viewerChromeTemplate}`;
     const workspace = this.#root.querySelector(".workspace");
     this.#findBar = createFindBar(document);
     const ribbon = createRibbon(document);

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

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

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

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

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

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

package/dist/xlsx/calc-preparation.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Builds the open workbook's formula dependency graph while the editor is idle. Opening a large
+ * workbook paints without it, and without this the first edit would wait for every formula to be
+ * parsed and indexed (half a second on a 66,000-formula workbook). After the first paint the work
+ * runs in `requestIdleCallback` slices of at most 8 ms (a `setTimeout` fallback elsewhere),
+ * pauses while the user types, scrolls or edits a cell, and stops when another workbook loads.
+ * An edit made before it finishes is still correct: the core completes what is left first.
+ */
+import type { EditSession } from 'ooxml-core/xlsx';
+/** The longest slice of work, so a frame is never held up noticeably. */
+export declare const SLICE_MS = 8;
+/** How long after the last key, wheel or pointer event the work stays paused. */
+export declare const QUIET_MS = 250;
+/** What a slice is told about the time it has (the part of `IdleDeadline` used here). */
+export interface IdleTime {
+    timeRemaining(): number;
+}
+/** The timers the preparation runs on (the window's, replaced in tests). */
+export interface IdleScheduler {
+    now(): number;
+    idle(run: (deadline: IdleTime) => void): () => void;
+    later(run: () => void, ms: number): () => void;
+    /** Runs `run` once the next frame has been painted. */
+    afterPaint(run: () => void): () => void;
+}
+export declare function windowScheduler(view: (Window & typeof globalThis) | null): IdleScheduler;
+export declare class CalcPreparation {
+    /** True while a cell is being edited: no slice runs then. */
+    private readonly busy;
+    private readonly scheduler;
+    private session;
+    private cancel;
+    private lastActivity;
+    constructor(host: HTMLElement, 
+    /** True while a cell is being edited: no slice runs then. */
+    busy: () => boolean, scheduler?: IdleScheduler);
+    /** Prepares `session` (the workbook just opened) after the next paint; stops earlier work. */
+    start(session: EditSession | undefined): void;
+    stop(): void;
+    /** Whether work is still waiting (tests and diagnostics). */
+    get pending(): boolean;
+    private next;
+    private slice;
+}

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

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

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

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

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

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

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

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