visio-angular-viewer 0.8.0 → 1.0.1

package/README.md

@@ -52,22 +52,34 @@ export class DiagramComponent {
 
 The shared properties are `document` (a parsed `VisioDocument`, or `null` to clear),
 `pageIndex` (zero-based), `zoom` (`1` means 100%), `showToolbar`, `ribbonAddIns` (tabs the host adds
-after Help) and `events`.
-The callback map uses `document-load`, `document-change`, `document-error`,
-`page-change`, `zoom-change` and `shape-select`. File loading uses the imperative
+after Help), `canEdit` (editing permission; the viewer is editable unless you pass `false`),
+`collaboration` (shares the open drawing in a room while set; `null` leaves it) and `events`.
+The callback map uses `document-load`, `document-change` (`{ document, dirty, kind }` with kind
+`edit`, `undo`, `redo`, `remote` or `save`), `document-error`, `page-change`, `zoom-change`,
+`shape-select`, `selection-change`, `office-ribbon-add-in` and `collaboration-change`. File loading uses the imperative
 `load(File | Blob | Uint8Array | ArrayBuffer)` handle; `document` is not a file URL.
 Provide a height for the viewer host. Mount and load files in the browser.
 
 The handle supports `fit()`, `replacePlainText(pageId, shapeId, text)`,
 `applyEdits(edits)`, `undo()`, `redo()` and `exportVsdx()`.
 `exportVsdx()` returns `{ bytes, dirty, diagnostics }`; saving or downloading those
-bytes is the application's responsibility. Load original bytes through `load()`
+bytes is the application's responsibility, and `handle.controller.markClean()` declares them saved.
+Sharing state is on the handle's element: `collaborationState`, `reconnectCollaboration()` and
+`stopCollaboration()`. Load original bytes through `load()`
 to enable source-backed editing and export. Handles are usable after mount.
 
 Every viewer package includes the same browser UI and re-exports the
 `visio-core` document API. Parsing and editing belong to `ooxml-core/visio`;
 framework bindings only manage lifecycle, properties and events.
 
+## Compose your own UI
+
+To build a custom diagram UI instead of mounting the whole viewer, use the building blocks: `createViewerBuildingBlocks` and the `ViewerBuildingBlocks` class, with the standalone `DiagramCanvasComponent`, `ToolbarComponent`, `PageNavigationComponent`, `InspectorComponent` and `ShapesPaneComponent`. They expose signals
+for the flat `toolbarProps` (page, zoom, selection, search, enabled flags and callbacks), `mode`,
+`loading`/`error` and `markClean()`. Hosts pass `canEdit` (read-only until `true`) and optional
+`onOpenSettings`/`onOpenShareDialog`/`onOpenPageSetup`/`onOpenFile` callbacks for dialogs they own.
+See [composable building blocks](https://github.com/ChristopherVR/ooxml/blob/main/viewers/visio/docs/building-blocks.md).
+
 ## Limitations
 
 Rendering and editing are beta features. Supported text and geometry edits are
@@ -77,7 +89,7 @@ Files stay in the browser unless your application sends them elsewhere.
 
 ## Documentation
 
-[Viewer guide](https://christophervr.github.io/ooxml/visio/docs/) |
+[Viewer guide](https://christophervr.github.io/ooxml/visio/) |
 [Demo](https://christophervr.github.io/ooxml/visio/demo/) |
 [Source](https://github.com/ChristopherVR/ooxml/tree/main/viewers/visio)
 

package/dist/index.js

@@ -180,6 +180,7 @@ var VisioViewerComponent = class VisioViewerComponent {
 		this.shapeSelect = new EventEmitter();
 		this.selectionChange = new EventEmitter();
 		this.ribbonAddIn = new EventEmitter();
+		this.collaborationChange = new EventEmitter();
 		this.host = inject(ElementRef);
 		this.handle = viewerHandle(() => this.binding);
 		this.stopState = () => {};
@@ -193,7 +194,8 @@ var VisioViewerComponent = class VisioViewerComponent {
 			"zoom-change": this.zoomChange,
 			"shape-select": this.shapeSelect,
 			"selection-change": this.selectionChange,
-			"office-ribbon-add-in": this.ribbonAddIn
+			"office-ribbon-add-in": this.ribbonAddIn,
+			"collaboration-change": this.collaborationChange
 		};
 	}
 	options() {
@@ -291,6 +293,7 @@ __decorate([Input()], VisioViewerComponent.prototype, "zoom", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "showToolbar", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "canEdit", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "ribbonAddIns", void 0);
+__decorate([Input()], VisioViewerComponent.prototype, "collaboration", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "events", void 0);
 __decorate([Output()], VisioViewerComponent.prototype, "documentLoad", void 0);
 __decorate([Output()], VisioViewerComponent.prototype, "documentChange", void 0);
@@ -300,6 +303,7 @@ __decorate([Output()], VisioViewerComponent.prototype, "zoomChange", void 0);
 __decorate([Output()], VisioViewerComponent.prototype, "shapeSelect", void 0);
 __decorate([Output()], VisioViewerComponent.prototype, "selectionChange", void 0);
 __decorate([Output()], VisioViewerComponent.prototype, "ribbonAddIn", void 0);
+__decorate([Output()], VisioViewerComponent.prototype, "collaborationChange", void 0);
 VisioViewerComponent = __decorate([Component({
 	selector: "visio-viewer-host",
 	standalone: true,
@@ -312,10 +316,15 @@ function buildingBlock(key) {
 	if (typeof value !== "function") throw new Error("Update ooxml-ui to use Visio building blocks.");
 	return value;
 }
+/** The mode a host sees: 'edit' only when permission is granted and the file can be saved back. */
+function effectiveMode(state) {
+	return buildingBlock("diagramMode")(state);
+}
 /** Framework-neutral ownership only; each adapter supplies its own reactive state. */
-function createBuildingBlockSession() {
+function createBuildingBlockSession(initial = {}) {
 	const controller = new ViewerController(createWorkerParser());
-	let options = {};
+	controller.canEdit = initial.canEdit === true;
+	let options = initial;
 	let source;
 	let host = null;
 	let disposeCanvas;
@@ -339,13 +348,23 @@ function createBuildingBlockSession() {
 			host = node;
 			if (node) disposeCanvas = buildingBlock("mountDiagramCanvas")(node, controller);
 		},
-		toolbar(locale = options.locale) {
-			return buildingBlock("diagramToolbarProps")(controller, fit, locale);
+		/** Flat control props; pass the framework's latest options so callbacks stay current. */
+		toolbar(latest = options) {
+			return buildingBlock("diagramToolbarProps")(controller, fit, latest.locale, {
+				onOpenFile: latest.onOpenFile,
+				onOpenPageSetup: latest.onOpenPageSetup,
+				onOpenSettings: latest.onOpenSettings,
+				onOpenShareDialog: latest.onOpenShareDialog
+			});
+		},
+		/** Acknowledge a host save: clears dirty and emits the dirty change. */
+		markClean() {
+			controller.markClean();
 		},
 		update(next) {
 			if (destroyed) return;
 			options = next;
-			controller.canEdit = next.canEdit !== false;
+			controller.canEdit = next.canEdit === true;
 			if (source === next.content) return;
 			source = next.content;
 			controller.cancelLoad();
@@ -374,25 +393,110 @@ function prepareDiagramBlock(host, kind) {
 	prepare(host, kind, "visio");
 }
 //#endregion
+//#region packages/bindings/src/toolbar-controls.ts
+var TOOLBAR_GROUPS = [
+	"file",
+	"history",
+	"zoom",
+	"selection",
+	"clipboard",
+	"tools",
+	"search"
+];
+var fire = (action) => () => {
+	Promise.resolve().then(action).catch(() => {});
+};
+var button = (id, label, enabled, action, pressed) => ({
+	kind: "button",
+	id,
+	label,
+	disabled: !enabled,
+	...pressed === void 0 ? {} : { pressed },
+	run: fire(action)
+});
+/**
+* What the library Toolbar shows, as plain data every framework maps onto its own elements.
+* Every control reflects `toolbarProps`: edit actions are disabled while the diagram is read-only,
+* viewing actions (zoom, fit, search) never are, and a host dialog button appears only when the
+* host supplied its callback.
+*/
+function toolbarGroups(props, include = TOOLBAR_GROUPS) {
+	const { labels } = props;
+	const has = props.pages.length > 0;
+	const groups = [];
+	const add = (id, controls) => {
+		if (include.includes(id) && controls.length) groups.push({
+			id,
+			controls
+		});
+	};
+	add("file", [
+		...props.onOpenFile ? [button("open", labels.Open, true, props.onOpenFile)] : [],
+		...props.onOpenPageSetup ? [button("page-setup", labels["Page Setup"], has, props.onOpenPageSetup)] : [],
+		...props.onOpenShareDialog ? [button("share", labels.Share, has, props.onOpenShareDialog)] : [],
+		...props.onOpenSettings ? [button("settings", labels.Options, true, props.onOpenSettings)] : []
+	]);
+	add("history", [button("undo", labels.Undo, props.canUndo, props.onUndo), button("redo", labels.Redo, props.canRedo, props.onRedo)]);
+	add("zoom", [
+		button("zoom-out", labels["Zoom Out"], props.canZoomOut, props.onZoomOut),
+		{
+			kind: "text",
+			id: "zoom",
+			text: `${Math.round(props.zoom * 100)}%`
+		},
+		button("zoom-in", labels["Zoom In"], props.canZoomIn, props.onZoomIn),
+		button("fit", labels["Fit to Window"], has, props.onFit)
+	]);
+	add("selection", [
+		button("duplicate", labels.Duplicate, props.canDuplicate, props.onDuplicate),
+		button("group", labels.Group, props.canGroup, props.onGroup),
+		button("ungroup", labels.Ungroup, props.canUngroup, props.onUngroup),
+		button("delete", labels.Delete, props.canDelete, props.onDelete)
+	]);
+	add("clipboard", [
+		button("cut", labels.Cut, props.canCut, props.onCut),
+		button("copy", labels.Copy, props.canCopy, props.onCopy),
+		button("paste", labels.Paste, props.canPaste, props.onPaste)
+	]);
+	add("tools", props.tools.map((tool) => button(`tool-${tool.id}`, tool.label, tool.id === "pointer" || props.canDraw, () => props.onToolChange(tool.id), tool.active)));
+	const { search } = props;
+	add("search", [{
+		kind: "search",
+		id: "search",
+		label: labels.Find,
+		query: search.query,
+		summary: search.query ? search.resultCount ? `${search.activeIndex >= 0 ? search.activeIndex + 1 : "-"} / ${search.resultCount}` : "0" : "",
+		previous: button("search-previous", labels["Previous Result"], search.resultCount > 0, props.onPreviousSearchResult),
+		next: button("search-next", labels["Next Result"], search.resultCount > 0, props.onNextSearchResult),
+		change: (query) => props.onSearchChange(query)
+	}]);
+	return groups;
+}
+//#endregion
 //#region packages/angular/src/building-blocks.ts
 var ViewerBuildingBlocks = class ViewerBuildingBlocks {
 	session = createBuildingBlockSession();
 	controller = this.session.controller;
 	current = signal(this.controller.state);
 	state = this.current.asReadonly();
-	locale = signal(void 0);
+	latest = signal({});
 	toolbarProps = computed(() => {
 		this.state();
-		return this.session.toolbar(this.locale());
+		return this.session.toolbar(this.latest());
 	});
 	loading = computed(() => this.state().loading);
 	error = computed(() => this.state().error ?? this.state().edit.error);
-	mode = computed(() => this.state().canEdit ? "edit" : "view");
+	/** Effective permission: host `canEdit` and a drawing that can be saved back. */
+	mode = computed(() => effectiveMode(this.state()));
 	documentChange = new EventEmitter();
 	dirtyChange = new EventEmitter();
 	documentError = new EventEmitter();
 	canvasProps = { mount: (node) => this.session.mount(node) };
 	inspectorProps = { controller: this.controller };
+	shapesProps = computed(() => ({
+		controller: this.controller,
+		locale: this.latest().locale
+	}));
 	constructor() {
 		this.update({});
 		const stop = this.controller.subscribe((state) => this.current.set(state));
@@ -401,8 +505,12 @@ var ViewerBuildingBlocks = class ViewerBuildingBlocks {
 			this.session.destroy();
 		});
 	}
+	/** Acknowledge a host save: clears dirty and emits `dirtyChange(false)`. */
+	markClean() {
+		this.session.markClean();
+	}
 	update(options) {
-		this.locale.set(options.locale);
+		this.latest.set(options);
 		this.session.update({
 			...options,
 			onDocumentChange: (document) => {
@@ -433,8 +541,13 @@ function createViewerBuildingBlocks(options = () => ({})) {
 var ViewerBuildingBlocksComponent = class ViewerBuildingBlocksComponent {
 	blocks = inject(ViewerBuildingBlocks);
 	content;
-	canEdit = true;
+	/** Host edit permission. Read-only until `true`. */
+	canEdit = false;
 	locale;
+	onOpenFile;
+	onOpenPageSetup;
+	onOpenSettings;
+	onOpenShareDialog;
 	documentChange = this.blocks.documentChange;
 	dirtyChange = this.blocks.dirtyChange;
 	documentError = this.blocks.documentError;
@@ -445,13 +558,21 @@ var ViewerBuildingBlocksComponent = class ViewerBuildingBlocksComponent {
 		this.blocks.update({
 			content: this.content,
 			canEdit: this.canEdit,
-			locale: this.locale
+			locale: this.locale,
+			onOpenFile: this.onOpenFile,
+			onOpenPageSetup: this.onOpenPageSetup,
+			onOpenSettings: this.onOpenSettings,
+			onOpenShareDialog: this.onOpenShareDialog
 		});
 	}
 };
 __decorate([Input()], ViewerBuildingBlocksComponent.prototype, "content", void 0);
 __decorate([Input()], ViewerBuildingBlocksComponent.prototype, "canEdit", void 0);
 __decorate([Input()], ViewerBuildingBlocksComponent.prototype, "locale", void 0);
+__decorate([Input()], ViewerBuildingBlocksComponent.prototype, "onOpenFile", void 0);
+__decorate([Input()], ViewerBuildingBlocksComponent.prototype, "onOpenPageSetup", void 0);
+__decorate([Input()], ViewerBuildingBlocksComponent.prototype, "onOpenSettings", void 0);
+__decorate([Input()], ViewerBuildingBlocksComponent.prototype, "onOpenShareDialog", void 0);
 __decorate([Output()], ViewerBuildingBlocksComponent.prototype, "documentChange", void 0);
 __decorate([Output()], ViewerBuildingBlocksComponent.prototype, "dirtyChange", void 0);
 __decorate([Output()], ViewerBuildingBlocksComponent.prototype, "documentError", void 0);
@@ -478,30 +599,83 @@ DiagramCanvasComponent = __decorate([Component({
 })], DiagramCanvasComponent);
 var ToolbarComponent = class ToolbarComponent {
 	host = inject(ElementRef);
+	/** Groups to show; omit for all. Hosts may build their own controls from toolbarProps. */
+	include;
 	ngAfterViewInit() {
 		prepareDiagramBlock(this.host.nativeElement.querySelector("div"), "toolbar");
 	}
 	blocks = inject(ViewerBuildingBlocks);
+	groups() {
+		return toolbarGroups(this.blocks.toolbarProps(), this.include);
+	}
+	asText(control) {
+		return control;
+	}
+	asButton(control) {
+		return control;
+	}
+	asSearch(control) {
+		return control;
+	}
+	value(event) {
+		return event.target.value;
+	}
 };
+__decorate([Input()], ToolbarComponent.prototype, "include", void 0);
 ToolbarComponent = __decorate([Component({
 	selector: "visio-diagram-toolbar",
 	standalone: true,
 	template: `<div role="toolbar">
-		<button
-			type="button"
-			[disabled]="!blocks.toolbarProps().canUndo"
-			(click)="blocks.toolbarProps().onUndo()"
-		>
-			{{ blocks.toolbarProps().labels['Undo'] }}</button
-		><button
-			type="button"
-			[disabled]="!blocks.toolbarProps().canRedo"
-			(click)="blocks.toolbarProps().onRedo()"
-		>
-			{{ blocks.toolbarProps().labels['Redo'] }}</button
-		><button type="button" (click)="blocks.toolbarProps().onFit()">
-			{{ blocks.toolbarProps().labels['Fit to Window'] }}
-		</button>
+		@for (group of groups(); track group.id) {
+			<span [attr.data-group]="group.id">
+				@for (control of group.controls; track control.id) {
+					@switch (control.kind) {
+						@case ('text') {
+							<span [attr.data-control]="control.id">{{ asText(control).text }}</span>
+						}
+						@case ('button') {
+							<button
+								type="button"
+								[attr.data-control]="control.id"
+								[disabled]="asButton(control).disabled"
+								[attr.aria-pressed]="asButton(control).pressed ?? null"
+								(click)="asButton(control).run()"
+							>
+								{{ asButton(control).label }}
+							</button>
+						}
+						@default {
+							<span data-control="search">
+								<input
+									type="search"
+									[attr.aria-label]="asSearch(control).label"
+									[attr.placeholder]="asSearch(control).label"
+									[value]="asSearch(control).query"
+									(input)="asSearch(control).change(value($event))"
+								/>
+								<span aria-live="polite">{{ asSearch(control).summary }}</span>
+								<button
+									type="button"
+									[attr.data-control]="asSearch(control).previous.id"
+									[disabled]="asSearch(control).previous.disabled"
+									(click)="asSearch(control).previous.run()"
+								>
+									{{ asSearch(control).previous.label }}
+								</button>
+								<button
+									type="button"
+									[attr.data-control]="asSearch(control).next.id"
+									[disabled]="asSearch(control).next.disabled"
+									(click)="asSearch(control).next.run()"
+								>
+									{{ asSearch(control).next.label }}
+								</button>
+							</span>
+						}
+					}
+				}
+			</span>
+		}
 	</div>`
 })], ToolbarComponent);
 var PageNavigationComponent = class PageNavigationComponent {
@@ -543,5 +717,21 @@ InspectorComponent = __decorate([Component({
 	standalone: true,
 	template: ""
 })], InspectorComponent);
+var ShapesPaneComponent = class ShapesPaneComponent {
+	blocks = inject(ViewerBuildingBlocks);
+	host = inject(ElementRef);
+	stop;
+	ngAfterViewInit() {
+		this.stop = buildingBlock("mountDiagramShapes")(this.host.nativeElement, this.blocks.controller, { locale: this.blocks.shapesProps().locale });
+	}
+	ngOnDestroy() {
+		this.stop?.();
+	}
+};
+ShapesPaneComponent = __decorate([Component({
+	selector: "visio-shapes-pane",
+	standalone: true,
+	template: ""
+})], ShapesPaneComponent);
 //#endregion
-export { DiagramCanvasComponent, InspectorComponent, PageNavigationComponent, ToolbarComponent, ViewerBuildingBlocks, ViewerBuildingBlocksComponent, VisioViewerComponent, createViewerBuildingBlocks };
+export { DiagramCanvasComponent, InspectorComponent, PageNavigationComponent, ShapesPaneComponent, ToolbarComponent, ViewerBuildingBlocks, ViewerBuildingBlocksComponent, VisioViewerComponent, createViewerBuildingBlocks };

package/dist/types/packages/angular/src/building-blocks.d.ts

@@ -1,15 +1,15 @@
 import { EventEmitter, type AfterViewInit, type OnChanges, type OnDestroy, type OnInit } from '@angular/core';
 import { type BuildingBlockOptions } from '../../bindings/src/building-blocks.js';
+import { type ToolbarButton, type ToolbarControl, type ToolbarGroupId, type ToolbarSearch, type ToolbarText } from '../../bindings/src/toolbar-controls.js';
 export declare class ViewerBuildingBlocks {
     private readonly session;
     readonly controller: import("ooxml-ui/visio").ViewerController;
     private readonly current;
     readonly state: import("@angular/core").Signal<import("ooxml-ui/visio").ViewerState>;
-    private readonly locale;
+    private readonly latest;
     readonly toolbarProps: import("@angular/core").Signal<{
-        labels: {
-            [k: string]: string;
-        };
+        labels: Readonly<Record<"Arc" | "Connector" | "Copy" | "Cut" | "Delete" | "Duplicate" | "Ellipse" | "Find" | "Fit to Window" | "Freeform" | "Group" | "Line" | "Next Result" | "Open" | "Options" | "Page" | "Page Setup" | "Paste" | "Pencil" | "Pointer Tool" | "Previous Result" | "Rectangle" | "Redo" | "Shapes" | "Share" | "Text" | "Undo" | "Ungroup" | "Zoom In" | "Zoom Out", string>>;
+        mode: import("ooxml-ui/visio").DiagramMode;
         canEdit: boolean;
         pageIndex: number;
         pages: {
@@ -23,21 +23,52 @@ export declare class ViewerBuildingBlocks {
         canDuplicate: boolean;
         canGroup: boolean;
         canUngroup: boolean;
+        canDelete: boolean;
+        canCut: boolean;
+        canCopy: boolean;
+        canPaste: boolean;
+        canDraw: boolean;
+        canZoomIn: boolean;
+        canZoomOut: boolean;
+        tool: import("ooxml-ui/visio").DiagramTool;
+        tools: import("ooxml-ui/visio").DiagramToolSummary[];
+        search: {
+            query: string;
+            resultCount: number;
+            activeIndex: number;
+            truncated: boolean;
+        };
         onPageChange: (index: number) => void;
         onZoomChange: (zoom: number) => void;
+        onZoomIn: () => void;
+        onZoomOut: () => void;
         onFit: () => void;
         onUndo: () => Promise<void>;
         onRedo: () => Promise<void>;
         onDuplicate: () => Promise<void>;
         onGroup: () => Promise<void>;
         onUngroup: () => Promise<void>;
+        onDelete: () => Promise<void>;
+        onCut: () => Promise<void>;
+        onCopy: () => Promise<void>;
+        onPaste: () => Promise<void>;
+        onToolChange: (tool: import("ooxml-ui/visio").DiagramTool) => void;
         onTextChange: (pageId: string, shapeId: string, text: string) => Promise<void>;
         onSearchChange: (query: string) => void;
         onNextSearchResult: () => void;
         onPreviousSearchResult: () => void;
+        canOpenFile: boolean;
+        canOpenPageSetup: boolean;
+        canOpenSettings: boolean;
+        canOpenShareDialog: boolean;
+        onOpenFile?: () => void;
+        onOpenPageSetup?: () => void;
+        onOpenSettings?: () => void;
+        onOpenShareDialog?: () => void;
     }>;
     readonly loading: import("@angular/core").Signal<boolean>;
     readonly error: import("@angular/core").Signal<Error | null>;
+    /** Effective permission: host `canEdit` and a drawing that can be saved back. */
     readonly mode: import("@angular/core").Signal<"edit" | "view">;
     readonly documentChange: EventEmitter<import("visio-core").VisioDocument>;
     readonly dirtyChange: EventEmitter<boolean>;
@@ -48,7 +79,13 @@ export declare class ViewerBuildingBlocks {
     readonly inspectorProps: {
         controller: import("ooxml-ui/visio").ViewerController;
     };
+    readonly shapesProps: import("@angular/core").Signal<{
+        controller: import("ooxml-ui/visio").ViewerController;
+        locale: string | undefined;
+    }>;
     constructor();
+    /** Acknowledge a host save: clears dirty and emits `dirtyChange(false)`. */
+    markClean(): void;
     update(options: BuildingBlockOptions): void;
 }
 /** Connect host signals to the scoped owner within an Angular injection context. */
@@ -56,8 +93,13 @@ export declare function createViewerBuildingBlocks(options?: () => BuildingBlock
 export declare class ViewerBuildingBlocksComponent implements OnChanges, OnInit {
     readonly blocks: ViewerBuildingBlocks;
     content?: BuildingBlockOptions['content'];
+    /** Host edit permission. Read-only until `true`. */
     canEdit: boolean;
     locale?: string;
+    onOpenFile?: () => void;
+    onOpenPageSetup?: () => void;
+    onOpenSettings?: () => void;
+    onOpenShareDialog?: () => void;
     readonly documentChange: EventEmitter<import("visio-core").VisioDocument>;
     readonly dirtyChange: EventEmitter<boolean>;
     readonly documentError: EventEmitter<Error>;
@@ -72,8 +114,15 @@ export declare class DiagramCanvasComponent implements AfterViewInit, OnDestroy
 }
 export declare class ToolbarComponent implements AfterViewInit {
     private readonly host;
+    /** Groups to show; omit for all. Hosts may build their own controls from toolbarProps. */
+    include?: readonly ToolbarGroupId[];
     ngAfterViewInit(): void;
     readonly blocks: ViewerBuildingBlocks;
+    groups(): import("../../bindings/src/toolbar-controls.js").ToolbarGroup[];
+    asText(control: ToolbarControl): ToolbarText;
+    asButton(control: ToolbarControl): ToolbarButton;
+    asSearch(control: ToolbarControl): ToolbarSearch;
+    value(event: Event): string;
 }
 export declare class PageNavigationComponent implements AfterViewInit {
     private readonly host;
@@ -88,4 +137,12 @@ export declare class InspectorComponent implements AfterViewInit, OnDestroy {
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
 }
-export type { BuildingBlockOptions, DiagramToolbarProps } from '../../bindings/src/building-blocks.js';
+export declare class ShapesPaneComponent implements AfterViewInit, OnDestroy {
+    readonly blocks: ViewerBuildingBlocks;
+    private readonly host;
+    private stop;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+}
+export type { BuildingBlockOptions, BuildingBlockHostCallbacks, DiagramToolbarProps, } from '../../bindings/src/building-blocks.js';
+export type { ToolbarGroupId } from '../../bindings/src/toolbar-controls.js';

package/dist/types/packages/bindings/src/angular.d.ts

@@ -8,12 +8,13 @@ export declare class VisioViewerComponent implements AfterViewInit, OnChanges, O
     showToolbar?: boolean;
     canEdit?: boolean;
     ribbonAddIns?: ViewerProperties['ribbonAddIns'];
+    collaboration?: ViewerProperties['collaboration'];
     events?: ViewerCallbacks;
     documentLoad: EventEmitter<import("visio-core").VisioDocument>;
     documentChange: EventEmitter<{
         document: import("visio-core").VisioDocument;
         dirty: boolean;
-        kind: "edit" | "undo" | "redo" | "remote";
+        kind: "edit" | "undo" | "redo" | "remote" | "save";
     }>;
     documentError: EventEmitter<Error>;
     pageChange: EventEmitter<number>;
@@ -21,6 +22,7 @@ export declare class VisioViewerComponent implements AfterViewInit, OnChanges, O
     shapeSelect: EventEmitter<VisioShapeSelection | null>;
     selectionChange: EventEmitter<readonly VisioShapeSelection[]>;
     ribbonAddIn: EventEmitter<import("ooxml-core/ribbon").RibbonAddInCommandDetail>;
+    collaborationChange: EventEmitter<import("ooxml-core/collab").CollaborationState>;
     private readonly host;
     private binding;
     private readonly handle;

package/dist/types/packages/bindings/src/building-blocks.d.ts

@@ -1,23 +1,33 @@
 import { ViewerController, type VsdxSource } from 'ooxml-ui/visio';
 import * as ui from 'ooxml-ui/visio';
-export interface BuildingBlockOptions {
+/** Host-owned dialogs, as in the PowerPoint building blocks; omitted ones report not-enabled. */
+export interface BuildingBlockHostCallbacks {
+    onOpenFile?: (() => void) | undefined;
+    onOpenPageSetup?: (() => void) | undefined;
+    onOpenSettings?: (() => void) | undefined;
+    onOpenShareDialog?: (() => void) | undefined;
+}
+export interface BuildingBlockOptions extends BuildingBlockHostCallbacks {
     content?: VsdxSource | undefined;
+    /** Host edit permission. Read-only until it is `true`, so nothing is editable before the host says so. */
     canEdit?: boolean | undefined;
     locale?: string | undefined;
     onDocumentChange?: ((document: NonNullable<ViewerController['state']['document']>) => void) | undefined;
     onDirtyChange?: ((dirty: boolean) => void) | undefined;
     onDocumentError?: ((error: Error) => void) | undefined;
 }
-type Api = Pick<typeof ui, 'mountDiagramCanvas' | 'fitDiagramCanvas' | 'mountDiagramInspector' | 'diagramToolbarProps'>;
+type Api = Pick<typeof ui, 'mountDiagramCanvas' | 'fitDiagramCanvas' | 'mountDiagramInspector' | 'mountDiagramShapes' | 'diagramToolbarProps' | 'diagramMode'>;
 export declare function buildingBlock<K extends keyof Api>(key: K): Api[K];
+/** The mode a host sees: 'edit' only when permission is granted and the file can be saved back. */
+export declare function effectiveMode(state: ViewerController['state']): 'edit' | 'view';
 /** Framework-neutral ownership only; each adapter supplies its own reactive state. */
-export declare function createBuildingBlockSession(): {
+export declare function createBuildingBlockSession(initial?: BuildingBlockOptions): {
     controller: ViewerController;
     mount(node: HTMLElement | null): void;
-    toolbar(locale?: string | undefined): {
-        labels: {
-            [k: string]: string;
-        };
+    /** Flat control props; pass the framework's latest options so callbacks stay current. */
+    toolbar(latest?: BuildingBlockOptions): {
+        labels: Readonly<Record<"Arc" | "Connector" | "Copy" | "Cut" | "Delete" | "Duplicate" | "Ellipse" | "Find" | "Fit to Window" | "Freeform" | "Group" | "Line" | "Next Result" | "Open" | "Options" | "Page" | "Page Setup" | "Paste" | "Pencil" | "Pointer Tool" | "Previous Result" | "Rectangle" | "Redo" | "Shapes" | "Share" | "Text" | "Undo" | "Ungroup" | "Zoom In" | "Zoom Out", string>>;
+        mode: ui.DiagramMode;
         canEdit: boolean;
         pageIndex: number;
         pages: {
@@ -31,23 +41,55 @@ export declare function createBuildingBlockSession(): {
         canDuplicate: boolean;
         canGroup: boolean;
         canUngroup: boolean;
+        canDelete: boolean;
+        canCut: boolean;
+        canCopy: boolean;
+        canPaste: boolean;
+        canDraw: boolean;
+        canZoomIn: boolean;
+        canZoomOut: boolean;
+        tool: ui.DiagramTool;
+        tools: ui.DiagramToolSummary[];
+        search: {
+            query: string;
+            resultCount: number;
+            activeIndex: number;
+            truncated: boolean;
+        };
         onPageChange: (index: number) => void;
         onZoomChange: (zoom: number) => void;
+        onZoomIn: () => void;
+        onZoomOut: () => void;
         onFit: () => void;
         onUndo: () => Promise<void>;
         onRedo: () => Promise<void>;
         onDuplicate: () => Promise<void>;
         onGroup: () => Promise<void>;
         onUngroup: () => Promise<void>;
+        onDelete: () => Promise<void>;
+        onCut: () => Promise<void>;
+        onCopy: () => Promise<void>;
+        onPaste: () => Promise<void>;
+        onToolChange: (tool: ui.DiagramTool) => void;
         onTextChange: (pageId: string, shapeId: string, text: string) => Promise<void>;
         onSearchChange: (query: string) => void;
         onNextSearchResult: () => void;
         onPreviousSearchResult: () => void;
+        canOpenFile: boolean;
+        canOpenPageSetup: boolean;
+        canOpenSettings: boolean;
+        canOpenShareDialog: boolean;
+        onOpenFile?: () => void;
+        onOpenPageSetup?: () => void;
+        onOpenSettings?: () => void;
+        onOpenShareDialog?: () => void;
     };
+    /** Acknowledge a host save: clears dirty and emits the dirty change. */
+    markClean(): void;
     update(next: BuildingBlockOptions): void;
     destroy(): void;
 };
 export type BuildingBlockSession = ReturnType<typeof createBuildingBlockSession>;
-export type { DiagramToolbarProps, ViewerController } from 'ooxml-ui/visio';
+export type { DiagramToolbarProps, DiagramToolbarLabels, DiagramToolbarHostCallbacks, DiagramMode, DiagramTool, ViewerController, } from 'ooxml-ui/visio';
 /** Resolve the new optional-control theme API only when that control is mounted. */
 export declare function prepareDiagramBlock(host: HTMLElement | null, kind: 'toolbar' | 'tabs'): void;

package/dist/types/packages/bindings/src/toolbar-controls.d.ts

@@ -0,0 +1,41 @@
+import type { DiagramToolbarProps } from 'ooxml-ui/visio';
+/** The groups of the library toolbar; a host picks the ones it wants with `include`. */
+export type ToolbarGroupId = 'file' | 'history' | 'zoom' | 'selection' | 'clipboard' | 'tools' | 'search';
+export declare const TOOLBAR_GROUPS: readonly ToolbarGroupId[];
+export interface ToolbarButton {
+    readonly kind: 'button';
+    readonly id: string;
+    readonly label: string;
+    readonly disabled: boolean;
+    /** Set for toggles such as the drawing tools. */
+    readonly pressed?: boolean;
+    run(): void;
+}
+export interface ToolbarText {
+    readonly kind: 'text';
+    readonly id: string;
+    readonly text: string;
+}
+export interface ToolbarSearch {
+    readonly kind: 'search';
+    readonly id: 'search';
+    readonly label: string;
+    readonly query: string;
+    /** Result summary for assistive technology, e.g. "2 of 5". */
+    readonly summary: string;
+    readonly previous: ToolbarButton;
+    readonly next: ToolbarButton;
+    change(query: string): void;
+}
+export type ToolbarControl = ToolbarButton | ToolbarText | ToolbarSearch;
+export interface ToolbarGroup {
+    readonly id: ToolbarGroupId;
+    readonly controls: readonly ToolbarControl[];
+}
+/**
+ * What the library Toolbar shows, as plain data every framework maps onto its own elements.
+ * Every control reflects `toolbarProps`: edit actions are disabled while the diagram is read-only,
+ * viewing actions (zoom, fit, search) never are, and a host dialog button appears only when the
+ * host supplied its callback.
+ */
+export declare function toolbarGroups(props: DiagramToolbarProps, include?: readonly ToolbarGroupId[]): ToolbarGroup[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "visio-angular-viewer",
-	"version": "0.8.0",
+	"version": "1.0.1",
 	"description": "Local-first Visio viewer for angular",
 	"homepage": "https://christophervr.github.io/ooxml/visio/",
 	"bugs": {
@@ -31,9 +31,9 @@
 	},
 	"dependencies": {
 		"emf-converter": "4.21.0",
-		"ooxml-core": "^1.20.0",
-		"ooxml-ui": "^1.19.0",
-		"visio-core": "^0.5.0"
+		"ooxml-core": "^1.23.0",
+		"ooxml-ui": "^1.22.0",
+		"visio-core": "^1.0.1"
 	},
 	"devDependencies": {
 		"@angular/compiler": "^22.2.3",