@likec4/diagram 1.59.4 → 1.60.0

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

@@ -1,158 +0,0 @@
-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$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.ts

@@ -1,3 +0,0 @@
-import { Types } from '../../../types';
-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;

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

@@ -1,63 +0,0 @@
-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 })
-		]
-	});
-}
-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.ts

@@ -1,8 +0,0 @@
-import { Fqn } from '@likec4/core/types';
-import { Types } from '../../../types';
-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;

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

@@ -1,114 +0,0 @@
-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 })
-		]
-	});
-}
-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.ts

@@ -1,8 +0,0 @@
-import { NodeToolbarProps } from '@xyflow/react';
-import { ReactNode } from 'react';
-import { BaseNodeProps } from '../../../../base/types';
-export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
-    nodeProps: BaseNodeProps;
-    title: ReactNode;
-};
-export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react").JSX.Element | null;

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

@@ -1,62 +0,0 @@
-import "../../../../_virtual/_rolldown/runtime.js";
-import { stopPropagation } from "../../../../utils/xyflow.js";
-import { selectDiagramContext, useDiagramSelector } from "../../../../hooks/safeContext.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 = selectDiagramContext((context) => {
-	return context.xynodes.filter((x) => x.selected).length;
-});
-var 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.d.ts

@@ -1,18 +0,0 @@
-import { BorderStyle, DeploymentFqn, Fqn } from '@likec4/core/types';
-import { MergeExclusive } from 'type-fest';
-import { OnStyleChange } from './types';
-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.Element;
-export declare function GoToSourceButton(props: MergeExclusive<{
-    elementId: Fqn;
-}, {
-    deploymentId: DeploymentFqn;
-}>): import("react").JSX.Element | null;
-export declare function BorderStyleOption({ elementBorderStyle, onChange, }: {
-    elementBorderStyle: BorderStyle | undefined;
-    onChange: OnStyleChange;
-}): import("react").JSX.Element;

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

@@ -1,103 +0,0 @@
-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$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.d.ts

@@ -1 +0,0 @@
-export declare const toolbarTitle: string;

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

@@ -1,15 +0,0 @@
-import { css } from "@likec4/styles/css";
-//#region src/likec4diagram/custom/nodes/toolbar/styles.css.ts
-var 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.d.ts

@@ -1,5 +0,0 @@
-import { ThemeColor, ViewChange } from '@likec4/core/types';
-export declare const SemanticColors: readonly ["primary", "secondary", "muted"];
-export type OnStyleChange = (style: ViewChange.ChangeElementStyle['style']) => void;
-export type ThemeColorKey = typeof SemanticColors[number];
-export type ColorKey = Exclude<ThemeColor, ThemeColorKey>;

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

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

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

@@ -1,8 +0,0 @@
-import { DeploymentFqn, Fqn, ThemeColor } from '@likec4/core';
-import { Types } from '../../../types';
-import { OnStyleChange } from './types';
-export declare function useHandlers(target: Fqn | DeploymentFqn, props: Types.NodeProps): {
-    elementColor: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky";
-    onColorPreview: (color: ThemeColor | null) => void;
-    onChange: OnStyleChange;
-};

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

@@ -1,39 +0,0 @@
-import "../../../../_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "../../../../hooks/useCallbackRef.js";
-import { useDiagram } from "../../../../hooks/safeContext.js";
-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 };

package/dist/likec4diagram/relationship-popover/RelationshipPopover.d.ts

@@ -1,2 +0,0 @@
-import { MemoExoticComponent } from 'react';
-export declare const RelationshipPopover: MemoExoticComponent<() => import("react").JSX.Element | null>;