@likec4/diagram 1.26.2 → 1.27.1

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

@@ -1,9 +1,44 @@
-/* empty css                         */
-var controlPointsContainer = "_1fw3wl00";
-var controlPoint = "_1fw3wl01";
-var controlDragging = "_1fw3wl02";
-export {
-  controlDragging,
-  controlPoint,
-  controlPointsContainer
-};
+import { css } from '@likec4/styles/css';
+
+const isSelected = ".react-flow__edge.selected";
+const controlPointsContainer = css({
+  overflow: "visible",
+  position: "absolute",
+  pointerEvents: "none",
+  top: 0,
+  left: 0,
+  mixBlendMode: "normal"
+});
+const controlPoint = css({
+  fill: `likec4.relation.stroke`,
+  stroke: `likec4.relation.stroke`,
+  fillOpacity: 0.75,
+  strokeWidth: 1,
+  cursor: "grab",
+  pointerEvents: "auto",
+  visibility: "hidden",
+  _hover: {
+    fillOpacity: 1,
+    stroke: "mantine.colors.primary.filledHover",
+    strokeWidth: 10,
+    transition: "stroke 100ms ease-out, stroke-width 100ms ease-out"
+  },
+  [`:where(${isSelected}, [data-likec4-hovered='true']) &`]: {
+    visibility: "visible",
+    transition: "fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out",
+    transitionDelay: "50ms",
+    fillOpacity: 1,
+    strokeWidth: 5
+  }
+});
+const controlDragging = css({
+  cursor: "grabbing",
+  "& *": {
+    cursor: "grabbing !important"
+  },
+  "& .react-flow__edge-interaction": {
+    cursor: "grabbing !important"
+  }
+});
+
+export { controlDragging, controlPoint, controlPointsContainer };

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

@@ -1,6 +1,7 @@
-import "@xyflow/react";
-import { getNodeDimensions } from "@xyflow/system";
-import { VectorImpl, vector } from "../../../utils/vector.js";
+import '@xyflow/react';
+import { getNodeDimensions } from '@xyflow/system';
+import { VectorImpl, vector } from '../../../utils/vector.js';
+
 function getNodeCenter(node) {
   const { width, height } = getNodeDimensions(node);
   const { x, y } = node.internals.positionAbsolute;
@@ -18,7 +19,5 @@ function getNodeIntersectionFromCenterToPoint(intersectionNode, target, nodeMarg
   const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
   return vector(v).mul(scale).add(nodeCenter);
 }
-export {
-  getNodeCenter,
-  getNodeIntersectionFromCenterToPoint
-};
+
+export { getNodeCenter, getNodeIntersectionFromCenterToPoint };

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

@@ -2,7 +2,7 @@ import { Types } from '../types';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { NodeProps } from '../../base';
 import { Position, XYPosition } from '@xyflow/system';
-import { EdgeId, NonEmptyArray, Point, Color, ViewId, RelationshipArrowType, RelationshipLineType, BBox } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
 export declare const nodeTypes: {
     element: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
     deployment: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;
@@ -12,14 +12,14 @@ export declare const nodeTypes: {
 };
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{
-        source: string;
-        target: string;
-        style?: CSSProperties;
         id: string;
         selected?: boolean;
-        animated?: boolean;
-        deletable?: boolean;
         selectable?: boolean;
+        deletable?: boolean;
+        style?: CSSProperties;
+        source: string;
+        target: string;
+        animated?: boolean;
         sourceX: number;
         sourceY: number;
         targetX: number;
@@ -48,13 +48,13 @@ export declare const edgeTypes: {
             points: NonEmptyArray<Point>;
             technology: string | undefined;
             color: Color | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
             dir: "forward" | "back" | "both" | undefined;
+            line: RelationshipLineType | undefined;
             head: RelationshipArrowType | undefined;
             tail: RelationshipArrowType | undefined;
-            line: RelationshipLineType | undefined;
+            navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
-            labelBBox: BBox | null | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
             hovered?: boolean;

package/dist/likec4diagram/custom/index.js

@@ -1,5 +1,6 @@
-import { RelationshipEdge } from "./edges/RelationshipEdge.js";
-import { ViewGroupNode, CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode } from "./nodes/nodeTypes.js";
+import { RelationshipEdge } from './edges/RelationshipEdge.js';
+import { ViewGroupNode, CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode } from './nodes/nodeTypes.js';
+
 const nodeTypes = {
   element: ElementNode,
   deployment: DeploymentNode,
@@ -10,7 +11,5 @@ const nodeTypes = {
 const edgeTypes = {
   relationship: RelationshipEdge
 };
-export {
-  edgeTypes,
-  nodeTypes
-};
+
+export { edgeTypes, nodeTypes };

package/dist/likec4diagram/custom/nodes/CompoundActions.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
-import { CompoundActionButton } from "../../../base/primitives/compound/CompoundActionButton.js";
+import { jsx } from 'react/jsx-runtime';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { CompoundActionButton } from '../../../base/primitives/compound/CompoundActionButton.js';
+
 const CompoundActions = (props) => {
   const { enableNavigateTo } = useEnabledFeature("NavigateTo");
   const diagram = useDiagram();
@@ -20,6 +21,5 @@ const CompoundActions = (props) => {
   }
   return null;
 };
-export {
-  CompoundActions
-};
+
+export { CompoundActions };

package/dist/likec4diagram/custom/nodes/ElementActions.js

@@ -1,8 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import { IconZoomScan, IconTransform } from "@tabler/icons-react";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
-import { ElementActionButtons } from "../../../base/primitives/element/ElementActionButtons.js";
+import { jsx } from 'react/jsx-runtime';
+import { IconZoomScan, IconTransform } from '@tabler/icons-react';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
+
 const ElementActions = (props) => {
   const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "NavigateTo");
   const diagram = useDiagram();
@@ -63,7 +64,5 @@ const DeploymentElementActions = (props) => {
   }
   return /* @__PURE__ */ jsx(ElementActionButtons, { buttons, ...props });
 };
-export {
-  DeploymentElementActions,
-  ElementActions
-};
+
+export { DeploymentElementActions, ElementActions };

package/dist/likec4diagram/custom/nodes/nodeTypes.js

@@ -1,20 +1,21 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import "@likec4/core";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { CompoundActions } from "./CompoundActions.js";
-import { DeploymentElementActions, ElementActions } from "./ElementActions.js";
-import { CompoundDeploymentToolbar, CompoundElementToolbar } from "./toolbar/CompoundToolbar.js";
-import { DeploymentElementToolbar, ElementToolbar } from "./toolbar/ElementToolbar.js";
-import { customNode } from "../../../base/primitives/customNode.js";
-import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
-import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
-import { IfNotEnabled, IfEnabled, useEnabledFeature } from "../../../context/DiagramFeatures.js";
-import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
-import { CompoundDetailsButton } from "../../../base/primitives/compound/CompoundDetailsButton.js";
-import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
-import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
-import { ElementTitle } from "../../../base/primitives/element/ElementTitle.js";
-import { ElementDetailsButton } from "../../../base/primitives/element/ElementDetailsButton.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@likec4/core';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { CompoundActions } from './CompoundActions.js';
+import { DeploymentElementActions, ElementActions } from './ElementActions.js';
+import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar.js';
+import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar.js';
+import { customNode } from '../../../base/primitives/customNode.js';
+import { CompoundNodeContainer } from '../../../base/primitives/compound/CompoundNodeContainer.js';
+import { CompoundTitle } from '../../../base/primitives/compound/CompoundTitle.js';
+import { IfNotEnabled, IfEnabled, useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { DefaultHandles } from '../../../base/primitives/NodeHandles.js';
+import { CompoundDetailsButton } from '../../../base/primitives/compound/CompoundDetailsButton.js';
+import { ElementNodeContainer } from '../../../base/primitives/element/ElementNodeContainer.js';
+import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
+import { ElementTitle } from '../../../base/primitives/element/ElementTitle.js';
+import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.js';
+
 const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
   const { enableElementDetails } = useEnabledFeature("ElementDetails");
   const diagram = useDiagram();
@@ -31,7 +32,7 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
   );
 };
 const ElementNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
+  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple }),
   /* @__PURE__ */ jsx(ElementTitle, { ...props }),
   /* @__PURE__ */ jsx(ElementActions, { ...props }),
   /* @__PURE__ */ jsx(
@@ -45,7 +46,7 @@ const ElementNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContai
   /* @__PURE__ */ jsx(DefaultHandles, {})
 ] }));
 const DeploymentNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
+  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple }),
   /* @__PURE__ */ jsx(ElementTitle, { ...props }),
   /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
   !!props.data.modelFqn && /* @__PURE__ */ jsx(
@@ -87,10 +88,5 @@ const ViewGroupNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeCon
   /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
   /* @__PURE__ */ jsx(DefaultHandles, {})
 ] }));
-export {
-  CompoundDeploymentNode,
-  CompoundElementNode,
-  DeploymentNode,
-  ElementNode,
-  ViewGroupNode
-};
+
+export { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, ViewGroupNode };

package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js

@@ -1,9 +1,10 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { defaultTheme } from "@likec4/core";
-import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Flex, Tooltip, CheckIcon, rem, Slider } from "@mantine/core";
-import { useUpdateEffect } from "@react-hookz/web";
-import { useState } from "react";
-import { themedColors, colors } from "./_shared.js";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { defaultTheme } from '@likec4/core';
+import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Flex, Tooltip, CheckIcon, rem, Slider } from '@mantine/core';
+import { useUpdateEffect } from '@react-hookz/web';
+import { useState } from 'react';
+import { themedColors, colors } from './_shared.js';
+
 function ColorButton({
   elementColor,
   elementOpacity,
@@ -12,7 +13,6 @@ function ColorButton({
   onChange,
   ...props
 }) {
-  var _a;
   return /* @__PURE__ */ jsxs(
     Popover,
     {
@@ -25,7 +25,7 @@ function ColorButton({
         /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", size: "compact-xs", px: 3, children: /* @__PURE__ */ jsx(
           ColorSwatch,
           {
-            color: (_a = defaultTheme.elements[elementColor]) == null ? void 0 : _a.fill,
+            color: defaultTheme.elements[elementColor]?.fill,
             size: 14,
             withShadow: true,
             style: { color: "#fff", cursor: "pointer" }
@@ -152,8 +152,5 @@ function OpacityOption({
     }
   );
 }
-export {
-  ColorButton,
-  ColorSwatches,
-  OpacityOption
-};
+
+export { ColorButton, ColorSwatches, OpacityOption };

package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.js

@@ -1,11 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import "@likec4/core";
-import { Box, SegmentedControl } from "@mantine/core";
-import { useState, useEffect } from "react";
-import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from "./_shared.js";
-import { ColorButton } from "./ColorButton.js";
-import { Toolbar } from "./Toolbar.js";
-import { useEnabledFeature } from "../../../../context/DiagramFeatures.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@likec4/core';
+import { Box, SegmentedControl } from '@mantine/core';
+import { useState, useEffect } from 'react';
+import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
+import { ColorButton } from './ColorButton.js';
+import { Toolbar } from './Toolbar.js';
+import { useEnabledFeature } from '../../../../context/DiagramFeatures.js';
+
 function CompoundElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
   const {
@@ -28,7 +29,7 @@ function CompoundElementToolbar(props) {
             elementColor,
             onColorPreview,
             isOpacityEditable: true,
-            elementOpacity: style == null ? void 0 : style.opacity,
+            elementOpacity: style?.opacity,
             onChange,
             position: "left-start"
           }
@@ -36,7 +37,7 @@ function CompoundElementToolbar(props) {
         /* @__PURE__ */ jsx(
           BorderStyleOption,
           {
-            elementBorderStyle: style == null ? void 0 : style.border,
+            elementBorderStyle: style?.border,
             onChange
           }
         ),
@@ -69,7 +70,7 @@ function CompoundDeploymentToolbar(props) {
             elementColor,
             onColorPreview,
             isOpacityEditable: true,
-            elementOpacity: style == null ? void 0 : style.opacity,
+            elementOpacity: style?.opacity,
             onChange,
             position: "left-start"
           }
@@ -77,7 +78,7 @@ function CompoundDeploymentToolbar(props) {
         /* @__PURE__ */ jsx(
           BorderStyleOption,
           {
-            elementBorderStyle: style == null ? void 0 : style.border,
+            elementBorderStyle: style?.border,
             onChange
           }
         ),
@@ -122,7 +123,5 @@ function BorderStyleOption({
     }
   ) });
 }
-export {
-  CompoundDeploymentToolbar,
-  CompoundElementToolbar
-};
+
+export { CompoundDeploymentToolbar, CompoundElementToolbar };

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js

@@ -1,12 +1,13 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { ElementShapes } from "@likec4/core";
-import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from "@mantine/core";
-import { IconSelector, IconCheck } from "@tabler/icons-react";
-import { stopPropagation } from "../../../../utils/xyflow.js";
-import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from "./_shared.js";
-import { ColorButton } from "./ColorButton.js";
-import { Toolbar } from "./Toolbar.js";
-import { useEnabledFeature } from "../../../../context/DiagramFeatures.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ElementShapes } from '@likec4/core';
+import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
+import { IconSelector, IconCheck } from '@tabler/icons-react';
+import { stopPropagation } from '../../../../utils/xyflow.js';
+import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
+import { ColorButton } from './ColorButton.js';
+import { Toolbar } from './Toolbar.js';
+import { useEnabledFeature } from '../../../../context/DiagramFeatures.js';
+
 function ElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
   const {
@@ -143,7 +144,5 @@ function ElementShapeButton({
     }
   );
 }
-export {
-  DeploymentElementToolbar,
-  ElementToolbar
-};
+
+export { DeploymentElementToolbar, ElementToolbar };

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts

@@ -5,4 +5,4 @@ export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
     nodeProps: Base.NodeProps;
     title: ReactNode;
 };
-export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js

@@ -1,11 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Paper, Stack, Box, Text, Group } from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
-import { NodeToolbar } from "@xyflow/react";
-import clsx from "clsx";
-import { useDiagramContext } from "../../../../hooks/useDiagram.js";
-import { stopPropagation } from "../../../../utils/xyflow.js";
-import { toolbarTitle } from "./styles.css.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Paper, Stack, Box, Text, Group } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import { NodeToolbar } from '@xyflow/react';
+import clsx from 'clsx';
+import { useDiagramContext } from '../../../../hooks/useDiagram.js';
+import { stopPropagation } from '../../../../utils/xyflow.js';
+import { toolbarTitle } from './styles.css.js';
+
 const useSelectedNodesCount = () => {
   return useDiagramContext((s) => s.xynodes.filter((x) => x.selected).length);
 };
@@ -32,10 +33,13 @@ function Toolbar({ title, children, nodeProps, ...props }) {
     }
   }
   const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, delay);
+  if (!isToolbarVisible) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     NodeToolbar,
     {
-      isVisible: !dragging && isToolbarVisible,
+      isVisible: !dragging,
       offset: 4,
       ...props,
       children: /* @__PURE__ */ jsx(
@@ -52,8 +56,8 @@ function Toolbar({ title, children, nodeProps, ...props }) {
           onClick: stopPropagation,
           onDoubleClick: stopPropagation,
           withBorder: true,
-          children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
-            /* @__PURE__ */ jsx(Box, { pl: 2, children: /* @__PURE__ */ jsx(Text, { c: "dimmed", className: toolbarTitle, children: title }) }),
+          children: /* @__PURE__ */ jsxs(Stack, { gap: "6px", children: [
+            /* @__PURE__ */ jsx(Box, { px: "4px", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title }) }),
             /* @__PURE__ */ jsx(Group, { gap: 4, children })
           ] })
         }
@@ -61,6 +65,5 @@ function Toolbar({ title, children, nodeProps, ...props }) {
     }
   );
 }
-export {
-  Toolbar
-};
+
+export { Toolbar };

package/dist/likec4diagram/custom/nodes/toolbar/_shared.js

@@ -1,12 +1,13 @@
-import { jsx } from "react/jsx-runtime";
-import { invariant, defaultTheme } from "@likec4/core";
-import { Tooltip as Tooltip$1, ActionIcon } from "@mantine/core";
-import { useCallbackRef } from "@mantine/hooks";
-import { IconFileSymlink, IconTransform } from "@tabler/icons-react";
-import { useState } from "react";
-import { keys } from "remeda";
-import { useDiagram } from "../../../../hooks/useDiagram.js";
-import { useDiagramEventHandlers } from "../../../../context/DiagramEventHandlers.js";
+import { jsx } from 'react/jsx-runtime';
+import { invariant, defaultTheme } from '@likec4/core';
+import { Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
+import { useCallbackRef } from '@mantine/hooks';
+import { IconFileSymlink, IconTransform } from '@tabler/icons-react';
+import { useState } from 'react';
+import { keys } from 'remeda';
+import { useDiagram } from '../../../../hooks/useDiagram.js';
+import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
+
 const {
   primary,
   secondary,
@@ -51,7 +52,7 @@ function useHandlers(target, props) {
     });
   });
   const onChange = useCallbackRef((change) => {
-    triggerOnChange == null ? void 0 : triggerOnChange({
+    triggerOnChange?.({
       change: {
         op: "change-element-style",
         style: change,
@@ -108,11 +109,11 @@ function GoToSourceButton(props) {
       onClick: (e) => {
         e.stopPropagation();
         if (props.elementId) {
-          onOpenSource == null ? void 0 : onOpenSource({
+          onOpenSource?.({
             element: props.elementId
           });
         } else if (props.deploymentId) {
-          onOpenSource == null ? void 0 : onOpenSource({
+          onOpenSource?.({
             deployment: props.deploymentId
           });
         }
@@ -121,11 +122,5 @@ function GoToSourceButton(props) {
     }
   ) });
 }
-export {
-  BrowseRelationshipsButton,
-  GoToSourceButton,
-  Tooltip,
-  colors,
-  themedColors,
-  useHandlers
-};
+
+export { BrowseRelationshipsButton, GoToSourceButton, Tooltip, colors, themedColors, useHandlers };

package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js

@@ -1,5 +1,15 @@
-/* empty css                          */
-var toolbarTitle = "_1xwo2e70";
-export {
-  toolbarTitle
-};
+import { css } from '@likec4/styles/css';
+
+const toolbarTitle = css({
+  color: "mantine.colors.dimmed",
+  fontSize: "10px",
+  fontWeight: 600,
+  maxWidth: "220px",
+  cursor: "default",
+  userSelect: "all",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap"
+});
+
+export { toolbarTitle };

package/dist/likec4diagram/ui/controls/ChangeAutoLayoutButton.js

@@ -1,13 +1,14 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Popover, PopoverTarget, PopoverDropdown, Box, FloatingIndicator, Text, Flex, UnstyledButton } from "@mantine/core";
-import { useHover, useUncontrolled, clampUseMovePosition, useMove, useMergedRef } from "@mantine/hooks";
-import { useDebouncedCallback } from "@react-hookz/web";
-import { IconLayoutDashboard } from "@tabler/icons-react";
-import { useState, forwardRef } from "react";
-import { useDiagram, useDiagramContext } from "../../../hooks/useDiagram.js";
-import { Tooltip, ActionIcon } from "./_shared.js";
-import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from "./styles.css.js";
-import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Popover, PopoverTarget, PopoverDropdown, Box, FloatingIndicator, Text, Flex, UnstyledButton } from '@mantine/core';
+import { useHover, useUncontrolled, clampUseMovePosition, useMove, useMergedRef } from '@mantine/hooks';
+import { useDebouncedCallback } from '@react-hookz/web';
+import { IconLayoutDashboard } from '@tabler/icons-react';
+import { useState, forwardRef } from 'react';
+import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
+import { Tooltip, ActionIcon } from './_shared.js';
+import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.css.js';
+import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
+
 const selector = (state) => ({
   viewId: state.view.id,
   autoLayout: state.view.autoLayout
@@ -30,7 +31,7 @@ const ChangeAutoLayoutButton = (props) => {
   };
   const setAutoLayout = (direction) => (event) => {
     event.stopPropagation();
-    onChange == null ? void 0 : onChange({
+    onChange?.({
       change: {
         op: "change-autolayout",
         layout: {
@@ -42,7 +43,7 @@ const ChangeAutoLayoutButton = (props) => {
   };
   const setSpacing = (nodeSep, rankSep) => {
     diagram.fitDiagram();
-    onChange == null ? void 0 : onChange({
+    onChange?.({
       change: {
         op: "change-autolayout",
         layout: {
@@ -154,6 +155,5 @@ const SpacingSliders = forwardRef(({
     ] }) })
   ] });
 });
-export {
-  ChangeAutoLayoutButton
-};
+
+export { ChangeAutoLayoutButton };