visio-solid-viewer 0.7.4 → 1.0.0

package/dist/index.js

@@ -1,6 +1,8 @@
-import { mountViewer, propertyKeys } from "ooxml-ui/visio";
-import { className, effect, setAttribute, style, template, use } from "solid-js/web";
-import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import * as ui from "ooxml-ui/visio";
+import { ViewerController, createWorkerParser, mountViewer, propertyKeys } from "ooxml-ui/visio";
+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";
 //#region packages/bindings/src/common.ts
@@ -145,7 +147,7 @@ function viewerStateSource(current) {
 }
 //#endregion
 //#region packages/bindings/src/solid.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$$1 = /*#__PURE__*/ template(`<div>`);
 /** Native Solid host and ownership; all document work remains in the shared binding. */
 function VisioViewer(props) {
 	let host;
@@ -181,7 +183,7 @@ function VisioViewer(props) {
 		}
 	});
 	return (() => {
-		var _el$ = _tmpl$();
+		var _el$ = _tmpl$$1();
 		var _ref$ = host;
 		typeof _ref$ === "function" ? use(_ref$, _el$) : host = _el$;
 		effect((_p$) => {
@@ -213,4 +215,369 @@ function createVisioViewerState(handle) {
 	return state;
 }
 //#endregion
-export { VisioViewer, createVisioViewerState };
+//#region packages/bindings/src/building-blocks.ts
+function buildingBlock(key) {
+	const value = Reflect.get(ui, key);
+	if (typeof value !== "function") throw new Error("Update ooxml-ui to use Visio building blocks.");
+	return value;
+}
+/** The mode a host sees: 'edit' only when permission is granted and the file can be saved back. */
+function effectiveMode(state) {
+	return buildingBlock("diagramMode")(state);
+}
+/** Framework-neutral ownership only; each adapter supplies its own reactive state. */
+function createBuildingBlockSession(initial = {}) {
+	const controller = new ViewerController(createWorkerParser());
+	controller.canEdit = initial.canEdit === true;
+	let options = initial;
+	let source;
+	let host = null;
+	let disposeCanvas;
+	let destroyed = false;
+	const stopEvents = controller.onEvent((name, detail) => {
+		if (name === "document-change") {
+			const change = detail;
+			options.onDocumentChange?.(change.document);
+			options.onDirtyChange?.(change.dirty);
+		} else if (name === "document-error") options.onDocumentError?.(detail);
+	});
+	const fit = () => {
+		if (host) buildingBlock("fitDiagramCanvas")(host, controller);
+	};
+	return {
+		controller,
+		mount(node) {
+			if (destroyed || node === host) return;
+			disposeCanvas?.();
+			disposeCanvas = void 0;
+			host = node;
+			if (node) disposeCanvas = buildingBlock("mountDiagramCanvas")(node, controller);
+		},
+		/** Flat control props; pass the framework's latest options so callbacks stay current. */
+		toolbar(latest = options) {
+			return buildingBlock("diagramToolbarProps")(controller, fit, latest.locale, {
+				onOpenFile: latest.onOpenFile,
+				onOpenPageSetup: latest.onOpenPageSetup,
+				onOpenSettings: latest.onOpenSettings,
+				onOpenShareDialog: latest.onOpenShareDialog
+			});
+		},
+		/** Acknowledge a host save: clears dirty and emits the dirty change. */
+		markClean() {
+			controller.markClean();
+		},
+		update(next) {
+			if (destroyed) return;
+			options = next;
+			controller.canEdit = next.canEdit === true;
+			if (source === next.content) return;
+			source = next.content;
+			controller.cancelLoad();
+			if (!source) return;
+			const input = source;
+			controller.loadSource(async () => {
+				return input instanceof Blob ? new Uint8Array(await input.arrayBuffer()) : input;
+			}).catch(() => {});
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			disposeCanvas?.();
+			disposeCanvas = void 0;
+			host = null;
+			stopEvents();
+			controller.destroy();
+		}
+	};
+}
+/** Resolve the new optional-control theme API only when that control is mounted. */
+function prepareDiagramBlock(host, kind) {
+	if (!host) return;
+	const prepare = Reflect.get(officeTheme, "prepareOfficeUiBlock");
+	if (typeof prepare !== "function") throw new Error("Update ooxml-ui to theme Visio building blocks.");
+	prepare(host, kind, "visio");
+}
+//#endregion
+//#region packages/bindings/src/toolbar-controls.ts
+var TOOLBAR_GROUPS = [
+	"file",
+	"history",
+	"zoom",
+	"selection",
+	"clipboard",
+	"tools",
+	"search"
+];
+var fire = (action) => () => {
+	Promise.resolve().then(action).catch(() => {});
+};
+var button = (id, label, enabled, action, pressed) => ({
+	kind: "button",
+	id,
+	label,
+	disabled: !enabled,
+	...pressed === void 0 ? {} : { pressed },
+	run: fire(action)
+});
+/**
+* What the library Toolbar shows, as plain data every framework maps onto its own elements.
+* Every control reflects `toolbarProps`: edit actions are disabled while the diagram is read-only,
+* viewing actions (zoom, fit, search) never are, and a host dialog button appears only when the
+* host supplied its callback.
+*/
+function toolbarGroups(props, include = TOOLBAR_GROUPS) {
+	const { labels } = props;
+	const has = props.pages.length > 0;
+	const groups = [];
+	const add = (id, controls) => {
+		if (include.includes(id) && controls.length) groups.push({
+			id,
+			controls
+		});
+	};
+	add("file", [
+		...props.onOpenFile ? [button("open", labels.Open, true, props.onOpenFile)] : [],
+		...props.onOpenPageSetup ? [button("page-setup", labels["Page Setup"], has, props.onOpenPageSetup)] : [],
+		...props.onOpenShareDialog ? [button("share", labels.Share, has, props.onOpenShareDialog)] : [],
+		...props.onOpenSettings ? [button("settings", labels.Options, true, props.onOpenSettings)] : []
+	]);
+	add("history", [button("undo", labels.Undo, props.canUndo, props.onUndo), button("redo", labels.Redo, props.canRedo, props.onRedo)]);
+	add("zoom", [
+		button("zoom-out", labels["Zoom Out"], props.canZoomOut, props.onZoomOut),
+		{
+			kind: "text",
+			id: "zoom",
+			text: `${Math.round(props.zoom * 100)}%`
+		},
+		button("zoom-in", labels["Zoom In"], props.canZoomIn, props.onZoomIn),
+		button("fit", labels["Fit to Window"], has, props.onFit)
+	]);
+	add("selection", [
+		button("duplicate", labels.Duplicate, props.canDuplicate, props.onDuplicate),
+		button("group", labels.Group, props.canGroup, props.onGroup),
+		button("ungroup", labels.Ungroup, props.canUngroup, props.onUngroup),
+		button("delete", labels.Delete, props.canDelete, props.onDelete)
+	]);
+	add("clipboard", [
+		button("cut", labels.Cut, props.canCut, props.onCut),
+		button("copy", labels.Copy, props.canCopy, props.onCopy),
+		button("paste", labels.Paste, props.canPaste, props.onPaste)
+	]);
+	add("tools", props.tools.map((tool) => button(`tool-${tool.id}`, tool.label, tool.id === "pointer" || props.canDraw, () => props.onToolChange(tool.id), tool.active)));
+	const { search } = props;
+	add("search", [{
+		kind: "search",
+		id: "search",
+		label: labels.Find,
+		query: search.query,
+		summary: search.query ? search.resultCount ? `${search.activeIndex >= 0 ? search.activeIndex + 1 : "-"} / ${search.resultCount}` : "0" : "",
+		previous: button("search-previous", labels["Previous Result"], search.resultCount > 0, props.onPreviousSearchResult),
+		next: button("search-next", labels["Next Result"], search.resultCount > 0, props.onNextSearchResult),
+		change: (query) => props.onSearchChange(query)
+	}]);
+	return groups;
+}
+//#endregion
+//#region packages/solid/src/building-blocks.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+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(options());
+	const [state, setState] = createSignal(session.controller.state);
+	const stop = session.controller.subscribe((value) => setState(() => value));
+	createEffect(() => session.update(options()));
+	onCleanup(() => {
+		stop();
+		session.destroy();
+	});
+	const toolbarProps = createMemo(() => {
+		state();
+		return session.toolbar(options());
+	});
+	return {
+		controller: session.controller,
+		state,
+		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,
+		/** Effective permission: host `canEdit` and a drawing that can be saved back. */
+		mode: () => effectiveMode(state())
+	};
+}
+function DiagramCanvas(props) {
+	let host;
+	createEffect(() => {
+		const mount = props.mount;
+		mount(host);
+		onCleanup(() => mount(null));
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		var _ref$ = host;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : host = _el$;
+		effect(() => className(_el$, props.class));
+		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$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$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$0 = _tmpl$7();
+				insert(_el$0, () => page.name);
+				effect(() => _el$0.value = index());
+				return _el$0;
+			})()
+		}));
+		effect(() => setAttribute(_el$9, "aria-label", props.labels.Page));
+		effect(() => _el$9.value = props.pageIndex);
+		return _el$9;
+	})();
+}
+function Inspector(props) {
+	let host;
+	createEffect(() => {
+		const stop = buildingBlock("mountDiagramInspector")(host, props.controller);
+		onCleanup(stop);
+	});
+	return (() => {
+		var _el$1 = _tmpl$();
+		var _ref$2 = host;
+		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", "input"]);
+//#endregion
+export { DiagramCanvas, Inspector, PageNavigation, ShapesPane, Toolbar, VisioViewer, createViewerBuildingBlocks, createVisioViewerState };

package/dist/index.server.js

@@ -1,6 +1,8 @@
-import { mountViewer, propertyKeys } from "ooxml-ui/visio";
-import { escape, ssr, ssrAttribute, ssrHydrationKey, ssrStyle } from "solid-js/web";
-import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+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, Index, Match, Switch, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import "ooxml-ui/theme";
 export * from "ooxml-ui/visio";
 export * from "visio-core";
 //#region packages/bindings/src/common.ts
@@ -145,7 +147,7 @@ function viewerStateSource(current) {
 }
 //#endregion
 //#region packages/bindings/src/solid.tsx
-var _tmpl$ = [
+var _tmpl$$1 = [
 	"<div",
 	" style=\"",
 	"\"",
@@ -185,7 +187,7 @@ function VisioViewer(props) {
 			mounted?.destroy();
 		}
 	});
-	return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), ssrStyle(props.style), ssrAttribute("aria-label", escape(props["aria-label"], true), false));
+	return ssr(_tmpl$$1, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), ssrStyle(props.style), ssrAttribute("aria-label", escape(props["aria-label"], true), false));
 }
 /**
 * Reactive viewer state as a Solid accessor for a handle accessor (for example a signal set by
@@ -202,4 +204,319 @@ function createVisioViewerState(handle) {
 	return state;
 }
 //#endregion
-export { VisioViewer, createVisioViewerState };
+//#region packages/bindings/src/building-blocks.ts
+function buildingBlock(key) {
+	const value = Reflect.get(ui, key);
+	if (typeof value !== "function") throw new Error("Update ooxml-ui to use Visio building blocks.");
+	return value;
+}
+/** The mode a host sees: 'edit' only when permission is granted and the file can be saved back. */
+function effectiveMode(state) {
+	return buildingBlock("diagramMode")(state);
+}
+/** Framework-neutral ownership only; each adapter supplies its own reactive state. */
+function createBuildingBlockSession(initial = {}) {
+	const controller = new ViewerController(createWorkerParser());
+	controller.canEdit = initial.canEdit === true;
+	let options = initial;
+	let source;
+	let host = null;
+	let disposeCanvas;
+	let destroyed = false;
+	const stopEvents = controller.onEvent((name, detail) => {
+		if (name === "document-change") {
+			const change = detail;
+			options.onDocumentChange?.(change.document);
+			options.onDirtyChange?.(change.dirty);
+		} else if (name === "document-error") options.onDocumentError?.(detail);
+	});
+	const fit = () => {
+		if (host) buildingBlock("fitDiagramCanvas")(host, controller);
+	};
+	return {
+		controller,
+		mount(node) {
+			if (destroyed || node === host) return;
+			disposeCanvas?.();
+			disposeCanvas = void 0;
+			host = node;
+			if (node) disposeCanvas = buildingBlock("mountDiagramCanvas")(node, controller);
+		},
+		/** Flat control props; pass the framework's latest options so callbacks stay current. */
+		toolbar(latest = options) {
+			return buildingBlock("diagramToolbarProps")(controller, fit, latest.locale, {
+				onOpenFile: latest.onOpenFile,
+				onOpenPageSetup: latest.onOpenPageSetup,
+				onOpenSettings: latest.onOpenSettings,
+				onOpenShareDialog: latest.onOpenShareDialog
+			});
+		},
+		/** Acknowledge a host save: clears dirty and emits the dirty change. */
+		markClean() {
+			controller.markClean();
+		},
+		update(next) {
+			if (destroyed) return;
+			options = next;
+			controller.canEdit = next.canEdit === true;
+			if (source === next.content) return;
+			source = next.content;
+			controller.cancelLoad();
+			if (!source) return;
+			const input = source;
+			controller.loadSource(async () => {
+				return input instanceof Blob ? new Uint8Array(await input.arrayBuffer()) : input;
+			}).catch(() => {});
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			disposeCanvas?.();
+			disposeCanvas = void 0;
+			host = null;
+			stopEvents();
+			controller.destroy();
+		}
+	};
+}
+//#endregion
+//#region packages/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 = [
+	"<span",
+	">",
+	"</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$7 = [
+	"<option",
+	">",
+	"</option>"
+];
+function createViewerBuildingBlocks(options = () => ({})) {
+	const session = createBuildingBlockSession(options());
+	const [state, setState] = createSignal(session.controller.state);
+	const stop = session.controller.subscribe((value) => setState(() => value));
+	createEffect(() => session.update(options()));
+	onCleanup(() => {
+		stop();
+		session.destroy();
+	});
+	const toolbarProps = createMemo(() => {
+		state();
+		return session.toolbar(options());
+	});
+	return {
+		controller: session.controller,
+		state,
+		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,
+		/** Effective permission: host `canEdit` and a drawing that can be saved back. */
+		mode: () => effectiveMode(state())
+	};
+}
+function DiagramCanvas(props) {
+	let host;
+	createEffect(() => {
+		const mount = props.mount;
+		mount(host);
+		onCleanup(() => mount(null));
+	});
+	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) {
+	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$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$7, ssrHydrationKey() + ssrAttribute("value", escape(index(), true), false), escape(page.name))
+	})));
+}
+function Inspector(props) {
+	let host;
+	createEffect(() => {
+		const stop = buildingBlock("mountDiagramInspector")(host, props.controller);
+		onCleanup(stop);
+	});
+	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, ShapesPane, Toolbar, VisioViewer, createViewerBuildingBlocks, createVisioViewerState };

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

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

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

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

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

@@ -0,0 +1,100 @@
+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>;
+    canvasProps: {
+        mount: (node: HTMLElement | null) => void;
+    };
+    toolbarProps: Accessor<{
+        labels: Readonly<Record<"Arc" | "Copy" | "Cut" | "Delete" | "Duplicate" | "Ellipse" | "Find" | "Fit to Window" | "Freeform" | "Group" | "Line" | "Next Result" | "Open" | "Options" | "Page" | "Page Setup" | "Paste" | "Pencil" | "Pointer Tool" | "Previous Result" | "Rectangle" | "Redo" | "Shapes" | "Share" | "Undo" | "Ungroup" | "Zoom In" | "Zoom Out", string>>;
+        mode: import("ooxml-ui/visio").DiagramMode;
+        canEdit: boolean;
+        pageIndex: number;
+        pages: {
+            id: string;
+            name: string;
+        }[];
+        zoom: number;
+        selection: readonly import("ooxml-ui/visio").VisioShapeSelection[];
+        canUndo: boolean;
+        canRedo: boolean;
+        canDuplicate: boolean;
+        canGroup: boolean;
+        canUngroup: boolean;
+        canDelete: boolean;
+        canCut: boolean;
+        canCopy: boolean;
+        canPaste: boolean;
+        canDraw: boolean;
+        canZoomIn: boolean;
+        canZoomOut: boolean;
+        tool: import("ooxml-ui/visio").DiagramTool;
+        tools: import("ooxml-ui/visio").DiagramToolSummary[];
+        search: {
+            query: string;
+            resultCount: number;
+            activeIndex: number;
+            truncated: boolean;
+        };
+        onPageChange: (index: number) => void;
+        onZoomChange: (zoom: number) => void;
+        onZoomIn: () => void;
+        onZoomOut: () => void;
+        onFit: () => void;
+        onUndo: () => Promise<void>;
+        onRedo: () => Promise<void>;
+        onDuplicate: () => Promise<void>;
+        onGroup: () => Promise<void>;
+        onUngroup: () => Promise<void>;
+        onDelete: () => Promise<void>;
+        onCut: () => Promise<void>;
+        onCopy: () => Promise<void>;
+        onPaste: () => Promise<void>;
+        onToolChange: (tool: import("ooxml-ui/visio").DiagramTool) => void;
+        onTextChange: (pageId: string, shapeId: string, text: string) => Promise<void>;
+        onSearchChange: (query: string) => void;
+        onNextSearchResult: () => void;
+        onPreviousSearchResult: () => void;
+        canOpenFile: boolean;
+        canOpenPageSetup: boolean;
+        canOpenSettings: boolean;
+        canOpenShareDialog: boolean;
+        onOpenFile?: () => void;
+        onOpenPageSetup?: () => void;
+        onOpenSettings?: () => void;
+        onOpenShareDialog?: () => void;
+    }>;
+    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;
+/** 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 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/dist/types/packages/solid/src/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "visio-solid-viewer",
-	"version": "0.7.4",
+	"version": "1.0.0",
 	"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.19.2",
-		"ooxml-ui": "^1.18.3",
-		"visio-core": "^0.4.1"
+		"ooxml-core": "^1.22.0",
+		"ooxml-ui": "^1.21.0",
+		"visio-core": "^1.0.0"
 	},
 	"peerDependencies": {
 		"solid-js": "^1.9.0"