@likec4/diagram 1.36.1 → 1.38.0

package/dist/likec4diagram/custom/edges/NotePopover.css.js

@@ -1,21 +0,0 @@
-import { css } from '@likec4/styles/css';
-
-const edgeNoteCloseButton = css({
-  position: "absolute",
-  top: "[1px]",
-  right: "[1px]",
-  zIndex: 9
-});
-const edgeNoteText = css({
-  userSelect: "all",
-  textAlign: "left",
-  whiteSpaceCollapse: "preserve-breaks",
-  textWrap: "pretty",
-  lineHeight: 1.25,
-  "--text-fz": "{fontSizes.sm}",
-  md: {
-    "--text-fz": "{fontSizes.md}"
-  }
-});
-
-export { edgeNoteCloseButton, edgeNoteText };

package/dist/likec4diagram/custom/edges/NotePopover.js

@@ -1,91 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Popover, PopoverTarget, PopoverDropdown, Stack, ScrollAreaAutosize, Text, CloseButton, Group, Button } from '@mantine/core';
-import { useDebouncedEffect } from '@react-hookz/web';
-import { useState } from 'react';
-import { isTruthy, isNonNull } from 'remeda';
-import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
-import { edgeNoteText, edgeNoteCloseButton } from './NotePopover.css.js';
-import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import { stopPropagation } from '../../../utils/xyflow.js';
-
-const NotePopover = ({ notes, children }) => {
-  const {
-    isActive,
-    isParallel,
-    hasNext,
-    hasPrevious
-  } = useDiagramContext((s) => ({
-    isActive: isNonNull(s.activeWalkthrough),
-    isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
-    hasNext: s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) < s.xyedges.length - 1,
-    hasPrevious: s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) > 0
-  }));
-  const diagram = useDiagram();
-  const [isOpened, setIsOpened] = useState(false);
-  const portalProps = useMantinePortalProps();
-  useDebouncedEffect(
-    () => {
-      setIsOpened(true);
-    },
-    [],
-    300
-  );
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      shadow: "xs",
-      offset: 16,
-      opened: isOpened,
-      closeOnClickOutside: false,
-      ...portalProps,
-      children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children }),
-        /* @__PURE__ */ jsxs(
-          PopoverDropdown,
-          {
-            component: Stack,
-            p: "xs",
-            onPointerDownCapture: stopPropagation,
-            onClick: stopPropagation,
-            onDoubleClick: stopPropagation,
-            children: [
-              /* @__PURE__ */ jsx(ScrollAreaAutosize, { miw: 180, maw: 450, mah: 350, type: "scroll", mx: "auto", mt: 2, children: /* @__PURE__ */ jsx(Text, { component: "div", className: edgeNoteText, p: 4, children: notes }) }),
-              /* @__PURE__ */ jsx(
-                CloseButton,
-                {
-                  size: "xs",
-                  className: edgeNoteCloseButton,
-                  onClick: () => setIsOpened(false)
-                }
-              ),
-              (hasPrevious || hasNext) && /* @__PURE__ */ jsxs(Group, { gap: 0, justify: hasPrevious ? "flex-start" : "flex-end", children: [
-                hasPrevious && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "subtle",
-                    radius: "xs",
-                    size: "compact-xs",
-                    onClick: () => diagram.walkthroughStep("previous"),
-                    children: "back"
-                  }
-                ),
-                hasNext && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "subtle",
-                    radius: "xs",
-                    size: "compact-xs",
-                    onClick: () => diagram.walkthroughStep("next"),
-                    children: "next"
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-export { NotePopover };

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.d.ts

@@ -1,5 +0,0 @@
-export declare const menuDropdown: string;
-export declare const menuItemRelationship: string;
-export declare const endpoint: string;
-export declare const title: string;
-export declare const arrowFromTo: string;

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.d.ts

@@ -1,13 +0,0 @@
-import { EdgeId } from '@likec4/core';
-import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes, MemoExoticComponent } from 'react';
-import { TooltipProps } from '@mantine/core';
-export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
-    component?: any;
-    renderRoot?: (props: Record<string, any>) => React.ReactNode;
-}>;
-export declare const RelationshipsDropdownMenu: MemoExoticComponent<({ edgeId, source, target, disabled, children, }: PropsWithChildren<{
-    edgeId: EdgeId;
-    source: string;
-    target: string;
-    disabled?: boolean | undefined;
-}>) => import("react/jsx-runtime").JSX.Element>;

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -1,215 +0,0 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { nameFromFqn } from '@likec4/core';
-import { cx } from '@likec4/styles/css';
-import { Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, MenuItem, Stack, Group, Text, TooltipGroup, Space, Tooltip as Tooltip$1 } from '@mantine/core';
-import { memo, useCallback, Fragment as Fragment$1, forwardRef } from 'react';
-import { pipe, map, filter, isTruthy, partition } from 'remeda';
-import { Link } from '../../../components/Link.js';
-import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
-import { findDiagramNode, findDiagramEdge } from '../../../state/utils.js';
-import { menuDropdown, endpoint, title, menuItemRelationship } from './RelationshipsDropdownMenu.css.js';
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
-import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconInfoCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import { useEnabledFeatures, IfEnabled } from '../../../context/DiagramFeatures.js';
-import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
-import IconArrowRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-
-const stopPropagation = (e) => e.stopPropagation();
-const Tooltip = Tooltip$1.withProps({
-  color: "gray",
-  fz: "xs",
-  openDelay: 300,
-  closeDelay: 150,
-  label: "",
-  children: null,
-  offset: 8,
-  withinPortal: false
-});
-const RelationshipsDropdownMenu = memo(({
-  edgeId,
-  source,
-  target,
-  disabled = false,
-  children
-}) => {
-  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(
-    (ctx) => ({
-      diagramEdge: findDiagramEdge(ctx, edgeId),
-      sourceNode: findDiagramNode(ctx, source),
-      targetNode: findDiagramNode(ctx, target)
-    }),
-    void 0,
-    [edgeId, source, target]
-  );
-  const likec4model = useLikeC4Model();
-  const diagram = useDiagram();
-  const portalProps = useMantinePortalProps();
-  const onClickOpenOverlay = useCallback((e) => {
-    e.stopPropagation();
-    diagram.openRelationshipDetails(edgeId);
-  }, [edgeId]);
-  if (!diagramEdge || !sourceNode || !targetNode) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  const [direct, nested] = pipe(
-    diagramEdge.relations,
-    map((id) => {
-      try {
-        return likec4model.findRelationship(id);
-      } catch (e) {
-        console.error(
-          `View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`,
-          e
-        );
-        return null;
-      }
-    }),
-    filter(isTruthy),
-    partition((r) => r.source.id === sourceNode.id && r.target.id === targetNode.id)
-  );
-  const renderRelationship = (relationship, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    index > 0 && /* @__PURE__ */ jsx(MenuDivider, { opacity: 0.65 }),
-    /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        onClick: onClickOpenOverlay,
-        component: Relationship,
-        relationship,
-        sourceNode,
-        targetNode,
-        edge: diagramEdge
-      }
-    )
-  ] }, relationship.id);
-  if (direct.length + nested.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsxs(
-    Menu,
-    {
-      trigger: "click-hover",
-      openDelay: 300,
-      closeDelay: 450,
-      closeOnClickOutside: true,
-      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      closeOnEscape: true,
-      keepMounted: false,
-      closeOnItemClick: false,
-      disabled,
-      position: "bottom-start",
-      middlewares: { size: { padding: 8 } },
-      ...portalProps,
-      children: [
-        /* @__PURE__ */ jsx(MenuTarget, { children }),
-        /* @__PURE__ */ jsxs(
-          MenuDropdown,
-          {
-            className: menuDropdown,
-            onPointerDownCapture: stopPropagation,
-            onPointerDown: stopPropagation,
-            onClick: stopPropagation,
-            children: [
-              direct.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(MenuLabel, { children: "direct relationships" }),
-                direct.map(renderRelationship)
-              ] }),
-              nested.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                direct.length > 0 && /* @__PURE__ */ jsx(MenuDivider, {}),
-                /* @__PURE__ */ jsx(MenuLabel, { children: "resolved from nested" }),
-                nested.map(renderRelationship)
-              ] }),
-              /* @__PURE__ */ jsx(Box, { pos: "absolute", top: 5, right: 6, children: /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  size: 24,
-                  variant: "subtle",
-                  onClick: onClickOpenOverlay,
-                  children: /* @__PURE__ */ jsx(IconInfoCircle, { style: { width: "70%" } })
-                }
-              ) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-});
-const Relationship = forwardRef(({
-  className,
-  relationship: r,
-  edge,
-  sourceNode,
-  targetNode,
-  ...props
-}, ref) => {
-  const diagram = useDiagram();
-  const { enableNavigateTo } = useEnabledFeatures();
-  const { onOpenSource } = useDiagramEventHandlers();
-  const viewId = diagram.currentView.id;
-  const sourceId = getShortId(r, r.source.id, sourceNode);
-  const targetId = getShortId(r, r.target.id, targetNode);
-  const navigateTo = enableNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : void 0;
-  const links = r.links;
-  return /* @__PURE__ */ jsxs(Stack, { ref, className: cx(menuItemRelationship, className), ...props, children: [
-    /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
-      /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": sourceNode.color, className: endpoint, children: sourceId }),
-      /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: "11px", opacity: 0.65 }),
-      /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": targetNode.color, className: endpoint, children: targetId }),
-      (navigateTo || !!onOpenSource) && /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 100, children: [
-        /* @__PURE__ */ jsx(Space, { w: "xs" }),
-        navigateTo && /* @__PURE__ */ jsx(Tooltip, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            className: cx("nodrag nopan"),
-            size: "sm",
-            radius: "sm",
-            variant: "default",
-            onPointerDownCapture: stopPropagation,
-            onClick: (event) => {
-              event.stopPropagation();
-              diagram.navigateTo(navigateTo);
-            },
-            role: "button",
-            children: /* @__PURE__ */ jsx(IconZoomScan, { size: "80%", stroke: 2 })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(IfEnabled, { feature: "Vscode", children: /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            className: cx("nodrag nopan"),
-            size: "sm",
-            radius: "sm",
-            variant: "default",
-            onPointerDownCapture: stopPropagation,
-            onClick: (event) => {
-              event.stopPropagation();
-              diagram.openSource({ relation: r.id });
-            },
-            role: "button",
-            children: /* @__PURE__ */ jsx(IconFileSymlink, { size: "80%", stroke: 2 })
-          }
-        ) }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { className: title, children: r.title || "untitled" }),
-    r.description.nonEmpty && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: r.description.text }),
-    links.length > 0 && /* @__PURE__ */ jsx(
-      Stack,
-      {
-        gap: 3,
-        justify: "stretch",
-        align: "stretch",
-        children: links.map((link) => /* @__PURE__ */ jsx(Link, { size: "sm", value: link }, link.url))
-      }
-    )
-  ] });
-});
-function getShortId(r, actualEndpointId, diagramNode) {
-  const diagramNodeId = r.isDeploymentRelation() ? diagramNode.id : diagramNode.modelRef || "";
-  return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length);
-}
-
-export { RelationshipsDropdownMenu, Tooltip };

package/dist/likec4diagram/custom/index.d.ts

@@ -1,62 +0,0 @@
-import { Types } from '../types';
-import { MemoExoticComponent, FunctionComponent, CSSProperties, ReactNode } from 'react';
-import { NodeProps } from '../../base';
-import { Position, XYPosition } from '@xyflow/system';
-import { EdgeData, Dimmed } from '../../base/types.Base';
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId, MarkdownOrString } from '@likec4/core';
-export declare const BuiltinNodes: {
-    element: MemoExoticComponent<(props: NodeProps<Types.ElementNodeData, "element">) => import("react/jsx-runtime").JSX.Element>;
-    deployment: MemoExoticComponent<(props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => import("react/jsx-runtime").JSX.Element>;
-    'compound-element': MemoExoticComponent<(props: NodeProps<Types.CompoundElementNodeData, "compound-element">) => import("react/jsx-runtime").JSX.Element>;
-    'compound-deployment': MemoExoticComponent<(props: NodeProps<Types.CompoundDeploymentNodeData, "compound-deployment">) => import("react/jsx-runtime").JSX.Element>;
-    'view-group': MemoExoticComponent<(props: NodeProps<Types.ViewGroupNodeData, "view-group">) => import("react/jsx-runtime").JSX.Element>;
-};
-export declare const edgeTypes: {
-    relationship: FunctionComponent<{
-        id: string;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        style?: CSSProperties;
-        animated?: boolean;
-        source: string;
-        target: string;
-        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: EdgeData & {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: Dimmed;
-            id: EdgeId;
-            label: string | null;
-            points: NonEmptyArray<Point>;
-            color: Color | undefined;
-            head: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            technology: string | undefined;
-            tail: RelationshipArrowType | undefined;
-            labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | null | undefined;
-            notes: MarkdownOrString | undefined;
-            labelXY: XYPosition | null;
-            controlPoints: XYPosition[] | undefined | null;
-        };
-    }>;
-};

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

@@ -1,10 +0,0 @@
-import { NodeProps } from '../../../base';
-import { RelationshipDetailsTypes } from '../_types';
-import { MemoExoticComponent } from 'react';
-export declare const ElementNode: MemoExoticComponent<(props: NodeProps<RelationshipDetailsTypes.ElementNodeData, string>) => import("react/jsx-runtime").JSX.Element>;
-export declare const CompoundNode: MemoExoticComponent<(props: NodeProps<RelationshipDetailsTypes.CompoundNodeData, string>) => import("react/jsx-runtime").JSX.Element>;
-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'>>;
-export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/base/primitives/compound/CompoundNodeContainer.css.ts

@@ -1,138 +0,0 @@
-import { css, sva } from '@likec4/styles/css'
-
-export const borderWidth = {
-  var: '--_border-width',
-  ref: 'var(--_border-width, 2px)',
-} as const
-
-export const borderRadius = {
-  var: '--_border-radius',
-  ref: 'var(--_border-radius, 4px)',
-} as const
-
-export const compoundOpacity = {
-  var: '--_compound-opacity',
-  ref: 'var(--_compound-opacity, 1)',
-} as const
-
-export const borderOpacityPercent = {
-  var: '--_border-opacity-percent',
-  ref: 'var(--_border-opacity-percent, 100%)',
-} as const
-
-const root = css.raw({
-  position: 'relative',
-  width: '100%',
-  height: '100%',
-  padding: '0',
-  margin: '0',
-  border: 'transparent',
-  pointerEvents: 'none',
-  _before: {
-    borderRadius: borderRadius.ref,
-    content: '" "',
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    width: '100%',
-    height: '100%',
-    border: 'transparent',
-    background: 'var(--likec4-palette-fill)',
-    backgroundClip: 'padding-box',
-    transitionDelay: '.075ms',
-  },
-  _noReduceGraphics: {
-    _before: {
-      transition: `all {durations.slow} {easings.inOut}`,
-    },
-    '&[data-likec4-hovered=\'true\']': {
-      _before: {
-        transitionDelay: '.2s',
-        transitionTimingFunction: 'in',
-      },
-    },
-  },
-  '&:is([data-compound-transparent])': {
-    _before: {
-      opacity: compoundOpacity.ref,
-      borderWidth: `calc(${borderWidth.ref} - 1px)`,
-    },
-  },
-})
-
-const compoundBorder = css.raw({
-  borderRadius: borderRadius.ref,
-  padding: '0',
-  margin: '0',
-  transition: `all 250ms {easings.inOut}`,
-  cursor: 'default',
-  position: 'absolute',
-  top: '0',
-  left: '0',
-  width: '100%',
-  height: '100%',
-  pointerEvents: 'none',
-  background: 'transparent',
-  borderStyle: 'dashed',
-  borderWidth: `[${borderWidth.ref}]`,
-  borderColor: `[color-mix(in srgb, var(--likec4-palette-stroke) ${borderOpacityPercent.ref}, transparent)]`,
-})
-
-const indicatorSvg = css.raw({
-  position: 'absolute',
-  top: '0',
-  left: '0',
-  width: '100%',
-  height: '100%',
-  pointerEvents: 'none',
-  overflow: 'visible',
-  visibility: 'hidden',
-  _whenFocused: {
-    visibility: 'visible',
-  },
-  _whenSelected: {
-    visibility: 'visible',
-  },
-  _whenPanning: {
-    display: 'none',
-  },
-})
-
-const indicatorRect = css.raw({
-  stroke: `[color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))]`,
-  strokeWidth: '4',
-  fill: '[none]',
-  animationStyle: 'indicator',
-  _light: {
-    stroke: `[color-mix(in srgb, var(--likec4-palette-stroke) 80%, var(--likec4-palette-hiContrast))]`,
-  },
-})
-
-export const compound = sva({
-  slots: ['root', 'compoundBorder', 'indicatorSvg', 'indicatorRect'],
-  className: 'compound-container',
-  base: {
-    root,
-    compoundBorder,
-    indicatorSvg,
-    indicatorRect,
-  },
-  variants: {
-    isTransparent: {
-      false: {
-        root: {
-          _before: {
-            boxShadow: {
-              _noReduceGraphics: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
-              _whenSelected: 'none',
-              _whenPanning: 'none !important',
-            },
-          },
-        },
-      },
-      true: {
-        root: {},
-      },
-    },
-  },
-})

package/src/base/primitives/edge/EdgeLabel.css.ts

@@ -1,64 +0,0 @@
-import { css, sva } from '@likec4/styles/css'
-
-const labelBorderRadius = '4px'
-
-export const edgeNoteCloseButton = css({
-  position: 'absolute',
-  top: '1',
-  right: '1',
-})
-
-export const edgeNoteText = css({
-  userSelect: 'all',
-  textAlign: 'left',
-  whiteSpaceCollapse: 'preserve-breaks',
-  textWrap: 'pretty',
-  lineHeight: '1.25',
-  '--text-fz': '{fontSizes.sm}',
-  md: {
-    '--text-fz': '{fontSizes.md}',
-  },
-})
-
-export const translate = {
-  var: '--edge-translate',
-  ref: `var(--edge-translate)`,
-} as const
-
-export const edgeLabelContainer = css({
-  top: '0',
-  left: '0',
-  position: 'absolute',
-  pointerEvents: 'all',
-  cursor: 'pointer',
-  width: 'auto',
-  height: 'auto',
-  background: '[var(--xy-edge-label-background-color)]',
-  color: '[var(--xy-edge-label-color)]',
-  border: '0px solid transparent',
-
-  borderRadius: labelBorderRadius,
-
-  transform: `${translate.ref}`,
-  transition: 'fast',
-
-  '&:is([data-likec4-hovered=\'true\'])': {
-    transition: `all 190ms {easings.inOut}`,
-    transform: `var(--edge-translate, translate(0px, 0px)) scale(1.12)`,
-    transitionDelay: '100ms',
-  },
-
-  _noReduceGraphics: {
-    mixBlendMode: {
-      _dark: 'plus-lighter',
-      _light: 'screen',
-    },
-  },
-
-  _smallZoom: {
-    display: 'none',
-  },
-  _reduceGraphicsOnPan: {
-    display: 'none',
-  },
-})