@likec4/diagram 1.59.3 → 1.60.0

package/dist/components/NavigationPanel.mjs

@@ -0,0 +1,35 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Logo as Logo$1, LogoIcon } from "./Logo.mjs";
+import { cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidMotionProp, m } from "motion/react";
+import { createStyleContext, isCssProperty } from "@likec4/styles/jsx";
+import { navigationPanel } from "@likec4/styles/recipes";
+
+//#region src/components/NavigationPanel.tsx
+const { withProvider, withContext } = createStyleContext(navigationPanel);
+const shouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && (isValidMotionProp(prop) || !isCssProperty(prop));
+const LogoButton = forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		ref,
+		className: cx("mantine-active", className),
+		children: [/* @__PURE__ */ jsx(LogoIcon, { "data-logo-icon": true }), /* @__PURE__ */ jsx(Logo$1, { "data-logo-full": true })]
+	});
+});
+const Root = withProvider(m.div, "root", { shouldForwardProp });
+const Body = withContext(m.div, "body", { shouldForwardProp });
+const Logo = withContext(LogoButton, "logo", { shouldForwardProp });
+const Label = withContext(m.div, "label", { shouldForwardProp });
+const Dropdown = withContext(m.div, "dropdown", { shouldForwardProp });
+const NavigationPanel = {
+	Root,
+	Body,
+	Logo,
+	Label,
+	Dropdown
+};
+
+//#endregion
+export { NavigationPanel };

package/dist/components/PortalToContainer.d.mts

@@ -0,0 +1,9 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { PropsWithChildren } from "react";
+//#region src/components/PortalToContainer.d.ts
+/**
+ * PortalToContainer is used to render elements outside the LikeC4DiagramXYFlow, but inside the container.
+ * It is used internally by the library.
+ */
+export declare function PortalToContainer({ children }: PropsWithChildren): import("react").JSX.Element;
+//#endregion

package/dist/components/PortalToContainer.mjs

@@ -0,0 +1,21 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useRootContainerContext } from "../context/RootContainerContext.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Portal } from "@mantine/core";
+
+//#region src/components/PortalToContainer.tsx
+/**
+* PortalToContainer is used to render elements outside the LikeC4DiagramXYFlow, but inside the container.
+* It is used internally by the library.
+*/
+function PortalToContainer({ children }) {
+	const ctx = useRootContainerContext();
+	if (!ctx) throw new Error("PortalToContainer must be used within RootContainer");
+	return /* @__PURE__ */ jsx(Portal, {
+		target: ctx.ref.current ?? ctx.selector,
+		children
+	});
+}
+
+//#endregion
+export { PortalToContainer };

package/dist/components/RootContainer.mjs

@@ -0,0 +1,40 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { RootContainerContextProvider } from "../context/RootContainerContext.mjs";
+import { cx } from "@likec4/styles/css";
+import { useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStore } from "@nanostores/react";
+import { atom } from "nanostores";
+
+//#region src/components/RootContainer.tsx
+function RootContainer({ id, className, reduceGraphics = false, children }) {
+	const ref = useRef(null);
+	const [$isPanning] = useState(() => atom(false));
+	const isPanning = useStore($isPanning);
+	const ctx = useMemo(() => ({
+		id,
+		ref,
+		selector: `#${id}`,
+		reducedGraphics: reduceGraphics,
+		$panning: $isPanning
+	}), [
+		id,
+		ref,
+		reduceGraphics,
+		$isPanning
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: cx("likec4-root", className),
+		ref,
+		"data-likec4-diagram-panning": isPanning,
+		...reduceGraphics && { ["data-likec4-reduced-graphics"]: true },
+		children: /* @__PURE__ */ jsx(RootContainerContextProvider, {
+			value: ctx,
+			children
+		})
+	});
+}
+
+//#endregion
+export { RootContainer };

package/dist/components/SearchControl.css.mjs

@@ -0,0 +1,69 @@
+import { css } from "@likec4/styles/css";
+
+//#region src/components/SearchControl.css.ts
+const root = css({
+	height: "control.sm",
+	paddingLeft: "sm",
+	paddingRight: "1",
+	borderRadius: "sm",
+	border: "default",
+	borderColor: {
+		base: "border.default",
+		_light: "mantine.gray[4]",
+		_dark: "mantine.dark[4]",
+		_hover: "border.default"
+	},
+	cursor: "pointer",
+	background: {
+		base: "surface.default",
+		_hover: "surface.hover"
+	},
+	width: "100%",
+	"& .tabler-icon": { color: "text" },
+	transition: {
+		base: "fast",
+		_whenPanning: "none !important"
+	},
+	boxShadow: {
+		base: "xs",
+		_hover: "sm",
+		_whenPanning: "none !important"
+	}
+});
+const placeholder = css({
+	fontSize: "sm",
+	fontWeight: "medium",
+	paddingRight: "2.5",
+	color: "text.non-essential",
+	flex: "1",
+	sm: { paddingRight: "[30px]" },
+	md: { paddingRight: "[50px]" }
+});
+const shortcut = css({
+	fontSize: "xxs",
+	fontWeight: "bold",
+	lineHeight: "tight",
+	padding: "[4px 7px]",
+	borderRadius: "sm",
+	border: "default",
+	transition: "fast",
+	_light: {
+		color: "mantine.gray[7]",
+		borderColor: "mantine.gray[2]"
+	},
+	_dark: {
+		color: "mantine.dark[0]",
+		borderColor: "mantine.dark[7]"
+	},
+	backgroundColor: {
+		_light: "mantine.gray[2]/70",
+		_dark: "mantine.dark[8]/70",
+		_groupHover: {
+			_light: "mantine.gray[2]",
+			_dark: "mantine.dark[8]"
+		}
+	}
+});
+
+//#endregion
+export { placeholder, root, shortcut };

package/dist/components/SearchControl.d.mts

@@ -0,0 +1,6 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ElementProps, UnstyledButtonProps } from "@mantine/core";
+//#region src/components/SearchControl.d.ts
+interface SearchControlProps extends Omit<UnstyledButtonProps, 'className'>, ElementProps<'button'> {}
+export declare function SearchControl({ className, ...others }: SearchControlProps): import("react").JSX.Element;
+//#endregion

package/dist/components/SearchControl.mjs

@@ -0,0 +1,41 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import IconSearch from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs";
+import { placeholder, root, shortcut } from "./SearchControl.css.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Group, Text, UnstyledButton } from "@mantine/core";
+import { isMacOs } from "@xyflow/system";
+
+//#region src/components/SearchControl.tsx
+function SearchControl({ className, ...others }) {
+	const isMac = isMacOs();
+	return /* @__PURE__ */ jsx(UnstyledButton, {
+		...others,
+		className: cx("group", root, className),
+		children: /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			children: [
+				/* @__PURE__ */ jsx(IconSearch, {
+					style: {
+						width: "15px",
+						height: "15px"
+					},
+					stroke: 2
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					component: "div",
+					className: placeholder,
+					children: "Search"
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					component: "div",
+					className: shortcut,
+					children: isMac ? "⌘ + K" : "Ctrl + K"
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { SearchControl };

package/dist/components/ViewIcon.mjs

@@ -0,0 +1,76 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import IconStack2 from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.mjs";
+import IconZoomScan from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import IconDirectionSignFilled from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.mjs";
+import IconStarFilled from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { nonexhaustive } from "@likec4/core";
+
+//#region src/components/ViewIcon.tsx
+const viewTypeIconCss = css({
+	verticalAlign: "middle",
+	opacity: {
+		base: "0.4",
+		_dark: "0.5",
+		_groupHover: "0.8",
+		_groupActive: "0.8",
+		_groupFocus: "0.8"
+	}
+});
+const viewIcons = {
+	index: /* @__PURE__ */ jsx(IconStarFilled, {
+		size: 16,
+		className: viewTypeIconCss
+	}),
+	element: /* @__PURE__ */ jsx(IconZoomScan, {
+		size: 18,
+		stroke: 2,
+		className: viewTypeIconCss
+	}),
+	deployment: /* @__PURE__ */ jsx(IconStack2, {
+		size: 16,
+		stroke: 1.5,
+		className: viewTypeIconCss
+	}),
+	dynamic: /* @__PURE__ */ jsx(IconDirectionSignFilled, {
+		size: 18,
+		className: viewTypeIconCss
+	})
+};
+/**
+* Returns the appropriate icon component for a given view type.
+* @param viewType - The type of view ('index', 'element', 'deployment', or 'dynamic')
+* @returns The corresponding icon component
+*/
+function viewIcon(viewType) {
+	return viewIcons[viewType];
+}
+function ViewIcon({ type, className, ...props }) {
+	if (type === "index") return /* @__PURE__ */ jsx(IconStarFilled, {
+		size: 16,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	if (type === "element") return /* @__PURE__ */ jsx(IconZoomScan, {
+		size: 18,
+		stroke: 2,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	if (type === "deployment") return /* @__PURE__ */ jsx(IconStack2, {
+		size: 16,
+		stroke: 1.5,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	if (type === "dynamic") return /* @__PURE__ */ jsx(IconDirectionSignFilled, {
+		size: 18,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	nonexhaustive(type);
+}
+
+//#endregion
+export { ViewIcon, viewIcon };

package/dist/components/ViewNotFound.mjs

@@ -0,0 +1,29 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ViewNotFound.tsx
+function ErrorMessage({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: { margin: "1em 0" },
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				margin: "0 auto",
+				display: "inline-block",
+				padding: "2em",
+				background: "rgba(250,82,82,.15)",
+				color: "#ffa8a8"
+			},
+			children
+		})
+	});
+}
+function ViewNotFound({ viewId }) {
+	return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+		"View ",
+		/* @__PURE__ */ jsx("code", { children: viewId }),
+		" not found"
+	] });
+}
+
+//#endregion
+export { ErrorMessage, ViewNotFound };

package/dist/context/CurrentViewModelProvider.mjs

@@ -0,0 +1,17 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useCurrentViewId } from "../hooks/useCurrentView.mjs";
+import { CurrentViewModelContext, useOptionalLikeC4Model } from "./LikeC4ModelContext.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/context/CurrentViewModelProvider.tsx
+function CurrentViewModelProvider({ children }) {
+	const viewId = useCurrentViewId();
+	const viewmodel = useOptionalLikeC4Model()?.findView(viewId) ?? null;
+	return /* @__PURE__ */ jsx(CurrentViewModelContext, {
+		value: viewmodel,
+		children
+	});
+}
+
+//#endregion
+export { CurrentViewModelProvider };

package/dist/context/DiagramEventHandlers.d.mts

@@ -0,0 +1,11 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { LikeC4DiagramEventHandlers } from "../LikeC4Diagram.props.mjs";
+import { PropsWithChildren, RefObject } from "react";
+//#region src/context/DiagramEventHandlers.d.ts
+type RequiredOrNull<T> = { [P in keyof T]-?: NonNullable<T[P]> | null; };
+type DiagramEventHandlersRef = RefObject<Required<LikeC4DiagramEventHandlers>>;
+export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandlers> & {
+  handlersRef: DiagramEventHandlersRef;
+};
+export declare function useDiagramEventHandlers(): DiagramEventHandlersContext;
+//#endregion

package/dist/context/DiagramEventHandlers.mjs

@@ -0,0 +1,48 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction, keys, mapToObj } from "remeda";
+
+//#region src/context/DiagramEventHandlers.tsx
+const defaultHandlers = {
+	onNavigateTo: null,
+	onNodeClick: null,
+	onNodeContextMenu: null,
+	onCanvasContextMenu: null,
+	onEdgeClick: null,
+	onEdgeContextMenu: null,
+	onCanvasClick: null,
+	onCanvasDblClick: null,
+	onLogoClick: null,
+	onOpenSource: null,
+	onInitialized: null,
+	onLayoutTypeChange: null,
+	onRelationshipBrowserScopeChange: null
+};
+const HandlerNames = keys(defaultHandlers);
+const DiagramEventHandlersReactContext = createContext({
+	...mapToObj(HandlerNames, (name) => [name, null]),
+	handlersRef: { current: defaultHandlers }
+});
+function DiagramEventHandlers({ handlers, children }) {
+	const handlersRef = useRef(handlers);
+	handlersRef.current = handlers;
+	const deps = HandlerNames.map((name) => isFunction(handlers[name]) ? name : "-").join(",");
+	const value = useMemo(() => ({
+		...mapToObj(HandlerNames, (name) => {
+			if (isFunction(handlers[name])) return [name, (...args) => handlersRef.current[name]?.(...args)];
+			return [name, null];
+		}),
+		handlersRef
+	}), [handlersRef, deps]);
+	return /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, {
+		value,
+		children
+	});
+}
+function useDiagramEventHandlers() {
+	return useContext(DiagramEventHandlersReactContext);
+}
+
+//#endregion
+export { DiagramEventHandlers, useDiagramEventHandlers };

package/dist/context/DiagramFeatures.d.mts

@@ -0,0 +1,29 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { PropsWithChildren } from "react";
+import { JSX as JSX$1 } from "react/jsx-runtime";
+import { ExclusiveUnion } from "@likec4/core/types";
+//#region src/context/DiagramFeatures.d.ts
+declare const FeatureNames: readonly ["Controls", "Editor", "AISemanticLayout", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Notes", "Vscode", "ElementTags"];
+export type FeatureName = typeof FeatureNames[number];
+export type TogglableFeature = ('ReadOnly' | 'CompareWithLatest') & FeatureName;
+export type EnabledFeatures = { [P in `enable${FeatureName}`]: boolean; };
+export declare function useEnabledFeatures(): EnabledFeatures;
+/**
+ * Renders children only if the specified feature is enabled
+ * @param feature Feature name
+ * @param and Additional AND condition
+ * @example
+ * <IfEnabled feature="ReadOnly" and={isSomething}>
+ *   ...
+ * </IfEnabled>
+ */
+export declare function IfEnabled({ feature, children, and }: PropsWithChildren<{
+  feature: FeatureName;
+  and?: boolean;
+}>): JSX$1.Element | null;
+export declare function IfNotEnabled({ feature, children }: PropsWithChildren<{
+  feature: FeatureName;
+}>): JSX$1.Element | null;
+export declare function IfReadOnly({ children }: PropsWithChildren): JSX$1.Element | null;
+export declare function IfNotReadOnly({ children }: PropsWithChildren): JSX$1.Element | null;
+//#endregion

package/dist/context/DiagramFeatures.mjs

@@ -0,0 +1,95 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useUpdateEffect } from "../hooks/useUpdateEffect.mjs";
+import { useSetState } from "../hooks/useSetState.mjs";
+import { createContext, useContext } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+
+//#region src/context/DiagramFeatures.tsx
+const DefaultFeatures = {
+	enableEditor: false,
+	/**
+	* Enabled if editor has `applySemanticLayout` method
+	*/
+	enableAISemanticLayout: false,
+	enableReadOnly: true,
+	enableCompareWithLatest: false,
+	enableControls: false,
+	enableDynamicViewWalkthrough: false,
+	enableElementDetails: false,
+	enableFocusMode: false,
+	enableNavigateTo: false,
+	enableNotations: false,
+	enableRelationshipBrowser: false,
+	enableRelationshipDetails: false,
+	enableSearch: false,
+	enableNavigationButtons: false,
+	enableFitView: false,
+	enableVscode: false,
+	enableElementTags: false,
+	enableNotes: false
+};
+const DiagramFeaturesContext = createContext(DefaultFeatures);
+function DiagramFeatures({ children, features, overrides }) {
+	const outerScope = useContext(DiagramFeaturesContext);
+	const [scope, setScope] = useSetState(() => ({
+		...outerScope,
+		...features,
+		...overrides
+	}));
+	useUpdateEffect(() => {
+		setScope({
+			...outerScope,
+			...features,
+			...overrides
+		});
+	}, [
+		outerScope,
+		features,
+		overrides,
+		setScope
+	]);
+	return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, {
+		value: scope,
+		children
+	});
+}
+const overridesForOverlays = {
+	enableControls: false,
+	enableReadOnly: true,
+	enableAISemanticLayout: false,
+	enableCompareWithLatest: false
+};
+DiagramFeatures.Overlays = ({ children }) => {
+	return /* @__PURE__ */ jsx(DiagramFeatures, {
+		overrides: overridesForOverlays,
+		children
+	});
+};
+function useEnabledFeatures() {
+	return useContext(DiagramFeaturesContext);
+}
+/**
+* Renders children only if the specified feature is enabled
+* @param feature Feature name
+* @param and Additional AND condition
+* @example
+* <IfEnabled feature="ReadOnly" and={isSomething}>
+*   ...
+* </IfEnabled>
+*/
+function IfEnabled({ feature, children, and = true }) {
+	return useEnabledFeatures()[`enable${feature}`] === true && and ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
+}
+function IfNotEnabled({ feature, children }) {
+	return useEnabledFeatures()[`enable${feature}`] !== true ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
+}
+function IfReadOnly({ children }) {
+	return useEnabledFeatures().enableReadOnly === true ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
+}
+function IfNotReadOnly({ children }) {
+	if (useEnabledFeatures().enableReadOnly === true) return null;
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+
+//#endregion
+export { DefaultFeatures, DiagramFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures };

package/dist/context/EnsureMantine.mjs

@@ -0,0 +1,18 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { LikeC4MantineProvider } from "../LikeC4MantineProvider.mjs";
+import { useContext, useEffect } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { MantineContext } from "@mantine/core";
+
+//#region src/context/EnsureMantine.tsx
+function EnsureMantine({ children }) {
+	const mantineCtx = useContext(MantineContext);
+	useEffect(() => {
+		if (!mantineCtx) console.warn("LikeC4Diagram must be a child of LikeC4MantineProvider");
+	}, []);
+	if (!mantineCtx) return /* @__PURE__ */ jsx(LikeC4MantineProvider, { children });
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+
+//#endregion
+export { EnsureMantine };

package/dist/context/FramerMotionConfig.d.mts

@@ -0,0 +1,11 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { PropsWithChildren } from "react";
+//#region src/context/FramerMotionConfig.d.ts
+export declare function FramerMotionConfig({ reducedMotion, children }: PropsWithChildren<{
+  /**
+   * If true, will respect the device prefersReducedMotion setting by switching
+   * transform animations off.
+   */
+  reducedMotion?: 'always' | 'never' | 'user' | undefined;
+}>): import("react").JSX.Element;
+//#endregion

package/dist/context/FramerMotionConfig.mjs

@@ -0,0 +1,21 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useMantineStyleNonce } from "@mantine/core";
+import { LazyMotion, MotionConfig, domMax } from "motion/react";
+
+//#region src/context/FramerMotionConfig.tsx
+function FramerMotionConfig({ reducedMotion = "user", children }) {
+	const nonce = useMantineStyleNonce()?.();
+	return /* @__PURE__ */ jsx(LazyMotion, {
+		features: domMax,
+		strict: true,
+		children: /* @__PURE__ */ jsx(MotionConfig, {
+			reducedMotion,
+			...nonce && { nonce },
+			children
+		})
+	});
+}
+
+//#endregion
+export { FramerMotionConfig };

package/dist/context/IconRenderer.d.mts

@@ -0,0 +1,24 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ElementIconRenderer, ElementIconRendererProps } from "../LikeC4Diagram.props.mjs";
+import { CSSProperties, PropsWithChildren, ReactNode } from "react";
+import { ElementShape } from "@likec4/core";
+//#region src/context/IconRenderer.d.ts
+/**
+ * Provider for custom element icon renderers
+ *
+ * @example
+ * ```tsx
+ * const MyIconRenderer: ElementIconRenderer = ({ node }) => {
+ *   return <div>{node.title}</div>
+ * }
+ *
+ * <IconRendererProvider value={MyIconRenderer}>
+ *   <LikeC4Diagram />
+ * </IconRendererProvider>
+ * ```
+ */
+export declare function IconRendererProvider({ value, children }: PropsWithChildren<{
+  value: ElementIconRenderer | null;
+}>): import("react").JSX.Element;
+export declare function DefaultIconRenderer({ node, ...props }: ElementIconRendererProps): import("react").JSX.Element | null;
+//#endregion