@likec4/diagram 1.59.3 → 1.59.4

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

@@ -19,7 +19,7 @@ var ElementTag = forwardRef(({ tag, cursor, className, style, ...props }, ref) =
 		className: cx(likec4tag(), className),
 		...props,
 		style: {
-			cursor,
+			...cursor && { cursor },
 			...style
 		},
 		children: [/* @__PURE__ */ jsx("span", { children: "#" }), /* @__PURE__ */ jsx("span", { children: tag })]
@@ -85,12 +85,12 @@ function WithElementTags({ id, tags, width, hovered, onTagClick, onTagMouseEnter
 				display: "flex",
 				alignItems: "center",
 				justifyContent: "center",
-				maxWidth: "50px",
-				height: "5px",
+				maxWidth: "[50px]",
+				height: "[5px]",
 				_whenHovered: {
-					height: "12px",
+					height: "[12px]",
 					borderRadius: "sm",
-					transitionDelay: ".08s"
+					transitionDelay: "fastest"
 				},
 				transition: "fast"
 			})

package/dist/components/EmptyBox.d.ts

@@ -0,0 +1,3 @@
+import { StyledComponent } from '@likec4/styles/types';
+import { EmptyBoxVariantProps } from '@likec4/styles/recipes';
+export declare const EmptyBox: StyledComponent<"div", EmptyBoxVariantProps>;

package/dist/components/EmptyBox.js

@@ -0,0 +1,9 @@
+import "../_virtual/_rolldown/runtime.js";
+import { isCssProperty, styled } from "@likec4/styles/jsx";
+import { emptyBox } from "@likec4/styles/recipes";
+//#region src/components/EmptyBox.tsx
+var EmptyBox = styled("div", emptyBox, { shouldForwardProp(prop, variantKeys) {
+	return !variantKeys.includes(prop) && !isCssProperty(prop);
+} });
+//#endregion
+export { EmptyBox };

package/dist/components/ErrorFallback.js

@@ -17,20 +17,21 @@ function ErrorFallback({ error, resetErrorBoundary }) {
 			margin: "0",
 			padding: "0",
 			position: "fixed",
-			top: "10",
-			left: "10",
-			width: "[calc(100vw - ({spacing.10} * 2))]",
+			top: "5",
+			left: "5",
+			width: "[calc(100vw - ({spacing.5} * 2))]",
 			height: "max-content",
-			maxHeight: "[calc(100vh - ({spacing.10} * 3))]",
+			maxHeight: "[calc(100vh - ({spacing.5} * 3))]",
 			background: `likec4.overlay.body`,
 			rounded: "sm",
-			borderWidth: 3,
+			borderWidth: "extra",
 			borderColor: `likec4.overlay.border`,
 			shadow: "xl",
 			outline: "none",
+			zIndex: "toast",
 			_backdrop: {
 				cursor: "zoom-out",
-				backdropFilter: `blur(18px)`,
+				backdropFilter: `[blur(18px)]`,
 				bg: "[color-mix(in oklab, {colors.likec4.overlay.backdrop} 60%, transparent)]"
 			}
 		}),

package/dist/components/FloatingWindow.d.ts

@@ -0,0 +1,18 @@
+import { FloatingWindowProps as MantineFloatingWindowProps } from '@mantine/core';
+export interface FloatingWindowProps extends MantineFloatingWindowProps {
+    /**
+     * To make window position and size persistent, provide a stable id
+     */
+    windowId?: string | null;
+    /**
+     * If true, the window will not be resizable
+     * @default false
+     */
+    nonResizeable?: boolean;
+    /**
+     * Callback when the window is closed
+     * If provided, the window will render a close button
+     */
+    onClose?: () => void;
+}
+export declare function FloatingWindow({ children, windowId, onClose, dimensions, initialPosition, className, nonResizeable, ...props }: FloatingWindowProps): import("react").JSX.Element;

package/dist/components/FloatingWindow.js

@@ -0,0 +1,89 @@
+import { __name } from "../_virtual/_rolldown/runtime.js";
+import { useId as useId$1 } from "../hooks/useId.js";
+import { useMantinePortalProps } from "../hooks/useMantinePortalProps.js";
+import { cx } from "@likec4/styles/css";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRafCallback } from "@react-hookz/web";
+import { CloseButton, FloatingWindow } from "@mantine/core";
+import { useSessionStorage } from "@mantine/hooks";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { floatingWindow } from "@likec4/styles/recipes";
+//#region src/components/FloatingWindow.tsx
+function FloatingWindow$1({ children, windowId, onClose, dimensions, initialPosition, className, nonResizeable = false, ...props }) {
+	const portalProps = useMantinePortalProps();
+	const id = useId$1();
+	const [windowState, setWindowState] = useSessionStorage({
+		key: `likec4:window:${windowId ?? id}`,
+		getInitialValueInEffect: false,
+		defaultValue: {
+			dimensions: {
+				minWidth: 220,
+				minHeight: 250,
+				initialWidth: 260,
+				initialHeight: 360,
+				...dimensions
+			},
+			initialPosition: {
+				top: 65,
+				left: 32,
+				...initialPosition
+			}
+		}
+	});
+	const initialStateRef = useRef(windowState);
+	const [updateWindowState] = useRafCallback((update) => {
+		setWindowState((state) => ({
+			dimensions: {
+				...state.dimensions,
+				...update.dimensions
+			},
+			initialPosition: {
+				...state.initialPosition,
+				...update.initialPosition
+			}
+		}));
+	});
+	return /* @__PURE__ */ jsxs(FloatingWindow, {
+		constrainToViewport: true,
+		constrainOffset: 4,
+		dragHandleSelector: ".drag-handle",
+		excludeDragHandleSelector: "button, .nodrag, .mantine-ScrollArea-root",
+		className: cx(floatingWindow(), className),
+		...portalProps,
+		...props,
+		...initialStateRef.current,
+		onPositionChange: (position) => {
+			updateWindowState({ initialPosition: {
+				top: position.y,
+				left: position.x
+			} });
+			props.onPositionChange?.(position);
+		},
+		onSizeChange: (size) => {
+			updateWindowState({ dimensions: {
+				initialHeight: size.height,
+				initialWidth: size.width
+			} });
+			props.onSizeChange?.(size);
+		},
+		children: [
+			children,
+			!nonResizeable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FloatingWindow.ResizeHandle, {
+				"data-resize-handler": "right",
+				tabIndex: -1
+			}), /* @__PURE__ */ jsx(FloatingWindow.ResizeHandle, { "data-resize-handler": "bottom" })] }),
+			/* @__PURE__ */ jsx(Box$1, {
+				className: "drag-header drag-handle",
+				pr: "1",
+				children: onClose && /* @__PURE__ */ jsx(CloseButton, {
+					size: 16,
+					onClick: onClose
+				})
+			})
+		]
+	});
+}
+__name(FloatingWindow$1, "FloatingWindow");
+//#endregion
+export { FloatingWindow$1 as FloatingWindow };

package/dist/components/Link.js

@@ -23,9 +23,9 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 			timeout: 1500,
 			children: ({ copy, copied }) => /* @__PURE__ */ jsx(ActionIcon, {
 				className: css({
-					opacity: copied ? 1 : .45,
+					opacity: copied ? "1" : "0.45",
 					transition: "fast",
-					_hover: { opacity: 1 }
+					_hover: { opacity: "1" }
 				}),
 				tabIndex: -1,
 				size: "20",
@@ -45,8 +45,8 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 		classNames: {
 			root: css({
 				flexWrap: "nowrap",
-				minHeight: 24,
-				maxWidth: 500,
+				minHeight: "[24px]",
+				maxWidth: "[500px]",
 				userSelect: "all",
 				pr: "0",
 				backgroundColor: {
@@ -63,7 +63,7 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 				pointerEvents: "none",
 				_groupHover: {
 					color: "[var(--badge-color)]",
-					opacity: .7
+					opacity: "0.7"
 				}
 			} })
 		},
@@ -77,8 +77,8 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 			css: {
 				transition: "fast",
 				opacity: {
-					base: .7,
-					_hover: 1
+					base: "0.7",
+					_hover: "1"
 				},
 				textDecoration: {
 					base: "none",

package/dist/components/NavigationPanel.d.ts

@@ -1,7 +1,7 @@
 import { ForwardRefComponent, HTMLMotionProps } from 'motion/react';
 import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
-import { StyleContextProvider, StyleContextConsumer } from '../../styled-system/jsx';
-import { NavigationPanelRecipe } from '../../styled-system/recipes';
+import { StyleContextProvider, StyleContextConsumer } from '@likec4/styles/jsx';
+import { NavigationPanelRecipe } from '@likec4/styles/recipes';
 export declare const NavigationPanel: {
     Root: StyleContextProvider<ForwardRefComponent<"div", HTMLMotionProps<"div">>, NavigationPanelRecipe>;
     Body: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;

package/dist/components/NavigationPanel.js

@@ -3,9 +3,8 @@ import { Logo as Logo$1, LogoIcon } from "./Logo.js";
 import { cx } from "@likec4/styles/css";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { isValidMotionProp } from "motion/react";
+import { isValidMotionProp, m } from "motion/react";
 import { createStyleContext, isCssProperty } from "@likec4/styles/jsx";
-import * as m$1 from "motion/react-m";
 import { navigationPanel } from "@likec4/styles/recipes";
 //#region src/components/NavigationPanel.tsx
 var { withProvider, withContext } = createStyleContext(navigationPanel);
@@ -19,11 +18,11 @@ var LogoButton = forwardRef(({ className, ...props }, ref) => {
 	});
 });
 var NavigationPanel = {
-	Root: withProvider(m$1.div, "root", { shouldForwardProp }),
-	Body: withContext(m$1.div, "body", { shouldForwardProp }),
+	Root: withProvider(m.div, "root", { shouldForwardProp }),
+	Body: withContext(m.div, "body", { shouldForwardProp }),
 	Logo: withContext(LogoButton, "logo", { shouldForwardProp }),
-	Label: withContext(m$1.div, "label", { shouldForwardProp }),
-	Dropdown: withContext(m$1.div, "dropdown", { shouldForwardProp })
+	Label: withContext(m.div, "label", { shouldForwardProp }),
+	Dropdown: withContext(m.div, "dropdown", { shouldForwardProp })
 };
 //#endregion
 export { NavigationPanel };

package/dist/components/SearchControl.css.js

@@ -1,23 +1,21 @@
 import { css } from "@likec4/styles/css";
 //#region src/components/SearchControl.css.ts
 var root = css({
-	height: "30px",
+	height: "control.sm",
 	paddingLeft: "sm",
 	paddingRight: "1",
 	borderRadius: "sm",
-	border: "1px solid",
+	border: "default",
 	borderColor: {
-		base: "default.border",
+		base: "border.default",
 		_light: "mantine.gray[4]",
 		_dark: "mantine.dark[4]",
-		_hover: "default.border"
+		_hover: "border.default"
 	},
 	cursor: "pointer",
 	background: {
-		base: "default",
-		_light: "white",
-		_dark: "mantine.dark[6]",
-		_hover: "default.hover"
+		base: "surface.default",
+		_hover: "surface.hover"
 	},
 	width: "100%",
 	"& .tabler-icon": { color: "text" },
@@ -35,18 +33,18 @@ var placeholder = css({
 	fontSize: "sm",
 	fontWeight: "medium",
 	paddingRight: "2.5",
-	color: "text.placeholder",
+	color: "text.non-essential",
 	flex: "1",
 	sm: { paddingRight: "[30px]" },
 	md: { paddingRight: "[50px]" }
 });
 var shortcut = css({
-	fontSize: "11px",
+	fontSize: "xxs",
 	fontWeight: "bold",
-	lineHeight: 1,
+	lineHeight: "tight",
 	padding: "[4px 7px]",
 	borderRadius: "sm",
-	border: "1px solid",
+	border: "default",
 	transition: "fast",
 	_light: {
 		color: "mantine.gray[7]",

package/dist/components/ViewIcon.d.ts

@@ -0,0 +1,11 @@
+import { IconProps } from '@tabler/icons-react';
+import { JSX } from 'react/jsx-runtime';
+/**
+ * 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
+ */
+export declare function viewIcon(viewType: 'index' | 'element' | 'deployment' | 'dynamic'): JSX.Element;
+export declare function ViewIcon({ type, className, ...props }: IconProps & {
+    type: 'index' | 'element' | 'deployment' | 'dynamic';
+}): JSX.Element;

package/dist/components/ViewIcon.js

@@ -0,0 +1,71 @@
+import "../_virtual/_rolldown/runtime.js";
+import { css, cx } from "@likec4/styles/css";
+import { IconDirectionSignFilled, IconStack2, IconStarFilled, IconZoomScan } from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+import { nonexhaustive } from "@likec4/core";
+//#region src/components/ViewIcon.tsx
+var viewTypeIconCss = css({
+	verticalAlign: "middle",
+	opacity: {
+		base: "0.4",
+		_dark: "0.5",
+		_groupHover: "0.8",
+		_groupActive: "0.8",
+		_groupFocus: "0.8"
+	}
+});
+var 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/context/DiagramEventHandlers.js

@@ -16,7 +16,8 @@ var defaultHandlers = {
 	onLogoClick: null,
 	onOpenSource: null,
 	onInitialized: null,
-	onLayoutTypeChange: null
+	onLayoutTypeChange: null,
+	onRelationshipBrowserScopeChange: null
 };
 var HandlerNames = keys(defaultHandlers);
 var DiagramEventHandlersRefContext = createContext({ current: defaultHandlers });

package/dist/context/EnsureMantine.js

@@ -1,5 +1,5 @@
 import "../_virtual/_rolldown/runtime.js";
-import { DefaultMantineProvider } from "./DefaultMantineProvider.js";
+import { LikeC4MantineProvider } from "../LikeC4MantineProvider.js";
 import { useContext, useEffect } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { MantineContext } from "@mantine/core";
@@ -7,9 +7,9 @@ import { MantineContext } from "@mantine/core";
 function EnsureMantine({ children }) {
 	const mantineCtx = useContext(MantineContext);
 	useEffect(() => {
-		if (!mantineCtx) console.warn("LikeC4Diagram must be a child of MantineProvider");
+		if (!mantineCtx) console.warn("LikeC4Diagram must be a child of LikeC4MantineProvider");
 	}, []);
-	if (!mantineCtx) return /* @__PURE__ */ jsx(DefaultMantineProvider, { children });
+	if (!mantineCtx) return /* @__PURE__ */ jsx(LikeC4MantineProvider, { children });
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
 //#endregion

package/dist/context/IconRenderer.d.ts

@@ -1,6 +1,6 @@
 import { ElementShape } from '@likec4/core';
 import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
-import { ElementIconRenderer } from '../LikeC4Diagram.props';
+import { ElementIconRenderer, ElementIconRendererProps } from '../LikeC4Diagram.props';
 /**
  * Provider for custom element icon renderers
  *
@@ -37,3 +37,4 @@ export declare function IconOrShapeRenderer({ element, className, style, }: {
     className?: string;
     style?: CSSProperties | undefined;
 }): import("react").JSX.Element;
+export declare function DefaultIconRenderer({ node, ...props }: ElementIconRendererProps): import("react").JSX.Element | null;

package/dist/context/IconRenderer.js

@@ -48,7 +48,7 @@ function IconRenderer({ element, className, style }) {
 		case !!RenderIcon:
 			icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
 			break;
-		default: icon = null;
+		default: icon = /* @__PURE__ */ jsx(DefaultIconRenderer, { node: element });
 	}
 	if (!icon) return null;
 	return /* @__PURE__ */ jsx("div", {
@@ -129,5 +129,41 @@ function decodeSvgDataUrl(dataUrl) {
 		return null;
 	}
 }
+var 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 { IconOrShapeRenderer, IconRenderer, IconRendererProvider };
+export { DefaultIconRenderer, IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/LikeC4ProjectsContext.d.ts

@@ -1,7 +1,8 @@
-import { LikeC4Project, ProjectId } from '@likec4/core/types';
+import { ProjectId } from '@likec4/core/types';
+import { LikeC4ProjectData } from '../LikeC4ProjectsProvider';
 import { Provider } from 'react';
 export type LikeC4ProjectsContext = {
-    projects: ReadonlyArray<LikeC4Project>;
+    projects: ReadonlyArray<LikeC4ProjectData>;
     onProjectChange: (id: ProjectId) => void;
 };
 export declare const LikeC4ProjectsContextProvider: Provider<LikeC4ProjectsContext | null>;

package/dist/context/TagStylesContext.d.ts

@@ -2,8 +2,14 @@ import { TagSpecification } from '@likec4/core';
 import { LikeC4Styles } from '@likec4/core/styles';
 import { PropsWithChildren } from 'react';
 export declare function generateColorVars(spec: TagSpecification, styles?: LikeC4Styles): string;
-export declare function TagStylesProvider({ children, id }: PropsWithChildren<{
-    id: string;
-}>): import("react").JSX.Element;
+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;
 export declare function useTagSpecifications(): Record<string, TagSpecification>;
 export declare function useTagSpecification(tag: string): TagSpecification;
+export {};

package/dist/context/TagStylesContext.js

@@ -2,7 +2,7 @@ import "../_virtual/_rolldown/runtime.js";
 import { useLikeC4Specification } from "../hooks/useLikeC4Model.js";
 import { useLikeC4Styles } from "../hooks/useLikeC4Styles.js";
 import { createContext, memo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+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";
@@ -12,9 +12,9 @@ var 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};
+  --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)`;
@@ -26,18 +26,18 @@ function generateColorVars(spec, styles = LikeC4Styles.DEFAULT) {
 			"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};
+  --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};
+  --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 "";
@@ -51,18 +51,18 @@ function generateStylesheet(tags, rootSelector, styles) {
 		"}"
 	]), join("\n"));
 }
-function TagStylesProvider({ children, id }) {
+function TagStylesProvider({ children, rootSelector }) {
 	const tags = useLikeC4Specification().tags;
 	const styles = useLikeC4Styles();
 	const nonce = useMantineStyleNonce()?.();
-	const stylesheet = generateStylesheet(tags, `#${id}`, styles);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, {
-		nonce,
-		stylesheet
-	}), /* @__PURE__ */ jsx(TagStylesContext.Provider, {
+	const stylesheet = generateStylesheet(tags, rootSelector, styles);
+	return /* @__PURE__ */ jsxs(TagStylesContext.Provider, {
 		value: tags,
-		children
-	})] });
+		children: [stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, {
+			nonce,
+			stylesheet
+		}), children]
+	});
 }
 var TagStylesheet = memo(({ stylesheet, nonce }) => {
 	return /* @__PURE__ */ jsx("style", {

package/dist/custom/index.d.ts

@@ -14,3 +14,6 @@ export { PortalToContainer } from '../components/PortalToContainer';
 export { FramerMotionConfig } from '../context/FramerMotionConfig';
 export { NavigationPanel } from '../components/NavigationPanel';
 export { ErrorBoundary, ErrorFallback } from '../components/ErrorFallback';
+export { LikeC4MantineProvider } from '../LikeC4MantineProvider';
+export { LikeC4Styles } from '../LikeC4Styles';
+export { TagStylesProvider } from '../context/TagStylesContext';

package/dist/custom/index.js

@@ -3,6 +3,7 @@ import { Base } from "../base/Base.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
 import { useSetState } from "../hooks/useSetState.js";
 import { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from "../context/DiagramFeatures.js";
+import { LikeC4MantineProvider } from "../LikeC4MantineProvider.js";
 import { FramerMotionConfig } from "../context/FramerMotionConfig.js";
 import { useDiagram, useDiagramActorRef } from "../hooks/safeContext.js";
 import { useDiagramContext, useOnDiagramEvent } from "../hooks/useDiagram.js";
@@ -10,6 +11,7 @@ import { useCurrentView, useCurrentViewId } from "../hooks/useCurrentView.js";
 import { useOptionalCurrentViewModel, useOptionalLikeC4Model } from "../context/LikeC4ModelContext.js";
 import { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from "../hooks/useLikeC4Model.js";
 import { useLikeC4Styles } from "../hooks/useLikeC4Styles.js";
+import { TagStylesProvider } from "../context/TagStylesContext.js";
 import { ErrorBoundary, ErrorFallback } from "../components/ErrorFallback.js";
 import { useCurrentViewModel } from "../hooks/useCurrentViewModel.js";
 import { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from "../hooks/useLikeC4Project.js";
@@ -27,8 +29,6 @@ import { ElementTag, ElementTags } from "../base-primitives/element/ElementTags.
 import { memoEdge } from "../base-primitives/memoEdge.js";
 import { memoNode } from "../base-primitives/memoNode.js";
 import { DefaultHandles } from "../base-primitives/NodeHandles.js";
-import { Overlay } from "../overlays/overlay/Overlay.js";
-import { PortalToContainer } from "../components/PortalToContainer.js";
 import { CompoundActions } from "../likec4diagram/custom/nodes/CompoundActions.js";
 import { DeploymentElementActions, ElementActions } from "../likec4diagram/custom/nodes/ElementActions.js";
 import { Toolbar } from "../likec4diagram/custom/nodes/toolbar/Toolbar.js";
@@ -37,5 +37,8 @@ import { DeploymentElementToolbar, ElementToolbar } from "../likec4diagram/custo
 import { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from "../likec4diagram/custom/nodes/nodes.js";
 import { SequenceActorNode, SequenceParallelArea } from "../likec4diagram/custom/nodes/SequenceActorNode.js";
 import { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from "./customNodes.js";
+import { Overlay } from "../overlays/overlay/Overlay.js";
+import { PortalToContainer } from "../components/PortalToContainer.js";
 import { NavigationPanel } from "../components/NavigationPanel.js";
-export { Base, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, ElementNode, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementToolbar, ErrorBoundary, ErrorFallback, FramerMotionConfig, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, Markdown, NavigationPanel, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, Toolbar, ViewGroupNode, compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, memoEdge, memoNode, sequenceActorNode, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramEventHandlers, useEnabledFeatures, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSetState, useUpdateEffect, viewGroupNode };
+import { LikeC4Styles } from "../LikeC4Styles.js";
+export { Base, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, ElementNode, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementToolbar, ErrorBoundary, ErrorFallback, FramerMotionConfig, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, LikeC4MantineProvider, LikeC4Styles, Markdown, NavigationPanel, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, TagStylesProvider, Toolbar, ViewGroupNode, compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, memoEdge, memoNode, sequenceActorNode, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramEventHandlers, useEnabledFeatures, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSetState, useUpdateEffect, viewGroupNode };