@likec4/diagram 1.46.4 → 1.48.0

package/dist/overlays/relationship-details/SelectEdge.js

@@ -3,8 +3,8 @@ import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown,
 import { useRef } from 'react';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
 
 const SelectEdge = ({
   edge,

package/dist/overlays/relationship-details/compute.js

@@ -1,4 +1,4 @@
-import { treeFromElements } from '@likec4/core/compute-view/relationships';
+import { treeFromElements } from '@likec4/core/compute-view';
 import { modelConnection } from '@likec4/core/model';
 import { invariant, isAncestor, sortParentsFirst } from '@likec4/core/utils';
 import { hasAtLeast } from 'remeda';

package/dist/overlays/relationship-details/custom/ElementActions.js

@@ -6,9 +6,9 @@ import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.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';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();

package/dist/overlays/relationship-details/custom/nodeTypes.js

@@ -7,15 +7,28 @@ import '@xstate/react';
 import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
+import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { memoNode } from '../../../base-primitives/memoNode.js';
 import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
 import { CompoundTitle } from '../../../base-primitives/compound/CompoundTitle.js';
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../../base-primitives/element/ElementData.js';
-import { ElementTags } from '../../../base-primitives/element/ElementTags.js';
 import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
+import { ElementTags as ElementTags$1 } from '../../../base-primitives/element/ElementTags.js';
 
+function ElementTags(props) {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsx(
+    ElementTags$1,
+    {
+      onTagClick: useCallbackRef((tag) => {
+        diagram.openSearch(tag);
+      }),
+      ...props
+    }
+  );
+}
 const ElementDetailsButtonWithHandler = (props) => {
   const diagram = useDiagram();
   return /* @__PURE__ */ jsx(

package/dist/overlays/relationship-details/layout.js

@@ -1,4 +1,4 @@
-import { treeFromElements } from '@likec4/core/compute-view/relationships';
+import { treeFromElements } from '@likec4/core/compute-view';
 import { exact, preferSummary } from '@likec4/core/types';
 import dagre from '@dagrejs/dagre';
 import { ifind, DefaultMap, invariant } from '@likec4/core/utils';

package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts

@@ -1,9 +1,4 @@
-import { RelationshipsBrowserTypes } from './_types';
 import { RelationshipsBrowserActorRef } from './actor';
-import { FunctionComponent } from 'react';
-export declare const edgeTypes: {
-    relationship: FunctionComponent<RelationshipsBrowserTypes.EdgeProps>;
-};
 export type RelationshipsBrowserProps = {
     actorRef: RelationshipsBrowserActorRef;
 };

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -1,12 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { ActionIcon, Group } from '@mantine/core';
-import { useStateHistory } from '@mantine/hooks';
-import { useRafEffect } from '@react-hookz/web';
+import { Group, ActionIcon, Tooltip as Tooltip$1 } from '@mantine/core';
+import { useStateHistory, useClipboard } from '@mantine/hooks';
 import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'motion/react';
-import { useRef, memo, useEffect } from 'react';
+import { useRef, memo, useEffect, useState } from 'react';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
 import { useCallbackRef } from '../../hooks/useCallbackRef.js';
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
@@ -15,9 +14,12 @@ import { SelectElement } from './SelectElement.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { EmptyNode } from './custom/EmptyNode.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconCheck from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
 
 const nodeTypes = {
   element: ElementNode,
@@ -144,7 +146,7 @@ const RelationshipsBrowserInner = memo(() => {
       browser.navigateTo(historySubjectId);
     }
   }, [historySubjectId, browser]);
-  useRafEffect(() => {
+  useEffect(() => {
     browser.updateView(layouted);
   }, [layouted, browser]);
   const hasStepBack = current > 0;
@@ -159,18 +161,21 @@ const RelationshipsBrowserInner = memo(() => {
         onStepForward: () => historyOps.forward()
       }
     ),
-    closeable && /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsx(
-      ActionIcon,
-      {
-        variant: "default",
-        color: "gray",
-        onClick: (e) => {
-          e.stopPropagation();
-          browser.close();
-        },
-        children: /* @__PURE__ */ jsx(IconX, {})
-      }
-    ) })
+    closeable && /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(CopyLinkButton, { subjectId }),
+      /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          variant: "default",
+          color: "gray",
+          onClick: (e) => {
+            e.stopPropagation();
+            browser.close();
+          },
+          children: /* @__PURE__ */ jsx(IconX, {})
+        }
+      )
+    ] }) })
   ] });
 });
 const TopLeftPanel = ({
@@ -235,5 +240,95 @@ const TopLeftPanel = ({
     /* @__PURE__ */ jsx(SelectElement, {})
   ] }) });
 };
+const Tooltip = Tooltip$1.withProps({
+  color: "dark",
+  fz: "xs",
+  openDelay: 400,
+  closeDelay: 150,
+  label: "",
+  children: null,
+  offset: 4,
+  withinPortal: false
+});
+function buildRelationshipUrl(subjectId) {
+  const currentUrl = new URL(window.location.href);
+  if (currentUrl.hash.startsWith("#/")) {
+    const hashUrl = new URL(currentUrl.hash.substring(1), currentUrl.origin);
+    hashUrl.searchParams.set("relationships", subjectId);
+    const cleanPath = hashUrl.pathname.replace(/\/$/, "");
+    return `${currentUrl.origin}${currentUrl.pathname}${currentUrl.search}#${cleanPath}${hashUrl.search}`;
+  }
+  currentUrl.searchParams.set("relationships", subjectId);
+  return currentUrl.href;
+}
+const CopyLinkButton = ({ subjectId }) => {
+  const clipboard = useClipboard({ timeout: 2e3 });
+  const [copyError, setCopyError] = useState(false);
+  const errorTimeoutRef = useRef(null);
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    setCopyError(false);
+    if (errorTimeoutRef.current) {
+      clearTimeout(errorTimeoutRef.current);
+      errorTimeoutRef.current = null;
+    }
+    const url = buildRelationshipUrl(subjectId);
+    if (!window.isSecureContext) {
+      setCopyError(true);
+      errorTimeoutRef.current = window.setTimeout(() => {
+        setCopyError(false);
+      }, 2e3);
+      return;
+    }
+    clipboard.copy(url);
+  };
+  useEffect(() => {
+    if (clipboard.error) {
+      setCopyError(true);
+      if (errorTimeoutRef.current) {
+        clearTimeout(errorTimeoutRef.current);
+      }
+      errorTimeoutRef.current = window.setTimeout(() => {
+        setCopyError(false);
+      }, 2e3);
+    }
+  }, [clipboard.error]);
+  useEffect(() => {
+    return () => {
+      if (errorTimeoutRef.current) {
+        clearTimeout(errorTimeoutRef.current);
+      }
+    };
+  }, []);
+  const getButtonState = () => {
+    if (clipboard.copied) {
+      return {
+        icon: /* @__PURE__ */ jsx(IconCheck, {}),
+        tooltip: "Link copied!"
+      };
+    }
+    if (copyError) {
+      return {
+        icon: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
+        tooltip: "Copy failed - Clipboard requires HTTPS or localhost"
+      };
+    }
+    return {
+      icon: /* @__PURE__ */ jsx(IconLink, {}),
+      tooltip: "Copy link to this relationship view"
+    };
+  };
+  const buttonState = getButtonState();
+  return /* @__PURE__ */ jsx(Tooltip, { label: buttonState.tooltip, withArrow: true, position: "top", withinPortal: false, children: /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      variant: "default",
+      color: "gray",
+      onClick: handleCopy,
+      "aria-label": "Copy link to this relationship view",
+      children: buttonState.icon
+    }
+  ) });
+};
 
-export { RelationshipsBrowser, edgeTypes };
+export { RelationshipsBrowser };

package/dist/overlays/relationships-browser/SelectElement.js

@@ -7,8 +7,8 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const selector2 = (state) => {
   const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;

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

@@ -6,9 +6,9 @@ import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.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';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
 const selectSubject = (state) => state.context.subject;

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

@@ -1,16 +1,31 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, Text } from '@mantine/core';
-import { emptyNode } from './styles.css.js';
+import { Box } from '@likec4/styles/jsx';
+import { Text } from '@mantine/core';
 
 function EmptyNode({
   data: {
     column
   }
 }) {
-  return /* @__PURE__ */ jsx(Box, { className: emptyNode, children: /* @__PURE__ */ jsxs(Text, { c: "dimmed", fz: "lg", fw: 500, children: [
-    "No ",
-    column === "incomers" ? "incoming" : "outgoing"
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      css: {
+        width: "100%",
+        height: "100%",
+        border: `3px dashed`,
+        borderColor: `mantine.colors.defaultBorder`,
+        borderRadius: "md",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ jsxs(Text, { c: "dimmed", fz: "lg", fw: 500, children: [
+        "No ",
+        column === "incomers" ? "incoming" : "outgoing"
+      ] })
+    }
+  );
 }
 
 export { EmptyNode };

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/overlays/relationships-browser/custom/nodeTypes.js

@@ -5,6 +5,7 @@ import '@xstate/react';
 import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
+import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { ElementActions } from './ElementActions.js';
 import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
 import { CompoundTitle } from '../../../base-primitives/compound/CompoundTitle.js';
@@ -12,9 +13,21 @@ import { CompoundDetailsButton } from '../../../base-primitives/compound/Compoun
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../../base-primitives/element/ElementData.js';
-import { ElementTags } from '../../../base-primitives/element/ElementTags.js';
+import { ElementTags as ElementTags$1 } from '../../../base-primitives/element/ElementTags.js';
 import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
 
+function ElementTags(props) {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsx(
+    ElementTags$1,
+    {
+      onTagClick: useCallbackRef((tag) => {
+        diagram.openSearch(tag);
+      }),
+      ...props
+    }
+  );
+}
 const ElementDetailsButtonWithHandler = (props) => {
   const diagram = useDiagram();
   return /* @__PURE__ */ jsx(

package/dist/overlays/relationships-browser/layout.d.ts

@@ -1,4 +1,4 @@
-import { RelationshipsViewData } from '@likec4/core/compute-view/relationships';
+import { RelationshipsViewData } from '@likec4/core/compute-view';
 import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, MarkdownOrString, ViewId } from '@likec4/core/types';
 import { LikeC4ViewModel } from '@likec4/core/model';
 import { RelationshipsBrowserTypes } from './_types';

package/dist/overlays/relationships-browser/layout.js

@@ -1,4 +1,4 @@
-import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view/relationships';
+import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view';
 import { useMemo } from 'react';
 import dagre from '@dagrejs/dagre';
 import { preferSummary, exact } from '@likec4/core/types';

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;
+};