@likec4/diagram 1.59.4 → 1.61.0

package/dist/likec4diagram/custom/nodes/SequenceActorNode.js

@@ -1,151 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
-import { ElementData } from "../../../base-primitives/element/ElementData.js";
-import { ElementNodeContainer } from "../../../base-primitives/element/ElementNodeContainer.js";
-import { ElementShape } from "../../../base-primitives/element/ElementShape.js";
-import { ElementActions } from "./ElementActions.js";
-import { NodeDrifts } from "./NodeDrifts.js";
-import { NodeNotes } from "./NodeNotes.js";
-import { ElementToolbar } from "./toolbar/ElementToolbar.js";
-import { ElementDetailsButtonWithHandler } from "./nodes.js";
-import { css } from "@likec4/styles/css";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Handle, Position } from "@xyflow/react";
-import { isTruthy } from "remeda";
-import { m } from "motion/react";
-import { Box } from "@likec4/styles/jsx";
-//#region src/likec4diagram/custom/nodes/SequenceActorNode.tsx
-var positionMap = {
-	left: Position.Left,
-	right: Position.Right,
-	top: Position.Top,
-	bottom: Position.Bottom
-};
-var ActorStepPort = ({ nodeProps: { selected, data }, port: p }) => {
-	let scaleX = 1;
-	let scaleY = 1;
-	if (data.hovered || selected) {
-		scaleX = 1.8;
-		scaleY = 1.1;
-	}
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(m.div, {
-		"data-likec4-color": data.color,
-		className: css({
-			position: "absolute",
-			backgroundColor: "var(--likec4-palette-fill)",
-			rounded: "xs"
-		}),
-		initial: false,
-		animate: {
-			scaleX,
-			scaleY
-		},
-		transition: {
-			type: "spring",
-			stiffness: 400,
-			damping: 30
-		},
-		style: {
-			x: "-50%",
-			y: "-50%",
-			top: p.cy,
-			left: p.cx,
-			width: 5,
-			visibility: p.hidden ? "hidden" : "visible",
-			height: p.height
-		}
-	}), /* @__PURE__ */ jsx(Handle, {
-		id: p.id,
-		type: p.type,
-		position: positionMap[p.position],
-		style: {
-			top: p.cy - 3,
-			left: p.cx - 3,
-			width: 6,
-			height: 6,
-			right: "unset",
-			bottom: "unset",
-			visibility: "hidden",
-			transform: p.position === "left" ? "translate(-150%, 0)" : "translate(100%, 0)"
-		}
-	})] });
-};
-var hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
-function SequenceActorNode(props) {
-	const { enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
-	const data = props.data;
-	const { id, positionAbsoluteY, data: { viewHeight, hovered: isHovered = false, ports } } = props;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Box, {
-			"data-likec4-color": "gray",
-			className: css({
-				position: "absolute",
-				rounded: "xs",
-				top: "1",
-				pointerEvents: "none",
-				transition: "fast",
-				translateX: "-1/2",
-				translate: "auto",
-				zIndex: "base"
-			}),
-			style: {
-				backgroundColor: "var(--likec4-palette-stroke)",
-				opacity: isHovered ? .6 : .4,
-				left: "50%",
-				width: isHovered ? 3 : 2,
-				height: viewHeight - positionAbsoluteY
-			}
-		}),
-		/* @__PURE__ */ jsxs(ElementNodeContainer, {
-			nodeProps: props,
-			children: [
-				enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-				/* @__PURE__ */ jsx(ElementShape, { ...props }),
-				/* @__PURE__ */ jsx(ElementData, {
-					...props,
-					"aria-hidden": true
-				}),
-				hasModelFqn(props) && /* @__PURE__ */ jsxs(Fragment, { children: [
-					/* @__PURE__ */ jsx(ElementActions, { ...props }),
-					enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, {
-						id,
-						data
-					}),
-					!enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props })
-				] }),
-				enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props })
-			]
-		}),
-		ports.map((p) => /* @__PURE__ */ jsx(ActorStepPort, {
-			port: p,
-			nodeProps: props
-		}, p.id))
-	] });
-}
-function SequenceParallelArea(props) {
-	return /* @__PURE__ */ jsx(Box, {
-		"data-likec4-color": props.data.color,
-		css: {
-			width: "100%",
-			height: "100%",
-			border: "default",
-			rounded: "sm",
-			"--_color": {
-				base: "var(--likec4-palette-stroke)",
-				_dark: "[color-mix(in oklab, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]"
-			},
-			borderColor: "[var(--_color)/30]",
-			backgroundColor: "var(--likec4-palette-fill)/15",
-			pointerEvents: "none",
-			paddingLeft: "2",
-			paddingTop: "0.5",
-			fontSize: "xs",
-			fontWeight: "bold",
-			letterSpacing: "[0.75px]",
-			color: "[var(--_color)/75]"
-		},
-		children: "PARALLEL"
-	});
-}
-//#endregion
-export { SequenceActorNode, SequenceParallelArea };

package/dist/likec4diagram/custom/nodes/SequenceSubFlow.d.ts

@@ -1,2 +0,0 @@
-import { Types } from '../../types';
-export declare function SequenceSubflowArea(props: Types.NodeProps<'seq-subflow'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/SequenceSubFlow.js

@@ -1,237 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../../hooks/safeContext.js";
-import { css, cx, sva } from "@likec4/styles/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { hstack } from "@likec4/styles/patterns";
-//#region src/likec4diagram/custom/nodes/SequenceSubFlow.tsx
-var labelStyle = css.raw({
-	color: "colorPalette.text",
-	fontSize: "[9px]",
-	fontWeight: "bold",
-	lineHeight: "xs",
-	letterSpacing: "tight",
-	textTransform: "uppercase"
-});
-var withBorder = css.raw({
-	borderWidth: "strong",
-	borderStyle: "solid",
-	borderColor: "colorPalette.border"
-});
-var withBackground = css.raw({
-	background: "colorPalette",
-	["&[data-state=\"hovered\"]"]: {
-		background: "colorPalette.hovered",
-		transition: "fastest",
-		transitionDelay: "fastest",
-		transitionTimingFunction: "out",
-		transitionProperty: "background"
-	},
-	["&[data-state=\"collapsed\"]"]: { background: "colorPalette.label" }
-});
-var recipe = sva({
-	slots: [
-		"root",
-		"content",
-		"label",
-		"title"
-	],
-	base: {
-		root: css.raw({
-			width: "100%",
-			height: "100%",
-			padding: "0"
-		}),
-		content: hstack.raw({
-			gap: "2",
-			width: "100%",
-			alignItems: "center"
-		}),
-		label: css.raw(labelStyle),
-		title: css.raw({
-			flex: "1",
-			color: `[oklch(from {colors.colorPalette.text} l calc(c - 0.15) h)]`,
-			fontSize: "xs",
-			lineHeight: "xs",
-			fontWeight: "medium",
-			truncate: true
-		})
-	},
-	variants: { variant: {
-		subflow: {
-			root: css.raw(withBackground, withBorder, { rounded: "md" }),
-			label: css.raw(withBorder, {
-				alignSelf: "stretch",
-				paddingInline: "2",
-				paddingBlock: "1",
-				background: "colorPalette.label",
-				width: "max-content",
-				borderTopLeftRadius: "sm",
-				borderBottomRightRadius: "sm",
-				borderTop: "none",
-				borderLeft: "none",
-				[":is([data-state=\"collapsed\"]) &"]: {
-					background: "none",
-					borderColor: "transparent"
-				}
-			})
-		},
-		branch: {
-			root: css.raw(withBackground, withBorder, {
-				rounded: "0",
-				borderTopWidth: "1",
-				["&[data-is-last=\"true\"]"]: {
-					borderBottomLeftRadius: "md",
-					borderBottomRightRadius: "md"
-				},
-				["&:not([data-is-last=\"true\"])"]: { borderBottomWidth: "1" },
-				["&[data-state=\"collapsed\"]"]: { background: "colorPalette.header" }
-			}),
-			label: css.raw({
-				position: "relative",
-				background: "colorPalette.label",
-				paddingLeft: "4.5",
-				paddingRight: "2",
-				paddingBlock: "1",
-				marginBlock: "2",
-				marginInlineStart: "2",
-				rounded: "sm",
-				minWidth: "[40px]",
-				width: "min-content",
-				textAlign: "center",
-				_before: {
-					position: "absolute",
-					content: "\" \"",
-					background: "currentColor",
-					width: "[5px]",
-					height: "[5px]",
-					opacity: "[.6]",
-					rounded: "pill",
-					top: "[50%]",
-					left: "2",
-					transform: "translateY(-50%)"
-				}
-			})
-		},
-		withbranches: { content: css.raw(withBorder, {
-			width: "100%",
-			borderTopLeftRadius: "md",
-			borderTopRightRadius: "md",
-			paddingInline: "2",
-			borderBottomWidth: "1",
-			background: "colorPalette.header"
-		}) }
-	} },
-	defaultVariants: { variant: "subflow" },
-	className: "seq-subflow"
-});
-/**
-* PandaCSS `colorPalette` classes for each sub-flow palette.
-* Declared as literals so the static analyzer can extract them.
-*/
-var palette = {
-	loop: css({ colorPalette: "subflow.loop" }),
-	opt: css({ colorPalette: "subflow.opt" }),
-	par: css({ colorPalette: "subflow.par" }),
-	break: css({ colorPalette: "subflow.break" }),
-	alt: css({ colorPalette: "subflow.alt" }),
-	try: css({ colorPalette: "subflow.try" })
-};
-var flowPresentation = {
-	loop: {
-		paletteClass: palette.loop,
-		variant: "subflow",
-		label: "loop"
-	},
-	opt: {
-		paletteClass: palette.opt,
-		variant: "subflow",
-		label: "opt"
-	},
-	par: {
-		paletteClass: palette.par,
-		variant: "subflow",
-		label: "par"
-	},
-	break: {
-		paletteClass: palette.break,
-		variant: "subflow",
-		label: "break"
-	},
-	alt: {
-		paletteClass: palette.alt,
-		variant: "withbranches",
-		label: "alt"
-	},
-	"alt-when": {
-		paletteClass: palette.alt,
-		variant: "branch",
-		label: "when"
-	},
-	"alt-else": {
-		paletteClass: palette.alt,
-		variant: "branch",
-		label: "else"
-	},
-	"alt-if": {
-		paletteClass: palette.alt,
-		variant: "branch",
-		label: "if"
-	},
-	try: {
-		paletteClass: palette.try,
-		variant: "withbranches",
-		label: "try"
-	},
-	"try-block": {
-		paletteClass: palette.try,
-		variant: "branch",
-		label: "block"
-	},
-	"try-catch": {
-		paletteClass: palette.break,
-		variant: "branch",
-		label: "catch"
-	},
-	"try-finally": {
-		paletteClass: palette.break,
-		variant: "branch",
-		label: "finally"
-	}
-};
-function SequenceSubflowArea(props) {
-	const { data } = props;
-	const isDimmed = data.dimmed ?? false;
-	const diagram = useDiagram();
-	const toggleSequenceFlow = (event) => {
-		event.stopPropagation();
-		diagram.toggleSequenceFlow(data.flowId);
-	};
-	const { paletteClass, variant, label } = flowPresentation[data.flowType];
-	const classes = recipe({ variant });
-	const headerHeight = data.flowType === "alt" || data.flowType === "try" ? data.headerHeight : void 0;
-	let state = void 0;
-	if (data.collapsed === true) state = "collapsed";
-	else if (data.hovered) state = "hovered";
-	return /* @__PURE__ */ jsx("div", {
-		className: cx(classes.root, paletteClass),
-		"data-is-first": data.isFirst === true,
-		"data-is-last": data.isLast === true,
-		"data-state": state,
-		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
-		children: /* @__PURE__ */ jsxs("div", {
-			className: classes.content,
-			style: { height: headerHeight },
-			children: [/* @__PURE__ */ jsx("div", {
-				className: classes.label,
-				onClick: toggleSequenceFlow,
-				children: label
-			}), data.title && /* @__PURE__ */ jsx("div", {
-				className: classes.title,
-				onClick: toggleSequenceFlow,
-				children: data.title
-			})]
-		})
-	});
-}
-//#endregion
-export { SequenceSubflowArea };

package/dist/likec4diagram/custom/nodes/index.d.ts

@@ -1,11 +0,0 @@
-export { CompoundActions } from './CompoundActions';
-export { DeploymentElementActions, ElementActions } from './ElementActions';
-export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode, } from './nodes';
-export { SequenceActorNode, SequenceParallelArea } from './SequenceActorNode';
-export { SequenceSubflowArea } from './SequenceSubFlow';
-export { NodeDrifts, type NodeDriftsProps } from './NodeDrifts';
-export * from './CompoundActions';
-export * from './ElementActions';
-export * from './toolbar/CompoundToolbar';
-export * from './toolbar/ElementToolbar';
-export * from './toolbar/Toolbar';

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

@@ -1,19 +0,0 @@
-import { Fqn } from '@likec4/core';
-import { BaseNodeData } from '../../../base/types';
-import { Types } from '../../types';
-export declare function ElementDetailsButtonWithHandler(props: {
-    id: string;
-    selected?: boolean;
-    data: BaseNodeData & {
-        modelFqn?: Fqn | null | undefined;
-    };
-}): import("react").JSX.Element | null;
-export declare function CompoundDetailsButtonWithHandler(props: Types.NodeProps<'compound-deployment' | 'compound-element'>): import("react").JSX.Element | null;
-/**
- * Renders an element node.
- */
-export declare function ElementNode(props: Types.NodeProps<'element'>): import("react").JSX.Element;
-export declare function DeploymentNode(props: Types.NodeProps<'deployment'>): import("react").JSX.Element;
-export declare function CompoundElementNode(props: Types.NodeProps<'compound-element'>): import("react").JSX.Element;
-export declare function CompoundDeploymentNode(props: Types.NodeProps<'compound-deployment'>): import("react").JSX.Element;
-export declare function ViewGroupNode(props: Types.NodeProps<'view-group'>): import("react").JSX.Element;

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

@@ -1,172 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "../../../hooks/useCallbackRef.js";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
-import { useDiagram } from "../../../hooks/safeContext.js";
-import { CompoundDetailsButton } from "../../../base-primitives/compound/CompoundDetailsButton.js";
-import { CompoundNodeContainer } from "../../../base-primitives/compound/CompoundNodeContainer.js";
-import { CompoundTitle } from "../../../base-primitives/compound/CompoundTitle.js";
-import { ElementData } from "../../../base-primitives/element/ElementData.js";
-import { ElementDetailsButton } from "../../../base-primitives/element/ElementDetailsButton.js";
-import { ElementNodeContainer } from "../../../base-primitives/element/ElementNodeContainer.js";
-import { ElementShape } from "../../../base-primitives/element/ElementShape.js";
-import { ElementTags as ElementTags$1 } from "../../../base-primitives/element/ElementTags.js";
-import { DefaultHandles } from "../../../base-primitives/NodeHandles.js";
-import { CompoundActions } from "./CompoundActions.js";
-import { DeploymentElementActions, ElementActions } from "./ElementActions.js";
-import { NodeDrifts } from "./NodeDrifts.js";
-import { NodeNotes } from "./NodeNotes.js";
-import { CompoundDeploymentToolbar, CompoundElementToolbar } from "./toolbar/CompoundToolbar.js";
-import { DeploymentElementToolbar, ElementToolbar } from "./toolbar/ElementToolbar.js";
-import { css } from "@likec4/styles/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/likec4diagram/custom/nodes/nodes.tsx
-function ElementTags(props) {
-	const diagram = useDiagram();
-	return /* @__PURE__ */ jsx(ElementTags$1, {
-		onTagClick: useCallbackRef((tag) => {
-			diagram.openSearch(tag);
-		}),
-		onTagMouseEnter: useCallbackRef((tag) => {
-			diagram.send({
-				type: "tag.highlight",
-				tag
-			});
-		}),
-		onTagMouseLeave: useCallbackRef((_tag) => {
-			diagram.send({ type: "tag.unhighlight" });
-		}),
-		...props
-	});
-}
-function ElementDetailsButtonWithHandler(props) {
-	const diagram = useDiagram();
-	const fqn = props.data.modelFqn;
-	if (!fqn) return null;
-	return /* @__PURE__ */ jsx(ElementDetailsButton, {
-		...props,
-		onClick: (e) => {
-			e.stopPropagation();
-			diagram.openElementDetails(fqn, props.id);
-		}
-	});
-}
-function CompoundDetailsButtonWithHandler(props) {
-	const diagram = useDiagram();
-	const fqn = props.data.modelFqn;
-	if (!fqn) return null;
-	return /* @__PURE__ */ jsx(CompoundDetailsButton, {
-		...props,
-		onClick: (e) => {
-			e.stopPropagation();
-			diagram.openElementDetails(fqn, props.id);
-		}
-	});
-}
-/**
-* Renders an element node.
-*/
-function ElementNode(props) {
-	const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
-	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
-		nodeProps: props,
-		children: [
-			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(ElementShape, { ...props }),
-			/* @__PURE__ */ jsx(ElementData, {
-				...props,
-				"aria-hidden": true
-			}),
-			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
-			/* @__PURE__ */ jsx(ElementActions, { ...props }),
-			enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-			!enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
-			enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props }),
-			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
-		]
-	});
-}
-function DeploymentNode(props) {
-	const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
-	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
-		nodeProps: props,
-		children: [
-			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(ElementShape, { ...props }),
-			/* @__PURE__ */ jsx(ElementData, {
-				...props,
-				"aria-hidden": true
-			}),
-			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
-			/* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
-			enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-			!enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
-			enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props }),
-			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
-		]
-	});
-}
-var compoundHasDrifts = css({
-	outlineColor: "likec4.compare.outline",
-	outlineWidth: "extra",
-	outlineStyle: "dashed",
-	outlineOffset: "1.5"
-});
-var hasDrifts = (props) => {
-	return props.data.drifts && props.data.drifts.length > 0;
-};
-function CompoundElementNode(props) {
-	const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
-	const showDrifts = enableCompareWithLatest && hasDrifts(props);
-	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
-		className: showDrifts ? compoundHasDrifts : void 0,
-		nodeProps: props,
-		children: [
-			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(CompoundTitle, {
-				...props,
-				"aria-hidden": true
-			}),
-			/* @__PURE__ */ jsx(CompoundActions, { ...props }),
-			enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
-			!enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
-			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
-		]
-	});
-}
-function CompoundDeploymentNode(props) {
-	const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
-	const showDrifts = enableCompareWithLatest && hasDrifts(props);
-	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
-		className: showDrifts ? compoundHasDrifts : void 0,
-		nodeProps: props,
-		children: [
-			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(CompoundTitle, {
-				...props,
-				"aria-hidden": true
-			}),
-			/* @__PURE__ */ jsx(CompoundActions, { ...props }),
-			enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
-			!enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
-			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
-		]
-	});
-}
-function ViewGroupNode(props) {
-	const { enableCompareWithLatest } = useEnabledFeatures();
-	const showDrifts = enableCompareWithLatest && hasDrifts(props);
-	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
-		className: showDrifts ? compoundHasDrifts : void 0,
-		nodeProps: props,
-		children: [
-			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(CompoundTitle, {
-				...props,
-				"aria-hidden": true
-			}),
-			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
-		]
-	});
-}
-//#endregion
-export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode };

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

@@ -1,22 +0,0 @@
-import { LikeC4Theme, ThemeColor } from '@likec4/core';
-import { PopoverProps } from '@mantine/core';
-import { OnStyleChange } from './types';
-type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
-    elementColor: ThemeColor;
-    elementOpacity?: number | undefined;
-    isOpacityEditable?: boolean;
-    onColorPreview: (color: ThemeColor | null) => void;
-    onChange: OnStyleChange;
-};
-export declare function ColorButton({ elementColor, elementOpacity, onColorPreview, isOpacityEditable, onChange, ...props }: ColorButtonProps): import("react").JSX.Element;
-export declare function ColorSwatches({ theme, elementColor, onColorPreview, onChange, }: {
-    theme: LikeC4Theme;
-    elementColor: ThemeColor;
-    onColorPreview: (color: ThemeColor | null) => void;
-    onChange: (color: ThemeColor) => void;
-}): import("react").JSX.Element;
-export declare function OpacityOption({ elementOpacity, onOpacityChange, }: {
-    elementOpacity: number | undefined;
-    onOpacityChange: (opacity: number) => void;
-}): import("react").JSX.Element;
-export {};