@likec4/diagram 1.59.1 → 1.59.3

package/README.md

@@ -272,6 +272,59 @@ function App() {
 }
 ```
 
+### Manual layout controls
+
+Use `useDiagramCompareLayout` in a component rendered inside `LikeC4Diagram`
+to place the built-in manual-layout behavior in custom application chrome. The
+hook provides comparison availability and activity, drift reasons, the current
+layout type, whether the latest model can be applied, and the corresponding
+actions.
+
+```tsx
+import { LikeC4Diagram, useDiagramCompareLayout } from '@likec4/diagram'
+
+function LayoutControls() {
+  const [state, actions] = useDiagramCompareLayout()
+
+  if (!state.isEnabled) {
+    return null
+  }
+
+  return (
+    <div>
+      <button onClick={() => actions.toggleCompare()}>
+        {state.isActive ? 'Stop comparing' : 'Compare with latest'}
+      </button>
+      <button
+        disabled={state.layout === 'auto' ||
+          !state.canApplyLatest ||
+          !state.hasEditor ||
+          !state.isEditable}
+        onClick={actions.applyLatestToManual}
+      >
+        Apply latest
+      </button>
+      <button onClick={actions.resetManualLayout}>Reset manual layout</button>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <LikeC4Diagram
+      view={view}
+      onLayoutTypeChange={setLayoutType}
+    >
+      <LayoutControls />
+    </LikeC4Diagram>
+  )
+}
+```
+
+The hook reuses the same controller as LikeC4's built-in compare panel. It
+requires comparison to be enabled for the diagram and an editor provider for
+actions that modify a saved manual layout.
+
 ## Customization
 
 ### Custom node renderer

package/dist/LikeC4Styles.js

@@ -47,10 +47,11 @@ function LikeC4Styles({ id }) {
 	const rootSelector = `#${id}`;
 	const nonce = useMantineStyleNonce()?.();
 	const $styles = useLikeC4Styles();
+	const colorsStyles = useMemo(() => generateBuiltInColorStyles($styles, rootSelector), [rootSelector, $styles.fingerprint]);
 	return /* @__PURE__ */ jsx(MemoizedStyle, {
 		id,
 		nonce,
-		colorsStyles: useMemo(() => generateBuiltInColorStyles($styles, rootSelector), [rootSelector, $styles.fingerprint])
+		colorsStyles
 	});
 }
 /**

package/dist/base/BaseXYFlow.js

@@ -114,6 +114,12 @@ function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pan
 		onNodesChange,
 		onEdgesChange,
 		onMoveEnd: useCallbackRef((event, { x, y, zoom }) => {
+			/**
+			* WORKAROUND
+			* Viewport transform is not rounded to integers which results in blurry nodes on some resolution
+			* https://github.com/xyflow/xyflow/issues/3282
+			* https://github.com/likec4/likec4/issues/734
+			*/
 			const roundedX = roundDpr(x);
 			const roundedY = roundDpr(y);
 			if (x !== roundedX || y !== roundedY) xystore.setState({ transform: [
@@ -190,7 +196,8 @@ function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pan
 }
 var selectDimensions = ({ width, height }) => (width || 1) * (height || 1);
 var ViewportResizeHanlder = ({ onViewportResize }) => {
-	useUpdateEffect(onViewportResize, [useStore(selectDimensions)]);
+	const square = useStore(selectDimensions);
+	useUpdateEffect(onViewportResize, [square]);
 	return null;
 };
 //#endregion

package/dist/base-primitives/compound/CompoundNodeContainer.js

@@ -13,10 +13,9 @@ function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered = false
 		max: 100
 	});
 	const isTransparent = opacity < 98;
-	const MIN_OPACITY = 50;
-	const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * (opacity / 100), {
+	const borderOpacity = 50 + clamp(50 * (opacity / 100), {
 		min: 0,
-		max: 100 - MIN_OPACITY
+		max: 50
 	});
 	const compoundClass = compoundNode({
 		isTransparent,

package/dist/base-primitives/compound/CompoundTitle.js

@@ -3,13 +3,14 @@ import { IconRenderer } from "../../context/IconRenderer.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/base-primitives/compound/CompoundTitle.tsx
 function CompoundTitle({ data, "aria-hidden": ariaHidden }) {
+	const elementIcon = IconRenderer({
+		element: data,
+		className: "likec4-compound-icon"
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "likec4-compound-title-container",
 		"aria-hidden": ariaHidden,
-		children: [IconRenderer({
-			element: data,
-			className: "likec4-compound-icon"
-		}), /* @__PURE__ */ jsx("div", {
+		children: [elementIcon, /* @__PURE__ */ jsx("div", {
 			className: "likec4-compound-title",
 			children: data.title
 		})]

package/dist/base-primitives/element/ElementData.js

@@ -22,16 +22,21 @@ var resolveIconColor = (styles, data) => {
 	const colors = styles.colors(iconColor).elements;
 	return iconColor === data.color ? colors.stroke : colors.fill;
 };
+function shouldBlendIconWithPalette(icon, hasIconColor) {
+	return !hasIconColor && icon?.startsWith("bootstrap:") === true;
+}
 var Root = forwardRef(({ className, style, data, ...props }, ref) => {
 	const styles = useLikeC4Styles();
 	const iconSize = data.style.iconSize ? styles.nodeSizes(data.style).values.iconSize : void 0;
 	const resolvedIconColor = resolveIconColor(styles, data);
+	const hasIconColor = !!resolvedIconColor;
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		ref,
 		className: cx(className, elementNodeData({
 			iconPosition: data.style.iconPosition,
-			withIconColor: !!resolvedIconColor
+			withIconColor: hasIconColor,
+			withIconBlend: shouldBlendIconWithPalette(data.icon, hasIconColor)
 		}), "likec4-element"),
 		style: {
 			...style,

package/dist/base-primitives/element/ElementShape.js

@@ -22,7 +22,8 @@ function cylinderSVGPath(diameter, height, tilt = .07) {
 	};
 }
 function docSVGPath(width, height) {
-	const baseY = roundDpr(height - height / 8 / 2);
+	const waveHeight = height / 8;
+	const baseY = roundDpr(height - waveHeight / 2);
 	const amplitude = roundDpr(height / 6);
 	const radius = 6;
 	return { path: `
@@ -302,15 +303,13 @@ function ShapeSvgOutline({ shape, w, h }) {
 				children: /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w + 6, h + 6).path })
 			});
 			break;
-		default:
-			svg = /* @__PURE__ */ jsx("rect", {
-				x: -3,
-				y: -3,
-				width: w + 6,
-				height: h + 6,
-				rx: 8
-			});
-			break;
+		default: svg = /* @__PURE__ */ jsx("rect", {
+			x: -3,
+			y: -3,
+			width: w + 6,
+			height: h + 6,
+			rx: 8
+		});
 	}
 	return /* @__PURE__ */ jsx("g", {
 		className: "likec4-shape-outline",

package/dist/context/CurrentViewModelProvider.js

@@ -5,8 +5,9 @@ import { jsx } from "react/jsx-runtime";
 //#region src/context/CurrentViewModelProvider.tsx
 function CurrentViewModelProvider({ children }) {
 	const viewId = useCurrentViewId();
+	const viewmodel = useOptionalLikeC4Model()?.findView(viewId) ?? null;
 	return /* @__PURE__ */ jsx(CurrentViewModelContext, {
-		value: useOptionalLikeC4Model()?.findView(viewId) ?? null,
+		value: viewmodel,
 		children
 	});
 }

package/dist/context/DiagramEventHandlers.js

@@ -26,13 +26,14 @@ var DiagramEventHandlersReactContext = createContext({
 });
 function DiagramEventHandlers({ handlers, children }) {
 	const handlersRef = useSyncedRef(handlers);
+	const deps = HandlerNames.map((name) => isFunction(handlers[name]));
 	const value = useMemo(() => ({
 		...mapToObj(HandlerNames, (name) => {
 			if (handlersRef.current[name]) return [name, (...args) => handlersRef.current[name]?.(...args)];
 			return [name, null];
 		}),
 		handlersRef
-	}), [handlersRef, ...HandlerNames.map((name) => isFunction(handlers[name]))]);
+	}), [handlersRef, ...deps]);
 	return /* @__PURE__ */ jsx(DiagramEventHandlersRefContext.Provider, {
 		value: handlersRef,
 		children: /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, {

package/dist/context/IconRenderer.js

@@ -26,23 +26,6 @@ function IconRendererProvider({ value, children }) {
 		children
 	});
 }
-/**
-* Attempts to extract and decode SVG content from a data URL.
-* Returns the decoded SVG string if successful, or null if not an SVG data URL.
-*/
-function decodeSvgDataUrl(dataUrl) {
-	if (!dataUrl.startsWith("data:image/svg+xml")) return null;
-	try {
-		if (dataUrl.includes(";base64,")) {
-			const base64Content = dataUrl.split(";base64,")[1];
-			if (base64Content) return atob(base64Content);
-		} else {
-			const encodedContent = dataUrl.split(",")[1];
-			if (encodedContent) return decodeURIComponent(encodedContent);
-		}
-	} catch {}
-	return null;
-}
 function IconRenderer({ element, className, style }) {
 	const RenderIcon = useContext(IconRendererContext);
 	if (!element || !element.icon || element.icon === "none") return null;
@@ -65,9 +48,7 @@ function IconRenderer({ element, className, style }) {
 		case !!RenderIcon:
 			icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
 			break;
-		default:
-			icon = null;
-			break;
+		default: icon = null;
 	}
 	if (!icon) return null;
 	return /* @__PURE__ */ jsx("div", {
@@ -104,14 +85,49 @@ function IconOrShapeRenderer({ element, className, style }) {
 		style
 	});
 }
-function SvgDataUrlIcon({ dataUrl, ...props }) {
-	const svgContent = useMemo(() => decodeSvgDataUrl(dataUrl), [dataUrl]);
-	if (!svgContent) return null;
+function SvgDataUrlIcon({ dataUrl, alt }) {
+	if (!useMemo(() => hasCurrentColorReference(dataUrl), [dataUrl])) return /* @__PURE__ */ jsx("img", {
+		src: dataUrl,
+		alt
+	});
+	const maskUrl = `url(${JSON.stringify(dataUrl)})`;
 	return /* @__PURE__ */ jsx("span", {
-		...props,
-		style: { display: "contents" },
-		dangerouslySetInnerHTML: { __html: svgContent }
+		role: alt ? "img" : void 0,
+		"aria-label": alt,
+		style: {
+			display: "inline-block",
+			width: "100%",
+			height: "100%",
+			backgroundColor: "currentColor",
+			maskImage: maskUrl,
+			maskRepeat: "no-repeat",
+			maskPosition: "center",
+			maskSize: "contain",
+			WebkitMaskImage: maskUrl,
+			WebkitMaskRepeat: "no-repeat",
+			WebkitMaskPosition: "center",
+			WebkitMaskSize: "contain"
+		}
 	});
 }
+function hasCurrentColorReference(dataUrl) {
+	return /currentcolor/i.test(decodeSvgDataUrl(dataUrl) ?? "");
+}
+function decodeSvgDataUrl(dataUrl) {
+	if (!dataUrl.startsWith("data:image/svg+xml")) return null;
+	try {
+		const comma = dataUrl.indexOf(",");
+		if (comma === -1) return null;
+		const payload = dataUrl.slice(comma + 1);
+		if (dataUrl.slice(0, comma).endsWith(";base64")) return new TextDecoder().decode(Uint8Array.from(atob(payload), (c) => c.charCodeAt(0)));
+		try {
+			return decodeURIComponent(payload);
+		} catch {
+			return payload;
+		}
+	} catch {
+		return null;
+	}
+}
 //#endregion
 export { IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/TagStylesContext.d.ts

@@ -1,6 +1,7 @@
 import { TagSpecification } from '@likec4/core';
+import { LikeC4Styles } from '@likec4/core/styles';
 import { PropsWithChildren } from 'react';
-export declare function generateColorVars(spec: TagSpecification): string;
+export declare function generateColorVars(spec: TagSpecification, styles?: LikeC4Styles): string;
 export declare function TagStylesProvider({ children, id }: PropsWithChildren<{
     id: string;
 }>): import("react").JSX.Element;

package/dist/context/TagStylesContext.js

@@ -1,49 +1,61 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useLikeC4Specification } from "../hooks/useLikeC4Model.js";
+import { useLikeC4Styles } from "../hooks/useLikeC4Styles.js";
 import { createContext, memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { entries, flatMap, isEmpty, join, pipe } from "remeda";
 import { isTagColorSpecified } from "@likec4/core";
 import { useMantineStyleNonce } from "@mantine/core";
-import { DefaultTagColors, getContrastedColorsAPCA, isValidColor } from "@likec4/core/styles";
+import { DefaultTagColors, LikeC4Styles, getContrastedColorsAPCA, isValidColor } from "@likec4/core/styles";
 //#region src/context/TagStylesContext.tsx
 var radixColors = DefaultTagColors;
-function generateColorVars(spec) {
+function generateColorVars(spec, styles = LikeC4Styles.DEFAULT) {
 	const color = spec.color;
 	if (isTagColorSpecified(spec) && isValidColor(color)) return `
       --colors-likec4-tag-bg: ${color};
       --colors-likec4-tag-bg-hover: color-mix(in oklab, ${color}, var(--colors-likec4-mix-color) 20%);
       --colors-likec4-tag-text: ${getContrastedColorsAPCA(color).hiContrast};
     `;
-	if (!radixColors.includes(color)) return "";
-	let textcolor = `var(--colors-${color}-12)`;
-	if ([
-		"mint",
-		"grass",
-		"lime",
-		"yellow",
-		"amber"
-	].includes(color)) textcolor = "rgba(0 0 0 / 0.85)";
-	return `
-  --colors-likec4-tag-border: var(--colors-${color}-8);
-  --colors-likec4-tag-bg: var(--colors-${color}-9);
-  --colors-likec4-tag-bg-hover: var(--colors-${color}-10);
-  --colors-likec4-tag-text: ${textcolor};
-  `;
+	if (radixColors.includes(color)) {
+		let textcolor = `var(--colors-${color}-12)`;
+		if ([
+			"mint",
+			"grass",
+			"lime",
+			"yellow",
+			"amber"
+		].includes(color)) textcolor = "rgba(0 0 0 / 0.85)";
+		return `
+    --colors-likec4-tag-border: var(--colors-${color}-8);
+    --colors-likec4-tag-bg: var(--colors-${color}-9);
+    --colors-likec4-tag-bg-hover: var(--colors-${color}-10);
+    --colors-likec4-tag-text: ${textcolor};
+    `;
+	}
+	if (styles.isThemeColor(color)) {
+		const { fill, hiContrast } = styles.tagColor(color);
+		return `
+    --colors-likec4-tag-bg: ${fill};
+    --colors-likec4-tag-bg-hover: color-mix(in oklab, ${fill}, var(--colors-likec4-mix-color) 20%);
+    --colors-likec4-tag-text: ${hiContrast};
+    `;
+	}
+	return "";
 }
 var TagStylesContext = createContext({});
-function generateStylesheet(tags, rootSelector) {
+function generateStylesheet(tags, rootSelector, styles) {
 	if (!tags || isEmpty(tags)) return "";
 	return pipe(entries(tags), flatMap(([tag, spec]) => [
 		`:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
-		generateColorVars(spec),
+		generateColorVars(spec, styles),
 		"}"
 	]), join("\n"));
 }
 function TagStylesProvider({ children, id }) {
 	const tags = useLikeC4Specification().tags;
+	const styles = useLikeC4Styles();
 	const nonce = useMantineStyleNonce()?.();
-	const stylesheet = generateStylesheet(tags, `#${id}`);
+	const stylesheet = generateStylesheet(tags, `#${id}`, styles);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, {
 		nonce,
 		stylesheet

package/dist/custom/index.js

@@ -9,10 +9,10 @@ import { useDiagramContext, useOnDiagramEvent } from "../hooks/useDiagram.js";
 import { useCurrentView, useCurrentViewId } from "../hooks/useCurrentView.js";
 import { useOptionalCurrentViewModel, useOptionalLikeC4Model } from "../context/LikeC4ModelContext.js";
 import { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from "../hooks/useLikeC4Model.js";
+import { useLikeC4Styles } from "../hooks/useLikeC4Styles.js";
 import { ErrorBoundary, ErrorFallback } from "../components/ErrorFallback.js";
 import { useCurrentViewModel } from "../hooks/useCurrentViewModel.js";
 import { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from "../hooks/useLikeC4Project.js";
-import { useLikeC4Styles } from "../hooks/useLikeC4Styles.js";
 import { CompoundActionButton } from "../base-primitives/compound/CompoundActionButton.js";
 import { CompoundDetailsButton } from "../base-primitives/compound/CompoundDetailsButton.js";
 import { CompoundNodeContainer } from "../base-primitives/compound/CompoundNodeContainer.js";

package/dist/editor/LikeC4EditorCallbacks.d.ts

@@ -1,4 +1,19 @@
 import type * as t from '@likec4/core/types';
+/**
+ * Result of applying a change from the LikeC4 Editor.
+ */
+export interface LikeC4EditorChangeResult {
+    /**
+     * Whether applying the change will publish a refreshed view to the diagram
+     * that the editor should wait for.
+     *
+     * Returning no result from `handleChange` defaults this to `true`,
+     * preserving the existing behavior for integrations that persist changes
+     * through an external model service.
+     */
+    waitForViewSync: boolean;
+}
+export declare function shouldWaitForViewSync(result?: void | LikeC4EditorChangeResult): boolean;
 /**
  * Callbacks from LikeC4 Editor.
  */
@@ -17,7 +32,11 @@ export interface LikeC4EditorCallbacks {
     fetchView(viewId: t.ViewId, layout?: t.LayoutType): t.LayoutedView | Promise<t.LayoutedView>;
     /**
      * Callback invoked when the view changes.
+     *
+     * Return `{ waitForViewSync: false }` when the integration applies the
+     * change locally and will not publish a refreshed view. When changes are
+     * batched, the editor waits if any callback invocation expects a refresh.
      */
-    handleChange(viewId: t.ViewId, change: t.ViewChange): void | Promise<void>;
+    handleChange(viewId: t.ViewId, change: t.ViewChange): void | LikeC4EditorChangeResult | Promise<void | LikeC4EditorChangeResult>;
 }
 export declare function createLikeC4Editor(callbacks: LikeC4EditorCallbacks): LikeC4EditorCallbacks;

package/dist/editor/LikeC4EditorCallbacks.js

@@ -1,7 +1,10 @@
 import "../_virtual/_rolldown/runtime.js";
 //#region src/editor/LikeC4EditorCallbacks.tsx
+function shouldWaitForViewSync(result) {
+	return result?.waitForViewSync ?? true;
+}
 function createLikeC4Editor(callbacks) {
 	return callbacks;
 }
 //#endregion
-export { createLikeC4Editor };
+export { createLikeC4Editor, shouldWaitForViewSync };

package/dist/editor/actor/setup.d.ts

@@ -39,6 +39,7 @@ export declare namespace EditorCalls {
         type Output = {
             requested: t.ViewChange[];
             applied: t.ViewChange[];
+            waitForViewSync: boolean;
         };
     }
 }

package/dist/editor/actor/setup.js

@@ -2,6 +2,22 @@ import "../../_virtual/_rolldown/runtime.js";
 import { defineActors } from "../../utils/defineActors.js";
 import { hotkey } from "./hotkey.js";
 import { fromPromise, setup } from "xstate";
+//#region src/editor/actor/setup.ts
+var applyLatest = fromPromise(() => {
+	throw new Error("Not implemented");
+});
+var executeChange = fromPromise(() => {
+	throw new Error("Not implemented");
+});
+var applySemanticLayout = fromPromise(() => {
+	throw new Error("Not implemented");
+});
+var actors = defineActors({
+	hotkey,
+	applyLatest,
+	executeChange,
+	applySemanticLayout
+});
 var machine = setup({
 	types: {
 		context: {},
@@ -11,18 +27,7 @@ var machine = setup({
 		children: {},
 		tags: ""
 	},
-	actors: defineActors({
-		hotkey,
-		applyLatest: fromPromise(() => {
-			throw new Error("Not implemented");
-		}),
-		executeChange: fromPromise(() => {
-			throw new Error("Not implemented");
-		}),
-		applySemanticLayout: fromPromise(() => {
-			throw new Error("Not implemented");
-		})
-	}),
+	actors,
 	delays: {
 		"500ms": 500,
 		"wait-after-edit": 1e3

package/dist/editor/actor/state.sync-queue.js

@@ -229,6 +229,7 @@ var process = machine.createStateConfig({
 						type: "update.view-bounds",
 						bounds: lastSyncSnapshot.layout.bounds
 					});
+					if (!event.output.waitForViewSync) enqueue.raise({ type: "view.synched" });
 				}),
 				target: "waitViewSynced"
 			},

package/dist/editor/applyChangesToManualLayout.js

@@ -153,7 +153,7 @@ function edgeControlPoints(source, target) {
 	if (source === target) {
 		const loopSize = 80;
 		const centerOfTopBoundary = vector(0, source.height || 0).multiply(-.5).add(sourceCenter);
-		return [centerOfTopBoundary.add(vector(-80 / 2.5, -80)).trunc().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -80)).trunc().toObject()];
+		return [centerOfTopBoundary.add(vector(-32, -80)).trunc().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -80)).trunc().toObject()];
 	}
 	const sourceToTargetVector = targetCenter.subtract(sourceCenter);
 	const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);

package/dist/editor/index.d.ts

@@ -1,5 +1,5 @@
 export type * from './actor/machine';
 export type * from './actor/types';
 export { createLikeC4Editor } from './LikeC4EditorCallbacks';
-export type { LikeC4EditorCallbacks } from './LikeC4EditorCallbacks';
+export type { LikeC4EditorCallbacks, LikeC4EditorChangeResult, } from './LikeC4EditorCallbacks';
 export { EnsureEditorContext, LikeC4EditorProvider, useOptionalLikeC4Editor, } from './LikeC4EditorProvider';

package/dist/editor/useEditorActorLogic.js

@@ -1,5 +1,6 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useCallbackRef } from "../hooks/useCallbackRef.js";
+import { shouldWaitForViewSync } from "./LikeC4EditorCallbacks.js";
 import { useOptionalLikeC4Editor } from "./LikeC4EditorProvider.js";
 import { editorActorLogic } from "./actor/machine.js";
 import { applyChangesToManualLayout } from "./applyChangesToManualLayout.js";
@@ -18,7 +19,9 @@ function useEditorActorLogic() {
 			console.error("No editor port available for applying latest to manual layout");
 			throw new Error("No editor port");
 		}
-		return { updated: applyChangesToManualLayout(await promisify(() => current ?? port.fetchView(viewId, "manual")), await promisify(() => port.fetchView(viewId, "auto"))) };
+		const manual = await promisify(() => current ?? port.fetchView(viewId, "manual"));
+		const latest = await promisify(() => port.fetchView(viewId, "auto"));
+		return { updated: applyChangesToManualLayout(manual, latest) };
 	});
 	const executeChange = useCallbackRef(async ({ input }) => {
 		if (!port) {
@@ -26,18 +29,22 @@ function useEditorActorLogic() {
 			throw new Error("No editor port");
 		}
 		const applied = [];
+		let waitForViewSync = false;
 		for (const change of input.changes) try {
-			await promisify(() => port.handleChange(input.viewId, change));
+			const result = await promisify(() => port.handleChange(input.viewId, change));
 			applied.push(change);
+			waitForViewSync ||= shouldWaitForViewSync(result);
 		} catch (error) {
 			console.error("Failed to execute change", {
 				change,
 				error
 			});
+			waitForViewSync ||= shouldWaitForViewSync();
 		}
 		return {
 			requested: input.changes,
-			applied
+			applied,
+			waitForViewSync
 		};
 	});
 	const applySemanticLayout = useCallbackRef(async ({ input }) => {

package/dist/hooks/useDiagram.js

@@ -17,7 +17,8 @@ function selectDiagramActor(selector) {
 * @deprecated use {@link useDiagramSelector}
 */
 function useDiagramSnapshot(selector, compare = shallowEqual) {
-	return useSelector(useDiagramActorRef(), selector, compare);
+	const actorRef = useDiagramActorRef();
+	return useSelector(actorRef, selector, compare);
 }
 /**
 * Helper to create a selector for diagram actor snapshot
@@ -33,7 +34,8 @@ function selectDiagramActorContext(selector) {
 function useDiagramContext(selector, compare = shallowEqual, deps = []) {
 	const actorRef = useDiagramActorRef();
 	const selectorRef = useCallbackRef(selector);
-	return useSelector(actorRef, useCallback((s) => selectorRef(s.context), deps), compare);
+	const select = useCallback((s) => selectorRef(s.context), deps);
+	return useSelector(actorRef, select, compare);
 }
 /**
 * Subscribe to diagram emitted events

package/dist/hooks/useDiagramCompareLayout.d.ts

@@ -1,11 +1,11 @@
 import { DiagramActorSnapshot } from '../likec4diagram/state/types';
 import type * as t from '@likec4/core/types';
-declare const selectCompareLayoutState: ({ context }: DiagramActorSnapshot) => {
+export declare const selectCompareLayoutState: ({ context }: DiagramActorSnapshot) => {
     isEnabled: false;
     hasEditor: false;
     isEditable: false;
     isActive: false;
-    drifts: never;
+    drifts: null;
     canApplyLatest: boolean;
     layout: t.LayoutType;
 } | {
@@ -17,7 +17,13 @@ declare const selectCompareLayoutState: ({ context }: DiagramActorSnapshot) => {
     canApplyLatest: boolean;
     layout: t.LayoutType;
 };
+/**
+ * Current manual-layout comparison state exposed by {@link useDiagramCompareLayout}.
+ */
 export type DiagramCompareLayoutState = ReturnType<typeof selectCompareLayoutState>;
+/**
+ * Manual-layout actions exposed by {@link useDiagramCompareLayout}.
+ */
 export type DiagramCompareLayoutOps = {
     /**
      * Toggles the compare mode on or off.
@@ -36,8 +42,12 @@ export type DiagramCompareLayoutOps = {
      */
     resetManualLayout: () => void;
 };
+/**
+ * Controls LikeC4's manual-layout comparison from custom diagram children.
+ *
+ * The hook must be called by a component rendered inside {@link LikeC4Diagram}.
+ */
 export declare function useDiagramCompareLayout(): [
     DiagramCompareLayoutState,
     DiagramCompareLayoutOps
 ];
-export {};

package/dist/hooks/useDiagramCompareLayout.js

@@ -28,6 +28,11 @@ var selectCompareLayoutState = ({ context }) => {
 		layout: context.view._layout ?? "auto"
 	};
 };
+/**
+* Controls LikeC4's manual-layout comparison from custom diagram children.
+*
+* The hook must be called by a component rendered inside {@link LikeC4Diagram}.
+*/
 function useDiagramCompareLayout() {
 	const actorRef = useDiagramActorRef();
 	const state = useSelector(actorRef, selectCompareLayoutState, shallowEqual);
@@ -78,4 +83,4 @@ function useDiagramCompareLayout() {
 	}];
 }
 //#endregion
-export { useDiagramCompareLayout };
+export { selectCompareLayoutState, useDiagramCompareLayout };