@likec4/diagram 1.26.2 → 1.27.1

package/dist/overlays/relationship-details/RelationshipDetails.d.ts

@@ -1,4 +1,53 @@
 import { RelationshipDetailsActorRef } from './actor';
+import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { Position } from '@xyflow/system';
+import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+export declare const edgeTypes: {
+    relationship: NamedExoticComponent<{
+        id: string;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        style?: CSSProperties;
+        source: string;
+        target: string;
+        animated?: boolean;
+        sourceX: number;
+        sourceY: number;
+        targetX: number;
+        targetY: number;
+        sourcePosition: Position;
+        targetPosition: Position;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        sourceHandleId?: string | null;
+        targetHandleId?: string | null;
+        markerStart?: string;
+        markerEnd?: string;
+        pathOptions?: any;
+        interactionWidth?: number;
+        data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../../base").Base.Dimmed;
+        } & {
+            relationId: RelationId;
+            color: Color | undefined;
+            label: string | null;
+            technology?: string | undefined | undefined;
+            description?: string | undefined | undefined;
+            navigateTo: ViewId | null;
+            line: RelationshipLineType;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../../base").Base.Dimmed;
+        };
+    }>;
+};
 export type RelationshipDetailsProps = {
     actorRef: RelationshipDetailsActorRef;
 };

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

@@ -1,17 +1,25 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ActionIcon, Group } from "@mantine/core";
-import { useStateHistory, useCallbackRef } from "@mantine/hooks";
-import { IconX, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-import { ReactFlowProvider, Panel } from "@xyflow/react";
-import clsx from "clsx";
-import { LayoutGroup, AnimatePresence, m } from "framer-motion";
-import { useRef, memo, useEffect } from "react";
-import { BaseXYFlow } from "../../base/BaseXYFlow.js";
-import { edgeTypes } from "./custom/edgeTypes.js";
-import { nodeTypes } from "./custom/nodeTypes.js";
-import { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsState } from "./hooks.js";
-import { SelectEdge } from "./SelectEdge.js";
-import { useLayoutedDetails } from "./useLayoutedDetails.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ActionIcon, Group } from '@mantine/core';
+import { useStateHistory, useCallbackRef } from '@mantine/hooks';
+import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import { ReactFlowProvider, Panel } from '@xyflow/react';
+import clsx from 'clsx';
+import { LayoutGroup, AnimatePresence, m } from 'framer-motion';
+import { useRef, memo, useEffect } from 'react';
+import { BaseXYFlow } from '../../base/BaseXYFlow.js';
+import { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsState } from './hooks.js';
+import { SelectEdge } from './SelectEdge.js';
+import { useLayoutedDetails } from './useLayoutedDetails.js';
+import { RelationshipEdge } from './custom/edgeTypes.js';
+import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
+
+const nodeTypes = {
+  element: ElementNode,
+  compound: CompoundNode
+};
+const edgeTypes = {
+  relationship: RelationshipEdge
+};
 function RelationshipDetails({ actorRef }) {
   const initialRef = useRef(null);
   if (initialRef.current == null) {
@@ -198,6 +206,5 @@ const TopLeftPanel = ({
     /* @__PURE__ */ jsx(Group, { gap: "xs", wrap: "nowrap", ml: "sm", children: /* @__PURE__ */ jsx(SelectEdge, { edge, view }) })
   ] }) }) });
 };
-export {
-  RelationshipDetails
-};
+
+export { RelationshipDetails, edgeTypes };

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

@@ -1,17 +1,82 @@
-/* empty css                              */
-var edgeSource = "_1cwkcdb1 _1cwkcdb0";
-var edgeArrow = "_1cwkcdb2 _1cwkcdb0";
-var edgeTarget = "_1cwkcdb3 _1cwkcdb0";
-var edgeLabel = "_1cwkcdb4";
-var edgeRow = "_1cwkcdb5";
-var edgeGrid = "_1cwkcdb6";
-var scrollArea = "_1cwkcdb8";
-export {
-  edgeArrow,
-  edgeGrid,
-  edgeLabel,
-  edgeRow,
-  edgeSource,
-  edgeTarget,
-  scrollArea
-};
+import { css, cx } from '@likec4/styles/css';
+
+const edgeEnpoint = css.raw({
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "6px 2px 0 2px",
+  "& .mantine-Text-root": {
+    color: "mantine.colors.text/90",
+    fontSize: "xs",
+    fontWeight: 500,
+    lineHeight: "1.2"
+  }
+});
+const edgeSource = css({
+  paddingLeft: 4,
+  gridColumn: 1
+}, edgeEnpoint);
+const edgeArrow = css({
+  gridColumn: 2
+}, edgeEnpoint);
+const edgeTarget = css({
+  gridColumn: 3,
+  paddingRight: 4
+}, edgeEnpoint);
+const edgeLabelclass = "likec4-edge-label";
+const edgeLabel = cx(
+  edgeLabelclass,
+  css({
+    display: "grid",
+    gridColumnStart: 1,
+    gridColumnEnd: 4,
+    borderBottom: `1px solid`,
+    borderBottomColor: "mantine.colors.defaultBorder",
+    marginBottom: "0px",
+    padding: "0 4px 5px 4px",
+    width: "100%",
+    "& .mantine-Text-root": {
+      fontSize: "xxs",
+      fontWeight: 400,
+      lineHeight: "xs",
+      color: "mantine.colors.dimmed"
+    }
+  })
+);
+const edgeRow = css({
+  display: "contents",
+  [`&:last-child .${edgeLabelclass}`]: {
+    borderBottom: "none",
+    marginBottom: 0
+  },
+  "& > *": {
+    transition: "all 0.15s ease-in"
+  },
+  "&:is(:hover, [data-selected=true]) > *": {
+    transition: "all 0.15s ease-out",
+    cursor: "pointer",
+    backgroundColor: "mantine.colors.defaultHover"
+  }
+});
+const edgeGrid = css({
+  display: "grid",
+  gridTemplateColumns: "1fr 30px 1fr",
+  gridAutoRows: "min-content max-content",
+  gap: 0,
+  alignItems: "stretch"
+});
+css({
+  display: "grid",
+  gridTemplateColumns: "min-content 1fr",
+  gridAutoRows: "min-content max-content",
+  gap: "10px 12px",
+  alignItems: "baseline",
+  justifyItems: "start"
+});
+const scrollArea = css({
+  maxHeight: [
+    "70vh",
+    "calc(100cqh - 70px)"
+  ]
+});
+
+export { edgeArrow, edgeGrid, edgeLabel, edgeRow, edgeSource, edgeTarget, scrollArea };

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

@@ -1,11 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import "@likec4/core";
-import { useComputedColorScheme, Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from "@mantine/core";
-import { IconArrowRight, IconSelector } from "@tabler/icons-react";
-import { useRef } from "react";
-import { useRelationshipDetails } from "./hooks.js";
-import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from "./SelectEdge.css.js";
-import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@likec4/core';
+import { useComputedColorScheme, Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from '@mantine/core';
+import { IconArrowRight, IconSelector } from '@tabler/icons-react';
+import { useRef } from 'react';
+import { useRelationshipDetails } from './hooks.js';
+import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
+
 const SelectEdge = ({
   edge,
   view
@@ -13,7 +14,7 @@ const SelectEdge = ({
   const overlay = useRelationshipDetails();
   const viewport = useRef(null);
   useMantinePortalProps();
-  const theme = useComputedColorScheme();
+  useComputedColorScheme();
   const edgeSource$1 = view.nodes.find((n) => n.id === edge.source);
   const edgeTarget$1 = view.nodes.find((n) => n.id === edge.target);
   const edges = view.edges.map((edge2) => {
@@ -37,9 +38,8 @@ const SelectEdge = ({
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
       onOpen: () => {
         setTimeout(() => {
-          var _a;
-          const item = (_a = viewport.current) == null ? void 0 : _a.querySelector(`[data-edge-id="${edge.id}"]`);
-          item == null ? void 0 : item.scrollIntoView({ behavior: "instant", block: "nearest" });
+          const item = viewport.current?.querySelector(`[data-edge-id="${edge.id}"]`);
+          item?.scrollIntoView({ behavior: "instant", block: "nearest" });
         }, 100);
       },
       children: [
@@ -47,8 +47,7 @@ const SelectEdge = ({
           Button,
           {
             size: "xs",
-            variant: "light",
-            color: theme === "light" ? "dark" : "gray",
+            variant: "default",
             fw: "500",
             style: { padding: "0.25rem 0.75rem" },
             rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
@@ -122,6 +121,5 @@ const SelectEdge = ({
     }
   );
 };
-export {
-  SelectEdge
-};
+
+export { SelectEdge };

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

@@ -1,9 +1,10 @@
-import { invariant } from "@likec4/core";
-import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
-import { prop } from "remeda";
-import { setup, assign, cancel, raise, enqueueActions } from "xstate";
-import { MinZoom } from "../../base/const.js";
-import { Base } from "../../base/types.js";
+import { invariant } from '@likec4/core';
+import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
+import { prop } from 'remeda';
+import { setup, assign, cancel, raise, enqueueActions } from 'xstate';
+import { MinZoom } from '../../base/const.js';
+import { Base } from '../../base/types.js';
+
 const relationshipDetailsLogic = setup({
   types: {
     context: {},
@@ -180,6 +181,5 @@ const relationshipDetailsLogic = setup({
     }
   }
 });
-export {
-  relationshipDetailsLogic
-};
+
+export { relationshipDetailsLogic };

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

@@ -1,8 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import { IconZoomScan } from "@tabler/icons-react";
-import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { ElementActionButtons } from "../../../base/primitives/element/ElementActionButtons.js";
+import { jsx } from 'react/jsx-runtime';
+import { IconZoomScan } from '@tabler/icons-react';
+import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
+
 const ElementActions = (props) => {
   const { enableNavigateTo } = useEnabledFeature("NavigateTo");
   const diagram = useDiagram();
@@ -26,6 +27,5 @@ const ElementActions = (props) => {
     }
   );
 };
-export {
-  ElementActions
-};
+
+export { ElementActions };

package/dist/overlays/relationship-details/custom/edgeTypes.d.ts

@@ -1,49 +1,47 @@
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
 import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
-export declare const edgeTypes: {
-    relationship: NamedExoticComponent<{
-        source: string;
-        target: string;
-        style?: CSSProperties;
-        id: string;
-        selected?: boolean;
-        animated?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        sourceX: number;
-        sourceY: number;
-        targetX: number;
-        targetY: number;
-        sourcePosition: Position;
-        targetPosition: Position;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        sourceHandleId?: string | null;
-        targetHandleId?: string | null;
-        markerStart?: string;
-        markerEnd?: string;
-        pathOptions?: any;
-        interactionWidth?: number;
-        data: {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../../../base").Base.Dimmed;
-        } & {
-            relationId: RelationId;
-            color: Color | undefined;
-            label: string | null;
-            technology?: string | undefined | undefined;
-            description?: string | undefined | undefined;
-            navigateTo: ViewId | null;
-            line: RelationshipLineType;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../../../base").Base.Dimmed;
-        };
-    }>;
-};
+export declare const RelationshipEdge: NamedExoticComponent<{
+    id: string;
+    selected?: boolean;
+    selectable?: boolean;
+    deletable?: boolean;
+    style?: CSSProperties;
+    source: string;
+    target: string;
+    animated?: boolean;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition: Position;
+    targetPosition: Position;
+    label?: ReactNode;
+    labelStyle?: CSSProperties;
+    labelShowBg?: boolean;
+    labelBgStyle?: CSSProperties;
+    labelBgPadding?: [number, number];
+    labelBgBorderRadius?: number;
+    sourceHandleId?: string | null;
+    targetHandleId?: string | null;
+    markerStart?: string;
+    markerEnd?: string;
+    pathOptions?: any;
+    interactionWidth?: number;
+    data: {
+        hovered?: boolean;
+        active?: boolean;
+        dimmed?: import("../../../base").Base.Dimmed;
+    } & {
+        relationId: RelationId;
+        color: Color | undefined;
+        label: string | null;
+        technology?: string | undefined | undefined;
+        description?: string | undefined | undefined;
+        navigateTo: ViewId | null;
+        line: RelationshipLineType;
+        hovered?: boolean;
+        active?: boolean;
+        dimmed?: import("../../../base").Base.Dimmed;
+    };
+}>;

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

@@ -1,51 +1,50 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { getBezierPath } from "@xyflow/system";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { customEdge } from "../../../base/primitives/customEdge.js";
-import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
-import { EdgeContainer } from "../../../base/primitives/edge/EdgeContainer.js";
-import { EdgePath } from "../../../base/primitives/edge/EdgePath.js";
-import { EdgeLabel } from "../../../base/primitives/edge/EdgeLabel.js";
-import { EdgeActionButton } from "../../../base/primitives/edge/EdgeActionButton.js";
-const edgeTypes = {
-  relationship: customEdge((props) => {
-    const { enableNavigateTo } = useEnabledFeature("NavigateTo");
-    const {
-      sourceX,
-      targetY,
-      data: { navigateTo }
-    } = props;
-    const [svgPath, labelX, labelY] = getBezierPath(props);
-    const diagram = useDiagram();
-    return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, children: [
-      /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath }),
-      /* @__PURE__ */ jsx(
-        EdgeLabel,
-        {
-          edgeProps: props,
-          labelPosition: {
-            x: labelX,
-            y: labelY,
-            translate: "translate(-50%, 0)"
-          },
-          style: {
-            maxWidth: Math.abs(props.targetX - props.sourceX - 70)
-          },
-          children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
-            EdgeActionButton,
-            {
-              ...props,
-              onClick: (e) => {
-                e.stopPropagation();
-                diagram.navigateTo(navigateTo);
-              }
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getBezierPath } from '@xyflow/system';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { customEdge } from '../../../base/primitives/customEdge.js';
+import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { EdgeContainer } from '../../../base/primitives/edge/EdgeContainer.js';
+import { EdgePath } from '../../../base/primitives/edge/EdgePath.js';
+import { EdgeLabelContainer } from '../../../base/primitives/edge/EdgeLabelContainer.js';
+import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
+import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.js';
+
+const RelationshipEdge = customEdge((props) => {
+  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const {
+    sourceX,
+    targetY,
+    data: { navigateTo }
+  } = props;
+  const [svgPath, labelX, labelY] = getBezierPath(props);
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, children: [
+    /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath }),
+    /* @__PURE__ */ jsx(
+      EdgeLabelContainer,
+      {
+        edgeProps: props,
+        labelPosition: {
+          x: labelX,
+          y: labelY,
+          translate: "translate(-50%, 0)"
+        },
+        style: {
+          maxWidth: Math.abs(props.targetX - props.sourceX - 70)
+        },
+        children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps: props, children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
+          EdgeActionButton,
+          {
+            ...props,
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.navigateTo(navigateTo);
             }
-          )
-        }
-      )
-    ] });
-  })
-};
-export {
-  edgeTypes
-};
+          }
+        ) })
+      }
+    )
+  ] });
+});
+
+export { RelationshipEdge };

package/dist/overlays/relationship-details/custom/index.d.ts

@@ -1,2 +1,2 @@
-export { edgeTypes } from './edgeTypes';
-export { nodeTypes } from './nodeTypes';
+export { RelationshipEdge } from './edgeTypes';
+export { CompoundNode, ElementNode } from './nodeTypes';

package/dist/overlays/relationship-details/custom/nodeTypes.d.ts

@@ -2,36 +2,34 @@ import { NodeProps } from '../../../base';
 import { RelationshipDetailsTypes } from '../_types';
 import { NamedExoticComponent } from 'react';
 import { ElementStyle, Color, ViewId, Fqn, IconUrl } from '@likec4/core';
-export declare const nodeTypes: {
-    element: NamedExoticComponent<NodeProps<{
-        style: ElementStyle;
-        title: string;
-        description: string | null;
-        width: number;
-        height: number;
-        technology: string | null;
-        shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
-        color: Color;
-        navigateTo: ViewId<string> | null | undefined;
-        fqn: Fqn;
-        icon: IconUrl;
-        ports: RelationshipDetailsTypes.Ports;
-        hovered?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
-    }>>;
-    compound: NamedExoticComponent<NodeProps<{
-        style: ElementStyle;
-        title: string;
-        shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
-        color: Color;
-        fqn: Fqn;
-        depth: number;
-        icon?: IconUrl;
-        ports: RelationshipDetailsTypes.Ports;
-        hovered?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
-    }>>;
-};
+export declare const ElementNode: NamedExoticComponent<NodeProps<{
+    width: number;
+    height: number;
+    style: ElementStyle;
+    title: string;
+    technology: string | null;
+    description: string | null;
+    color: Color;
+    shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+    navigateTo: ViewId<string> | null | undefined;
+    fqn: Fqn;
+    icon: IconUrl;
+    ports: RelationshipDetailsTypes.Ports;
+    hovered?: boolean;
+    dimmed?: import("../../../base").Base.Dimmed;
+}>>;
+export declare const CompoundNode: NamedExoticComponent<NodeProps<{
+    style: ElementStyle;
+    title: string;
+    color: Color;
+    shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+    fqn: Fqn;
+    depth: number;
+    icon?: IconUrl;
+    ports: RelationshipDetailsTypes.Ports;
+    hovered?: boolean;
+    dimmed?: import("../../../base").Base.Dimmed;
+}>>;
 type ElementPortsProps = NodeProps<Pick<RelationshipDetailsTypes.ElementNodeData, 'ports' | 'height'>>;
 export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
 type CompoundPortsProps = NodeProps<Pick<RelationshipDetailsTypes.CompoundNodeData, 'ports'>>;