visio-angular-viewer 0.7.4 → 1.0.0

package/dist/index.js

@@ -1,5 +1,7 @@
-import { eventKeys, mountViewer, propertyKeys } from "ooxml-ui/visio";
-import { Component, ElementRef, EventEmitter, Input, Output, inject, signal } from "@angular/core";
+import * as ui from "ooxml-ui/visio";
+import { ViewerController, createWorkerParser, eventKeys, mountViewer, propertyKeys } from "ooxml-ui/visio";
+import { Component, DestroyRef, ElementRef, EventEmitter, Injectable, Input, Output, computed, effect, inject, signal, untracked } from "@angular/core";
+import * as officeTheme from "ooxml-ui/theme";
 export * from "ooxml-ui/visio";
 export * from "visio-core";
 //#region packages/bindings/src/common.ts
@@ -178,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 = () => {};
@@ -191,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() {
@@ -287,7 +291,9 @@ __decorate([Input()], VisioViewerComponent.prototype, "document", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "pageIndex", void 0);
 __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);
@@ -297,10 +303,435 @@ __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,
 	template: ""
 })], VisioViewerComponent);
 //#endregion
-export { VisioViewerComponent };
+//#region packages/bindings/src/building-blocks.ts
+function buildingBlock(key) {
+	const value = Reflect.get(ui, 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(initial = {}) {
+	const controller = new ViewerController(createWorkerParser());
+	controller.canEdit = initial.canEdit === true;
+	let options = initial;
+	let source;
+	let host = null;
+	let disposeCanvas;
+	let destroyed = false;
+	const stopEvents = controller.onEvent((name, detail) => {
+		if (name === "document-change") {
+			const change = detail;
+			options.onDocumentChange?.(change.document);
+			options.onDirtyChange?.(change.dirty);
+		} else if (name === "document-error") options.onDocumentError?.(detail);
+	});
+	const fit = () => {
+		if (host) buildingBlock("fitDiagramCanvas")(host, controller);
+	};
+	return {
+		controller,
+		mount(node) {
+			if (destroyed || node === host) return;
+			disposeCanvas?.();
+			disposeCanvas = void 0;
+			host = node;
+			if (node) disposeCanvas = buildingBlock("mountDiagramCanvas")(node, controller);
+		},
+		/** 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 === true;
+			if (source === next.content) return;
+			source = next.content;
+			controller.cancelLoad();
+			if (!source) return;
+			const input = source;
+			controller.loadSource(async () => {
+				return input instanceof Blob ? new Uint8Array(await input.arrayBuffer()) : input;
+			}).catch(() => {});
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			disposeCanvas?.();
+			disposeCanvas = void 0;
+			host = null;
+			stopEvents();
+			controller.destroy();
+		}
+	};
+}
+/** Resolve the new optional-control theme API only when that control is mounted. */
+function prepareDiagramBlock(host, kind) {
+	if (!host) return;
+	const prepare = Reflect.get(officeTheme, "prepareOfficeUiBlock");
+	if (typeof prepare !== "function") throw new Error("Update ooxml-ui to theme Visio building blocks.");
+	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();
+	latest = signal({});
+	toolbarProps = computed(() => {
+		this.state();
+		return this.session.toolbar(this.latest());
+	});
+	loading = computed(() => this.state().loading);
+	error = computed(() => this.state().error ?? this.state().edit.error);
+	/** 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));
+		inject(DestroyRef).onDestroy(() => {
+			stop();
+			this.session.destroy();
+		});
+	}
+	/** Acknowledge a host save: clears dirty and emits `dirtyChange(false)`. */
+	markClean() {
+		this.session.markClean();
+	}
+	update(options) {
+		this.latest.set(options);
+		this.session.update({
+			...options,
+			onDocumentChange: (document) => {
+				this.documentChange.emit(document);
+				options.onDocumentChange?.(document);
+			},
+			onDirtyChange: (dirty) => {
+				this.dirtyChange.emit(dirty);
+				options.onDirtyChange?.(dirty);
+			},
+			onDocumentError: (error) => {
+				this.documentError.emit(error);
+				options.onDocumentError?.(error);
+			}
+		});
+	}
+};
+ViewerBuildingBlocks = __decorate([Injectable()], ViewerBuildingBlocks);
+/** Connect host signals to the scoped owner within an Angular injection context. */
+function createViewerBuildingBlocks(options = () => ({})) {
+	const blocks = inject(ViewerBuildingBlocks);
+	effect(() => {
+		const next = options();
+		untracked(() => blocks.update(next));
+	});
+	return blocks;
+}
+var ViewerBuildingBlocksComponent = class ViewerBuildingBlocksComponent {
+	blocks = inject(ViewerBuildingBlocks);
+	content;
+	/** 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;
+	ngOnInit() {
+		this.ngOnChanges();
+	}
+	ngOnChanges() {
+		this.blocks.update({
+			content: this.content,
+			canEdit: this.canEdit,
+			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);
+ViewerBuildingBlocksComponent = __decorate([Component({
+	selector: "visio-building-blocks",
+	standalone: true,
+	template: "<ng-content />",
+	providers: [ViewerBuildingBlocks]
+})], ViewerBuildingBlocksComponent);
+var DiagramCanvasComponent = class DiagramCanvasComponent {
+	blocks = inject(ViewerBuildingBlocks);
+	host = inject(ElementRef);
+	ngAfterViewInit() {
+		this.blocks.canvasProps.mount(this.host.nativeElement);
+	}
+	ngOnDestroy() {
+		this.blocks.canvasProps.mount(null);
+	}
+};
+DiagramCanvasComponent = __decorate([Component({
+	selector: "visio-diagram-canvas",
+	standalone: true,
+	template: ""
+})], 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">
+		@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 {
+	host = inject(ElementRef);
+	ngAfterViewInit() {
+		prepareDiagramBlock(this.host.nativeElement.querySelector("select"), "tabs");
+	}
+	blocks = inject(ViewerBuildingBlocks);
+	change(event) {
+		this.blocks.toolbarProps().onPageChange(Number(event.target.value));
+	}
+};
+PageNavigationComponent = __decorate([Component({
+	selector: "visio-page-navigation",
+	standalone: true,
+	template: `<select
+		[attr.aria-label]="blocks.toolbarProps().labels['Page']"
+		[value]="blocks.toolbarProps().pageIndex"
+		(change)="change($event)"
+	>
+		@for (page of blocks.toolbarProps().pages; track page.id; let index = $index) {
+			<option [value]="index">{{ page.name }}</option>
+		}
+	</select>`
+})], PageNavigationComponent);
+var InspectorComponent = class InspectorComponent {
+	blocks = inject(ViewerBuildingBlocks);
+	host = inject(ElementRef);
+	stop;
+	ngAfterViewInit() {
+		this.stop = buildingBlock("mountDiagramInspector")(this.host.nativeElement, this.blocks.controller);
+	}
+	ngOnDestroy() {
+		this.stop?.();
+	}
+};
+InspectorComponent = __decorate([Component({
+	selector: "visio-diagram-inspector",
+	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, ShapesPaneComponent, ToolbarComponent, ViewerBuildingBlocks, ViewerBuildingBlocksComponent, VisioViewerComponent, createViewerBuildingBlocks };

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

@@ -0,0 +1,148 @@
+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 latest;
+    readonly toolbarProps: import("@angular/core").Signal<{
+        labels: Readonly<Record<"Arc" | "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" | "Undo" | "Ungroup" | "Zoom In" | "Zoom Out", string>>;
+        mode: import("ooxml-ui/visio").DiagramMode;
+        canEdit: boolean;
+        pageIndex: number;
+        pages: {
+            id: string;
+            name: string;
+        }[];
+        zoom: number;
+        selection: readonly import("ooxml-ui/visio").VisioShapeSelection[];
+        canUndo: boolean;
+        canRedo: boolean;
+        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>;
+    readonly documentError: EventEmitter<Error>;
+    readonly canvasProps: {
+        mount: (node: HTMLElement | null) => void;
+    };
+    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. */
+export declare function createViewerBuildingBlocks(options?: () => BuildingBlockOptions): ViewerBuildingBlocks;
+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>;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+}
+export declare class DiagramCanvasComponent implements AfterViewInit, OnDestroy {
+    readonly blocks: ViewerBuildingBlocks;
+    private readonly host;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+}
+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;
+    ngAfterViewInit(): void;
+    readonly blocks: ViewerBuildingBlocks;
+    change(event: Event): void;
+}
+export declare class InspectorComponent implements AfterViewInit, OnDestroy {
+    readonly blocks: ViewerBuildingBlocks;
+    private readonly host;
+    private stop;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+}
+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/angular/src/index.d.ts

@@ -1,3 +1,4 @@
 export * from '../../../src/index.js';
 export * from 'visio-core';
 export * from '../../bindings/src/angular.js';
+export * from './building-blocks.js';

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

@@ -6,13 +6,15 @@ export declare class VisioViewerComponent implements AfterViewInit, OnChanges, O
     pageIndex?: number;
     zoom?: number;
     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>;
@@ -20,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

@@ -0,0 +1,95 @@
+import { ViewerController, type VsdxSource } from 'ooxml-ui/visio';
+import * as ui from 'ooxml-ui/visio';
+/** 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' | '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(initial?: BuildingBlockOptions): {
+    controller: ViewerController;
+    mount(node: HTMLElement | null): void;
+    /** Flat control props; pass the framework's latest options so callbacks stay current. */
+    toolbar(latest?: BuildingBlockOptions): {
+        labels: Readonly<Record<"Arc" | "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" | "Undo" | "Ungroup" | "Zoom In" | "Zoom Out", string>>;
+        mode: ui.DiagramMode;
+        canEdit: boolean;
+        pageIndex: number;
+        pages: {
+            id: string;
+            name: string;
+        }[];
+        zoom: number;
+        selection: readonly import("ooxml-core/visio/ui").VisioShapeSelection[];
+        canUndo: boolean;
+        canRedo: boolean;
+        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, 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.7.4",
+	"version": "1.0.0",
 	"description": "Local-first Visio viewer for angular",
 	"homepage": "https://christophervr.github.io/ooxml/visio/",
 	"bugs": {
@@ -31,11 +31,16 @@
 	},
 	"dependencies": {
 		"emf-converter": "4.21.0",
-		"ooxml-core": "^1.19.2",
-		"ooxml-ui": "^1.18.3",
-		"visio-core": "^0.4.1"
+		"ooxml-core": "^1.22.0",
+		"ooxml-ui": "^1.21.0",
+		"visio-core": "^1.0.0"
+	},
+	"devDependencies": {
+		"@angular/compiler": "^22.2.3",
+		"@angular/core": "^22.2.3",
+		"@angular/platform-browser": "^22.2.3"
 	},
 	"peerDependencies": {
-		"@angular/core": "^21.0.0"
+		"@angular/core": "^21.0.0 || ^22.0.0"
 	}
 }