visio-svelte-viewer 0.7.4 → 1.0.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, ToolbarGroupId } 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, ToolbarGroupId } 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, ToolbarGroupId } from './runtime.js';
+declare const component: Component<{ toolbarProps: DiagramToolbarProps }>;
+export default component;

package/dist/ShapesPane.svelte

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

package/dist/ShapesPane.svelte.d.ts

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

package/dist/Toolbar.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+ import { prepareDiagramBlock } from './runtime.js';
+ import { toolbarGroups, type ToolbarGroupId } from './runtime.js';
+ function theme(host: HTMLElement) { prepareDiagramBlock(host, 'toolbar'); }
+ import type { DiagramToolbarProps } from './runtime.js';
+ let { toolbarProps, include }: { toolbarProps: DiagramToolbarProps; include?: readonly ToolbarGroupId[] } = $props();
+ const groups = $derived(toolbarGroups(toolbarProps, include));
+</script>
+<div role="toolbar" use:theme>
+ {#each groups as group (group.id)}
+  <span data-group={group.id}>
+   {#each group.controls as control (control.id)}
+    {#if control.kind === 'text'}
+     <span data-control={control.id}>{control.text}</span>
+    {:else if control.kind === 'button'}
+     <button type="button" data-control={control.id} disabled={control.disabled} aria-pressed={control.pressed} onclick={() => control.run()}>{control.label}</button>
+    {:else}
+     <span data-control="search">
+      <input type="search" aria-label={control.label} placeholder={control.label} value={control.query} oninput={(event) => control.change(event.currentTarget.value)} />
+      <span aria-live="polite">{control.summary}</span>
+      <button type="button" data-control={control.previous.id} disabled={control.previous.disabled} onclick={() => control.previous.run()}>{control.previous.label}</button>
+      <button type="button" data-control={control.next.id} disabled={control.next.disabled} onclick={() => control.next.run()}>{control.next.label}</button>
+     </span>
+    {/if}
+   {/each}
+  </span>
+ {/each}
+</div>

package/dist/Toolbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte';
+import type { ViewerController, DiagramToolbarProps, ToolbarGroupId } from './runtime.js';
+declare const component: Component<{ toolbarProps: DiagramToolbarProps; include?: readonly ToolbarGroupId[] }>;
+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, collaboration, events, class: className, style, 'aria-label': ariaLabel }: Props = $props();
+  const options = $derived({ document, pageIndex, zoom, showToolbar, canEdit, ribbonAddIns, collaboration, 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,9 @@
 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';
+export { default as ShapesPane } from './ShapesPane.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$5 = $.from_html(`<div></div>`);
 function VisioViewer($$anchor, $$props) {
 	$.push($$props, true);
 	const options = $.derived(() => ({
@@ -154,7 +157,9 @@ function VisioViewer($$anchor, $$props) {
 		pageIndex: $$props.pageIndex,
 		zoom: $$props.zoom,
 		showToolbar: $$props.showToolbar,
+		canEdit: $$props.canEdit,
 		ribbonAddIns: $$props.ribbonAddIns,
+		collaboration: $$props.collaboration,
 		events: $$props.events
 	}));
 	let binding;
@@ -269,7 +274,7 @@ function VisioViewer($$anchor, $$props) {
 		exportSvg,
 		createPrintSnapshot
 	};
-	var div = root();
+	var div = root$5();
 	$.action(div, ($$node, $$action_arg) => attach?.($$node, $$action_arg), () => $.get(options));
 	$.template_effect(() => {
 		$.set_class(div, 1, $.clsx($$props.class));
@@ -280,4 +285,367 @@ 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;
+}
+/** 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/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(initial);
+	const state = writable(session.controller.state);
+	const latest = writable(initial);
+	const stop = session.controller.subscribe((value) => state.set(value));
+	let stopOptions = () => {};
+	onDestroy(() => {
+		stopOptions();
+		stop();
+		session.destroy();
+	});
+	const update = (next) => {
+		latest.set(next);
+		session.update(next);
+	};
+	if (source) stopOptions = source.subscribe(update);
+	else update(initial);
+	return {
+		controller: session.controller,
+		state: { subscribe: state.subscribe },
+		toolbarProps: derived([state, latest], ([, next]) => session.toolbar(next)),
+		loading: derived(state, (value) => value.loading),
+		error: derived(state, (value) => value.error ?? value.edit.error),
+		/** Effective permission: host `canEdit` and a drawing that can be saved back. */
+		mode: derived(state, (value) => effectiveMode(value)),
+		canvasProps: { mount: session.mount },
+		inspectorProps: { controller: session.controller },
+		shapesProps: derived(latest, (next) => ({
+			controller: session.controller,
+			locale: next.locale
+		})),
+		/** Acknowledge a host save: clears dirty and fires `onDirtyChange(false)`. */
+		markClean: () => session.markClean(),
+		update
+	};
+}
+//#endregion
+//#region packages/svelte/src/DiagramCanvas.svelte
+var root$4 = $.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$4();
+	$.bind_this(div, ($$value) => host = $$value, () => host);
+	$.template_effect(() => $.set_class(div, 1, $.clsx($$props.class)));
+	$.append($$anchor, div);
+	$.pop();
+}
+//#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/svelte/src/Toolbar.svelte
+var root$3 = $.from_html(`<span> </span>`);
+var root_1$1 = $.from_html(`<button type="button"> </button>`);
+var root_2 = $.from_html(`<span data-control="search"><input type="search"/> <span aria-live="polite"> </span> <button type="button"> </button> <button type="button"> </button></span>`);
+var root_3 = $.from_html(`<span></span>`);
+var root_4 = $.from_html(`<div role="toolbar"></div>`);
+function Toolbar($$anchor, $$props) {
+	$.push($$props, true);
+	function theme(host) {
+		prepareDiagramBlock(host, "toolbar");
+	}
+	const groups = $.derived(() => toolbarGroups($$props.toolbarProps, $$props.include));
+	var div = root_4();
+	$.each(div, 21, () => $.get(groups), (group) => group.id, ($$anchor, group) => {
+		var span = root_3();
+		$.each(span, 21, () => $.get(group).controls, (control) => control.id, ($$anchor, control) => {
+			var fragment = $.comment();
+			var node = $.first_child(fragment);
+			var consequent = ($$anchor) => {
+				var span_1 = root$3();
+				var text = $.only_child(span_1, true);
+				$.template_effect(() => {
+					$.set_attribute(span_1, "data-control", $.get(control).id);
+					$.set_text(text, $.get(control).text);
+				});
+				$.append($$anchor, span_1);
+			};
+			var consequent_1 = ($$anchor) => {
+				var button = root_1$1();
+				var text_1 = $.only_child(button, true);
+				$.template_effect(() => {
+					$.set_attribute(button, "data-control", $.get(control).id);
+					button.disabled = $.get(control).disabled;
+					$.set_attribute(button, "aria-pressed", $.get(control).pressed);
+					$.set_text(text_1, $.get(control).label);
+				});
+				$.delegated("click", button, () => $.get(control).run());
+				$.append($$anchor, button);
+			};
+			var alternate = ($$anchor) => {
+				var span_2 = root_2();
+				var input = $.child(span_2);
+				$.remove_input_defaults(input);
+				var span_3 = $.sibling(input, 2);
+				var text_2 = $.only_child(span_3, true);
+				var button_1 = $.sibling(span_3, 2);
+				var text_3 = $.only_child(button_1, true);
+				var button_2 = $.sibling(button_1, 2);
+				var text_4 = $.only_child(button_2, true);
+				$.reset(span_2);
+				$.template_effect(() => {
+					$.set_attribute(input, "aria-label", $.get(control).label);
+					$.set_attribute(input, "placeholder", $.get(control).label);
+					$.set_value(input, $.get(control).query);
+					$.set_text(text_2, $.get(control).summary);
+					$.set_attribute(button_1, "data-control", $.get(control).previous.id);
+					button_1.disabled = $.get(control).previous.disabled;
+					$.set_text(text_3, $.get(control).previous.label);
+					$.set_attribute(button_2, "data-control", $.get(control).next.id);
+					button_2.disabled = $.get(control).next.disabled;
+					$.set_text(text_4, $.get(control).next.label);
+				});
+				$.delegated("input", input, (event) => $.get(control).change(event.currentTarget.value));
+				$.delegated("click", button_1, () => $.get(control).previous.run());
+				$.delegated("click", button_2, () => $.get(control).next.run());
+				$.append($$anchor, span_2);
+			};
+			$.if(node, ($$render) => {
+				if ($.get(control).kind === "text") $$render(consequent);
+				else if ($.get(control).kind === "button") $$render(consequent_1, 1);
+				else $$render(alternate, -1);
+			});
+			$.append($$anchor, fragment);
+		});
+		$.reset(span);
+		$.template_effect(() => $.set_attribute(span, "data-group", $.get(group).id));
+		$.append($$anchor, span);
+	});
+	$.reset(div);
+	$.action(div, ($$node) => theme?.($$node));
+	$.append($$anchor, div);
+	$.pop();
+}
+$.delegate(["click", "input"]);
+//#endregion
+//#region packages/svelte/src/PageNavigation.svelte
+var root$2 = $.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$2();
+		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$1 = $.from_html(`<div></div>`);
+function Inspector($$anchor, $$props) {
+	$.push($$props, true);
+	let host;
+	$.user_effect(() => buildingBlock("mountDiagramInspector")(host, $$props.controller));
+	var div = root$1();
+	$.bind_this(div, ($$value) => host = $$value, () => host);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region packages/svelte/src/ShapesPane.svelte
+var root = $.from_html(`<div></div>`);
+function ShapesPane($$anchor, $$props) {
+	$.push($$props, true);
+	let host;
+	$.user_effect(() => buildingBlock("mountDiagramShapes")(host, $$props.controller, { locale: $$props.locale }));
+	var div = root();
+	$.bind_this(div, ($$value) => host = $$value, () => host);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+export { DiagramCanvas, Inspector, PageNavigation, ShapesPane, 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,13 +87,15 @@ 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, collaboration, events, class: className, style, "aria-label": ariaLabel } = $$props;
 		$.derived(() => ({
 			document,
 			pageIndex,
 			zoom,
 			showToolbar,
+			canEdit,
 			ribbonAddIns,
+			collaboration,
 			events
 		}));
 		let binding;
@@ -191,4 +196,271 @@ 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;
+}
+/** 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();
+		}
+	};
+}
+//#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(initial);
+	const state = writable(session.controller.state);
+	const latest = writable(initial);
+	const stop = session.controller.subscribe((value) => state.set(value));
+	let stopOptions = () => {};
+	onDestroy(() => {
+		stopOptions();
+		stop();
+		session.destroy();
+	});
+	const update = (next) => {
+		latest.set(next);
+		session.update(next);
+	};
+	if (source) stopOptions = source.subscribe(update);
+	else update(initial);
+	return {
+		controller: session.controller,
+		state: { subscribe: state.subscribe },
+		toolbarProps: derived([state, latest], ([, next]) => session.toolbar(next)),
+		loading: derived(state, (value) => value.loading),
+		error: derived(state, (value) => value.error ?? value.edit.error),
+		/** Effective permission: host `canEdit` and a drawing that can be saved back. */
+		mode: derived(state, (value) => effectiveMode(value)),
+		canvasProps: { mount: session.mount },
+		inspectorProps: { controller: session.controller },
+		shapesProps: derived(latest, (next) => ({
+			controller: session.controller,
+			locale: next.locale
+		})),
+		/** Acknowledge a host save: clears dirty and fires `onDirtyChange(false)`. */
+		markClean: () => session.markClean(),
+		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/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/svelte/src/Toolbar.svelte
+function Toolbar($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let { toolbarProps, include } = $$props;
+		const groups = $.derived(() => toolbarGroups(toolbarProps, include));
+		$$renderer.push(`<div role="toolbar"><!--[-->`);
+		const each_array = $.ensure_array_like(groups());
+		for (let $$index_1 = 0, $$length = each_array.length; $$index_1 < $$length; $$index_1++) {
+			let group = each_array[$$index_1];
+			$$renderer.push(`<span${$.attr("data-group", group.id)}><!--[-->`);
+			const each_array_1 = $.ensure_array_like(group.controls);
+			for (let $$index = 0, $$length = each_array_1.length; $$index < $$length; $$index++) {
+				let control = each_array_1[$$index];
+				if (control.kind === "text") $$renderer.push(`<!--[0--><span${$.attr("data-control", control.id)}>${$.escape(control.text)}</span>`);
+				else if (control.kind === "button") $$renderer.push(`<!--[1--><button type="button"${$.attr("data-control", control.id)}${$.attr("disabled", control.disabled, true)}${$.attr("aria-pressed", control.pressed)}>${$.escape(control.label)}</button>`);
+				else $$renderer.push(`<!--[-1--><span data-control="search"><input type="search"${$.attr("aria-label", control.label)}${$.attr("placeholder", control.label)}${$.attr("value", control.query)}/> <span aria-live="polite">${$.escape(control.summary)}</span> <button type="button"${$.attr("data-control", control.previous.id)}${$.attr("disabled", control.previous.disabled, true)}>${$.escape(control.previous.label)}</button> <button type="button"${$.attr("data-control", control.next.id)}${$.attr("disabled", control.next.disabled, true)}>${$.escape(control.next.label)}</button></span>`);
+				$$renderer.push(`<!--]-->`);
+			}
+			$$renderer.push(`<!--]--></span>`);
+		}
+		$$renderer.push(`<!--]--></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
+//#region packages/svelte/src/ShapesPane.svelte
+function ShapesPane($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let { controller, locale } = $$props;
+		$$renderer.push(`<div></div>`);
+	});
+}
+//#endregion
+export { DiagramCanvas, Inspector, PageNavigation, ShapesPane, Toolbar, VisioViewer, VisioViewer as default, createViewerBuildingBlocks };

package/dist/index.svelte.js

@@ -1,2 +1,8 @@
 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';
+export { default as ShapesPane } from './ShapesPane.svelte';

package/dist/runtime.d.ts

@@ -1,3 +1,6 @@
 export * from './types/packages/bindings/src/common.js';
+export * from './types/packages/bindings/src/building-blocks.js';
+export * from './types/packages/bindings/src/toolbar-controls.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,208 @@ 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;
+}
+/** 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$1(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/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(initial);
+	const state = writable(session.controller.state);
+	const latest = writable(initial);
+	const stop = session.controller.subscribe((value) => state.set(value));
+	let stopOptions = () => {};
+	onDestroy(() => {
+		stopOptions();
+		stop();
+		session.destroy();
+	});
+	const update = (next) => {
+		latest.set(next);
+		session.update(next);
+	};
+	if (source) stopOptions = source.subscribe(update);
+	else update(initial);
+	return {
+		controller: session.controller,
+		state: { subscribe: state.subscribe },
+		toolbarProps: derived([state, latest], ([, next]) => session.toolbar(next)),
+		loading: derived(state, (value) => value.loading),
+		error: derived(state, (value) => value.error ?? value.edit.error),
+		/** Effective permission: host `canEdit` and a drawing that can be saved back. */
+		mode: derived(state, (value) => effectiveMode(value)),
+		canvasProps: { mount: session.mount },
+		inspectorProps: { controller: session.controller },
+		shapesProps: derived(latest, (next) => ({
+			controller: session.controller,
+			locale: next.locale
+		})),
+		/** Acknowledge a host save: clears dirty and fires `onDirtyChange(false)`. */
+		markClean: () => session.markClean(),
+		update
+	};
+}
+//#endregion
+export { TOOLBAR_GROUPS, ViewerController, buildingBlock, createBuildingBlockSession, createViewerBuildingBlocks, effectiveMode, eventKeys, mountFrameworkViewer, mountViewer, prepareDiagramBlock, propertyKeys, toolbarGroups, viewerHandle, viewerOptions, viewerStateSource, withEventEmitter };

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/dist/types/packages/svelte/src/building-blocks.d.ts

@@ -0,0 +1,87 @@
+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: 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;
+    }>;
+    loading: Readable<boolean>;
+    error: Readable<Error | null>;
+    /** Effective permission: host `canEdit` and a drawing that can be saved back. */
+    mode: Readable<"edit" | "view">;
+    canvasProps: {
+        mount: (node: HTMLElement | null) => void;
+    };
+    inspectorProps: {
+        controller: import("ooxml-ui/visio").ViewerController;
+    };
+    shapesProps: Readable<{
+        controller: import("ooxml-ui/visio").ViewerController;
+        locale: string | undefined;
+    }>;
+    /** Acknowledge a host save: clears dirty and fires `onDirtyChange(false)`. */
+    markClean: () => void;
+    update: (next: BuildingBlockOptions) => void;
+};
+export type { BuildingBlockOptions, BuildingBlockHostCallbacks, DiagramToolbarProps, } from '../../bindings/src/building-blocks.js';
+export type { ToolbarGroupId } from '../../bindings/src/toolbar-controls.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "visio-svelte-viewer",
-	"version": "0.7.4",
+	"version": "1.0.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.22.0",
+		"ooxml-ui": "^1.21.0",
+		"visio-core": "^1.0.0"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"