@likec4/diagram 1.59.4 → 1.61.0

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

@@ -1,17 +0,0 @@
-import { SequenceStepEdge } from './edges/SequenceStepEdge';
-import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, SequenceActorNode, SequenceParallelArea, SequenceSubflowArea, ViewGroupNode } from './nodes';
-import { FunctionComponent } from 'react';
-export declare const BuiltinNodes: {
-    ElementNode: typeof ElementNode;
-    DeploymentNode: typeof DeploymentNode;
-    CompoundElementNode: typeof CompoundElementNode;
-    CompoundDeploymentNode: typeof CompoundDeploymentNode;
-    ViewGroupNode: typeof ViewGroupNode;
-    SequenceActorNode: typeof SequenceActorNode;
-    SequenceParallelArea: typeof SequenceParallelArea;
-    SequenceSubflowArea: typeof SequenceSubflowArea;
-};
-export declare const BuiltinEdges: {
-    RelationshipEdge: FunctionComponent<import("../types").Types.EdgeProps<"relationship">>;
-    SequenceStepEdge: typeof SequenceStepEdge;
-};

package/dist/likec4diagram/custom/index.js

@@ -1,22 +0,0 @@
-import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, ViewGroupNode } from "./nodes/nodes.js";
-import { SequenceActorNode, SequenceParallelArea } from "./nodes/SequenceActorNode.js";
-import { SequenceSubflowArea } from "./nodes/SequenceSubFlow.js";
-import { RelationshipEdge } from "./edges/RelationshipEdge.js";
-import { SequenceStepEdge } from "./edges/SequenceStepEdge.js";
-//#region src/likec4diagram/custom/index.tsx
-var BuiltinNodes = {
-	ElementNode,
-	DeploymentNode,
-	CompoundElementNode,
-	CompoundDeploymentNode,
-	ViewGroupNode,
-	SequenceActorNode,
-	SequenceParallelArea,
-	SequenceSubflowArea
-};
-var BuiltinEdges = {
-	RelationshipEdge,
-	SequenceStepEdge
-};
-//#endregion
-export { BuiltinEdges, BuiltinNodes };

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

@@ -1,4 +0,0 @@
-import { Types } from '../../types';
-type CompoundActionsProps = Types.NodeProps<'compound-deployment' | 'compound-element'>;
-export declare const CompoundActions: (props: CompoundActionsProps) => import("react").JSX.Element | null;
-export {};

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

@@ -1,22 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
-import { useDiagram } from "../../../hooks/safeContext.js";
-import { CompoundActionButton } from "../../../base-primitives/compound/CompoundActionButton.js";
-import { jsx } from "react/jsx-runtime";
-//#region src/likec4diagram/custom/nodes/CompoundActions.tsx
-var CompoundActions = (props) => {
-	const { enableNavigateTo } = useEnabledFeatures();
-	const diagram = useDiagram();
-	const { navigateTo } = props.data;
-	if (navigateTo && enableNavigateTo) return /* @__PURE__ */ jsx(CompoundActionButton, {
-		ariaLabel: "Navigate to view",
-		onClick: (e) => {
-			e.stopPropagation();
-			diagram.navigateTo(navigateTo, props.id);
-		},
-		...props
-	});
-	return null;
-};
-//#endregion
-export { CompoundActions };

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

@@ -1,87 +0,0 @@
-import { SimplifyDeep } from 'type-fest';
-import { ElementActionButtons } from '../../../base-primitives';
-import { BaseNodeData } from '../../../base/types';
-import { Types } from '../../types';
-type WithExtraButtons = {
-    /**
-     * Add extra action buttons
-     * @example
-     * ```tsx
-     * <ElementActions
-     *   extraButtons={[
-     *     {
-     *       key: 'extra',
-     *       icon: <IconZoomScan />,
-     *       onClick: (e) => {
-     *         e.stopPropagation()
-     *         console.log('extra action clicked')
-     *       },
-     *       },
-     *     },
-     *   ]}
-     * />
-     * ```
-     */
-    extraButtons?: ElementActionButtons.Item[];
-};
-export type ElementActionsProps = SimplifyDeep<{
-    selected?: boolean;
-    data: Pick<Types.ElementNodeData, 'id' | 'modelFqn' | 'navigateTo' | 'title'> & BaseNodeData;
-}> & WithExtraButtons;
-/**
- * Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
- * Intended to be used with model elements.
- *
- * Use generic {@link ElementActionButtons} for custom action buttons.
- *
- * @param extraButtons - Add extra action buttons
- *
- * @example
- * ```tsx
- * <ElementActions
- *   extraButtons={[
- *     {
- *       key: 'extra',
- *       icon: <IconZoomScan />,
- *       onClick: (e) => {
- *         e.stopPropagation()
- *         console.log('extra action clicked')
- *       },
- *       },
- *     },
- *   ]}
- * />
- * ```
- */
-export declare function ElementActions({ extraButtons, ...props }: ElementActionsProps): import("react").JSX.Element;
-export type DeploymentElementActionsProps = SimplifyDeep<{
-    selected?: boolean;
-    data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo' | 'title'> & BaseNodeData;
-}> & WithExtraButtons;
-/**
- * Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
- * Intended to be used with deployment elements.
- *
- * Use generic {@link ElementActionButtons} for custom action buttons.
- *
- * @param extraButtons - Add extra action buttons
- *
- * @example
- * ```tsx
- * <DeploymentElementActions
- *   extraButtons={[
- *     {
- *       key: 'extra',
- *       icon: <IconZoomScan />,
- *       onClick: (e) => {
- *         e.stopPropagation()
- *         console.log('extra action clicked')
- *       },
- *       },
- *     },
- *   ]}
- * />
- * ```
- */
-export declare const DeploymentElementActions: ({ extraButtons, ...props }: DeploymentElementActionsProps) => import("react").JSX.Element;
-export {};

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

@@ -1,144 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
-import { useDiagram } from "../../../hooks/safeContext.js";
-import { readableText } from "../../../utils/readableText.js";
-import { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.js";
-import { IconTransform, IconZoomScan } from "@tabler/icons-react";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { hasAtLeast } from "remeda";
-//#region src/likec4diagram/custom/nodes/ElementActions.tsx
-/**
-* Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
-* Intended to be used with model elements.
-*
-* Use generic {@link ElementActionButtons} for custom action buttons.
-*
-* @param extraButtons - Add extra action buttons
-*
-* @example
-* ```tsx
-* <ElementActions
-*   extraButtons={[
-*     {
-*       key: 'extra',
-*       icon: <IconZoomScan />,
-*       onClick: (e) => {
-*         e.stopPropagation()
-*         console.log('extra action clicked')
-*       },
-*       },
-*     },
-*   ]}
-* />
-* ```
-*/
-function ElementActions({ extraButtons, ...props }) {
-	const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
-	const diagram = useDiagram();
-	const { id, navigateTo, modelFqn, title } = props.data;
-	let buttons = useMemo(() => {
-		const buttons = [];
-		const labelTitle = readableText(title) || id;
-		if (navigateTo && enableNavigateTo) buttons.push({
-			key: "navigate",
-			ariaLabel: "Navigate to view",
-			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-			onClick: (e) => {
-				e.stopPropagation();
-				diagram.navigateTo(navigateTo, id);
-			}
-		});
-		if (enableRelationshipBrowser) buttons.push({
-			key: "relationships",
-			ariaLabel: `Browse ${labelTitle} relationships`,
-			icon: /* @__PURE__ */ jsx(IconTransform, {}),
-			onClick: (e) => {
-				e.stopPropagation();
-				diagram.openRelationshipsBrowser(modelFqn);
-			}
-		});
-		return buttons;
-	}, [
-		enableNavigateTo,
-		enableRelationshipBrowser,
-		modelFqn,
-		navigateTo,
-		id,
-		title,
-		diagram
-	]);
-	if (extraButtons && hasAtLeast(extraButtons, 1)) buttons = [...buttons, ...extraButtons];
-	return /* @__PURE__ */ jsx(ElementActionButtons, {
-		...props,
-		buttons
-	});
-}
-/**
-* Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
-* Intended to be used with deployment elements.
-*
-* Use generic {@link ElementActionButtons} for custom action buttons.
-*
-* @param extraButtons - Add extra action buttons
-*
-* @example
-* ```tsx
-* <DeploymentElementActions
-*   extraButtons={[
-*     {
-*       key: 'extra',
-*       icon: <IconZoomScan />,
-*       onClick: (e) => {
-*         e.stopPropagation()
-*         console.log('extra action clicked')
-*       },
-*       },
-*     },
-*   ]}
-* />
-* ```
-*/
-var DeploymentElementActions = ({ extraButtons, ...props }) => {
-	const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
-	const diagram = useDiagram();
-	const { id, navigateTo, modelFqn, title } = props.data;
-	let buttons = useMemo(() => {
-		const buttons = [];
-		const labelTitle = readableText(title) || id;
-		if (navigateTo && enableNavigateTo) buttons.push({
-			key: "navigate",
-			ariaLabel: "Navigate to view",
-			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-			onClick: (e) => {
-				e.stopPropagation();
-				diagram.navigateTo(navigateTo, id);
-			}
-		});
-		if (enableRelationshipBrowser && !!modelFqn) buttons.push({
-			key: "relationships",
-			ariaLabel: `Browse ${labelTitle} relationships`,
-			icon: /* @__PURE__ */ jsx(IconTransform, {}),
-			onClick: (e) => {
-				e.stopPropagation();
-				diagram.openRelationshipsBrowser(modelFqn);
-			}
-		});
-		return buttons;
-	}, [
-		enableNavigateTo,
-		enableRelationshipBrowser,
-		modelFqn,
-		navigateTo,
-		id,
-		title,
-		diagram
-	]);
-	if (extraButtons && hasAtLeast(extraButtons, 1)) buttons = [...buttons, ...extraButtons];
-	return /* @__PURE__ */ jsx(ElementActionButtons, {
-		...props,
-		buttons
-	});
-};
-//#endregion
-export { DeploymentElementActions, ElementActions };

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

@@ -1,5 +0,0 @@
-import { Types } from '../../types';
-export type NodeDriftsProps = {
-    nodeProps: Types.NodeProps;
-};
-export declare function NodeDrifts({ nodeProps: { data }, }: NodeDriftsProps): import("react").JSX.Element | null;

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

@@ -1,22 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { jsx } from "react/jsx-runtime";
-import { Box } from "@likec4/styles/jsx";
-//#region src/likec4diagram/custom/nodes/NodeDrifts.tsx
-function NodeDrifts({ nodeProps: { data } }) {
-	const drifts = data.drifts;
-	if (!drifts || drifts.length === 0) return null;
-	return /* @__PURE__ */ jsx(Box, {
-		className: "likec4-node-drifts",
-		css: {
-			display: "contents",
-			"& + .likec4-element-shape": {
-				outlineColor: "likec4.compare.outline",
-				outlineWidth: "[4px]",
-				outlineStyle: "dashed",
-				outlineOffset: "1.5"
-			}
-		}
-	});
-}
-//#endregion
-export { NodeDrifts };

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

@@ -1,6 +0,0 @@
-import { BaseNodePropsWithData } from '../../../base/types';
-import { Types } from '../../types';
-type RequiredData = Pick<Types.NodeData, 'id' | 'notes' | 'width' | 'height' | 'x' | 'y'>;
-export type NodeNotesProps = BaseNodePropsWithData<RequiredData>;
-export declare function NodeNotes({ data }: NodeNotesProps): import("react").JSX.Element | null;
-export {};

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

@@ -1,224 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useCallbackRef as useCallbackRef$1 } from "../../../hooks/useCallbackRef.js";
-import { useOnDiagramEvent } from "../../../hooks/useDiagram.js";
-import { Markdown } from "../../../base-primitives/Markdown.js";
-import { css, cx } from "@likec4/styles/css";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ViewportPortal } from "@xyflow/react";
-import { clamp, isEmptyish } from "remeda";
-import { RichText, hasProp } from "@likec4/core";
-import { ScrollAreaAutosize } from "@mantine/core";
-import { stringHash } from "@likec4/core/utils";
-import { AnimatePresence, m } from "motion/react";
-import { useDisclosure } from "@mantine/hooks";
-import { Box as Box$1 } from "@likec4/styles/jsx";
-import { nodeNotes } from "@likec4/styles/recipes";
-//#region src/likec4diagram/custom/nodes/NodeNotes.tsx
-function NodeNotes({ data }) {
-	if (!hasProp(data, "notes") || isEmptyish(data.notes.md || data.notes.txt)) return null;
-	return /* @__PURE__ */ jsx(NodeNotesInternal2, { data });
-}
-function stopPropagation(e) {
-	e.nativeEvent.stopImmediatePropagation();
-	e.stopPropagation();
-}
-function NodeNotesInternal2({ data }) {
-	return /* @__PURE__ */ jsx(NodeNotesInternal, { data });
-}
-function NodeNotesInternal({ data }) {
-	const markdown = data.notes;
-	const width = clamp(data.width ?? 0, {
-		min: 250,
-		max: 500
-	});
-	const [expanded, handlers] = useDisclosure(false, {});
-	const id = stringHash(data.id + (markdown.md ?? markdown.txt));
-	const onClickCapture = useCallbackRef$1((e) => {
-		if (e) {
-			e.preventDefault();
-			if ("nativeEvent" in e) e.nativeEvent.stopImmediatePropagation();
-			e.stopPropagation();
-		}
-		handlers.toggle();
-	});
-	const hovered = data.hovered ?? false;
-	const layoutDependency = expanded;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AnimatePresence, { children: [/* @__PURE__ */ jsxs(m.div, {
-		className: cx("nopan nodrag", nodeNotes({ opened: expanded })),
-		variants: variants.root,
-		initial: "initial",
-		animate: expanded ? "expanded" : hovered ? "hovered" : "initial",
-		whileHover: "whileHover",
-		exit: "exit",
-		...!expanded && { onPointerDownCapture: onClickCapture },
-		onMouseDownCapture: onClickCapture,
-		onClickCapture,
-		onClick: stopPropagation,
-		"data-state": expanded ? "expanded" : "collapsed",
-		children: [/* @__PURE__ */ jsx(m.div, {
-			variants: variants.paper1,
-			className: "__paper __paper-back"
-		}, "paper-back"), !expanded && /* @__PURE__ */ jsx(m.div, {
-			layout: true,
-			layoutId: id,
-			variants: variants.paper2,
-			"data-state": expanded ? "expanded" : "collapsed",
-			className: "__paper __paper-front"
-		}, id)]
-	}, `node-notes-${id}`), expanded && /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(m.div, {
-		layout: true,
-		layoutDependency,
-		layoutId: id,
-		className: css({
-			position: "absolute",
-			zIndex: "[300]",
-			top: "0",
-			left: "0",
-			display: "flex",
-			pointerEvents: "all",
-			rounded: "sm",
-			backgroundColor: "likec4.overlay.body",
-			padding: "0",
-			alignItems: "stretch",
-			justifyContent: "stretch",
-			overflow: "hidden",
-			width: "fit-content",
-			height: "fit-content",
-			maxHeight: "[70cqh]",
-			maxWidth: "[50cqw]"
-		}),
-		"data-likec4-notes": id,
-		style: {
-			top: data.y + 20,
-			left: data.x + 10,
-			maxWidth: `min(calc(${width}px * 2), 50cqw)`
-		},
-		onMouseDownCapture: stopPropagation,
-		onClickCapture: stopPropagation,
-		onClick: stopPropagation,
-		children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
-			component: m.div,
-			className: cx("nowheel", css({
-				flex: "1",
-				padding: "xs",
-				paddingRight: "xxs"
-			})),
-			children: /* @__PURE__ */ jsx(Markdown, {
-				className: css({ paddingRight: "xxs" }),
-				value: RichText.from(markdown)
-			})
-		})
-	}, id) }, "portal")] }), expanded && /* @__PURE__ */ jsx(Catch, {
-		data,
-		onCatchClick: onClickCapture
-	})] });
-}
-var base_paper1 = {
-	rotateZ: "-5deg",
-	y: 0,
-	x: 1,
-	scale: 1,
-	originX: "55%",
-	originY: "80%"
-};
-var base_paper2 = {
-	rotateZ: "3deg",
-	y: -2,
-	scale: 1,
-	backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 8%, #FFF)",
-	originX: "45%",
-	originY: "80%"
-};
-var variants = {
-	root: {
-		initial: { ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)" },
-		hovered: {},
-		whileHover: { ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 3%, #FFF)" },
-		exit: { ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)" }
-	},
-	paper1: {
-		initial: {
-			...base_paper1,
-			rotateZ: "-3.5deg",
-			y: 1,
-			scale: .95
-		},
-		hovered: { ...base_paper1 },
-		whileHover: {
-			...base_paper1,
-			["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 3%, #FFF)",
-			scale: 1.04
-		},
-		expanded: {
-			...base_paper1,
-			y: [
-				0,
-				1,
-				20
-			],
-			scale: .95
-		},
-		exit: {
-			...base_paper1,
-			rotateZ: "-3.5deg",
-			y: 1,
-			scale: .95
-		}
-	},
-	paper2: {
-		initial: {
-			...base_paper2,
-			rotateZ: "2deg",
-			y: 2,
-			scale: .95,
-			backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
-		},
-		hovered: { ...base_paper2 },
-		whileHover: {
-			...base_paper2,
-			scale: 1.08
-		},
-		expanded: {
-			...base_paper2,
-			y: [
-				0,
-				1,
-				20
-			],
-			scale: .95
-		},
-		exit: {
-			...base_paper2,
-			rotateZ: "2deg",
-			y: 2,
-			scale: .95,
-			backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
-		}
-	}
-};
-function Catch({ data, onCatchClick }) {
-	useOnDiagramEvent("paneClick", () => {
-		onCatchClick();
-	});
-	return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(Box$1, {
-		css: {
-			display: "block",
-			position: "absolute",
-			zIndex: "[200]",
-			pointerEvents: "all",
-			left: "0",
-			top: "0",
-			cursor: "zoom-out"
-		},
-		style: {
-			transform: `translate(${data.x - 40}px, ${data.y - 40}px)`,
-			width: (data.width ?? 250) + 80,
-			height: (data.height ?? 200) + 80
-		},
-		onMouseDownCapture: onCatchClick,
-		onClickCapture: onCatchClick,
-		onClick: stopPropagation
-	}) }, "catch-all");
-}
-//#endregion
-export { NodeNotes };

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

@@ -1,3 +0,0 @@
-import { Types } from '../../types';
-export declare function SequenceActorNode(props: Types.NodeProps<'seq-actor'>): import("react").JSX.Element;
-export declare function SequenceParallelArea(props: Types.NodeProps<'seq-parallel'>): import("react").JSX.Element;