@likec4/diagram 1.59.3 → 1.60.0

package/dist/context/IconRenderer.mjs

@@ -0,0 +1,179 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import IconBrowser from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.mjs";
+import IconCylinder from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.mjs";
+import IconDeviceMobile from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.mjs";
+import IconFileText from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.mjs";
+import IconRectangularPrism from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.mjs";
+import IconReorder from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.mjs";
+import IconRobot from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRobot.mjs";
+import IconUser from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.mjs";
+import { cx } from "@likec4/styles/css";
+import { createContext, useContext, useMemo } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+
+//#region src/context/IconRenderer.tsx
+const IconRendererContext = createContext(null);
+/**
+* Provider for custom element icon renderers
+*
+* @example
+* ```tsx
+* const MyIconRenderer: ElementIconRenderer = ({ node }) => {
+*   return <div>{node.title}</div>
+* }
+*
+* <IconRendererProvider value={MyIconRenderer}>
+*   <LikeC4Diagram />
+* </IconRendererProvider>
+* ```
+*/
+function IconRendererProvider({ value, children }) {
+	if (useContext(IconRendererContext)) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(IconRendererContext.Provider, {
+		value,
+		children
+	});
+}
+function IconRenderer({ element, className, style }) {
+	const RenderIcon = useContext(IconRendererContext);
+	if (!element || !element.icon || element.icon === "none") return null;
+	let icon;
+	switch (true) {
+		case element.icon.startsWith("data:image/svg+xml"):
+			icon = /* @__PURE__ */ jsx(SvgDataUrlIcon, {
+				dataUrl: element.icon,
+				alt: element.title
+			});
+			break;
+		case element.icon.startsWith("http://"):
+		case element.icon.startsWith("https://"):
+		case element.icon.startsWith("data:image"):
+			icon = /* @__PURE__ */ jsx("img", {
+				src: element.icon,
+				alt: element.title
+			});
+			break;
+		case !!RenderIcon:
+			icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
+			break;
+		default: icon = /* @__PURE__ */ jsx(DefaultIconRenderer, { node: element });
+	}
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(className, "likec4-element-icon"),
+		"data-likec4-icon": element.icon,
+		style,
+		children: icon
+	});
+}
+const ShapeIcons = {
+	browser: IconBrowser,
+	cylinder: IconCylinder,
+	mobile: IconDeviceMobile,
+	person: IconUser,
+	queue: IconReorder,
+	rectangle: IconRectangularPrism,
+	storage: IconCylinder,
+	bucket: IconCylinder,
+	document: IconFileText,
+	component: IconRectangularPrism,
+	agent: IconRobot
+};
+function IconOrShapeRenderer({ element, className, style }) {
+	if (!element.icon || element.icon === "none") {
+		const ShapeIcon = ShapeIcons[element.shape];
+		return /* @__PURE__ */ jsx("div", {
+			className: cx(className, "likec4-shape-icon"),
+			style,
+			children: /* @__PURE__ */ jsx(ShapeIcon, {})
+		});
+	}
+	return /* @__PURE__ */ jsx(IconRenderer, {
+		element,
+		className,
+		style
+	});
+}
+function SvgDataUrlIcon({ dataUrl, alt }) {
+	if (!useMemo(() => hasCurrentColorReference(dataUrl), [dataUrl])) return /* @__PURE__ */ jsx("img", {
+		src: dataUrl,
+		alt
+	});
+	const maskUrl = `url(${JSON.stringify(dataUrl)})`;
+	return /* @__PURE__ */ jsx("span", {
+		role: alt ? "img" : void 0,
+		"aria-label": alt,
+		style: {
+			display: "inline-block",
+			width: "100%",
+			height: "100%",
+			backgroundColor: "currentColor",
+			maskImage: maskUrl,
+			maskRepeat: "no-repeat",
+			maskPosition: "center",
+			maskSize: "contain",
+			WebkitMaskImage: maskUrl,
+			WebkitMaskRepeat: "no-repeat",
+			WebkitMaskPosition: "center",
+			WebkitMaskSize: "contain"
+		}
+	});
+}
+function hasCurrentColorReference(dataUrl) {
+	return /currentcolor/i.test(decodeSvgDataUrl(dataUrl) ?? "");
+}
+function decodeSvgDataUrl(dataUrl) {
+	if (!dataUrl.startsWith("data:image/svg+xml")) return null;
+	try {
+		const comma = dataUrl.indexOf(",");
+		if (comma === -1) return null;
+		const payload = dataUrl.slice(comma + 1);
+		if (dataUrl.slice(0, comma).endsWith(";base64")) return new TextDecoder().decode(Uint8Array.from(atob(payload), (c) => c.charCodeAt(0)));
+		try {
+			return decodeURIComponent(payload);
+		} catch {
+			return payload;
+		}
+	} catch {
+		return null;
+	}
+}
+const iconUrl = (group, name) => `https://icons.like-c4.dev/${encodeURIComponent(group)}/${encodeURIComponent(name)}.svg`;
+function BootstrapIconMask({ name, ...props }) {
+	const url = iconUrl("bootstrap", name);
+	const style = {
+		display: "inline-block",
+		width: "100%",
+		height: "100%",
+		backgroundColor: "currentColor",
+		maskImage: `url("${url}")`,
+		maskRepeat: "no-repeat",
+		maskPosition: "center",
+		maskSize: "contain",
+		WebkitMaskImage: `url("${url}")`,
+		WebkitMaskRepeat: "no-repeat",
+		WebkitMaskPosition: "center",
+		WebkitMaskSize: "contain"
+	};
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		style
+	});
+}
+function DefaultIconRenderer({ node, ...props }) {
+	if (!node.icon || node.icon === "none") return null;
+	const [group, name, ...rest] = node.icon.split(":");
+	if (!group || !name || rest.length > 0) return null;
+	if (group === "bootstrap") return /* @__PURE__ */ jsx(BootstrapIconMask, {
+		...props,
+		name
+	});
+	return /* @__PURE__ */ jsx("img", {
+		...props,
+		src: iconUrl(group, name)
+	});
+}
+
+//#endregion
+export { DefaultIconRenderer, IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/LikeC4ModelContext.d.mts

@@ -0,0 +1,14 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { PropsWithChildren } from "react";
+import * as t from "@likec4/core/types";
+import { LayoutedView } from "@likec4/core/types";
+import { LikeC4Model, LikeC4ViewModel } from "@likec4/core/model";
+//#region src/context/LikeC4ModelContext.d.ts
+type UnknownLayouted$1 = t.aux.UnknownLayouted;
+export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted$1, LayoutedView<UnknownLayouted$1>>;
+/**
+ * @returns The LikeC4Model from context, or null if no LikeC4ModelProvider is found.
+ */
+export declare function useOptionalLikeC4Model<A extends t.aux.Any = UnknownLayouted$1>(): LikeC4Model<A> | null;
+export declare function useOptionalCurrentViewModel(): CurrentViewModel | null;
+//#endregion

package/dist/context/LikeC4ModelContext.mjs

@@ -0,0 +1,21 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+
+//#region src/context/LikeC4ModelContext.tsx
+const LikeC4ModelContext = createContext(null);
+const LikeC4ModelContextProvider = LikeC4ModelContext.Provider;
+const CurrentViewModelCtx = createContext(null);
+const CurrentViewModelContext = CurrentViewModelCtx.Provider;
+/**
+* @returns The LikeC4Model from context, or null if no LikeC4ModelProvider is found.
+*/
+function useOptionalLikeC4Model() {
+	return useContext(LikeC4ModelContext);
+}
+function useOptionalCurrentViewModel() {
+	return useContext(CurrentViewModelCtx);
+}
+
+//#endregion
+export { CurrentViewModelContext, LikeC4ModelContextProvider, useOptionalCurrentViewModel, useOptionalLikeC4Model };

package/dist/context/LikeC4ProjectsContext.d.mts

@@ -0,0 +1,9 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { LikeC4ProjectData } from "../LikeC4ProjectsProvider.mjs";
+import { ProjectId } from "@likec4/core/types";
+//#region src/context/LikeC4ProjectsContext.d.ts
+export type LikeC4ProjectsContext = {
+  projects: ReadonlyArray<LikeC4ProjectData>;
+  onProjectChange: (id: ProjectId) => void;
+};
+//#endregion

package/dist/context/LikeC4ProjectsContext.mjs

@@ -0,0 +1,12 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext } from "react";
+
+//#region src/context/LikeC4ProjectsContext.ts
+const LikeC4ProjectsContext = createContext(null);
+const LikeC4ProjectsContextProvider = LikeC4ProjectsContext.Provider;
+function useOptionalProjectsContext() {
+	return useContext(LikeC4ProjectsContext);
+}
+
+//#endregion
+export { LikeC4ProjectsContextProvider, useOptionalProjectsContext };

package/dist/context/RootContainerContext.mjs

@@ -0,0 +1,24 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext } from "react";
+import { useStore } from "@nanostores/react";
+
+//#region src/context/RootContainerContext.tsx
+const RootContainerContext = createContext(null);
+const RootContainerContextProvider = RootContainerContext.Provider;
+function useRootContainerContext() {
+	return useContext(RootContainerContext);
+}
+function useRootContainer() {
+	const ctx = useRootContainerContext();
+	if (!ctx) throw new Error("useRootContainer must be used within a RootContainer");
+	return ctx;
+}
+function useRootContainerRef() {
+	return useRootContainer().ref;
+}
+function useRootContainerElement() {
+	return useRootContainer().ref.current;
+}
+
+//#endregion
+export { RootContainerContextProvider, useRootContainer, useRootContainerContext, useRootContainerElement, useRootContainerRef };

package/dist/context/TagStylesContext.d.mts

@@ -0,0 +1,14 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { PropsWithChildren } from "react";
+import "@likec4/core";
+import { LikeC4Styles } from "@likec4/core/styles";
+//#region src/context/TagStylesContext.d.ts
+type TagStylesProviderProps = PropsWithChildren<{
+  /**
+   * Root element selector to scope the tag styles to (e.g., "#diagram-root")
+   * Must be a valid CSS selector
+   */
+  rootSelector: string;
+}>;
+export declare function TagStylesProvider({ children, rootSelector }: TagStylesProviderProps): import("react").JSX.Element;
+//#endregion

package/dist/context/TagStylesContext.mjs

@@ -0,0 +1,78 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useLikeC4Specification } from "../hooks/useLikeC4Model.mjs";
+import { useLikeC4Styles } from "../hooks/useLikeC4Styles.mjs";
+import { createContext, memo, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { entries, flatMap, isEmpty, join, pipe } from "remeda";
+import { isTagColorSpecified } from "@likec4/core";
+import { useMantineStyleNonce } from "@mantine/core";
+import { DefaultTagColors, LikeC4Styles, getContrastedColorsAPCA, isValidColor } from "@likec4/core/styles";
+
+//#region src/context/TagStylesContext.tsx
+const radixColors = DefaultTagColors;
+function generateColorVars(spec, styles = LikeC4Styles.DEFAULT) {
+	const color = spec.color;
+	if (isTagColorSpecified(spec) && isValidColor(color)) return `
+  --colors-likec4-tag-bg: ${color};
+  --colors-likec4-tag-bg-hover: color-mix(in oklab, ${color}, var(--colors-likec4-mix-color) 20%);
+  --colors-likec4-tag-text: ${getContrastedColorsAPCA(color).hiContrast};
+    `;
+	if (radixColors.includes(color)) {
+		let textcolor = `var(--colors-${color}-12)`;
+		if ([
+			"mint",
+			"grass",
+			"lime",
+			"yellow",
+			"amber"
+		].includes(color)) textcolor = "rgba(0 0 0 / 0.85)";
+		return `
+  --colors-likec4-tag-border: var(--colors-${color}-8);
+  --colors-likec4-tag-bg: var(--colors-${color}-9);
+  --colors-likec4-tag-bg-hover: var(--colors-${color}-10);
+  --colors-likec4-tag-text: ${textcolor};
+    `;
+	}
+	if (styles.isThemeColor(color)) {
+		const { fill, hiContrast } = styles.tagColor(color);
+		return `
+  --colors-likec4-tag-bg: ${fill};
+  --colors-likec4-tag-bg-hover: color-mix(in oklab, ${fill}, var(--colors-likec4-mix-color) 20%);
+  --colors-likec4-tag-text: ${hiContrast};
+    `;
+	}
+	return "";
+}
+const TagStylesContext = createContext({});
+function generateStylesheet(tags, rootSelector, styles) {
+	if (!tags || isEmpty(tags)) return "";
+	return pipe(entries(tags), flatMap(([tag, spec]) => [
+		`:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
+		generateColorVars(spec, styles),
+		"}"
+	]), join("\n"));
+}
+function TagStylesProvider({ children, rootSelector }) {
+	const tags = useLikeC4Specification().tags;
+	const styles = useLikeC4Styles();
+	const nonce = useMantineStyleNonce()?.();
+	const stylesheet = generateStylesheet(tags, rootSelector, styles);
+	return /* @__PURE__ */ jsxs(TagStylesContext.Provider, {
+		value: tags,
+		children: [stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, {
+			nonce,
+			stylesheet
+		}), children]
+	});
+}
+const TagStylesheet = memo(({ stylesheet, nonce }) => {
+	return /* @__PURE__ */ jsx("style", {
+		"data-likec4-tags": true,
+		type: "text/css",
+		dangerouslySetInnerHTML: { __html: stylesheet },
+		nonce
+	});
+});
+
+//#endregion
+export { TagStylesProvider, generateColorVars };

package/dist/custom/builtins.d.mts

@@ -0,0 +1,9 @@
+import { CompoundActions } from "../likec4diagram/custom/nodes/CompoundActions.mjs";
+import { DeploymentElementActions, ElementActions } from "../likec4diagram/custom/nodes/ElementActions.mjs";
+import { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from "../likec4diagram/custom/nodes/nodes.mjs";
+import { SequenceActorNode, SequenceParallelArea } from "../likec4diagram/custom/nodes/SequenceActorNode.mjs";
+import { CompoundDeploymentToolbar, CompoundElementToolbar } from "../likec4diagram/custom/nodes/toolbar/CompoundToolbar.mjs";
+import { DeploymentElementToolbar, ElementToolbar } from "../likec4diagram/custom/nodes/toolbar/ElementToolbar.mjs";
+import { Toolbar } from "../likec4diagram/custom/nodes/toolbar/Toolbar.mjs";
+import "../likec4diagram/custom/nodes/index.mjs";
+export { CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActions, ElementDetailsButtonWithHandler, ElementNode, ElementToolbar, SequenceActorNode, SequenceParallelArea, Toolbar, ViewGroupNode };

package/dist/custom/customNodes.d.mts

@@ -0,0 +1,235 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Types } from "../likec4diagram/types.mjs";
+import { FC } from "react";
+import { aux } from "@likec4/core/types";
+import { NodeModel } from "@likec4/core/model";
+//#region src/custom/customNodes.d.ts
+type Any$1 = aux.Any;
+type Unknown = aux.UnknownLayouted;
+/**
+ * Node that will be used to render the element from the model.
+ * It is a leaf node, i.e. it does not have children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
+ *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   elementNode,
+ *   ElementNodeContainer,
+ *   ElementShape,
+ *   ElementData,
+ *   ElementActions,
+ *   ElementDetailsButtonWithHandler,
+ *   IfEnabled,
+ *   IfNotReadOnly,
+ *   ElementToolbar,
+ *   DefaultHandles,
+ *   ElementTags
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
+ *   <ElementNodeContainer nodeProps={nodeProps}>
+ *     <ElementShape {...nodeProps} />
+ *     <ElementData {...nodeProps} />
+ *     <IfEnabled feature="ElementTags">
+ *       <ElementTags {...nodeProps} />
+ *     </IfEnabled>
+ *     <ElementActions
+ *       {...nodeProps}
+ *       extraButtons={[
+ *         {
+ *           key: 'plus',
+ *           icon: <IconPlus />,
+ *           onClick: () => console.log('extra'),
+ *         },
+ *       ]}
+ *     />
+ *     <ElementDetailsButtonWithHandler {...nodeProps} />
+ *     {nodeModel.element.getMetadata('your-attr') === 'value' && <YourComponent />}
+ *     <IfNotReadOnly>
+ *       <ElementToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </ElementNodeContainer>
+ * ))
+ * ```
+ */
+export declare function elementNode<A extends Any$1 = Unknown>(component: FC<ElementNodeProps<A>>): Types.NodeRenderer<'element'>;
+export type ElementNodeProps<A extends Any$1 = Unknown> = {
+  nodeProps: Types.NodeProps<'element'>;
+  nodeModel: NodeModel.WithElement<A>;
+};
+/**
+ * Node that will be used to render the element from deployment model.
+ * It is a leaf node, i.e. it does not have children.
+ * Can be {@link DeploymentNodeModel} or {@link DeployedInstanceModel}.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: {@link NodeModel.WithDeploymentElement}
+ *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   deploymentNode,
+ *   ElementNodeContainer,
+ *   ElementShape,
+ *   ElementData,
+ *   DeploymentElementActions,
+ *   ElementDetailsButtonWithHandler,
+ *   IfNotReadOnly,
+ *   DeploymentElementToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomDeploymentNode = deploymentNode(({ nodeProps, nodeModel }) => (
+ *   <ElementNodeContainer nodeProps={nodeProps}>
+ *     <ElementShape {...nodeProps} />
+ *     <ElementData {...nodeProps} />
+ *     <DeploymentElementActions
+ *       {...nodeProps}
+ *       extraButtons={[
+ *         {
+ *           key: 'plus',
+ *           icon: <IconPlus />,
+ *           onClick: () => console.log('extra'),
+ *         },
+ *       ]}
+ *     />
+ *     <ElementDetailsButtonWithHandler {...nodeProps} />
+ *     <IfNotReadOnly>
+ *       <DeploymentElementToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </ElementNodeContainer>
+ * ))
+ * ```
+ */
+export declare function deploymentNode<A extends Any$1 = Unknown>(component: FC<DeploymentNodeProps<A>>): Types.NodeRenderer<'deployment'>;
+export type DeploymentNodeProps<A extends Any$1 = Unknown> = {
+  nodeProps: Types.NodeProps<'deployment'>;
+  nodeModel: NodeModel.WithDeploymentElement<A>;
+};
+/**
+ * Node that will be used to render the compound element from the model.
+ * It is a container node, i.e. it has children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
+ *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   compoundElementNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   CompoundActions,
+ *   CompoundDetailsButtonWithHandler,
+ *   IfEnabled,
+ *   CompoundElementToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomCompoundElementNode = compoundElementNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={props}>
+ *     <CompoundTitle {...props} />
+ *     <CompoundActions {...props} />
+ *     <IfEnabled feature="ElementDetails">
+ *       <CompoundDetailsButtonWithHandler {...props} />
+ *     </IfEnabled>
+ *     <IfNotReadOnly>
+ *       <CompoundElementToolbar {...props} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ))
+ * ```
+ */
+export declare function compoundElementNode<A extends Any$1 = Unknown>(component: FC<CompoundElementNodeProps<A>>): Types.NodeRenderer<'compound-element'>;
+export type CompoundElementNodeProps<A extends Any$1 = Unknown> = {
+  nodeProps: Types.NodeProps<'compound-element'>;
+  nodeModel: NodeModel.WithElement<A>;
+};
+/**
+ * Node that will be used to render the compound from the deployment model.
+ * It is a container node, i.e. it has children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithDeploymentElement}
+ *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   compoundDeploymentNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   CompoundActions,
+ *   CompoundDeploymentToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomCompoundDeploymentNode = compoundDeploymentNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={nodeProps}>
+ *     <CompoundTitle {...nodeProps} />
+ *     <CompoundActions {...nodeProps} />
+ *     <IfNotReadOnly>
+ *       <CompoundDeploymentToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ```
+ */
+export declare function compoundDeploymentNode<A extends Any$1 = Unknown>(component: FC<CompoundDeploymentNodeProps<A>>): Types.NodeRenderer<'compound-deployment'>;
+export type CompoundDeploymentNodeProps<A extends Any$1 = Unknown> = {
+  nodeProps: Types.NodeProps<'compound-deployment'>;
+  nodeModel: NodeModel.WithDeploymentElement<A>;
+};
+/**
+ * Node that will be used to render the view group from the model.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.IsGroup}
+ *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   viewGroupNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomViewGroupNode = viewGroupNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={nodeProps}>
+ *     <CompoundTitle {...nodeProps} />
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ```
+ */
+export declare function viewGroupNode<A extends Any$1 = Unknown>(component: FC<ViewGroupNodeProps<A>>): Types.NodeRenderer<'view-group'>;
+export type ViewGroupNodeProps<A extends Any$1 = Unknown> = {
+  nodeProps: Types.NodeProps<'view-group'>;
+  nodeModel: NodeModel.IsGroup<A>;
+};
+export declare function sequenceActorNode<A extends Any$1 = Unknown>(component: FC<SequenceActorNodeProps<A>>): Types.NodeRenderer<'seq-actor'>;
+export type SequenceActorNodeProps<A extends Any$1 = Unknown> = {
+  nodeProps: Types.NodeProps<'seq-actor'>;
+  nodeModel: NodeModel.WithElement<A>;
+};
+//#endregion