ooxml-ui 1.5.0 → 1.6.0

package/dist/visio/page-setup-action.d.ts

@@ -0,0 +1,29 @@
+import type { VisioBackgroundStyle, VisioBorderStyle } from 'ooxml-core/visio';
+/** The Page Setup dialog's tabs, as Visio orders them. */
+export type VisioPageSetupTab = 'print' | 'size' | 'scale' | 'properties';
+/** Design > Page Setup, Backgrounds and Borders & Titles, and View > Page Breaks. */
+export type VisioPageSetupCommand = {
+    op: 'orientation';
+    value: 'portrait' | 'landscape';
+} | {
+    op: 'size';
+    id: string;
+} | {
+    op: 'fit';
+} | {
+    op: 'auto-size';
+} | {
+    op: 'dialog';
+    tab?: VisioPageSetupTab;
+} | {
+    op: 'background';
+    style: VisioBackgroundStyle | null;
+} | {
+    op: 'background-color';
+    color: string;
+} | {
+    op: 'border';
+    style: VisioBorderStyle | null;
+} | {
+    op: 'page-breaks';
+};

package/dist/visio/page-setup-dialog-form.d.ts

@@ -0,0 +1,32 @@
+import type { VisioPageSetupTab } from './page-setup-action.js';
+export type SetupSelect = HTMLElement & {
+    value: string;
+    disabled: boolean;
+    options: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+};
+export type SetupDialog = HTMLElement & {
+    open: boolean;
+    show(): void;
+    close(): void;
+};
+export type SetupButton = HTMLElement & {
+    disabled: boolean;
+};
+export type SetupField = 'paper' | 'print-orientation' | 'size-mode' | 'width' | 'height' | 'scale-mode' | 'scale-page' | 'scale-drawing' | 'scale-unit' | 'type' | 'name' | 'back-page';
+export type SetupControl = HTMLInputElement | SetupSelect;
+export declare const SETUP_TABS: readonly [VisioPageSetupTab, string][];
+export declare const UNIT_INCHES: Record<string, number>;
+/** Static structure of Visio's Page Setup dialog; values are filled in as text and properties. */
+export declare function createPageSetupDialog(doc: Document): {
+    dialog: SetupDialog;
+    fields: Map<SetupField, SetupControl>;
+    error: HTMLParagraphElement;
+    tabs: Map<VisioPageSetupTab, HTMLButtonElement>;
+    panels: Map<VisioPageSetupTab, HTMLElement>;
+    ok: SetupButton;
+    cancel: SetupButton;
+};

package/dist/visio/presentation-keys.d.ts

@@ -0,0 +1,41 @@
+/** A Presentation Mode command produced by one key press. */
+export type PresentationKeyAction = {
+    type: 'next';
+} | {
+    type: 'previous';
+} | {
+    type: 'first';
+} | {
+    type: 'last';
+}
+/** Jump to a 1-based foreground page number typed before Enter. */
+ | {
+    type: 'goto';
+    page: number;
+} | {
+    type: 'exit';
+}
+/** A digit was added to the pending page number. */
+ | {
+    type: 'buffering';
+    digits: string;
+} | {
+    type: 'none';
+};
+/** Digits typed so far for "type a page number, then Enter". One per running presentation. */
+export interface PresentationKeyBuffer {
+    digits: string;
+}
+/**
+ * Visio's Presentation Mode keys: Right, Down, Page Down, Space and Enter advance; Left, Up,
+ * Page Up and Backspace go back; Home and End jump to the first and last page; Escape exits;
+ * digits then Enter jump to that page. Chords are left alone. The PowerPoint slide-show map
+ * (`pptx/render/presentation-keymap`) adds pens, screens and menus Visio does not have, and
+ * lives in the separately compiled pptx project, so Visio keeps this small map.
+ */
+export declare function mapPresentationKey(event: {
+    key: string;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+}, buffer: PresentationKeyBuffer): PresentationKeyAction;

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

@@ -0,0 +1,10 @@
+import type { VisioMatrix, VisioShape } from 'ooxml-core/visio';
+/**
+ * Glow: the shape's outline in the glow colour, dilated by the glow size and blurred, drawn
+ * beneath the shape. Soft edges: the shape's geometry masked by its own eroded, blurred alpha.
+ * Reflection: a copy mirrored about the shape's bottom edge, faded by a gradient mask.
+ */
+export declare function renderShapeEffects(shape: VisioShape, paths: readonly SVGPathElement[], defs: SVGDefsElement, world: VisioMatrix): {
+    below: SVGGElement[];
+    geometryFilter?: string;
+};

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

@@ -0,0 +1,7 @@
+import type { VisioMatrix, VisioShape } from 'ooxml-core/visio';
+/**
+ * A shape's outer shadow: its geometry painted in the shadow colour, offset in page space and
+ * blurred, drawn beneath the shape. Offsets are page inches (Y up); the shape group may be
+ * rotated or flipped, so the offset is mapped back through the inverse of its world transform.
+ */
+export declare function renderShadow(shape: VisioShape, paths: readonly SVGPathElement[], defs: SVGDefsElement, world: VisioMatrix): SVGGElement | undefined;

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

@@ -1,6 +1,7 @@
-import type { VisioShapeFormatEdit } from 'ooxml-core/visio';
-import type { VisioArrangement } from 'ooxml-core/visio/ui';
-export type CanvasTool = 'pointer' | 'rectangle' | 'ellipse' | 'line' | 'text';
+import type { VisioBuiltInThemeId, VisioCalloutStyle, VisioChangeShapeTarget, VisioContainerStyle, VisioConnectorRoute, VisioShapeFormatEdit } from 'ooxml-core/visio';
+import type { TextCaseMode, VisioArrangement, VisioRuleSetId, VisioLayoutStyle } from 'ooxml-core/visio/ui';
+import type { VisioPageSetupCommand } from './page-setup-action.js';
+export type CanvasTool = 'pointer' | 'connector' | 'connection-point' | 'rectangle' | 'ellipse' | 'line' | 'text' | 'freeform' | 'arc' | 'pencil';
 export type VisioFormattingAction = {
     type: 'text-toggle';
     property: 'bold' | 'italic' | 'underline' | 'strikethrough';
@@ -32,12 +33,63 @@ export type VisioFormattingAction = {
 } | {
     type: 'shape-format';
     patch: Omit<VisioShapeFormatEdit, 'type' | 'pageId' | 'shapeId'>;
+}
+/** A Glow Variations preset: its colour is the page theme's accent (1-6) when it is applied. */
+ | {
+    type: 'glow-preset';
+    size: number;
+    accent: number;
 } | {
     type: 'shape-order';
     order: 'front' | 'back' | 'forward' | 'backward';
+} | {
+    type: 'change-case';
+    mode: TextCaseMode;
+};
+/** Text dialogs and tools: Home launchers and Text Block, Insert Symbol/Field, Review proofing. */
+export type VisioTextFeature = 'text-dialog' | 'paragraph-dialog' | 'text-block' | 'symbol' | 'field' | 'spelling' | 'language';
+/** Insert-tab items that act on the page or the selected shape. */
+export type VisioInsertItem = 'picture' | 'link' | 'screen-tip';
+/** Review and Process tab commands: comments, shape reports, diagram checks and subprocesses. */
+export type VisioReviewCommand = 'new-comment' | 'page-comment' | 'comments-pane' | 'shape-reports' | 'check-diagram' | 'issues-window' | 'ignore-issue' | 'rule-set' | 'subprocess-new' | 'subprocess-existing' | 'subprocess-selection';
+/** Insert > Diagram Parts: a container or callout in one of its styles. */
+export type VisioDiagramPartAction = {
+    type: 'diagram-part';
+    part: 'container';
+    style: VisioContainerStyle;
+} | {
+    type: 'diagram-part';
+    part: 'callout';
+    style: VisioCalloutStyle;
+};
+/** Data-tab commands: import, refresh, data graphics, legend, windows and Shape Data. */
+export type VisioDataCommand = 'quick-import' | 'custom-import' | 'refresh' | 'graphic-text' | 'graphic-bar' | 'graphic-icon' | 'graphic-color' | 'graphic-remove' | 'legend' | 'external-data-window' | 'define-shape-data';
+/** Arrangement, layout, layer, selection, view and output commands (viewer-layout and friends). */
+export type VisioLayoutAction = {
+    type: 'auto-align';
+} | {
+    type: 're-layout';
+    style: VisioLayoutStyle;
+} | {
+    type: 'layout-options';
+} | {
+    type: 'assign-layers';
+} | {
+    type: 'select-by-type';
+} | {
+    type: 'paste-special';
+} | {
+    type: 'guides';
+} | {
+    type: 'dynamic-grid';
+} | {
+    type: 'drawing-explorer';
+} | {
+    type: 'help';
+    topic: 'help' | 'training';
 };
 /** Every command the Visio ribbon, status bar or a shortcut can raise, as a `ribbon-action` event. */
-export type VisioRibbonAction = VisioFormattingAction | {
+export type VisioRibbonAction = VisioFormattingAction | VisioLayoutAction | {
     type: 'arrange';
     operation: VisioArrangement;
 } | {
@@ -53,12 +105,33 @@ export type VisioRibbonAction = VisioFormattingAction | {
     type: 'cancel-drawing';
 } | {
     type: 'page-insert';
+} | {
+    type: 'insert';
+    item: VisioInsertItem;
+} | {
+    type: 'data';
+    command: VisioDataCommand;
+} | {
+    type: 'text-feature';
+    feature: VisioTextFeature;
 } | {
     type: 'paint-properties';
+} | {
+    type: 'format-shape-pane';
+} | {
+    type: 'page-theme';
+    theme?: VisioBuiltInThemeId | 'none';
+    variant?: number;
 } | {
     type: 'delete';
 } | {
     type: 'duplicate';
+} | {
+    type: 'format-painter';
+    mode: 'once' | 'sticky' | 'cancel';
+} | {
+    type: 'grouping';
+    operation: 'group' | 'ungroup';
 } | {
     type: 'clipboard';
     operation: 'copy' | 'cut' | 'paste';
@@ -70,6 +143,9 @@ export type VisioRibbonAction = VisioFormattingAction | {
     type: 'flip';
     axis: 'horizontal' | 'vertical';
 } | {
+    type: 'change-shape';
+    shape: VisioChangeShapeTarget;
+} | VisioDiagramPartAction | {
     type: 'pane';
     pane: 'shapes' | 'inspector';
 } | {
@@ -78,6 +154,14 @@ export type VisioRibbonAction = VisioFormattingAction | {
     focusText?: boolean;
 } | {
     type: 'grid';
+} | {
+    type: 'connection-points';
+}
+/** Design > Connectors restyles the selection; Insert > Connector arms the tool. */
+ | {
+    type: 'connector-route';
+    route: VisioConnectorRoute;
+    scope: 'selection' | 'tool';
 } | {
     type: 'panZoom';
 } | {
@@ -86,6 +170,8 @@ export type VisioRibbonAction = VisioFormattingAction | {
     type: 'ruler';
 } | {
     type: 'fullscreen';
+} | {
+    type: 'presentation';
 } | {
     type: 'zoom';
     mode: 'fit' | 'width' | 'actual';
@@ -99,6 +185,13 @@ export type VisioRibbonAction = VisioFormattingAction | {
 } | {
     type: 'page';
     step: 1 | -1;
+} | {
+    type: 'page-setup';
+    command: VisioPageSetupCommand;
+} | {
+    type: 'review';
+    command: VisioReviewCommand;
+    ruleSet?: VisioRuleSetId;
 };
 /** Event name shared by every ribbon control; detail is the typed action. */
 export declare const RIBBON_ACTION_EVENT = "ribbon-action";

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

@@ -0,0 +1,11 @@
+import type { OfficeGalleryState, OfficeUiGallery } from '../ribbon/gallery.js';
+/** Gallery state for the Basic Shapes; `reason` disables every tile and names why. */
+export declare function changeShapeState(reason: string | undefined): OfficeGalleryState;
+/**
+ * Home > Editing > Change Shape: the shared `office-ui-gallery` of the Basic Shapes masters. A
+ * pick raises `{ type: 'change-shape', shape }`; the viewer keeps `disabled` and the trigger's
+ * tooltip in step with the selection (`syncChangeShape`).
+ */
+export declare function changeShapeGallery(doc: Document): OfficeUiGallery;
+/** Enable the gallery, or disable it with the reason as its tooltip (as unsupported commands do). */
+export declare function syncChangeShape(gallery: OfficeUiGallery, reason: string | undefined): void;

package/dist/visio/ribbon-diagram-parts.d.ts

@@ -0,0 +1,14 @@
+import { type VisioCalloutStyle, type VisioContainerStyle } from 'ooxml-core/visio';
+import type { OfficeGalleryState, OfficeUiGallery } from '../ribbon/gallery.js';
+export type DiagramPart = 'container' | 'callout';
+export declare const CONTAINER_STYLE_NAMES: Record<VisioContainerStyle, string>;
+export declare const CALLOUT_STYLE_NAMES: Record<VisioCalloutStyle, string>;
+/** Gallery state for a diagram part; `reason` disables every tile and names why. */
+export declare function diagramPartState(part: DiagramPart, reason: string | undefined): OfficeGalleryState;
+/**
+ * Insert > Diagram Parts > Container or Callout: the shared `office-ui-gallery` of styles. A pick
+ * raises `{ type: 'diagram-part', ... }`; the viewer keeps it enabled per selection.
+ */
+export declare function diagramPartGallery(doc: Document, part: DiagramPart): OfficeUiGallery;
+/** Enable the gallery, or disable it with the reason as its tooltip. */
+export declare function syncDiagramPart(gallery: OfficeUiGallery, part: DiagramPart, reason: string | undefined): void;

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

@@ -0,0 +1,11 @@
+import type { OfficeGalleryState, OfficeUiGallery } from '../ribbon/gallery.js';
+export declare function reLayoutState(reason: string | undefined): OfficeGalleryState;
+/**
+ * Design > Layout > Re-Layout Page: a shared `office-ui-gallery` of the automatic layouts. A pick
+ * raises `{ type: 're-layout', style }`; the viewer keeps availability in step with the drawing.
+ */
+export declare function reLayoutGallery(doc: Document): OfficeUiGallery;
+/** Design > Layout with Visio's dialog launcher (the Layout dialog; synced by ViewerLayout). */
+export declare function layoutGroup(doc: Document, children: readonly HTMLElement[]): HTMLElement;
+/** Enable the gallery, or disable it with the reason as its tooltip. */
+export declare function syncReLayout(gallery: OfficeUiGallery, reason: string | undefined): void;

package/dist/visio/ribbon-other-tabs.d.ts

@@ -1,12 +1,9 @@
+export { buildProcessPanel, buildReviewPanel } from './ribbon-review.js';
 /** 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. */
+/** Visio's Help tab. Help and Show Training open the viewer guide; support is not connected. */
 export declare function buildHelpPanel(doc: Document, panel: HTMLElement): void;

package/dist/visio/ribbon-page-setup.d.ts

@@ -0,0 +1,12 @@
+import { type VisioBackgroundStyle, type VisioBorderStyle } from 'ooxml-core/visio';
+import type { OfficeGalleryState, OfficeUiGallery } from '../ribbon/gallery.js';
+/** Background colours offered by Design > Background Color. */
+export declare const BACKGROUND_COLORS: readonly [readonly ["#FFFFFF", "White"], readonly ["#DEEBF7", "Light Blue"], readonly ["#E2F0D9", "Light Green"], readonly ["#FBE5D6", "Light Orange"], readonly ["#FFF2CC", "Light Gold"], readonly ["#EDEDED", "Light Gray"], readonly ["#44546A", "Dark Blue-Gray"]];
+/** Design > Page Setup: Orientation, Size and Auto Size, with the Page Setup dialog launcher. */
+export declare function pageSetupGroup(doc: Document): HTMLElement;
+export declare function backgroundsState(reason: string | undefined, applied?: VisioBackgroundStyle | null): OfficeGalleryState;
+export declare function bordersState(reason: string | undefined, applied?: VisioBorderStyle | null): OfficeGalleryState;
+/** Enable a decoration gallery, or disable it with the reason as its tooltip. */
+export declare function syncDecorationGallery(el: OfficeUiGallery, state: OfficeGalleryState, reason: string | undefined): void;
+/** Design > Backgrounds: the Backgrounds and Borders & Titles galleries and Background Color. */
+export declare function backgroundsGroup(doc: Document): HTMLElement;

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

@@ -37,6 +37,7 @@ export declare function stack(doc: Document, children: readonly HTMLElement[], h
 export declare function group(doc: Document, label: string, children: readonly HTMLElement[], options?: {
     className?: string;
     launcher?: string;
+    dialog?: string;
 }): HTMLElement;
 /** A labelled shared checkbox (Visio's View > Show options). */
 export declare function check(doc: Document, spec: CommandSpec): HTMLElement;

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

@@ -0,0 +1,4 @@
+/** Visio's Process tab: Subprocess and Diagram Validation (this viewer's generic rules). */
+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;

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

@@ -1,34 +1,62 @@
 import type { ViewerController } from './controller.js';
-import type { VisioRibbonAction, CanvasTool, VisioFormattingAction } from './ribbon-action.js';
+import type { VisioRibbonAction, CanvasTool, VisioFormattingAction, VisioInsertItem, VisioDataCommand, VisioLayoutAction, VisioTextFeature } 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;
     duplicateSelection(): void;
+    groupSelection(operation: 'group' | 'ungroup'): void;
     clipboard(action: Extract<VisioRibbonAction, {
         type: 'clipboard';
     }>): void;
     rotateSelection(direction: 'left' | 'right'): void;
     flipSelection(axis: 'horizontal' | 'vertical'): void;
+    changeShape(shape: Extract<VisioRibbonAction, {
+        type: 'change-shape';
+    }>['shape']): void;
+    insertDiagramPart(action: Extract<VisioRibbonAction, {
+        type: 'diagram-part';
+    }>): void;
     formatSelection(action: VisioFormattingAction): void;
+    formatPainter(mode: 'once' | 'sticky' | 'cancel'): void;
     arrangeSelection(action: Extract<VisioRibbonAction, {
         type: 'arrange';
     }>): void;
     setTool(tool: CanvasTool): void;
     cancelDrawing(): void;
     insertPage(): void;
+    insert(item: VisioInsertItem): void;
+    data(command: VisioDataCommand): void;
+    textFeature(feature: VisioTextFeature): void;
     showPaintProperties(): void;
+    showFormatShape(): void;
+    pageTheme(action: Extract<VisioRibbonAction, {
+        type: 'page-theme';
+    }>): void;
     toggleGrid(): void;
+    toggleConnectionPoints?(): void;
+    connectorRoute?(action: Extract<VisioRibbonAction, {
+        type: 'connector-route';
+    }>): void;
     toggleRuler(): void;
     togglePanZoom(): void;
     toggleSizePosition(): void;
     toggleFullscreen(): void;
+    present(): void;
     togglePane(pane: 'shapes' | 'inspector'): void;
     reveal(panel: 'edit' | 'notes' | 'selection' | 'layers', focusText: boolean): void;
     fit(mode: 'page' | 'width'): void;
     focusSearch(): void;
     focusReplace(): void;
+    pageSetup(command: Extract<VisioRibbonAction, {
+        type: 'page-setup';
+    }>['command']): void;
+    review(action: Extract<VisioRibbonAction, {
+        type: 'review';
+    }>): void;
+    /** Layout, layers, selection, guides, explorer, export and help (ViewerLayoutCommands). */
+    layout(action: VisioLayoutAction): 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-shape-styles.d.ts

@@ -0,0 +1,17 @@
+import { type VisioQuickStyleColor } from 'ooxml-core/visio';
+import type { OfficeGalleryItem, OfficeGalleryState } from '../ribbon/gallery.js';
+import type { CommandSpec } from './ribbon-parts.js';
+export declare const QUICK_STYLES_HINT = "Theme styles from the drawing's theme. A drawing without a theme gets the fixed Office colours shown here.";
+/** Stable gallery item id for a colour slot and style matrix. */
+export declare const quickStyleItemId: (color: VisioQuickStyleColor, matrix: number) => string;
+/** The gallery's items: one row per style matrix, one column per theme colour, as in Visio. */
+export declare function quickStyleItems(): OfficeGalleryItem[];
+export declare function quickStyleGalleryState(disabled: boolean): OfficeGalleryState;
+/** Home > Shape Styles > Quick Styles: the shared Office gallery raising typed format actions. */
+export declare function quickStyleGallery(doc: Document): HTMLElement;
+/** Stable menu ids of the effect presets, shared with the selection state sync. */
+export declare const glowItemId: (size: number, accent: number) => string;
+export declare const softEdgesItemId: (size: number) => string;
+export declare const reflectionItemId: (id: string) => string;
+/** Home > Shape Styles > Effects: shadow, reflection, glow and soft edge presets. */
+export declare function effectsOptions(): CommandSpec[];

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

@@ -0,0 +1,17 @@
+import { type VisioPageTheme } from 'ooxml-core/visio';
+import type { OfficeGalleryState, OfficeUiGallery } from '../ribbon/gallery.js';
+export declare const THEMES_HINT = "Apply a theme to the current page. Quick-styled shapes take its colours; text keeps its own font.";
+export declare const VARIANTS_HINT = "Pick one of the current theme's four colour variants.";
+export declare const NO_THEME_VARIANTS = "Apply a theme to the page first.";
+/** Design > Variants > More: which theme parts can be changed separately. */
+export declare const VARIANT_OPTION_REASONS: readonly [id: string, label: string, reason: string][];
+export declare const themeItemId: (id: string) => string;
+export declare const variantItemId: (index: number) => string;
+/** Themes gallery: No Theme, then the built-in themes; the page's theme is marked applied. */
+export declare function themesGalleryState(disabled: boolean, current: VisioPageTheme | undefined): OfficeGalleryState;
+/** Variants gallery: the page theme's four variants, previewed by their first variant colours. */
+export declare function variantsGalleryState(disabled: boolean, current: VisioPageTheme | undefined): OfficeGalleryState;
+export declare const themesGallery: (doc: Document) => OfficeUiGallery;
+export declare const variantsGallery: (doc: Document) => OfficeUiGallery;
+/** Variants > More: Colors, Fonts, Effects, Connectors and Embellishment, disabled with reasons. */
+export declare function variantOptions(doc: Document): import("./ribbon-parts.js").RibbonCommand;

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

@@ -1,5 +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.
+ * Task Panes, Presentation Mode, 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/shapes-sections.d.ts

@@ -0,0 +1,12 @@
+import { type Master } from './stencil-catalog.js';
+/** Per-viewer Shapes window preferences: opened stencils and each stencil's Quick Shapes. */
+export declare const SHAPES_STORAGE_KEY = "ooxml-ui.visio.shapes";
+/** One master button: drag it onto the page, or activate it to add it at the page centre. */
+export declare function masterButton(doc: Document, master: Master): HTMLLIElement;
+export declare function masterList(doc: Document, masters: readonly Master[]): HTMLUListElement;
+/**
+ * The Stencils view below the view tabs: More Shapes (a menu of the built-in stencils), Quick
+ * Shapes (favourites across the open stencils) and one collapsible section per open stencil,
+ * Basic Shapes first. Opened stencils and Quick Shapes persist per viewer in localStorage.
+ */
+export declare function buildStencilsView(doc: Document, panel: HTMLElement, pane: HTMLElement): HTMLElement[];

package/dist/visio/shapes-window.d.ts

@@ -1,39 +1,11 @@
-import type { VisioBasicShape } from 'ooxml-core/visio';
+export { BASIC_SHAPES, findMaster, masterCreation, type Master, type MasterCreation, } from './stencil-catalog.js';
 /** 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;
-    };
-}
-/** How the core creates a master: a native ellipse, or a Basic Shapes outline. */
-export type MasterCreation = {
-    kind: 'ellipse';
-} | {
-    kind: 'rectangle';
-    shape: VisioBasicShape;
-};
-/** 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.
+ * open stencils (`shapes-sections.ts`). Masters are dragged onto the page; Enter adds one at the
+ * page centre.
  */
 export declare function createShapesWindow(doc: Document): HTMLElement;
-/** Default size and creation of a stencil master, or nothing for an unknown id. */
-export declare function masterCreation(id: string): {
-    size: {
-        width: number;
-        height: number;
-    };
-    create: MasterCreation;
-} | undefined;
 /** Visio's minimised Shapes window: a narrow strip that reopens the window. */
 export declare function createShapesStrip(doc: Document): HTMLButtonElement;
-export {};

package/dist/visio/stencil-catalog.d.ts

@@ -0,0 +1,47 @@
+import { type VisioBasicOutline, type VisioOutlineShape } from 'ooxml-core/visio';
+export 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;
+    };
+}
+export interface Stencil {
+    id: string;
+    name: string;
+    masters: readonly Master[];
+}
+/** How the core creates a master: a native ellipse, or a core outline. */
+export type MasterCreation = {
+    kind: 'ellipse';
+} | {
+    kind: 'rectangle';
+    shape: VisioOutlineShape;
+};
+/** Visio's Basic Shapes stencil, in Visio's order. */
+export declare const BASIC_SHAPES: readonly Master[];
+export declare const BASIC_STENCIL_ID = "basic";
+/** A preview path for a core outline (or a native ellipse) drawn at its drop proportions. */
+export declare function outlinePreviewPath(outline: VisioBasicOutline | 'ellipse', size: {
+    width: number;
+    height: number;
+}): string;
+/** Basic Shapes, then the built-in stencils More Shapes can open, with generated previews. */
+export declare const STENCILS: readonly Stencil[];
+/** The master and its stencil for a master id, or nothing for an unknown id. */
+export declare function findMaster(id: string): {
+    stencil: Stencil;
+    master: Master;
+} | undefined;
+/** Default size and creation of a stencil master, or nothing for an unknown id. */
+export declare function masterCreation(id: string): {
+    size: {
+        width: number;
+        height: number;
+    };
+    create: MasterCreation;
+} | undefined;

package/dist/visio/styles.d.ts

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