visio-svelte-viewer 0.7.4 → 0.8.0

package/dist/DiagramCanvas.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+ let { mount, class: className }: { mount(node: HTMLElement | null): void; class?: string } = $props();
+ let host: HTMLDivElement;
+ $effect(() => { const current = mount; current(host); return () => current(null); });
+</script>
+<div bind:this={host} class={className}></div>

package/dist/DiagramCanvas.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte';
+import type { ViewerController, DiagramToolbarProps } from './runtime.js';
+declare const component: Component<{ mount(node: HTMLElement | null): void; class?: string }>;
+export default component;

package/dist/Inspector.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+ import { buildingBlock, type ViewerController } from './runtime.js';
+ let { controller }: { controller: ViewerController } = $props();
+ let host: HTMLDivElement;
+ $effect(() => buildingBlock('mountDiagramInspector')(host, controller));
+</script>
+<div bind:this={host}></div>

package/dist/Inspector.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte';
+import type { ViewerController, DiagramToolbarProps } from './runtime.js';
+declare const component: Component<{ controller: ViewerController }>;
+export default component;

package/dist/PageNavigation.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+ import { prepareDiagramBlock } from './runtime.js';
+ function theme(host: HTMLElement) { prepareDiagramBlock(host, 'tabs'); }
+ import type { DiagramToolbarProps } from './runtime.js';
+ let { toolbarProps }: { toolbarProps: DiagramToolbarProps } = $props();
+</script>
+<select use:theme aria-label={toolbarProps.labels.Page} value={toolbarProps.pageIndex} onchange={event => toolbarProps.onPageChange(Number(event.currentTarget.value))}>
+ {#each toolbarProps.pages as page, index (page.id)}<option value={index}>{page.name}</option>{/each}
+</select>

package/dist/PageNavigation.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte';
+import type { ViewerController, DiagramToolbarProps } from './runtime.js';
+declare const component: Component<{ toolbarProps: DiagramToolbarProps }>;
+export default component;

package/dist/Toolbar.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+ import { prepareDiagramBlock } from './runtime.js';
+ function theme(host: HTMLElement) { prepareDiagramBlock(host, 'toolbar'); }
+ import type { DiagramToolbarProps } from './runtime.js';
+ let { toolbarProps }: { toolbarProps: DiagramToolbarProps } = $props();
+</script>
+<div role="toolbar" use:theme>
+ <button type="button" disabled={!toolbarProps.canUndo} onclick={() => void toolbarProps.onUndo()}>{toolbarProps.labels.Undo}</button>
+ <button type="button" disabled={!toolbarProps.canRedo} onclick={() => void toolbarProps.onRedo()}>{toolbarProps.labels.Redo}</button>
+ <button type="button" onclick={toolbarProps.onFit}>{toolbarProps.labels['Fit to Window']}</button>
+</div>

package/dist/Toolbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte';
+import type { ViewerController, DiagramToolbarProps } from './runtime.js';
+declare const component: Component<{ toolbarProps: DiagramToolbarProps }>;
+export default component;

package/dist/VisioViewer.svelte

@@ -3,8 +3,8 @@
   import { readonly, writable } from 'svelte/store';
   import { mountFrameworkViewer, viewerHandle, viewerOptions, viewerStateSource, type ViewerState, type MountedViewer, type ViewerProps, type VsdxSource, type VisioEdit, type VisioShapeSelection, type SvgExportOptions, type CurrentPagePrintSnapshotOptions } from './runtime.js';
   type Props = ViewerProps & { class?: string; style?: string; 'aria-label'?: string };
-  let { document, pageIndex, zoom, showToolbar, ribbonAddIns, events, class: className, style, 'aria-label': ariaLabel }: Props = $props();
-  const options = $derived({ document, pageIndex, zoom, showToolbar, ribbonAddIns, events } satisfies Required<ViewerProps>);
+  let { document, pageIndex, zoom, showToolbar, canEdit, ribbonAddIns, events, class: className, style, 'aria-label': ariaLabel }: Props = $props();
+  const options = $derived({ document, pageIndex, zoom, showToolbar, canEdit, ribbonAddIns, events } satisfies Required<ViewerProps>);
   let binding: MountedViewer | undefined;
   const handle = viewerHandle(() => binding);
   // The component owns its state store, so subscribers made before mount still see updates.

package/dist/index.d.ts

@@ -1,3 +1,8 @@
 export * from './types/src/index.js';
 export * from 'visio-core';
 export { default, default as VisioViewer } from './VisioViewer.svelte';
+export * from './types/packages/svelte/src/building-blocks.js';
+export { default as DiagramCanvas } from './DiagramCanvas.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as PageNavigation } from './PageNavigation.svelte';
+export { default as Inspector } from './Inspector.svelte';

package/dist/index.js

@@ -1,7 +1,10 @@
-import { mountViewer, propertyKeys } from "ooxml-ui/visio";
+import * as ui from "ooxml-ui/visio";
+import { ViewerController, createWorkerParser, mountViewer, propertyKeys } from "ooxml-ui/visio";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-import { readonly, writable } from "svelte/store";
+import { derived, get, readonly, writable } from "svelte/store";
+import { onDestroy } from "svelte";
+import * as officeTheme from "ooxml-ui/theme";
 export * from "ooxml-ui/visio";
 export * from "visio-core";
 //#region packages/bindings/src/common.ts
@@ -146,7 +149,7 @@ function viewerStateSource(current) {
 }
 //#endregion
 //#region packages/bindings/src/VisioViewer.svelte
-var root = $.from_html(`<div></div>`);
+var root$4 = $.from_html(`<div></div>`);
 function VisioViewer($$anchor, $$props) {
 	$.push($$props, true);
 	const options = $.derived(() => ({
@@ -154,6 +157,7 @@ function VisioViewer($$anchor, $$props) {
 		pageIndex: $$props.pageIndex,
 		zoom: $$props.zoom,
 		showToolbar: $$props.showToolbar,
+		canEdit: $$props.canEdit,
 		ribbonAddIns: $$props.ribbonAddIns,
 		events: $$props.events
 	}));
@@ -269,7 +273,7 @@ function VisioViewer($$anchor, $$props) {
 		exportSvg,
 		createPrintSnapshot
 	};
-	var div = root();
+	var div = root$4();
 	$.action(div, ($$node, $$action_arg) => attach?.($$node, $$action_arg), () => $.get(options));
 	$.template_effect(() => {
 		$.set_class(div, 1, $.clsx($$props.class));
@@ -280,4 +284,201 @@ function VisioViewer($$anchor, $$props) {
 	return $.pop($$exports);
 }
 //#endregion
-export { VisioViewer, VisioViewer as default };
+//#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;
+}
+/** Framework-neutral ownership only; each adapter supplies its own reactive state. */
+function createBuildingBlockSession() {
+	const controller = new ViewerController(createWorkerParser());
+	let options = {};
+	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);
+		},
+		toolbar(locale = options.locale) {
+			return buildingBlock("diagramToolbarProps")(controller, fit, locale);
+		},
+		update(next) {
+			if (destroyed) return;
+			options = next;
+			controller.canEdit = next.canEdit !== false;
+			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/svelte/src/building-blocks.ts
+/** Call during component initialization. Reactive option changes use blocks.update(options). */
+function createViewerBuildingBlocks(options = {}) {
+	const source = "subscribe" in options ? options : void 0;
+	const initial = source ? get(source) : options;
+	const session = createBuildingBlockSession();
+	const state = writable(session.controller.state);
+	const locale = writable(initial.locale);
+	const stop = session.controller.subscribe((value) => state.set(value));
+	let stopOptions = () => {};
+	onDestroy(() => {
+		stopOptions();
+		stop();
+		session.destroy();
+	});
+	const update = (next) => {
+		locale.set(next.locale);
+		session.update(next);
+	};
+	if (source) stopOptions = source.subscribe(update);
+	else update(initial);
+	return {
+		controller: session.controller,
+		state: { subscribe: state.subscribe },
+		toolbarProps: derived([state, locale], ([, language]) => session.toolbar(language)),
+		loading: derived(state, (value) => value.loading),
+		error: derived(state, (value) => value.error ?? value.edit.error),
+		mode: derived(state, (value) => value.canEdit ? "edit" : "view"),
+		canvasProps: { mount: session.mount },
+		inspectorProps: { controller: session.controller },
+		update
+	};
+}
+//#endregion
+//#region packages/svelte/src/DiagramCanvas.svelte
+var root$3 = $.from_html(`<div></div>`);
+function DiagramCanvas($$anchor, $$props) {
+	$.push($$props, true);
+	let host;
+	$.user_effect(() => {
+		const current = $$props.mount;
+		current(host);
+		return () => current(null);
+	});
+	var div = root$3();
+	$.bind_this(div, ($$value) => host = $$value, () => host);
+	$.template_effect(() => $.set_class(div, 1, $.clsx($$props.class)));
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region packages/svelte/src/Toolbar.svelte
+var root$2 = $.from_html(`<div role="toolbar"><button type="button"> </button> <button type="button"> </button> <button type="button"> </button></div>`);
+function Toolbar($$anchor, $$props) {
+	$.push($$props, true);
+	function theme(host) {
+		prepareDiagramBlock(host, "toolbar");
+	}
+	var div = root$2();
+	var button = $.child(div);
+	var text = $.only_child(button, true);
+	var button_1 = $.sibling(button, 2);
+	var text_1 = $.only_child(button_1, true);
+	var button_2 = $.sibling(button_1, 2);
+	var text_2 = $.only_child(button_2, true);
+	$.reset(div);
+	$.action(div, ($$node) => theme?.($$node));
+	$.template_effect(() => {
+		button.disabled = !$$props.toolbarProps.canUndo;
+		$.set_text(text, $$props.toolbarProps.labels.Undo);
+		button_1.disabled = !$$props.toolbarProps.canRedo;
+		$.set_text(text_1, $$props.toolbarProps.labels.Redo);
+		$.set_text(text_2, $$props.toolbarProps.labels["Fit to Window"]);
+	});
+	$.delegated("click", button, () => void $$props.toolbarProps.onUndo());
+	$.delegated("click", button_1, () => void $$props.toolbarProps.onRedo());
+	$.delegated("click", button_2, function(...$$args) {
+		$$props.toolbarProps.onFit?.apply(this, $$args);
+	});
+	$.append($$anchor, div);
+	$.pop();
+}
+$.delegate(["click"]);
+//#endregion
+//#region packages/svelte/src/PageNavigation.svelte
+var root$1 = $.from_html(`<option> </option>`);
+var root_1 = $.from_html(`<select></select>`);
+function PageNavigation($$anchor, $$props) {
+	$.push($$props, true);
+	function theme(host) {
+		prepareDiagramBlock(host, "tabs");
+	}
+	var select = root_1();
+	$.each(select, 23, () => $$props.toolbarProps.pages, (page) => page.id, ($$anchor, page, index) => {
+		var option = root$1();
+		var text = $.only_child(option, true);
+		var option_value = {};
+		$.template_effect(() => {
+			$.set_text(text, $.get(page).name);
+			if (option_value !== (option_value = $.get(index))) option.value = (option.__value = option_value) ?? "";
+		});
+		$.append($$anchor, option);
+	});
+	$.reset(select);
+	$.action(select, ($$node) => theme?.($$node));
+	var select_value;
+	$.init_select(select);
+	$.template_effect(() => {
+		$.set_attribute(select, "aria-label", $$props.toolbarProps.labels.Page);
+		if (select_value !== (select_value = $$props.toolbarProps.pageIndex)) select.value = (select.__value = select_value) ?? "", $.select_option(select, select_value);
+	});
+	$.delegated("change", select, (event) => $$props.toolbarProps.onPageChange(Number(event.currentTarget.value)));
+	$.append($$anchor, select);
+	$.pop();
+}
+$.delegate(["change"]);
+//#endregion
+//#region packages/svelte/src/Inspector.svelte
+var root = $.from_html(`<div></div>`);
+function Inspector($$anchor, $$props) {
+	$.push($$props, true);
+	let host;
+	$.user_effect(() => buildingBlock("mountDiagramInspector")(host, $$props.controller));
+	var div = root();
+	$.bind_this(div, ($$value) => host = $$value, () => host);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+export { DiagramCanvas, Inspector, PageNavigation, Toolbar, VisioViewer, VisioViewer as default, createViewerBuildingBlocks };

package/dist/index.server.js

@@ -1,6 +1,9 @@
-import "ooxml-ui/visio";
+import * as ui from "ooxml-ui/visio";
+import { ViewerController, createWorkerParser } from "ooxml-ui/visio";
 import * as $ from "svelte/internal/server";
-import { readonly, writable } from "svelte/store";
+import { derived, get, readonly, writable } from "svelte/store";
+import { onDestroy } from "svelte";
+import "ooxml-ui/theme";
 export * from "ooxml-ui/visio";
 export * from "visio-core";
 //#region packages/bindings/src/common.ts
@@ -84,12 +87,13 @@ function viewerHandle(current) {
 //#region packages/bindings/src/VisioViewer.svelte
 function VisioViewer($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
-		let { document, pageIndex, zoom, showToolbar, ribbonAddIns, events, class: className, style, "aria-label": ariaLabel } = $$props;
+		let { document, pageIndex, zoom, showToolbar, canEdit, ribbonAddIns, events, class: className, style, "aria-label": ariaLabel } = $$props;
 		$.derived(() => ({
 			document,
 			pageIndex,
 			zoom,
 			showToolbar,
+			canEdit,
 			ribbonAddIns,
 			events
 		}));
@@ -191,4 +195,145 @@ function VisioViewer($$renderer, $$props) {
 	});
 }
 //#endregion
-export { VisioViewer, VisioViewer as default };
+//#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;
+}
+/** Framework-neutral ownership only; each adapter supplies its own reactive state. */
+function createBuildingBlockSession() {
+	const controller = new ViewerController(createWorkerParser());
+	let options = {};
+	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);
+		},
+		toolbar(locale = options.locale) {
+			return buildingBlock("diagramToolbarProps")(controller, fit, locale);
+		},
+		update(next) {
+			if (destroyed) return;
+			options = next;
+			controller.canEdit = next.canEdit !== false;
+			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();
+		}
+	};
+}
+//#endregion
+//#region packages/svelte/src/building-blocks.ts
+/** Call during component initialization. Reactive option changes use blocks.update(options). */
+function createViewerBuildingBlocks(options = {}) {
+	const source = "subscribe" in options ? options : void 0;
+	const initial = source ? get(source) : options;
+	const session = createBuildingBlockSession();
+	const state = writable(session.controller.state);
+	const locale = writable(initial.locale);
+	const stop = session.controller.subscribe((value) => state.set(value));
+	let stopOptions = () => {};
+	onDestroy(() => {
+		stopOptions();
+		stop();
+		session.destroy();
+	});
+	const update = (next) => {
+		locale.set(next.locale);
+		session.update(next);
+	};
+	if (source) stopOptions = source.subscribe(update);
+	else update(initial);
+	return {
+		controller: session.controller,
+		state: { subscribe: state.subscribe },
+		toolbarProps: derived([state, locale], ([, language]) => session.toolbar(language)),
+		loading: derived(state, (value) => value.loading),
+		error: derived(state, (value) => value.error ?? value.edit.error),
+		mode: derived(state, (value) => value.canEdit ? "edit" : "view"),
+		canvasProps: { mount: session.mount },
+		inspectorProps: { controller: session.controller },
+		update
+	};
+}
+//#endregion
+//#region packages/svelte/src/DiagramCanvas.svelte
+function DiagramCanvas($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let { mount, class: className } = $$props;
+		$$renderer.push(`<div${$.attr_class($.clsx(className))}></div>`);
+	});
+}
+//#endregion
+//#region packages/svelte/src/Toolbar.svelte
+function Toolbar($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let { toolbarProps } = $$props;
+		$$renderer.push(`<div role="toolbar"><button type="button"${$.attr("disabled", !toolbarProps.canUndo, true)}>${$.escape(toolbarProps.labels.Undo)}</button> <button type="button"${$.attr("disabled", !toolbarProps.canRedo, true)}>${$.escape(toolbarProps.labels.Redo)}</button> <button type="button">${$.escape(toolbarProps.labels["Fit to Window"])}</button></div>`);
+	});
+}
+//#endregion
+//#region packages/svelte/src/PageNavigation.svelte
+function PageNavigation($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let { toolbarProps } = $$props;
+		$$renderer.select({
+			"aria-label": toolbarProps.labels.Page,
+			value: toolbarProps.pageIndex,
+			onchange: (event) => toolbarProps.onPageChange(Number(event.currentTarget.value))
+		}, ($$renderer) => {
+			$$renderer.push(`<!--[-->`);
+			const each_array = $.ensure_array_like(toolbarProps.pages);
+			for (let index = 0, $$length = each_array.length; index < $$length; index++) {
+				let page = each_array[index];
+				$$renderer.option({ value: index }, ($$renderer) => {
+					$$renderer.push(`${$.escape(page.name)}`);
+				});
+			}
+			$$renderer.push(`<!--]-->`);
+		});
+	});
+}
+//#endregion
+//#region packages/svelte/src/Inspector.svelte
+function Inspector($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let { controller } = $$props;
+		$$renderer.push(`<div></div>`);
+	});
+}
+//#endregion
+export { DiagramCanvas, Inspector, PageNavigation, Toolbar, VisioViewer, VisioViewer as default, createViewerBuildingBlocks };

package/dist/index.svelte.js

@@ -1,2 +1,7 @@
 export * from './runtime.js';
 export { default, default as VisioViewer } from './VisioViewer.svelte';
+export { createViewerBuildingBlocks } from './runtime.js';
+export { default as DiagramCanvas } from './DiagramCanvas.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as PageNavigation } from './PageNavigation.svelte';
+export { default as Inspector } from './Inspector.svelte';

package/dist/runtime.d.ts

@@ -1,3 +1,5 @@
 export * from './types/packages/bindings/src/common.js';
+export * from './types/packages/bindings/src/building-blocks.js';
+export * from './types/packages/svelte/src/building-blocks.js';
 export * from './types/src/index.js';
 export * from 'visio-core';

package/dist/runtime.js

@@ -1,4 +1,8 @@
-import { ViewerController, eventKeys, mountViewer, propertyKeys } from "ooxml-ui/visio";
+import * as ui from "ooxml-ui/visio";
+import { ViewerController, ViewerController as ViewerController$1, createWorkerParser, eventKeys, mountViewer, propertyKeys } from "ooxml-ui/visio";
+import * as officeTheme from "ooxml-ui/theme";
+import { onDestroy } from "svelte";
+import { derived, get, writable } from "svelte/store";
 export * from "ooxml-ui/visio";
 export * from "visio-core";
 //#region packages/bindings/src/common.ts
@@ -158,4 +162,106 @@ function withEventEmitter(props, emit) {
 	};
 }
 //#endregion
-export { ViewerController, eventKeys, mountFrameworkViewer, mountViewer, propertyKeys, viewerHandle, viewerOptions, viewerStateSource, withEventEmitter };
+//#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;
+}
+/** Framework-neutral ownership only; each adapter supplies its own reactive state. */
+function createBuildingBlockSession() {
+	const controller = new ViewerController$1(createWorkerParser());
+	let options = {};
+	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);
+		},
+		toolbar(locale = options.locale) {
+			return buildingBlock("diagramToolbarProps")(controller, fit, locale);
+		},
+		update(next) {
+			if (destroyed) return;
+			options = next;
+			controller.canEdit = next.canEdit !== false;
+			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/svelte/src/building-blocks.ts
+/** Call during component initialization. Reactive option changes use blocks.update(options). */
+function createViewerBuildingBlocks(options = {}) {
+	const source = "subscribe" in options ? options : void 0;
+	const initial = source ? get(source) : options;
+	const session = createBuildingBlockSession();
+	const state = writable(session.controller.state);
+	const locale = writable(initial.locale);
+	const stop = session.controller.subscribe((value) => state.set(value));
+	let stopOptions = () => {};
+	onDestroy(() => {
+		stopOptions();
+		stop();
+		session.destroy();
+	});
+	const update = (next) => {
+		locale.set(next.locale);
+		session.update(next);
+	};
+	if (source) stopOptions = source.subscribe(update);
+	else update(initial);
+	return {
+		controller: session.controller,
+		state: { subscribe: state.subscribe },
+		toolbarProps: derived([state, locale], ([, language]) => session.toolbar(language)),
+		loading: derived(state, (value) => value.loading),
+		error: derived(state, (value) => value.error ?? value.edit.error),
+		mode: derived(state, (value) => value.canEdit ? "edit" : "view"),
+		canvasProps: { mount: session.mount },
+		inspectorProps: { controller: session.controller },
+		update
+	};
+}
+//#endregion
+export { ViewerController, buildingBlock, createBuildingBlockSession, createViewerBuildingBlocks, eventKeys, mountFrameworkViewer, mountViewer, prepareDiagramBlock, propertyKeys, viewerHandle, viewerOptions, viewerStateSource, withEventEmitter };

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

@@ -0,0 +1,53 @@
+import { ViewerController, type VsdxSource } from 'ooxml-ui/visio';
+import * as ui from 'ooxml-ui/visio';
+export interface BuildingBlockOptions {
+    content?: VsdxSource | undefined;
+    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'>;
+export declare function buildingBlock<K extends keyof Api>(key: K): Api[K];
+/** Framework-neutral ownership only; each adapter supplies its own reactive state. */
+export declare function createBuildingBlockSession(): {
+    controller: ViewerController;
+    mount(node: HTMLElement | null): void;
+    toolbar(locale?: string | undefined): {
+        labels: {
+            [k: string]: string;
+        };
+        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;
+        onPageChange: (index: number) => void;
+        onZoomChange: (zoom: number) => void;
+        onFit: () => void;
+        onUndo: () => Promise<void>;
+        onRedo: () => Promise<void>;
+        onDuplicate: () => Promise<void>;
+        onGroup: () => Promise<void>;
+        onUngroup: () => Promise<void>;
+        onTextChange: (pageId: string, shapeId: string, text: string) => Promise<void>;
+        onSearchChange: (query: string) => void;
+        onNextSearchResult: () => void;
+        onPreviousSearchResult: () => void;
+    };
+    update(next: BuildingBlockOptions): void;
+    destroy(): void;
+};
+export type BuildingBlockSession = ReturnType<typeof createBuildingBlockSession>;
+export type { DiagramToolbarProps, 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/svelte/src/building-blocks.d.ts

@@ -0,0 +1,50 @@
+import { type Readable } from 'svelte/store';
+import { type BuildingBlockOptions } from '../../bindings/src/building-blocks.js';
+/** Call during component initialization. Reactive option changes use blocks.update(options). */
+export declare function createViewerBuildingBlocks(options?: BuildingBlockOptions | Readable<BuildingBlockOptions>): {
+    controller: import("ooxml-ui/visio").ViewerController;
+    state: {
+        subscribe: (this: void, run: import("svelte/store").Subscriber<import("ooxml-ui/visio").ViewerState>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    };
+    toolbarProps: Readable<{
+        labels: {
+            [k: string]: string;
+        };
+        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;
+        onPageChange: (index: number) => void;
+        onZoomChange: (zoom: number) => void;
+        onFit: () => void;
+        onUndo: () => Promise<void>;
+        onRedo: () => Promise<void>;
+        onDuplicate: () => Promise<void>;
+        onGroup: () => Promise<void>;
+        onUngroup: () => Promise<void>;
+        onTextChange: (pageId: string, shapeId: string, text: string) => Promise<void>;
+        onSearchChange: (query: string) => void;
+        onNextSearchResult: () => void;
+        onPreviousSearchResult: () => void;
+    }>;
+    loading: Readable<boolean>;
+    error: Readable<Error | null>;
+    mode: Readable<"edit" | "view">;
+    canvasProps: {
+        mount: (node: HTMLElement | null) => void;
+    };
+    inspectorProps: {
+        controller: import("ooxml-ui/visio").ViewerController;
+    };
+    update: (next: BuildingBlockOptions) => void;
+};
+export type { BuildingBlockOptions, DiagramToolbarProps } from '../../bindings/src/building-blocks.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "visio-svelte-viewer",
-	"version": "0.7.4",
+	"version": "0.8.0",
 	"description": "Local-first Visio viewer for svelte",
 	"homepage": "https://christophervr.github.io/ooxml/visio/",
 	"bugs": {
@@ -38,9 +38,9 @@
 	},
 	"dependencies": {
 		"emf-converter": "4.21.0",
-		"ooxml-core": "^1.19.2",
-		"ooxml-ui": "^1.18.3",
-		"visio-core": "^0.4.1"
+		"ooxml-core": "^1.20.0",
+		"ooxml-ui": "^1.19.0",
+		"visio-core": "^0.5.0"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"