ooxml-ui 1.6.2 → 1.8.0

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

@@ -3,7 +3,7 @@
  * 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";
+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  --_vv-status-bg:var(--vv-status-background,var(--_vv-surface));\n  --_vv-status-ink:var(--vv-status-ink,var(--_vv-ink));\n}\n:host([status-bar='colorful']) {\n  --_vv-status-bg:var(--vv-status-background,var(--_vv-accent));\n  --_vv-status-ink:var(--vv-status-ink,var(--_vv-accent-ink));\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.

package/dist/visio/styles.d.ts

@@ -1,2 +1,2 @@
 /** 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.paper [role=\"group\"][data-selected=\"true\"] [data-geometry] { stroke:var(--_vv-accent) !important; stroke-dasharray:.06 .04; }\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";
+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.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.inspector-pane { flex:0 0 288px; width:288px; min-width:0; overflow:auto; border-left:1px solid var(--_vv-border); background:var(--_vv-secondary); }\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.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; } }\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  .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 { min-height:44px; line-height:44px; }\n  .ribbon-content { min-height:96px; }\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 .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.pane-heading { font-size:12px; }\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}\n@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }\n";

package/dist/visio/text-measurer.d.ts

@@ -0,0 +1,25 @@
+import { type VisioTextMeasurer } from 'ooxml-core/visio';
+/** The part of a 2D canvas context that measuring needs; a worker's OffscreenCanvas has it too. */
+export interface MeasureContext {
+    font: string;
+    fontKerning?: string;
+    measureText(text: string): {
+        width: number;
+    };
+}
+/**
+ * Measures text with the browser's fonts for what the core's own tables do not cover (other
+ * families, italics, non-ASCII text). Visio's TEXTWIDTH adds up unkerned, unhinted advances, so
+ * kerning is turned off and the text is measured at 1000 px and scaled.
+ *
+ * A canvas silently draws a missing font with a fallback, which would measure a wrong size: a
+ * family counts as installed only when it measures differently from both generic fallbacks, and
+ * anything else is reported as not measurable. Superscript, subscript and small caps are not
+ * measured either.
+ */
+export declare function createCanvasTextMeasurer(context: MeasureContext): VisioTextMeasurer;
+/**
+ * Give the core a browser measurer where a canvas exists (the page, or a worker with
+ * OffscreenCanvas). Without one the core measures only what its own tables cover.
+ */
+export declare function installBrowserTextMeasurer(): boolean;

package/dist/visio/title-bar.d.ts

@@ -0,0 +1,9 @@
+import type { OfficeProfile } from '../controls.js';
+import type { ViewerState } from './controller.js';
+/**
+ * Visio's title bar on the shared `office-ui-title-bar`, as Word, Excel and PowerPoint use it: the
+ * V mark, the Quick Access Toolbar (Save, Undo, Redo), the drawing's name and state, and the
+ * signed-in name at the right. Tell me stays on the ribbon's tab row, where Visio has it.
+ */
+export declare function createTitleBar(doc: Document): HTMLElement;
+export declare function renderTitleBar(bar: HTMLElement, state: ViewerState, fileName: string, profile: OfficeProfile): void;

package/dist/visio/viewer-auto-connect-parts.d.ts

@@ -0,0 +1,12 @@
+import type { VisioAutoConnectDirection } from 'ooxml-core/visio/ui';
+import type { Master } from './stencil-catalog.js';
+/** An arrow or bar position in viewport pixels. */
+export interface AutoConnectArrow {
+    direction: VisioAutoConnectDirection;
+    x: number;
+    y: number;
+}
+/** One AutoConnect arrow. Out of the tab order: the arrows are a pointer aid. */
+export declare function autoConnectArrow(doc: Document, arrow: AutoConnectArrow, hasNeighbour: boolean): HTMLButtonElement;
+/** The mini toolbar of Quick Shapes beside an arrow. */
+export declare function autoConnectBar(doc: Document, arrow: AutoConnectArrow, masters: readonly Master[]): HTMLElement;

package/dist/visio/viewer-auto-connect.d.ts

@@ -0,0 +1,33 @@
+import { type VisioAutoConnectDirection } from 'ooxml-core/visio/ui';
+import type { ViewerController, ViewerState } from './controller.js';
+export interface AutoConnectHost {
+    /** The viewer's shadow root (a document in tests): the ribbon check box and event scope. */
+    root: ShadowRoot | Document;
+    viewport: HTMLElement;
+    controller: ViewerController;
+    announce(message: string): void;
+    edit(run: () => Promise<void>, message: string): void;
+    /** Arrows belong to the Pointer tool. */
+    pointerTool(): boolean;
+}
+/**
+ * View > Visual Aids > AutoConnect, on by default as in Visio. Resting the mouse on a top-level
+ * two-dimensional shape with the Pointer tool shows an arrow outside each side. An arrow shows a
+ * mini toolbar with the current stencil's first four Quick Shapes: choosing one adds it one gap
+ * away in that direction with a connector glued to both shapes, as one undoable step. Clicking
+ * the arrow itself connects to the neighbouring shape it points at, or adds the first Quick Shape
+ * when there is none. Arrows are a mouse and pen aid: touch and the keyboard never show them.
+ */
+export declare class ViewerAutoConnect {
+    #private;
+    private readonly host;
+    constructor(host: AutoConnectHost);
+    get enabled(): boolean;
+    /** The shape whose arrows show, for tests and status text. */
+    get source(): string | undefined;
+    toggle(): void;
+    render(state: ViewerState): void;
+    /** Connects in `direction`: to `masterId` as a new shape, else to the neighbour or first Quick Shape. */
+    connect(direction: VisioAutoConnectDirection, masterId?: string): void;
+    wire(): () => void;
+}

package/dist/visio/viewer-backstage.d.ts

@@ -22,7 +22,6 @@ export interface BackstageHost {
         pageIndex: number;
     }>;
     closeDocument(): void;
-    revealNotes(): void;
     showOptions(): void;
     announce(message: string): void;
     noteCount(): number;
@@ -37,5 +36,7 @@ export declare class ViewerBackstage {
     show(page?: BackstagePage): void;
     hide(): void;
     wire(): () => void;
+    /** Save: download the edited drawing as a copy (File > Save and the Quick Access Toolbar). */
+    download(): void;
     render(state: ViewerState): void;
 }

package/dist/visio/viewer-canvas.d.ts

@@ -10,7 +10,7 @@ export declare class ViewerCanvas {
     private readonly notes;
     private readonly notesPanel;
     private readonly inspector;
-    constructor(viewport: HTMLElement, notes: HTMLUListElement, notesPanel: HTMLElement, inspector: HTMLDetailsElement);
+    constructor(viewport: HTMLElement, notes: HTMLUListElement, notesPanel: HTMLElement, inspector: HTMLElement);
     get warnings(): readonly string[];
     /** Force the next render to redraw the page (fonts loaded, element reconnected). */
     invalidate(): void;

package/dist/visio/viewer-change-shape.d.ts

@@ -1,9 +1,13 @@
 import type { VisioChangeShapeTarget } from 'ooxml-core/visio';
 import type { ViewerController, ViewerState } from './controller.js';
+import { DOCUMENT_MASTER_PREFIX } from './shapes-document.js';
+/** What the gallery asks for: a Basic Shapes outline, or `document:<id>` for a master. */
+export type ChangeShapeChoice = VisioChangeShapeTarget | `${typeof DOCUMENT_MASTER_PREFIX}${string}`;
 /**
- * Home > Change Shape: replaces the outline of the one selected local shape through the core's
- * `change-shape` edit, so undo and redo come from the source-backed history. The gallery is
- * enabled only for a selection the scene admits; locks and formulas are proven by the core.
+ * Home > Change Shape through the core's `change-shape` edit, so undo and redo come from the
+ * source-backed history. A shape drawn here takes another Basic Shapes outline; a stencil shape
+ * becomes an instance of another master of the Document Stencil, as Visio's Change Shape does.
+ * The gallery shows the choices for the selection; locks and formulas are proven by the core.
  */
 export declare class ViewerChangeShape {
     #private;
@@ -11,6 +15,6 @@ export declare class ViewerChangeShape {
     private readonly controller;
     private readonly edit;
     constructor(root: ShadowRoot, controller: ViewerController, edit: (run: () => Promise<void>, message: string) => void);
-    run(shape: VisioChangeShapeTarget): void;
+    run(shape: ChangeShapeChoice): void;
     render(state: ViewerState): void;
 }

package/dist/visio/viewer-chrome.d.ts

@@ -2,9 +2,16 @@ import type { ViewerController, ViewerState } from './controller.js';
 /**
  * Static workspace markup (legacy; migrate to builders when next changed). The ribbon, Shapes
  * window, page tabs and status bar are built by their own modules. Visio keeps pages in the
- * bottom tabs and the All pages list, so there is no page pane. Labels are inserted as text.
+ * bottom tabs and the All pages list, so there is no page pane. The right task pane shows one
+ * view at a time (Shape Data, or Format Shape, which builds its own view), and starts closed.
  */
-export declare const viewerChromeTemplate = "<div class=\"workspace\">\n  <div class=\"viewport\" tabindex=\"0\" role=\"region\" aria-label=\"Diagram canvas\"></div>\n  <aside id=\"inspector-pane\" class=\"inspector-pane\" aria-label=\"Drawing inspector\">\n    <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\">\u00D7</button></div>\n    <div class=\"inspector-body\">\n      <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>\n      <p class=\"selection-hint\">Select a shape on the canvas to see its data and links.</p>\n      <details class=\"shape-inspector inspector-card\" hidden><summary>Selected shape</summary><div></div></details>\n      <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><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></details><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>\n      <details class=\"notes inspector-card\"><summary>Compatibility notes</summary><ul></ul></details>\n    </div>\n  </aside>\n</div>";
+export declare const viewerChromeTemplate = "<div class=\"workspace\">\n  <div class=\"viewport\" tabindex=\"0\" role=\"region\" aria-label=\"Diagram canvas\"></div>\n  <office-ui-task-pane id=\"inspector-pane\" class=\"inspector-pane\" label=\"Shape Data\" hidden>\n    <section class=\"shape-inspector\" data-pane-view=\"selection\"><p class=\"selection-hint\">No Shape Data</p><div></div></section>\n  </office-ui-task-pane>\n</div>";
+/** The titles Visio gives the task pane views. */
+declare const PANE_TITLES: {
+    readonly selection: 'Shape Data';
+    readonly format: 'Format Shape';
+};
+export type PaneView = keyof typeof PANE_TITLES;
 export type TaskPane = 'shapes' | 'inspector';
 /** Presentation state stays local; page navigation uses the same controller as every binding. */
 export declare class ViewerChrome {
@@ -16,7 +23,8 @@ export declare class ViewerChrome {
     closeCompactTools(): void;
     /** Show or hide a task pane; compact layouts close the Tools menu afterwards. */
     togglePane(pane: TaskPane): void;
-    /** Open an inspector disclosure; text editing may focus the text field directly (F2). */
-    reveal(kind: 'notes' | 'selection' | 'edit' | 'layers', focusText?: boolean): void;
-    render(state: ViewerState, noteCount: number): void;
+    /** Show a task pane view (Shape Data, Format Shape) and move focus into it. */
+    reveal(kind: PaneView): void;
+    render(state: ViewerState): void;
 }
+export {};

package/dist/visio/viewer-color-menus.d.ts

@@ -0,0 +1,34 @@
+import type { VisioPage, VisioShape } from 'ooxml-core/visio';
+import type { ViewerController, ViewerState } from './controller.js';
+import type { VisioFormattingAction } from './ribbon-action.js';
+import { ViewerMoreColors } from './viewer-more-colors.js';
+/** The colours the selection has now, per target; undefined when mixed or nothing is selected. */
+export interface SelectionColors {
+    fill: string | undefined;
+    line: string | undefined;
+    font: string | undefined;
+}
+/** The selected shapes Fill and Line can format, or none when any of them cannot be. */
+export declare function styleSelection(state: ViewerState): {
+    page: VisioPage;
+    shapes: VisioShape[];
+} | undefined;
+export declare function selectionColors(state: ViewerState): SelectionColors;
+/**
+ * The ribbon's Fill, Line and Font Color pickers: each menu holds the shared colour grid with the
+ * page's theme colours. A pick runs the same formatting action the old fixed colours did; More
+ * Colors opens the custom colour dialog, and a custom colour joins Recent Colors for every menu.
+ */
+export declare class ViewerColorMenus {
+    #private;
+    private readonly root;
+    private readonly controller;
+    private readonly run;
+    readonly moreColors: ViewerMoreColors;
+    constructor(root: ShadowRoot, controller: ViewerController, run: (action: VisioFormattingAction) => void);
+    get recent(): readonly string[];
+    /** A custom colour was applied somewhere: show it under Recent Colors everywhere. */
+    remember(color: string): void;
+    wire(): () => void;
+    render(state: ViewerState): void;
+}

package/dist/visio/viewer-commands.d.ts

@@ -1,3 +1,4 @@
+import type { VisioGridSteps } from 'ooxml-core/visio/ui';
 import type { ViewerController, ViewerState } from './controller.js';
 import { type VisioRibbonAction, type CanvasTool } from './ribbon-action.js';
 import type { Rulers } from './viewer-ruler.js';
@@ -11,7 +12,7 @@ interface CommandHost {
     controller: ViewerController;
     fit(mode: 'page' | 'width'): void;
     togglePane(pane: 'shapes' | 'inspector'): void;
-    reveal(panel: 'edit' | 'notes' | 'selection' | 'layers', focusText: boolean): void;
+    reveal(panel: 'edit' | 'notes' | 'selection' | 'format', focusText: boolean): void;
     focusSearch(): void;
     focusReplace?(): void;
     togglePanZoom(): void;
@@ -34,6 +35,8 @@ export declare class ViewerCommands {
     private readonly host;
     readonly layoutCommands: ViewerLayoutCommands;
     constructor(host: CommandHost);
+    /** The page's grid lines while View > Grid is on (Snap to Grid), else 0. */
+    get gridStep(): VisioGridSteps | 0;
     get tool(): CanvasTool;
     /** Browser clipboard transport used by the element's public clipboard methods. */
     clipboard(operation: ClipboardOperation): Promise<void>;

package/dist/visio/viewer-connector-tool.d.ts

@@ -1,4 +1,4 @@
-import type { VisioConnectorRoute, VisioPage } from 'ooxml-core/visio';
+import { type VisioConnectorRoute, type VisioPage } from 'ooxml-core/visio';
 import type { ViewerController, ViewerState } from './controller.js';
 /** What an end released at the pointer would glue to. */
 export interface ConnectorGlueHit {
@@ -8,13 +8,15 @@ export interface ConnectorGlueHit {
     x?: number;
     y?: number;
 }
-/** A page shape the core can glue to: a visible, local, top-level 2D shape. */
+/** A page shape the core can glue to: a visible top-level 2D shape, drawn or from a stencil. */
 export declare function connectorGlueTarget(page: VisioPage, element: Element | null): string | undefined;
 /**
  * The glue target under a client point: the nearest connection point within a few pixels of it,
  * else the shape under it. Pointer capture retargets events, so the point itself is hit-tested.
  */
-export declare function connectorGlueAt(viewport: HTMLElement, page: VisioPage, event: Pick<PointerEvent, 'clientX' | 'clientY' | 'target'>, zoom: number): ConnectorGlueHit | undefined;
+export declare function connectorGlueAt(viewport: HTMLElement, page: VisioPage, event: Pick<PointerEvent, 'clientX' | 'clientY' | 'target'>, zoom: number, 
+/** The drawing's GlueSettings (Snap & Glue): Glue off glues nothing, and connection points can be left out. */
+glue?: number): ConnectorGlueHit | undefined;
 /**
  * Home > Tools > Connector (Ctrl+3). A drag draws a dynamic connector in the current route
  * (right-angle by default); ends released on shapes glue to them, ends released on a connection

package/dist/visio/viewer-data-window.d.ts

@@ -2,7 +2,11 @@ import type { VisioDataRecordset } from 'ooxml-core/visio';
 /** Drag payload of External Data rows: `{ recordsetId, rowIds }` as JSON. */
 export declare const DATA_ROW_MIME = "application/x-visio-viewer-data-row";
 export type DataWindowAction = 'link' | 'auto-link' | 'unlink' | 'refresh' | 'remove' | 'close';
-/** Visio's External Data window: a docked grid of the drawing's saved recordsets. */
+/**
+ * Visio's External Data window: a grid of the drawing's saved recordsets, docked under the
+ * drawing in the shared `office-ui-task-pane` (title and close button), with the recordset
+ * picker and the link commands in a bar above the grid.
+ */
 export declare function createExternalDataWindow(doc: Document): HTMLElement;
 export interface DataWindowView {
     recordsets: readonly VisioDataRecordset[];

package/dist/visio/viewer-draw-tool.d.ts

@@ -1,4 +1,4 @@
-import type { VisioPage, VisioOutlineShape } from 'ooxml-core/visio';
+import type { VisioPage } from 'ooxml-core/visio';
 import { type VisioPathTool, type VisioDrawingPoint } from 'ooxml-core/visio/ui';
 import type { ViewerController, ViewerState } from './controller.js';
 export { pagePoint } from './viewer-page-point.js';
@@ -7,16 +7,6 @@ export declare function insertRectangle(controller: ViewerController, page: Visi
     width: number;
     height: number;
 }): Promise<string>;
-/** Add a Basic Shapes master: Ellipse and Circle are native ellipses, the rest core outlines. */
-export declare function insertMaster(controller: ViewerController, page: VisioPage, master: {
-    kind: 'ellipse';
-} | {
-    kind: 'rectangle';
-    shape: VisioOutlineShape;
-}, centre: VisioDrawingPoint, size: {
-    width: number;
-    height: number;
-}): Promise<string>;
 /**
  * Quick Style a dropped master gets: variant colour 1 (Accent 1 in every built-in theme's first
  * variant, and in the theme-less Office colours), theme style 4, so drops follow Design > Variants.

package/dist/visio/viewer-element.d.ts

@@ -1,8 +1,10 @@
 import type { VisioDocument, VisioEdit } from 'ooxml-core/visio';
 import type { VsdxSource, VisioShapeSelection } from 'ooxml-core/visio/ui';
 import { ViewerController } from './controller.js';
+import { type RibbonAddInTab } from '../ribbon/add-in-tabs.js';
 import { type BackstagePage } from './backstage.js';
 import type { CreateVsdxOptions } from 'ooxml-core/visio';
+import { type StatusBarTheme } from './viewer-options.js';
 import { type SvgExportOptions, type SvgExportResult } from './export-svg.js';
 import { type CurrentPagePrintSnapshotOptions, type PrintSnapshot } from './print-snapshot.js';
 declare const BaseElement: typeof HTMLElement;
@@ -16,6 +18,20 @@ export declare class VisioViewerElement extends BaseElement {
     set pageIndex(value: number);
     get zoom(): number;
     set zoom(value: number);
+    /**
+     * 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(): StatusBarTheme;
+    set statusBar(value: StatusBarTheme);
+    /**
+     * Tabs a host adds after Help, as an Office add-in does (Visio's ACROBAT tab). Each command
+     * runs its `run` callback and dispatches `office-ribbon-add-in` (`{ tab, command }`) from the
+     * viewer. Assign a new array to change them; a tab cannot take a built-in tab's id.
+     */
+    get ribbonAddIns(): readonly RibbonAddInTab[];
+    set ribbonAddIns(value: readonly RibbonAddInTab[]);
     get showToolbar(): boolean;
     set showToolbar(value: boolean);
     get renderWarnings(): readonly string[];

package/dist/visio/viewer-format-pane.d.ts

@@ -0,0 +1,26 @@
+import type { ViewerController, ViewerState } from './controller.js';
+import { type PaneSection } from './format-pane-view.js';
+import type { VisioFormattingAction } from './ribbon-action.js';
+import { type ViewerColorMenus } from './viewer-color-menus.js';
+/**
+ * Visio's Format Shape task pane (the Shape Styles launcher, the Fill, Line and Effects menus'
+ * options commands and the shape menu's Format Shape): Fill (none or solid, colour, transparency,
+ * pattern and its background), Line (colour, transparency, width, dash, cap, rounding and line
+ * ends) and Effects (shadow, glow, soft edges, reflection). It follows the selection, and every
+ * change is applied at once as one undoable `format-shape` edit per shape, through the same
+ * action the ribbon uses.
+ */
+export declare class ViewerFormatPane {
+    #private;
+    private readonly root;
+    private readonly controller;
+    private readonly colors;
+    private readonly run;
+    private readonly reveal;
+    private readonly announce;
+    constructor(root: ShadowRoot, controller: ViewerController, colors: ViewerColorMenus, run: (action: VisioFormattingAction) => void, reveal: () => void, announce: (message: string) => void);
+    /** Show the pane, at `section` when given; it explains itself when nothing can be formatted. */
+    show(section?: PaneSection): void;
+    wire(): () => void;
+    render(state: ViewerState): void;
+}

package/dist/visio/viewer-guides.d.ts

@@ -1,5 +1,5 @@
-import type { VisioPage } from 'ooxml-core/visio';
-import { type VisioPagePoint } from 'ooxml-core/visio/ui';
+import { type VisioPage } from 'ooxml-core/visio';
+import { type VisioSnapGrid, type VisioPagePoint } from 'ooxml-core/visio/ui';
 import type { ViewerController, ViewerState } from './controller.js';
 /**
  * View > Guides and View > Dynamic Grid. Guides are the page's `Type="Guide"` shapes, drawn as
@@ -19,8 +19,11 @@ export declare class ViewerGuides {
     get shown(): boolean;
     toggleGuides(): void;
     toggleDynamicGrid(): void;
-    /** Snap a shape drag; draws alignment hints. Unchanged when no snapping is active. */
-    snap(page: VisioPage, ids: readonly string[], delta: VisioPagePoint): VisioPagePoint;
+    /**
+     * 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(page: VisioPage, ids: readonly string[], delta: VisioPagePoint, grid?: number | VisioSnapGrid): VisioPagePoint;
     clearHints(): void;
     wire(): () => void;
     render(state: ViewerState): void;

package/dist/visio/viewer-inline-text.d.ts

@@ -0,0 +1,31 @@
+import type { ViewerController, ViewerState } from './controller.js';
+/**
+ * Visio's in-place text editing: double-click a shape, press F2 or start typing with one shape
+ * selected, and its text becomes editable where it is drawn. Esc, clicking elsewhere on the canvas
+ * or selecting something else saves the change as one undoable edit (as in Visio, Esc keeps what
+ * you typed); Enter starts a new line. Ribbon commands leave the editor open, and the draft
+ * survives other edits to the same drawing. The editor is a plain textarea (`#edit-text`), so
+ * Insert Symbol, Field and Spelling work on it.
+ */
+export declare class ViewerInlineText {
+    #private;
+    private readonly viewport;
+    private readonly controller;
+    private readonly announce;
+    readonly input: HTMLTextAreaElement;
+    constructor(viewport: HTMLElement, controller: ViewerController, announce: (message: string) => void);
+    get editing(): boolean;
+    wire(): () => void;
+    /**
+     * 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?: string): boolean;
+    /** Save the draft as one edit; `focusCanvas` returns keyboard focus to the drawing. */
+    commit(focusCanvas: boolean): Promise<void>;
+    /**
+     * 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: ViewerState): void;
+}

package/dist/visio/viewer-input.d.ts

@@ -5,6 +5,10 @@ interface Controls {
         value: number;
     };
 }
+/** Page inches an arrow key nudges the selection: the editor's 1/16-inch drawing snap. */
+export declare const NUDGE_STEP: number;
 /** Own every DOM listener and abort them together when the surface is disposed. */
-export declare function wireViewerInputs(controls: Controls, controller: ViewerController, fit: (mode: 'page' | 'width') => void): () => void;
+export declare function wireViewerInputs(controls: Controls, controller: ViewerController, fit: (mode: 'page' | 'width') => void, announce?: (message: string) => void, 
+/** Typing a character with one shape selected starts editing its text; true when it did. */
+typeText?: (character: string) => boolean): () => void;
 export {};

package/dist/visio/viewer-layer-properties.d.ts

@@ -0,0 +1,18 @@
+import type { ViewerController, ViewerState } from './controller.js';
+import { ViewerDialog } from './viewer-dialog.js';
+/**
+ * Home > Editing > Layers > Layer Properties, as Visio's dialog: one row per layer of the page
+ * (and of its background pages) with its shape count, Visible, Print and Lock boxes and colour.
+ * OK saves the changed flags as one `set-layer-properties` edit. A read-only drawing can still
+ * show or hide layers here, for this view only.
+ */
+export declare class ViewerLayerProperties {
+    #private;
+    private readonly root;
+    private readonly controller;
+    private readonly announce;
+    readonly dialog: ViewerDialog;
+    constructor(root: ShadowRoot, controller: ViewerController, announce: (message: string) => void);
+    open(): void;
+    render(state: ViewerState): void;
+}

package/dist/visio/viewer-layout-commands.d.ts

@@ -1,8 +1,10 @@
 import type { ViewerController, ViewerState } from './controller.js';
 import type { VisioLayoutAction } from './ribbon-action.js';
+import { ViewerAutoConnect } from './viewer-auto-connect.js';
 import { ViewerExplorer } from './viewer-explorer.js';
 import { ViewerGuides } from './viewer-guides.js';
 import { ViewerLayerAssign } from './viewer-layer-assign.js';
+import { ViewerLayerProperties } from './viewer-layer-properties.js';
 import { ViewerLayout } from './viewer-layout.js';
 import { ViewerPasteSpecial } from './viewer-paste-special.js';
 import { ViewerSelectType } from './viewer-select-type.js';
@@ -19,20 +21,24 @@ export interface LayoutCommandHost {
     edit(run: () => Promise<void>, message: string): void;
     /** Paste the viewer's own shape clipboard, as Ctrl+V does. */
     pasteShapes(): Promise<void>;
+    /** Whether the Pointer tool is the current tool (AutoConnect arrows belong to it). */
+    pointerTool(): boolean;
 }
 /**
  * Arrangement, layout, layers, selection, view aids and help commands: Auto Align & Space,
- * Re-Layout Page and its Layout dialog, Assign to Layer, Select by Type, Paste Special, Guides,
- * Dynamic Grid, Drawing Explorer, Help and Show Training.
+ * Re-Layout Page and its Layout dialog, Assign to Layer, Layer Properties, Select by Type, Paste Special, Guides,
+ * Dynamic Grid, AutoConnect, Drawing Explorer, Help and Show Training.
  */
 export declare class ViewerLayoutCommands {
     private readonly host;
     readonly layout: ViewerLayout;
     readonly layers: ViewerLayerAssign;
+    readonly layerProperties: ViewerLayerProperties;
     readonly select: ViewerSelectType;
     readonly paste: ViewerPasteSpecial;
     readonly guides: ViewerGuides;
     readonly explorer: ViewerExplorer;
+    readonly autoConnect: ViewerAutoConnect;
     constructor(host: LayoutCommandHost);
     run(action: VisioLayoutAction): void;
     wire(): () => void;

package/dist/visio/viewer-more-colors.d.ts

@@ -0,0 +1,16 @@
+import type { OfficeUiColorCustom } from '../controls.js';
+import { ViewerDialog } from './viewer-dialog.js';
+/**
+ * Office's More Colors dialog, Custom tab, on the shared `office-ui-color-custom`: the hue and
+ * saturation square, the luminance slider, Hex, RGB and HSL fields and the New and Current
+ * swatches. OK hands the colour (`#rrggbb`) to the caller.
+ */
+export declare class ViewerMoreColors {
+    #private;
+    readonly dialog: ViewerDialog;
+    readonly picker: OfficeUiColorCustom;
+    constructor(root: ShadowRoot);
+    /** Opens on `current` (`#rrggbb`; black when it is not a colour) and reports the choice. */
+    open(current: string | undefined, pick: (color: string) => void): void;
+    close(): void;
+}

package/dist/visio/viewer-options.d.ts

@@ -1,10 +1,17 @@
 import { type OfficeOptionCategory, type OfficeProfile } from '../controls.js';
 /**
- * Visio's File > Options categories, in Visio's order. Only User name and Initials are honoured
- * today (they are the local profile, also used as the identity in a shared session); every other
- * setting is shown disabled with the capability it is waiting for.
+ * Visio's File > Options categories, in Visio's order. User name and Initials (the local profile,
+ * also the identity in a shared session) and Office Theme (the status bar's look) are honoured;
+ * every other setting is shown disabled with the capability it is waiting for.
  */
 export declare const VISIO_OPTION_CATEGORIES: readonly OfficeOptionCategory[];
+/** The status bar's look: Visio's product colour ("Colorful") or the neutral suite bar. */
+export type StatusBarTheme = 'colorful' | 'neutral';
+export declare const isStatusBarTheme: (value: unknown) => value is StatusBarTheme;
+/** The Office Theme remembered on this device, if any (storage may be unavailable). */
+export declare function readStatusBarTheme(): StatusBarTheme | undefined;
+/** Office Theme as Options offers it: the two light looks, or the dark theme. */
+export type OfficeThemeChoice = StatusBarTheme | 'dark';
 /** The Options dialog element. Built once and appended to the viewer's shadow root. */
 export declare function createOptionsDialog(doc: Document): HTMLElement;
 /**
@@ -14,7 +21,14 @@ export declare function createOptionsDialog(doc: Document): HTMLElement;
 export declare class ViewerProfile {
     #private;
     private readonly onProfile;
-    constructor(root: ShadowRoot, onProfile?: (profile: OfficeProfile) => void);
+    /** Reads and applies the Office Theme on the viewer element. */
+    private readonly theme;
+    constructor(root: ShadowRoot, onProfile?: (profile: OfficeProfile) => void, 
+    /** Reads and applies the Office Theme on the viewer element. */
+    theme?: {
+        get(): OfficeThemeChoice;
+        set(theme: OfficeThemeChoice): void;
+    });
     get profile(): OfficeProfile;
     /** Open Visio Options, on General as Visio does. */
     showOptions(category?: string): void;