@likec4/diagram 1.57.0 → 1.59.0

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

@@ -66,6 +66,7 @@ function ElementActionButtons({ selected = false, data: { hovered: isHovered = f
 			break;
 		default: variant = "normal";
 	}
+	const isActionVisible = isHovered || selected;
 	return /* @__PURE__ */ jsx("div", {
 		className: actionButtons(),
 		children: /* @__PURE__ */ jsx(m.div, {
@@ -83,7 +84,9 @@ function ElementActionButtons({ selected = false, data: { hovered: isHovered = f
 				initial: false,
 				whileTap: { scale: 1 },
 				whileHover: { scale: 1.3 },
-				tabIndex: -1,
+				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, {})

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

@@ -47,10 +47,12 @@ type SlotProps = {
  * </ElementData.Root>
  * ```
  */
-export declare function ElementData({ data }: ElementDataProps): import("react/jsx-runtime").JSX.Element;
+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-runtime").JSX.Element;
+    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, {

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

@@ -101,9 +101,10 @@ var Description = forwardRef(({ data: { description }, className, ...props }, re
 * </ElementData.Root>
 * ```
 */
-function ElementData({ data }) {
+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 }),

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

@@ -4,7 +4,8 @@ type ElementDetailsButtonProps = {
     selected?: boolean;
     data: BaseNodeData;
     icon?: ReactNode;
+    ariaLabel?: string;
     onClick: (e: ReactMouseEvent) => void;
 };
-export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, onClick, }: ElementDetailsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, ariaLabel, onClick, }: ElementDetailsButtonProps): import("react").JSX.Element;
 export {};

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

@@ -47,7 +47,7 @@ var container = css({
 	_smallZoom: { display: "none" },
 	_print: { display: "none" }
 });
-function ElementDetailsButton({ selected = false, data: { hovered: isHovered = false }, icon, onClick }) {
+function ElementDetailsButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Open details", onClick }) {
 	let variant;
 	switch (true) {
 		case isHovered:
@@ -58,6 +58,7 @@ function ElementDetailsButton({ selected = false, data: { hovered: isHovered = f
 			break;
 		default: variant = "normal";
 	}
+	const isActionVisible = isHovered || selected;
 	return /* @__PURE__ */ jsx(Box$1, {
 		className: cx(container, "details-button"),
 		children: /* @__PURE__ */ jsx(ActionIcon, {
@@ -70,7 +71,9 @@ function ElementDetailsButton({ selected = false, data: { hovered: isHovered = f
 			whileTap: "whileTap",
 			onClick,
 			onDoubleClick: stopPropagation,
-			tabIndex: -1,
+			tabIndex: isActionVisible ? 0 : -1,
+			inert: isActionVisible ? void 0 : true,
+			"aria-label": ariaLabel,
 			children: icon ?? /* @__PURE__ */ jsx(IconId, {
 				stroke: 1.8,
 				style: { width: "75%" }

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

@@ -2,8 +2,8 @@ import "../../_virtual/_rolldown/runtime.js";
 import { cx } from "@likec4/styles/css";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import * as m from "motion/react-m";
 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 = {

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

@@ -14,5 +14,5 @@ type ElementShapeProps = {
      */
     showSelectionOutline?: boolean | undefined;
 };
-export declare function ElementShape({ data, width, height, showSelectionOutline }: ElementShapeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementShape({ data, width, height, showSelectionOutline }: ElementShapeProps): import("react").JSX.Element;
 export {};

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

@@ -324,6 +324,7 @@ function ElementShape({ data, width, height, showSelectionOutline = true }) {
 	const borderStyle = data.style?.border ?? "none";
 	const withBorder = borderStyle !== "none";
 	if (data.shape === "rectangle") return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
 		style: { borderStyle },
 		className: elementShapeRecipe({
 			shapetype: "html",
@@ -337,6 +338,7 @@ function ElementShape({ data, width, height, showSelectionOutline = true }) {
 		withOutline: showSelectionOutline
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [isMultiple && /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": true,
 		className,
 		"data-likec4-shape-multiple": "true",
 		viewBox: `0 0 ${w} ${h}`,
@@ -347,6 +349,7 @@ function ElementShape({ data, width, height, showSelectionOutline = true }) {
 			h
 		})
 	}), /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": true,
 		className,
 		viewBox: `0 0 ${w} ${h}`,
 		children: [/* @__PURE__ */ jsx(ShapeSvgOutline, {

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

@@ -17,5 +17,5 @@ export type ElementTagsProps = BaseNodePropsWithData<Data> & {
     onTagMouseEnter?: (tag: `#${string}`) => void;
     onTagMouseLeave?: (tag: `#${string}`) => void;
 };
-export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width, hovered }, onTagClick, onTagMouseEnter, onTagMouseLeave }: ElementTagsProps) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width, hovered }, onTagClick, onTagMouseEnter, onTagMouseLeave }: ElementTagsProps) => import("react").JSX.Element | null>;
 export {};

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

@@ -1,14 +1,12 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useCurrentZoomAtLeast } from "../../hooks/useXYFlow.js";
 import { stopPropagation } from "../../utils/xyflow.js";
-import { useTagSpecification } from "../../context/TagStylesContext.js";
 import { css, cx } from "@likec4/styles/css";
 import { forwardRef, memo, useCallback, useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { NodeToolbar, Position, useStore } from "@xyflow/react";
 import { deepEqual } from "fast-equals";
 import { hasAtLeast } from "remeda";
-import { isTagColorSpecified } from "@likec4/core";
 import { useDebouncedState, useHover } from "@mantine/hooks";
 import { Box, HStack } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
@@ -18,7 +16,7 @@ var ElementTag = forwardRef(({ tag, cursor, className, style, ...props }, ref) =
 	return /* @__PURE__ */ jsxs(Box, {
 		ref,
 		"data-likec4-tag": tag,
-		className: cx(likec4tag({ autoTextColor: isTagColorSpecified(useTagSpecification(tag)) }), className),
+		className: cx(likec4tag(), className),
 		...props,
 		style: {
 			cursor,

package/dist/components/ErrorFallback.d.ts

@@ -1,3 +1,3 @@
 import { ErrorBoundaryProps, FallbackProps } from 'react-error-boundary';
-export declare function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): import("react/jsx-runtime").JSX.Element;
-export declare function ErrorBoundary(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): import("react").JSX.Element;
+export declare function ErrorBoundary(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>): import("react").JSX.Element;

package/dist/components/ErrorFallback.js

@@ -1,7 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.js";
 import { css } from "@likec4/styles/css";
 import { IconX } from "@tabler/icons-react";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, ScrollAreaAutosize, Text, ThemeIcon } from "@mantine/core";
 import { HStack, VStack } from "@likec4/styles/jsx";
@@ -10,10 +10,8 @@ import { ErrorBoundary } from "react-error-boundary";
 function ErrorFallback({ error, resetErrorBoundary }) {
 	const errorString = error instanceof Error ? error.message : "Unknown error";
 	const dialogRef = useRef(null);
-	useEffect(() => {
-		dialogRef.current?.showModal();
-	}, []);
 	return /* @__PURE__ */ jsx("dialog", {
+		open: true,
 		ref: dialogRef,
 		className: css({
 			margin: "0",
@@ -111,4 +109,4 @@ function ErrorBoundary$1(props) {
 }
 __name(ErrorBoundary$1, "ErrorBoundary");
 //#endregion
-export { ErrorBoundary$1 as ErrorBoundary };
+export { ErrorBoundary$1 as ErrorBoundary, ErrorFallback };

package/dist/components/Link.js

@@ -3,7 +3,7 @@ import { GithubIcon } from "./GithubIcon.js";
 import { css, cx } from "@likec4/styles/css";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 import { forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ActionIcon, Badge, CopyButton } from "@mantine/core";
 import { styled } from "@likec4/styles/jsx";
 //#region src/components/Link.tsx
@@ -17,7 +17,7 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 		radius: "sm",
 		size: "sm",
 		tt: "none",
-		leftSection: value.title ? /* @__PURE__ */ jsx(Fragment$1, { children: value.title }) : null,
+		leftSection: null,
 		rightSection: /* @__PURE__ */ jsx(CopyButton, {
 			value: url,
 			timeout: 1500,
@@ -52,8 +52,8 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 				backgroundColor: {
 					base: "transparent",
 					_hover: {
-						base: "mantine.colors.gray[1]",
-						_dark: "mantine.colors.dark[5]"
+						base: "mantine.gray[1]",
+						_dark: "mantine.dark[5]"
 					}
 				}
 			}),
@@ -85,14 +85,14 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 					_hover: "underline"
 				}
 			},
-			children: [isGithub && /* @__PURE__ */ jsx(GithubIcon, {
+			children: [!value.title && isGithub && /* @__PURE__ */ jsx(GithubIcon, {
 				height: "12",
 				width: "12",
 				style: {
 					verticalAlign: "middle",
 					marginRight: "4px"
 				}
-			}), isGithub ? url.replace(GITHUB_PREFIX, "") : url]
+			}), value.title ?? (isGithub ? url.replace(GITHUB_PREFIX, "") : url)]
 		})
 	});
 });

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 '@likec4/styles/jsx';
-import { NavigationPanelRecipe } from '@likec4/styles/recipes';
+import { StyleContextProvider, StyleContextConsumer } from '../../styled-system/jsx';
+import { NavigationPanelRecipe } from '../../styled-system/recipes';
 export declare const NavigationPanel: {
     Root: StyleContextProvider<ForwardRefComponent<"div", HTMLMotionProps<"div">>, NavigationPanelRecipe>;
     Body: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;

package/dist/components/NavigationPanel.js

@@ -21,7 +21,7 @@ var LogoButton = forwardRef(({ className, ...props }, ref) => {
 var NavigationPanel = {
 	Root: withProvider(m$1.div, "root", { shouldForwardProp }),
 	Body: withContext(m$1.div, "body", { shouldForwardProp }),
-	Logo: withContext(LogoButton, "logo"),
+	Logo: withContext(LogoButton, "logo", { shouldForwardProp }),
 	Label: withContext(m$1.div, "label", { shouldForwardProp }),
 	Dropdown: withContext(m$1.div, "dropdown", { shouldForwardProp })
 };

package/dist/components/PortalToContainer.d.ts

@@ -3,4 +3,4 @@ import { PropsWithChildren } from 'react';
  * 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-runtime").JSX.Element;
+export declare function PortalToContainer({ children }: PropsWithChildren): import("react").JSX.Element;

package/dist/components/RootContainer.d.ts

@@ -3,4 +3,4 @@ export declare function RootContainer({ id, className, reduceGraphics, children,
     id: string;
     className?: string | undefined;
     reduceGraphics?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/components/SearchControl.css.js

@@ -8,15 +8,15 @@ var root = css({
 	border: "1px solid",
 	borderColor: {
 		base: "default.border",
-		_light: "mantine.colors.gray[4]",
-		_dark: "mantine.colors.dark[4]",
+		_light: "mantine.gray[4]",
+		_dark: "mantine.dark[4]",
 		_hover: "default.border"
 	},
 	cursor: "pointer",
 	background: {
 		base: "default",
 		_light: "white",
-		_dark: "mantine.colors.dark[6]",
+		_dark: "mantine.dark[6]",
 		_hover: "default.hover"
 	},
 	width: "100%",
@@ -49,19 +49,19 @@ var shortcut = css({
 	border: "1px solid",
 	transition: "fast",
 	_light: {
-		color: "mantine.colors.gray[7]",
-		borderColor: "mantine.colors.gray[2]"
+		color: "mantine.gray[7]",
+		borderColor: "mantine.gray[2]"
 	},
 	_dark: {
-		color: "mantine.colors.dark[0]",
-		borderColor: "mantine.colors.dark[7]"
+		color: "mantine.dark[0]",
+		borderColor: "mantine.dark[7]"
 	},
 	backgroundColor: {
-		_light: "mantine.colors.gray[2]/70",
-		_dark: "mantine.colors.dark[8]/70",
+		_light: "mantine.gray[2]/70",
+		_dark: "mantine.dark[8]/70",
 		_groupHover: {
-			_light: "mantine.colors.gray[2]",
-			_dark: "mantine.colors.dark[8]"
+			_light: "mantine.gray[2]",
+			_dark: "mantine.dark[8]"
 		}
 	}
 });

package/dist/components/SearchControl.d.ts

@@ -1,5 +1,5 @@
 import { ElementProps, UnstyledButtonProps } from '@mantine/core';
-interface SearchControlProps extends UnstyledButtonProps, ElementProps<'button'> {
+interface SearchControlProps extends Omit<UnstyledButtonProps, 'className'>, ElementProps<'button'> {
 }
-export declare function SearchControl({ className, ...others }: SearchControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchControl({ className, ...others }: SearchControlProps): import("react").JSX.Element;
 export {};

package/dist/components/ViewNotFound.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-export declare function ErrorMessage({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorMessage({ children }: PropsWithChildren): import("react").JSX.Element;
 export declare function ViewNotFound({ viewId }: {
     viewId: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/context/CurrentViewModelProvider.d.ts

@@ -1,2 +1,2 @@
 import { PropsWithChildren } from 'react';
-export declare function CurrentViewModelProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function CurrentViewModelProvider({ children }: PropsWithChildren): import("react").JSX.Element;

package/dist/context/DefaultMantineProvider.d.ts

@@ -1,2 +1,2 @@
 import { MantineProviderProps } from '@mantine/core';
-export declare function DefaultMantineProvider({ children, theme, ...props }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultMantineProvider({ children, theme, ...props }: MantineProviderProps): import("react").JSX.Element;

package/dist/context/DiagramEventHandlers.d.ts

@@ -9,7 +9,7 @@ export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandl
 };
 export declare function DiagramEventHandlers({ handlers, children, }: PropsWithChildren<{
     handlers: Required<LikeC4DiagramEventHandlers>;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;
 export declare function useDiagramEventHandlers(): DiagramEventHandlersContext;
 export declare function useDiagramEventHandlersRef(): DiagramEventHandlersRef;
 export {};

package/dist/context/EnsureMantine.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from 'react';
 type EnsureMantineProps = PropsWithChildren<{}>;
-export declare function EnsureMantine({ children }: EnsureMantineProps): import("react/jsx-runtime").JSX.Element;
+export declare function EnsureMantine({ children }: EnsureMantineProps): import("react").JSX.Element;
 export {};

package/dist/context/FramerMotionConfig.d.ts

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from 'react';
-export declare const FramerMotionConfig: ({ reducedMotion, children, }: PropsWithChildren<{
+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-runtime").JSX.Element;
+    reducedMotion?: 'always' | 'never' | 'user' | undefined;
+}>): import("react").JSX.Element;

package/dist/context/FramerMotionConfig.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useMantineStyleNonce } from "@mantine/core";
 import { LazyMotion, MotionConfig, domMax } from "motion/react";
 //#region src/context/FramerMotionConfig.tsx
-var FramerMotionConfig = ({ reducedMotion = "user", children }) => {
+function FramerMotionConfig({ reducedMotion = "user", children }) {
 	const nonce = useMantineStyleNonce()?.();
 	return /* @__PURE__ */ jsx(LazyMotion, {
 		features: domMax,
@@ -14,6 +14,6 @@ var FramerMotionConfig = ({ reducedMotion = "user", children }) => {
 			children
 		})
 	});
-};
+}
 //#endregion
 export { FramerMotionConfig };

package/dist/context/IconRenderer.d.ts

@@ -17,7 +17,7 @@ import { ElementIconRenderer } from '../LikeC4Diagram.props';
  */
 export declare function IconRendererProvider({ value, children, }: PropsWithChildren<{
     value: ElementIconRenderer | null;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;
 export declare function IconRenderer({ element, className, style, }: {
     element?: {
         id: string;
@@ -36,4 +36,4 @@ export declare function IconOrShapeRenderer({ element, className, style, }: {
     };
     className?: string;
     style?: CSSProperties | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/context/IconRenderer.js

@@ -1,7 +1,7 @@
 import "../_virtual/_rolldown/runtime.js";
 import { cx } from "@likec4/styles/css";
 import { IconBrowser, IconCylinder, IconDeviceMobile, IconFileText, IconRectangularPrism, IconReorder, IconUser } from "@tabler/icons-react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/context/IconRenderer.tsx
 var IconRendererContext = createContext(null);
@@ -47,17 +47,28 @@ function IconRenderer({ element, className, style }) {
 	const RenderIcon = useContext(IconRendererContext);
 	if (!element || !element.icon || element.icon === "none") return null;
 	let icon;
-	if (element.icon.startsWith("http://") || element.icon.startsWith("https://") || element.icon.startsWith("data:image")) {
-		const svgContent = element.icon.startsWith("data:image/svg+xml") ? decodeSvgDataUrl(element.icon) : null;
-		if (svgContent) icon = /* @__PURE__ */ jsx("span", {
-			style: { display: "contents" },
-			dangerouslySetInnerHTML: { __html: svgContent }
-		});
-		else icon = /* @__PURE__ */ jsx("img", {
-			src: element.icon,
-			alt: element.title
-		});
-	} else if (RenderIcon) icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
+	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 = null;
+			break;
+	}
 	if (!icon) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: cx(className, "likec4-element-icon"),
@@ -93,5 +104,14 @@ function IconOrShapeRenderer({ element, className, style }) {
 		style
 	});
 }
+function SvgDataUrlIcon({ dataUrl, ...props }) {
+	const svgContent = useMemo(() => decodeSvgDataUrl(dataUrl), [dataUrl]);
+	if (!svgContent) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		style: { display: "contents" },
+		dangerouslySetInnerHTML: { __html: svgContent }
+	});
+}
 //#endregion
 export { IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/LikeC4ModelContext.d.ts

@@ -6,7 +6,7 @@ type UnknownLayouted = t.aux.UnknownLayouted;
 export declare const LikeC4ModelContextProvider: Provider<LikeC4Model<any> | null>;
 export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted, LayoutedView<UnknownLayouted>>;
 export declare const CurrentViewModelContext: Provider<CurrentViewModel | null>;
-export declare function EnsureCurrentViewModel({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
+export declare function EnsureCurrentViewModel({ children }: PropsWithChildren): import("react").JSX.Element | null;
 /**
  * @returns The LikeC4Model from context, or null if no LikeC4ModelProvider is found.
  */

package/dist/context/TagStylesContext.d.ts

@@ -1,7 +1,8 @@
 import { TagSpecification } from '@likec4/core';
 import { PropsWithChildren } from 'react';
-export declare function TagStylesProvider({ children, rootSelector }: PropsWithChildren<{
-    rootSelector: string;
-}>): import("react/jsx-runtime").JSX.Element;
+export declare function generateColorVars(spec: TagSpecification): string;
+export declare function TagStylesProvider({ children, id }: PropsWithChildren<{
+    id: string;
+}>): import("react").JSX.Element;
 export declare function useTagSpecifications(): Record<string, TagSpecification>;
 export declare function useTagSpecification(tag: string): TagSpecification;

package/dist/context/TagStylesContext.js

@@ -1,36 +1,37 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useLikeC4Specification } from "../hooks/useLikeC4Model.js";
-import { createContext, memo, useContext } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, memo } from "react";
+import { Fragment as Fragment$1, 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 } from "@likec4/core/styles";
+import { DefaultTagColors, getContrastedColorsAPCA, isValidColor } from "@likec4/core/styles";
 //#region src/context/TagStylesContext.tsx
-var TagStylesContext = createContext({});
 var radixColors = DefaultTagColors;
-var generateColorVars = (spec) => {
+function generateColorVars(spec) {
 	const color = spec.color;
-	if (isTagColorSpecified(spec)) return `
+	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)) return "";
-	let textcolor = "12";
+	let textcolor = `var(--colors-${color}-12)`;
 	if ([
 		"mint",
 		"grass",
 		"lime",
 		"yellow",
 		"amber"
-	].includes(color)) textcolor = "dark-2";
+	].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: var(--colors-${color}-${textcolor});
+  --colors-likec4-tag-text: ${textcolor};
   `;
-};
+}
+var TagStylesContext = createContext({});
 function generateStylesheet(tags, rootSelector) {
 	if (!tags || isEmpty(tags)) return "";
 	return pipe(entries(tags), flatMap(([tag, spec]) => [
@@ -39,17 +40,17 @@ function generateStylesheet(tags, rootSelector) {
 		"}"
 	]), join("\n"));
 }
-function TagStylesProvider({ children, rootSelector }) {
+function TagStylesProvider({ children, id }) {
 	const tags = useLikeC4Specification().tags;
 	const nonce = useMantineStyleNonce()?.();
-	const stylesheet = generateStylesheet(tags, rootSelector);
-	return /* @__PURE__ */ jsxs(TagStylesContext.Provider, {
+	const stylesheet = generateStylesheet(tags, `#${id}`);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, {
+		nonce,
+		stylesheet
+	}), /* @__PURE__ */ jsx(TagStylesContext.Provider, {
 		value: tags,
-		children: [stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, {
-			nonce,
-			stylesheet
-		}), children]
-	});
+		children
+	})] });
 }
 var TagStylesheet = memo(({ stylesheet, nonce }) => {
 	return /* @__PURE__ */ jsx("style", {
@@ -59,8 +60,5 @@ var TagStylesheet = memo(({ stylesheet, nonce }) => {
 		nonce
 	});
 });
-function useTagSpecification(tag) {
-	return useContext(TagStylesContext)[tag] ?? { color: "tomato" };
-}
 //#endregion
-export { TagStylesProvider, useTagSpecification };
+export { TagStylesProvider, generateColorVars };

package/dist/custom/index.d.ts

@@ -13,3 +13,4 @@ export type { OverlayProps } from '../overlays/overlay/Overlay';
 export { PortalToContainer } from '../components/PortalToContainer';
 export { FramerMotionConfig } from '../context/FramerMotionConfig';
 export { NavigationPanel } from '../components/NavigationPanel';
+export { ErrorBoundary, ErrorFallback } from '../components/ErrorFallback';

package/dist/custom/index.js

@@ -9,6 +9,7 @@ import { useDiagramContext, useOnDiagramEvent } from "../hooks/useDiagram.js";
 import { useCurrentView, useCurrentViewId } from "../hooks/useCurrentView.js";
 import { useOptionalCurrentViewModel, useOptionalLikeC4Model } from "../context/LikeC4ModelContext.js";
 import { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from "../hooks/useLikeC4Model.js";
+import { ErrorBoundary, ErrorFallback } from "../components/ErrorFallback.js";
 import { useCurrentViewModel } from "../hooks/useCurrentViewModel.js";
 import { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from "../hooks/useLikeC4Project.js";
 import { useLikeC4Styles } from "../hooks/useLikeC4Styles.js";
@@ -35,6 +36,6 @@ import { CompoundDeploymentToolbar, CompoundElementToolbar } from "../likec4diag
 import { DeploymentElementToolbar, ElementToolbar } from "../likec4diagram/custom/nodes/toolbar/ElementToolbar.js";
 import { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from "../likec4diagram/custom/nodes/nodes.js";
 import { SequenceActorNode, SequenceParallelArea } from "../likec4diagram/custom/nodes/SequenceActorNode.js";
-import { NavigationPanel } from "../components/NavigationPanel.js";
 import { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from "./customNodes.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, 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 { 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 };