@likec4/diagram 1.26.2 → 1.27.0

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, { c: "dimmed", 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,10 @@
-/* empty css                          */
-var toolbarTitle = "_1xwo2e70";
-export {
-  toolbarTitle
-};
+import { css } from '@likec4/styles/css';
+
+const toolbarTitle = css({
+  fontSize: "10px",
+  fontWeight: 600,
+  cursor: "default",
+  userSelect: "all"
+});
+
+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 };

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

@@ -1,23 +1,24 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { ActionIconGroup, Group, Stack, Box, Badge, Loader } from "@mantine/core";
-import { IconFileSymlink, IconFocusCentered, IconMenu2 } from "@tabler/icons-react";
-import { clsx } from "clsx";
-import { LayoutGroup, AnimatePresence, m } from "framer-motion";
-import { memo } from "react";
-import { useControlsCustomLayout } from "../../../context/ControlsCustomLayout.js";
-import { useDiagramContext, useDiagram, useDiagramSyncLayoutState } from "../../../hooks/useDiagram.js";
-import { LikeC4Search } from "../search/LikeC4Search.js";
-import { Tooltip, ActionIcon } from "./_shared.js";
-import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
-import { LayoutDriftNotification } from "./LayoutDriftNotification.js";
-import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
-import { NavigationButtons } from "./NavigationButtons.js";
-import { actionIconGroup, navigationButtons, panel } from "./styles.css.js";
-import { ToggleReadonly } from "./ToggleReadonly.js";
-import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
-import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
-import { stopPropagation } from "../../../utils/xyflow.js";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ActionIconGroup, Group, Stack, Box, Badge, Loader } from '@mantine/core';
+import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react';
+import { clsx } from 'clsx';
+import { LayoutGroup, AnimatePresence, m } from 'framer-motion';
+import { memo } from 'react';
+import { useControlsCustomLayout } from '../../../context/ControlsCustomLayout.js';
+import { useDiagramContext, useDiagram, useDiagramSyncLayoutState } from '../../../hooks/useDiagram.js';
+import { LikeC4Search } from '../search/LikeC4Search.js';
+import { Tooltip, ActionIcon } from './_shared.js';
+import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton.js';
+import { LayoutDriftNotification } from './LayoutDriftNotification.js';
+import { ManualLayoutToolsButton } from './ManualLayoutToolsButton.js';
+import { NavigationButtons } from './NavigationButtons.js';
+import { actionIconGroup, navigationButtons, panel } from './styles.css.js';
+import { ToggleReadonly } from './ToggleReadonly.js';
+import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
+import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
+import { stopPropagation } from '../../../utils/xyflow.js';
+
 const ControlsDefaultLayout = ({
   burgerMenu,
   navigationButtons: navigationButtons$1,
@@ -113,7 +114,7 @@ const Controls = memo(() => {
           {
             onClick: (e) => {
               e.stopPropagation();
-              onOpenSource == null ? void 0 : onOpenSource({ view: viewId });
+              onOpenSource?.({ view: viewId });
             },
             children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
           }
@@ -143,6 +144,5 @@ const SyncLayoutBadge = () => {
   if (!isPending) return null;
   return /* @__PURE__ */ jsx(Badge, { color: "pink", radius: "xs", size: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(Loader, { color: "orange", size: 8 }), children: "Pending..." });
 };
-export {
-  Controls
-};
+
+export { Controls };

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

@@ -1,8 +1,8 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { HoverCard, HoverCardTarget, Overlay, HoverCardDropdown, Notification, Text, Code } from "@mantine/core";
-import { IconAlertTriangle } from "@tabler/icons-react";
-import { mantine } from "../../../theme-vars.js";
-import { ActionIcon } from "./_shared.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { HoverCard, HoverCardTarget, Overlay, HoverCardDropdown, Notification, Text, Code } from '@mantine/core';
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { ActionIcon } from './_shared.js';
+
 const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
   HoverCard,
   {
@@ -12,7 +12,7 @@ const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
     ...props,
     children: [
       /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsxs(ActionIcon, { c: "orange", children: [
-        /* @__PURE__ */ jsx(Overlay, { color: mantine.colors.orange.lightHover, backgroundOpacity: 1 }),
+        /* @__PURE__ */ jsx(Overlay, { color: "orange.lightHover", backgroundOpacity: 1 }),
         /* @__PURE__ */ jsx(IconAlertTriangle, {})
       ] }) }),
       /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
@@ -38,6 +38,5 @@ const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
     ]
   }
 );
-export {
-  LayoutDriftNotification
-};
+
+export { LayoutDriftNotification };