@likec4/diagram 1.60.0 → 1.61.0

package/dist/hooks/safeContext.mjs

@@ -5,7 +5,7 @@ import { isFunction } from "remeda";
 import { useSelector } from "@xstate/react";
 import { invariant } from "motion";
 
-//#region src/hooks/safeContext.tsx
+// src/hooks/safeContext.tsx
 const DiagramApiSafeContext = createContext(null);
 DiagramApiSafeContext.displayName = "DiagramApiSafeContext";
 const DiagramApiContextProvider = DiagramApiSafeContext.Provider;
@@ -70,5 +70,4 @@ function createSafeContextForActor(name) {
 }
 const { ContextProvider: DiagramActorContextProvider, selectSnapshot: selectDiagramSnapshot, selectContext: selectDiagramContext, useActorSelector: useDiagramSelector, useActorRef: useDiagramActorRef } = createSafeContextForActor("DiagramActor");
 
-//#endregion
 export { DiagramActorContextProvider, DiagramApiContextProvider, createSafeContextForActor, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector };

package/dist/hooks/useCallbackRef.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { useMemo, useRef } from "react";
 
-//#region src/hooks/useCallbackRef.ts
+// src/hooks/useCallbackRef.ts
 /**
 * Memoizes a callback function so that it will not be recreated on every render.
 * The returned function is guaranteed to be the same reference across renders.
@@ -19,5 +19,4 @@ function useCallbackRef(callback) {
 	}, []);
 }
 
-//#endregion
 export { useCallbackRef };

package/dist/hooks/useCurrentView.d.mts

@@ -1,6 +1,5 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { LayoutedView, ViewId } from "@likec4/core/types";
-//#region src/hooks/useCurrentView.d.ts
 /**
  * Returns current view id
  * Should be used only inside LikeC4Diagram
@@ -10,5 +9,4 @@ export declare function useCurrentViewId(): ViewId;
  * Returns current view
  * Should be used only inside LikeC4Diagram
  */
-export declare function useCurrentView(): LayoutedView;
-//#endregion
+export declare function useCurrentView(): LayoutedView;

package/dist/hooks/useCurrentView.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { viewRouting } from "../utils/view-routing.mjs";
 import { selectDiagramContext, useDiagramSelector } from "./safeContext.mjs";
 
-//#region src/hooks/useCurrentView.ts
+// src/hooks/useCurrentView.ts
 const selectViewId = selectDiagramContext((s) => s.view.id);
 /**
 * Returns current view id
@@ -28,5 +28,4 @@ function useCurrentViewRouting() {
 	return useDiagramSelector(selectViewRouting);
 }
 
-//#endregion
 export { useCurrentView, useCurrentViewId, useCurrentViewRouting };

package/dist/hooks/useCurrentViewModel.d.mts

@@ -1,6 +1,5 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { CurrentViewModel, useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.mjs";
-//#region src/hooks/useCurrentViewModel.d.ts
 /**
  * Hook to get the current view model from the context.
  * Throws an error if no view model is found in the context.
@@ -8,5 +7,4 @@ import { CurrentViewModel, useOptionalCurrentViewModel } from "../context/LikeC4
  * @see useOptionalCurrentViewModel
  */
 export declare function useCurrentViewModel(): CurrentViewModel;
-//#endregion
 export { type CurrentViewModel, useOptionalCurrentViewModel };

package/dist/hooks/useCurrentViewModel.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.mjs";
 
-//#region src/hooks/useCurrentViewModel.ts
+// src/hooks/useCurrentViewModel.ts
 /**
 * Hook to get the current view model from the context.
 * Throws an error if no view model is found in the context.
@@ -14,5 +14,4 @@ function useCurrentViewModel() {
 	return vm;
 }
 
-//#endregion
 export { useCurrentViewModel, useOptionalCurrentViewModel };

package/dist/hooks/useDiagram.d.mts

@@ -1,18 +1,10 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { DiagramApi } from "../likec4diagram/state/diagram-api.mjs";
-import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector } from "./safeContext.mjs";
 import { Context, EmittedEvents } from "../likec4diagram/state/machine.setup.mjs";
+import { DiagramApi } from "../likec4diagram/state/diagram-api.mjs";
 import "../likec4diagram/state/types.mjs";
+import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector } from "./safeContext.mjs";
 import { DependencyList } from "react";
-//#region src/hooks/useDiagram.d.ts
-/**
- * Read diagram context
- * @deprecated use {@link useDiagramSelector}
- */
-export declare function useDiagramContext<T = unknown>(selector: (context: Context) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
-type PickEmittedEvent<T> = T extends EmittedEvents['type'] ? EmittedEvents & {
-  type: T;
-} : unknown;
+type PickEmittedEvent<T> = { [K in EmittedEvents as K['type']]: K['type'] extends T ? K : never; }[EmittedEvents['type']];
 /**
  * Subscribe to diagram emitted events
  * @example
@@ -25,5 +17,4 @@ type PickEmittedEvent<T> = T extends EmittedEvents['type'] ? EmittedEvents & {
 export declare function useOnDiagramEvent<T extends EmittedEvents['type'] | '*'>(event: T, callback: (event: PickEmittedEvent<T>) => void, options?: {
   once?: boolean;
 }): void;
-//#endregion
 export { type DiagramApi, type Context as DiagramContext, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector };

package/dist/hooks/useDiagram.mjs

@@ -1,11 +1,11 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { useCallbackRef } from "./useCallbackRef.mjs";
 import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector } from "./safeContext.mjs";
+import { useCallbackRef } from "./useCallbackRef.mjs";
 import { useCallback, useEffect, useRef } from "react";
 import { shallowEqual } from "fast-equals";
 import { useSelector } from "@xstate/react";
 
-//#region src/hooks/useDiagram.ts
+// src/hooks/useDiagram.ts
 /**
 * Read diagram context
 * @deprecated use {@link useDiagramSelector}
@@ -27,18 +27,20 @@ function useDiagramContext(selector, compare = shallowEqual, deps = []) {
 */
 function useOnDiagramEvent(event, callback, options) {
 	const actorRef = useDiagramActorRef();
-	const callbackRef = useCallbackRef(callback);
 	const wasCalled = useRef(false);
 	const once = options?.once ?? false;
+	const callbackRef = useCallbackRef((event) => {
+		wasCalled.current = true;
+		try {
+			callback(event);
+		} catch (error) {
+			console.error(error);
+		}
+	});
 	useEffect(() => {
 		if (once && wasCalled.current) return;
 		let subscription = actorRef.on(event, (payload) => {
-			if (!once || !wasCalled.current) try {
-				callbackRef(payload);
-			} catch (error) {
-				console.error(error);
-			}
-			wasCalled.current = true;
+			callbackRef(payload);
 			if (once) {
 				subscription?.unsubscribe();
 				subscription = null;
@@ -55,5 +57,4 @@ function useOnDiagramEvent(event, callback, options) {
 	]);
 }
 
-//#endregion
 export { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramSelector, useOnDiagramEvent };

package/dist/hooks/useDiagramCompareLayout.d.mts

@@ -2,8 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { DiagramMachineSnapshot } from "../likec4diagram/state/machine.mjs";
 import "../likec4diagram/state/types.mjs";
 import * as t from "@likec4/core/types";
-//#region src/hooks/useDiagramCompareLayout.d.ts
-export declare function selectCompareLayoutState({ context }: DiagramMachineSnapshot): {
+export declare function selectCompareLayoutState(snapshot: DiagramMachineSnapshot): {
   isEnabled: false;
   hasEditor: boolean;
   isEditable: false;
@@ -50,5 +49,4 @@ export type DiagramCompareLayoutOps = {
  *
  * The hook must be called by a component rendered inside {@link LikeC4Diagram}.
  */
-export declare function useDiagramCompareLayout(): [DiagramCompareLayoutState, DiagramCompareLayoutOps];
-//#endregion
+export declare function useDiagramCompareLayout(): [DiagramCompareLayoutState, DiagramCompareLayoutOps];

package/dist/hooks/useDiagramCompareLayout.mjs

@@ -1,14 +1,15 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { useCallbackRef } from "./useCallbackRef.mjs";
-import { useDiagramActorRef } from "./safeContext.mjs";
+import { deriveToggledFeatures, isComparingLayouts } from "../likec4diagram/state/machine.setup.mjs";
 import { typedSystem } from "../likec4diagram/state/utils.mjs";
-import { deriveToggledFeatures } from "../likec4diagram/state/machine.setup.mjs";
-import { shallowEqual } from "fast-equals";
+import { useDiagramActorRef } from "./safeContext.mjs";
+import { useCallbackRef } from "./useCallbackRef.mjs";
+import { deepEqual } from "fast-equals";
 import { nonNullable } from "@likec4/core";
 import { useSelector } from "@xstate/react";
 
-//#region src/hooks/useDiagramCompareLayout.ts
-function selectCompareLayoutState({ context }) {
+// src/hooks/useDiagramCompareLayout.ts
+function selectCompareLayoutState(snapshot) {
+	const { context } = snapshot;
 	const hasEditor = context.features.enableEditor;
 	const drifts = context.view.drifts ?? null;
 	if (!context.features.enableCompareWithLatest || !drifts || drifts.length === 0) return {
@@ -20,12 +21,12 @@ function selectCompareLayoutState({ context }) {
 		canApplyLatest: false,
 		layout: context.view._layout ?? "auto"
 	};
-	const { enableCompareWithLatest, enableReadOnly } = deriveToggledFeatures(context);
+	const { enableReadOnly } = deriveToggledFeatures(snapshot);
 	return {
 		hasEditor,
 		isEnabled: true,
 		isEditable: !enableReadOnly && hasEditor,
-		state: enableCompareWithLatest === true ? "comparing" : "inactive",
+		state: isComparingLayouts(snapshot) ? "comparing" : "inactive",
 		drifts,
 		canApplyLatest: hasEditor && !drifts.includes("type-changed"),
 		layout: context.view._layout ?? "auto"
@@ -38,7 +39,7 @@ function selectCompareLayoutState({ context }) {
 */
 function useDiagramCompareLayout() {
 	const actorRef = useDiagramActorRef();
-	const state = useSelector(actorRef, selectCompareLayoutState, shallowEqual);
+	const state = useSelector(actorRef, selectCompareLayoutState, deepEqual);
 	const switchLayout = useCallbackRef((layoutType) => {
 		if (!state.isEnabled) {
 			console.warn("Compare with latest feature is not enabled");
@@ -56,12 +57,7 @@ function useDiagramCompareLayout() {
 				return;
 			}
 			const nextIsActive = force ? force === "on" : state.state === "inactive";
-			if (state.state === "comparing" && !nextIsActive && state.layout === "auto") switchLayout("manual");
-			actorRef.send({
-				type: "toggle.feature",
-				feature: "CompareWithLatest",
-				forceValue: nextIsActive
-			});
+			actorRef.send({ type: nextIsActive ? "compare.start" : "compare.end" });
 		}),
 		switchLayout,
 		resetManualLayout: useCallbackRef(() => {
@@ -73,14 +69,9 @@ function useDiagramCompareLayout() {
 				return;
 			}
 			nonNullable(typedSystem(actorRef.system).editorActorRef, "editor actor not found").send({ type: "change.latest-to-manual" });
-			if (state.state === "comparing") actorRef.send({
-				type: "toggle.feature",
-				feature: "CompareWithLatest",
-				forceValue: false
-			});
+			if (state.state === "comparing") actorRef.send({ type: "compare.end" });
 		})
 	}];
 }
 
-//#endregion
 export { selectCompareLayoutState, useDiagramCompareLayout };

package/dist/hooks/useDiagramMarkdownRefActions.mjs

@@ -0,0 +1,35 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useEnabledFeatures } from "../context/DiagramFeatures.mjs";
+import { useCallbackRef } from "./useCallbackRef.mjs";
+import { useDiagram } from "./safeContext.mjs";
+import { useMemo } from "react";
+
+// src/hooks/useDiagramMarkdownRefActions.ts
+/**
+* Default actions for refs in Markdown inside diagram overlays and panels:
+* element ref opens element details, view ref navigates to the view.
+* Actions of disabled features are `null`, so these refs render as plain text.
+*
+* @param overrides - replace default actions (still `null` if the feature is disabled)
+*/
+function useDiagramMarkdownRefActions(overrides) {
+	const diagram = useDiagram();
+	const { enableElementDetails, enableNavigateTo } = useEnabledFeatures();
+	const openElement = useCallbackRef((fqn) => {
+		if (overrides?.openElement) return overrides.openElement(fqn);
+		return diagram.openNodeDetails({
+			type: "element",
+			element: fqn
+		});
+	});
+	const openView = useCallbackRef((viewId) => {
+		if (overrides?.openView) return overrides.openView(viewId);
+		return diagram.navigateTo(viewId);
+	});
+	return useMemo(() => ({
+		openElement: enableElementDetails ? openElement : null,
+		openView: enableNavigateTo ? openView : null
+	}), [enableElementDetails, enableNavigateTo]);
+}
+
+export { useDiagramMarkdownRefActions };

package/dist/hooks/useEdgeLabelFontLoader.mjs

@@ -0,0 +1,29 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { loadEdgeLabelFont } from "../utils/measure-edge-label.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/hooks/useEdgeLabelFontLoader.ts
+/**
+* Edge labels are measured with the canvas, so font faces must be loaded first
+* (e.g. cyrillic subset is loaded only when it is used).
+*
+* Returns a version, that is incremented when required font faces are loaded (use it as a dependency
+* of the layout to measure labels again), and a function to request font faces for given labels.
+*/
+function useEdgeLabelFontLoader() {
+	const [version, setVersion] = useState(0);
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	return [version, useCallback((labels) => {
+		loadEdgeLabelFont(labels).then((loaded) => {
+			if (loaded && mounted.current) setVersion((v) => v + 1);
+		}).catch(() => {});
+	}, [])];
+}
+
+export { useEdgeLabelFontLoader };

package/dist/hooks/useEdgeTracks.mjs

@@ -1,11 +1,11 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { useXYStore } from "./useXYFlow.mjs";
 import { edgeEndFromNode } from "../utils/edge-endpoints.mjs";
 import { drawnFromRoute, editedEdgePath, editedEdgeRoute, layoutedEdgeRoute } from "../utils/edge-path.mjs";
 import { keepOwnTrack } from "../utils/edge-tracks.mjs";
+import { useXYStore } from "./useXYFlow.mjs";
 import { polylineToSegments } from "@likec4/core/geometry";
 
-//#region src/hooks/useEdgeTracks.ts
+// src/hooks/useEdgeTracks.ts
 const none = /* @__PURE__ */ new Map();
 const cache = /* @__PURE__ */ new WeakMap();
 /**
@@ -87,5 +87,4 @@ function useTrackRoutes(routing, enabled) {
 	return useXYStore(enabled && routing === "ortho" ? selectTrackRoutes : selectNone);
 }
 
-//#endregion
 export { selectLabelRoutes, selectTrackRoutes, useTrackRoutes };

package/dist/hooks/useEditorActor.mjs

@@ -3,7 +3,7 @@ import { selectDiagramSnapshot, useDiagramSelector } from "./safeContext.mjs";
 import { useEffect, useState } from "react";
 import { useDebouncedState } from "@mantine/hooks";
 
-//#region src/hooks/useEditorActor.ts
+// src/hooks/useEditorActor.ts
 const select = selectDiagramSnapshot((s) => s.children.editor ?? null, Object.is);
 function useEditorActorRef() {
 	return useDiagramSelector(select);
@@ -23,5 +23,4 @@ function useEditorActorStateHasTag(tag) {
 	return hasTag;
 }
 
-//#endregion
 export { useEditorActorRef, useEditorActorStateHasTag };

package/dist/hooks/useId.mjs

@@ -1,11 +1,10 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { useId } from "@mantine/hooks";
 
-//#region src/hooks/useId.ts
+// src/hooks/useId.ts
 function useId$1() {
 	return useId().replace("mantine-", "likec4-");
 }
 __name(useId$1, "useId");
 
-//#endregion
 export { useId$1 as useId };

package/dist/hooks/useLikeC4ElementsTree.mjs

@@ -3,7 +3,7 @@ import { useLikeC4Model } from "./useLikeC4Model.mjs";
 import { useMemo } from "react";
 import { compareNatural } from "@likec4/core/utils";
 
-//#region src/hooks/useLikeC4ElementsTree.ts
+// src/hooks/useLikeC4ElementsTree.ts
 const sortByLabel = (a, b) => compareNatural(a.label, b.label);
 function buildNode(element) {
 	const children = [...element.children()].map(buildNode).sort(sortByLabel);
@@ -26,5 +26,4 @@ function useLikeC4ElementsTree(viewId) {
 	}, [model, viewId]);
 }
 
-//#endregion
 export { sortByLabel, useLikeC4ElementsTree };

package/dist/hooks/useLikeC4Model.d.mts

@@ -2,7 +2,6 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { useOptionalLikeC4Model } from "../context/LikeC4ModelContext.mjs";
 import * as t from "@likec4/core/types";
 import { LikeC4Model, LikeC4ViewModel } from "@likec4/core/model";
-//#region src/hooks/useLikeC4Model.d.ts
 type Any$1 = t.aux.Any;
 /**
  * @returns The LikeC4Model from context.
@@ -11,5 +10,4 @@ type Any$1 = t.aux.Any;
 export declare function useLikeC4Model<A extends Any$1 = t.aux.UnknownLayouted>(): LikeC4Model<A>;
 export declare function useLikeC4ViewModel<A extends Any$1 = t.aux.UnknownLayouted>(viewId: t.aux.ViewId<A>): LikeC4ViewModel<A>;
 export declare function useLikeC4Specification(): t.Specification<t.aux.UnknownLayouted>;
-//#endregion
 export { useOptionalLikeC4Model };

package/dist/hooks/useLikeC4Model.mjs

@@ -3,7 +3,7 @@ import { useOptionalLikeC4Model } from "../context/LikeC4ModelContext.mjs";
 import { useEffect, useState } from "react";
 import { deepEqual } from "fast-equals";
 
-//#region src/hooks/useLikeC4Model.ts
+// src/hooks/useLikeC4Model.ts
 /**
 * @returns The LikeC4Model from context.
 * @throws If no LikeC4ModelProvider is found.
@@ -30,5 +30,4 @@ function useLikeC4Specification() {
 	return specification;
 }
 
-//#endregion
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model };

package/dist/hooks/useLikeC4Project.d.mts

@@ -1,8 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { LikeC4ProjectData } from "../LikeC4ProjectsProvider.mjs";
 import { LikeC4ProjectsContext } from "../context/LikeC4ProjectsContext.mjs";
+import { LikeC4ProjectData } from "../LikeC4ProjectsProvider.mjs";
 import { ProjectId } from "@likec4/core/types";
-//#region src/hooks/useLikeC4Project.d.ts
 export declare function useLikeC4ProjectsContext(): LikeC4ProjectsContext;
 /**
  * @returns The list of available projects, or empty array if no projects are available.
@@ -25,5 +24,4 @@ export declare function useLikeC4ProjectId(): ProjectId;
  * Requires LikeC4ModelProvider in the tree.
  * Falls back to model's project if LikeC4ProjectsProvider is not available.
  */
-export declare function useLikeC4Project(): LikeC4ProjectData;
-//#endregion
+export declare function useLikeC4Project(): LikeC4ProjectData;

package/dist/hooks/useLikeC4Project.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { useOptionalLikeC4Model } from "../context/LikeC4ModelContext.mjs";
 import { useOptionalProjectsContext } from "../context/LikeC4ProjectsContext.mjs";
 
-//#region src/hooks/useLikeC4Project.ts
+// src/hooks/useLikeC4Project.ts
 const emptyProjects = [];
 function onProjectChange(id) {
 	console.warn(`Triggered callback to change project to ${id}, but no <LikeC4ProjectsProvider/> found`);
@@ -54,5 +54,4 @@ function useLikeC4Project() {
 	return projectsCtx?.projects.find((p) => p.id === modelCtx.projectId) ?? modelCtx.project;
 }
 
-//#endregion
 export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };

package/dist/hooks/useLikeC4Styles.d.mts

@@ -1,5 +1,3 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { LikeC4Styles } from "@likec4/core/styles";
-//#region src/hooks/useLikeC4Styles.d.ts
-export declare function useLikeC4Styles(): LikeC4Styles;
-//#endregion
+export declare function useLikeC4Styles(): LikeC4Styles;

package/dist/hooks/useLikeC4Styles.mjs

@@ -2,10 +2,9 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { useOptionalLikeC4Model } from "../context/LikeC4ModelContext.mjs";
 import { LikeC4Styles } from "@likec4/core/styles";
 
-//#region src/hooks/useLikeC4Styles.ts
+// src/hooks/useLikeC4Styles.ts
 function useLikeC4Styles() {
 	return useOptionalLikeC4Model()?.$styles ?? LikeC4Styles.DEFAULT;
 }
 
-//#endregion
 export { useLikeC4Styles };

package/dist/hooks/useMantinePortalProps.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { useRootContainerElement } from "../context/RootContainerContext.mjs";
 import { useMemo } from "react";
 
-//#region src/hooks/useMantinePortalProps.ts
+// src/hooks/useMantinePortalProps.ts
 function useMantinePortalProps() {
 	const target = useRootContainerElement();
 	return useMemo(() => target ? {
@@ -11,5 +11,4 @@ function useMantinePortalProps() {
 	} : { withinPortal: false }, [target]);
 }
 
-//#endregion
 export { useMantinePortalProps };

package/dist/hooks/useSetState.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { useCallback, useRef, useState } from "react";
 import { shallowEqual } from "fast-equals";
 
-//#region src/hooks/useSetState.ts
+// src/hooks/useSetState.ts
 /**
 * Differs from useState in that:
 * - it uses custom equal function (shallowEqual by default) to determine whether the state has changed.
@@ -22,5 +22,4 @@ function useSetState(initialState, equal) {
 	}), [_setState])];
 }
 
-//#endregion
 export { useSetState };

package/dist/hooks/useUpdateEffect.d.mts

@@ -1,7 +1,5 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { DependencyList, EffectCallback } from "react";
 import { DependenciesComparator, EffectHook } from "@react-hookz/web";
-//#region src/hooks/useUpdateEffect.d.ts
 declare function useUpdateEffect$1<Callback extends EffectCallback = EffectCallback, Deps extends DependencyList = DependencyList>(callback: Callback, deps: Deps, equalityFn?: DependenciesComparator<Deps>, effectHook?: EffectHook<Callback, Deps>): void;
-//#endregion
 export { useUpdateEffect$1 as useUpdateEffect };

package/dist/hooks/useUpdateEffect.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { useCustomCompareEffect, useFirstMountState } from "@react-hookz/web";
 import { shallowEqual } from "fast-equals";
 
-//#region src/hooks/useUpdateEffect.ts
+// src/hooks/useUpdateEffect.ts
 const noop = () => {};
 const depsShallowEqual = (d1, d2) => {
 	if (d1 === d2) return true;
@@ -19,5 +19,4 @@ function useUpdateEffect$1(callback, deps, equalityFn, effectHook) {
 }
 __name(useUpdateEffect$1, "useUpdateEffect");
 
-//#endregion
 export { depsShallowEqual, useUpdateEffect$1 as useUpdateEffect };

package/dist/hooks/useXYFlow.d.mts

@@ -1,12 +1,10 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { Types } from "../likec4diagram/types.mjs";
 import { ReactFlowInstance, ReactFlowState } from "@xyflow/react";
-//#region src/hooks/useXYFlow.d.ts
 export type XYFlowInstance = ReactFlowInstance<Types.AnyNode, Types.AnyEdge>;
 export type XYStoreState = ReactFlowState<Types.AnyNode, Types.AnyEdge>;
 export type XYStoreApi = {
   getState: () => XYStoreState;
   setState: (state: Partial<XYStoreState> | ((state: XYStoreState) => Partial<XYStoreState>)) => void;
   subscribe: (listener: (state: XYStoreState, prevState: XYStoreState) => void) => () => void;
-};
-//#endregion
+};

package/dist/hooks/useXYFlow.mjs

@@ -3,7 +3,7 @@ import { useCallback } from "react";
 import { useReactFlow, useStore, useStoreApi } from "@xyflow/react";
 import { shallowEqual } from "fast-equals";
 
-//#region src/hooks/useXYFlow.ts
+// src/hooks/useXYFlow.ts
 function useXYFlow() {
 	return useReactFlow();
 }
@@ -24,5 +24,4 @@ function useIsZoomTooSmall() {
 	return useStore(selectZoom);
 }
 
-//#endregion
 export { selectXYStore, useCurrentZoomAtLeast, useIsZoomTooSmall, useXYFlow, useXYStore, useXYStoreApi };

package/dist/index.d.mts

@@ -1,33 +1,35 @@
-import { Types } from "./likec4diagram/types.mjs";
-import { LikeC4EditorCallbacks, LikeC4EditorChangeResult, createLikeC4Editor } from "./editor/LikeC4EditorCallbacks.mjs";
-import { LikeC4EditorProvider, LikeC4EditorProviderProps } from "./editor/LikeC4EditorProvider.mjs";
-import { DiagramApi } from "./likec4diagram/state/diagram-api.mjs";
-import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramSelector } from "./hooks/safeContext.mjs";
-import { useOnDiagramEvent } from "./hooks/useDiagram.mjs";
+import { DefaultIconRenderer, IconRendererProvider } from "./context/IconRenderer.mjs";
+import { MaxZoom, MinZoom } from "./base/const.mjs";
+import { LikeC4Diagram, LikeC4DiagramProps } from "./LikeC4Diagram.mjs";
 import { ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, NodeRenderers, OnCanvasClick, OnEdgeClick, OnInitialized, OnNavigateTo, OnNodeClick, OnOpenSource, PaddingWithUnit, ViewPadding, ViewPaddings, WhereOperator } from "./LikeC4Diagram.props.mjs";
 import { Context } from "./likec4diagram/state/machine.setup.mjs";
-import { useCurrentView, useCurrentViewId } from "./hooks/useCurrentView.mjs";
-import { CurrentViewModel, useOptionalCurrentViewModel, useOptionalLikeC4Model } from "./context/LikeC4ModelContext.mjs";
-import { useCurrentViewModel } from "./hooks/useCurrentViewModel.mjs";
-import { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from "./hooks/useLikeC4Model.mjs";
+import { DiagramApi } from "./likec4diagram/state/diagram-api.mjs";
+import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector } from "./hooks/safeContext.mjs";
+import { LikeC4ModelProvider, LikeC4ModelProviderProps } from "./LikeC4ModelProvider.mjs";
+import { LikeC4EditorProvider, LikeC4EditorProviderProps } from "./editor/LikeC4EditorProvider.mjs";
+import { LikeC4EditorCallbacks, LikeC4EditorChangeResult, createLikeC4Editor } from "./editor/LikeC4EditorCallbacks.mjs";
 import { LikeC4ProjectsProvider, LikeC4ProjectsProviderProps } from "./LikeC4ProjectsProvider.mjs";
+import { useOnDiagramEvent } from "./hooks/useDiagram.mjs";
+import { DiagramCompareLayoutOps, DiagramCompareLayoutState, useDiagramCompareLayout } from "./hooks/useDiagramCompareLayout.mjs";
+import { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from "./hooks/useLikeC4Model.mjs";
+import { useCurrentViewModel } from "./hooks/useCurrentViewModel.mjs";
 import { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from "./hooks/useLikeC4Project.mjs";
 import { useLikeC4Styles } from "./hooks/useLikeC4Styles.mjs";
+import { filterProjects, projectSearchHighlights } from "./utils/filterProjects.mjs";
 import { useUpdateEffect } from "./hooks/useUpdateEffect.mjs";
-import { FramerMotionConfig } from "./context/FramerMotionConfig.mjs";
-import { DefaultMantineProvider, LikeC4MantineProvider } from "./LikeC4MantineProvider.mjs";
-import { DefaultIconRenderer, IconRendererProvider } from "./context/IconRenderer.mjs";
-import { MaxZoom, MinZoom } from "./base/const.mjs";
-import { LikeC4Diagram, LikeC4DiagramProps } from "./LikeC4Diagram.mjs";
-import { LikeC4ModelProvider, LikeC4ModelProviderProps } from "./LikeC4ModelProvider.mjs";
-import { DiagramCompareLayoutOps, DiagramCompareLayoutState, useDiagramCompareLayout } from "./hooks/useDiagramCompareLayout.mjs";
+import { CurrentViewModel, useOptionalCurrentViewModel, useOptionalLikeC4Model } from "./context/LikeC4ModelContext.mjs";
+import { Types } from "./likec4diagram/types.mjs";
 import { StaticLikeC4Diagram } from "./StaticLikeC4Diagram.mjs";
 import { LikeC4BrowserProps, LikeC4View, LikeC4ViewProps } from "./LikeC4View.mjs";
 import { ReactLikeC4, ReactLikeC4Props } from "./ReactLikeC4.mjs";
+import { useCurrentView, useCurrentViewId } from "./hooks/useCurrentView.mjs";
 import { pickViewBounds } from "./utils/view-bounds.mjs";
 import { LikeC4ProjectsOverview, LikeC4ProjectsOverviewProps } from "./LikeC4ProjectsOverview.mjs";
 import { SearchContext, SearchContextValue, normalizeSearch, useSearchContext } from "./search/SearchContext.mjs";
 import { SearchPanelContent, bodyCss, dialogCss } from "./search/Search.mjs";
 import { SearchControl } from "./components/SearchControl.mjs";
+import { DefaultMantineProvider, LikeC4MantineProvider } from "./LikeC4MantineProvider.mjs";
+import { FramerMotionConfig } from "./context/FramerMotionConfig.mjs";
 import { Logo, LogoIcon } from "./components/Logo.mjs";
-export { type CurrentViewModel, DefaultIconRenderer, DefaultMantineProvider, type DiagramApi, type DiagramCompareLayoutOps, type DiagramCompareLayoutState, type Context as DiagramContext, type ElementIconRenderer, type ElementIconRendererProps, FramerMotionConfig, IconRendererProvider, type LikeC4BrowserProps, type LikeC4ColorScheme, LikeC4Diagram, type LikeC4DiagramProps, type LikeC4EditorCallbacks, type LikeC4EditorChangeResult, LikeC4EditorProvider, type LikeC4EditorProviderProps, LikeC4MantineProvider, LikeC4ModelProvider, type LikeC4ModelProviderProps, LikeC4ProjectsOverview, type LikeC4ProjectsOverviewProps, LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, LikeC4View, type LikeC4ViewProps, Logo, LogoIcon, MaxZoom, MinZoom, type NodeRenderers, type OnCanvasClick, type OnEdgeClick, type OnInitialized, type OnNavigateTo, type OnNodeClick, type OnOpenSource, type PaddingWithUnit, ReactLikeC4, type ReactLikeC4Props, SearchContext, type SearchContextValue, SearchControl, SearchPanelContent, StaticLikeC4Diagram, type Types, type ViewPadding, type ViewPaddings, type WhereOperator, createLikeC4Editor, normalizeSearch, pickViewBounds, bodyCss as searchBodyCss, dialogCss as searchDialogCss, selectDiagramContext, selectDiagramSnapshot, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramCompareLayout, useDiagramSelector, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSearchContext, useUpdateEffect };
+import { defineLikeC4Webcomponent } from "./webcomponent/defineWebcomponent.mjs";
+export { type CurrentViewModel, DefaultIconRenderer, DefaultMantineProvider, type DiagramApi, type DiagramCompareLayoutOps, type DiagramCompareLayoutState, type Context as DiagramContext, type ElementIconRenderer, type ElementIconRendererProps, FramerMotionConfig, IconRendererProvider, type LikeC4BrowserProps, type LikeC4ColorScheme, LikeC4Diagram, type LikeC4DiagramProps, type LikeC4EditorCallbacks, type LikeC4EditorChangeResult, LikeC4EditorProvider, type LikeC4EditorProviderProps, LikeC4MantineProvider, LikeC4ModelProvider, type LikeC4ModelProviderProps, LikeC4ProjectsOverview, type LikeC4ProjectsOverviewProps, LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, LikeC4View, type LikeC4ViewProps, Logo, LogoIcon, MaxZoom, MinZoom, type NodeRenderers, type OnCanvasClick, type OnEdgeClick, type OnInitialized, type OnNavigateTo, type OnNodeClick, type OnOpenSource, type PaddingWithUnit, ReactLikeC4, type ReactLikeC4Props, SearchContext, type SearchContextValue, SearchControl, SearchPanelContent, StaticLikeC4Diagram, type Types, type ViewPadding, type ViewPaddings, type WhereOperator, createLikeC4Editor, defineLikeC4Webcomponent, filterProjects, normalizeSearch, pickViewBounds, projectSearchHighlights, bodyCss as searchBodyCss, dialogCss as searchDialogCss, selectDiagramContext, selectDiagramSnapshot, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramActorRef, useDiagramCompareLayout, useDiagramSelector, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSearchContext, useUpdateEffect };