@likec4/diagram 1.46.4 → 1.47.0

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js

@@ -3,7 +3,7 @@ import { ElementShapes } from '@likec4/core/styles';
 import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
 import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
 import { stopPropagation } from '../../../../utils/xyflow.js';
-import { GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
+import { BorderStyleOption, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
 import { useHandlers } from './useHandlers.js';
@@ -15,7 +15,8 @@ function ElementToolbar(props) {
   const {
     data: {
       shape,
-      modelFqn
+      modelFqn,
+      style
     }
   } = props;
   const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props);
@@ -26,6 +27,14 @@ function ElementToolbar(props) {
       title: modelFqn,
       align: "start",
       children: [
+        /* @__PURE__ */ jsx(
+          ColorButton,
+          {
+            elementColor,
+            onColorPreview,
+            onChange
+          }
+        ),
         /* @__PURE__ */ jsx(
           ElementShapeButton,
           {
@@ -34,12 +43,10 @@ function ElementToolbar(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          ColorButton,
+          BorderStyleOption,
           {
-            elementColor,
-            onColorPreview,
-            onChange,
-            position: "right-end"
+            elementBorderStyle: style?.border ?? "none",
+            onChange
           }
         ),
         enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelFqn }),
@@ -54,7 +61,8 @@ function DeploymentElementToolbar(props) {
     data: {
       shape,
       deploymentFqn,
-      modelFqn
+      modelFqn,
+      style
     }
   } = props;
   const { elementColor, onColorPreview, onChange } = useHandlers(deploymentFqn, props);
@@ -65,6 +73,14 @@ function DeploymentElementToolbar(props) {
       title: deploymentFqn,
       align: "start",
       children: [
+        /* @__PURE__ */ jsx(
+          ColorButton,
+          {
+            elementColor,
+            onColorPreview,
+            onChange
+          }
+        ),
         /* @__PURE__ */ jsx(
           ElementShapeButton,
           {
@@ -73,12 +89,10 @@ function DeploymentElementToolbar(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          ColorButton,
+          BorderStyleOption,
           {
-            elementColor,
-            onColorPreview,
-            onChange,
-            position: "right-end"
+            elementBorderStyle: style?.border ?? "none",
+            onChange
           }
         ),
         enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentFqn }),
@@ -115,7 +129,8 @@ function ElementShapeButton({
           {
             variant: "light",
             color: "gray",
-            size: "compact-xs",
+            size: "xs",
+            px: 8,
             rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 12 }),
             children: elementShape
           }

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js

@@ -1,14 +1,18 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { Paper, Stack, Box, Text, Group } from '@mantine/core';
+import { VStack, Box, HStack } from '@likec4/styles/jsx';
+import { Paper, Text } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { NodeToolbar } from '@xyflow/react';
 import { useDiagramContext } from '../../../../hooks/useDiagram.js';
 import { stopPropagation } from '../../../../utils/xyflow.js';
 import { toolbarTitle } from './styles.css.js';
 
+const selectSelectedNodesCount = (context) => {
+  return context.xynodes.filter((x) => x.selected).length;
+};
 const useSelectedNodesCount = () => {
-  return useDiagramContext((s) => s.xynodes.filter((x) => x.selected).length);
+  return useDiagramContext(selectSelectedNodesCount);
 };
 function Toolbar({ title, children, nodeProps, ...props }) {
   const selectedNodesCount = useSelectedNodesCount();
@@ -56,9 +60,9 @@ function Toolbar({ title, children, nodeProps, ...props }) {
           onClick: stopPropagation,
           onDoubleClick: stopPropagation,
           withBorder: true,
-          children: /* @__PURE__ */ jsxs(Stack, { gap: "6px", children: [
-            /* @__PURE__ */ jsx(Box, { px: "4px", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title }) }),
-            /* @__PURE__ */ jsx(Group, { gap: 4, children })
+          children: /* @__PURE__ */ jsxs(VStack, { gap: "2", children: [
+            /* @__PURE__ */ jsx(Box, { px: "1", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title }) }),
+            /* @__PURE__ */ jsx(HStack, { gap: "1", children })
           ] })
         }
       )

package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts

@@ -1,5 +1,6 @@
-import { DeploymentFqn, Fqn } from '@likec4/core/types';
+import { BorderStyle, DeploymentFqn, Fqn } from '@likec4/core/types';
 import { MergeExclusive } from 'type-fest';
+import { OnStyleChange } from './types';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { TooltipProps } from '@mantine/core';
 export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
@@ -14,3 +15,7 @@ export declare function GoToSourceButton(props: MergeExclusive<{
 }, {
     deploymentId: DeploymentFqn;
 }>): import("react/jsx-runtime").JSX.Element | null;
+export declare function BorderStyleOption({ elementBorderStyle, onChange, }: {
+    elementBorderStyle: BorderStyle | undefined;
+    onChange: OnStyleChange;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/_shared.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
+import { SegmentedControl, Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
+import { useState, useEffect } from 'react';
 import '@xstate/react';
 import 'fast-equals';
-import 'react';
 import { useDiagram } from '../../../../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
 import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
@@ -23,7 +23,7 @@ function BrowseRelationshipsButton({ fqn }) {
   return /* @__PURE__ */ jsx(Tooltip, { label: "Browse relationships", children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      size: "sm",
+      size: "md",
       variant: "subtle",
       color: "gray",
       onClick: (e) => {
@@ -35,8 +35,8 @@ function BrowseRelationshipsButton({ fqn }) {
         {
           stroke: 2,
           style: {
-            width: "72%",
-            height: "72%"
+            width: "65%",
+            height: "65%"
           }
         }
       )
@@ -49,7 +49,7 @@ function GoToSourceButton(props) {
   return /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      size: "sm",
+      size: "md",
       variant: "subtle",
       color: "gray",
       onClick: (e) => {
@@ -64,9 +64,45 @@ function GoToSourceButton(props) {
           });
         }
       },
-      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "70%" } })
+      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "65%" } })
     }
   ) });
 }
+function BorderStyleOption({
+  elementBorderStyle = "none",
+  onChange
+}) {
+  const [value, setValue] = useState(elementBorderStyle);
+  useEffect(() => {
+    setValue(elementBorderStyle);
+  }, [elementBorderStyle]);
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "xs",
+      fz: 9,
+      fullWidth: true,
+      withItemsBorders: false,
+      value,
+      onChange: (v) => {
+        const border = v;
+        setValue(border);
+        onChange({ border });
+      },
+      styles: {
+        label: {
+          paddingTop: 2,
+          paddingBottom: 2
+        }
+      },
+      data: [
+        { label: "Solid", value: "solid" },
+        { label: "Dashed", value: "dashed" },
+        { label: "Dotted", value: "dotted" },
+        { label: "None", value: "none" }
+      ]
+    }
+  );
+}
 
-export { BrowseRelationshipsButton, GoToSourceButton, Tooltip };
+export { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton, Tooltip };

package/dist/likec4diagram/xyflow-sequence/utils.d.ts

@@ -11,4 +11,4 @@ export declare function findParallelRects(steps: Array<Step>): Array<ParallelRec
  * @returns an array of compounds where each compound is a node in the sequence view
  * that is an ancestor of one of the actors
  */
-export declare function buildCompounds(actors: Array<DiagramNode>, nodes: Array<DiagramNode>): Array<Compound>;
+export declare function buildCompounds(actors: ReadonlyArray<DiagramNode>, nodes: ReadonlyArray<DiagramNode>): Array<Compound>;

package/dist/navigationpanel/NavigationPanelControls.js

@@ -12,7 +12,7 @@ import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { BreadcrumbsSeparator } from './_common.js';
 import { useNavigationActor } from './hooks.js';
 import { breadcrumbTitle } from './styles.css.js';
-import { BurgerButton } from './controls/BurgerButton.js';
+import { LogoButton } from './controls/LogoButton.js';
 import { NavigationButtons } from './controls/NavigationButtons.js';
 import { DetailsControls } from './controls/DetailsControls.js';
 import { OpenSource } from './controls/OpenSource.js';
@@ -104,7 +104,7 @@ const NavigationPanelControls = memo(() => {
     "view-title"
   );
   return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, mode: "popLayout", children: [
-    /* @__PURE__ */ jsx(BurgerButton, {}, "burger-button"),
+    /* @__PURE__ */ jsx(LogoButton, {}, "logo-button"),
     enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}, "nav-buttons"),
     /* @__PURE__ */ jsxs(
       m.div,

package/dist/navigationpanel/_common.d.ts

@@ -1,4 +1,4 @@
-import { NavigationPanelActionIconVariant } from '@likec4/styles/recipes';
+import { NavigationPanelActionIconVariant } from '../../styled-system/recipes';
 import { ActionIconProps, TooltipProps, BreadcrumbsProps } from '@mantine/core';
 import { HTMLMotionProps } from 'motion/react';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';

package/dist/navigationpanel/controls/LogoButton.d.ts

@@ -0,0 +1 @@
+export declare const LogoButton: () => import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/controls/{BurgerButton.js → LogoButton.js}

@@ -7,9 +7,9 @@ import { Logo, LogoIcon } from '../../components/Logo.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useNavigationActor } from '../hooks.js';
 
-const BurgerButton = () => {
+const LogoButton = () => {
   const actor = useNavigationActor();
-  const { onBurgerMenuClick } = useDiagramEventHandlers();
+  const { onLogoClick } = useDiagramEventHandlers();
   return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsxs(
     UnstyledButton,
     {
@@ -21,9 +21,9 @@ const BurgerButton = () => {
       },
       onClick: (e) => {
         e.stopPropagation();
-        if (onBurgerMenuClick && actor.isOpened()) {
+        if (onLogoClick && actor.isOpened()) {
           setTimeout(() => {
-            onBurgerMenuClick();
+            onLogoClick();
           }, 100);
         }
         actor.send({ type: "breadcrumbs.click.root" });
@@ -69,4 +69,4 @@ const BurgerButton = () => {
   ) });
 };
 
-export { BurgerButton };
+export { LogoButton };

package/dist/navigationpanel/controls/index.d.ts

@@ -1,6 +1,6 @@
-export { BurgerButton } from './BurgerButton';
 export { DetailsControls } from './DetailsControls';
 export { LayoutWarning } from './LayoutWarning';
+export { LogoButton } from './LogoButton';
 export { NavigationButtons } from './NavigationButtons';
 export { OpenSource } from './OpenSource';
 export { SearchControl } from './SearchControl';

package/dist/navigationpanel/styles.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeRuntimeFn } from '@likec4/styles';
+import { RecipeRuntimeFn } from '../../styled-system';
 export declare const breadcrumbTitle: RecipeRuntimeFn<{
     truncate: {
         true: {

package/dist/node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.js

@@ -0,0 +1,14 @@
+import createReactComponent from '../createReactComponent.js';
+
+/**
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { "d": "M14 3v4a1 1 0 0 0 1 1h4", "key": "svg-0" }], ["path", { "d": "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", "key": "svg-1" }], ["path", { "d": "M9 9l1 0", "key": "svg-2" }], ["path", { "d": "M9 13l6 0", "key": "svg-3" }], ["path", { "d": "M9 17l6 0", "key": "svg-4" }]];
+const IconFileText = createReactComponent("outline", "file-text", "FileText", __iconNode);
+
+export { __iconNode, IconFileText as default };

package/dist/overlays/relationships-browser/custom/edgeTypes.js

@@ -32,7 +32,6 @@ const RelationshipEdge = memoEdge((props) => {
     ...props,
     data: {
       ...props.data,
-      line: "solid",
       color: "amber"
     }
   } : props;

package/dist/projects-overview/ProjectsOverview.d.ts

@@ -0,0 +1,13 @@
+import { ProjectId } from '@likec4/core';
+import { LayoutedProjectsView } from '@likec4/core/compute-view';
+import { ViewPadding } from '../LikeC4Diagram.props';
+import { ProjectsOverviewXYProps } from './ProjectsOverviewXY';
+export type ProjectsOverviewProps = {
+    view: LayoutedProjectsView;
+    /**
+     * Callback when project is selected (e.g. clicked)
+     */
+    onNavigateToProject?: undefined | ((projectId: ProjectId) => void);
+    fitViewPadding?: ViewPadding | undefined;
+} & ProjectsOverviewXYProps;
+export declare function ProjectsOverview({ view, onNavigateToProject, fitViewPadding, ...props }: ProjectsOverviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/projects-overview/ProjectsOverview.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useSyncedRef } from '@react-hookz/web';
+import { useActorRef } from '@xstate/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { LayoutGroup } from 'motion/react';
+import { useEffect, useRef } from 'react';
+import { projectOverviewLogic } from './actor.js';
+import { ProjectsOverviewActorContext } from './context.js';
+import { ProjectsOverviewPanel } from './panel/ProjectsOverviewPanel.js';
+import { ProjectsOverviewXY } from './ProjectsOverviewXY.js';
+
+function ProjectsOverview({
+  view,
+  onNavigateToProject,
+  fitViewPadding = {
+    top: "50px",
+    bottom: "32px",
+    left: "32px",
+    right: "32px"
+  },
+  ...props
+}) {
+  const actorRef = useActorRef(
+    projectOverviewLogic,
+    {
+      input: { view, fitViewPadding }
+    }
+  );
+  useEffect(() => {
+    actorRef.send({ type: "update.view", view });
+  }, [actorRef, view]);
+  const onNavigateToProjectRef = useSyncedRef(onNavigateToProject);
+  useEffect(() => {
+    const subs = [
+      actorRef.on("navigate.to", ({ projectId }) => {
+        onNavigateToProjectRef.current?.(projectId);
+      })
+    ];
+    return () => {
+      subs.forEach((sub) => sub.unsubscribe());
+    };
+  }, [actorRef]);
+  const bounds = view.bounds;
+  const initialRef = useRef({
+    initialNodes: [],
+    initialEdges: [],
+    initialWidth: bounds.width,
+    initialHeight: bounds.height,
+    fitView: false
+  });
+  return /* @__PURE__ */ jsx(ProjectsOverviewActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsxs(ReactFlowProvider, { ...initialRef.current, children: [
+    /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsx(ProjectsOverviewXY, { ...props }) }),
+    /* @__PURE__ */ jsx(ProjectsOverviewPanel, {})
+  ] }) });
+}
+
+export { ProjectsOverview };

package/dist/projects-overview/ProjectsOverviewXY.d.ts

@@ -0,0 +1,17 @@
+import { ProjectsOverviewTypes } from './_types';
+import { FunctionComponent, NamedExoticComponent } from 'react';
+export declare const edgeTypes: {
+    relationship: FunctionComponent<ProjectsOverviewTypes.EdgeProps>;
+};
+export type ProjectsOverviewXYProps = {
+    /**
+     * Background pattern
+     * @default 'dots'
+     */
+    background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined;
+    /**
+     * @default - determined by the user's system preferences.
+     */
+    colorScheme?: 'light' | 'dark' | undefined;
+};
+export declare const ProjectsOverviewXY: NamedExoticComponent<ProjectsOverviewXYProps>;

package/dist/projects-overview/ProjectsOverviewXY.js

@@ -0,0 +1,98 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { shallowEqual } from 'fast-equals';
+import { memo } from 'react';
+import { BaseXYFlow } from '../base/BaseXYFlow.js';
+import { useCallbackRef } from '../hooks/useCallbackRef.js';
+import { useProjectsOverviewActor } from './context.js';
+import { useProjectsOverviewState, useProjectsOverviewXYStoreApi } from './hooks.js';
+import { RelationshipEdge } from './custom/edgeTypes.js';
+import { ProjectNode } from './custom/nodeTypes.js';
+
+const nodeTypes = {
+  project: ProjectNode
+};
+const edgeTypes = {
+  relationship: RelationshipEdge
+};
+const selector = (state) => ({
+  isActive: state.hasTag("active"),
+  nodes: state.context.xynodes,
+  edges: state.context.xyedges
+});
+const selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
+const ProjectsOverviewXY = memo(({
+  background = "dots",
+  ...props
+}) => {
+  const actorRef = useProjectsOverviewActor();
+  const {
+    isActive,
+    nodes,
+    edges
+  } = useProjectsOverviewState(
+    selector,
+    selectorEq
+  );
+  const xystore = useProjectsOverviewXYStoreApi();
+  return /* @__PURE__ */ jsx(
+    BaseXYFlow,
+    {
+      nodes,
+      edges,
+      className: cx(
+        isActive ? "initialized" : "not-initialized",
+        "projects-overview"
+      ),
+      nodeTypes,
+      edgeTypes,
+      fitView: false,
+      onNodeClick: useCallbackRef((_e, node) => {
+        _e.stopPropagation();
+        actorRef.send({ type: "xyflow.click.node", node });
+      }),
+      onEdgeClick: useCallbackRef((_e, edge) => {
+        _e.stopPropagation();
+        actorRef.send({ type: "xyflow.click.edge", edge });
+      }),
+      onPaneClick: useCallbackRef((_e) => {
+        _e.stopPropagation();
+        actorRef.send({ type: "xyflow.click.pane" });
+      }),
+      onDoubleClick: useCallbackRef((_e) => {
+        _e.stopPropagation();
+        actorRef.send({ type: "xyflow.click.double" });
+      }),
+      onNodesChange: useCallbackRef((changes) => {
+        actorRef.send({ type: "xyflow.applyNodeChanges", changes });
+      }),
+      onEdgesChange: useCallbackRef((changes) => {
+        actorRef.send({ type: "xyflow.applyEdgeChanges", changes });
+      }),
+      onEdgeMouseEnter: useCallbackRef((event, edge) => {
+        actorRef.send({ type: "xyflow.mouse.enter.edge", edge, event });
+      }),
+      onEdgeMouseLeave: useCallbackRef((event, edge) => {
+        actorRef.send({ type: "xyflow.mouse.leave.edge", edge, event });
+      }),
+      onNodeMouseEnter: useCallbackRef((event, node) => {
+        actorRef.send({ type: "xyflow.mouse.enter.node", node });
+      }),
+      onNodeMouseLeave: useCallbackRef((event, node) => {
+        actorRef.send({ type: "xyflow.mouse.leave.node", node });
+      }),
+      onInit: useCallbackRef((xyflow) => {
+        actorRef.send({ type: "xyflow.init", xyflow, xystore });
+      }),
+      nodesDraggable: false,
+      nodesSelectable: true,
+      pannable: true,
+      zoomable: true,
+      background,
+      ...props
+    }
+  );
+});
+ProjectsOverviewXY.displayName = "ProjectsOverviewXY";
+
+export { ProjectsOverviewXY, edgeTypes };

package/dist/projects-overview/_types.d.ts

@@ -0,0 +1,34 @@
+import { LayoutedProjectEdge } from '@likec4/core/compute-view';
+import { DiagramNode, ExclusiveUnion, ProjectId } from '@likec4/core/types';
+import { ReactFlowInstance, ReactFlowState } from '@xyflow/react';
+import { FunctionComponent } from 'react';
+import { Simplify } from 'type-fest';
+import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from '../base/types';
+export declare namespace ProjectsOverviewTypes {
+    type ProjectNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'width' | 'height'>> & {
+        projectId: ProjectId;
+    }>;
+    type ProjectNode = BaseNode<ProjectNodeData, 'project'>;
+    type AnyNode = ProjectNode;
+    type NodeType = AnyNode['type'];
+    type Node<T extends NodeType = NodeType> = Extract<AnyNode, {
+        type: T;
+    }>;
+    type NodeProps<T extends NodeType = NodeType> = BaseNodeProps<Node<T>>;
+    type NodeData = ExclusiveUnion<{
+        ProjectNodeData: ProjectNodeData;
+    }>;
+    type NodeRenderer<T extends NodeType = NodeType> = FunctionComponent<NodeProps<T>>;
+    type NodeRenderers = {
+        [T in NodeType]: NodeRenderer<T>;
+    };
+    type EdgeData = Simplify<BaseEdgeData & NonOptional<Pick<LayoutedProjectEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'projectId' | 'points' | 'color' | 'line'>>>;
+    type Edge = BaseEdge<EdgeData, 'relationship'>;
+    type EdgeProps = BaseEdgeProps<Edge>;
+}
+export type ProjectsOverviewXYFLowInstance = ReactFlowInstance<ProjectsOverviewTypes.Node, ProjectsOverviewTypes.Edge>;
+export type ProjectsOverviewXYStoreState = ReactFlowState<ProjectsOverviewTypes.Node, ProjectsOverviewTypes.Edge>;
+export type ProjectsOverviewXYStoreApi = {
+    getState: () => ProjectsOverviewXYStoreState;
+    setState: (state: ProjectsOverviewXYStoreState) => void;
+};