@likec4/diagram 1.19.2 → 1.20.0

package/dist/base/primitives/edge/EdgeLabel.d.ts

@@ -0,0 +1,51 @@
+import { DiagramEdge } from '@likec4/core';
+import { BoxProps, PolymorphicComponentProps } from '@mantine/core';
+import { PropsWithChildren, FunctionComponent, ReactNode } from 'react';
+import { UndefinedOnPartialDeep } from 'type-fest';
+import { EdgeProps } from '../../types';
+type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'label' | 'technology' | 'labelBBox' | 'color'>>;
+type EdgeLabelProps = PropsWithChildren<BoxProps & {
+    /**
+     * label position with optional translate
+     */
+    labelPosition?: {
+        x?: number | undefined;
+        y?: number | undefined;
+        translate?: string | undefined;
+    } | undefined;
+    edgeProps: EdgeProps<Data>;
+}>;
+export declare const EdgeLabel: (<C = "div">(props: PolymorphicComponentProps<C, EdgeLabelProps>) => React.ReactElement) & Omit< FunctionComponent<(BoxProps & {
+    /**
+     * label position with optional translate
+     */
+    labelPosition?: {
+        x?: number | undefined;
+        y?: number | undefined;
+        translate?: string | undefined;
+    } | undefined;
+    edgeProps: EdgeProps<Data>;
+} & {
+    children?: ReactNode | undefined;
+} & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "children" | "component" | keyof BoxProps | "labelPosition" | "edgeProps"> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (BoxProps & {
+    /**
+     * label position with optional translate
+     */
+    labelPosition?: {
+        x?: number | undefined;
+        y?: number | undefined;
+        translate?: string | undefined;
+    } | undefined;
+    edgeProps: EdgeProps<Data>;
+} & {
+    children?: ReactNode | undefined;
+} & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;
+export {};

package/dist/base/primitives/edge/EdgeLabel.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isStepEdgeId, extractStep } from "@likec4/core";
+import { createPolymorphicComponent, Box, Text } from "@mantine/core";
+import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import { EdgeLabelRenderer } from "@xyflow/react";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { isTruthy, isNumber } from "remeda";
+import { ZIndexes } from "../../const.js";
+import { edgeVars, edgeLabelContainer, dimmed, edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, varTranslate } from "./EdgeLabel.css.js";
+const toCssVarValue = (value) => {
+  if (value === void 0) return void 0;
+  return isNumber(value) ? `${value}px` : value;
+};
+const EdgeLabel = createPolymorphicComponent(
+  forwardRef(({
+    edgeProps: {
+      id,
+      data: {
+        technology,
+        hovered: isHovered = false,
+        active: isActive = false,
+        dimmed: dimmed$1 = false,
+        labelBBox,
+        ...data
+      }
+    },
+    labelPosition: labelXY,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
+    let zIndex = ZIndexes.Edge;
+    if (isHovered || isActive) {
+      zIndex = ZIndexes.Element + 1;
+    }
+    let labelX = (labelXY == null ? void 0 : labelXY.x) ?? (labelBBox == null ? void 0 : labelBBox.x), labelY = (labelXY == null ? void 0 : labelXY.y) ?? (labelBBox == null ? void 0 : labelBBox.y);
+    if (labelX === void 0 || labelY === void 0) {
+      return null;
+    }
+    const translate = labelXY == null ? void 0 : labelXY.translate;
+    return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: clsx(
+          "nodrag nopan",
+          edgeVars,
+          edgeLabelContainer,
+          !!dimmed$1 && dimmed,
+          className
+        ),
+        "data-likec4-color": data.color ?? "gray",
+        "data-edge-active": isActive,
+        "data-edge-animated": isActive,
+        "data-edge-hovered": isHovered,
+        "data-edge-dimmed": dimmed$1,
+        style: {
+          top: toCssVarValue(labelY),
+          left: toCssVarValue(labelX),
+          // ...assignInlineVars({
+          //   [css.varLabelX]: toCssVarValue(labelX),
+          //   [css.varLabelY]: toCssVarValue(labelY),
+          // }),
+          ...translate && assignInlineVars({
+            [varTranslate]: translate
+          }),
+          ...labelBBox && {
+            maxWidth: labelBBox.width + 18
+          },
+          zIndex,
+          ...style
+        },
+        children: /* @__PURE__ */ jsxs(Box, { ref, className: edgeLabel, ...rest, children: [
+          stepNum !== null && /* @__PURE__ */ jsx(Box, { className: stepEdgeNumber, children: stepNum }),
+          /* @__PURE__ */ jsxs(Box, { className: secondColumn, children: [
+            isTruthy(data.label) && /* @__PURE__ */ jsx(Text, { component: "div", className: edgeLabelText, lineClamp: 5, children: data.label }),
+            isTruthy(technology) && /* @__PURE__ */ jsx(Text, { component: "div", className: edgeLabelTechnology, children: "[ " + technology + " ]" }),
+            children
+          ] })
+        ] })
+      }
+    ) });
+  })
+);
+EdgeLabel.displayName = "EdgeLabel";
+export {
+  EdgeLabel
+};

package/dist/{xyflow → base/primitives/edge}/EdgeMarkers.d.ts

@@ -1,3 +1,4 @@
+import { RelationshipArrowType } from '@likec4/core';
 import { SVGProps } from 'react';
 export declare const EdgeMarkers: {
     Arrow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
@@ -10,3 +11,4 @@ export declare const EdgeMarkers: {
     ODot: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
 };
 export type EdgeMarkerType = keyof typeof EdgeMarkers;
+export declare function arrowTypeToMarker(arrowType?: RelationshipArrowType): EdgeMarkerType | undefined;

package/dist/{xyflow → base/primitives/edge}/EdgeMarkers.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { nonexhaustive } from "@likec4/core";
 const Open = (props) => /* @__PURE__ */ jsx(
   "marker",
   {
@@ -187,6 +188,33 @@ const EdgeMarkers = {
   Dot,
   ODot
 };
+function arrowTypeToMarker(arrowType) {
+  if (!arrowType || arrowType === "none") {
+    return void 0;
+  }
+  switch (arrowType) {
+    case "normal":
+      return "Arrow";
+    case "crow":
+      return "Crow";
+    case "onormal":
+      return "OArrow";
+    case "diamond":
+      return "Diamond";
+    case "odiamond":
+      return "ODiamond";
+    case "open":
+    case "vee":
+      return "Open";
+    case "dot":
+      return "Dot";
+    case "odot":
+      return `ODot`;
+    default:
+      nonexhaustive(arrowType);
+  }
+}
 export {
-  EdgeMarkers
+  EdgeMarkers,
+  arrowTypeToMarker
 };

package/dist/base/primitives/edge/EdgePath.d.ts

@@ -0,0 +1,44 @@
+import { PointerEventHandler, ForwardRefExoticComponent, CSSProperties, ReactNode, RefAttributes } from 'react';
+import { Position } from '@xyflow/system';
+import { RelationshipArrowType, RelationshipLineType } from '@likec4/core';
+export declare const EdgePath: ForwardRefExoticComponent<{
+    source: string;
+    target: string;
+    style?: CSSProperties;
+    id: string;
+    selected?: boolean;
+    selectable?: boolean;
+    deletable?: boolean;
+    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.Dimmed;
+    } & {
+        dir?: "forward" | "back" | "both" | undefined;
+        head?: RelationshipArrowType | undefined;
+        tail?: RelationshipArrowType | undefined;
+        line?: RelationshipLineType | undefined;
+    };
+} & {
+    svgPath: string;
+    onEdgePointerDown?: PointerEventHandler<SVGGElement> | undefined;
+} & RefAttributes<SVGPathElement>>;

package/dist/base/primitives/edge/EdgePath.js

@@ -0,0 +1,77 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { markerContext, edgePathBg, cssEdgePath } from "./edge.css.js";
+import { arrowTypeToMarker, EdgeMarkers } from "./EdgeMarkers.js";
+const EdgePath = forwardRef(({
+  id,
+  data: {
+    line,
+    dir,
+    tail,
+    head
+  },
+  svgPath,
+  style,
+  interactionWidth,
+  onEdgePointerDown
+}, svgPathRef) => {
+  let markerStartName = arrowTypeToMarker(tail);
+  let markerEndName = arrowTypeToMarker(head ?? "normal");
+  if (dir === "back") {
+    [markerStartName, markerEndName] = [markerEndName, markerStartName];
+  }
+  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null;
+  const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null;
+  const isDotted = line === "dotted";
+  const isDashed = isDotted || line === "dashed";
+  let strokeDasharray;
+  if (isDotted) {
+    strokeDasharray = "1,8";
+  } else if (isDashed) {
+    strokeDasharray = "8,10";
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        className: clsx("react-flow__edge-interaction"),
+        d: svgPath,
+        fill: "none",
+        stroke: "transparent",
+        strokeWidth: interactionWidth ?? 10
+      }
+    ),
+    /* @__PURE__ */ jsxs("g", { className: markerContext, onPointerDown: onEdgePointerDown, children: [
+      /* @__PURE__ */ jsxs("defs", { children: [
+        MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }),
+        MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: clsx("react-flow__edge-path", edgePathBg),
+          d: svgPath,
+          style,
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          ref: svgPathRef,
+          className: clsx("react-flow__edge-path", cssEdgePath),
+          d: svgPath,
+          style,
+          strokeLinecap: "round",
+          strokeDasharray,
+          markerStart: MarkerStart ? `url(#start${id})` : void 0,
+          markerEnd: MarkerEnd ? `url(#end${id})` : void 0
+        }
+      )
+    ] })
+  ] });
+});
+export {
+  EdgePath
+};

package/dist/base/primitives/edge/edge.css.d.ts

@@ -0,0 +1,6 @@
+export declare const mixColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const edgeVars: string;
+export declare const dimmed: string;
+export declare const edgePathBg: string;
+export declare const markerContext: string;
+export declare const cssEdgePath: string;

package/dist/base/primitives/edge/edge.css.js

@@ -0,0 +1,14 @@
+/* empty css                                        */
+/* empty css                        */
+var edgeVars = "nrg7w91";
+var dimmed = "nrg7w92";
+var edgePathBg = "nrg7w93";
+var markerContext = "nrg7w94";
+var cssEdgePath = "nrg7w96";
+export {
+  cssEdgePath,
+  dimmed,
+  edgePathBg,
+  edgeVars,
+  markerContext
+};

package/dist/base/primitives/element/ElementActionButtons.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const actionButtons: string;
+export declare const actionIcon: string;

package/dist/base/primitives/element/ElementActionButtons.css.js

@@ -0,0 +1,9 @@
+/* empty css                                        */
+var container = "_14fvrz60";
+var actionButtons = "_14fvrz61";
+var actionIcon = "_14fvrz62";
+export {
+  actionButtons,
+  actionIcon,
+  container
+};

package/dist/base/primitives/element/ElementActionButtons.d.ts

@@ -0,0 +1,13 @@
+import { NodeProps } from '../../types';
+type ElementActionButtonsProps = NodeProps & {
+    buttons: ElementActionButtons.Item[];
+};
+export declare function ElementActionButtons({ id, selected, data: { hovered: isHovered, }, buttons, }: ElementActionButtonsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace ElementActionButtons {
+    type Item = {
+        key?: string;
+        icon: React.ReactNode;
+        onClick: (e: React.MouseEvent) => void;
+    };
+}
+export {};

package/dist/base/primitives/element/ElementActionButtons.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, ActionIcon } from "@mantine/core";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { stopPropagation } from "../../../utils/xyflow.js";
+import { container, actionButtons, actionIcon } from "./ElementActionButtons.css.js";
+function ElementActionButtons({
+  id,
+  selected = false,
+  data: {
+    hovered: isHovered = false
+  },
+  buttons
+}) {
+  if (!buttons.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Box, { className: container, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: m.div,
+      layoutRoot: true,
+      initial: false,
+      style: {
+        originY: 0,
+        gap: "6px"
+      },
+      animate: {
+        opacity: isHovered || selected ? 1 : 0.75,
+        scale: isHovered ? 1.1 : selected ? 0.9 : 0.8,
+        y: isHovered || selected ? 6 : 0
+      },
+      "data-hovered": isHovered,
+      className: clsx("nodrag nopan", actionButtons),
+      children: buttons.map((button, index) => /* @__PURE__ */ jsx(
+        m.div,
+        {
+          initial: false,
+          whileTap: { scale: 1 },
+          whileHover: {
+            scale: 1.35
+          },
+          children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              className: actionIcon,
+              size: "md",
+              radius: "md",
+              onClick: button.onClick,
+              onDoubleClick: stopPropagation,
+              children: button.icon
+            }
+          )
+        },
+        `action-button-${id}-${button.key ?? index}`
+      ))
+    }
+  ) });
+}
+export {
+  ElementActionButtons
+};

package/dist/base/primitives/element/ElementDetailsButton.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const actionIconWrapper: string;
+export declare const actionIcon: string;

package/dist/base/primitives/element/ElementDetailsButton.css.js

@@ -0,0 +1,9 @@
+/* empty css                                        */
+var container = "_1jvuy7m0";
+var actionIconWrapper = "_1jvuy7m1";
+var actionIcon = "_1jvuy7m2";
+export {
+  actionIcon,
+  actionIconWrapper,
+  container
+};

package/dist/base/primitives/element/ElementDetailsButton.d.ts

@@ -0,0 +1,7 @@
+import { NodeProps } from '../../types';
+type ElementDetailsButtonProps = NodeProps & {
+    icon?: React.ReactNode;
+    onClick: (e: React.MouseEvent) => void;
+};
+export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, onClick, }: ElementDetailsButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/base/primitives/element/ElementDetailsButton.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, ActionIcon } from "@mantine/core";
+import { IconId } from "@tabler/icons-react";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { stopPropagation } from "../../../utils/xyflow.js";
+import { container, actionIconWrapper, actionIcon } from "./ElementDetailsButton.css.js";
+function ElementDetailsButton({
+  selected = false,
+  data: {
+    hovered: isHovered = false
+  },
+  icon,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(Box, { className: clsx(container, "details-button"), children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: clsx("nodrag nopan", actionIconWrapper),
+      component: m.div,
+      initial: false,
+      style: {
+        originX: 0.45,
+        originY: 0.55
+      },
+      animate: isHovered || selected ? {
+        scale: 1.2,
+        opacity: 0.7
+      } : {
+        scale: 1,
+        opacity: 0.5
+      },
+      whileHover: {
+        scale: 1.4,
+        opacity: 1
+      },
+      whileTap: { scale: 1.15 },
+      children: /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          className: actionIcon,
+          size: "md",
+          radius: "md",
+          onClick,
+          onDoubleClick: stopPropagation,
+          children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
+        }
+      )
+    }
+  ) });
+}
+export {
+  ElementDetailsButton
+};

package/dist/base/primitives/element/ElementNodeContainer.css.d.ts

@@ -0,0 +1,3 @@
+export declare const stokeFillMix: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const container: string;
+export declare const dimmed: string;

package/dist/base/primitives/element/ElementNodeContainer.css.js

@@ -0,0 +1,7 @@
+/* empty css                                        */
+var container = "_1smoows1";
+var dimmed = "_1smoows2";
+export {
+  container,
+  dimmed
+};

package/dist/base/primitives/element/ElementNodeContainer.d.ts

@@ -0,0 +1,26 @@
+import { DiagramNode } from '@likec4/core';
+import { BoxProps, PolymorphicComponentProps } from '@mantine/core';
+import { PropsWithChildren, FunctionComponent, ReactNode } from 'react';
+import { NodeProps } from '../../types';
+type RequiredData = Pick<DiagramNode, 'color' | 'shape'>;
+type ElementNodeContainerProps = BoxProps & PropsWithChildren<{
+    nodeProps: NodeProps<RequiredData>;
+}>;
+export declare const ElementNodeContainer: (<C = "div">(props: PolymorphicComponentProps<C, ElementNodeContainerProps>) => React.ReactElement) & Omit< FunctionComponent<(BoxProps & {
+    nodeProps: NodeProps<RequiredData>;
+} & {
+    children?: ReactNode | undefined;
+} & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "children" | "component" | keyof BoxProps | "nodeProps"> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (BoxProps & {
+    nodeProps: NodeProps<RequiredData>;
+} & {
+    children?: ReactNode | undefined;
+} & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;
+export {};

package/dist/base/primitives/element/ElementNodeContainer.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { createPolymorphicComponent, Box } from "@mantine/core";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { forwardRef } from "react";
+import { container, dimmed } from "./ElementNodeContainer.css.js";
+const ElementNodeContainer = createPolymorphicComponent(
+  forwardRef(({
+    nodeProps: {
+      selected = false,
+      selectable = false,
+      data: {
+        hovered: isHovered = false,
+        dimmed: isDimmed = false,
+        ...data
+      }
+    },
+    children,
+    ...rest
+  }, ref) => {
+    let scale = 1;
+    switch (true) {
+      case isHovered:
+        scale = 1.05;
+        break;
+      case selected:
+        scale = 1.02;
+        break;
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: m.div,
+        ref,
+        className: clsx([
+          container,
+          isDimmed && dimmed,
+          "likec4-element-node"
+        ]),
+        initial: false,
+        layoutRoot: true,
+        ...selectable && {
+          animate: {
+            scale
+          },
+          whileTap: { scale: 0.98 }
+        },
+        "data-hovered": isHovered,
+        "data-likec4-color": data.color,
+        "data-likec4-shape": data.shape,
+        ...rest,
+        children
+      }
+    );
+  })
+);
+ElementNodeContainer.displayName = "ElementNodeContainer";
+export {
+  ElementNodeContainer
+};

package/dist/base/primitives/element/ElementShape.css.d.ts

@@ -0,0 +1,6 @@
+export declare const indicator: string;
+export declare const fillElementFill: string;
+export declare const fillElementStroke: string;
+export declare const fillMixStroke: string;
+export declare const shapeSvgMultiple: string;
+export declare const shapeSvg: string;

package/dist/base/primitives/element/ElementShape.css.js

@@ -0,0 +1,14 @@
+/* empty css                                        */
+/* empty css                                */
+var indicator = "_4zok2q2";
+var fillElementFill = "_4zok2q3";
+var fillMixStroke = "_4zok2q5";
+var shapeSvgMultiple = "_4zok2q8 _4zok2q7";
+var shapeSvg = "_4zok2q9 _4zok2q7";
+export {
+  fillElementFill,
+  fillMixStroke,
+  indicator,
+  shapeSvg,
+  shapeSvgMultiple
+};

package/dist/base/primitives/element/ElementShape.d.ts

@@ -0,0 +1,28 @@
+import { DiagramNode, ElementShape } from '@likec4/core';
+export declare function cylinderSVGPath(diameter: number, height: number, tilt?: number): {
+    path: string;
+    ry: number;
+    rx: number;
+};
+type ElementShapeProps = {
+    shape: ElementShape;
+    w: number;
+    h: number;
+};
+type Data = Pick<DiagramNode, 'shape' | 'width' | 'height'>;
+type ElementShapePrimitiveProps = {
+    data: Data;
+    width?: number;
+    height?: number;
+    isMultiple?: boolean | undefined;
+    /**
+     * @default true
+     */
+    withSelectedIndicator?: boolean | undefined;
+};
+export declare function ElementShape({ data, width, height, isMultiple, withSelectedIndicator }: ElementShapePrimitiveProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * When element is selected, this component is used to render the indicator
+ */
+export declare function SelectedIndicator({ shape, w, h }: ElementShapeProps): import("react/jsx-runtime").JSX.Element;
+export {};