@likec4/diagram 1.43.0 → 1.45.0

package/dist/context/LikeC4ModelContext.js

@@ -1,14 +1,7 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext } from 'react';
+import 'react/jsx-runtime';
+import { createContext } from 'react';
 
 const LikeC4ModelContext = createContext(null);
 const CurrentViewModelContext = createContext(null);
-function EnsureCurrentViewModel({ children }) {
-  const viewmodel = useContext(CurrentViewModelContext);
-  if (!viewmodel) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
 
-export { CurrentViewModelContext, EnsureCurrentViewModel, LikeC4ModelContext };
+export { CurrentViewModelContext, LikeC4ModelContext };

package/dist/context/TagStylesContext.js

@@ -1,35 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { isTagColorSpecified } from '@likec4/core';
+import { DefaultTagColors } from '@likec4/core/styles';
 import { useMantineStyleNonce } from '@mantine/core';
 import { createContext, memo, useContext } from 'react';
 import { isEmpty, pipe, entries, flatMap, join } from 'remeda';
 import { useLikeC4Specification } from '../hooks/useLikeC4Model.js';
 
 const TagStylesContext = createContext({});
-const radixColors = [
-  "yellow",
-  "orange",
-  "amber",
-  "tomato",
-  "red",
-  "ruby",
-  "crimson",
-  "pink",
-  "pink",
-  "purple",
-  "violet",
-  "indigo",
-  "blue",
-  "teal",
-  "grass",
-  "lime"
-];
+const radixColors = DefaultTagColors;
 const generateColorVars = (spec) => {
   const color = spec.color;
   if (isTagColorSpecified(spec)) {
     return `
       --colors-likec4-tag-bg: ${color};
-      --colors-likec4-tag-bg-hover: color-mix(in srgb, ${color}, var(--colors-likec4-mix-color) 20%);
+      --colors-likec4-tag-bg-hover: color-mix(in oklab, ${color}, var(--colors-likec4-mix-color) 20%);
     `;
   }
   if (!radixColors.includes(color)) {

package/dist/context/index.d.ts

@@ -1,5 +1,5 @@
 export { DiagramEventHandlers, useDiagramEventHandlers } from './DiagramEventHandlers';
-export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeatures, } from './DiagramFeatures';
+export { DefaultFeatures, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeatures, } from './DiagramFeatures';
 export type { EnabledFeatures } from './DiagramFeatures';
 export { EnsureMantine } from './EnsureMantine';
 export { FramerMotionConfig } from './FramerMotionConfig';

package/dist/custom/customNodes.js

@@ -1,10 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
+import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
 
 function customDiagramNode(Node) {
   return ((props) => {
     const viewId = props.data.viewId;
-    const viewModel = useLikeC4ViewModel(viewId);
+    const likec4 = useLikeC4Model();
+    const viewModel = likec4.findView(viewId);
     if (!viewModel) {
       console.error(`View "${viewId}" not found, requested by customNode "${props.data.id}"`, { props });
       return null;

package/dist/custom/hooks.d.ts

@@ -1,11 +1,11 @@
-export type { DiagramActorEvent, DiagramActorRef, DiagramContext, } from '../likec4diagram/state/types';
+export type { DiagramActorRef, DiagramActorSnapshot, DiagramContext, DiagramEmittedEvents, DiagramEvents, } from '../likec4diagram/state/types';
 export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
 export { type EnabledFeatures, type FeatureName, useEnabledFeatures, } from '../context/DiagramFeatures';
-export { useCurrentViewId, } from '../hooks/useCurrentViewId';
+export { useCurrentView, useCurrentViewId, } from '../hooks/useCurrentView';
 export { type DiagramApi, useDiagram, useDiagramActorRef, useDiagramContext, useOnDiagramEvent, } from '../hooks/useDiagram';
 export { useCurrentViewModel, } from '../hooks/useCurrentViewModel';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../hooks/useLikeC4Model';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../hooks/useLikeC4Project';
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../hooks/useLikeC4Project';
 export { useLikeC4Styles, } from '../hooks/useLikeC4Styles';
 export { useSetState } from '../hooks/useSetState';
 export { useUpdateEffect } from '../hooks/useUpdateEffect';

package/dist/custom/index.d.ts

@@ -4,7 +4,7 @@ export * from './hooks';
 export * from './primitives';
 export type { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseEdgePropsWithData, BaseNode, BaseNodeData, BaseNodeProps, BaseNodePropsWithData, } from '../base/types';
 export type { ChangeEvent, DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, NodeRenderers, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, ViewPadding, WhereOperator, } from '../LikeC4Diagram.props';
-export { Base } from '../base/types';
+export { Base } from '../base/Base';
 export type { Types } from '../likec4diagram/types';
 export { type EnabledFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures, } from '../context/DiagramFeatures';
 export { Overlay } from '../overlays/overlay/Overlay';

package/dist/custom/index.js

@@ -1,5 +1,5 @@
 export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from './customNodes.js';
-export { Base } from '../base/types.js';
+export { Base } from '../base/Base.js';
 export { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from '../context/DiagramFeatures.js';
 export { Overlay } from '../overlays/overlay/Overlay.js';
 export { PortalToContainer } from '../components/PortalToContainer.js';
@@ -13,12 +13,12 @@ export { DeploymentElementToolbar, ElementToolbar } from '../likec4diagram/custo
 export { SequenceActorNode, SequenceParallelArea } from '../likec4diagram/custom/nodes/SequenceActorNode.js';
 export { Toolbar } from '../likec4diagram/custom/nodes/toolbar/Toolbar.js';
 export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
-export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
-export { useDiagram, useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
-export { useDiagramActorRef } from '../hooks/safeContext.js';
+export { useCurrentView, useCurrentViewId } from '../hooks/useCurrentView.js';
+export { useDiagram, useDiagramActorRef } from '../hooks/safeContext.js';
+export { useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
 export { useCurrentViewModel } from '../hooks/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
 export { useLikeC4Styles } from '../hooks/useLikeC4Styles.js';
 export { useSetState } from '../hooks/useSetState.js';
 export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/editor/LikeC4EditorContext.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { OnChange } from '../LikeC4Diagram.props';
+import type * as t from '@likec4/core/types';
+export type LikeC4EditorContextType = {
+    /**
+     * Fetch a view by its ID and layout type.
+     *
+     * @param viewId - The ID of the view to fetch.
+     * @param layout - The layout type to use when fetching the view.
+     */
+    fetchView(viewId: t.ViewId, layout?: t.LayoutType): Promise<t.LayoutedView>;
+    syncManualLayout(viewId: t.ViewId): Promise<void>;
+    /**
+     * Callback invoked when the view changes.
+     */
+    onChange: OnChange;
+};
+export declare function LikeC4EditorContext({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function EnsureEditorContext({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
+export declare function useOptionalLikeC4Editor(): LikeC4EditorContextType | null;
+export declare function useLikeC4Editor(): LikeC4EditorContextType;

package/dist/editor/index.d.ts

@@ -0,0 +1,2 @@
+export { EnsureEditorContext, LikeC4EditorContext, useLikeC4Editor, useOptionalLikeC4Editor, } from './LikeC4EditorContext';
+export type { LikeC4EditorContextType } from './LikeC4EditorContext';

package/dist/hooks/index.d.ts

@@ -1,12 +1,14 @@
+export { useCallbackRef } from './useCallbackRef';
 export { useId } from './useId';
 export { useMantinePortalProps } from './useMantinePortalProps';
+export { useMediaPrint } from './useMediaPrint';
 export { useSetState } from './useSetState';
 export { useUpdateEffect } from './useUpdateEffect';
 export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow';
 export type { XYFlowInstance, XYStoreApi, XYStoreState } from './useXYFlow';
-export { useCurrentViewId } from './useCurrentViewId';
+export { useCurrentView, useCurrentViewId } from './useCurrentView';
 export { useCurrentViewModel } from './useCurrentViewModel';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './useLikeC4Model';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';
 export { useLikeC4Styles } from './useLikeC4Styles';
 export * from './useDiagram';

package/dist/hooks/safeContext.d.ts

@@ -1,4 +1,7 @@
-import { DiagramActorRef } from '../likec4diagram/state/types';
+import { DiagramApi } from '../likec4diagram/state/diagram-api';
 import { Provider } from 'react';
-export declare const DiagramActorContextProvider: Provider<DiagramActorRef>;
-export declare const useDiagramActorRef: () => DiagramActorRef;
+import { UnknownLayouted } from '@likec4/core';
+import { DiagramActorRef } from '../custom';
+export declare const DiagramActorContextProvider: Provider<DiagramApi< UnknownLayouted>>;
+export declare function useDiagramActorRef(): DiagramActorRef;
+export declare function useDiagram(): DiagramApi< UnknownLayouted>;

package/dist/hooks/safeContext.js

@@ -3,12 +3,19 @@ import { useContext, createContext } from 'react';
 const DiagramActorSafeContext = createContext(null);
 DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
 const DiagramActorContextProvider = DiagramActorSafeContext.Provider;
-const useDiagramActorRef = () => {
+function useDiagramActorRef() {
+  const ctx = useContext(DiagramActorSafeContext);
+  if (ctx === null) {
+    throw new Error("DiagramActorRef is not provided");
+  }
+  return ctx.actor;
+}
+function useDiagram() {
   const ctx = useContext(DiagramActorSafeContext);
   if (ctx === null) {
     throw new Error("DiagramActorRef is not provided");
   }
   return ctx;
-};
+}
 
-export { DiagramActorContextProvider, useDiagramActorRef };
+export { DiagramActorContextProvider, useDiagram, useDiagramActorRef };

package/dist/hooks/useCallbackRef.d.ts

@@ -0,0 +1 @@
+export declare function useCallbackRef<T extends (...args: any[]) => any>(callback: T | null | undefined): T;

package/dist/hooks/useCallbackRef.js

@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+
+function useCallbackRef(callback) {
+  const ref = useRef(callback);
+  ref.current = callback;
+  const callbackRef = useRef(null);
+  if (callbackRef.current == null) {
+    callbackRef.current = ((...args) => ref.current?.(...args));
+  }
+  return callbackRef.current;
+}
+
+export { useCallbackRef };

package/dist/hooks/useCurrentView.d.ts

@@ -0,0 +1,11 @@
+import { LayoutedView, ViewId } from '@likec4/core/types';
+/**
+ * Returns current view id
+ * Should be used only inside LikeC4Diagram
+ */
+export declare function useCurrentViewId(): ViewId;
+/**
+ * Returns current view
+ * Should be used only inside LikeC4Diagram
+ */
+export declare function useCurrentView(): LayoutedView;

package/dist/hooks/{useCurrentViewId.js → useCurrentView.js}

@@ -1,6 +1,5 @@
 import { useSelector } from '@xstate/react';
-import '@mantine/hooks';
-import 'fast-equals';
+import { shallowEqual } from 'fast-equals';
 import 'react';
 import { useDiagramActorRef } from './safeContext.js';
 
@@ -9,5 +8,10 @@ function useCurrentViewId() {
   const actorRef = useDiagramActorRef();
   return useSelector(actorRef, selectViewId);
 }
+const selectView = (s) => s.context.view;
+function useCurrentView() {
+  const actorRef = useDiagramActorRef();
+  return useSelector(actorRef, selectView, shallowEqual);
+}
 
-export { useCurrentViewId };
+export { useCurrentView, useCurrentViewId };

package/dist/hooks/useCurrentViewModel.js

@@ -1,6 +1,9 @@
 import { useContext } from 'react';
 import { CurrentViewModelContext } from '../context/LikeC4ModelContext.js';
 
+function useOptionalCurrentViewModel() {
+  return useContext(CurrentViewModelContext);
+}
 function useCurrentViewModel() {
   const vm = useContext(CurrentViewModelContext);
   if (!vm) {
@@ -9,4 +12,4 @@ function useCurrentViewModel() {
   return vm;
 }
 
-export { useCurrentViewModel };
+export { useCurrentViewModel, useOptionalCurrentViewModel };

package/dist/hooks/useDiagram.d.ts

@@ -1,123 +1,17 @@
-import { DynamicViewDisplayVariant, NodeNotation as ElementNotation } from '@likec4/core/types';
 import { DependencyList } from 'react';
-import { PartialDeep } from 'type-fest';
-import { FeatureName } from '../context/DiagramFeatures';
-import { OpenSourceParams } from '../LikeC4Diagram.props';
-import { AlignmentMode } from '../likec4diagram/state/aligners';
-import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext, DiagramEmittedEvents } from '../likec4diagram/state/types';
-import { Types } from '../likec4diagram/types';
-import { useDiagramActorRef } from './safeContext';
-import type * as t from '@likec4/core/types';
-type Any = t.aux.Any;
-type Unknown = t.aux.UnknownLayouted;
-type ViewId<A> = t.aux.ViewId<A>;
-type Fqn<A> = t.aux.Fqn<A>;
-type NodeId = t.aux.NodeId;
-type EdgeId = t.aux.EdgeId;
-export { useDiagramActorRef };
-export type { DiagramContext };
-export interface DiagramApi<A extends Any = Unknown> {
-    readonly actor: DiagramActorRef;
-    /**
-     * @warning Do not use in render phase
-     */
-    readonly currentView: t.DiagramView<A>;
-    /**
-     * Send event to diagram actor
-     */
-    send(event: DiagramActorEvent): void;
-    /**
-     * Navigate to view
-     */
-    navigateTo(viewId: ViewId<A>, fromNode?: NodeId): void;
-    /**
-     * Navigate back or forward in history
-     */
-    navigate(direction: 'back' | 'forward'): void;
-    /**
-     * Fit diagram to view
-     */
-    fitDiagram(duration?: number): void;
-    /**
-     * Open relationships browser
-     */
-    openRelationshipsBrowser(fqn: Fqn<A>): void;
-    /**
-     * If running in editor, trigger opening source file
-     */
-    openSource(params: OpenSourceParams<A>): void;
-    /**
-     * Open element details card
-     */
-    openElementDetails(fqn: Fqn<A>, fromNode?: NodeId): void;
-    openRelationshipDetails(...params: [edgeId: EdgeId] | [source: Fqn<A>, target: Fqn<A>]): void;
-    updateNodeData(nodeId: NodeId, data: PartialDeep<Types.NodeData>): void;
-    updateEdgeData(edgeId: EdgeId, data: PartialDeep<Types.EdgeData>): void;
-    /**
-     * Schedule save manual layout
-     */
-    scheduleSaveManualLayout(): void;
-    /**
-     * @returns true if there was pending request to save layout
-     */
-    cancelSaveManualLayout(): boolean;
-    /**
-     * Align nodes
-     */
-    align(mode: AlignmentMode): void;
-    /**
-     * Reset edge control points
-     */
-    resetEdgeControlPoints(): void;
-    /**
-     * Focus node
-     */
-    focusNode(nodeId: NodeId): void;
-    /**
-     * @warning Do not use in render phase
-     */
-    getSnapshot(): DiagramActorSnapshot;
-    /**
-     * @warning Do not use in render phase
-     */
-    getContext(): DiagramContext;
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramNode(xynodeId: string): t.DiagramNode<A> | null;
-    /**
-     * @warning Do not use in render phase
-     */
-    findEdge(xyedgeId: string): Types.Edge | null;
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramEdge(xyedgeId: string): t.DiagramEdge<A> | null;
-    startWalkthrough(): void;
-    walkthroughStep(direction?: 'next' | 'previous'): void;
-    stopWalkthrough(): void;
-    toggleFeature(feature: FeatureName, forceValue?: boolean): void;
-    highlightNotation(notation: ElementNotation, kind?: string): void;
-    unhighlightNotation(): void;
-    openSearch(searchValue?: string): void;
-    /**
-     * Switch dynamic view display variant
-     */
-    switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void;
-}
-/**
- * Diagram API
- * Mostly for internal use
- */
-export declare function useDiagram<A extends Any = Unknown>(): DiagramApi<A>;
+import { DiagramApi } from '../likec4diagram/state/diagram-api';
+import { DiagramActorSnapshot, DiagramContext, DiagramEmittedEvents } from '../likec4diagram/state/types';
+import { useDiagram, useDiagramActorRef } from './safeContext';
+export { useDiagram, useDiagramActorRef };
+export type { DiagramApi, DiagramContext };
 export declare function useDiagramActorSnapshot<T = unknown>(selector: (state: DiagramActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 /**
  * Read diagram context
  */
 export declare function useDiagramContext<T = unknown>(selector: (context: DiagramContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
-type PickEmittedEvent<T extends DiagramEmittedEvents['type']> = DiagramEmittedEvents & {
+type PickEmittedEvent<T> = T extends DiagramEmittedEvents['type'] ? DiagramEmittedEvents & {
     type: T;
-};
+} : never;
 /**
  * Subscribe to diagram emitted events
  * @example

package/dist/hooks/useDiagram.js

@@ -1,132 +1,12 @@
-import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { useMemo, useCallback, useRef, useEffect } from 'react';
-import { findDiagramEdge, findDiagramNode } from '../likec4diagram/state/utils.js';
+import { useCallback, useRef, useEffect } from 'react';
 import { useDiagramActorRef } from './safeContext.js';
+export { useDiagram } from './safeContext.js';
 
-function useDiagram() {
-  const actor = useDiagramActorRef();
-  return useMemo(() => ({
-    actor,
-    send: (event) => actor.send(event),
-    navigateTo: (viewId, fromNode) => {
-      actor.send({
-        type: "navigate.to",
-        viewId,
-        ...fromNode && { fromNode }
-      });
-    },
-    navigate: (direction) => {
-      actor.send({ type: `navigate.${direction}` });
-    },
-    fitDiagram: (duration = 350) => {
-      actor.send({ type: "fitDiagram", duration });
-    },
-    openRelationshipsBrowser: (fqn) => {
-      actor.send({ type: "open.relationshipsBrowser", fqn });
-    },
-    openSource: (params) => {
-      actor.send({ type: "open.source", ...params });
-    },
-    openElementDetails: (fqn, fromNode) => {
-      actor.send({ type: "open.elementDetails", fqn, fromNode });
-    },
-    openRelationshipDetails: (...params) => {
-      if (params.length === 1) {
-        actor.send({ type: "open.relationshipDetails", params: { edgeId: params[0] } });
-      } else {
-        actor.send({ type: "open.relationshipDetails", params: { source: params[0], target: params[1] } });
-      }
-    },
-    updateNodeData: (nodeId, data) => {
-      actor.send({ type: "update.nodeData", nodeId, data });
-    },
-    updateEdgeData: (edgeId, data) => {
-      actor.send({
-        type: "update.edgeData",
-        edgeId,
-        data
-      });
-    },
-    scheduleSaveManualLayout: () => {
-      actor.send({ type: "saveManualLayout.schedule" });
-    },
-    /**
-     * @returns true if there was pending request to save layout
-     */
-    cancelSaveManualLayout: () => {
-      const syncState = actor.getSnapshot().children.syncLayout?.getSnapshot().value;
-      actor.send({ type: "saveManualLayout.cancel" });
-      return syncState === "pending" || syncState === "paused";
-    },
-    align: (mode) => {
-      actor.send({ type: "layout.align", mode });
-    },
-    resetEdgeControlPoints: () => {
-      actor.send({ type: "layout.resetEdgeControlPoints" });
-    },
-    focusNode: (nodeId) => {
-      actor.send({ type: "focus.node", nodeId });
-    },
-    /**
-     * @warning Do not use in render phase
-     */
-    get currentView() {
-      return actor.getSnapshot().context.view;
-    },
-    /**
-     * @warning Do not use in render phase
-     */
-    getSnapshot: () => actor.getSnapshot(),
-    /**
-     * @warning Do not use in render phase
-     */
-    getContext: () => actor.getSnapshot().context,
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramNode: (xynodeId) => {
-      return findDiagramNode(actor.getSnapshot().context, xynodeId);
-    },
-    findEdge: (xyedgeId) => {
-      return actor.getSnapshot().context.xyedges.find((e) => e.data.id === xyedgeId) ?? null;
-    },
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramEdge: (xyedgeId) => {
-      return findDiagramEdge(actor.getSnapshot().context, xyedgeId);
-    },
-    startWalkthrough: () => {
-      actor.send({ type: "walkthrough.start" });
-    },
-    walkthroughStep: (direction = "next") => {
-      actor.send({ type: "walkthrough.step", direction });
-    },
-    stopWalkthrough: () => {
-      actor.send({ type: "walkthrough.end" });
-    },
-    toggleFeature: (feature, forceValue) => {
-      actor.send({ type: "toggle.feature", feature, ...forceValue !== void 0 && { forceValue } });
-    },
-    highlightNotation: (notation, kind) => {
-      actor.send({ type: "notations.highlight", notation, ...kind && { kind } });
-    },
-    unhighlightNotation: () => {
-      actor.send({ type: "notations.unhighlight" });
-    },
-    openSearch: (searchValue) => {
-      actor.send({ type: "open.search", ...searchValue && { search: searchValue } });
-    },
-    switchDynamicViewVariant: (variant) => {
-      actor.send({ type: "switch.dynamicViewVariant", variant });
-    }
-  }), [actor]);
-}
 function useDiagramActorSnapshot(selector, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
-  return useSelector(actorRef, useCallbackRef(selector), compare);
+  return useSelector(actorRef, selector, compare);
 }
 function useDiagramContext(selector, compare = shallowEqual, deps) {
   const actorRef = useDiagramActorRef();
@@ -138,13 +18,13 @@ function useOnDiagramEvent(event, callback) {
   const callbackRef = useRef(callback);
   callbackRef.current = callback;
   useEffect(() => {
-    const subscription = actorRef.on(event, (event2) => {
-      callbackRef.current(event2);
+    const subscription = actorRef.on(event, (payload) => {
+      callbackRef.current(payload);
     });
     return () => {
       subscription.unsubscribe();
     };
-  }, [actorRef]);
+  }, [actorRef, event]);
 }
 
-export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useOnDiagramEvent };
+export { useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useOnDiagramEvent };

package/dist/hooks/useDiagramCompareLayout.d.ts

@@ -0,0 +1,35 @@
+import { DiagramActorSnapshot } from '../likec4diagram/state/types';
+import type * as t from '@likec4/core/types';
+declare const selectCompareLayoutState: ({ context }: DiagramActorSnapshot) => {
+    isEnabled: false;
+    isEditable: false;
+    isActive: false;
+    drifts: never[];
+    layout: t.LayoutType;
+} | {
+    isEnabled: true;
+    isEditable: boolean;
+    isActive: boolean;
+    drifts: t.NonEmptyReadonlyArray<t.LayoutedViewDriftReason>;
+    layout: t.LayoutType;
+};
+type DiagramCompareLayoutState = ReturnType<typeof selectCompareLayoutState>;
+type DiagramCompareLayoutOps = {
+    /**
+     * Toggles the compare mode on or off.
+     */
+    toggleCompare: (force?: 'on' | 'off') => void;
+    /**
+     * Switches the layout type between 'auto' and 'manual'.
+     */
+    switchLayout: (layoutType: t.LayoutType) => void;
+    /**
+     * Resets the manual layout to its default state.
+     */
+    resetManualLayout: () => void;
+};
+export declare function useDiagramCompareLayout(): [
+    DiagramCompareLayoutState,
+    DiagramCompareLayoutOps
+];
+export {};