visio-solid-viewer 0.8.0 → 1.0.1

package/README.md

@@ -58,22 +58,34 @@ export function Diagram() {
 
 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 accessors
+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
@@ -83,7 +95,7 @@ Files stay in the browser unless your application sends them elsewhere.
 
 ## Documentation
 
-[Viewer guide](https://christophervr.github.io/ooxml/visio/docs/) |
+[Viewer guide](https://christophervr.github.io/ooxml/visio/) |
 [Demo](https://christophervr.github.io/ooxml/visio/demo/) |
 [Source](https://github.com/ChristopherVR/ooxml/tree/main/viewers/visio)
 

package/dist/index.js

@@ -1,7 +1,7 @@
 import * as ui from "ooxml-ui/visio";
 import { ViewerController, createWorkerParser, mountViewer, propertyKeys } from "ooxml-ui/visio";
-import { addEventListener, className, createComponent, delegateEvents, effect, insert, setAttribute, style, template, use } from "solid-js/web";
-import { For, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { className, createComponent, delegateEvents, effect, insert, setAttribute, style, template, use } from "solid-js/web";
+import { For, Index, Match, Switch, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 import * as officeTheme from "ooxml-ui/theme";
 export * from "ooxml-ui/visio";
 export * from "visio-core";
@@ -221,10 +221,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;
@@ -248,13 +253,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();
@@ -283,13 +298,96 @@ 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/solid/src/building-blocks.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<div>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div role=toolbar><button type=button></button><button type=button></button><button type=button>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<select>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<option>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<button type=button>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span data-control=search><input type=search><span aria-live=polite>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div role=toolbar>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<select>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<option>`);
 function createViewerBuildingBlocks(options = () => ({})) {
-	const session = createBuildingBlockSession();
+	const session = createBuildingBlockSession(options());
 	const [state, setState] = createSignal(session.controller.state);
 	const stop = session.controller.subscribe((value) => setState(() => value));
 	createEffect(() => session.update(options()));
@@ -299,7 +397,7 @@ function createViewerBuildingBlocks(options = () => ({})) {
 	});
 	const toolbarProps = createMemo(() => {
 		state();
-		return session.toolbar(options().locale);
+		return session.toolbar(options());
 	});
 	return {
 		controller: session.controller,
@@ -307,9 +405,18 @@ function createViewerBuildingBlocks(options = () => ({})) {
 		canvasProps: { mount: session.mount },
 		toolbarProps,
 		inspectorProps: { controller: session.controller },
+		shapesProps: {
+			controller: session.controller,
+			get locale() {
+				return options().locale;
+			}
+		},
+		/** Acknowledge a host save: clears dirty and fires `onDirtyChange(false)`. */
+		markClean: () => session.markClean(),
 		loading: () => state().loading,
 		error: () => state().error ?? state().edit.error,
-		mode: () => state().canEdit ? "edit" : "view"
+		/** Effective permission: host `canEdit` and a drawing that can be saved back. */
+		mode: () => effectiveMode(state())
 	};
 }
 function DiagramCanvas(props) {
@@ -327,47 +434,122 @@ function DiagramCanvas(props) {
 		return _el$;
 	})();
 }
+/** Index-keyed, so the DOM (and focus) survives every state update; only attributes change. */
+function Control(props) {
+	const kind = () => props.control.kind;
+	const asButton = () => props.control;
+	const asSearch = () => props.control;
+	return createComponent(Switch, { get children() {
+		return [
+			createComponent(Match, {
+				get when() {
+					return kind() === "text";
+				},
+				get children() {
+					var _el$2 = _tmpl$2();
+					insert(_el$2, () => props.control.text);
+					effect(() => setAttribute(_el$2, "data-control", props.control.id));
+					return _el$2;
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return kind() === "button";
+				},
+				get children() {
+					var _el$3 = _tmpl$3();
+					_el$3.$$click = () => asButton().run();
+					insert(_el$3, () => asButton().label);
+					effect((_p$) => {
+						var _v$ = props.control.id, _v$2 = asButton().disabled, _v$3 = asButton().pressed;
+						_v$ !== _p$.e && setAttribute(_el$3, "data-control", _p$.e = _v$);
+						_v$2 !== _p$.t && (_el$3.disabled = _p$.t = _v$2);
+						_v$3 !== _p$.a && setAttribute(_el$3, "aria-pressed", _p$.a = _v$3);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0
+					});
+					return _el$3;
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return kind() === "search";
+				},
+				get children() {
+					var _el$4 = _tmpl$4(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+					_el$5.$$input = (event) => asSearch().change(event.currentTarget.value);
+					insert(_el$6, () => asSearch().summary);
+					insert(_el$4, createComponent(Control, { get control() {
+						return asSearch().previous;
+					} }), null);
+					insert(_el$4, createComponent(Control, { get control() {
+						return asSearch().next;
+					} }), null);
+					effect((_p$) => {
+						var _v$4 = asSearch().label, _v$5 = asSearch().label;
+						_v$4 !== _p$.e && setAttribute(_el$5, "aria-label", _p$.e = _v$4);
+						_v$5 !== _p$.t && setAttribute(_el$5, "placeholder", _p$.t = _v$5);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
+					});
+					effect(() => _el$5.value = asSearch().query);
+					return _el$4;
+				}
+			})
+		];
+	} });
+}
+/** Optional library toolbar; `include` picks groups. Hosts may build their own from toolbarProps. */
 function Toolbar(props) {
+	const groups = createMemo(() => toolbarGroups(props, props.include));
 	return (() => {
-		var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling;
-		use((host) => prepareDiagramBlock(host, "toolbar"), _el$2);
-		_el$3.$$click = () => void props.onUndo();
-		insert(_el$3, () => props.labels.Undo);
-		_el$4.$$click = () => void props.onRedo();
-		insert(_el$4, () => props.labels.Redo);
-		addEventListener(_el$5, "click", props.onFit, true);
-		insert(_el$5, () => props.labels["Fit to Window"]);
-		effect((_p$) => {
-			var _v$ = !props.canUndo, _v$2 = !props.canRedo;
-			_v$ !== _p$.e && (_el$3.disabled = _p$.e = _v$);
-			_v$2 !== _p$.t && (_el$4.disabled = _p$.t = _v$2);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		});
-		return _el$2;
+		var _el$7 = _tmpl$5();
+		use((host) => prepareDiagramBlock(host, "toolbar"), _el$7);
+		insert(_el$7, createComponent(Index, {
+			get each() {
+				return groups();
+			},
+			children: (group) => (() => {
+				var _el$8 = _tmpl$2();
+				insert(_el$8, createComponent(Index, {
+					get each() {
+						return group().controls;
+					},
+					children: (control) => createComponent(Control, { get control() {
+						return control();
+					} })
+				}));
+				effect(() => setAttribute(_el$8, "data-group", group().id));
+				return _el$8;
+			})()
+		}));
+		return _el$7;
 	})();
 }
 function PageNavigation(props) {
 	return (() => {
-		var _el$6 = _tmpl$3();
-		_el$6.addEventListener("change", (event) => props.onPageChange(Number(event.currentTarget.value)));
-		use((host) => prepareDiagramBlock(host, "tabs"), _el$6);
-		insert(_el$6, createComponent(For, {
+		var _el$9 = _tmpl$6();
+		_el$9.addEventListener("change", (event) => props.onPageChange(Number(event.currentTarget.value)));
+		use((host) => prepareDiagramBlock(host, "tabs"), _el$9);
+		insert(_el$9, createComponent(For, {
 			get each() {
 				return props.pages;
 			},
 			children: (page, index) => (() => {
-				var _el$7 = _tmpl$4();
-				insert(_el$7, () => page.name);
-				effect(() => _el$7.value = index());
-				return _el$7;
+				var _el$0 = _tmpl$7();
+				insert(_el$0, () => page.name);
+				effect(() => _el$0.value = index());
+				return _el$0;
 			})()
 		}));
-		effect(() => setAttribute(_el$6, "aria-label", props.labels.Page));
-		effect(() => _el$6.value = props.pageIndex);
-		return _el$6;
+		effect(() => setAttribute(_el$9, "aria-label", props.labels.Page));
+		effect(() => _el$9.value = props.pageIndex);
+		return _el$9;
 	})();
 }
 function Inspector(props) {
@@ -377,12 +559,25 @@ function Inspector(props) {
 		onCleanup(stop);
 	});
 	return (() => {
-		var _el$8 = _tmpl$();
+		var _el$1 = _tmpl$();
 		var _ref$2 = host;
-		typeof _ref$2 === "function" ? use(_ref$2, _el$8) : host = _el$8;
-		return _el$8;
+		typeof _ref$2 === "function" ? use(_ref$2, _el$1) : host = _el$1;
+		return _el$1;
+	})();
+}
+function ShapesPane(props) {
+	let host;
+	createEffect(() => {
+		const stop = buildingBlock("mountDiagramShapes")(host, props.controller, { locale: props.locale });
+		onCleanup(stop);
+	});
+	return (() => {
+		var _el$10 = _tmpl$();
+		var _ref$3 = host;
+		typeof _ref$3 === "function" ? use(_ref$3, _el$10) : host = _el$10;
+		return _el$10;
 	})();
 }
-delegateEvents(["click"]);
+delegateEvents(["click", "input"]);
 //#endregion
-export { DiagramCanvas, Inspector, PageNavigation, Toolbar, VisioViewer, createViewerBuildingBlocks, createVisioViewerState };
+export { DiagramCanvas, Inspector, PageNavigation, ShapesPane, Toolbar, VisioViewer, createViewerBuildingBlocks, createVisioViewerState };

package/dist/index.server.js

@@ -1,7 +1,7 @@
 import * as ui from "ooxml-ui/visio";
 import { ViewerController, createWorkerParser, mountViewer, propertyKeys } from "ooxml-ui/visio";
 import { createComponent, escape, ssr, ssrAttribute, ssrHydrationKey, ssrStyle } from "solid-js/web";
-import { For, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { For, Index, Match, Switch, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 import "ooxml-ui/theme";
 export * from "ooxml-ui/visio";
 export * from "visio-core";
@@ -210,10 +210,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;
@@ -237,13 +242,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();
@@ -265,29 +280,125 @@ function createBuildingBlockSession() {
 	};
 }
 //#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/solid/src/building-blocks.tsx
 var _tmpl$ = ["<div", "></div>"];
 var _tmpl$2 = [
-	"<div",
-	" role=\"toolbar\"><button type=\"button\"",
+	"<span",
 	">",
-	"</button><button type=\"button\"",
-	">",
-	"</button><button type=\"button\">",
-	"</button></div>"
+	"</span>"
 ];
 var _tmpl$3 = [
+	"<button",
+	" type=\"button\"",
+	"",
+	">",
+	"</button>"
+];
+var _tmpl$4 = [
+	"<span",
+	" data-control=\"search\"><input type=\"search\"",
+	"><span aria-live=\"polite\">",
+	"</span><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></span>"
+];
+var _tmpl$5 = [
+	"<div",
+	" role=\"toolbar\">",
+	"</div>"
+];
+var _tmpl$6 = [
 	"<select",
 	">",
 	"</select>"
 ];
-var _tmpl$4 = [
+var _tmpl$7 = [
 	"<option",
 	">",
 	"</option>"
 ];
 function createViewerBuildingBlocks(options = () => ({})) {
-	const session = createBuildingBlockSession();
+	const session = createBuildingBlockSession(options());
 	const [state, setState] = createSignal(session.controller.state);
 	const stop = session.controller.subscribe((value) => setState(() => value));
 	createEffect(() => session.update(options()));
@@ -297,7 +408,7 @@ function createViewerBuildingBlocks(options = () => ({})) {
 	});
 	const toolbarProps = createMemo(() => {
 		state();
-		return session.toolbar(options().locale);
+		return session.toolbar(options());
 	});
 	return {
 		controller: session.controller,
@@ -305,9 +416,18 @@ function createViewerBuildingBlocks(options = () => ({})) {
 		canvasProps: { mount: session.mount },
 		toolbarProps,
 		inspectorProps: { controller: session.controller },
+		shapesProps: {
+			controller: session.controller,
+			get locale() {
+				return options().locale;
+			}
+		},
+		/** Acknowledge a host save: clears dirty and fires `onDirtyChange(false)`. */
+		markClean: () => session.markClean(),
 		loading: () => state().loading,
 		error: () => state().error ?? state().edit.error,
-		mode: () => state().canEdit ? "edit" : "view"
+		/** Effective permission: host `canEdit` and a drawing that can be saved back. */
+		mode: () => effectiveMode(state())
 	};
 }
 function DiagramCanvas(props) {
@@ -319,15 +439,67 @@ function DiagramCanvas(props) {
 	});
 	return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false));
 }
+/** Index-keyed, so the DOM (and focus) survives every state update; only attributes change. */
+function Control(props) {
+	const kind = () => props.control.kind;
+	const asButton = () => props.control;
+	const asSearch = () => props.control;
+	return createComponent(Switch, { get children() {
+		return [
+			createComponent(Match, {
+				get when() {
+					return kind() === "text";
+				},
+				get children() {
+					return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("data-control", escape(props.control.id, true), false), escape(props.control.text));
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return kind() === "button";
+				},
+				get children() {
+					return ssr(_tmpl$3, ssrHydrationKey(), ssrAttribute("data-control", escape(props.control.id, true), false), ssrAttribute("disabled", asButton().disabled, true) + ssrAttribute("aria-pressed", escape(asButton().pressed, true), false), escape(asButton().label));
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return kind() === "search";
+				},
+				get children() {
+					return ssr(_tmpl$4, ssrHydrationKey(), ssrAttribute("aria-label", escape(asSearch().label, true), false) + ssrAttribute("placeholder", escape(asSearch().label, true), false) + ssrAttribute("value", escape(asSearch().query, true), false), escape(asSearch().summary), escape(createComponent(Control, { get control() {
+						return asSearch().previous;
+					} })), escape(createComponent(Control, { get control() {
+						return asSearch().next;
+					} })));
+				}
+			})
+		];
+	} });
+}
+/** Optional library toolbar; `include` picks groups. Hosts may build their own from toolbarProps. */
 function Toolbar(props) {
-	return ssr(_tmpl$2, ssrHydrationKey(), ssrAttribute("disabled", !props.canUndo, true), escape(props.labels.Undo), ssrAttribute("disabled", !props.canRedo, true), escape(props.labels.Redo), escape(props.labels["Fit to Window"]));
+	const groups = createMemo(() => toolbarGroups(props, props.include));
+	return ssr(_tmpl$5, ssrHydrationKey(), escape(createComponent(Index, {
+		get each() {
+			return groups();
+		},
+		children: (group) => ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("data-group", escape(group().id, true), false), escape(createComponent(Index, {
+			get each() {
+				return group().controls;
+			},
+			children: (control) => createComponent(Control, { get control() {
+				return control();
+			} })
+		})))
+	})));
 }
 function PageNavigation(props) {
-	return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("aria-label", escape(props.labels.Page, true), false) + ssrAttribute("value", escape(props.pageIndex, true), false), escape(createComponent(For, {
+	return ssr(_tmpl$6, ssrHydrationKey() + ssrAttribute("aria-label", escape(props.labels.Page, true), false) + ssrAttribute("value", escape(props.pageIndex, true), false), escape(createComponent(For, {
 		get each() {
 			return props.pages;
 		},
-		children: (page, index) => ssr(_tmpl$4, ssrHydrationKey() + ssrAttribute("value", escape(index(), true), false), escape(page.name))
+		children: (page, index) => ssr(_tmpl$7, ssrHydrationKey() + ssrAttribute("value", escape(index(), true), false), escape(page.name))
 	})));
 }
 function Inspector(props) {
@@ -338,5 +510,13 @@ function Inspector(props) {
 	});
 	return ssr(_tmpl$, ssrHydrationKey());
 }
+function ShapesPane(props) {
+	let host;
+	createEffect(() => {
+		const stop = buildingBlock("mountDiagramShapes")(host, props.controller, { locale: props.locale });
+		onCleanup(stop);
+	});
+	return ssr(_tmpl$, ssrHydrationKey());
+}
 //#endregion
-export { DiagramCanvas, Inspector, PageNavigation, Toolbar, VisioViewer, createViewerBuildingBlocks, createVisioViewerState };
+export { DiagramCanvas, Inspector, PageNavigation, ShapesPane, Toolbar, VisioViewer, createViewerBuildingBlocks, createVisioViewerState };

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/solid/src/building-blocks.d.ts

@@ -1,5 +1,6 @@
 import { type Accessor } from 'solid-js';
 import { type BuildingBlockOptions, type DiagramToolbarProps, type ViewerController } from '../../bindings/src/building-blocks.js';
+import { type ToolbarGroupId } from '../../bindings/src/toolbar-controls.js';
 export declare function createViewerBuildingBlocks(options?: Accessor<BuildingBlockOptions>): {
     controller: ViewerController;
     state: Accessor<import("ooxml-ui/visio").ViewerState>;
@@ -7,9 +8,8 @@ export declare function createViewerBuildingBlocks(options?: Accessor<BuildingBl
         mount: (node: HTMLElement | null) => void;
     };
     toolbarProps: Accessor<{
-        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,33 +23,78 @@ export declare function createViewerBuildingBlocks(options?: Accessor<BuildingBl
         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;
     }>;
     inspectorProps: {
         controller: ViewerController;
     };
+    shapesProps: {
+        controller: ViewerController;
+        readonly locale: string | undefined;
+    };
+    /** Acknowledge a host save: clears dirty and fires `onDirtyChange(false)`. */
+    markClean: () => void;
     loading: () => boolean;
     error: () => Error | null;
+    /** Effective permission: host `canEdit` and a drawing that can be saved back. */
     mode: () => "edit" | "view";
 };
 export declare function DiagramCanvas(props: {
     mount(node: HTMLElement | null): void;
     class?: string | undefined;
 }): import("solid-js").JSX.Element;
-export declare function Toolbar(props: DiagramToolbarProps): import("solid-js").JSX.Element;
+/** Optional library toolbar; `include` picks groups. Hosts may build their own from toolbarProps. */
+export declare function Toolbar(props: DiagramToolbarProps & {
+    include?: readonly ToolbarGroupId[];
+}): import("solid-js").JSX.Element;
 export declare function PageNavigation(props: DiagramToolbarProps): import("solid-js").JSX.Element;
 export declare function Inspector(props: {
     controller: ViewerController;
 }): import("solid-js").JSX.Element;
-export type { BuildingBlockOptions, DiagramToolbarProps } from '../../bindings/src/building-blocks.js';
+export declare function ShapesPane(props: {
+    controller: ViewerController;
+    locale?: string | undefined;
+}): import("solid-js").JSX.Element;
+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-solid-viewer",
-	"version": "0.8.0",
+	"version": "1.0.1",
 	"description": "Local-first Visio viewer for solid",
 	"homepage": "https://christophervr.github.io/ooxml/visio/",
 	"bugs": {
@@ -32,9 +32,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": {
 		"solid-js": "^1.9.0"