visio-react-viewer 0.3.0 → 0.4.0

package/dist/types/src/backstage.d.ts

@@ -0,0 +1,9 @@
+/** Visio's File (backstage) pages, in Visio's order. Save and Close act without a page. */
+export declare const BACKSTAGE_ITEMS: readonly [readonly ["info", "Info"], readonly ["new", "New"], readonly ["open", "Open"], readonly ["save", "Save"], readonly ["save-as", "Save As"], readonly ["print", "Print"], readonly ["share", "Share"], readonly ["export", "Export"], readonly ["close", "Close"]];
+export declare const BACKSTAGE_FOOTER: readonly [readonly ["account", "Account"], readonly ["feedback", "Feedback"], readonly ["options", "Options"]];
+export type BackstagePage = Exclude<(typeof BACKSTAGE_ITEMS)[number][0] | (typeof BACKSTAGE_FOOTER)[number][0], 'save' | 'close'>;
+/**
+ * Visio's backstage: a full-window File view with a navigation column and one page per item.
+ * Static application structure only; document values are filled in later as text.
+ */
+export declare function createBackstage(doc: Document): HTMLElement;

package/dist/types/src/ribbon-action.d.ts

@@ -9,18 +9,25 @@ export type VisioRibbonAction = {
     type: 'delete';
 } | {
     type: 'pane';
-    pane: 'pages' | 'inspector';
+    pane: 'shapes' | 'inspector';
 } | {
     type: 'reveal';
     panel: 'edit' | 'notes' | 'selection' | 'layers';
     focusText?: boolean;
 } | {
     type: 'grid';
+} | {
+    type: 'panZoom';
+} | {
+    type: 'ruler';
 } | {
     type: 'fullscreen';
 } | {
     type: 'zoom';
     mode: 'fit' | 'width' | 'actual';
+} | {
+    type: 'zoomTo';
+    percent: number;
 } | {
     type: 'search';
 } | {

package/dist/types/src/ribbon-home-format.d.ts

@@ -0,0 +1,2 @@
+/** Visio's Home > Clipboard, Font and Paragraph groups, in Visio's layout. */
+export declare function textGroups(doc: Document): [HTMLElement, HTMLElement, HTMLElement];

package/dist/types/src/ribbon-home.d.ts

@@ -1,6 +1,6 @@
 /**
- * Visio's Home tab, limited to commands this build can honestly perform: Undo, Tools and
- * Editing. Clipboard, Font, Paragraph, Shape Styles and Arrange wait for core edit commands.
- * The compact (phone) layout folds every group but Undo into the Tools disclosure.
+ * Microsoft Visio's Home tab, group for group: Clipboard, Font, Paragraph, Tools, Shape
+ * Styles, Arrange and Editing. Commands the core cannot perform yet are shown disabled with the
+ * missing capability in their tooltip. On phones every group folds into the Tools disclosure.
  */
 export declare function buildHomePanel(doc: Document, panel: HTMLElement): void;

package/dist/types/src/ribbon-keytips.d.ts

@@ -0,0 +1,2 @@
+/** Annotate the ribbon for KeyTips. Labels and ids are static application strings. */
+export declare function applyKeyTips(toolbar: HTMLElement): void;

package/dist/types/src/ribbon-other-tabs.d.ts

@@ -0,0 +1,12 @@
+/** Visio's Insert tab: Pages, Illustrations, Diagram Parts, Links and Text. */
+export declare function buildInsertPanel(doc: Document, panel: HTMLElement): void;
+/** Visio's Design tab: Page Setup, Themes, Variants, Backgrounds and Layout. */
+export declare function buildDesignPanel(doc: Document, panel: HTMLElement): void;
+/** Visio's Data tab. Shape Data Window maps to the viewer's shape inspector. */
+export declare function buildDataPanel(doc: Document, panel: HTMLElement): void;
+/** Visio's Process tab. */
+export declare function buildProcessPanel(doc: Document, panel: HTMLElement): void;
+/** Visio's Review tab: Proofing, Language, Comments and Reports. */
+export declare function buildReviewPanel(doc: Document, panel: HTMLElement): void;
+/** Visio's Help tab. Help content, support and training are not bundled in this viewer. */
+export declare function buildHelpPanel(doc: Document, panel: HTMLElement): void;

package/dist/types/src/ribbon-parts.d.ts

@@ -1,20 +1,60 @@
 import { type VisioRibbonAction } from './ribbon-action.js';
-/** A shared `office-ui-button` with Visio-specific state hooks. */
+/** A shared `office-ui-*` command element with Visio state hooks. */
 export type RibbonCommand = HTMLElement & {
     disabled: boolean;
 };
 /**
- * A large stacked ribbon command. `id` is a stable name for state sync and tests; the typed
- * `action` is what runs. Labels, icons and shortcuts are static application strings.
+ * One ribbon command. `id` is a stable name for state sync and tests; the typed `action` is
+ * what runs. Without an action the command is shown, disabled, with `unsupported` explaining
+ * what is missing, so the ribbon matches Visio without claiming features it lacks.
  */
-export declare function tool(doc: Document, id: string, label: string, icon: string, action: VisioRibbonAction, options?: {
+export interface CommandSpec {
+    id: string;
+    label: string;
+    icon?: string;
+    action?: VisioRibbonAction;
+    unsupported?: string;
+    /** `large` stacks icon over label; `small` is icon and label in a row; `icon` is icon-only. */
+    size?: 'large' | 'small' | 'icon';
     keys?: [aria: string, hint: string];
     pressed?: boolean;
     controls?: string;
-}): RibbonCommand;
-/** A labelled ribbon group (the shared `office-ui-ribbon-group`). */
-export declare function group(doc: Document, label: string, children: readonly HTMLElement[], className?: string): HTMLElement;
+    checked?: boolean;
+}
+export interface MenuSpec extends CommandSpec {
+    items: readonly CommandSpec[];
+    /** Split button: the main part runs `action`, the caret opens the menu. */
+    split?: boolean;
+}
+/** A shared `office-ui-button` in Visio's large, small or icon-only size. */
+export declare function command(doc: Document, spec: CommandSpec): RibbonCommand;
+/** A shared `office-ui-menu-button` (dropdown or split) with typed actions per item. */
+export declare function menu(doc: Document, spec: MenuSpec): RibbonCommand;
+/** Office's three-row column of small commands, or a row with `horizontal`. */
+export declare function stack(doc: Document, children: readonly HTMLElement[], horizontal?: boolean): HTMLElement;
+/** A labelled ribbon group; `launcher` shows Visio's dialog launcher, disabled with a reason. */
+export declare function group(doc: Document, label: string, children: readonly HTMLElement[], options?: {
+    className?: string;
+    launcher?: string;
+}): HTMLElement;
+/** A labelled shared checkbox (Visio's View > Show options). */
+export declare function check(doc: Document, spec: CommandSpec): HTMLElement;
+/** A shared select shown as Visio's font or size combo; disabled until core supports it. */
+export declare function combo(doc: Document, spec: {
+    id: string;
+    label: string;
+    placeholder: string;
+    width: number;
+    unsupported: string;
+}): HTMLElement;
 /** A keyboard-navigable row of groups (the shared `office-ui-toolbar`). */
 export declare function commandRow(doc: Document, label: string, children: readonly HTMLElement[]): HTMLElement;
-/** Muted two-line guidance at the end of a ribbon panel. */
-export declare function hint(doc: Document, lines: readonly string[]): HTMLElement;
+/**
+ * A shared `office-ui-context-menu` of typed commands and separators (`'-'`). Items without an
+ * action are shown disabled with their reason, as in the ribbon.
+ */
+export declare function contextMenu(doc: Document, id: string, label: string, items: readonly (CommandSpec | '-')[]): HTMLElement & {
+    openAt(x: number, y: number): void;
+    close(): void;
+    open: boolean;
+};

package/dist/types/src/ribbon-router.d.ts

@@ -7,8 +7,10 @@ export interface RibbonTargets {
     deleteSelection(): void;
     setTool(tool: 'pointer' | 'rectangle'): void;
     toggleGrid(): void;
+    toggleRuler(): void;
+    togglePanZoom(): void;
     toggleFullscreen(): void;
-    togglePane(pane: 'pages' | 'inspector'): void;
+    togglePane(pane: 'shapes' | 'inspector'): void;
     reveal(panel: 'edit' | 'notes' | 'selection' | 'layers', focusText: boolean): void;
     fit(mode: 'page' | 'width'): void;
     focusSearch(): void;

package/dist/types/src/ribbon-view.d.ts

@@ -1,2 +1,5 @@
-/** Visio's View tab: Views, Show (grid and task panes) and Zoom. */
+/**
+ * Microsoft Visio's View tab: Views, Show, Zoom, Visual Aids, Window and Macros. Ruler, Grid,
+ * Task Panes, Full Screen and every Zoom command work; the rest is shown disabled with a reason.
+ */
 export declare function buildViewPanel(doc: Document, panel: HTMLElement): void;

package/dist/types/src/ribbon.d.ts

@@ -1,6 +1,12 @@
+import { buildHomePanel } from './ribbon-home.js';
+import { buildDataPanel, buildDesignPanel, buildHelpPanel, buildInsertPanel, buildProcessPanel, buildReviewPanel } from './ribbon-other-tabs.js';
+import { buildViewPanel } from './ribbon-view.js';
 export type { VisioRibbonAction } from './ribbon-action.js';
+/** Visio's ribbon tab order. File (backstage) belongs to the host application. */
+export declare const RIBBON_TABS: readonly [readonly ["home", "Home", typeof buildHomePanel], readonly ["insert", "Insert", typeof buildInsertPanel], readonly ["design", "Design", typeof buildDesignPanel], readonly ["data", "Data", typeof buildDataPanel], readonly ["process", "Process", typeof buildProcessPanel], readonly ["review", "Review", typeof buildReviewPanel], readonly ["view", "View", typeof buildViewPanel], readonly ["help", "Help", typeof buildHelpPanel]];
+export type RibbonTab = (typeof RIBBON_TABS)[number][0];
 /**
- * The Visio ribbon: a tab list and one panel per tab. Tab switching and keyboard movement
- * belong to the chrome; commands emit `ribbon-action` events for the router.
+ * The Visio ribbon: Quick Access Toolbar, tab list and one panel per tab. Tab switching and
+ * keyboard movement belong to the chrome; commands emit `ribbon-action` events for the router.
  */
 export declare function createRibbon(doc: Document): HTMLElement;

package/dist/types/src/shapes-window.d.ts

@@ -0,0 +1,28 @@
+/** Drag payload type for a stencil master; the value is the master id. */
+export declare const MASTER_MIME = "application/x-visio-viewer-master";
+interface Master {
+    id: string;
+    name: string;
+    /** Preview outline in a 24x24 box (static application geometry). */
+    path: string;
+    /** Default size in inches when dropped. */
+    size?: {
+        width: number;
+        height: number;
+    };
+}
+/** Visio's Basic Shapes stencil, in Visio's order. */
+export declare const BASIC_SHAPES: readonly Master[];
+/**
+ * Visio's Shapes window: Stencils and Search views, More Shapes and Quick Shapes rows and the
+ * Basic Shapes stencil. Masters are dragged onto the page; Enter adds one at the page centre.
+ */
+export declare function createShapesWindow(doc: Document): HTMLElement;
+/** Default size of a stencil master the viewer can create, or nothing when unsupported. */
+export declare function masterSize(id: string): {
+    width: number;
+    height: number;
+} | undefined;
+/** Visio's minimised Shapes window: a narrow strip that reopens the window. */
+export declare function createShapesStrip(doc: Document): HTMLButtonElement;
+export {};

package/dist/types/src/status-bar.d.ts

@@ -3,5 +3,8 @@
  * message region, compatibility notes, the host footer slot and the shared zoom slider.
  */
 export declare function createStatusBar(doc: Document): HTMLElement;
-/** Visio's page tabs under the drawing, on the shared document tab strip. */
+/**
+ * Visio's page bar under the drawing: the All pages list, the shared document tab strip and
+ * Insert Page, which stays disabled until core can add pages.
+ */
 export declare function createPageTabs(doc: Document): HTMLElement;

package/dist/types/src/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-tabs { height:35px; display:flex; align-items:stretch; padding:0 4px; border-bottom:1px solid var(--_vv-border); }\n.ribbon-tabs button { position:relative; min-height:34px; padding:7px 14px; border:0; border-radius:0; background:transparent; color:var(--_vv-muted); font-size:12px; font-weight:500; }\n.ribbon-tabs button[aria-selected=\"true\"] { color:var(--_vv-accent); }\n.ribbon-tabs button[aria-selected=\"true\"]::after { content:\"\"; position:absolute; inset:auto 0 -1px; height:2.5px; background:var(--_vv-accent); }\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.search-group { width:330px; }\n.search-controls { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }\n.search-controls label { display:flex; align-items:center; min-width:0; gap:6px; flex:1; font-size:11px; }\n.search-controls input { width:100%; min-width:0; padding:3px 6px; font-size:11px; }\n.search-controls button { padding:3px 6px; font-size:10px; background:var(--_vv-secondary); }\n.search-controls [role=\"status\"] { display:block; width:100%; min-height:15px; font-size:10px; line-height:15px; color:var(--_vv-muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\n.workspace { position:relative; display:flex; flex:1; min-width:0; min-height:0; overflow:hidden; }\n.page-rail { flex:0 0 180px; width:180px; min-width:0; overflow:auto; border-right:1px solid var(--_vv-border); background:var(--_vv-secondary); }\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.pane-heading [data-page-count],.inspector-kind { color:var(--_vv-muted); font-size:10px; font-weight:400; }\n.page-list { list-style:none; padding:8px 5px; margin:0; display:flex; flex-direction:column; gap:4px; }\n.page-link { display:flex; align-items:center; position:relative; width:100%; min-width:0; gap:4px; padding:4px 5px 4px 2px; border:0; border-radius:0; background:transparent; color:var(--_vv-muted); text-align:left; }\n.page-link[aria-current=\"page\"] { background:var(--_vv-accent-soft); }\n.page-link[aria-current=\"page\"]::before { content:\"\"; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:0 2px 2px 0; background:var(--_vv-accent); }\n.page-number { flex:0 0 20px; width:20px; padding-right:3px; font-size:10px; text-align:right; }\n.page-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; width:100%; min-height:98px; gap:3px; padding:10px; border:1px solid var(--_vv-border); border-radius:2px; background:var(--_vv-surface); }\n.page-link[aria-current=\"page\"] .page-card { border-color:var(--_vv-accent); }\n.page-link[aria-current=\"page\"] .page-number { color:var(--_vv-accent); font-weight:600; }\n.page-mark { color:var(--_vv-muted); font-size:20px; line-height:23px; }\n.page-name { color:var(--_vv-ink); font-size:11px; font-weight:500; line-height:16px; overflow-wrap:anywhere; }\n.page-meta { color:var(--_vv-muted); font-size:9px; line-height:14px; }\n.page-empty { margin:12px; color:var(--_vv-muted); font-size:11px; }\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-tabs { height:44px; }\n  .ribbon-tabs button { min-height:44px; padding:8px 16px; }\n  .ribbon-content { min-height:86px; }\n  .ribbon-group { padding:4px 8px; }\n  .search-group { width:100%; border-right:0; }\n  .search-controls { gap:4px; }\n  .search-controls label { font-size:12px; }\n  .search-controls input { font-size:12px; }\n  .search-controls button { min-width:44px; font-size:0; padding:3px; }\n  .search-controls [data-action=\"search-previous\"]::before { content:\"\u2039\"; font-size:22px; }\n  .search-controls [data-action=\"search-next\"]::before { content:\"\u203A\"; font-size:22px; }\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  .page-rail { width:100%; max-height:190px; border-right:0; border-bottom:1px solid var(--_vv-border); }\n  .page-list { flex-direction:row; overflow-x:auto; }\n  .page-list li { flex:0 0 155px; }\n  .page-card { min-height:86px; }\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-tabs { min-height:44px; height:44px; }\n  .ribbon-tabs button { min-height:44px; }\n  .ribbon-content { min-height:96px; }\n  .search-group { width:380px; max-width:100%; }\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-tabs { height:40px; }\n.ribbon-tabs button { min-height:39px; padding:8px 16px; }\n.ribbon-content { min-height:104px; padding:4px 4px; }\n.search-group { order:2; width:320px; }\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-tabs { height:44px; }\n .ribbon-tabs button { min-height:44px; }\n .ribbon-content { min-height:54px; padding:4px 0; }\n .search-group { flex:0 0 100%; width:100%; min-height:54px; }\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 .page-rail { position:absolute; inset:0 auto 0 0; width:180px; max-height:none; z-index:3; border-right:1px solid var(--_vv-border); background:var(--_vv-secondary); }\n .page-list { flex-direction:column; }\n .page-list li { flex:none; }\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-group { order:1; flex:auto; }\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(pointer:coarse) { .ribbon-tabs {height:45px;min-height:45px;} .ribbon-tabs button {min-height:44px;height:44px;} }\n@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }\n";
+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-tabs { height:35px; display:flex; align-items:stretch; padding:0 4px; border-bottom:1px solid var(--_vv-border); }\n.ribbon-tabs button { position:relative; min-height:34px; padding:7px 14px; border:0; border-radius:0; background:transparent; color:var(--_vv-muted); font-size:12px; font-weight:500; }\n.ribbon-tabs button[aria-selected=\"true\"] { color:var(--_vv-accent); }\n.ribbon-tabs button[aria-selected=\"true\"]::after { content:\"\"; position:absolute; inset:auto 0 -1px; height:2.5px; background:var(--_vv-accent); }\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.search-group { width:330px; }\n.search-controls { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }\n.search-controls label { display:flex; align-items:center; min-width:0; gap:6px; flex:1; font-size:11px; }\n.search-controls input { width:100%; min-width:0; padding:3px 6px; font-size:11px; }\n.search-controls button { padding:3px 6px; font-size:10px; background:var(--_vv-secondary); }\n.search-controls [role=\"status\"] { display:block; width:100%; min-height:15px; font-size:10px; line-height:15px; color:var(--_vv-muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\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-tabs { height:44px; }\n  .ribbon-tabs button { min-height:44px; padding:8px 16px; }\n  .ribbon-content { min-height:86px; }\n  .ribbon-group { padding:4px 8px; }\n  .search-group { width:100%; border-right:0; }\n  .search-controls { gap:4px; }\n  .search-controls label { font-size:12px; }\n  .search-controls input { font-size:12px; }\n  .search-controls button { min-width:44px; font-size:0; padding:3px; }\n  .search-controls [data-action=\"search-previous\"]::before { content:\"\u2039\"; font-size:22px; }\n  .search-controls [data-action=\"search-next\"]::before { content:\"\u203A\"; font-size:22px; }\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-tabs { min-height:44px; height:44px; }\n  .ribbon-tabs button { min-height:44px; }\n  .ribbon-content { min-height:96px; }\n  .search-group { width:380px; max-width:100%; }\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-tabs { height:40px; }\n.ribbon-tabs button { min-height:39px; padding:8px 16px; }\n.ribbon-content { min-height:104px; padding:4px 4px; }\n.search-group { order:2; width:320px; }\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-tabs { height:44px; }\n .ribbon-tabs button { min-height:44px; }\n .ribbon-content { min-height:54px; padding:4px 0; }\n .search-group { flex:0 0 100%; width:100%; min-height:54px; }\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-group { order:1; flex:auto; }\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(pointer:coarse) { .ribbon-tabs {height:45px;min-height:45px;} .ribbon-tabs button {min-height:44px;height:44px;} }\n@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }\n";

package/dist/types/src/viewer-backstage.d.ts

@@ -0,0 +1,36 @@
+import type { ViewerState } from './controller.js';
+import type { VsdxSource } from './contract.js';
+import type { BackstagePage } from './backstage.js';
+/** What the backstage needs from the element; every action delegates to existing APIs. */
+export interface BackstageHost {
+    root: ShadowRoot;
+    viewport: HTMLElement;
+    fileName(): string;
+    load(source: VsdxSource): Promise<void>;
+    exportVsdx(): {
+        bytes: Uint8Array;
+        dirty: boolean;
+    };
+    exportSvg(): {
+        svg: string;
+        pageIndex: number;
+    };
+    closeDocument(): void;
+    revealNotes(): void;
+    announce(message: string): void;
+    noteCount(): number;
+}
+/**
+ * Visio's File backstage: opened from the File tab, closed with Back or Escape (focus returns to
+ * File). Open, Save, Save As, Export, Print and Close are real; the rest is shown disabled.
+ */
+export declare class ViewerBackstage {
+    #private;
+    private readonly host;
+    constructor(host: BackstageHost);
+    get open(): boolean;
+    show(page?: BackstagePage): void;
+    hide(): void;
+    wire(): () => void;
+    render(state: ViewerState): void;
+}

package/dist/types/src/viewer-canvas.d.ts

@@ -0,0 +1,21 @@
+import type { ViewerState } from './controller.js';
+/**
+ * The drawing window: renders the current page, owns its resources, lists compatibility notes
+ * and marks the selection (revealing search hits). Page re-renders happen only when the
+ * document, page or layer overrides change.
+ */
+export declare class ViewerCanvas {
+    #private;
+    private readonly viewport;
+    private readonly notes;
+    private readonly notesPanel;
+    private readonly inspector;
+    constructor(viewport: HTMLElement, notes: HTMLUListElement, notesPanel: HTMLElement, inspector: HTMLDetailsElement);
+    get warnings(): readonly string[];
+    /** Force the next render to redraw the page (fonts loaded, element reconnected). */
+    invalidate(): void;
+    /** Release page resources and forget selection and search memory. */
+    dispose(): void;
+    /** Returns true when the page itself was re-rendered. */
+    render(state: ViewerState): boolean;
+}

package/dist/types/src/viewer-chrome.d.ts

@@ -1,18 +1,21 @@
 import type { ViewerController, ViewerState } from './controller.js';
 /**
- * Static workspace markup (legacy; migrate to builders when next changed). The ribbon, page
- * tabs and status bar are built by `createRibbon`, `createPageTabs` and `createStatusBar`.
- * All document labels are inserted as text.
+ * 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.
  */
-export declare const viewerChromeTemplate = "<div class=\"workspace\">\n  <nav id=\"page-rail\" class=\"page-rail\" aria-label=\"Diagram pages\"><div class=\"pane-heading\"><span>Pages</span><span data-page-count>0</span></div><ol class=\"page-list\"></ol><p class=\"page-empty\">Open a drawing to see its pages.</p></nav>\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\" 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  <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\" 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 type TaskPane = 'shapes' | 'inspector';
 /** Presentation state stays local; page navigation uses the same controller as every binding. */
 export declare class ViewerChrome {
     #private;
     constructor(root: ShadowRoot, controller: ViewerController);
     wire(): () => void;
-    showTab(tab: 'home' | 'view'): void;
+    showTab(tab: string): void;
+    /** On phones, close the Tools sheet once a command runs. */
+    closeCompactTools(): void;
     /** Show or hide a task pane; compact layouts close the Tools menu afterwards. */
-    togglePane(pane: 'pages' | 'inspector'): void;
+    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;

package/dist/types/src/viewer-commands.d.ts

@@ -1,14 +1,17 @@
 import type { ViewerController, ViewerState } from './controller.js';
 import { type VisioRibbonAction } from './ribbon-action.js';
+import type { Rulers } from './viewer-ruler.js';
 export type CanvasTool = 'pointer' | 'rectangle';
 interface CommandHost {
     root: ShadowRoot;
     viewport: HTMLElement;
+    rulers: Rulers;
     controller: ViewerController;
     fit(mode: 'page' | 'width'): void;
-    togglePane(pane: 'pages' | 'inspector'): void;
+    togglePane(pane: 'shapes' | 'inspector'): void;
     reveal(panel: 'edit' | 'notes' | 'selection' | 'layers', focusText: boolean): void;
     focusSearch(): void;
+    togglePanZoom(): void;
     /** Transient command feedback for the status bar; document text is never interpreted as markup. */
     announce(message: string): void;
 }

package/dist/types/src/viewer-context-menu.d.ts

@@ -0,0 +1,8 @@
+import type { ViewerController } from './controller.js';
+/** Visio's shape and page context menus; commands the core lacks are shown disabled. */
+export declare function createContextMenus(doc: Document): HTMLElement[];
+/**
+ * Right-click, Shift+F10 or the Menu key on the canvas: a shape menu for the shape under the
+ * pointer (selecting it first, as Visio does) or a page menu on empty paper.
+ */
+export declare function wireContextMenus(root: ShadowRoot, viewport: HTMLElement, controller: ViewerController): () => void;

package/dist/types/src/viewer-draw-tool.d.ts

@@ -2,6 +2,22 @@ import type { VisioPage } from 'ooxml-core/visio';
 import type { ViewerController } from './controller.js';
 /** Next free numeric shape ID on the page tree. Core still rejects any collision. */
 export declare function nextShapeId(page: VisioPage): string;
+/** Page inches with a top-left origin (SVG user space) from a client point. */
+export declare function pagePoint(svg: SVGSVGElement, page: VisioPage, event: Pick<MouseEvent, 'clientX' | 'clientY'>): {
+    x: number;
+    y: number;
+} | undefined;
+/**
+ * Create one rectangle through core and select it. `centre` is in top-left page inches (SVG
+ * space); core pins are centre points in bottom-left, y-up drawing inches.
+ */
+export declare function insertRectangle(controller: ViewerController, page: VisioPage, centre: {
+    x: number;
+    y: number;
+}, size: {
+    width: number;
+    height: number;
+}): Promise<string>;
 /** Drag-to-draw rectangle tool. The preview is viewer-only; the shape is created by core. */
 export declare class RectangleDrawTool {
     #private;

package/dist/types/src/viewer-element.d.ts

@@ -1,6 +1,7 @@
 import type { VisioDocument, VisioEdit } from 'ooxml-core/visio';
 import type { VsdxSource } from './contract.js';
 import { ViewerController } from './controller.js';
+import { type BackstagePage } from './backstage.js';
 import { type SvgExportOptions, type SvgExportResult } from './export-svg.js';
 import { type CurrentPagePrintSnapshotOptions, type PrintSnapshot } from './print-snapshot.js';
 declare const BaseElement: typeof HTMLElement;
@@ -18,6 +19,12 @@ export declare class VisioViewerElement extends BaseElement {
     set showToolbar(value: boolean);
     get renderWarnings(): readonly string[];
     load(source: VsdxSource): Promise<void>;
+    /** Leave Visio's File backstage and return to the drawing. */
+    closeBackstage(): void;
+    /** Open Visio's File backstage at a page (Info by default). */
+    openBackstage(page?: BackstagePage): void;
+    /** Name of the last opened local file, or empty for bytes, models and closed drawings. */
+    get fileName(): string;
     applyEdits(edits: readonly VisioEdit[]): Promise<void>;
     replacePlainText(pageId: string, shapeId: string, text: string): Promise<void>;
     undo(): Promise<void>;

package/dist/types/src/viewer-fit.d.ts

@@ -0,0 +1,6 @@
+import type { VisioPage } from 'ooxml-core/visio';
+/**
+ * Zoom that fits a page into the drawing window, as Visio's Fit to Window (whole page, never
+ * enlarged past 100%) or Page Width (fills the width and scrolls vertically).
+ */
+export declare function fitZoom(viewport: HTMLElement, page: VisioPage, mode: 'page' | 'width'): number;

package/dist/types/src/viewer-pan-zoom.d.ts

@@ -0,0 +1,19 @@
+import type { ViewerController } from './controller.js';
+/** Visio's Pan & Zoom window: a floating page thumbnail with the visible area outlined. */
+export declare function createPanZoom(doc: Document): HTMLElement;
+/**
+ * Keeps the thumbnail and the visible-area rectangle in step with the drawing window, and pans
+ * the drawing window from the thumbnail. The thumbnail is a DOM clone of the rendered page.
+ */
+export declare class ViewerPanZoom {
+    #private;
+    private readonly viewport;
+    private readonly controller;
+    private readonly checked;
+    constructor(root: ShadowRoot, viewport: HTMLElement, controller: ViewerController, checked: (open: boolean) => void);
+    get open(): boolean;
+    toggle(open?: boolean): void;
+    wire(): () => void;
+    /** Refresh the thumbnail when the page changed, then the visible-area rectangle. */
+    render(): void;
+}

package/dist/types/src/viewer-ruler.d.ts

@@ -0,0 +1,7 @@
+export interface Rulers {
+    element: HTMLElement;
+    render(visible: boolean, zoom: number): void;
+    wire(): () => void;
+}
+/** Wraps the viewport in a grid with a corner, a top ruler and a left ruler. */
+export declare function createRulers(viewport: HTMLElement): Rulers;

package/dist/types/src/viewer-search.d.ts

@@ -1,6 +1,13 @@
 import type { ViewerState } from './controller.js';
 /** Builds the Find group: a search field, previous/next result buttons and a live status. */
 export declare function createSearchGroup(doc: Document): HTMLElement;
+/**
+ * Visio opens Find from Home > Editing rather than keeping a box in the ribbon. The find bar
+ * sits under the ribbon, hidden until Find... or Ctrl+F, and closes with its button or Escape.
+ */
+export declare function createFindBar(doc: Document): HTMLElement;
+/** The find bar closes from its button, or Escape once the query is already empty. */
+export declare function wireFindBar(bar: HTMLElement, input: HTMLInputElement, closed: () => void): () => void;
 export interface SearchControls {
     input: HTMLInputElement;
     status: HTMLSpanElement;

package/dist/types/src/viewer-stencil.d.ts

@@ -0,0 +1,6 @@
+import type { ViewerController } from './controller.js';
+/**
+ * Shapes window interaction: drag a master onto the page to drop it there, or activate it to add
+ * it at the page centre. Only masters the core can create are draggable; the rest stay inert.
+ */
+export declare function wireStencil(pane: HTMLElement, viewport: HTMLElement, controller: ViewerController, announce: (message: string) => void): () => void;

package/dist/types/src/viewer-tell-me.d.ts

@@ -0,0 +1,4 @@
+/** Visio's "Tell me what you want to do" box (the shared `office-ui-command-search`). */
+export declare function createTellMe(doc: Document): HTMLElement;
+/** The command list refreshes on focus, so enabled states always match the ribbon. */
+export declare function wireTellMe(root: ShadowRoot): () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "visio-react-viewer",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "Local-first Visio viewer for react",
 	"homepage": "https://christophervr.github.io/visio-viewer/",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 	"dependencies": {
 		"emf-converter": "4.8.9",
 		"ooxml-core": "^0.13.0",
-		"ooxml-ui": "^0.4.1",
+		"ooxml-ui": "^0.8.0",
 		"visio-core": "^0.2.1"
 	},
 	"peerDependencies": {