@likec4/diagram 1.19.1 → 1.20.0

package/dist/LikeC4Diagram.css.d.ts

@@ -2,4 +2,3 @@ export declare const cssReactFlow: string;
 export declare const notInitialized: string;
 export declare const cssDisablePan: string;
 export declare const cssTransparentBg: string;
-export declare const cssNoControls: string;

package/dist/LikeC4Diagram.css.js

@@ -1,13 +1,9 @@
 /* empty css                                 */
 var cssReactFlow = "_2h8g8h0";
-var notInitialized = "_2h8g8h1";
 var cssDisablePan = "_2h8g8h2";
 var cssTransparentBg = "_2h8g8h3";
-var cssNoControls = "_2h8g8h4";
 export {
   cssDisablePan,
-  cssNoControls,
   cssReactFlow,
-  cssTransparentBg,
-  notInitialized
+  cssTransparentBg
 };

package/dist/LikeC4Diagram.d.ts

@@ -1,6 +1,3 @@
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
-export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showDiagramTitle, showNotations, enableDynamicViewWalkthrough, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableSearch, initialWidth, initialHeight, keepAspectRatio, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, renderIcon, where, showNavigationButtons }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace LikeC4Diagram {
-    var displayName: string;
-}
+export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, background, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesSelectable, nodesDraggable, controls, showDiagramTitle, showNotations, enableDynamicViewWalkthrough, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, renderIcon, where, showNavigationButtons, }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -1,24 +1,19 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { isDeploymentView } from "@likec4/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ReactFlowProvider } from "@xyflow/react";
-import clsx from "clsx";
-import { deepEqual } from "fast-equals";
-import { useRef, useEffect, memo } from "react";
+import { useRef } from "react";
 import { isEmpty } from "remeda";
-import { rootClassName } from "./globals.css.js";
-import { useDiagramState } from "./hooks/useDiagramState.js";
 import { LikeC4CustomColors } from "./LikeC4CustomColors.js";
-import { cssReactFlow, cssNoControls, cssDisablePan, cssTransparentBg, notInitialized } from "./LikeC4Diagram.css.js";
-import { LikeC4Search } from "./LikeC4Search.js";
-import { DiagramContextProvider } from "./state/DiagramContext.js";
-import { EnsureMantine } from "./ui/EnsureMantine.js";
-import { FramerMotionConfig } from "./ui/FramerMotionConfig.js";
-import { FitViewOnDiagramChange } from "./xyflow/FitviewOnDiagramChange.js";
-import { SelectEdgesOnNodeFocus } from "./xyflow/SelectEdgesOnNodeFocus.js";
-import { XYFlow } from "./xyflow/XYFlow.js";
-import { XYFlowInner } from "./xyflow/XYFlowInner.js";
+import { DiagramActor } from "./likec4diagram/DiagramActor.js";
+import { DiagramUI } from "./likec4diagram/DiagramUI.js";
+import { useViewToNodesEdges } from "./likec4diagram/useViewToNodesEdges.js";
+import { LikeC4DiagramXYFlow } from "./likec4diagram/XYFlow.js";
 import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
-import { Overlays } from "./overlays/Overlays.js";
+import { EnsureMantine } from "./context/EnsureMantine.js";
+import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
+import { IconRendererProvider } from "./context/IconRenderer.js";
+import { DiagramFeatures } from "./context/DiagramFeatures.js";
+import { DiagramEventHandlers } from "./context/DiagramEventHandlers.js";
+import { RootContainer } from "./context/RootContainer.js";
 function LikeC4Diagram({
   view,
   className,
@@ -27,21 +22,20 @@ function LikeC4Diagram({
   readonly = true,
   pannable = true,
   zoomable = true,
-  nodesSelectable = !readonly,
-  nodesDraggable = !readonly,
   background = "dots",
-  controls = !readonly,
-  showDiagramTitle = true,
-  showNotations = true,
-  enableDynamicViewWalkthrough = false,
   enableFocusMode = false,
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,
   enableRelationshipBrowser = enableRelationshipDetails,
+  nodesSelectable = !readonly || enableFocusMode,
+  nodesDraggable = !readonly,
+  controls = !readonly,
+  showDiagramTitle = true,
+  showNotations = true,
+  enableDynamicViewWalkthrough = false,
   enableSearch = true,
   initialWidth,
   initialHeight,
-  keepAspectRatio = false,
   experimentalEdgeEditing = false,
   onCanvasClick,
   onCanvasContextMenu,
@@ -59,136 +53,97 @@ function LikeC4Diagram({
   showNavigationButtons = !!onNavigateTo
 }) {
   const hasLikec4model = !!useLikeC4Model();
-  const initialRef = useRef({
-    defaultNodes: [],
-    defaultEdges: [],
-    initialWidth: initialWidth ?? view.bounds.width,
-    initialHeight: initialHeight ?? view.bounds.height
-  });
-  useEffect(() => {
-    if (readonly !== true && where != null) {
-      console.warn("Ignore filter, supported in readonly mode only\n", { where });
-    }
-    if (hasLikec4model) {
-      return;
-    }
-    if (enableRelationshipDetails) {
-      console.warn("Invalid showRelationshipDetails=true, requires LikeC4ModelProvider");
-    }
-    if (enableElementDetails) {
-      console.warn("Invalid enableElementDetails=true, requires LikeC4ModelProvider");
-    }
-    if (enableRelationshipBrowser) {
-      console.warn("Invalid enableRelationshipBrowser=true, requires LikeC4ModelProvider");
-    }
+  const initialRef = useRef(null);
+  const xyNodesEdges = useViewToNodesEdges({
+    view,
+    where,
+    nodesDraggable,
+    nodesSelectable
   });
-  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsxs(
-    ReactFlowProvider,
+  const isDynamicView = view.__ === "dynamic";
+  if (initialRef.current == null) {
+    initialRef.current = {
+      defaultEdges: [],
+      defaultNodes: [],
+      initialWidth: initialWidth ?? view.bounds.width,
+      initialHeight: initialHeight ?? view.bounds.height
+    };
+  }
+  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsx(IconRendererProvider, { value: renderIcon ?? null, children: /* @__PURE__ */ jsx(
+    DiagramFeatures,
     {
-      fitView,
-      ...initialRef.current,
-      children: [
-        !isEmpty(view.customColorDefinitions) && /* @__PURE__ */ jsx(LikeC4CustomColors, { customColors: view.customColorDefinitions }),
-        /* @__PURE__ */ jsx(
-          DiagramContextProvider,
-          {
-            view,
-            keepAspectRatio,
-            className: clsx(rootClassName, className),
-            readonly,
-            experimentalEdgeEditing: !readonly && experimentalEdgeEditing,
-            pannable,
-            zoomable,
-            nodesDraggable,
-            nodesSelectable: nodesSelectable || enableFocusMode,
-            hasLikeC4Model: hasLikec4model,
-            fitViewEnabled: fitView,
-            fitViewPadding,
-            controls,
-            showNavigationButtons: showNavigationButtons && !!onNavigateTo,
-            showNotations,
-            enableFocusMode,
-            enableSearch: hasLikec4model && enableSearch,
-            enableElementDetails: enableElementDetails && hasLikec4model,
-            enableDynamicViewWalkthrough,
-            enableRelationshipBrowser: enableRelationshipBrowser && hasLikec4model,
-            enableRelationshipDetails: enableRelationshipDetails && hasLikec4model && !isDeploymentView(view),
-            whereFilter: readonly ? where ?? null : null,
-            renderIcon: renderIcon ?? null,
-            onCanvasClick: onCanvasClick ?? null,
-            onCanvasContextMenu: onCanvasContextMenu ?? null,
-            onEdgeClick: onEdgeClick ?? null,
-            onEdgeContextMenu: onEdgeContextMenu ?? null,
-            onNodeClick: onNodeClick ?? null,
-            onNodeContextMenu: onNodeContextMenu ?? null,
-            onChange: onChange ?? null,
-            onNavigateTo: onNavigateTo ?? null,
-            onCanvasDblClick: onCanvasDblClick ?? null,
-            onOpenSource: onOpenSource ?? null,
-            onBurgerMenuClick: onBurgerMenuClick ?? null,
-            children: /* @__PURE__ */ jsx(
-              LikeC4DiagramInnerMemo,
+      features: {
+        enableFitView: fitView,
+        enableReadOnly: readonly,
+        enableFocusMode,
+        enableNavigateTo: !!onNavigateTo,
+        enableElementDetails,
+        enableRelationshipDetails,
+        enableRelationshipBrowser,
+        enableSearch,
+        enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
+        enableDynamicViewWalkthrough: isDynamicView && enableDynamicViewWalkthrough,
+        enableEdgeEditing: experimentalEdgeEditing,
+        enableNotations: showNotations,
+        enableVscode: !!onOpenSource,
+        enableControls: controls,
+        enableViewTitle: showDiagramTitle,
+        enableLikeC4Model: hasLikec4model
+      },
+      children: /* @__PURE__ */ jsx(
+        DiagramEventHandlers,
+        {
+          handlers: {
+            onCanvasClick,
+            onCanvasContextMenu,
+            onCanvasDblClick,
+            onEdgeClick,
+            onChange,
+            onEdgeContextMenu,
+            onNavigateTo,
+            onNodeClick,
+            onNodeContextMenu,
+            onOpenSource,
+            onBurgerMenuClick
+          },
+          children: /* @__PURE__ */ jsxs(RootContainer, { className, children: [
+            !isEmpty(view.customColorDefinitions) && /* @__PURE__ */ jsx(LikeC4CustomColors, { customColors: view.customColorDefinitions }),
+            /* @__PURE__ */ jsx(
+              ReactFlowProvider,
               {
-                background,
-                showDiagramTitle,
-                enableSearch: hasLikec4model && enableSearch
+                fitView,
+                ...initialRef.current,
+                children: /* @__PURE__ */ jsxs(
+                  DiagramActor,
+                  {
+                    input: {
+                      view,
+                      pannable,
+                      zoomable,
+                      fitViewPadding,
+                      ...xyNodesEdges
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        LikeC4DiagramXYFlow,
+                        {
+                          nodesDraggable,
+                          nodesSelectable,
+                          background
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(DiagramUI, {})
+                    ]
+                  }
+                )
               }
             )
-          }
-        )
-      ]
+          ] })
+        }
+      )
     }
-  ) }) });
+  ) }) }) });
 }
-LikeC4Diagram.displayName = "LikeC4Diagram";
-const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo(function LikeC4DiagramInner({
-  background,
-  showDiagramTitle,
-  enableSearch
-}) {
-  const {
-    isInitialized,
-    pannable,
-    fitView,
-    enableFocusMode,
-    enableOverlays
-  } = useDiagramState((s) => ({
-    isInitialized: s.initialized,
-    pannable: s.pannable,
-    fitView: s.fitViewEnabled,
-    enableFocusMode: s.enableFocusMode,
-    enableOverlays: s.hasLikeC4Model && (s.enableRelationshipBrowser || s.enableElementDetails)
-  }));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      XYFlow,
-      {
-        className: clsx(
-          "likec4-diagram",
-          cssReactFlow,
-          cssNoControls,
-          pannable !== true && cssDisablePan,
-          background === "transparent" && cssTransparentBg,
-          isInitialized ? "initialized" : notInitialized
-        ),
-        children: /* @__PURE__ */ jsx(
-          XYFlowInner,
-          {
-            showDiagramTitle,
-            background
-          }
-        )
-      }
-    ),
-    enableOverlays && /* @__PURE__ */ jsx(Overlays, {}),
-    enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}),
-    isInitialized && /* @__PURE__ */ jsxs(Fragment, { children: [
-      fitView && /* @__PURE__ */ jsx(FitViewOnDiagramChange, {}),
-      enableFocusMode && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {})
-    ] })
-  ] });
-}, deepEqual);
-LikeC4DiagramInnerMemo.displayName = "LikeC4DiagramInnerMemo";
 export {
   LikeC4Diagram
 };

package/dist/LikeC4Diagram.props.d.ts

@@ -1,19 +1,18 @@
 import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, ViewChange, ViewId, WhereOperator } from '@likec4/core';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import { XYBackground } from './xyflow/XYFlowBackground';
 export type { WhereOperator };
-export type DiagramNodeWithNavigate<ID extends string = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
+export type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
     navigateTo: ID;
 };
-type ElementIconNodeProps = {
-    id: string;
-    title: string;
-    icon?: string | undefined;
+type ElementIconRendererProps = {
+    node: {
+        id: string;
+        title: string;
+        icon?: string | null | undefined;
+    };
 };
-export type ElementIconRenderer = (props: {
-    node: ElementIconNodeProps;
-}) => ReactNode;
-export type OnNavigateTo<ID extends string = ViewId> = (to: ID, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<ID>) => void;
+export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
+export type OnNavigateTo<ID = ViewId> = (to: ID, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<ID>) => void;
 export type OnNodeClick = (node: DiagramNode, event: ReactMouseEvent) => void;
 export type OnEdgeClick = (edge: DiagramEdge, event: ReactMouseEvent) => void;
 /**
@@ -69,16 +68,11 @@ export interface LikeC4DiagramProperties {
     nodesDraggable?: boolean | undefined;
     initialWidth?: number | undefined;
     initialHeight?: number | undefined;
-    /**
-     * Keep aspect ratio of the diagram
-     * @default false
-     */
-    keepAspectRatio?: boolean | undefined;
     /**
      * Background pattern
      * @default 'dots'
      */
-    background?: 'transparent' | 'solid' | XYBackground | undefined;
+    background?: 'transparent' | 'solid' | 'dots' | 'lines' | 'cross' | undefined;
     /**
      * Display webview with diagram title / description
      * @default true

package/dist/LikeC4Search.js

@@ -4,16 +4,16 @@ import { Spotlight } from "@mantine/spotlight";
 import { IconSearch, IconRectangularPrism, IconStack2, IconSitemap } from "@tabler/icons-react";
 import { memo, useMemo } from "react";
 import { pipe, filter, map } from "remeda";
+import { useDiagram } from "./hooks/useDiagram.js";
+import { useDiagramContext } from "./hooks/useDiagramContext.js";
 import { actionSection } from "./LikeC4Search.css.js";
-import { useDiagramState, useDiagramStoreApi } from "./hooks/useDiagramState.js";
 import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
 import { useMantinePortalProps } from "./hooks/useMantinePortalProps.js";
 const LikeC4Search = memo(() => {
-  const view = useDiagramState((s) => s.view);
+  const view = useDiagramContext((s) => s.view);
   const model = useLikeC4Model(true);
-  const store = useDiagramStoreApi();
+  const diagram = useDiagram();
   const getNodeActionsData = () => {
-    const { focusOnNode } = store.getState();
     return pipe(
       view.nodes,
       filter((n) => !!n.title),
@@ -28,7 +28,7 @@ const LikeC4Search = memo(() => {
           ...(n.tags ?? []).map((t) => `#${t}`),
           ...n.description ? [n.description] : []
         ].filter((k) => k.toLowerCase()),
-        onClick: () => focusOnNode(n.id),
+        onClick: () => diagram.focusNode(n.id),
         leftSection: /* @__PURE__ */ jsx(IconRectangularPrism, {})
       }))
     );
@@ -47,15 +47,7 @@ const LikeC4Search = memo(() => {
         ...v.$view.description ? [v.$view.description] : []
       ],
       onClick: () => {
-        var _a, _b;
-        store.setState({
-          lastOnNavigate: {
-            fromView: view.id,
-            toView: v.id,
-            fromNode: null
-          }
-        });
-        (_b = (_a = store.getState()).onNavigateTo) == null ? void 0 : _b.call(_a, v.id);
+        diagram.navigateTo(v.id);
       },
       leftSection: v.isDeploymentView() ? /* @__PURE__ */ jsx(IconStack2, {}) : /* @__PURE__ */ jsx(IconSitemap, {})
     }));
@@ -69,7 +61,7 @@ const LikeC4Search = memo(() => {
       group: "Views",
       actions: getViewActionsData()
     }
-  ], [model, store, view]);
+  ], [model, diagram, view]);
   const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsx(
     Spotlight,

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,3 +1,3 @@
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
-export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'keepAspectRatio' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'where'>;
+export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'where'>;
 export declare function StaticLikeC4Diagram({ view, fitView, fitViewPadding, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, background, ...rest }: StaticLikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/base/Background.d.ts

@@ -0,0 +1,7 @@
+import { BackgroundProps } from '@xyflow/react';
+export type XYBackgroundVariant = 'dots' | 'lines' | 'cross';
+export type XYBackground = XYBackgroundVariant | BackgroundProps;
+export type XYBackgroundProps = {
+    background: XYBackground;
+};
+export declare function Background({ background }: XYBackgroundProps): import("react/jsx-runtime").JSX.Element;

package/dist/{xyflow/XYFlowBackground.js → base/Background.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
-import { Background, BackgroundVariant } from "@xyflow/react";
+import { Background as Background$1, BackgroundVariant } from "@xyflow/react";
 function literalToEnum(value) {
   switch (value) {
     case "dots":
@@ -13,13 +13,12 @@ function literalToEnum(value) {
       nonexhaustive(value);
   }
 }
-function XYFlowBackground({ background }) {
+function Background({ background }) {
   if (typeof background === "string") {
-    return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(background), size: 2, gap: 20 });
+    return /* @__PURE__ */ jsx(Background$1, { variant: literalToEnum(background), size: 2, gap: 20 });
   }
-  const { variant, ...rest } = background;
-  return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(variant), ...rest });
+  return /* @__PURE__ */ jsx(Background$1, { ...background });
 }
 export {
-  XYFlowBackground
+  Background
 };

package/dist/base/BaseXYFlow.d.ts

@@ -0,0 +1,14 @@
+import { ReactFlowProps } from '@xyflow/react';
+import { SetRequired, Simplify } from 'type-fest';
+import { XYBackground } from './Background';
+import { Base } from './types';
+export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Edge> = Simplify<{
+    pannable?: boolean;
+    zoomable?: boolean;
+    nodesSelectable?: boolean;
+    nodesDraggable?: boolean;
+    background?: 'transparent' | 'solid' | XYBackground;
+    fitViewPadding?: number;
+    onViewportResize?: undefined | (() => void);
+} & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'panOnScroll' | 'panOnDrag' | 'preventScrolling' | 'zoomOnPinch' | 'zoomActivationKeyCode' | 'zoomOnScroll' | 'elementsSelectable' | 'onNodeMouseEnter' | 'onNodeMouseLeave' | 'onEdgeMouseEnter' | 'onEdgeMouseLeave' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
+export declare const BaseXYFlow: <NodeType extends Base.Node, EdgeType extends Base.Edge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -0,0 +1,146 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useCallbackRef } from "@mantine/hooks";
+import { ReactFlow, useStoreApi, useOnViewportChange } from "@xyflow/react";
+import clsx from "clsx";
+import { useMemo, useEffect } from "react";
+import { cssReactFlow, cssDisablePan, cssTransparentBg } from "../LikeC4Diagram.css.js";
+import { stopPropagation } from "../utils/xyflow.js";
+import { Background } from "./Background.js";
+import { MaxZoom, MinZoom } from "./const.js";
+import { Base } from "./types.js";
+const BaseXYFlow = ({
+  nodes,
+  edges,
+  onEdgesChange,
+  onNodesChange,
+  className,
+  pannable = true,
+  zoomable = true,
+  nodesSelectable = true,
+  nodesDraggable = false,
+  background = "dots",
+  children,
+  colorMode = "system",
+  fitViewPadding = 0,
+  fitView = true,
+  zoomOnDoubleClick = false,
+  onViewportResize,
+  ...props
+}) => {
+  const isBgWithPattern = background !== "transparent" && background !== "solid";
+  return /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      colorMode,
+      nodes,
+      edges,
+      className: clsx(
+        "likec4-diagram",
+        cssReactFlow,
+        pannable !== true && cssDisablePan,
+        background === "transparent" && cssTransparentBg,
+        className
+      ),
+      zoomOnPinch: zoomable,
+      zoomOnScroll: !pannable && zoomable,
+      ...!zoomable && {
+        zoomActivationKeyCode: null
+      },
+      zoomOnDoubleClick,
+      maxZoom: zoomable ? MaxZoom : 1,
+      minZoom: zoomable ? MinZoom : 1,
+      fitView,
+      fitViewOptions: useMemo(() => ({
+        minZoom: MinZoom,
+        maxZoom: 1,
+        padding: fitViewPadding,
+        includeHiddenNodes: false
+      }), [fitViewPadding]),
+      preventScrolling: zoomable || pannable,
+      defaultMarkerColor: "var(--xy-edge-stroke)",
+      noDragClassName: "nodrag",
+      noPanClassName: "nopan",
+      panOnScroll: pannable,
+      panOnDrag: pannable,
+      ...!pannable && {
+        selectionKeyCode: null
+      },
+      elementsSelectable: nodesSelectable,
+      nodesFocusable: nodesDraggable || nodesSelectable,
+      edgesFocusable: false,
+      nodesDraggable,
+      nodeDragThreshold: 4,
+      nodeClickDistance: 1.9,
+      paneClickDistance: 1.9,
+      elevateNodesOnSelect: false,
+      selectNodesOnDrag: false,
+      onNodesChange,
+      onEdgesChange,
+      onNodeMouseEnter: useCallbackRef((_event, node) => {
+        onNodesChange([{
+          id: node.id,
+          type: "replace",
+          item: Base.setHovered(node, true)
+        }]);
+      }),
+      onNodeMouseLeave: useCallbackRef((_event, node) => {
+        onNodesChange([{
+          id: node.id,
+          type: "replace",
+          item: Base.setHovered(node, false)
+        }]);
+      }),
+      onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+        onEdgesChange([{
+          id: edge.id,
+          type: "replace",
+          item: Base.setHovered(edge, true)
+        }]);
+      }),
+      onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+        onEdgesChange([{
+          id: edge.id,
+          type: "replace",
+          item: Base.setHovered(edge, false)
+        }]);
+      }),
+      onNodeDoubleClick: stopPropagation,
+      onEdgeDoubleClick: stopPropagation,
+      ...props,
+      children: [
+        isBgWithPattern && /* @__PURE__ */ jsx(Background, { background }),
+        /* @__PURE__ */ jsx(BaseXYFlowInner, { onViewportResize }),
+        children
+      ]
+    }
+  );
+};
+const BaseXYFlowInner = ({
+  onViewportResize
+}) => {
+  const xyflowApi = useStoreApi();
+  useOnViewportChange({
+    onEnd: ({ x, y, zoom }) => {
+      const roundedX = Math.round(x), roundedY = Math.round(y);
+      if (x !== roundedX || y !== roundedY) {
+        xyflowApi.setState({ transform: [roundedX, roundedY, zoom] });
+      }
+    }
+  });
+  const listenToViewportResize = !!onViewportResize;
+  const onViewportResizeCb = useCallbackRef(onViewportResize);
+  useEffect(() => {
+    if (!listenToViewportResize) {
+      return;
+    }
+    return xyflowApi.subscribe((state, prevState) => {
+      if (state.width !== prevState.width || state.height !== prevState.height) {
+        onViewportResizeCb();
+      }
+    });
+  }, [listenToViewportResize]);
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
+export {
+  BaseXYFlow
+};

package/dist/base/example/RelationshipsBrowser.d.ts

@@ -0,0 +1,6 @@
+import { DiagramView } from '@likec4/core';
+type ExampleProps = {
+    view: DiagramView;
+};
+export declare function Example({ view }: ExampleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/base/example/_types.d.ts

@@ -0,0 +1,20 @@
+import { Color, DiagramNode, Fqn } from '@likec4/core';
+import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../types';
+export declare namespace ExampleTypes {
+    type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo'>> & {
+        fqn: Fqn;
+        icon: string | null;
+    }>;
+    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
+        fqn: Fqn;
+        depth: number;
+        icon: string | null;
+    }>;
+    type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
+    type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>;
+    type Node = ElementNode | CompoundNode;
+    type EdgeData = Base.EdgeData<{
+        color: Color | undefined;
+    }>;
+    type Edge = ReactFlowEdge<EdgeData, 'relationships'>;
+}