@likec4/diagram 1.59.4 → 1.60.0

package/dist/base/updateNodes.js

@@ -1,45 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { deepEqual, shallowEqual } from "fast-equals";
-import { hasSubObject, isDefined, pickBy } from "remeda";
-import { getNodeDimensions } from "@xyflow/system";
-//#region src/base/updateNodes.ts
-var EMPTY_OBJ = {};
-function _update(current, updated) {
-	if (current === updated) return current;
-	updated = updated.map((update) => {
-		const existing = current.find((n) => n.id === update.id && n.type === update.type);
-		if (!existing) return update;
-		if (existing === update) return existing;
-		const isSameData = hasSubObject(existing.data, update.data);
-		let data = isSameData ? existing.data : update.data;
-		if (!isSameData) {
-			if (isDefined(existing.data.hovered) && !isDefined(data.hovered)) data = Object.assign({ hovered: existing.data.hovered }, data);
-			if (isDefined(existing.data.dimmed) && !isDefined(data.dimmed)) data = Object.assign({ dimmed: existing.data.dimmed }, data);
-		}
-		const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
-		const haveHandles = Object.hasOwn(existing, "handles") || Object.hasOwn(update, "handles");
-		const isSameHandles = !haveHandles || deepEqual(existing.handles ?? [], update.handles ?? []);
-		if (isSameData && isSameHandles && deepEqual(existingWidth, update.width ?? update.initialWidth) && deepEqual(existingHeight, update.height ?? update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.draggable, update.draggable ?? existing.draggable) && deepEqual(existing.ariaLabel, update.ariaLabel ?? existing.ariaLabel) && deepEqual(existing.ariaRole, update.ariaRole ?? existing.ariaRole) && deepEqual(existing.dragHandle, update.dragHandle) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.position, update.position) && deepEqual(existing.domAttributes ?? EMPTY_OBJ, update.domAttributes ?? EMPTY_OBJ) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) return existing;
-		const handles = haveHandles && isSameHandles ? existing.handles : update.handles;
-		return {
-			...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId" && k !== "handles"),
-			..."measured" in existing && { measured: {
-				width: update.width ?? update.initialWidth,
-				height: update.height ?? update.initialHeight
-			} },
-			...pickBy(update, isDefined),
-			width: update.width ?? update.initialWidth,
-			height: update.height ?? update.initialHeight,
-			...handles && { handles },
-			data
-		};
-	});
-	return shallowEqual(current, updated) ? current : updated;
-}
-function updateNodes(current, update) {
-	if (isDefined(update)) return _update(current, update);
-	update = current;
-	return (existing) => _update(existing, update);
-}
-//#endregion
-export { updateNodes };

package/dist/base-primitives/Markdown.d.ts

@@ -1,59 +0,0 @@
-import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
-import { JsxStyleProps } from '@likec4/styles/types';
-import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
-export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color' | 'translate'> & {
-    value: RichTextType;
-    /**
-     * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
-     * @default false
-     */
-    uselikec4palette?: boolean;
-    /**
-     * Scale factor for the block
-     * @default 1
-     */
-    textScale?: number;
-    /**
-     * Font size for the block
-     * @default 'md'
-     */
-    fontSize?: (JsxStyleProps['fontSize'] & string) | undefined;
-    /**
-     * If true, the component will not render anything if the value is empty.
-     * @default false
-     */
-    hideIfEmpty?: boolean | undefined;
-    /**
-     * Text to show if the value is empty.
-     * @default "no content"
-     */
-    emptyText?: string;
-};
-export declare const Markdown: ForwardRefExoticComponent<Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "translate" | "children" | "dangerouslySetInnerHTML"> & {
-    value: RichTextType;
-    /**
-     * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
-     * @default false
-     */
-    uselikec4palette?: boolean;
-    /**
-     * Scale factor for the block
-     * @default 1
-     */
-    textScale?: number;
-    /**
-     * Font size for the block
-     * @default 'md'
-     */
-    fontSize?: (JsxStyleProps["fontSize"] & string) | undefined;
-    /**
-     * If true, the component will not render anything if the value is empty.
-     * @default false
-     */
-    hideIfEmpty?: boolean | undefined;
-    /**
-     * Text to show if the value is empty.
-     * @default "no content"
-     */
-    emptyText?: string;
-} & RefAttributes<HTMLDivElement>>;

package/dist/base-primitives/Markdown.js

@@ -1,35 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { cx } from "@likec4/styles/css";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { Text } from "@mantine/core";
-import { Box as Box$1 } from "@likec4/styles/jsx";
-import { markdownBlock } from "@likec4/styles/recipes";
-//#region src/base-primitives/Markdown.tsx
-var Markdown = forwardRef(({ value, textScale = 1, uselikec4palette = false, hideIfEmpty = false, emptyText = "no content", className, style, fontSize, ...props }, ref) => {
-	if (value.isEmpty && hideIfEmpty) return null;
-	const content = value.nonEmpty ? value.isMarkdown ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx("p", { children: value.text }) } : { children: /* @__PURE__ */ jsx(Text, {
-		component: "span",
-		fz: "xs",
-		c: "dimmed",
-		style: { userSelect: "none" },
-		children: emptyText
-	}) };
-	return /* @__PURE__ */ jsx(Box$1, {
-		...props,
-		ref,
-		className: cx(markdownBlock({
-			uselikec4palette,
-			value: value.isMarkdown ? "markdown" : "plaintext"
-		}), className),
-		style: {
-			...style,
-			...fontSize && { "--text-fz": `var(--font-sizes-${fontSize}, var(--font-sizes-md))` },
-			...textScale !== 1 && { ["--mantine-scale"]: textScale }
-		},
-		...content
-	});
-});
-Markdown.displayName = "Markdown";
-//#endregion
-export { Markdown };

package/dist/base-primitives/NodeHandles.d.ts

@@ -1,7 +0,0 @@
-import { AutoLayoutDirection } from '@likec4/core/types';
-/**
- * XYFlow requires handles to be defined on nodes.
- */
-export declare function DefaultHandles({ direction }: {
-    direction?: AutoLayoutDirection | undefined;
-}): import("react").JSX.Element;

package/dist/base-primitives/NodeHandles.js

@@ -1,42 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Handle, Position } from "@xyflow/react";
-import { nonexhaustive } from "@likec4/core";
-//#region src/base-primitives/NodeHandles.tsx
-/**
-* XYFlow requires handles to be defined on nodes.
-*/
-function DefaultHandles({ direction = "TB" }) {
-	let sourcePosition;
-	let targetPosition;
-	switch (direction) {
-		case "TB":
-			sourcePosition = Position.Bottom;
-			targetPosition = Position.Top;
-			break;
-		case "BT":
-			sourcePosition = Position.Top;
-			targetPosition = Position.Bottom;
-			break;
-		case "LR":
-			sourcePosition = Position.Right;
-			targetPosition = Position.Left;
-			break;
-		case "RL":
-			sourcePosition = Position.Left;
-			targetPosition = Position.Right;
-			break;
-		default: nonexhaustive(direction);
-	}
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Handle, {
-		type: "source",
-		position: sourcePosition,
-		className: "likec4-node-handle-center"
-	}), /* @__PURE__ */ jsx(Handle, {
-		type: "target",
-		position: targetPosition,
-		className: "likec4-node-handle-center"
-	})] });
-}
-//#endregion
-export { DefaultHandles };

package/dist/base-primitives/compound/CompoundActionButton.d.ts

@@ -1,10 +0,0 @@
-import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import { Simplify } from 'type-fest';
-import { BaseNodeProps } from '../../base/types';
-type CompoundActionButtonProps = Simplify<BaseNodeProps & {
-    icon?: ReactNode;
-    ariaLabel?: string;
-    onClick: (e: ReactMouseEvent) => void;
-}>;
-export declare function CompoundActionButton({ selected, data: { hovered: isHovered, }, icon, ariaLabel, onClick, }: CompoundActionButtonProps): import("react").JSX.Element;
-export {};

package/dist/base-primitives/compound/CompoundActionButton.js

@@ -1,55 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-import { compoundActionBtn } from "./actionbtns.css.js";
-import { cx } from "@likec4/styles/css";
-import { IconZoomScan } from "@tabler/icons-react";
-import { jsx } from "react/jsx-runtime";
-import { ActionIcon } from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
-import * as m from "motion/react-m";
-import { actionBtn } from "@likec4/styles/recipes";
-//#region src/base-primitives/compound/CompoundActionButton.tsx
-var variants = {
-	normal: {
-		scale: 1,
-		x: 0,
-		y: 0
-	},
-	hovered: {
-		scale: 1.2,
-		x: -1,
-		y: -1
-	},
-	whileHover: {
-		scale: 1.4,
-		x: -3,
-		y: -1
-	},
-	whileTap: { scale: 1 }
-};
-function CompoundActionButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Navigate to view", onClick }) {
-	const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
-	const isActionVisible = selected || isHoverDebounced;
-	let variant = isHoverDebounced ? "hovered" : "normal";
-	return /* @__PURE__ */ jsx(m.div, {
-		initial: false,
-		variants,
-		animate: variant,
-		whileHover: "whileHover",
-		whileTap: "whileTap",
-		className: "likec4-compound-navigation compound-action",
-		onClick: stopPropagation,
-		tabIndex: -1,
-		children: /* @__PURE__ */ jsx(ActionIcon, {
-			className: cx("nodrag nopan", compoundActionBtn({ delay: isHovered && !isHoverDebounced }), actionBtn({ variant: "transparent" })),
-			tabIndex: isActionVisible ? 0 : -1,
-			inert: isActionVisible ? void 0 : true,
-			"aria-label": ariaLabel,
-			onClick,
-			onDoubleClick: stopPropagation,
-			children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
-		})
-	});
-}
-//#endregion
-export { CompoundActionButton };

package/dist/base-primitives/compound/CompoundDetailsButton.d.ts

@@ -1,10 +0,0 @@
-import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import { Simplify } from 'type-fest';
-import { BaseNodeProps } from '../../base/types';
-type CompoundDetailsButtonProps = Simplify<BaseNodeProps & {
-    icon?: ReactNode;
-    ariaLabel?: string;
-    onClick: (e: ReactMouseEvent) => void;
-}>;
-export declare function CompoundDetailsButton({ selected, data: { hovered: isHovered, }, icon, ariaLabel, onClick, }: CompoundDetailsButtonProps): import("react").JSX.Element;
-export {};

package/dist/base-primitives/compound/CompoundDetailsButton.js

@@ -1,45 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-import { compoundActionBtn } from "./actionbtns.css.js";
-import { cx } from "@likec4/styles/css";
-import { IconId } from "@tabler/icons-react";
-import { jsx } from "react/jsx-runtime";
-import { ActionIcon } from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
-import * as m from "motion/react-m";
-import { actionBtn } from "@likec4/styles/recipes";
-//#region src/base-primitives/compound/CompoundDetailsButton.tsx
-var variants = {
-	normal: { scale: 1 },
-	hovered: { scale: 1.2 },
-	whileHover: { scale: 1.4 },
-	whileTap: { scale: 1 }
-};
-function CompoundDetailsButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Open details", onClick }) {
-	const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
-	const isActionVisible = selected || isHoverDebounced;
-	const variant = isHoverDebounced ? "hovered" : "normal";
-	return /* @__PURE__ */ jsx(m.div, {
-		initial: false,
-		variants,
-		animate: variant,
-		whileHover: "whileHover",
-		whileTap: "whileTap",
-		className: "likec4-compound-details details-button",
-		tabIndex: -1,
-		children: /* @__PURE__ */ jsx(ActionIcon, {
-			className: cx("nodrag nopan", compoundActionBtn({ delay: isHovered && !isHoverDebounced }), actionBtn({ variant: "transparent" })),
-			tabIndex: isActionVisible ? 0 : -1,
-			inert: isActionVisible ? void 0 : true,
-			"aria-label": ariaLabel,
-			onClick,
-			onDoubleClick: stopPropagation,
-			children: icon ?? /* @__PURE__ */ jsx(IconId, {
-				stroke: 1.8,
-				style: { width: "75%" }
-			})
-		})
-	});
-}
-//#endregion
-export { CompoundDetailsButton };

package/dist/base-primitives/compound/CompoundNodeContainer.d.ts

@@ -1,15 +0,0 @@
-import { Color, ElementStyle } from '@likec4/core/types';
-import { HTMLAttributes, PropsWithChildren } from 'react';
-import { BaseNode, BaseNodeProps } from '../../base/types';
-export type RequiredData = {
-    color: Color;
-    depth: number;
-    style: ElementStyle;
-};
-type CompoundNodeContainerProps = PropsWithChildren<HTMLAttributes<HTMLDivElement> & {
-    layout?: boolean | 'position' | 'size' | 'preserve-aspect';
-    layoutId?: string | undefined;
-    nodeProps: BaseNodeProps<BaseNode<RequiredData>>;
-}>;
-export declare function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react").JSX.Element;
-export {};

package/dist/base-primitives/compound/CompoundNodeContainer.js

@@ -1,47 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useLikeC4Styles } from "../../hooks/useLikeC4Styles.js";
-import { cx } from "@likec4/styles/css";
-import { jsx } from "react/jsx-runtime";
-import { clamp } from "remeda";
-import * as m from "motion/react-m";
-import { compoundNode } from "@likec4/styles/recipes";
-//#region src/base-primitives/compound/CompoundNodeContainer.tsx
-function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered = false, dimmed: isDimmed = false, ...data } }, className, children, style, ...rest }) {
-	const styles = useLikeC4Styles();
-	let opacity = clamp(data.style.opacity ?? 100, {
-		min: 0,
-		max: 100
-	});
-	const isTransparent = opacity < 98;
-	const borderOpacity = 50 + clamp(50 * (opacity / 100), {
-		min: 0,
-		max: 50
-	});
-	const compoundClass = compoundNode({
-		isTransparent,
-		inverseColor: opacity < 70,
-		borderStyle: data.style.border ?? (isTransparent ? styles.defaults.group.border : "none")
-	});
-	const depth = clamp(data.depth ?? 1, {
-		min: 1,
-		max: 5
-	});
-	return /* @__PURE__ */ jsx(m.div, {
-		className: cx(compoundClass, className),
-		initial: false,
-		"data-likec4-hovered": isHovered,
-		"data-likec4-color": data.color,
-		"data-compound-depth": depth,
-		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
-		tabIndex: -1,
-		animate: {
-			["--_border-transparency"]: `${borderOpacity}%`,
-			["--_compound-transparency"]: `${opacity}%`
-		},
-		style,
-		...rest,
-		children
-	});
-}
-//#endregion
-export { CompoundNodeContainer };

package/dist/base-primitives/compound/CompoundTitle.d.ts

@@ -1,19 +0,0 @@
-import { Color, ComputedNodeStyle, NodeId } from '@likec4/core/types';
-type RequiredData = {
-    id: NodeId;
-    title: string;
-    color: Color;
-    style: ComputedNodeStyle;
-    icon?: string | null;
-};
-type CompoundTitleProps = {
-    data: RequiredData;
-    /**
-     * Opt-in: hide the title from assistive technologies. The main diagram sets
-     * this because the compound node's accessible label already conveys the
-     * title, so re-exposing it here would cause a duplicate announcement.
-     */
-    'aria-hidden'?: boolean | undefined;
-};
-export declare function CompoundTitle({ data, 'aria-hidden': ariaHidden }: CompoundTitleProps): import("react").JSX.Element;
-export {};

package/dist/base-primitives/compound/CompoundTitle.js

@@ -1,20 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { IconRenderer } from "../../context/IconRenderer.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/base-primitives/compound/CompoundTitle.tsx
-function CompoundTitle({ data, "aria-hidden": ariaHidden }) {
-	const elementIcon = IconRenderer({
-		element: data,
-		className: "likec4-compound-icon"
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "likec4-compound-title-container",
-		"aria-hidden": ariaHidden,
-		children: [elementIcon, /* @__PURE__ */ jsx("div", {
-			className: "likec4-compound-title",
-			children: data.title
-		})]
-	});
-}
-//#endregion
-export { CompoundTitle };

package/dist/base-primitives/compound/actionbtns.css.d.ts

@@ -1,11 +0,0 @@
-import { RecipeRuntimeFn } from '@likec4/styles/types';
-export declare const compoundActionBtn: RecipeRuntimeFn<{
-    delay: {
-        true: {
-            transitionDelay: {
-                base: "[0.2s]";
-                _hover: "0";
-            };
-        };
-    };
-}>;

package/dist/base-primitives/compound/actionbtns.css.js

@@ -1,11 +0,0 @@
-import { cva } from "@likec4/styles/css";
-//#region src/base-primitives/compound/actionbtns.css.ts
-var compoundActionBtn = cva({
-	base: { transitionDuration: "medium" },
-	variants: { delay: { true: { transitionDelay: {
-		base: "[0.2s]",
-		_hover: "0"
-	} } } }
-});
-//#endregion
-export { compoundActionBtn };

package/dist/base-primitives/edge/EdgeActionButton.d.ts

@@ -1,8 +0,0 @@
-import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-type EdgeActionBtnProps = {
-    icon?: ReactNode;
-    ariaLabel?: string;
-    onClick: (e: ReactMouseEvent) => void;
-};
-export declare function EdgeActionButton({ icon, ariaLabel, onClick }: EdgeActionBtnProps): import("react").JSX.Element;
-export {};

package/dist/base-primitives/edge/EdgeActionButton.js

@@ -1,21 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-import { cx } from "@likec4/styles/css";
-import { IconZoomScan } from "@tabler/icons-react";
-import { jsx } from "react/jsx-runtime";
-import { ActionIcon } from "@mantine/core";
-import { edgeActionBtn } from "@likec4/styles/recipes";
-//#region src/base-primitives/edge/EdgeActionButton.tsx
-function EdgeActionButton({ icon, ariaLabel = "Navigate to view", onClick }) {
-	return /* @__PURE__ */ jsx(ActionIcon, {
-		className: cx("nodrag nopan", edgeActionBtn()),
-		onPointerDownCapture: stopPropagation,
-		onClick,
-		role: "button",
-		"aria-label": ariaLabel,
-		onDoubleClick: stopPropagation,
-		children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, {})
-	});
-}
-//#endregion
-export { EdgeActionButton };

package/dist/base-primitives/edge/EdgeContainer.d.ts

@@ -1,11 +0,0 @@
-import { DiagramEdge } from '@likec4/core/types';
-import { PropsWithChildren } from 'react';
-import { UndefinedOnPartialDeep } from 'type-fest';
-import { BaseEdgePropsWithData } from '../../base/types';
-type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'dir' | 'color'>>;
-type EdgeContainerProps = PropsWithChildren<BaseEdgePropsWithData<Data> & {
-    component?: 'g' | 'svg' | undefined;
-    className?: string | undefined;
-}>;
-export declare function EdgeContainer({ className, component, selectable, selected, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, animated, children, style, ...rest }: EdgeContainerProps): import("react").JSX.Element;
-export {};

package/dist/base-primitives/edge/EdgeContainer.js

@@ -1,33 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { cx } from "@likec4/styles/css";
-import { jsx } from "react/jsx-runtime";
-import { pickBy } from "remeda";
-import { invariant } from "@likec4/core";
-//#region src/base-primitives/edge/EdgeContainer.tsx
-function EdgeContainer({ className, component = "g", selectable = false, selected = false, data: { color = "gray", hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, ...data }, animated = false, children, style, ...rest }) {
-	animated = animated || isActive;
-	const props = {
-		className: cx(className, "likec4-edge-container", selected && "selected", selectable && "selectable"),
-		"data-likec4-color": color,
-		"data-edge-dir": data.dir ?? "forward",
-		"data-edge-active": isActive,
-		"data-likec4-hovered": isHovered,
-		...animated && { "data-likec4-animated": animated },
-		...selected && { "data-likec4-selected": selected },
-		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
-		...pickBy(rest, (value, key) => value !== void 0 && key.startsWith("data-"))
-	};
-	if (component === "svg") return /* @__PURE__ */ jsx("svg", {
-		style,
-		...props,
-		children
-	});
-	invariant(component === "g", "EdgeContainer: component must be \"g\" or \"svg\"");
-	return /* @__PURE__ */ jsx("g", {
-		style,
-		...props,
-		children
-	});
-}
-//#endregion
-export { EdgeContainer };

package/dist/base-primitives/edge/EdgeLabel.d.ts

@@ -1,15 +0,0 @@
-import { DiagramEdge } from '@likec4/core/types';
-import { HTMLMotionProps } from 'motion/react';
-import { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
-import { UndefinedOnPartialDeep } from 'type-fest';
-import { BaseEdgePropsWithData } from '../../base/types';
-type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'label' | 'technology'>>;
-type EdgeLabelProps = HTMLMotionProps<'div'> & {
-    children?: ReactNode;
-    edgeProps: BaseEdgePropsWithData<Data>;
-    isSequenceStep?: boolean;
-    stepNum?: number;
-    pointerEvents?: 'all' | 'none';
-};
-export declare const EdgeLabel: ForwardRefExoticComponent<Omit<EdgeLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
-export {};

package/dist/base-primitives/edge/EdgeLabel.js

@@ -1,44 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { cx } from "@likec4/styles/css";
-import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { isTruthy } from "remeda";
-import { Box } from "@likec4/styles/jsx";
-import * as m from "motion/react-m";
-import { edgeLabel } from "@likec4/styles/recipes";
-//#region src/base-primitives/edge/EdgeLabel.tsx
-var EdgeLabel = forwardRef(({ edgeProps: { id, data: { label, technology, hovered: isHovered = false }, selected = false, selectable = false }, isSequenceStep: isStepEdge = false, stepNum, pointerEvents = "all", className, children, ...rest }, ref) => {
-	const hasLabel = isTruthy(label) || isTruthy(technology);
-	return /* @__PURE__ */ jsxs(m.div, {
-		ref,
-		className: cx("likec4-edge-label", edgeLabel({
-			pointerEvents,
-			isStepEdge,
-			cursor: selectable || isStepEdge ? "pointer" : "default"
-		}), className),
-		"data-edge-id": id,
-		animate: { scale: isHovered && !selected ? 1.06 : 1 },
-		...rest,
-		children: [isStepEdge && stepNum && /* @__PURE__ */ jsx(Box, {
-			className: "likec4-edge-label__step-number",
-			children: stepNum
-		}), hasLabel && /* @__PURE__ */ jsxs(Box, {
-			className: "likec4-edge-label__contents",
-			children: [
-				isTruthy(label) && /* @__PURE__ */ jsx(Box, {
-					lineClamp: 5,
-					className: "likec4-edge-label__text",
-					children: label
-				}),
-				isTruthy(technology) && /* @__PURE__ */ jsx(Box, {
-					className: "likec4-edge-label__technology",
-					children: "[ " + technology + " ]"
-				}),
-				children
-			]
-		})]
-	});
-});
-EdgeLabel.displayName = "EdgeLabel";
-//#endregion
-export { EdgeLabel };

package/dist/base-primitives/edge/EdgeLabelContainer.d.ts

@@ -1,19 +0,0 @@
-import { DiagramEdge } from '@likec4/core/types';
-import { HTMLAttributes } from 'react';
-import { UndefinedOnPartialDeep } from 'type-fest';
-import { BaseEdgePropsWithData } from '../../base/types';
-type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'labelBBox' | 'color'>>;
-type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
-    /**
-     * label position with optional translate
-     */
-    labelPosition?: {
-        x?: number | undefined;
-        y?: number | undefined;
-        translate?: string | undefined;
-    } | undefined;
-    edgeProps: BaseEdgePropsWithData<Data>;
-};
-export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, animated, }, labelPosition: labelXY, className, style: contentStyle, // applied to inner content div, not the positioned container
-children, ...rest }: EdgeLabelContainerProps): import("react").JSX.Element | null;
-export {};

package/dist/base-primitives/edge/EdgeLabelContainer.js

@@ -1,38 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { cx } from "@likec4/styles/css";
-import { jsx } from "react/jsx-runtime";
-import { EdgeLabelRenderer } from "@xyflow/react";
-import { isNumber } from "remeda";
-//#region src/base-primitives/edge/EdgeLabelContainer.tsx
-var toCssVarValue = (value) => {
-	if (value === void 0) return "";
-	return isNumber(value) ? `${Math.trunc(value)}px` : value;
-};
-function EdgeLabelContainer({ edgeProps: { id, selected = false, data: { hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, labelBBox, color = "gray" }, animated }, labelPosition: labelXY, className, style: contentStyle, children, ...rest }) {
-	let labelX = labelXY?.x ?? labelBBox?.x;
-	let labelY = labelXY?.y ?? labelBBox?.y;
-	if (labelX === void 0 || labelY === void 0) return null;
-	const translate = labelXY?.translate ?? "";
-	animated = animated || isActive;
-	return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx("div", {
-		...rest,
-		className: cx("nodrag nopan", "likec4-edge-label-container", className),
-		"data-likec4-hovered": isHovered,
-		"data-likec4-color": color,
-		"data-edge-active": isActive,
-		"data-edge-animated": animated || isActive,
-		...animated && { "data-likec4-animated": animated },
-		...selected !== false && { "data-likec4-selected": selected },
-		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
-		style: { transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate}` },
-		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				...contentStyle,
-				...labelBBox && { maxWidth: labelBBox.width + 20 }
-			},
-			children
-		})
-	}, id) });
-}
-//#endregion
-export { EdgeLabelContainer };