ooxml-ui 0.27.2 → 0.28.0

package/dist/visio/render-resources.d.ts

@@ -0,0 +1,10 @@
+import type { VisioImage } from 'ooxml-core/visio';
+/** One reference per shared core image resource, with explicit per-render disposal. */
+export declare class RenderResources {
+    #private;
+    private readonly definitions?;
+    constructor(definitions?: SVGDefsElement | undefined);
+    get portable(): boolean;
+    imageUrl(image: VisioImage): string;
+    dispose(): void;
+}

package/dist/visio/render-svg.d.ts

@@ -0,0 +1,17 @@
+import { type VisioDocument, type VisioPage, type VisioMatrix } from 'ooxml-core/visio';
+import { type LayerVisibilityOverride } from './viewer-layers.js';
+export declare function svgElement<K extends keyof SVGElementTagNameMap>(name: K): SVGElementTagNameMap[K];
+export declare function safeColor(value: string, fallback?: string): string;
+export declare function matrix(value: VisioMatrix): string;
+export interface RenderResult {
+    svg: SVGSVGElement;
+    warnings: string[];
+    dispose(): void;
+}
+export interface RenderOptions {
+    /** Static output embeds rasters and omits viewer selection semantics. Prefer exportPageSvg for bounded serialization. */
+    static?: boolean;
+    /** Optional viewer display state. Export/print snapshot APIs deliberately use saved display. */
+    layerVisibilityOverrides?: readonly LayerVisibilityOverride[];
+}
+export declare function renderPage(model: VisioDocument, page: VisioPage, options?: RenderOptions): RenderResult;

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

@@ -0,0 +1,4 @@
+import type { VisioText } from 'ooxml-core/visio';
+import type { TextLayoutBudget } from './text-layout.js';
+/** Browser-font layout is approximate until compared with the licensed Visio reference corpus. */
+export declare function renderText(text: VisioText, warnings: Set<string>, budget?: TextLayoutBudget): SVGGElement;

package/dist/visio/ribbon-action.d.ts

@@ -0,0 +1,41 @@
+/** Every command the Visio ribbon, status bar or a shortcut can raise, as a `ribbon-action` event. */
+export type VisioRibbonAction = {
+    type: 'history';
+    key: 'undo' | 'redo';
+} | {
+    type: 'tool';
+    tool: 'pointer' | 'rectangle';
+} | {
+    type: 'delete';
+} | {
+    type: 'pane';
+    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';
+} | {
+    type: 'page';
+    step: 1 | -1;
+};
+/** Event name shared by every ribbon control; detail is the typed action. */
+export declare const RIBBON_ACTION_EVENT = "ribbon-action";
+export type RibbonActionEvent = CustomEvent<VisioRibbonAction>;
+/** Internal, non-composed event: it stays inside the viewer's shadow tree. */
+export declare function emitRibbonAction(target: EventTarget, action: VisioRibbonAction): void;

package/dist/visio/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/visio/ribbon-home.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 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/visio/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/visio/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/visio/ribbon-parts.d.ts

@@ -0,0 +1,60 @@
+import { type VisioRibbonAction } from './ribbon-action.js';
+/** A shared `office-ui-*` command element with Visio state hooks. */
+export type RibbonCommand = HTMLElement & {
+    disabled: boolean;
+};
+/**
+ * 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 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;
+    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;
+/**
+ * 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/visio/ribbon-router.d.ts

@@ -0,0 +1,19 @@
+import type { ViewerController } from './controller.js';
+import type { VisioRibbonAction } from './ribbon-action.js';
+/** The controllers a ribbon action can reach. The element supplies each one. */
+export interface RibbonTargets {
+    controller: ViewerController;
+    history(key: 'undo' | 'redo'): void;
+    deleteSelection(): void;
+    setTool(tool: 'pointer' | 'rectangle'): void;
+    toggleGrid(): void;
+    toggleRuler(): void;
+    togglePanZoom(): void;
+    toggleFullscreen(): void;
+    togglePane(pane: 'shapes' | 'inspector'): void;
+    reveal(panel: 'edit' | 'notes' | 'selection' | 'layers', focusText: boolean): void;
+    fit(mode: 'page' | 'width'): void;
+    focusSearch(): void;
+}
+/** Routes a ribbon, status-bar or shortcut action to the controller that owns it. */
+export declare function routeRibbonAction(targets: RibbonTargets, action: VisioRibbonAction): void;

package/dist/visio/ribbon-view.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 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/visio/ribbon.d.ts

@@ -0,0 +1,13 @@
+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 on the shared `office-ui-ribbon`: Quick Access Toolbar, File, one panel per
+ * tab and Tell me. The shared element owns the tab row, selection and arrow-key movement;
+ * commands emit `ribbon-action` events for the router.
+ */
+export declare function createRibbon(doc: Document): HTMLElement;

package/dist/visio/shape-inspector.d.ts

@@ -0,0 +1,5 @@
+import type { VisioDocument, VisioShape } from 'ooxml-core/visio';
+import type { ViewerState } from './controller.js';
+export declare function selectedShape(document: VisioDocument | null, selection: ViewerState['selectedShape'], pageIndex: number): VisioShape | undefined;
+export declare function safeExternalHref(value: string): string | undefined;
+export declare function shapeDetails(shape: VisioShape): DocumentFragment;

package/dist/visio/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/visio/status-bar.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Visio's status bar on the shared `office-ui-status-bar`: page and shape metrics, a live
+ * message region, compatibility notes, the host footer slot and the shared zoom slider.
+ */
+export declare function createStatusBar(doc: Document): HTMLElement;
+/**
+ * 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/visio/styles/index.d.ts

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

package/dist/visio/styles.d.ts

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

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

@@ -0,0 +1,45 @@
+import type { VisioTextRun } from 'ooxml-core/visio';
+export interface TextLine {
+    runs: VisioTextRun[];
+    width: number;
+    height: number;
+}
+export type MeasureText = (text: string, run: VisioTextRun) => number;
+export interface TextLayoutLimits {
+    maxCharacters: number;
+    maxMeasurements: number;
+    maxLines: number;
+    maxFragments: number;
+    maxShapeCharacters: number;
+    maxShapeMeasurements: number;
+    maxShapeLines: number;
+    maxShapeFragments: number;
+    maxCacheEntries: number;
+}
+export declare class TextLayoutBudgetError extends Error {
+    constructor(message: string);
+}
+/** One bounded measurement cache and work budget per render; shape scopes share both. */
+export declare class TextLayoutBudget {
+    #private;
+    readonly limits: Readonly<TextLayoutLimits>;
+    private readonly cache;
+    private readonly parent?;
+    private constructor();
+    static create(options?: Partial<TextLayoutLimits>): TextLayoutBudget;
+    get characters(): number;
+    get measurements(): number;
+    get lines(): number;
+    get fragments(): number;
+    /** A shape may be omitted without consuming the rest of the page's budget. */
+    forShape(): TextLayoutBudget;
+    reserveCharacters(count: number): void;
+    reserveLine(): void;
+    reserveFragment(): void;
+    private reserveMeasurement;
+    measure(text: string, run: VisioTextRun, measure: MeasureText): number;
+}
+export declare const createTextLayoutBudget: (options?: Partial<TextLayoutLimits>) => TextLayoutBudget;
+export declare const measureBrowserText: MeasureText;
+/** Rendering-only greedy wrapping. Inject one budget across shapes to bound total UI-thread work. */
+export declare function wrapText(runs: VisioTextRun[], width: number, measure?: MeasureText, firstLineIndent?: number, budget?: TextLayoutBudget): TextLine[];

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

@@ -0,0 +1,33 @@
+import type { ViewerState } from './controller.js';
+import type { VsdxSource } from 'ooxml-core/visio/ui';
+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;
+    showOptions(): void;
+    announce(message: string): void;
+    noteCount(): number;
+}
+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/visio/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/visio/viewer-chrome.d.ts

@@ -0,0 +1,22 @@
+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.
+ */
+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: 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: 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/visio/viewer-commands.d.ts

@@ -0,0 +1,34 @@
+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: '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;
+}
+/**
+ * Visio command state (tool, grid, pending edits) and keyboard shortcuts. Ribbon controls emit
+ * typed `ribbon-action` events and shortcuts build the same actions; both go through
+ * `routeRibbonAction`. Document mutation stays in the controller and core.
+ */
+export declare class ViewerCommands {
+    #private;
+    private readonly host;
+    constructor(host: CommandHost);
+    get tool(): CanvasTool;
+    /** Run one typed action, exactly as a ribbon control or shortcut would. */
+    run(action: VisioRibbonAction): void;
+    wire(): () => void;
+    setTool(tool: CanvasTool): void;
+    render(state: ViewerState): void;
+}
+export {};

package/dist/visio/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/visio/viewer-draw-tool.d.ts

@@ -0,0 +1,33 @@
+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;
+    private readonly viewport;
+    private readonly controller;
+    private readonly options;
+    constructor(viewport: HTMLElement, controller: ViewerController, options: {
+        active(): boolean;
+        announce(message: string): void;
+    });
+    get drawing(): boolean;
+    wire(): () => void;
+}

package/dist/visio/viewer-edit-controls.d.ts

@@ -0,0 +1,12 @@
+import type { ViewerController, ViewerState } from './controller.js';
+/** Static markup only. Document text is assigned exclusively through value/textContent. */
+export declare const editControlsTemplate = "<details class=\"edit-controls\"><summary>Edit diagram (experimental)</summary><p id=\"edit-warning\">Experimental source-backed editing. Unsupported targets are rejected. Native Visio compatibility is not verified. Keep your original file.</p><p data-edit-target></p><label for=\"edit-text\">Selected shape text</label><textarea id=\"edit-text\" rows=\"3\" 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>";
+export declare class ViewerEditControls {
+    #private;
+    readonly panel: HTMLDetailsElement;
+    readonly input: HTMLTextAreaElement;
+    constructor(root: ShadowRoot, controller: ViewerController);
+    wire(): () => void;
+    reset(focus?: boolean): void;
+    render(state: ViewerState): void;
+}

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

@@ -0,0 +1,51 @@
+import type { VisioDocument, VisioEdit } from 'ooxml-core/visio';
+import type { VsdxSource } from 'ooxml-core/visio/ui';
+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;
+export declare class VisioViewerElement extends BaseElement {
+    #private;
+    readonly controller: ViewerController;
+    constructor();
+    get document(): VisioDocument | null;
+    set document(value: VisioDocument | null);
+    get pageIndex(): number;
+    set pageIndex(value: number);
+    get zoom(): number;
+    set zoom(value: number);
+    get showToolbar(): boolean;
+    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>;
+    redo(): Promise<void>;
+    cancelEdit(): void;
+    exportVsdx(): ReturnType<ViewerController['exportVsdx']>;
+    fit(): void;
+    setLayerVisibility(pageId: string, layerId: string, visible: boolean | null): void;
+    resetLayerVisibility(pageId?: string): void;
+    /** Return a portable saved-display current-page snapshot without changing selection or downloading a file. */
+    exportSvg(options?: SvgExportOptions): SvgExportResult;
+    /** Prepare only the captured current drawing with saved display visibility. No frame, download, print dialog or state change. */
+    createPrintSnapshot(options?: CurrentPagePrintSnapshotOptions): PrintSnapshot;
+    destroy(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export declare function registerVisioViewer(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'visio-viewer': VisioViewerElement;
+    }
+}
+export {};

package/dist/visio/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/visio/viewer-geometry-controls.d.ts

@@ -0,0 +1,14 @@
+import type { ViewerController, ViewerState } from './controller.js';
+export declare const geometryControlsTemplate = "<fieldset data-geometry><legend>Geometry (experimental)</legend><p>Pin X/Y use drawing inches, bottom-left origin, Y up. Resize holds the rotation pin fixed. Core rejects unsupported formulas, protected cells, unsafe group/master dependencies and referenced deletion. Native Visio reopen fidelity is unverified.</p><label>New rectangle ID <input data-geometry-field=\"id\" type=\"text\" maxlength=\"256\"></label><label>Rectangle text (optional) <input data-geometry-field=\"text\" type=\"text\" maxlength=\"1000000\"></label><label>Pin X (inches) <input data-geometry-field=\"x\" type=\"number\" step=\"any\"></label><label>Pin Y (inches) <input data-geometry-field=\"y\" type=\"number\" step=\"any\"></label><label>Width (inches) <input data-geometry-field=\"width\" type=\"number\" min=\"0\" step=\"any\"></label><label>Height (inches) <input data-geometry-field=\"height\" type=\"number\" min=\"0\" step=\"any\"></label><div class=\"edit-actions\"><button type=\"button\" data-geometry-action=\"create-rectangle\">Create rectangle</button><button type=\"button\" data-geometry-action=\"move-shape\">Move selected</button><button type=\"button\" data-geometry-action=\"resize-shape\">Resize selected</button><button type=\"button\" data-geometry-action=\"delete-shape\">Delete selected</button></div><p data-geometry-error role=\"alert\" hidden></p></fieldset>";
+/** Collect explicit coordinates; never infer a Visio pin from rendered SVG transforms. */
+export declare class ViewerGeometryControls {
+    #private;
+    private readonly panel;
+    private readonly controller;
+    private readonly draftChanged;
+    constructor(panel: HTMLElement, controller: ViewerController, draftChanged?: () => void);
+    wire(): () => void;
+    get hasDraft(): boolean;
+    reset(): void;
+    render(state: ViewerState): void;
+}

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

@@ -0,0 +1,10 @@
+import type { ViewerController } from './controller.js';
+interface Controls {
+    viewport: HTMLDivElement;
+    zoomSlider: HTMLElement & {
+        value: 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 {};

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

@@ -0,0 +1,5 @@
+import type { ViewerController, ViewerState } from './controller.js';
+export declare const layerControlsTemplate = "<details class=\"layer-controls\" hidden><summary>Layers</summary><p>Display changes only. SVG and print snapshots use saved visibility. Guides, NoShow and unknown hidden reasons remain hidden.</p><div data-layer-list></div><p data-layer-status role=\"status\"></p><button type=\"button\" data-layer-reset=\"all\">Reset all layers</button></details>";
+/** Static controls and text-only labels. Document strings never become selectors or markup. */
+export declare function renderLayerControls(panel: HTMLDetailsElement, state: ViewerState): void;
+export declare function wireLayerControls(panel: HTMLDetailsElement, controller: ViewerController): () => void;