@likec4/diagram 1.59.3 → 1.60.0

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

@@ -0,0 +1,160 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
+import { useLikeC4Styles } from "../../../../hooks/useLikeC4Styles.mjs";
+import { SemanticColors } from "./types.mjs";
+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$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
+	});
+}
+
+//#endregion
+export { ColorButton, ColorSwatches, OpacityOption };

package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.d.mts

@@ -0,0 +1,6 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
+import { Types } from "../../../types.mjs";
+//#region src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.d.ts
+export declare function CompoundElementToolbar(props: Types.NodeProps<'compound-element'>): import("react").JSX.Element;
+export declare function CompoundDeploymentToolbar(props: Types.NodeProps<'compound-deployment'>): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,65 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
+import { useEnabledFeatures } from "../../../../context/DiagramFeatures.mjs";
+import { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton } from "./_shared.mjs";
+import { ColorButton } from "./ColorButton.mjs";
+import { Toolbar } from "./Toolbar.mjs";
+import { useHandlers } from "./useHandlers.mjs";
+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 })
+		]
+	});
+}
+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 })
+		]
+	});
+}
+
+//#endregion
+export { CompoundDeploymentToolbar, CompoundElementToolbar };

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.d.mts

@@ -0,0 +1,11 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
+import { Types } from "../../../types.mjs";
+import { Fqn } from "@likec4/core/types";
+//#region src/likec4diagram/custom/nodes/toolbar/ElementToolbar.d.ts
+export declare function ElementToolbar(props: Types.NodeProps<'element' | 'seq-actor'> & {
+  data: {
+    modelFqn: Fqn;
+  };
+}): import("react").JSX.Element;
+export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,117 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
+import IconCheck from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs";
+import IconSelector from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.mjs";
+import { stopPropagation } from "../../../../utils/xyflow.mjs";
+import { useEnabledFeatures } from "../../../../context/DiagramFeatures.mjs";
+import { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton } from "./_shared.mjs";
+import { ColorButton } from "./ColorButton.mjs";
+import { Toolbar } from "./Toolbar.mjs";
+import { useHandlers } from "./useHandlers.mjs";
+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
+const 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 })
+		]
+	});
+}
+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 })
+		]
+	});
+}
+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.d.mts

@@ -0,0 +1,11 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
+import { BaseNodeProps } from "../../../../base/types.mjs";
+import { ReactNode } from "react";
+import { NodeToolbarProps } from "@xyflow/react";
+//#region src/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts
+export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
+  nodeProps: BaseNodeProps;
+  title: ReactNode;
+};
+export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react").JSX.Element | null;
+//#endregion

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

@@ -0,0 +1,64 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
+import { stopPropagation } from "../../../../utils/xyflow.mjs";
+import { selectDiagramContext, useDiagramSelector } from "../../../../hooks/safeContext.mjs";
+import { toolbarTitle } from "./styles.css.mjs";
+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
+const selectSelectedNodesCount = selectDiagramContext((context) => {
+	return context.xynodes.filter((x) => x.selected).length;
+});
+const useSelectedNodesCount = () => {
+	return useDiagramSelector(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: "lg",
+			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.mjs

@@ -0,0 +1,106 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
+import IconFileSymlink from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.mjs";
+import IconTransform from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.mjs";
+import { useDiagramEventHandlers } from "../../../../context/DiagramEventHandlers.mjs";
+import { useDiagram } from "../../../../hooks/safeContext.mjs";
+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
+const 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$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$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"
+			}
+		]
+	});
+}
+
+//#endregion
+export { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton, Tooltip$1 as Tooltip };

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

@@ -0,0 +1,17 @@
+import { css } from "@likec4/styles/css";
+
+//#region src/likec4diagram/custom/nodes/toolbar/styles.css.ts
+const toolbarTitle = css({
+	color: "text.dimmed",
+	fontSize: "xxs",
+	fontWeight: "bold",
+	maxWidth: "[220px]",
+	cursor: "default",
+	userSelect: "all",
+	textOverflow: "ellipsis",
+	overflow: "hidden",
+	whiteSpace: "nowrap"
+});
+
+//#endregion
+export { toolbarTitle };

package/dist/likec4diagram/custom/nodes/toolbar/types.mjs

@@ -0,0 +1,9 @@
+//#region src/likec4diagram/custom/nodes/toolbar/types.ts
+const SemanticColors = [
+	"primary",
+	"secondary",
+	"muted"
+];
+
+//#endregion
+export { SemanticColors };

package/dist/likec4diagram/custom/nodes/toolbar/useHandlers.mjs

@@ -0,0 +1,41 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../../../../hooks/useCallbackRef.mjs";
+import { useDiagram } from "../../../../hooks/safeContext.mjs";
+import { useState } from "react";
+
+//#region src/likec4diagram/custom/nodes/toolbar/useHandlers.ts
+function useHandlers(target, props) {
+	const diagram = useDiagram();
+	const [originalColor, setOriginalColor] = useState(null);
+	const onColorPreview = useCallbackRef((color) => {
+		if (color === null) {
+			if (!originalColor) return;
+			setOriginalColor(null);
+			diagram.updateNodeData(props.data.id, { color: originalColor });
+			return;
+		}
+		setOriginalColor((value) => value ?? props.data.color);
+		diagram.updateNodeData(props.data.id, { color });
+	});
+	const onChange = useCallbackRef((change) => {
+		const { shape, color, ...style } = change;
+		diagram.updateNodeData(props.data.id, {
+			...shape && { shape },
+			...color && { color },
+			style
+		});
+		diagram.triggerChange({
+			op: "change-element-style",
+			style: change,
+			targets: [target]
+		});
+	});
+	return {
+		elementColor: originalColor ?? props.data.color,
+		onColorPreview,
+		onChange
+	};
+}
+
+//#endregion
+export { useHandlers };