@likec4/diagram 1.55.0 → 1.56.0

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

@@ -1,170 +1,114 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { ElementShapes } from '@likec4/core/styles';
-import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
-import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
-import { stopPropagation } from '../../../../utils/xyflow.js';
-import { BorderStyleOption, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
-import { ColorButton } from './ColorButton.js';
-import { Toolbar } from './Toolbar.js';
-import { useHandlers } from './useHandlers.js';
-import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
-
-const SortedElementShapes = [...ElementShapes].sort();
+import "../../../../_virtual/_rolldown/runtime.js";
+import { stopPropagation } from "../../../../utils/xyflow.js";
+import { useEnabledFeatures } from "../../../../context/DiagramFeatures.js";
+import { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton } from "./_shared.js";
+import { ColorButton } from "./ColorButton.js";
+import { Toolbar } from "./Toolbar.js";
+import { useHandlers } from "./useHandlers.js";
+import { IconCheck, IconSelector } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Menu, MenuDropdown, MenuItem, MenuTarget } from "@mantine/core";
+import { ElementShapes } from "@likec4/core/styles";
+//#region src/likec4diagram/custom/nodes/toolbar/ElementToolbar.tsx
+var SortedElementShapes = [...ElementShapes].sort();
 function ElementToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser, enableNotes } = useEnabledFeatures();
-  const increaseOffset = !!(enableNotes && props.data.notes);
-  const {
-    data: {
-      shape,
-      modelFqn,
-      style
-    }
-  } = props;
-  const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props);
-  return /* @__PURE__ */ jsxs(
-    Toolbar,
-    {
-      nodeProps: props,
-      title: modelFqn,
-      offset: increaseOffset ? 20 : 10,
-      align: "start",
-      children: [
-        /* @__PURE__ */ jsx(
-          ColorButton,
-          {
-            elementColor,
-            onColorPreview,
-            onChange
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ElementShapeButton,
-          {
-            elementShape: shape,
-            onChange
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          BorderStyleOption,
-          {
-            elementBorderStyle: style?.border ?? "none",
-            onChange
-          }
-        ),
-        enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelFqn }),
-        enableRelationshipBrowser && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
-      ]
-    }
-  );
+	const { enableVscode, enableRelationshipBrowser, enableNotes } = useEnabledFeatures();
+	const increaseOffset = !!(enableNotes && props.data.notes);
+	const { data: { shape, modelFqn, style } } = props;
+	const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props);
+	return /* @__PURE__ */ jsxs(Toolbar, {
+		nodeProps: props,
+		title: modelFqn,
+		offset: increaseOffset ? 20 : 10,
+		align: "start",
+		children: [
+			/* @__PURE__ */ jsx(ColorButton, {
+				elementColor,
+				onColorPreview,
+				onChange
+			}),
+			/* @__PURE__ */ jsx(ElementShapeButton, {
+				elementShape: shape,
+				onChange
+			}),
+			/* @__PURE__ */ jsx(BorderStyleOption, {
+				elementBorderStyle: style?.border ?? "none",
+				onChange
+			}),
+			enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelFqn }),
+			enableRelationshipBrowser && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
+		]
+	});
 }
 function DeploymentElementToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
-  const {
-    data: {
-      shape,
-      deploymentFqn,
-      modelFqn,
-      style
-    }
-  } = props;
-  const { elementColor, onColorPreview, onChange } = useHandlers(deploymentFqn, props);
-  return /* @__PURE__ */ jsxs(
-    Toolbar,
-    {
-      nodeProps: props,
-      title: deploymentFqn,
-      align: "start",
-      children: [
-        /* @__PURE__ */ jsx(
-          ColorButton,
-          {
-            elementColor,
-            onColorPreview,
-            onChange
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ElementShapeButton,
-          {
-            elementShape: shape,
-            onChange
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          BorderStyleOption,
-          {
-            elementBorderStyle: style?.border ?? "none",
-            onChange
-          }
-        ),
-        enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentFqn }),
-        enableRelationshipBrowser && modelFqn && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
-      ]
-    }
-  );
+	const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
+	const { data: { shape, deploymentFqn, modelFqn, style } } = props;
+	const { elementColor, onColorPreview, onChange } = useHandlers(deploymentFqn, props);
+	return /* @__PURE__ */ jsxs(Toolbar, {
+		nodeProps: props,
+		title: deploymentFqn,
+		align: "start",
+		children: [
+			/* @__PURE__ */ jsx(ColorButton, {
+				elementColor,
+				onColorPreview,
+				onChange
+			}),
+			/* @__PURE__ */ jsx(ElementShapeButton, {
+				elementShape: shape,
+				onChange
+			}),
+			/* @__PURE__ */ jsx(BorderStyleOption, {
+				elementBorderStyle: style?.border ?? "none",
+				onChange
+			}),
+			enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentFqn }),
+			enableRelationshipBrowser && modelFqn && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
+		]
+	});
 }
-function ElementShapeButton({
-  elementShape,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxs(
-    Menu,
-    {
-      openDelay: 300,
-      closeDelay: 450,
-      floatingStrategy: "fixed",
-      closeOnClickOutside: true,
-      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      closeOnEscape: true,
-      closeOnItemClick: false,
-      position: "top-start",
-      offset: 2,
-      styles: {
-        item: {
-          padding: "calc(var(--spacing-xs) / 1.5) var(--spacing-xs)"
-        }
-      },
-      withinPortal: false,
-      children: [
-        /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "light",
-            color: "gray",
-            size: "compact-sm",
-            fz: "xxs",
-            px: 4,
-            pl: 8,
-            py: 2,
-            rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 12 }),
-            children: elementShape
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          MenuDropdown,
-          {
-            onDoubleClick: stopPropagation,
-            onClick: stopPropagation,
-            children: SortedElementShapes.map((shape) => /* @__PURE__ */ jsx(
-              MenuItem,
-              {
-                fz: "sm",
-                value: shape,
-                rightSection: elementShape === shape ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : void 0,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onChange({ shape });
-                },
-                children: shape
-              },
-              shape
-            ))
-          }
-        )
-      ]
-    }
-  );
+function ElementShapeButton({ elementShape, onChange }) {
+	return /* @__PURE__ */ jsxs(Menu, {
+		openDelay: 300,
+		closeDelay: 450,
+		floatingStrategy: "fixed",
+		closeOnClickOutside: true,
+		clickOutsideEvents: [
+			"pointerdown",
+			"mousedown",
+			"click"
+		],
+		closeOnEscape: true,
+		closeOnItemClick: false,
+		position: "top-start",
+		offset: 2,
+		styles: { item: { padding: "calc(var(--spacing-xs) / 1.5) var(--spacing-xs)" } },
+		withinPortal: false,
+		children: [/* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "light",
+			color: "gray",
+			size: "compact-sm",
+			fz: "xxs",
+			px: 4,
+			pl: 8,
+			py: 2,
+			rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 12 }),
+			children: elementShape
+		}) }), /* @__PURE__ */ jsx(MenuDropdown, {
+			onDoubleClick: stopPropagation,
+			onClick: stopPropagation,
+			children: SortedElementShapes.map((shape) => /* @__PURE__ */ jsx(MenuItem, {
+				fz: "sm",
+				value: shape,
+				rightSection: elementShape === shape ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : void 0,
+				onClick: (e) => {
+					e.stopPropagation();
+					onChange({ shape });
+				},
+				children: shape
+			}, shape))
+		})]
+	});
 }
-
+//#endregion
 export { DeploymentElementToolbar, ElementToolbar };

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

@@ -1,73 +1,61 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { VStack, Box, HStack } from '@likec4/styles/jsx';
-import { Paper, Text } from '@mantine/core';
-import { useDebouncedValue } from '@mantine/hooks';
-import { NodeToolbar } from '@xyflow/react';
-import { useDiagramContext } from '../../../../hooks/useDiagram.js';
-import { stopPropagation } from '../../../../utils/xyflow.js';
-import { toolbarTitle } from './styles.css.js';
-
-const selectSelectedNodesCount = (context) => {
-  return context.xynodes.filter((x) => x.selected).length;
+import "../../../../_virtual/_rolldown/runtime.js";
+import { stopPropagation } from "../../../../utils/xyflow.js";
+import { useDiagramContext } from "../../../../hooks/useDiagram.js";
+import { toolbarTitle } from "./styles.css.js";
+import { cx } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeToolbar } from "@xyflow/react";
+import { Paper, Text } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import { Box as Box$1, HStack, VStack } from "@likec4/styles/jsx";
+//#region src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx
+var selectSelectedNodesCount = (context) => {
+	return context.xynodes.filter((x) => x.selected).length;
 };
-const useSelectedNodesCount = () => {
-  return useDiagramContext(selectSelectedNodesCount);
+var useSelectedNodesCount = () => {
+	return useDiagramContext(selectSelectedNodesCount);
 };
 function Toolbar({ title, children, nodeProps, ...props }) {
-  const selectedNodesCount = useSelectedNodesCount();
-  const {
-    selected = false,
-    dragging = false,
-    data: {
-      hovered = false
-    }
-  } = nodeProps;
-  const _isToolbarVisible = hovered && selectedNodesCount === 0 || selected && selectedNodesCount === 1;
-  let delay = 150;
-  if (_isToolbarVisible) {
-    if (selected) {
-      delay = 100;
-    } else {
-      delay = 1e3;
-    }
-  } else {
-    if (selectedNodesCount > 0) {
-      delay = 50;
-    }
-  }
-  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, delay);
-  if (!isToolbarVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    NodeToolbar,
-    {
-      isVisible: !dragging,
-      offset: 4,
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        Paper,
-        {
-          className: cx("nodrag", "nopan"),
-          px: 5,
-          pb: 8,
-          pt: 4,
-          radius: "sm",
-          shadow: "xl",
-          onDoubleClickCapture: stopPropagation,
-          onPointerDown: stopPropagation,
-          onClick: stopPropagation,
-          onDoubleClick: stopPropagation,
-          withBorder: true,
-          children: /* @__PURE__ */ jsxs(VStack, { gap: "2", children: [
-            /* @__PURE__ */ jsx(Box, { px: "1", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title }) }),
-            /* @__PURE__ */ jsx(HStack, { gap: "1", children })
-          ] })
-        }
-      )
-    }
-  );
+	const selectedNodesCount = useSelectedNodesCount();
+	const { selected = false, dragging = false, data: { hovered = false } } = nodeProps;
+	const _isToolbarVisible = hovered && selectedNodesCount === 0 || selected && selectedNodesCount === 1;
+	let delay = 150;
+	if (_isToolbarVisible) if (selected) delay = 100;
+	else delay = 1e3;
+	else if (selectedNodesCount > 0) delay = 50;
+	const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, delay);
+	if (!isToolbarVisible) return null;
+	return /* @__PURE__ */ jsx(NodeToolbar, {
+		isVisible: !dragging,
+		offset: 4,
+		...props,
+		children: /* @__PURE__ */ jsx(Paper, {
+			className: cx("nodrag", "nopan"),
+			px: 5,
+			pb: 8,
+			pt: 4,
+			radius: "sm",
+			shadow: "xl",
+			onDoubleClickCapture: stopPropagation,
+			onPointerDown: stopPropagation,
+			onClick: stopPropagation,
+			onDoubleClick: stopPropagation,
+			withBorder: true,
+			children: /* @__PURE__ */ jsxs(VStack, {
+				gap: "2",
+				children: [/* @__PURE__ */ jsx(Box$1, {
+					px: "1",
+					children: /* @__PURE__ */ jsx(Text, {
+						className: toolbarTitle,
+						children: title
+					})
+				}), /* @__PURE__ */ jsx(HStack, {
+					gap: "1",
+					children
+				})]
+			})
+		})
+	});
 }
-
+//#endregion
 export { Toolbar };

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

@@ -1,12 +1,9 @@
 import { BorderStyle, DeploymentFqn, Fqn } from '@likec4/core/types';
 import { MergeExclusive } from 'type-fest';
 import { OnStyleChange } from './types';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-import { TooltipProps } from '@mantine/core';
-export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
-    component?: any;
-    renderRoot?: (props: Record<string, any>) => React.ReactNode;
-}>;
+import { NamedExoticComponent, RefAttributes } from 'react';
+import { TooltipProps, PlaceholderPolymorphicProps } from '@mantine/core';
+export declare const Tooltip: NamedExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
 export declare function BrowseRelationshipsButton({ fqn }: {
     fqn: Fqn;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,108 +1,103 @@
-import { jsx } from 'react/jsx-runtime';
-import { SegmentedControl, ActionIcon, Tooltip as Tooltip$1 } from '@mantine/core';
-import { useState, useEffect } from 'react';
-import '@xstate/react';
-import 'fast-equals';
-import { useDiagram } from '../../../../hooks/safeContext.js';
-import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
-import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-
-const Tooltip = Tooltip$1.withProps({
-  color: "dark",
-  fz: "xs",
-  openDelay: 400,
-  closeDelay: 150,
-  label: "",
-  children: null,
-  offset: 4,
-  withinPortal: false
+import "../../../../_virtual/_rolldown/runtime.js";
+import { useDiagramEventHandlers } from "../../../../context/DiagramEventHandlers.js";
+import { useDiagram } from "../../../../hooks/safeContext.js";
+import { IconFileSymlink, IconTransform } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon, SegmentedControl, Tooltip } from "@mantine/core";
+//#region src/likec4diagram/custom/nodes/toolbar/_shared.tsx
+var Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	openDelay: 400,
+	closeDelay: 150,
+	label: "",
+	children: null,
+	offset: 4,
+	withinPortal: false
 });
 function BrowseRelationshipsButton({ fqn }) {
-  const diagram = useDiagram();
-  return /* @__PURE__ */ jsx(Tooltip, { label: "Browse relationships", children: /* @__PURE__ */ jsx(
-    ActionIcon,
-    {
-      size: "md",
-      variant: "subtle",
-      color: "gray",
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.openRelationshipsBrowser(fqn);
-      },
-      children: /* @__PURE__ */ jsx(
-        IconTransform,
-        {
-          stroke: 2,
-          style: {
-            width: "65%",
-            height: "65%"
-          }
-        }
-      )
-    }
-  ) });
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(Tooltip$1, {
+		label: "Browse relationships",
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			size: "md",
+			variant: "subtle",
+			color: "gray",
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.openRelationshipsBrowser(fqn);
+			},
+			children: /* @__PURE__ */ jsx(IconTransform, {
+				stroke: 2,
+				style: {
+					width: "65%",
+					height: "65%"
+				}
+			})
+		})
+	});
 }
 function GoToSourceButton(props) {
-  const { onOpenSource } = useDiagramEventHandlers();
-  if (!onOpenSource) return null;
-  return /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
-    ActionIcon,
-    {
-      size: "md",
-      variant: "subtle",
-      color: "gray",
-      onClick: (e) => {
-        e.stopPropagation();
-        if (props.elementId) {
-          onOpenSource?.({
-            element: props.elementId
-          });
-        } else if (props.deploymentId) {
-          onOpenSource?.({
-            deployment: props.deploymentId
-          });
-        }
-      },
-      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "65%" } })
-    }
-  ) });
+	const { onOpenSource } = useDiagramEventHandlers();
+	if (!onOpenSource) return null;
+	return /* @__PURE__ */ jsx(Tooltip$1, {
+		label: "Open source",
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			size: "md",
+			variant: "subtle",
+			color: "gray",
+			onClick: (e) => {
+				e.stopPropagation();
+				if (props.elementId) onOpenSource?.({ element: props.elementId });
+				else if (props.deploymentId) onOpenSource?.({ deployment: props.deploymentId });
+			},
+			children: /* @__PURE__ */ jsx(IconFileSymlink, {
+				stroke: 1.8,
+				style: { width: "65%" }
+			})
+		})
+	});
 }
-function BorderStyleOption({
-  elementBorderStyle = "none",
-  onChange
-}) {
-  const [value, setValue] = useState(elementBorderStyle);
-  useEffect(() => {
-    setValue(elementBorderStyle);
-  }, [elementBorderStyle]);
-  return /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      size: "xs",
-      fz: "xxs",
-      fullWidth: true,
-      withItemsBorders: false,
-      value,
-      onChange: (v) => {
-        const border = v;
-        setValue(border);
-        onChange({ border });
-      },
-      styles: {
-        label: {
-          paddingTop: 2,
-          paddingBottom: 2
-        }
-      },
-      data: [
-        { label: "Solid", value: "solid" },
-        { label: "Dashed", value: "dashed" },
-        { label: "Dotted", value: "dotted" },
-        { label: "None", value: "none" }
-      ]
-    }
-  );
+function BorderStyleOption({ elementBorderStyle = "none", onChange }) {
+	const [value, setValue] = useState(elementBorderStyle);
+	useEffect(() => {
+		setValue(elementBorderStyle);
+	}, [elementBorderStyle]);
+	return /* @__PURE__ */ jsx(SegmentedControl, {
+		size: "xs",
+		fz: "xxs",
+		fullWidth: true,
+		withItemsBorders: false,
+		value,
+		onChange: (v) => {
+			const border = v;
+			setValue(border);
+			onChange({ border });
+		},
+		styles: { label: {
+			paddingTop: 2,
+			paddingBottom: 2
+		} },
+		data: [
+			{
+				label: "Solid",
+				value: "solid"
+			},
+			{
+				label: "Dashed",
+				value: "dashed"
+			},
+			{
+				label: "Dotted",
+				value: "dotted"
+			},
+			{
+				label: "None",
+				value: "none"
+			}
+		]
+	});
 }
-
-export { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton, Tooltip };
+//#endregion
+export { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton };