@likec4/diagram 1.19.2 → 1.20.0

package/dist/xyflow/nodes/AnimateVariants.js

@@ -1,123 +0,0 @@
-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

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

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

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,27 +0,0 @@
-/* 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

@@ -1,6 +0,0 @@
-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

@@ -1,216 +0,0 @@
-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 : 1e3);
-  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

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

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

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

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

@@ -1,6 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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 : 1e3);
-  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

@@ -1,17 +0,0 @@
-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 {};

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

@@ -1,18 +0,0 @@
-export declare const stokeFillMix: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const container: string;
-export declare const handleCenter: string;
-export declare const containerAnimated: string;
-export declare const indicator: string;
-export declare const fillElementFill: string;
-export declare const fillElementStroke: string;
-export declare const fillMixStroke: string;
-export declare const hasIcon: string;
-export declare const title: string;
-export declare const description: string;
-export declare const technology: string;
-export declare const elementDataContainer: string;
-export declare const elementTextData: string;
-export declare const elementIcon: string;
-export declare const shapeSvgMultiple: string;
-export declare const shapeSvg: string;
-export declare const bottomButtonsContainer: string;