@likec4/diagram 1.59.3 → 1.60.0

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

@@ -1,65 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { EdgeMarkers, arrowTypeToMarker } from "./EdgeMarkers.js";
-import { css, cx } from "@likec4/styles/css";
-import { forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { edgePath } from "@likec4/styles/recipes";
-//#region src/base-primitives/edge/EdgePath.tsx
-var EdgePath = forwardRef(({ edgeProps: { id, data: { line, dir, tail, head }, selectable = true, style, interactionWidth }, isDragging = false, onEdgePointerDown, strokeWidth, svgPath }, svgPathRef) => {
-	let markerStartName = arrowTypeToMarker(tail);
-	let markerEndName = arrowTypeToMarker(head ?? "normal");
-	if (dir === "back") [markerStartName, markerEndName] = [markerEndName, markerStartName];
-	const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null;
-	const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null;
-	const isDotted = line === "dotted";
-	const isDashed = isDotted || line === "dashed";
-	let strokeDasharray;
-	if (isDotted) strokeDasharray = "1,8";
-	else if (isDashed) strokeDasharray = "8,10";
-	const classes = edgePath();
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		selectable && /* @__PURE__ */ jsx("path", {
-			className: cx("react-flow__edge-interaction", css({ fill: "none" })),
-			onPointerDown: onEdgePointerDown,
-			d: svgPath,
-			style: {
-				strokeWidth: interactionWidth ?? 10,
-				stroke: "currentcolor",
-				strokeOpacity: 0,
-				...isDragging ? { display: "none" } : {}
-			}
-		}),
-		/* @__PURE__ */ jsx("circle", {
-			className: cx("likec4-edge-middle-point", classes.middlePoint),
-			"data-edge-id": id,
-			style: { offsetPath: `path("${svgPath}")` }
-		}),
-		/* @__PURE__ */ jsxs("g", {
-			className: classes.markersCtx,
-			onPointerDown: onEdgePointerDown,
-			children: [
-				/* @__PURE__ */ jsxs("defs", { children: [MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }), MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })] }),
-				/* @__PURE__ */ jsx("path", {
-					className: cx("react-flow__edge-path", "hide-on-reduced-graphics", classes.pathBg, isDragging && css({ display: "none" })),
-					d: svgPath,
-					style,
-					strokeLinecap: "round"
-				}),
-				/* @__PURE__ */ jsx("path", {
-					ref: svgPathRef,
-					className: cx("react-flow__edge-path", classes.path, selectable && "react-flow__edge-interaction"),
-					d: svgPath,
-					style,
-					strokeWidth,
-					strokeLinecap: "round",
-					strokeDasharray,
-					markerStart: MarkerStart ? `url(#start${id})` : void 0,
-					markerEnd: MarkerEnd ? `url(#end${id})` : void 0
-				})
-			]
-		})
-	] });
-});
-EdgePath.displayName = "EdgePath";
-//#endregion
-export { EdgePath };

package/dist/base-primitives/element/ElementActionButtons.d.ts

@@ -1,43 +0,0 @@
-import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-type ElementActionButtonsProps = {
-    selected?: boolean;
-    data: {
-        hovered?: boolean;
-    };
-    buttons: ElementActionButtons.Item[];
-};
-/**
- * Center-Bottom bar with action buttons. Intended to be used inside "leaf" nodes.
- *
- * @param selected - Whether the node is selected
- * @param data - Node data
- * @param buttons - Action buttons
- *
- * @example
- * ```tsx
- * <ElementActionButtons
- *   {...nodeProps}
- *   Buttons={[
- *     {
- *       key: 'action1',
- *       icon: <IconZoomScan />,
- *       onClick: (e) => {
- *         e.stopPropagation()
- *         console.log('action1 clicked')
- *       },
- *     },
- *     //...
- *   ]}
- * />
- * ```
- */
-export declare function ElementActionButtons({ selected, data: { hovered: isHovered, }, buttons, }: ElementActionButtonsProps): import("react").JSX.Element | null;
-export declare namespace ElementActionButtons {
-    type Item = {
-        key?: string;
-        ariaLabel?: string;
-        icon?: ReactNode;
-        onClick: (e: ReactMouseEvent) => void;
-    };
-}
-export {};

package/dist/base-primitives/element/ElementActionButtons.js

@@ -1,98 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-import { cx } from "@likec4/styles/css";
-import { IconBolt } from "@tabler/icons-react";
-import { jsx } from "react/jsx-runtime";
-import { ActionIcon } from "@mantine/core";
-import { useId } from "@mantine/hooks";
-import * as m from "motion/react-m";
-import { actionBtn, actionButtons } from "@likec4/styles/recipes";
-//#region src/base-primitives/element/ElementActionButtons.tsx
-var variants = {
-	normal: {
-		originY: 0,
-		opacity: .75,
-		scale: .8,
-		y: 0
-	},
-	selected: {
-		originY: 0,
-		opacity: 1,
-		scale: .9,
-		y: 7
-	},
-	hovered: {
-		originY: 0,
-		opacity: 1,
-		scale: 1.12,
-		y: 7
-	}
-};
-/**
-* Center-Bottom bar with action buttons. Intended to be used inside "leaf" nodes.
-*
-* @param selected - Whether the node is selected
-* @param data - Node data
-* @param buttons - Action buttons
-*
-* @example
-* ```tsx
-* <ElementActionButtons
-*   {...nodeProps}
-*   Buttons={[
-*     {
-*       key: 'action1',
-*       icon: <IconZoomScan />,
-*       onClick: (e) => {
-*         e.stopPropagation()
-*         console.log('action1 clicked')
-*       },
-*     },
-*     //...
-*   ]}
-* />
-* ```
-*/
-function ElementActionButtons({ selected = false, data: { hovered: isHovered = false }, buttons }) {
-	const id = useId();
-	if (!buttons.length) return null;
-	let variant;
-	switch (true) {
-		case isHovered:
-			variant = "hovered";
-			break;
-		case selected:
-			variant = "selected";
-			break;
-		default: variant = "normal";
-	}
-	const isActionVisible = isHovered || selected;
-	return /* @__PURE__ */ jsx("div", {
-		className: actionButtons(),
-		children: /* @__PURE__ */ jsx(m.div, {
-			layoutRoot: true,
-			initial: false,
-			variants,
-			animate: variant,
-			layoutDependency: `${isHovered}-${selected}`,
-			"data-likec4-hovered": isHovered,
-			className: cx("nodrag nopan"),
-			onClick: stopPropagation,
-			children: buttons.map((button, index) => /* @__PURE__ */ jsx(ActionIcon, {
-				component: m.button,
-				className: actionBtn({}),
-				initial: false,
-				whileTap: { scale: 1 },
-				whileHover: { scale: 1.3 },
-				tabIndex: isActionVisible ? 0 : -1,
-				inert: isActionVisible ? void 0 : true,
-				"aria-label": button.ariaLabel ?? button.key ?? "Element action",
-				onClick: button.onClick,
-				onDoubleClick: stopPropagation,
-				children: button.icon || /* @__PURE__ */ jsx(IconBolt, {})
-			}, `${id}-${button.key ?? index}`))
-		})
-	});
-}
-//#endregion
-export { ElementActionButtons };

package/dist/base-primitives/element/ElementData.d.ts

@@ -1,67 +0,0 @@
-import { ComputedNodeStyle, MarkdownOrString, NodeId } from '@likec4/core';
-import { Color } from '@likec4/core/types';
-import { CSSProperties, DetailedHTMLProps, HTMLAttributes } from 'react';
-type RequiredData = {
-    id: NodeId;
-    title: string;
-    technology?: string | null | undefined;
-    color: Color;
-    style: ComputedNodeStyle;
-    description?: MarkdownOrString | null | undefined;
-    icon?: string | null;
-};
-export type ElementDataProps = {
-    data: RequiredData;
-};
-type IconProps = {
-    data: {
-        id: string;
-        title: string;
-        icon?: string | null | undefined;
-    };
-    className?: string;
-    style?: CSSProperties;
-};
-type SlotProps = {
-    data: RequiredData;
-    className?: string;
-    style?: CSSProperties;
-    [key: `data-${string}`]: string;
-};
-/**
- * Renders an element title, technology, description, and icon.
- *
- * @example
- * ```tsx
- * <ElementData {...nodeProps} />
- * ```
- * or
- * ```tsx
- * <ElementData.Root {...nodeProps} >
- *   <ElementData.Icon {...nodeProps} />
- *   <ElementData.Content>
- *     <ElementData.Title {...nodeProps} />
- *     <ElementData.Technology {...nodeProps} />
- *     <ElementData.Description {...nodeProps} />
- *   </ElementData.Content>
- * </ElementData.Root>
- * ```
- */
-export declare function ElementData({ data, 'aria-hidden': ariaHidden }: ElementDataProps & {
-    'aria-hidden'?: boolean | undefined;
-}): import("react").JSX.Element;
-export declare namespace ElementData {
-    var Root: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ElementDataProps & import("react").RefAttributes<HTMLDivElement>>;
-    var Icon: ({ data, ...props }: IconProps) => import("react").JSX.Element;
-    var Content: import("react").ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    var Title: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLDivElement>>;
-    var Technology: import("react").ForwardRefExoticComponent<((import("type-fest/source/merge-exclusive").Without<SlotProps, {
-        children?: import("react").ReactNode | undefined;
-    }> & {
-        children?: import("react").ReactNode | undefined;
-    }) | (import("type-fest/source/merge-exclusive").Without<{
-        children?: import("react").ReactNode | undefined;
-    }, SlotProps> & SlotProps)) & import("react").RefAttributes<HTMLDivElement>>;
-    var Description: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLDivElement>>;
-}
-export {};

package/dist/base-primitives/element/ElementData.js

@@ -1,127 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { IconRenderer } from "../../context/IconRenderer.js";
-import { useLikeC4Styles } from "../../hooks/useLikeC4Styles.js";
-import { Markdown } from "../Markdown.js";
-import { cx } from "@likec4/styles/css";
-import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { isTruthy } from "remeda";
-import { RichText } from "@likec4/core/types";
-import { elementNodeData } from "@likec4/styles/recipes";
-//#region src/base-primitives/element/ElementData.tsx
-/**
-* Resolve the icon color based on the node's style and color.
-*
-* If the node's style icon color is not defined, returns undefined.
-* If the node's style icon color is the same as the node's color, returns the stroke color.
-* Otherwise, returns the fill color.
-*/
-var resolveIconColor = (styles, data) => {
-	const iconColor = data.style.iconColor;
-	if (!iconColor) return;
-	const colors = styles.colors(iconColor).elements;
-	return iconColor === data.color ? colors.stroke : colors.fill;
-};
-function shouldBlendIconWithPalette(icon, hasIconColor) {
-	return !hasIconColor && icon?.startsWith("bootstrap:") === true;
-}
-var Root = forwardRef(({ className, style, data, ...props }, ref) => {
-	const styles = useLikeC4Styles();
-	const iconSize = data.style.iconSize ? styles.nodeSizes(data.style).values.iconSize : void 0;
-	const resolvedIconColor = resolveIconColor(styles, data);
-	const hasIconColor = !!resolvedIconColor;
-	return /* @__PURE__ */ jsx("div", {
-		...props,
-		ref,
-		className: cx(className, elementNodeData({
-			iconPosition: data.style.iconPosition,
-			withIconColor: hasIconColor,
-			withIconBlend: shouldBlendIconWithPalette(data.icon, hasIconColor)
-		}), "likec4-element"),
-		style: {
-			...style,
-			...iconSize && { "--likec4-icon-size": `${iconSize}px` },
-			...resolvedIconColor && { "--likec4-icon-color": resolvedIconColor }
-		}
-	});
-});
-var Icon = ({ data, ...props }) => /* @__PURE__ */ jsx(IconRenderer, {
-	element: data,
-	...props
-});
-var Content = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
-	...props,
-	className: cx(className, "likec4-element-node-content"),
-	ref
-}));
-var Title = forwardRef(({ data: { title }, className, ...props }, ref) => {
-	return /* @__PURE__ */ jsx("div", {
-		...props,
-		className: cx(className, "likec4-element-title"),
-		"data-likec4-node-title": "",
-		ref,
-		children: title
-	});
-});
-var Technology = forwardRef(({ data, children, className, ...props }, ref) => {
-	const text = data?.technology ?? children;
-	return isTruthy(text) ? /* @__PURE__ */ jsx("div", {
-		...props,
-		className: cx(className, "likec4-element-technology"),
-		"data-likec4-node-technology": "",
-		ref,
-		children: text
-	}) : null;
-});
-var Description = forwardRef(({ data: { description }, className, ...props }, ref) => {
-	if (!description) return null;
-	const desc = RichText.from(description);
-	return /* @__PURE__ */ jsx(Markdown, {
-		...props,
-		className: cx(className, "likec4-element-description"),
-		"data-likec4-node-description": "",
-		value: desc,
-		uselikec4palette: true,
-		hideIfEmpty: true,
-		style: { maxHeight: desc.isMarkdown ? "8rem" : void 0 },
-		ref
-	});
-});
-/**
-* Renders an element title, technology, description, and icon.
-*
-* @example
-* ```tsx
-* <ElementData {...nodeProps} />
-* ```
-* or
-* ```tsx
-* <ElementData.Root {...nodeProps} >
-*   <ElementData.Icon {...nodeProps} />
-*   <ElementData.Content>
-*     <ElementData.Title {...nodeProps} />
-*     <ElementData.Technology {...nodeProps} />
-*     <ElementData.Description {...nodeProps} />
-*   </ElementData.Content>
-* </ElementData.Root>
-* ```
-*/
-function ElementData({ data, "aria-hidden": ariaHidden }) {
-	return /* @__PURE__ */ jsxs(Root, {
-		data,
-		"aria-hidden": ariaHidden,
-		children: [/* @__PURE__ */ jsx(Icon, { data }), /* @__PURE__ */ jsxs(Content, { children: [
-			/* @__PURE__ */ jsx(Title, { data }),
-			/* @__PURE__ */ jsx(Technology, { data }),
-			/* @__PURE__ */ jsx(Description, { data })
-		] })]
-	});
-}
-ElementData.Root = Root;
-ElementData.Icon = Icon;
-ElementData.Content = Content;
-ElementData.Title = Title;
-ElementData.Technology = Technology;
-ElementData.Description = Description;
-//#endregion
-export { ElementData };

package/dist/base-primitives/element/ElementDetailsButton.d.ts

@@ -1,11 +0,0 @@
-import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import { BaseNodeData } from '../../base/types';
-type ElementDetailsButtonProps = {
-    selected?: boolean;
-    data: BaseNodeData;
-    icon?: ReactNode;
-    ariaLabel?: string;
-    onClick: (e: ReactMouseEvent) => void;
-};
-export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, ariaLabel, onClick, }: ElementDetailsButtonProps): import("react").JSX.Element;
-export {};

package/dist/base-primitives/element/ElementDetailsButton.js

@@ -1,85 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-import { css, cx } from "@likec4/styles/css";
-import { IconId } from "@tabler/icons-react";
-import { jsx } from "react/jsx-runtime";
-import { ActionIcon } from "@mantine/core";
-import { Box as Box$1 } from "@likec4/styles/jsx";
-import * as m from "motion/react-m";
-import { actionBtn } from "@likec4/styles/recipes";
-//#region src/base-primitives/element/ElementDetailsButton.tsx
-var variants = {
-	normal: {
-		originX: .4,
-		originY: .6,
-		scale: 1,
-		opacity: .5
-	},
-	hovered: {
-		originX: .4,
-		originY: .6,
-		scale: 1.25,
-		opacity: .9
-	},
-	selected: {
-		originX: .4,
-		originY: .6,
-		scale: 1.25,
-		opacity: .9
-	},
-	whileHover: {
-		scale: 1.4,
-		opacity: 1
-	},
-	whileTap: { scale: 1.15 }
-};
-var container = css({
-	position: "absolute",
-	top: "0.5",
-	right: "0.5",
-	_shapeBrowser: { right: "[5px]" },
-	_shapeCylinder: { top: "[14px]" },
-	_shapeStorage: { top: "[14px]" },
-	_shapeQueue: {
-		top: "[1px]",
-		right: "3"
-	},
-	_smallZoom: { display: "none" },
-	_print: { display: "none" }
-});
-function ElementDetailsButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Open details", onClick }) {
-	let variant;
-	switch (true) {
-		case isHovered:
-			variant = "hovered";
-			break;
-		case selected:
-			variant = "selected";
-			break;
-		default: variant = "normal";
-	}
-	const isActionVisible = isHovered || selected;
-	return /* @__PURE__ */ jsx(Box$1, {
-		className: cx(container, "details-button"),
-		children: /* @__PURE__ */ jsx(ActionIcon, {
-			className: cx("nodrag nopan", actionBtn({ variant: "transparent" })),
-			component: m.button,
-			initial: false,
-			variants,
-			animate: variant,
-			whileHover: "whileHover",
-			whileTap: "whileTap",
-			onClick,
-			onDoubleClick: stopPropagation,
-			tabIndex: isActionVisible ? 0 : -1,
-			inert: isActionVisible ? void 0 : true,
-			"aria-label": ariaLabel,
-			children: icon ?? /* @__PURE__ */ jsx(IconId, {
-				stroke: 1.8,
-				style: { width: "75%" }
-			})
-		})
-	});
-}
-//#endregion
-export { ElementDetailsButton };

package/dist/base-primitives/element/ElementNodeContainer.d.ts

@@ -1,22 +0,0 @@
-import { Color, ComputedNodeStyle, ElementShape } from '@likec4/core/types';
-import { MotionNodeLayoutOptions, MotionStyle } from 'motion/react';
-import { BaseNodePropsWithData } from '../../base/types';
-import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
-type RequiredData = {
-    color: Color;
-    shape: ElementShape;
-    style?: ComputedNodeStyle;
-};
-/**
- * Top-level primitive to compose leaf nodes renderers.
- * This container provides the state via data-* attributes
- */
-export declare const ElementNodeContainer: ForwardRefExoticComponent<{
-    [key: `data-${string}`]: string | undefined;
-    nodeProps: BaseNodePropsWithData<RequiredData>;
-    className?: string | undefined;
-    style?: MotionStyle | undefined;
-} & MotionNodeLayoutOptions & {
-    children?: ReactNode | undefined;
-} & RefAttributes<HTMLDivElement>>;
-export {};

package/dist/base-primitives/element/ElementNodeContainer.js

@@ -1,55 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { cx } from "@likec4/styles/css";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { ensureSizes } from "@likec4/core/types";
-import * as m from "motion/react-m";
-import { elementNode } from "@likec4/styles/recipes";
-//#region src/base-primitives/element/ElementNodeContainer.tsx
-var variants = {
-	normal: { scale: 1 },
-	hovered: { scale: 1.05 },
-	selected: { scale: 1.02 },
-	tap: { scale: .98 }
-};
-/**
-* Top-level primitive to compose leaf nodes renderers.
-* This container provides the state via data-* attributes
-*/
-var ElementNodeContainer = forwardRef(({ nodeProps: { selected = false, selectable = false, data: { hovered: isHovered = false, dimmed: isDimmed = false, ...data } }, className, style, children, ...rest }, ref) => {
-	let variant;
-	switch (true) {
-		case isHovered:
-			variant = "hovered";
-			break;
-		case selected:
-			variant = "selected";
-			break;
-		default: variant = "normal";
-	}
-	const { size, padding, textSize } = ensureSizes(data.style ?? {});
-	return /* @__PURE__ */ jsx(m.div, {
-		ref,
-		className: cx(elementNode(), "group", className),
-		variants,
-		initial: false,
-		...selectable && {
-			animate: variant,
-			whileTap: "tap"
-		},
-		"data-likec4-hovered": isHovered,
-		"data-likec4-color": data.color,
-		"data-likec4-shape": data.shape,
-		"data-likec4-shape-size": size,
-		"data-likec4-spacing": padding,
-		"data-likec4-text-size": textSize,
-		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
-		style,
-		tabIndex: -1,
-		...rest,
-		children
-	});
-});
-ElementNodeContainer.displayName = "ElementNodeContainer";
-//#endregion
-export { ElementNodeContainer };

package/dist/base-primitives/element/ElementShape.d.ts

@@ -1,18 +0,0 @@
-import { ComputedNodeStyle, ElementShape } from '@likec4/core/types';
-type RequiredData = {
-    shape: ElementShape;
-    width: number;
-    height: number;
-    style?: ComputedNodeStyle;
-};
-type ElementShapeProps = {
-    data: RequiredData;
-    width?: number | undefined;
-    height?: number | undefined;
-    /**
-     * @default true
-     */
-    showSelectionOutline?: boolean | undefined;
-};
-export declare function ElementShape({ data, width, height, showSelectionOutline }: ElementShapeProps): import("react").JSX.Element;
-export {};