@likec4/diagram 1.17.1 → 1.19.0

package/dist/xyflow/nodes/AnimateVariants.js

@@ -0,0 +1,123 @@
+import { fallbackVar } from "../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.browser.esm.js";
+import { useState, useMemo } from "react";
+import { isNumber, isString, isEmpty } from "remeda";
+import { vars } from "../../theme-vars.css.js";
+const DEFAULT_SCALE_BY = 0;
+const SELECTED_SCALE_BY = 16;
+const HOVERED_SCALE_BY = 12;
+const TAP_SCALE_BY = -16;
+const DELAY_NODE = 0.1;
+const DELAY_NODE_CHILDREN = 0.06;
+const DIMMED_OPACITY = 0.15;
+const DIMMED_DELAY = 0.2;
+const NodeVariants = (width, height, opts) => {
+  const {
+    selectedScaleBy = SELECTED_SCALE_BY,
+    hoveredScaleBy = HOVERED_SCALE_BY,
+    tapScaleBy = TAP_SCALE_BY
+  } = opts ?? {};
+  const maxwh = Math.max(width, height);
+  const scaleBy = (diffPx) => ({
+    scale: (maxwh + diffPx) / maxwh
+    // scaleY: (maxwh + diffPx) / maxwh,
+  });
+  return {
+    dimmed: {
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, "blur(1px)")}`,
+      opacity: DIMMED_OPACITY,
+      transition: {
+        delay: DIMMED_DELAY,
+        ease: "easeInOut"
+      },
+      willChange: "opacity, filter"
+    },
+    idle: {
+      ...scaleBy(DEFAULT_SCALE_BY),
+      transition: {
+        delay: DELAY_NODE,
+        delayChildren: DELAY_NODE_CHILDREN
+      },
+      filter: `grayscale(0) ${fallbackVar(vars.safariAnimationHook, "blur(0px)")}`
+    },
+    selected: {
+      ...scaleBy(selectedScaleBy)
+    },
+    hovered: (_, { scale }) => ({
+      ...scaleBy(hoveredScaleBy),
+      transition: !isNumber(scale) || scale === 1 ? {
+        delay: DELAY_NODE,
+        delayChildren: DELAY_NODE_CHILDREN
+      } : {}
+    }),
+    tap: {
+      ...scaleBy(tapScaleBy)
+    }
+  };
+};
+function useFramerAnimateVariants() {
+  const [variants, setVariants] = useState(null);
+  const handlers = useMemo(() => {
+    const getTarget = (e) => {
+      var _a, _b;
+      try {
+        return ((_b = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.closest("[data-animate-target]")) == null ? void 0 : _b.getAttribute("data-animate-target")) ?? null;
+      } catch (_e) {
+        console.warn(`Failed to get animate target`, _e);
+        return null;
+      }
+    };
+    const onHoverStart = (e) => {
+      e == null ? void 0 : e.stopPropagation();
+      const hoverTarget = getTarget(e);
+      if (!isString(hoverTarget)) {
+        setVariants(null);
+        return;
+      }
+      if (isEmpty(hoverTarget)) {
+        setVariants(["hovered"]);
+        return;
+      }
+      setVariants(["hovered", `hovered:${hoverTarget}`]);
+    };
+    const resetVariants = (e) => {
+      e == null ? void 0 : e.stopPropagation();
+      const hoverTarget = getTarget(e);
+      if (!isString(hoverTarget) || isEmpty(hoverTarget)) {
+        setVariants(null);
+        return;
+      }
+      setVariants((v) => (v == null ? void 0 : v.filter((v2) => !v2.includes(hoverTarget))) ?? null);
+    };
+    return {
+      onTapStart: (e) => {
+        e == null ? void 0 : e.stopPropagation();
+        const tapTarget = getTarget(e);
+        if (!isString(tapTarget)) {
+          setVariants(null);
+          return;
+        }
+        if (isEmpty(tapTarget)) {
+          setVariants([
+            "hovered",
+            "tap"
+          ]);
+        } else {
+          setVariants([
+            "hovered",
+            `hovered:${tapTarget}`,
+            `tap:${tapTarget}`
+          ]);
+        }
+      },
+      onHoverStart,
+      onHoverEnd: resetVariants,
+      onTapCancel: resetVariants,
+      onTap: onHoverStart
+    };
+  }, [setVariants]);
+  return [variants, handlers];
+}
+export {
+  NodeVariants,
+  useFramerAnimateVariants
+};

package/dist/xyflow/nodes/Node.css.d.ts

@@ -0,0 +1,3 @@
+export declare const topLeftBtnContainer: string;
+export declare const topRightBtnContainer: string;
+export declare const bottomBtnContainer: string;

package/dist/xyflow/nodes/Node.css.js

@@ -0,0 +1,9 @@
+/* empty css                        */
+var topLeftBtnContainer = "_12hvjem0";
+var topRightBtnContainer = "_12hvjem1";
+var bottomBtnContainer = "_12hvjem2";
+export {
+  bottomBtnContainer,
+  topLeftBtnContainer,
+  topRightBtnContainer
+};

package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts

@@ -0,0 +1,14 @@
+export declare const containerForFramer: string;
+export declare const container: string;
+export declare const nodeHandlerInCenter: string;
+export declare const varOpacity: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varBorderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varBorderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varBorderTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const compoundBody: string;
+export declare const compoundTitle: string;
+export declare const withNavigation: string;
+export declare const transparent: string;
+export declare const title: string;
+export declare const indicator: string;
+export declare const elementIcon: string;

package/dist/xyflow/nodes/compound/CompoundNode.css.js

@@ -0,0 +1,27 @@
+/* empty css                                */
+var containerForFramer = "lbtzdo0";
+var container = "lbtzdo2";
+var nodeHandlerInCenter = "lbtzdo3";
+var varOpacity = "var(--lbtzdo4)";
+var varBorderTransparency = "var(--lbtzdo7)";
+var compoundBody = "lbtzdo8";
+var compoundTitle = "lbtzdo9";
+var withNavigation = "lbtzdoa";
+var transparent = "lbtzdoc";
+var title = "lbtzdod";
+var indicator = "lbtzdoh";
+var elementIcon = "lbtzdoj";
+export {
+  compoundBody,
+  compoundTitle,
+  container,
+  containerForFramer,
+  elementIcon,
+  indicator,
+  nodeHandlerInCenter,
+  title,
+  transparent,
+  varBorderTransparency,
+  varOpacity,
+  withNavigation
+};

package/dist/xyflow/nodes/compound/CompoundNode.d.ts

@@ -0,0 +1,6 @@
+import { NodeProps } from '@xyflow/react';
+import { DiagramFlowTypes } from '../../types';
+import { NamedExoticComponent } from 'react';
+type CompoundNodeProps = NodeProps<DiagramFlowTypes.CompoundNode>;
+export declare const CompoundNodeMemo: NamedExoticComponent<CompoundNodeProps>;
+export {};

package/dist/xyflow/nodes/compound/CompoundNode.js

@@ -0,0 +1,216 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { DiagramNode } from "@likec4/core";
+import { Box, Text } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import { Handle, Position } from "@xyflow/react";
+import clsx from "clsx";
+import { deepEqual } from "fast-equals";
+import { m } from "framer-motion";
+import { memo, useState } from "react";
+import { clamp } from "remeda";
+import { ActionButtonBar } from "../../../controls/action-button-bar/ActionButtonBar.js";
+import { OpenDetailsButton, NavigateToButton } from "../../../controls/action-buttons/ActionButtons.js";
+import { useDiagramState } from "../../../hooks/useDiagramState.js";
+import { toDomPrecision } from "../../utils.js";
+import { useFramerAnimateVariants, NodeVariants } from "../AnimateVariants.js";
+import { topRightBtnContainer, topLeftBtnContainer } from "../Node.css.js";
+import { ElementIcon } from "../shared/ElementIcon.js";
+import { CompoundToolbar } from "../shared/Toolbar.js";
+import { elementIcon, containerForFramer, container, indicator, compoundBody, transparent, varBorderTransparency, varOpacity, compoundTitle, withNavigation, title, nodeHandlerInCenter } from "./CompoundNode.css.js";
+const isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.data, next.data);
+const CompoundNodeMemo = /* @__PURE__ */ memo(({
+  id,
+  selected = false,
+  dragging = false,
+  data: {
+    isViewGroup,
+    element
+  },
+  width,
+  height
+}) => {
+  const modelRef = DiagramNode.modelRef(element);
+  const { depth, style, color } = element;
+  const isNotViewGroup = !isViewGroup;
+  const opacity = clamp((style.opacity ?? 100) / 100, {
+    min: 0,
+    max: 1
+  });
+  const MAX_TRANSPARENCY = 40;
+  const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
+    min: 0,
+    max: MAX_TRANSPARENCY
+  });
+  const {
+    viewId,
+    isEditable,
+    isDimmed,
+    isInteractive,
+    isNavigable,
+    renderIcon,
+    isInActiveOverlay,
+    enableElementDetails
+  } = useDiagramState((s) => {
+    var _a, _b;
+    return {
+      viewId: s.view.id,
+      isEditable: s.readonly !== true,
+      isDimmed: s.dimmed.has(id),
+      isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableElementDetails || !!s.onNavigateTo && !!element.navigateTo,
+      // If this is a view group, we don't want to show the navigate button
+      isNavigable: isNotViewGroup && !!s.onNavigateTo && !!element.navigateTo,
+      renderIcon: s.renderIcon,
+      isInActiveOverlay: (((_a = s.activeOverlay) == null ? void 0 : _a.elementDetails) ?? ((_b = s.activeOverlay) == null ? void 0 : _b.relationshipsOf)) === id,
+      enableElementDetails: isNotViewGroup && s.enableElementDetails
+    };
+  });
+  const w = toDomPrecision(width ?? element.width);
+  const h = toDomPrecision(height ?? element.height);
+  let animateVariant;
+  switch (true) {
+    case isInActiveOverlay:
+      animateVariant = "idle";
+      break;
+    case (dragging && selected):
+      animateVariant = "selected";
+      break;
+    case dragging:
+      animateVariant = "idle";
+      break;
+    case isDimmed:
+      animateVariant = "dimmed";
+      break;
+    case selected:
+      animateVariant = "selected";
+      break;
+    default:
+      animateVariant = "idle";
+  }
+  const [animateVariants, animateHandlers] = useFramerAnimateVariants();
+  if (!dragging && !isInActiveOverlay) {
+    animateVariant = animateVariants ?? animateVariant;
+  }
+  const isHovered = Array.isArray(animateVariant) && animateVariant.includes("hovered");
+  const _isToolbarVisible = isNotViewGroup && (selected && !dragging || isHovered);
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300);
+  const nodeVariants = NodeVariants(w, h, {
+    selectedScaleBy: 0,
+    hoveredScaleBy: 0,
+    tapScaleBy: -10
+  });
+  const [previewColor, setPreviewColor] = useState(null);
+  const elementIcon$1 = ElementIcon({
+    element,
+    viewId,
+    className: elementIcon,
+    renderIcon
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isEditable && /* @__PURE__ */ jsx(
+      CompoundToolbar,
+      {
+        isVisible: isToolbarVisible,
+        element,
+        align: "start",
+        onColorPreview: setPreviewColor
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: m.div,
+        variants: nodeVariants,
+        layoutId: `${viewId}:element:${id}`,
+        className: containerForFramer,
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: m.div,
+            className: clsx(
+              container,
+              "likec4-compound-node",
+              opacity < 1 && "likec4-compound-transparent"
+            ),
+            initial: false,
+            variants: nodeVariants,
+            animate: animateVariant,
+            ...isInteractive && animateHandlers,
+            mod: {
+              "animate-target": "",
+              "compound-depth": depth,
+              "likec4-color": previewColor ?? color
+            },
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ jsx("svg", { className: indicator, children: /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: 0,
+                  y: 0,
+                  width: "100%",
+                  height: "100%",
+                  rx: 6
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: clsx(
+                    compoundBody,
+                    opacity < 1 && transparent,
+                    "likec4-compound"
+                  ),
+                  style: {
+                    ...opacity < 1 && {
+                      ...assignInlineVars({
+                        [varBorderTransparency]: `${borderTransparency}%`,
+                        [varOpacity]: opacity.toFixed(2)
+                      }),
+                      ...style.border === "none" ? {
+                        borderColor: "transparent"
+                      } : {
+                        borderStyle: style.border ?? "dashed"
+                      }
+                    }
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      className: clsx(
+                        compoundTitle,
+                        isNavigable && withNavigation,
+                        "likec4-compound-title"
+                      ),
+                      children: [
+                        elementIcon$1,
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            component: m.div,
+                            layoutId: `${viewId}:element:title:${id}`,
+                            className: title,
+                            children: element.title
+                          },
+                          `${viewId}:element:title:${id}`
+                        ),
+                        enableElementDetails && !!modelRef && /* @__PURE__ */ jsx(Box, { className: clsx(topRightBtnContainer), children: /* @__PURE__ */ jsx(OpenDetailsButton, { fqn: modelRef, ...isInteractive && animateHandlers }) })
+                      ]
+                    }
+                  )
+                }
+              ),
+              isNavigable && /* @__PURE__ */ jsx(Box, { className: clsx(topLeftBtnContainer), children: /* @__PURE__ */ jsx(ActionButtonBar, { shiftX: "left", children: /* @__PURE__ */ jsx(NavigateToButton, { xynodeId: id, ...isInteractive && animateHandlers }) }) })
+            ]
+          }
+        )
+      },
+      `${viewId}:element:${id}`
+    ),
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: nodeHandlerInCenter }),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Top, className: nodeHandlerInCenter })
+  ] });
+}, isEqualProps);
+export {
+  CompoundNodeMemo
+};

package/dist/xyflow/nodes/compound/index.d.ts

@@ -0,0 +1 @@
+export { CompoundNodeMemo as CompoundNode } from './CompoundNode';

package/dist/xyflow/nodes/element/ElementLink.css.d.ts

@@ -0,0 +1,3 @@
+export declare const elementLink: string;
+export declare const trigger: string;
+export declare const linkButton: string;

package/dist/xyflow/nodes/element/ElementLink.d.ts

@@ -0,0 +1,6 @@
+import { DiagramFlowTypes } from '../../types';
+type ElementLinkProps = {
+    element: DiagramFlowTypes.Node['data']['element'];
+};
+export declare function ElementLink({ element }: ElementLinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/xyflow/nodes/element/ElementNode.d.ts

@@ -0,0 +1,6 @@
+import { NodeProps } from '@xyflow/react';
+import { DiagramFlowTypes } from '../../types';
+import { NamedExoticComponent } from 'react';
+type ElementNodeProps = NodeProps<DiagramFlowTypes.ElementNode>;
+export declare const ElementNodeMemo: NamedExoticComponent<ElementNodeProps>;
+export {};

package/dist/xyflow/nodes/element/ElementNode.js

@@ -0,0 +1,190 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { DiagramNode } from "@likec4/core";
+import { Box } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import { Handle, Position } from "@xyflow/react";
+import clsx from "clsx";
+import { deepEqual } from "fast-equals";
+import { m } from "framer-motion";
+import { memo, useState } from "react";
+import { isTruthy } from "remeda";
+import { ActionButtonBar } from "../../../controls/action-button-bar/ActionButtonBar.js";
+import { NavigateToButton, BrowseRelationshipsButton, OpenDetailsButton } from "../../../controls/action-buttons/ActionButtons.js";
+import { Text } from "../../../controls/Text.js";
+import { useDiagramState } from "../../../hooks/useDiagramState.js";
+import { toDomPrecision } from "../../utils.js";
+import { useFramerAnimateVariants, NodeVariants } from "../AnimateVariants.js";
+import { bottomBtnContainer, topRightBtnContainer } from "../Node.css.js";
+import { ElementIcon } from "../shared/ElementIcon.js";
+import { ElementToolbar } from "../shared/Toolbar.js";
+import { container, containerAnimated, shapeSvg, indicator, elementDataContainer, hasIcon, elementTextData, title, technology, description, handleCenter, elementIcon } from "./element.css.js";
+import { SelectedIndicator, ElementShapeSvg } from "./ElementShapeSvg.js";
+const isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.data, next.data);
+const ElementNodeMemo = memo(function ElementNode({
+  id,
+  data: {
+    element
+  },
+  dragging,
+  selected = false,
+  width,
+  height
+}) {
+  const modelRef = DiagramNode.modelRef(element);
+  const {
+    viewId,
+    isEditable,
+    isDimmed,
+    isNavigable,
+    isInteractive,
+    enableElementDetails,
+    enableRelationshipBrowser,
+    isInActiveOverlay,
+    renderIcon
+  } = useDiagramState((s) => {
+    var _a, _b;
+    return {
+      viewId: s.view.id,
+      isEditable: s.readonly !== true,
+      isDimmed: s.dimmed.has(id),
+      isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableElementDetails || s.enableRelationshipBrowser || !!s.onNavigateTo && !!element.navigateTo,
+      isNavigable: !!s.onNavigateTo && !!element.navigateTo,
+      enableElementDetails: s.enableElementDetails,
+      enableRelationshipBrowser: s.enableRelationshipBrowser,
+      openOverlay: s.openOverlay,
+      isInActiveOverlay: (((_a = s.activeOverlay) == null ? void 0 : _a.elementDetails) ?? ((_b = s.activeOverlay) == null ? void 0 : _b.relationshipsOf)) === id,
+      renderIcon: s.renderIcon
+    };
+  });
+  const w = toDomPrecision(width ?? element.width);
+  const h = toDomPrecision(height ?? element.height);
+  let animateVariant;
+  switch (true) {
+    case isInActiveOverlay:
+      animateVariant = "idle";
+      break;
+    case (dragging && selected):
+      animateVariant = "selected";
+      break;
+    case dragging:
+      animateVariant = "idle";
+      break;
+    case isDimmed:
+      animateVariant = "dimmed";
+      break;
+    case selected:
+      animateVariant = "selected";
+      break;
+    default:
+      animateVariant = "idle";
+  }
+  const [animateVariants, animateHandlers] = useFramerAnimateVariants();
+  if (!dragging && !isInActiveOverlay) {
+    animateVariant = animateVariants ?? animateVariant;
+  }
+  const isHovered = !!animateVariants && animateVariants.includes("hovered");
+  const _isToolbarVisible = selected && !dragging || isHovered;
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300);
+  const elementIcon$1 = ElementIcon({
+    element,
+    viewId,
+    className: elementIcon,
+    renderIcon
+  });
+  const [previewColor, setPreviewColor] = useState(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: m.div,
+        className: clsx([
+          container,
+          animateVariant !== "idle" && containerAnimated,
+          "likec4-element-node"
+        ]),
+        layoutId: `${viewId}:element:${id}`,
+        "data-hovered": !dragging && isHovered,
+        "data-likec4-color": previewColor ?? element.color,
+        "data-likec4-shape": element.shape,
+        "data-animate-target": "",
+        initial: false,
+        variants: NodeVariants(w, h),
+        animate: animateVariant,
+        ...isInteractive && animateHandlers,
+        tabIndex: -1,
+        children: [
+          isEditable && /* @__PURE__ */ jsx(
+            ElementToolbar,
+            {
+              element,
+              isVisible: isToolbarVisible,
+              align: "start",
+              onColorPreview: setPreviewColor
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: clsx(shapeSvg),
+              viewBox: `0 0 ${w} ${h}`,
+              children: [
+                /* @__PURE__ */ jsx("g", { className: indicator, children: /* @__PURE__ */ jsx(SelectedIndicator, { shape: element.shape, w, h }) }),
+                /* @__PURE__ */ jsx(ElementShapeSvg, { shape: element.shape, w, h })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              className: clsx(
+                elementDataContainer,
+                isTruthy(elementIcon$1) && hasIcon,
+                "likec4-element"
+              ),
+              children: [
+                elementIcon$1,
+                /* @__PURE__ */ jsxs(Box, { className: clsx(elementTextData, "likec4-element-main-props"), children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      component: m.div,
+                      layoutId: `${viewId}:element:title:${id}`,
+                      className: clsx(title, "likec4-element-title"),
+                      children: element.title
+                    },
+                    `${viewId}:element:title:${id}`
+                  ),
+                  element.technology && /* @__PURE__ */ jsx(Text, { className: clsx(technology, "likec4-element-technology"), children: element.technology }),
+                  element.description && /* @__PURE__ */ jsx(Text, { className: clsx(description, "likec4-element-description"), lineClamp: 5, children: element.description })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { className: clsx(bottomBtnContainer), children: /* @__PURE__ */ jsxs(ActionButtonBar, { shiftY: "bottom", children: [
+            isNavigable && /* @__PURE__ */ jsx(
+              NavigateToButton,
+              {
+                xynodeId: id,
+                ...isInteractive && animateHandlers
+              }
+            ),
+            enableRelationshipBrowser && !!modelRef && /* @__PURE__ */ jsx(
+              BrowseRelationshipsButton,
+              {
+                fqn: modelRef,
+                ...isInteractive && animateHandlers
+              }
+            )
+          ] }) }),
+          enableElementDetails && !!modelRef && /* @__PURE__ */ jsx(Box, { className: clsx(topRightBtnContainer), children: /* @__PURE__ */ jsx(OpenDetailsButton, { fqn: modelRef, ...isInteractive && animateHandlers }) })
+        ]
+      },
+      `${viewId}:element:${id}`
+    ),
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: handleCenter }),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Top, className: handleCenter })
+  ] });
+}, isEqualProps);
+export {
+  ElementNodeMemo
+};

package/dist/xyflow/nodes/element/ElementShapeSvg.d.ts

@@ -0,0 +1,17 @@
+import { ElementShape } from '@likec4/core';
+export declare function cylinderSVGPath(diameter: number, height: number, tilt?: number): {
+    path: string;
+    ry: number;
+    rx: number;
+};
+type ElementShapeSvgProps = {
+    shape: ElementShape;
+    w: number;
+    h: number;
+};
+export declare function ElementShapeSvg({ shape, w, h }: ElementShapeSvgProps): 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 }: ElementShapeSvgProps): import("react/jsx-runtime").JSX.Element;
+export {};