visio-svelte-viewer 0.8.0 → 1.0.1

package/README.md

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

package/dist/DiagramCanvas.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { Component } from 'svelte';
-import type { ViewerController, DiagramToolbarProps } from './runtime.js';
+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.d.ts

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

package/dist/PageNavigation.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { Component } from 'svelte';
-import type { ViewerController, DiagramToolbarProps } from './runtime.js';
+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

@@ -1,11 +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 }: { toolbarProps: DiagramToolbarProps } = $props();
+ let { toolbarProps, include }: { toolbarProps: DiagramToolbarProps; include?: readonly ToolbarGroupId[] } = $props();
+ const groups = $derived(toolbarGroups(toolbarProps, include));
 </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>
+ {#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

@@ -1,4 +1,4 @@
 import type { Component } from 'svelte';
-import type { ViewerController, DiagramToolbarProps } from './runtime.js';
-declare const component: Component<{ toolbarProps: DiagramToolbarProps }>;
+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, 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 { 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

@@ -6,3 +6,4 @@ 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

@@ -149,7 +149,7 @@ function viewerStateSource(current) {
 }
 //#endregion
 //#region packages/bindings/src/VisioViewer.svelte
-var root$4 = $.from_html(`<div></div>`);
+var root$5 = $.from_html(`<div></div>`);
 function VisioViewer($$anchor, $$props) {
 	$.push($$props, true);
 	const options = $.derived(() => ({
@@ -159,6 +159,7 @@ function VisioViewer($$anchor, $$props) {
 		showToolbar: $$props.showToolbar,
 		canEdit: $$props.canEdit,
 		ribbonAddIns: $$props.ribbonAddIns,
+		collaboration: $$props.collaboration,
 		events: $$props.events
 	}));
 	let binding;
@@ -273,7 +274,7 @@ function VisioViewer($$anchor, $$props) {
 		exportSvg,
 		createPrintSnapshot
 	};
-	var div = root$4();
+	var div = root$5();
 	$.action(div, ($$node, $$action_arg) => attach?.($$node, $$action_arg), () => $.get(options));
 	$.template_effect(() => {
 		$.set_class(div, 1, $.clsx($$props.class));
@@ -290,10 +291,15 @@ function buildingBlock(key) {
 	if (typeof value !== "function") throw new Error("Update ooxml-ui to use Visio building blocks.");
 	return value;
 }
+/** The mode a host sees: 'edit' only when permission is granted and the file can be saved back. */
+function effectiveMode(state) {
+	return buildingBlock("diagramMode")(state);
+}
 /** Framework-neutral ownership only; each adapter supplies its own reactive state. */
-function createBuildingBlockSession() {
+function createBuildingBlockSession(initial = {}) {
 	const controller = new ViewerController(createWorkerParser());
-	let options = {};
+	controller.canEdit = initial.canEdit === true;
+	let options = initial;
 	let source;
 	let host = null;
 	let disposeCanvas;
@@ -317,13 +323,23 @@ function createBuildingBlockSession() {
 			host = node;
 			if (node) disposeCanvas = buildingBlock("mountDiagramCanvas")(node, controller);
 		},
-		toolbar(locale = options.locale) {
-			return buildingBlock("diagramToolbarProps")(controller, fit, locale);
+		/** Flat control props; pass the framework's latest options so callbacks stay current. */
+		toolbar(latest = options) {
+			return buildingBlock("diagramToolbarProps")(controller, fit, latest.locale, {
+				onOpenFile: latest.onOpenFile,
+				onOpenPageSetup: latest.onOpenPageSetup,
+				onOpenSettings: latest.onOpenSettings,
+				onOpenShareDialog: latest.onOpenShareDialog
+			});
+		},
+		/** Acknowledge a host save: clears dirty and emits the dirty change. */
+		markClean() {
+			controller.markClean();
 		},
 		update(next) {
 			if (destroyed) return;
 			options = next;
-			controller.canEdit = next.canEdit !== false;
+			controller.canEdit = next.canEdit === true;
 			if (source === next.content) return;
 			source = next.content;
 			controller.cancelLoad();
@@ -357,9 +373,9 @@ function prepareDiagramBlock(host, kind) {
 function createViewerBuildingBlocks(options = {}) {
 	const source = "subscribe" in options ? options : void 0;
 	const initial = source ? get(source) : options;
-	const session = createBuildingBlockSession();
+	const session = createBuildingBlockSession(initial);
 	const state = writable(session.controller.state);
-	const locale = writable(initial.locale);
+	const latest = writable(initial);
 	const stop = session.controller.subscribe((value) => state.set(value));
 	let stopOptions = () => {};
 	onDestroy(() => {
@@ -368,7 +384,7 @@ function createViewerBuildingBlocks(options = {}) {
 		session.destroy();
 	});
 	const update = (next) => {
-		locale.set(next.locale);
+		latest.set(next);
 		session.update(next);
 	};
 	if (source) stopOptions = source.subscribe(update);
@@ -376,18 +392,25 @@ function createViewerBuildingBlocks(options = {}) {
 	return {
 		controller: session.controller,
 		state: { subscribe: state.subscribe },
-		toolbarProps: derived([state, locale], ([, language]) => session.toolbar(language)),
+		toolbarProps: derived([state, latest], ([, next]) => session.toolbar(next)),
 		loading: derived(state, (value) => value.loading),
 		error: derived(state, (value) => value.error ?? value.edit.error),
-		mode: derived(state, (value) => value.canEdit ? "edit" : "view"),
+		/** 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$3 = $.from_html(`<div></div>`);
+var root$4 = $.from_html(`<div></div>`);
 function DiagramCanvas($$anchor, $$props) {
 	$.push($$props, true);
 	let host;
@@ -396,48 +419,180 @@ function DiagramCanvas($$anchor, $$props) {
 		current(host);
 		return () => current(null);
 	});
-	var div = root$3();
+	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$2 = $.from_html(`<div role="toolbar"><button type="button"> </button> <button type="button"> </button> <button type="button"> </button></div>`);
+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");
 	}
-	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);
+	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));
-	$.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"]);
+$.delegate(["click", "input"]);
 //#endregion
 //#region packages/svelte/src/PageNavigation.svelte
-var root$1 = $.from_html(`<option> </option>`);
+var root$2 = $.from_html(`<option> </option>`);
 var root_1 = $.from_html(`<select></select>`);
 function PageNavigation($$anchor, $$props) {
 	$.push($$props, true);
@@ -446,7 +601,7 @@ function PageNavigation($$anchor, $$props) {
 	}
 	var select = root_1();
 	$.each(select, 23, () => $$props.toolbarProps.pages, (page) => page.id, ($$anchor, page, index) => {
-		var option = root$1();
+		var option = root$2();
 		var text = $.only_child(option, true);
 		var option_value = {};
 		$.template_effect(() => {
@@ -470,15 +625,27 @@ function PageNavigation($$anchor, $$props) {
 $.delegate(["change"]);
 //#endregion
 //#region packages/svelte/src/Inspector.svelte
-var root = $.from_html(`<div></div>`);
+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, Toolbar, VisioViewer, VisioViewer as default, createViewerBuildingBlocks };
+export { DiagramCanvas, Inspector, PageNavigation, ShapesPane, Toolbar, VisioViewer, VisioViewer as default, createViewerBuildingBlocks };

package/dist/index.server.js

@@ -87,7 +87,7 @@ function viewerHandle(current) {
 //#region packages/bindings/src/VisioViewer.svelte
 function VisioViewer($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
-		let { document, pageIndex, zoom, showToolbar, canEdit, 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,
@@ -95,6 +95,7 @@ function VisioViewer($$renderer, $$props) {
 			showToolbar,
 			canEdit,
 			ribbonAddIns,
+			collaboration,
 			events
 		}));
 		let binding;
@@ -201,10 +202,15 @@ function buildingBlock(key) {
 	if (typeof value !== "function") throw new Error("Update ooxml-ui to use Visio building blocks.");
 	return value;
 }
+/** The mode a host sees: 'edit' only when permission is granted and the file can be saved back. */
+function effectiveMode(state) {
+	return buildingBlock("diagramMode")(state);
+}
 /** Framework-neutral ownership only; each adapter supplies its own reactive state. */
-function createBuildingBlockSession() {
+function createBuildingBlockSession(initial = {}) {
 	const controller = new ViewerController(createWorkerParser());
-	let options = {};
+	controller.canEdit = initial.canEdit === true;
+	let options = initial;
 	let source;
 	let host = null;
 	let disposeCanvas;
@@ -228,13 +234,23 @@ function createBuildingBlockSession() {
 			host = node;
 			if (node) disposeCanvas = buildingBlock("mountDiagramCanvas")(node, controller);
 		},
-		toolbar(locale = options.locale) {
-			return buildingBlock("diagramToolbarProps")(controller, fit, locale);
+		/** Flat control props; pass the framework's latest options so callbacks stay current. */
+		toolbar(latest = options) {
+			return buildingBlock("diagramToolbarProps")(controller, fit, latest.locale, {
+				onOpenFile: latest.onOpenFile,
+				onOpenPageSetup: latest.onOpenPageSetup,
+				onOpenSettings: latest.onOpenSettings,
+				onOpenShareDialog: latest.onOpenShareDialog
+			});
+		},
+		/** Acknowledge a host save: clears dirty and emits the dirty change. */
+		markClean() {
+			controller.markClean();
 		},
 		update(next) {
 			if (destroyed) return;
 			options = next;
-			controller.canEdit = next.canEdit !== false;
+			controller.canEdit = next.canEdit === true;
 			if (source === next.content) return;
 			source = next.content;
 			controller.cancelLoad();
@@ -261,9 +277,9 @@ function createBuildingBlockSession() {
 function createViewerBuildingBlocks(options = {}) {
 	const source = "subscribe" in options ? options : void 0;
 	const initial = source ? get(source) : options;
-	const session = createBuildingBlockSession();
+	const session = createBuildingBlockSession(initial);
 	const state = writable(session.controller.state);
-	const locale = writable(initial.locale);
+	const latest = writable(initial);
 	const stop = session.controller.subscribe((value) => state.set(value));
 	let stopOptions = () => {};
 	onDestroy(() => {
@@ -272,7 +288,7 @@ function createViewerBuildingBlocks(options = {}) {
 		session.destroy();
 	});
 	const update = (next) => {
-		locale.set(next.locale);
+		latest.set(next);
 		session.update(next);
 	};
 	if (source) stopOptions = source.subscribe(update);
@@ -280,12 +296,19 @@ function createViewerBuildingBlocks(options = {}) {
 	return {
 		controller: session.controller,
 		state: { subscribe: state.subscribe },
-		toolbarProps: derived([state, locale], ([, language]) => session.toolbar(language)),
+		toolbarProps: derived([state, latest], ([, next]) => session.toolbar(next)),
 		loading: derived(state, (value) => value.loading),
 		error: derived(state, (value) => value.error ?? value.edit.error),
-		mode: derived(state, (value) => value.canEdit ? "edit" : "view"),
+		/** 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
 	};
 }
@@ -298,11 +321,107 @@ function DiagramCanvas($$renderer, $$props) {
 	});
 }
 //#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 } = $$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>`);
+		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
@@ -336,4 +455,12 @@ function Inspector($$renderer, $$props) {
 	});
 }
 //#endregion
-export { DiagramCanvas, Inspector, PageNavigation, Toolbar, VisioViewer, VisioViewer as default, createViewerBuildingBlocks };
+//#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

@@ -5,3 +5,4 @@ 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,5 +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

@@ -168,10 +168,15 @@ function buildingBlock(key) {
 	if (typeof value !== "function") throw new Error("Update ooxml-ui to use Visio building blocks.");
 	return value;
 }
+/** The mode a host sees: 'edit' only when permission is granted and the file can be saved back. */
+function effectiveMode(state) {
+	return buildingBlock("diagramMode")(state);
+}
 /** Framework-neutral ownership only; each adapter supplies its own reactive state. */
-function createBuildingBlockSession() {
+function createBuildingBlockSession(initial = {}) {
 	const controller = new ViewerController$1(createWorkerParser());
-	let options = {};
+	controller.canEdit = initial.canEdit === true;
+	let options = initial;
 	let source;
 	let host = null;
 	let disposeCanvas;
@@ -195,13 +200,23 @@ function createBuildingBlockSession() {
 			host = node;
 			if (node) disposeCanvas = buildingBlock("mountDiagramCanvas")(node, controller);
 		},
-		toolbar(locale = options.locale) {
-			return buildingBlock("diagramToolbarProps")(controller, fit, locale);
+		/** Flat control props; pass the framework's latest options so callbacks stay current. */
+		toolbar(latest = options) {
+			return buildingBlock("diagramToolbarProps")(controller, fit, latest.locale, {
+				onOpenFile: latest.onOpenFile,
+				onOpenPageSetup: latest.onOpenPageSetup,
+				onOpenSettings: latest.onOpenSettings,
+				onOpenShareDialog: latest.onOpenShareDialog
+			});
+		},
+		/** Acknowledge a host save: clears dirty and emits the dirty change. */
+		markClean() {
+			controller.markClean();
 		},
 		update(next) {
 			if (destroyed) return;
 			options = next;
-			controller.canEdit = next.canEdit !== false;
+			controller.canEdit = next.canEdit === true;
 			if (source === next.content) return;
 			source = next.content;
 			controller.cancelLoad();
@@ -230,14 +245,94 @@ function prepareDiagramBlock(host, kind) {
 	prepare(host, kind, "visio");
 }
 //#endregion
+//#region packages/bindings/src/toolbar-controls.ts
+var TOOLBAR_GROUPS = [
+	"file",
+	"history",
+	"zoom",
+	"selection",
+	"clipboard",
+	"tools",
+	"search"
+];
+var fire = (action) => () => {
+	Promise.resolve().then(action).catch(() => {});
+};
+var button = (id, label, enabled, action, pressed) => ({
+	kind: "button",
+	id,
+	label,
+	disabled: !enabled,
+	...pressed === void 0 ? {} : { pressed },
+	run: fire(action)
+});
+/**
+* What the library Toolbar shows, as plain data every framework maps onto its own elements.
+* Every control reflects `toolbarProps`: edit actions are disabled while the diagram is read-only,
+* viewing actions (zoom, fit, search) never are, and a host dialog button appears only when the
+* host supplied its callback.
+*/
+function toolbarGroups(props, include = TOOLBAR_GROUPS) {
+	const { labels } = props;
+	const has = props.pages.length > 0;
+	const groups = [];
+	const add = (id, controls) => {
+		if (include.includes(id) && controls.length) groups.push({
+			id,
+			controls
+		});
+	};
+	add("file", [
+		...props.onOpenFile ? [button("open", labels.Open, true, props.onOpenFile)] : [],
+		...props.onOpenPageSetup ? [button("page-setup", labels["Page Setup"], has, props.onOpenPageSetup)] : [],
+		...props.onOpenShareDialog ? [button("share", labels.Share, has, props.onOpenShareDialog)] : [],
+		...props.onOpenSettings ? [button("settings", labels.Options, true, props.onOpenSettings)] : []
+	]);
+	add("history", [button("undo", labels.Undo, props.canUndo, props.onUndo), button("redo", labels.Redo, props.canRedo, props.onRedo)]);
+	add("zoom", [
+		button("zoom-out", labels["Zoom Out"], props.canZoomOut, props.onZoomOut),
+		{
+			kind: "text",
+			id: "zoom",
+			text: `${Math.round(props.zoom * 100)}%`
+		},
+		button("zoom-in", labels["Zoom In"], props.canZoomIn, props.onZoomIn),
+		button("fit", labels["Fit to Window"], has, props.onFit)
+	]);
+	add("selection", [
+		button("duplicate", labels.Duplicate, props.canDuplicate, props.onDuplicate),
+		button("group", labels.Group, props.canGroup, props.onGroup),
+		button("ungroup", labels.Ungroup, props.canUngroup, props.onUngroup),
+		button("delete", labels.Delete, props.canDelete, props.onDelete)
+	]);
+	add("clipboard", [
+		button("cut", labels.Cut, props.canCut, props.onCut),
+		button("copy", labels.Copy, props.canCopy, props.onCopy),
+		button("paste", labels.Paste, props.canPaste, props.onPaste)
+	]);
+	add("tools", props.tools.map((tool) => button(`tool-${tool.id}`, tool.label, tool.id === "pointer" || props.canDraw, () => props.onToolChange(tool.id), tool.active)));
+	const { search } = props;
+	add("search", [{
+		kind: "search",
+		id: "search",
+		label: labels.Find,
+		query: search.query,
+		summary: search.query ? search.resultCount ? `${search.activeIndex >= 0 ? search.activeIndex + 1 : "-"} / ${search.resultCount}` : "0" : "",
+		previous: button("search-previous", labels["Previous Result"], search.resultCount > 0, props.onPreviousSearchResult),
+		next: button("search-next", labels["Next Result"], search.resultCount > 0, props.onNextSearchResult),
+		change: (query) => props.onSearchChange(query)
+	}]);
+	return groups;
+}
+//#endregion
 //#region packages/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 session = createBuildingBlockSession(initial);
 	const state = writable(session.controller.state);
-	const locale = writable(initial.locale);
+	const latest = writable(initial);
 	const stop = session.controller.subscribe((value) => state.set(value));
 	let stopOptions = () => {};
 	onDestroy(() => {
@@ -246,7 +341,7 @@ function createViewerBuildingBlocks(options = {}) {
 		session.destroy();
 	});
 	const update = (next) => {
-		locale.set(next.locale);
+		latest.set(next);
 		session.update(next);
 	};
 	if (source) stopOptions = source.subscribe(update);
@@ -254,14 +349,21 @@ function createViewerBuildingBlocks(options = {}) {
 	return {
 		controller: session.controller,
 		state: { subscribe: state.subscribe },
-		toolbarProps: derived([state, locale], ([, language]) => session.toolbar(language)),
+		toolbarProps: derived([state, latest], ([, next]) => session.toolbar(next)),
 		loading: derived(state, (value) => value.loading),
 		error: derived(state, (value) => value.error ?? value.edit.error),
-		mode: derived(state, (value) => value.canEdit ? "edit" : "view"),
+		/** 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 { ViewerController, buildingBlock, createBuildingBlockSession, createViewerBuildingBlocks, eventKeys, mountFrameworkViewer, mountViewer, prepareDiagramBlock, propertyKeys, viewerHandle, viewerOptions, viewerStateSource, withEventEmitter };
+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

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

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

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

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

@@ -7,9 +7,8 @@ export declare function createViewerBuildingBlocks(options?: BuildingBlockOption
         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;
-        };
+        labels: Readonly<Record<"Arc" | "Connector" | "Copy" | "Cut" | "Delete" | "Duplicate" | "Ellipse" | "Find" | "Fit to Window" | "Freeform" | "Group" | "Line" | "Next Result" | "Open" | "Options" | "Page" | "Page Setup" | "Paste" | "Pencil" | "Pointer Tool" | "Previous Result" | "Rectangle" | "Redo" | "Shapes" | "Share" | "Text" | "Undo" | "Ungroup" | "Zoom In" | "Zoom Out", string>>;
+        mode: import("ooxml-ui/visio").DiagramMode;
         canEdit: boolean;
         pageIndex: number;
         pages: {
@@ -23,21 +22,52 @@ export declare function createViewerBuildingBlocks(options?: BuildingBlockOption
         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;
@@ -45,6 +75,13 @@ export declare function createViewerBuildingBlocks(options?: BuildingBlockOption
     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, DiagramToolbarProps } from '../../bindings/src/building-blocks.js';
+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.8.0",
+	"version": "1.0.1",
 	"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.20.0",
-		"ooxml-ui": "^1.19.0",
-		"visio-core": "^0.5.0"
+		"ooxml-core": "^1.23.0",
+		"ooxml-ui": "^1.22.0",
+		"visio-core": "^1.0.1"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"