@likec4/diagram 1.36.1 → 1.37.0

package/dist/context/ReduceGraphics.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { createSafeContext } from '@mantine/core';
-import { useStore } from '@nanostores/react';
+import '@nanostores/react';
 import { atom } from 'nanostores';
 import { useRef, createContext, useContext } from 'react';
 
@@ -22,8 +22,5 @@ function ReduceGraphicsContext({ reduceGraphics, children }) {
   }
   return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children }) });
 }
-function useIsPanning() {
-  return useStore(usePanningAtom());
-}
 
-export { ReduceGraphicsContext, useIsPanning, useIsReducedGraphics, usePanningAtom };
+export { ReduceGraphicsContext, useIsReducedGraphics, usePanningAtom };

package/dist/context/RootContainer.js

@@ -17,11 +17,7 @@ function RootContainer({
   const $isPanning = usePanningAtom();
   useEffect(() => {
     return $isPanning.listen((isPanning) => {
-      if (isPanning) {
-        ref.current?.setAttribute("data-likec4-diagram-panning", "true");
-      } else {
-        ref.current?.removeAttribute("data-likec4-diagram-panning");
-      }
+      ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
     });
   }, [$isPanning]);
   return /* @__PURE__ */ jsx(

package/dist/custom/customNodes.d.ts

@@ -1,12 +1,13 @@
 import { NodeModel } from '@likec4/core/model';
 import { Any } from '@likec4/core/types';
-import { ReactNode } from 'react';
+import { FunctionComponent } from 'react';
 import { NodeProps } from '../base/types';
 import { Types } from '../likec4diagram/types';
-export type CustomElementNodeProps<M extends Any = Any> = {
-    nodeProps: NodeProps<Types.ElementNodeData, 'element'>;
-    nodeModel: NodeModel.WithElement<M>;
+type CustomDiagramNodeProps = {
+    nodeProps: NodeProps<Types.NodeData, string>;
+    nodeModel: NodeModel;
 };
+type CustomNodeComponent<P extends CustomDiagramNodeProps> = (impl: FunctionComponent<P>) => FunctionComponent<P['nodeProps']>;
 /**
  * Node that will be used to render the element from the model.
  * It is a leaf node, i.e. it does not have children.
@@ -60,10 +61,10 @@ export type CustomElementNodeProps<M extends Any = Any> = {
  * ))
  * ```
  */
-export declare const elementNode: (Node: (props: CustomElementNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.ElementNodeData, "element">) => ReactNode;
-export type CustomDeploymentNodeProps<M extends Any = Any> = {
-    nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>;
-    nodeModel: NodeModel.WithDeploymentElement<M>;
+export declare const elementNode: CustomNodeComponent<CustomElementNodeProps>;
+export type CustomElementNodeProps = {
+    nodeProps: NodeProps<Types.ElementNodeData, 'element'>;
+    nodeModel: NodeModel.WithElement<Any>;
 };
 /**
  * Node that will be used to render the element from deployment model.
@@ -113,10 +114,10 @@ export type CustomDeploymentNodeProps<M extends Any = Any> = {
  * ))
  * ```
  */
-export declare const deploymentNode: (Node: (props: CustomDeploymentNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => ReactNode;
-export type CustomCompoundElementNodeProps<M extends Any = Any> = {
-    nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>;
-    nodeModel: NodeModel.WithElement<M>;
+export declare const deploymentNode: CustomNodeComponent<CustomDeploymentNodeProps>;
+export type CustomDeploymentNodeProps = {
+    nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>;
+    nodeModel: NodeModel.WithDeploymentElement<Any>;
 };
 /**
  * Node that will be used to render the compound element from the model.
@@ -156,10 +157,10 @@ export type CustomCompoundElementNodeProps<M extends Any = Any> = {
  * ))
  * ```
  */
-export declare const compoundElementNode: (Node: (props: CustomCompoundElementNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.CompoundElementNodeData, "compound-element">) => ReactNode;
-export type CustomCompoundDeploymentNodeProps<M extends Any = Any> = {
-    nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>;
-    nodeModel: NodeModel.WithDeploymentElement<M>;
+export declare const compoundElementNode: CustomNodeComponent<CustomCompoundElementNodeProps>;
+export type CustomCompoundElementNodeProps = {
+    nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>;
+    nodeModel: NodeModel.WithElement<Any>;
 };
 /**
  * Node that will be used to render the compound from the deployment model.
@@ -193,10 +194,10 @@ export type CustomCompoundDeploymentNodeProps<M extends Any = Any> = {
  *   </CompoundNodeContainer>
  * ```
  */
-export declare const compoundDeploymentNode: (Node: (props: CustomCompoundDeploymentNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.CompoundDeploymentNodeData, "compound-deployment">) => ReactNode;
-export type CustomViewGroupNodeProps<M extends Any = Any> = {
-    nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>;
-    nodeModel: NodeModel.IsGroup<M>;
+export declare const compoundDeploymentNode: CustomNodeComponent<CustomCompoundDeploymentNodeProps>;
+export type CustomCompoundDeploymentNodeProps = {
+    nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>;
+    nodeModel: NodeModel.WithDeploymentElement<Any>;
 };
 /**
  * Node that will be used to render the view group from the model.
@@ -223,11 +224,16 @@ export type CustomViewGroupNodeProps<M extends Any = Any> = {
  *   </CompoundNodeContainer>
  * ```
  */
-export declare const viewGroupNode: (Node: (props: CustomViewGroupNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.ViewGroupNodeData, "view-group">) => ReactNode;
+export declare const viewGroupNode: CustomNodeComponent<CustomViewGroupNodeProps>;
+export type CustomViewGroupNodeProps = {
+    nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>;
+    nodeModel: NodeModel.IsGroup<Any>;
+};
 export interface CustomNodes {
-    element?: undefined | ((props: NodeProps<Types.ElementNodeData, 'element'>) => ReactNode);
-    deployment?: undefined | ((props: NodeProps<Types.DeploymentElementNodeData, 'deployment'>) => ReactNode);
-    compoundElement?: undefined | ((props: NodeProps<Types.CompoundElementNodeData, 'compound-element'>) => ReactNode);
-    compoundDeployment?: undefined | ((props: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>) => ReactNode);
-    viewGroup?: undefined | ((props: NodeProps<Types.ViewGroupNodeData, 'view-group'>) => ReactNode);
+    element?: FunctionComponent<NodeProps<Types.ElementNodeData, 'element'>>;
+    deployment?: FunctionComponent<NodeProps<Types.DeploymentElementNodeData, 'deployment'>>;
+    compoundElement?: FunctionComponent<NodeProps<Types.CompoundElementNodeData, 'compound-element'>>;
+    compoundDeployment?: FunctionComponent<NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>>;
+    viewGroup?: FunctionComponent<NodeProps<Types.ViewGroupNodeData, 'view-group'>>;
 }
+export {};

package/dist/custom/customNodes.js

@@ -1,20 +1,24 @@
 import { jsx } from 'react/jsx-runtime';
-import { DEV } from 'esm-env';
 import { useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
 import { customNode } from '../base/primitives/customNode.js';
 
 function customDiagramNode(Node) {
   return customNode((props) => {
-    const viewModel = useLikeC4ViewModel(props.data.viewId);
+    const viewId = props.data.viewId;
+    const viewModel = useLikeC4ViewModel(viewId);
     if (!viewModel) {
-      if (DEV) {
-        throw new Error(`View "${props.data.viewId}" not found, requested by customNode "${props.id}"`);
-      }
-      console.error(`View "${props.data.viewId}" not found in likec4model`, { props });
+      console.error(`View "${viewId}" not found, requested by customNode "${props.data.id}"`, { props });
       return null;
     }
-    const model = viewModel.node(props.id);
-    return /* @__PURE__ */ jsx(Node, { nodeProps: props, nodeModel: model });
+    const model = viewModel.findNode(props.data.id);
+    if (!model) {
+      console.error(
+        `Node "${props.id}" not found in view "${viewId}", requested by customNode "${props.data.id}"`,
+        { props }
+      );
+      return null;
+    }
+    return jsx(Node, { nodeProps: props, nodeModel: model });
   });
 }
 const elementNode = customDiagramNode;

package/dist/custom/hooks.d.ts

@@ -2,10 +2,11 @@ export type { DiagramActorEvent, DiagramActorRef, DiagramContext, } from '../sta
 export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
 export { type EnabledFeatures, type FeatureName, useEnabledFeatures, } from '../context/DiagramFeatures';
 export { useCurrentViewId, } from '../hooks/useCurrentViewId';
-export { type DiagramApi, useDiagram, useDiagramActorRef, useDiagramContext, } from '../hooks/useDiagram';
+export { type DiagramApi, useDiagram, useDiagramActorRef, useDiagramContext, useOnDiagramEvent, } from '../hooks/useDiagram';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi, type XYFlowInstance, type XYStoreApi, } from '../hooks/useXYFlow';
 export { useCurrentViewModel, } from '../likec4model/useCurrentViewModel';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../likec4model/useLikeC4Model';
+export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../likec4model/useLikeC4Project';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps';
 export { useSetState } from '../hooks/useSetState';
 export { useUpdateEffect } from '../hooks/useUpdateEffect';

package/dist/custom/index.js

@@ -22,11 +22,12 @@ export { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures
 export { Overlay } from '../overlays/overlay/Overlay.js';
 export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
-export { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
+export { useDiagram, useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
 export { useDiagramActorRef } from '../hooks/safeContext.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
 export { useCurrentViewModel } from '../likec4model/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
+export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../likec4model/useLikeC4Project.js';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
 export { useSetState } from '../hooks/useSetState.js';
 export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/globals.css.js

@@ -1,3 +1,3 @@
-const globalsCss = ".likec4-root{overflow:hidden;position:relative;padding:0;margin:0;width:100%;height:100%;border:0px solid transparent;container-name:likec4-root;container-type:size}.likec4-root .react-flow:is(.not-initialized){opacity:0}:where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon{width:75%;height:75%}.likec4-root :where(.react-flow__node,.react-flow__edge,.likec4-edge-label-container):has([data-likec4-dimmed]){opacity:.25}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge,.likec4-edge-label-container):has([data-likec4-dimmed]){filter:grayscale(85%) blur(3px)}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge,.likec4-edge-label-container):has([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}[data-mantine-color-scheme=dark] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>svg{mix-blend-mode:plus-lighter}[data-mantine-color-scheme=light] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>svg{mix-blend-mode:screen}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-stroke-width: 3;--xy-edge-stroke: var(--likec4-palette-relation-stroke);--xy-edge-stroke-selected: var(--likec4-palette-relation-stroke-selected);--xy-edge-label-color: var(--likec4-palette-relation-label);--xy-edge-label-background-color: var(--likec4-palette-relation-label-bg)}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container):is([data-likec4-hovered=true],[data-edge-active=true]){--xy-edge-stroke-width: 4;--xy-edge-stroke: var(--likec4-palette-relation-stroke-selected)}[data-mantine-color-scheme=dark] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)}[data-mantine-color-scheme=light] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-color: color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)}";
+const globalsCss = ".likec4-shadow-root dialog{color:var(--mantine-color-text)}.likec4-root{overflow:hidden;position:relative;padding:0;margin:0;width:100%;height:100%;border:0px solid transparent;container-name:likec4-root;container-type:size}.likec4-root .react-flow:is(.not-initialized){opacity:0}.likec4-root .react-flow{contain:paint;--xy-background-color: var(--colors-likec4-background);--xy-background-pattern-color: var(--colors-likec4-background-pattern, var(--colors-likec4-background))}.likec4-root .react-flow:is(.bg-transparent){background:transparent!important;--xy-background-color: transparent !important}.likec4-root .react-flow .react-flow__pane{user-select:none;--webkit-user-select: none}.likec4-static-view .react-flow .react-flow__attribution{display:none}:where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon{width:75%;height:75%}.likec4-root .likec4-edge-label-container{top:0;left:0;position:absolute;width:auto;height:auto}.likec4-root :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){opacity:.25}.likec4-root .likec4-edge-label-container:is([data-likec4-dimmed]){opacity:.25}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){filter:grayscale(85%) blur(3px)}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed]){filter:grayscale(85%) blur(3px)}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root .react-flow :where(.react-flow__nodes,.react-flow__edges,.react-flow__edgelabel-renderer){display:contents}.likec4-root .react-flow__node.draggable:has(.likec4-compound-node){cursor:default}[data-mantine-color-scheme=dark] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:plus-lighter}[data-mantine-color-scheme=light] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:screen}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-stroke-width: 3;--xy-edge-stroke: var(--likec4-palette-relation-stroke);--xy-edge-stroke-selected: var(--likec4-palette-relation-stroke-selected);--xy-edge-label-color: var(--likec4-palette-relation-label);--xy-edge-label-background-color: var(--likec4-palette-relation-label-bg)}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container):is([data-likec4-hovered=true],[data-edge-active=true]){--xy-edge-stroke-width: 4;--xy-edge-stroke: var(--likec4-palette-relation-stroke-selected)}[data-mantine-color-scheme=dark] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)}[data-mantine-color-scheme=light] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-color: color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)}";
 
 export { globalsCss as default };

package/dist/hooks/index.d.ts

@@ -2,4 +2,4 @@ export { useMantinePortalProps } from './useMantinePortalProps';
 export { useSetState } from './useSetState';
 export { useUpdateEffect } from './useUpdateEffect';
 export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow';
-export type { XYStoreApi } from './useXYFlow';
+export type { XYFlowInstance, XYStoreApi, XYStoreState } from './useXYFlow';

package/dist/hooks/useDiagram.d.ts

@@ -5,7 +5,7 @@ import { FeatureName } from '../context/DiagramFeatures';
 import { OpenSourceParams } from '../LikeC4Diagram.props';
 import { Types } from '../likec4diagram/types';
 import { AlignmentMode } from '../state/aligners';
-import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext } from '../state/types';
+import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext, DiagramEmittedEvents } from '../state/types';
 import { useDiagramActorRef } from './safeContext';
 export { useDiagramActorRef };
 export interface DiagramApi {
@@ -77,6 +77,10 @@ export interface DiagramApi {
      * @warning Do not use in render phase
      */
     findDiagramNode(xynodeId: string): DiagramNode | null;
+    /**
+     * @warning Do not use in render phase
+     */
+    findEdge(xyedgeId: string): Types.Edge | null;
     /**
      * @warning Do not use in render phase
      */
@@ -99,3 +103,16 @@ export declare function useDiagramActorSnapshot<T = unknown>(selector: (state: D
  * 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: T;
+};
+/**
+ * Subscribe to diagram emitted events
+ * @example
+ * ```tsx
+ * useOnDiagramEvent('navigateTo', ({viewId}) => {
+ *   console.log('Navigating to view', viewId)
+ * })
+ * ```
+ */
+export declare function useOnDiagramEvent<T extends DiagramEmittedEvents['type']>(event: T, callback: (event: PickEmittedEvent<T>) => void): void;

package/dist/hooks/useDiagram.js

@@ -1,7 +1,7 @@
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useRef, useEffect } from 'react';
 import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
 import { useDiagramActorRef } from './safeContext.js';
 
@@ -89,6 +89,9 @@ function useDiagram() {
     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
      */
@@ -127,5 +130,18 @@ function useDiagramContext(selector, compare = shallowEqual, deps) {
   const select = useCallback((s) => selector(s.context), deps ?? []);
   return useSelector(actorRef, select, compare);
 }
+function useOnDiagramEvent(event, callback) {
+  const actorRef = useDiagramActorRef();
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    const subscription = actorRef.on(event, (event2) => {
+      callbackRef.current(event2);
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [actorRef]);
+}
 
-export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext };
+export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useOnDiagramEvent };

package/dist/hooks/useXYFlow.d.ts

@@ -1,9 +1,9 @@
 import { ReactFlowInstance, ReactFlowState, InternalNode } from '@xyflow/react';
 import { Types } from '../likec4diagram/types';
 import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
-import { ReactNode, CSSProperties } from 'react';
+import { ReactNode, CSSProperties, AriaRole, SVGAttributes } from 'react';
 import { Dimmed } from '../base/types.Base';
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId, MarkdownOrString } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId, MarkdownOrString } from '@likec4/core';
 export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     id: string;
     source: string;
@@ -30,6 +30,8 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     className?: string;
     reconnectable?: boolean | HandleType;
     focusable?: boolean;
+    ariaRole?: AriaRole;
+    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
     type: "relationship";
     data: {
         hovered?: boolean;
@@ -39,11 +41,11 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
         label: string | null;
         points: NonEmptyArray<Point>;
         color: Color | undefined;
-        head: RelationshipArrowType | undefined;
-        line: RelationshipLineType | undefined;
         dir: "forward" | "back" | "both" | undefined;
         technology: string | undefined;
+        line: RelationshipLineType | undefined;
         tail: RelationshipArrowType | undefined;
+        head: RelationshipArrowType | undefined;
         labelBBox: BBox | null | undefined;
         navigateTo: ViewId<string> | null | undefined;
         notes: MarkdownOrString | undefined;
@@ -52,7 +54,8 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     };
 }>;
 export type XYFlowInstance = ReactFlowInstance<Types.Node, Types.Edge>;
-export declare function useXYStore<StateSlice = unknown>(selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice, equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean): StateSlice;
+export type XYStoreState = ReactFlowState<Types.Node, Types.Edge>;
+export declare function useXYStore<StateSlice = unknown>(selector: (state: XYStoreState) => StateSlice, equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean): StateSlice;
 export declare const useXYStoreApi: () => {
     getState: () => ReactFlowState<Types.Node, {
         id: string;
@@ -80,6 +83,8 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
+        ariaRole?: AriaRole;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
         type: "relationship";
         data: {
             hovered?: boolean;
@@ -89,11 +94,11 @@ export declare const useXYStoreApi: () => {
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
-            head: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
             technology: string | undefined;
+            line: RelationshipLineType | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
             notes: MarkdownOrString | undefined;
@@ -127,6 +132,8 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
+        ariaRole?: AriaRole;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
         type: "relationship";
         data: {
             hovered?: boolean;
@@ -136,11 +143,11 @@ export declare const useXYStoreApi: () => {
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
-            head: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
             technology: string | undefined;
+            line: RelationshipLineType | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
             notes: MarkdownOrString | undefined;
@@ -173,6 +180,8 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
+        ariaRole?: AriaRole;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
         type: "relationship";
         data: {
             hovered?: boolean;
@@ -182,11 +191,11 @@ export declare const useXYStoreApi: () => {
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
-            head: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
             technology: string | undefined;
+            line: RelationshipLineType | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
             notes: MarkdownOrString | undefined;
@@ -219,6 +228,8 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
+        ariaRole?: AriaRole;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
         type: "relationship";
         data: {
             hovered?: boolean;
@@ -228,11 +239,11 @@ export declare const useXYStoreApi: () => {
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
-            head: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
             technology: string | undefined;
+            line: RelationshipLineType | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
             notes: MarkdownOrString | undefined;
@@ -265,6 +276,8 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
+        ariaRole?: AriaRole;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
         type: "relationship";
         data: {
             hovered?: boolean;
@@ -274,11 +287,11 @@ export declare const useXYStoreApi: () => {
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
-            head: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
             technology: string | undefined;
+            line: RelationshipLineType | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
             notes: MarkdownOrString | undefined;
@@ -311,6 +324,8 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
+        ariaRole?: AriaRole;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
         type: "relationship";
         data: {
             hovered?: boolean;
@@ -320,11 +335,11 @@ export declare const useXYStoreApi: () => {
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
-            head: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
             technology: string | undefined;
+            line: RelationshipLineType | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
             notes: MarkdownOrString | undefined;
@@ -358,6 +373,8 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
+        ariaRole?: AriaRole;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
         type: "relationship";
         data: {
             hovered?: boolean;
@@ -367,11 +384,11 @@ export declare const useXYStoreApi: () => {
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
-            head: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
             technology: string | undefined;
+            line: RelationshipLineType | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
             notes: MarkdownOrString | undefined;
@@ -404,6 +421,8 @@ export declare const useXYStoreApi: () => {
         className?: string;
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
+        ariaRole?: AriaRole;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
         type: "relationship";
         data: {
             hovered?: boolean;
@@ -413,11 +432,11 @@ export declare const useXYStoreApi: () => {
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
-            head: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
             technology: string | undefined;
+            line: RelationshipLineType | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
             notes: MarkdownOrString | undefined;

package/dist/index.d.ts

@@ -6,5 +6,5 @@ export { Overlay, type OverlayProps, } from './overlays/overlay/Overlay';
 export { LikeC4ModelProvider, type LikeC4ModelProviderProps, } from './LikeC4ModelProvider';
 export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, } from './LikeC4ProjectsProvider';
 export * from './custom/hooks';
-export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, WhereOperator, } from './LikeC4Diagram.props';
+export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, WhereOperator, } from './LikeC4Diagram.props';
 export { StaticLikeC4Diagram, type StaticLikeC4DiagramProps, } from './StaticLikeC4Diagram';

package/dist/index.js

@@ -8,11 +8,12 @@ export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
 export { useDiagramEventHandlers } from './context/DiagramEventHandlers.js';
 export { useEnabledFeatures } from './context/DiagramFeatures.js';
 export { useCurrentViewId } from './hooks/useCurrentViewId.js';
-export { useDiagram, useDiagramContext } from './hooks/useDiagram.js';
+export { useDiagram, useDiagramContext, useOnDiagramEvent } from './hooks/useDiagram.js';
 export { useDiagramActorRef } from './hooks/safeContext.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './hooks/useXYFlow.js';
 export { useCurrentViewModel } from './likec4model/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './likec4model/useLikeC4Model.js';
+export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from './likec4model/useLikeC4Project.js';
 export { useMantinePortalProps } from './hooks/useMantinePortalProps.js';
 export { useSetState } from './hooks/useSetState.js';
 export { useUpdateEffect } from './hooks/useUpdateEffect.js';

package/dist/likec4diagram/DiagramUI.js

@@ -5,6 +5,7 @@ import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { EnsureCurrentViewModel } from '../likec4model/LikeC4ModelContext.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { Search } from '../search/Search.js';
+import { RelationshipPopover } from './relationship-popover/RelationshipPopover.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { NavigationPanel } from '../navigationpanel/NavigationPanel.js';
 import { Controls } from './ui/controls/Controls.js';
@@ -18,7 +19,8 @@ const DiagramUI = memo(() => {
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough,
-    enableSearch
+    enableSearch,
+    enableRelationshipDetails
   } = useEnabledFeatures();
   const overlaysActorRef = useOverlaysActorRef();
   const searchActorRef = useSearchActorRef();
@@ -30,7 +32,8 @@ const DiagramUI = memo(() => {
       enableViewTitle && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
       enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {})
     ] }),
-    enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef })
+    enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef }),
+    enableRelationshipDetails && /* @__PURE__ */ jsx(RelationshipPopover, {})
   ] });
 });
 DiagramUI.displayName = "DiagramUI";

package/dist/likec4diagram/DiagramXYFlow.js

@@ -84,9 +84,9 @@ function LikeC4DiagramXYFlow({
       return {
         element: renderNodes?.element ?? BuiltinNodes.element,
         deployment: renderNodes?.deployment ?? BuiltinNodes.deployment,
-        "compound-element": renderNodes?.compoundElement ?? BuiltinNodes["compound-element"],
-        "compound-deployment": renderNodes?.compoundDeployment ?? BuiltinNodes["compound-deployment"],
-        "view-group": renderNodes?.viewGroup ?? BuiltinNodes["view-group"]
+        "compound-element": renderNodes?.compoundElement ?? BuiltinNodes.compoundElement,
+        "compound-deployment": renderNodes?.compoundDeployment ?? BuiltinNodes.compoundDeployment,
+        "view-group": renderNodes?.viewGroup ?? BuiltinNodes.viewGroup
       };
     },
     [renderNodes],
@@ -145,16 +145,16 @@ function LikeC4DiagramXYFlow({
             diagram.send({ type: "xyflow.nodeMouseLeave", node });
           }
         }),
-        onEdgeMouseEnter: useCallbackRef((_event, edge) => {
-          _event.stopPropagation();
+        onEdgeMouseEnter: useCallbackRef((event, edge) => {
+          event.stopPropagation();
           if (!edge.data.hovered) {
-            diagram.send({ type: "xyflow.edgeMouseEnter", edge });
+            diagram.send({ type: "xyflow.edgeMouseEnter", edge, event });
           }
         }),
-        onEdgeMouseLeave: useCallbackRef((_event, edge) => {
-          _event.stopPropagation();
+        onEdgeMouseLeave: useCallbackRef((event, edge) => {
+          event.stopPropagation();
           if (edge.data.hovered) {
-            diagram.send({ type: "xyflow.edgeMouseLeave", edge });
+            diagram.send({ type: "xyflow.edgeMouseLeave", edge, event });
           }
         }),
         ...props.pannable && {

package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts

@@ -1,4 +1,4 @@
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId, MarkdownOrString } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId, MarkdownOrString } from '@likec4/core';
 import { XYPosition } from '@xyflow/react';
 import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
@@ -38,11 +38,11 @@ export declare const RelationshipEdge: FunctionComponent<{
         label: string | null;
         points: NonEmptyArray<Point>;
         color: Color | undefined;
-        head: RelationshipArrowType | undefined;
-        line: RelationshipLineType | undefined;
         dir: "forward" | "back" | "both" | undefined;
         technology: string | undefined;
+        line: RelationshipLineType | undefined;
         tail: RelationshipArrowType | undefined;
+        head: RelationshipArrowType | undefined;
         labelBBox: BBox | null | undefined;
         navigateTo: ViewId<string> | null | undefined;
         notes: MarkdownOrString | undefined;