@likec4/diagram 1.59.2 → 1.59.4

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 = /* @__PURE__ */ jsx(DefaultIconRenderer, { node: element });
 	}
 	if (!icon) return null;
 	return /* @__PURE__ */ jsx("div", {
@@ -104,14 +85,85 @@ 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", {
+		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;
+	}
+}
+var iconUrl = (group, name) => `https://icons.like-c4.dev/${encodeURIComponent(group)}/${encodeURIComponent(name)}.svg`;
+function BootstrapIconMask({ name, ...props }) {
+	const url = iconUrl("bootstrap", name);
+	const style = {
+		display: "inline-block",
+		width: "100%",
+		height: "100%",
+		backgroundColor: "currentColor",
+		maskImage: `url("${url}")`,
+		maskRepeat: "no-repeat",
+		maskPosition: "center",
+		maskSize: "contain",
+		WebkitMaskImage: `url("${url}")`,
+		WebkitMaskRepeat: "no-repeat",
+		WebkitMaskPosition: "center",
+		WebkitMaskSize: "contain"
+	};
 	return /* @__PURE__ */ jsx("span", {
 		...props,
-		style: { display: "contents" },
-		dangerouslySetInnerHTML: { __html: svgContent }
+		"aria-hidden": "true",
+		style
+	});
+}
+function DefaultIconRenderer({ node, ...props }) {
+	if (!node.icon || node.icon === "none") return null;
+	const [group, name, ...rest] = node.icon.split(":");
+	if (!group || !name || rest.length > 0) return null;
+	if (group === "bootstrap") return /* @__PURE__ */ jsx(BootstrapIconMask, {
+		...props,
+		name
+	});
+	return /* @__PURE__ */ jsx("img", {
+		...props,
+		src: iconUrl(group, name)
 	});
 }
 //#endregion
-export { IconOrShapeRenderer, IconRenderer, IconRendererProvider };
+export { DefaultIconRenderer, IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/LikeC4ProjectsContext.d.ts

@@ -1,7 +1,8 @@
-import { LikeC4Project, ProjectId } from '@likec4/core/types';
+import { ProjectId } from '@likec4/core/types';
+import { LikeC4ProjectData } from '../LikeC4ProjectsProvider';
 import { Provider } from 'react';
 export type LikeC4ProjectsContext = {
-    projects: ReadonlyArray<LikeC4Project>;
+    projects: ReadonlyArray<LikeC4ProjectData>;
     onProjectChange: (id: ProjectId) => void;
 };
 export declare const LikeC4ProjectsContextProvider: Provider<LikeC4ProjectsContext | null>;

package/dist/context/TagStylesContext.d.ts

@@ -1,8 +1,15 @@
 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 TagStylesProvider({ children, id }: PropsWithChildren<{
-    id: string;
-}>): import("react").JSX.Element;
+export declare function generateColorVars(spec: TagSpecification, styles?: LikeC4Styles): string;
+type TagStylesProviderProps = PropsWithChildren<{
+    /**
+     * Root element selector to scope the tag styles to (e.g., "#diagram-root")
+     * Must be a valid CSS selector
+     */
+    rootSelector: string;
+}>;
+export declare function TagStylesProvider({ children, rootSelector }: TagStylesProviderProps): import("react").JSX.Element;
 export declare function useTagSpecifications(): Record<string, TagSpecification>;
 export declare function useTagSpecification(tag: string): TagSpecification;
+export {};

package/dist/context/TagStylesContext.js

@@ -1,56 +1,68 @@
 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 { 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};
+  --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 `
+	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 }) {
+function TagStylesProvider({ children, rootSelector }) {
 	const tags = useLikeC4Specification().tags;
+	const styles = useLikeC4Styles();
 	const nonce = useMantineStyleNonce()?.();
-	const stylesheet = generateStylesheet(tags, `#${id}`);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, {
-		nonce,
-		stylesheet
-	}), /* @__PURE__ */ jsx(TagStylesContext.Provider, {
+	const stylesheet = generateStylesheet(tags, rootSelector, styles);
+	return /* @__PURE__ */ jsxs(TagStylesContext.Provider, {
 		value: tags,
-		children
-	})] });
+		children: [stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, {
+			nonce,
+			stylesheet
+		}), children]
+	});
 }
 var TagStylesheet = memo(({ stylesheet, nonce }) => {
 	return /* @__PURE__ */ jsx("style", {

package/dist/custom/index.d.ts

@@ -14,3 +14,6 @@ export { PortalToContainer } from '../components/PortalToContainer';
 export { FramerMotionConfig } from '../context/FramerMotionConfig';
 export { NavigationPanel } from '../components/NavigationPanel';
 export { ErrorBoundary, ErrorFallback } from '../components/ErrorFallback';
+export { LikeC4MantineProvider } from '../LikeC4MantineProvider';
+export { LikeC4Styles } from '../LikeC4Styles';
+export { TagStylesProvider } from '../context/TagStylesContext';

package/dist/custom/index.js

@@ -3,16 +3,18 @@ import { Base } from "../base/Base.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
 import { useSetState } from "../hooks/useSetState.js";
 import { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from "../context/DiagramFeatures.js";
+import { LikeC4MantineProvider } from "../LikeC4MantineProvider.js";
 import { FramerMotionConfig } from "../context/FramerMotionConfig.js";
 import { useDiagram, useDiagramActorRef } from "../hooks/safeContext.js";
 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 { TagStylesProvider } from "../context/TagStylesContext.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";
@@ -27,8 +29,6 @@ import { ElementTag, ElementTags } from "../base-primitives/element/ElementTags.
 import { memoEdge } from "../base-primitives/memoEdge.js";
 import { memoNode } from "../base-primitives/memoNode.js";
 import { DefaultHandles } from "../base-primitives/NodeHandles.js";
-import { Overlay } from "../overlays/overlay/Overlay.js";
-import { PortalToContainer } from "../components/PortalToContainer.js";
 import { CompoundActions } from "../likec4diagram/custom/nodes/CompoundActions.js";
 import { DeploymentElementActions, ElementActions } from "../likec4diagram/custom/nodes/ElementActions.js";
 import { Toolbar } from "../likec4diagram/custom/nodes/toolbar/Toolbar.js";
@@ -37,5 +37,8 @@ import { DeploymentElementToolbar, ElementToolbar } from "../likec4diagram/custo
 import { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from "../likec4diagram/custom/nodes/nodes.js";
 import { SequenceActorNode, SequenceParallelArea } from "../likec4diagram/custom/nodes/SequenceActorNode.js";
 import { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from "./customNodes.js";
+import { Overlay } from "../overlays/overlay/Overlay.js";
+import { PortalToContainer } from "../components/PortalToContainer.js";
 import { NavigationPanel } from "../components/NavigationPanel.js";
-export { Base, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, ElementNode, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementToolbar, ErrorBoundary, ErrorFallback, FramerMotionConfig, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, Markdown, NavigationPanel, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, Toolbar, ViewGroupNode, compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, memoEdge, memoNode, sequenceActorNode, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramEventHandlers, useEnabledFeatures, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSetState, useUpdateEffect, viewGroupNode };
+import { LikeC4Styles } from "../LikeC4Styles.js";
+export { Base, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, ElementNode, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementToolbar, ErrorBoundary, ErrorFallback, FramerMotionConfig, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, LikeC4MantineProvider, LikeC4Styles, Markdown, NavigationPanel, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, TagStylesProvider, Toolbar, ViewGroupNode, compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, memoEdge, memoNode, sequenceActorNode, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramEventHandlers, useEnabledFeatures, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSetState, useUpdateEffect, viewGroupNode };

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

@@ -56,7 +56,7 @@ function _applyChangesToManualLayout(manualView, latestView) {
 			manual
 		});
 		if (isBetweenNewLeafNodes(latest)) return removeDrift(latest);
-		return makeAsStraightLine(latest, nodesMap.get(latest.source), nodesMap.get(latest.target));
+		return makeAsStraightLine(latest, nonNullable(nodesMap.get(latest.source), `Source node ${latest.source} not found in processed nodes`), nonNullable(nodesMap.get(latest.target), `Target node ${latest.target} not found in processed nodes`));
 	});
 	const bounds = BBox$1.merge(...nodes.filter(isRootNode));
 	return produce(latestView, (draft) => {
@@ -117,6 +117,8 @@ function applyFromManualEdge(edges) {
 			draft.labelBBox.x = manual.labelBBox.x;
 			draft.labelBBox.y = manual.labelBBox.y;
 		}
+		if (manual.isLabelCustomized === true) draft.isLabelCustomized = true;
+		else delete draft.isLabelCustomized;
 		draft.drifts = null;
 	});
 }
@@ -137,6 +139,7 @@ function makeAsStraightLine(edge, sourceNode, targetNode) {
 		if (edge.labelBBox) {
 			draft.labelBBox.x = labelPos.x;
 			draft.labelBBox.y = labelPos.y;
+			if (edge.isLabelCustomized === true) delete draft.isLabelCustomized;
 		}
 		delete draft.drifts;
 	});
@@ -153,7 +156,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/safeContext.d.ts

@@ -35,12 +35,16 @@ type SafeContextForActor<A extends AnyActorRef, Snapshot, Context> = {
      *                  and the selected value from the current snapshot. If the comparison returns true,
      *                  the component will not re-render.
      */
-    selectSnapshot<T>(select: (state: Snapshot) => T, compare?: (old: NoInfer<T>, next: NoInfer<T>) => boolean): SelectAndCompare<Snapshot, T>;
+    selectSnapshot<T>(select: (state: Snapshot) => T, compare?: (old: NoInfer<T>, next: NoInfer<T>) => boolean): SelectAndCompare<Snapshot, T> & {
+        Out: T;
+    };
     /**
      * @param select - Function to extract a value from the actor's context
      * @param compare - Optional comparison function. If not provided, shallow equality is used.
      */
-    selectContext<T>(select: (state: Context) => T, compare?: (old: NoInfer<T>, next: NoInfer<T>) => boolean): SelectAndCompare<Snapshot, T>;
+    selectContext<T>(select: (state: Context) => T, compare?: (old: NoInfer<T>, next: NoInfer<T>) => boolean): SelectAndCompare<Snapshot, T> & {
+        Out: T;
+    };
     useActorSelector<T>(select: (state: Snapshot) => T): T;
     useActorSelector<T>(selectorCompare: SelectAndCompare<Snapshot, T>): T;
     useActorSelector<T>(...selectorCompare: SelectAndCompare<Snapshot, T>): T;
@@ -96,7 +100,9 @@ export declare const DiagramActorContextProvider: Provider<DiagramActorRef>, sel
     navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
 }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
     ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
-}, never, never, never, never>, T>, selectDiagramContext: <T>(select: (state: DiagramContext) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
+}, never, never, never, never>, T> & {
+    Out: T;
+}, selectDiagramContext: <T>(select: (state: DiagramContext) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
     overlays: OverlaysActorRef | undefined;
     search: SearchActorRef | undefined;
     editor: BaseEditorActorRef | undefined;
@@ -110,7 +116,9 @@ export declare const DiagramActorContextProvider: Provider<DiagramActorRef>, sel
     navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
 }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
     ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
-}, never, never, never, never>, T>, useDiagramSelector: {
+}, never, never, never, never>, T> & {
+    Out: T;
+}, useDiagramSelector: {
     <T>(select: (state: MachineSnapshot<DiagramContext, DiagramEvents, {
         overlays: OverlaysActorRef | undefined;
         search: SearchActorRef | undefined;

package/dist/hooks/safeContext.js

@@ -1,5 +1,5 @@
 import "../_virtual/_rolldown/runtime.js";
-import { createContext, useContext } from "react";
+import { createContext, use, useContext } from "react";
 import { shallowEqual } from "fast-equals";
 import { isFunction } from "remeda";
 import { useSelector } from "@xstate/react";
@@ -9,7 +9,7 @@ var DiagramApiSafeContext = createContext(null);
 DiagramApiSafeContext.displayName = "DiagramApiSafeContext";
 var DiagramApiContextProvider = DiagramApiSafeContext.Provider;
 function useDiagram() {
-	const ctx = useContext(DiagramApiSafeContext);
+	const ctx = use(DiagramApiSafeContext);
 	if (ctx === null) throw new Error("DiagramApi is not provided");
 	return ctx;
 }

package/dist/hooks/useCurrentView.js

@@ -1,21 +1,21 @@
 import "../_virtual/_rolldown/runtime.js";
-import { selectDiagramActor, useDiagramSnapshot } from "./useDiagram.js";
+import { selectDiagramContext, useDiagramSelector } from "./safeContext.js";
 //#region src/hooks/useCurrentView.ts
-var selectViewId = selectDiagramActor((s) => s.context.view.id);
+var selectViewId = selectDiagramContext((s) => s.view.id);
 /**
 * Returns current view id
 * Should be used only inside LikeC4Diagram
 */
 function useCurrentViewId() {
-	return useDiagramSnapshot(selectViewId);
+	return useDiagramSelector(selectViewId);
 }
-var selectView = selectDiagramActor((s) => s.context.view);
+var selectView = selectDiagramContext((s) => s.view);
 /**
 * Returns current view
 * Should be used only inside LikeC4Diagram
 */
 function useCurrentView() {
-	return useDiagramSnapshot(selectView);
+	return useDiagramSelector(selectView);
 }
 //#endregion
 export { useCurrentView, useCurrentViewId };

package/dist/hooks/useDiagram.js

@@ -6,34 +6,14 @@ import { shallowEqual } from "fast-equals";
 import { useSelector } from "@xstate/react";
 //#region src/hooks/useDiagram.ts
 /**
-* Helper to create a selector for diagram actor snapshot
-* @deprecated use {@link selectDiagramSnapshot}
-*/
-function selectDiagramActor(selector) {
-	return selector;
-}
-/**
-* Read diagram actor snapshot
-* @deprecated use {@link useDiagramSelector}
-*/
-function useDiagramSnapshot(selector, compare = shallowEqual) {
-	return useSelector(useDiagramActorRef(), selector, compare);
-}
-/**
-* Helper to create a selector for diagram actor snapshot
-* @deprecated use {@link selectDiagramContext}
-*/
-function selectDiagramActorContext(selector) {
-	return (state) => selector(state.context);
-}
-/**
 * Read diagram context
 * @deprecated use {@link useDiagramSelector}
 */
 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
@@ -74,4 +54,4 @@ function useOnDiagramEvent(event, callback, options) {
 	]);
 }
 //#endregion
-export { selectDiagramActor, selectDiagramActorContext, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramSelector, useDiagramSnapshot, useOnDiagramEvent };
+export { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramSelector, useOnDiagramEvent };