@likec4/diagram 1.55.1 → 1.56.0

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

@@ -1,162 +1,158 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Flex } from '@likec4/styles/jsx';
-import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Tooltip, CheckIcon, rem, Slider } from '@mantine/core';
-import { useUpdateEffect } from '@react-hookz/web';
-import { useState } from 'react';
-import { keys } from 'remeda';
-import { useLikeC4Styles } from '../../../../hooks/useLikeC4Styles.js';
-import { SemanticColors } from './types.js';
-
-function ColorButton({
-  elementColor,
-  elementOpacity,
-  onColorPreview,
-  isOpacityEditable = false,
-  onChange,
-  ...props
-}) {
-  const { theme } = useLikeC4Styles();
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      position: "top-start",
-      offset: 2,
-      withinPortal: false,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", size: "xs", px: 6, children: /* @__PURE__ */ jsx(
-          ColorSwatch,
-          {
-            color: theme.colors[elementColor].elements.fill,
-            size: 16,
-            withShadow: true,
-            style: { color: "#fff", cursor: "pointer" }
-          }
-        ) }) }),
-        /* @__PURE__ */ jsxs(PopoverDropdown, { p: "xs", children: [
-          /* @__PURE__ */ jsx(
-            ColorSwatches,
-            {
-              theme,
-              elementColor,
-              onColorPreview,
-              onChange: (color) => onChange({ color })
-            }
-          ),
-          isOpacityEditable && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Space, { h: "xs" }),
-            /* @__PURE__ */ jsx(Divider, { label: "opacity", labelPosition: "left" }),
-            /* @__PURE__ */ jsx(Space, { h: "xs" }),
-            /* @__PURE__ */ jsx(
-              OpacityOption,
-              {
-                elementOpacity,
-                onOpacityChange: (opacity) => {
-                  onChange({ opacity });
-                }
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  );
+import "../../../../_virtual/_rolldown/runtime.js";
+import { useLikeC4Styles } from "../../../../hooks/useLikeC4Styles.js";
+import { SemanticColors } from "./types.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useUpdateEffect } from "@react-hookz/web";
+import { keys } from "remeda";
+import { Button, CheckIcon, ColorSwatch, Divider, Popover, PopoverDropdown, PopoverTarget, Slider, Space, Stack, Tooltip, TooltipGroup, rem } from "@mantine/core";
+import { Flex as Flex$1 } from "@likec4/styles/jsx";
+//#region src/likec4diagram/custom/nodes/toolbar/ColorButton.tsx
+function ColorButton({ elementColor, elementOpacity, onColorPreview, isOpacityEditable = false, onChange, ...props }) {
+	const { theme } = useLikeC4Styles();
+	return /* @__PURE__ */ jsxs(Popover, {
+		clickOutsideEvents: [
+			"pointerdown",
+			"mousedown",
+			"click"
+		],
+		position: "top-start",
+		offset: 2,
+		withinPortal: false,
+		...props,
+		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "subtle",
+			color: "gray",
+			size: "xs",
+			px: 6,
+			children: /* @__PURE__ */ jsx(ColorSwatch, {
+				color: theme.colors[elementColor].elements.fill,
+				size: 16,
+				withShadow: true,
+				style: {
+					color: "#fff",
+					cursor: "pointer"
+				}
+			})
+		}) }), /* @__PURE__ */ jsxs(PopoverDropdown, {
+			p: "xs",
+			children: [/* @__PURE__ */ jsx(ColorSwatches, {
+				theme,
+				elementColor,
+				onColorPreview,
+				onChange: (color) => onChange({ color })
+			}), isOpacityEditable && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(Space, { h: "xs" }),
+				/* @__PURE__ */ jsx(Divider, {
+					label: "opacity",
+					labelPosition: "left"
+				}),
+				/* @__PURE__ */ jsx(Space, { h: "xs" }),
+				/* @__PURE__ */ jsx(OpacityOption, {
+					elementOpacity,
+					onOpacityChange: (opacity) => {
+						onChange({ opacity });
+					}
+				})
+			] })]
+		})]
+	});
 }
-function ColorSwatches({
-  theme,
-  elementColor,
-  onColorPreview,
-  onChange
-}) {
-  const changeColor = (color) => (e) => {
-    e.stopPropagation();
-    onColorPreview(null);
-    if (elementColor === color) {
-      return;
-    }
-    onChange(color);
-  };
-  const otherColors = keys(theme.colors).filter((color) => !SemanticColors.includes(color));
-  return /* @__PURE__ */ jsx(Stack, { gap: 2, onMouseLeave: () => onColorPreview(null), children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 1e3, closeDelay: 300, children: [
-    /* @__PURE__ */ jsx(Flex, { maxW: "120px", gap: "1.5", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: SemanticColors.map((color) => /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        label: color,
-        fz: "xs",
-        color: "dark",
-        offset: 2,
-        withinPortal: false,
-        transitionProps: { duration: 140, transition: "slide-up" },
-        children: /* @__PURE__ */ jsx(
-          ColorSwatch,
-          {
-            color: theme.colors[color].elements.fill,
-            size: 18,
-            withShadow: true,
-            onMouseEnter: () => onColorPreview(color),
-            onClick: changeColor(color),
-            style: { color: "#fff", cursor: "pointer" },
-            children: elementColor === color && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(10), height: rem(10) } })
-          }
-        )
-      },
-      color
-    )) }),
-    /* @__PURE__ */ jsx(
-      Flex,
-      {
-        mt: "sm",
-        maxW: "110px",
-        gap: "1.5",
-        justify: "flex-start",
-        align: "flex-start",
-        direction: "row",
-        wrap: "wrap",
-        children: otherColors.map((key) => /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            label: key,
-            fz: "xs",
-            color: "dark",
-            offset: 2,
-            transitionProps: { duration: 140, transition: "slide-up" },
-            children: /* @__PURE__ */ jsx(
-              ColorSwatch,
-              {
-                color: theme.colors[key].elements.fill,
-                size: 18,
-                onMouseEnter: () => onColorPreview(key),
-                onClick: changeColor(key),
-                style: { color: "#fff", cursor: "pointer" },
-                children: elementColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(10), height: rem(10) } })
-              }
-            )
-          },
-          key
-        ))
-      }
-    )
-  ] }) });
+function ColorSwatches({ theme, elementColor, onColorPreview, onChange }) {
+	const changeColor = (color) => (e) => {
+		e.stopPropagation();
+		onColorPreview(null);
+		if (elementColor === color) return;
+		onChange(color);
+	};
+	const otherColors = keys(theme.colors).filter((color) => !SemanticColors.includes(color));
+	return /* @__PURE__ */ jsx(Stack, {
+		gap: 2,
+		onMouseLeave: () => onColorPreview(null),
+		children: /* @__PURE__ */ jsxs(TooltipGroup, {
+			openDelay: 1e3,
+			closeDelay: 300,
+			children: [/* @__PURE__ */ jsx(Flex$1, {
+				maxW: "120px",
+				gap: "1.5",
+				justify: "flex-start",
+				align: "flex-start",
+				direction: "row",
+				wrap: "wrap",
+				children: SemanticColors.map((color) => /* @__PURE__ */ jsx(Tooltip, {
+					label: color,
+					fz: "xs",
+					color: "dark",
+					offset: 2,
+					withinPortal: false,
+					transitionProps: {
+						duration: 140,
+						transition: "slide-up"
+					},
+					children: /* @__PURE__ */ jsx(ColorSwatch, {
+						color: theme.colors[color].elements.fill,
+						size: 18,
+						withShadow: true,
+						onMouseEnter: () => onColorPreview(color),
+						onClick: changeColor(color),
+						style: {
+							color: "#fff",
+							cursor: "pointer"
+						},
+						children: elementColor === color && /* @__PURE__ */ jsx(CheckIcon, { style: {
+							width: rem(10),
+							height: rem(10)
+						} })
+					})
+				}, color))
+			}), /* @__PURE__ */ jsx(Flex$1, {
+				mt: "sm",
+				maxW: "110px",
+				gap: "1.5",
+				justify: "flex-start",
+				align: "flex-start",
+				direction: "row",
+				wrap: "wrap",
+				children: otherColors.map((key) => /* @__PURE__ */ jsx(Tooltip, {
+					label: key,
+					fz: "xs",
+					color: "dark",
+					offset: 2,
+					transitionProps: {
+						duration: 140,
+						transition: "slide-up"
+					},
+					children: /* @__PURE__ */ jsx(ColorSwatch, {
+						color: theme.colors[key].elements.fill,
+						size: 18,
+						onMouseEnter: () => onColorPreview(key),
+						onClick: changeColor(key),
+						style: {
+							color: "#fff",
+							cursor: "pointer"
+						},
+						children: elementColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: {
+							width: rem(10),
+							height: rem(10)
+						} })
+					})
+				}, key))
+			})]
+		})
+	});
 }
-function OpacityOption({
-  elementOpacity = 100,
-  onOpacityChange
-}) {
-  const [value, setValue] = useState(elementOpacity);
-  useUpdateEffect(() => {
-    setValue(elementOpacity);
-  }, [elementOpacity]);
-  return /* @__PURE__ */ jsx(
-    Slider,
-    {
-      size: "sm",
-      color: "dark",
-      value,
-      onChange: setValue,
-      onChangeEnd: onOpacityChange
-    }
-  );
+function OpacityOption({ elementOpacity = 100, onOpacityChange }) {
+	const [value, setValue] = useState(elementOpacity);
+	useUpdateEffect(() => {
+		setValue(elementOpacity);
+	}, [elementOpacity]);
+	return /* @__PURE__ */ jsx(Slider, {
+		size: "sm",
+		color: "dark",
+		value,
+		onChange: setValue,
+		onChangeEnd: onOpacityChange
+	});
 }
-
-export { ColorButton, ColorSwatches, OpacityOption };
+//#endregion
+export { ColorButton };

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

@@ -1,91 +1,63 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
-import { BorderStyleOption, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
-import { ColorButton } from './ColorButton.js';
-import { Toolbar } from './Toolbar.js';
-import { useHandlers } from './useHandlers.js';
-
+import "../../../../_virtual/_rolldown/runtime.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 { jsx, jsxs } from "react/jsx-runtime";
+//#region src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx
 function CompoundElementToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
-  const {
-    data: {
-      style,
-      modelFqn
-    }
-  } = props;
-  const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props);
-  const opacity = style?.opacity ?? 100;
-  return /* @__PURE__ */ jsxs(
-    Toolbar,
-    {
-      nodeProps: props,
-      title: modelFqn,
-      align: "start",
-      children: [
-        /* @__PURE__ */ jsx(
-          ColorButton,
-          {
-            elementColor,
-            onColorPreview,
-            isOpacityEditable: true,
-            elementOpacity: opacity,
-            onChange,
-            position: "left-start"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          BorderStyleOption,
-          {
-            elementBorderStyle: style?.border ?? (opacity < 99 ? "dashed" : "none"),
-            onChange
-          }
-        ),
-        enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelFqn }),
-        enableRelationshipBrowser && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
-      ]
-    }
-  );
+	const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
+	const { data: { style, modelFqn } } = props;
+	const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props);
+	const opacity = style?.opacity ?? 100;
+	return /* @__PURE__ */ jsxs(Toolbar, {
+		nodeProps: props,
+		title: modelFqn,
+		align: "start",
+		children: [
+			/* @__PURE__ */ jsx(ColorButton, {
+				elementColor,
+				onColorPreview,
+				isOpacityEditable: true,
+				elementOpacity: opacity,
+				onChange,
+				position: "left-start"
+			}),
+			/* @__PURE__ */ jsx(BorderStyleOption, {
+				elementBorderStyle: style?.border ?? (opacity < 99 ? "dashed" : "none"),
+				onChange
+			}),
+			enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelFqn }),
+			enableRelationshipBrowser && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
+		]
+	});
 }
 function CompoundDeploymentToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
-  const {
-    data: {
-      deploymentFqn,
-      style,
-      modelFqn
-    }
-  } = props;
-  const { elementColor, onColorPreview, onChange } = useHandlers(deploymentFqn, props);
-  return /* @__PURE__ */ jsxs(
-    Toolbar,
-    {
-      nodeProps: props,
-      title: deploymentFqn,
-      align: "start",
-      children: [
-        /* @__PURE__ */ jsx(
-          ColorButton,
-          {
-            elementColor,
-            onColorPreview,
-            isOpacityEditable: true,
-            elementOpacity: style?.opacity,
-            onChange,
-            position: "left-start"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          BorderStyleOption,
-          {
-            elementBorderStyle: style?.border,
-            onChange
-          }
-        ),
-        enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentFqn }),
-        enableRelationshipBrowser && modelFqn && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
-      ]
-    }
-  );
+	const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
+	const { data: { deploymentFqn, style, modelFqn } } = props;
+	const { elementColor, onColorPreview, onChange } = useHandlers(deploymentFqn, props);
+	return /* @__PURE__ */ jsxs(Toolbar, {
+		nodeProps: props,
+		title: deploymentFqn,
+		align: "start",
+		children: [
+			/* @__PURE__ */ jsx(ColorButton, {
+				elementColor,
+				onColorPreview,
+				isOpacityEditable: true,
+				elementOpacity: style?.opacity,
+				onChange,
+				position: "left-start"
+			}),
+			/* @__PURE__ */ jsx(BorderStyleOption, {
+				elementBorderStyle: style?.border,
+				onChange
+			}),
+			enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentFqn }),
+			enableRelationshipBrowser && modelFqn && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
+		]
+	});
 }
-
+//#endregion
 export { CompoundDeploymentToolbar, CompoundElementToolbar };