@likec4/diagram 1.55.1 → 1.57.0

package/dist/LikeC4Diagram.js

@@ -1,199 +1,155 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCustomCompareMemo } from '@react-hookz/web';
-import { ReactFlowProvider } from '@xyflow/react';
-import { deepEqual } from 'fast-equals';
-import { useRef, Profiler } from 'react';
-import { isEmptyish, isPlainObject, mapValues } from 'remeda';
-import { RootContainer } from './components/RootContainer.js';
-import { CurrentViewModelProvider } from './context/CurrentViewModelProvider.js';
-import { TagStylesProvider } from './context/TagStylesContext.js';
-import { useId } from './hooks/useId.js';
-import { useOptionalLikeC4Model } from './context/LikeC4ModelContext.js';
-import { LikeC4DiagramUI } from './likec4diagram/DiagramUI.js';
-import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
-import { DiagramActorProvider } from './likec4diagram/state/DiagramActorProvider.js';
-import { LikeC4Styles } from './LikeC4Styles.js';
-import { pickViewBounds } from './utils/view-bounds.js';
-import { useOptionalLikeC4Editor } from './editor/LikeC4EditorProvider.js';
-import { MinZoom, MaxZoom, FitViewPaddings } from './base/const.js';
-import { EnsureMantine } from './context/EnsureMantine.js';
-import { FramerMotionConfig } from './context/FramerMotionConfig.js';
-import { IconRendererProvider } from './context/IconRenderer.js';
-import { DiagramFeatures } from './context/DiagramFeatures.js';
-import { DiagramEventHandlers } from './context/DiagramEventHandlers.js';
-
-const noop = () => {
-};
-function LikeC4Diagram({
-  onCanvasClick,
-  onCanvasContextMenu,
-  onCanvasDblClick,
-  onEdgeClick,
-  onEdgeContextMenu,
-  onNavigateTo,
-  onNodeClick,
-  onNodeContextMenu,
-  onOpenSource,
-  onLogoClick,
-  onLayoutTypeChange,
-  onInitialized,
-  view,
-  className,
-  controls = true,
-  fitView = true,
-  fitViewPadding: _fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default,
-  pannable = true,
-  zoomable = true,
-  background = "dots",
-  enableElementTags = false,
-  enableFocusMode = false,
-  enableElementDetails = false,
-  enableRelationshipDetails = false,
-  enableRelationshipBrowser = false,
-  enableCompareWithLatest = !!onLayoutTypeChange,
-  nodesSelectable,
-  enableNotations = false,
-  showNavigationButtons = !!onNavigateTo,
-  enableDynamicViewWalkthrough = false,
-  dynamicViewVariant,
-  enableSearch = false,
-  enableNotes = true,
-  initialWidth,
-  initialHeight,
-  reduceGraphics = "auto",
-  renderIcon,
-  where,
-  reactFlowProps,
-  renderNodes,
-  children
-}) {
-  const id = useId();
-  const initialRef = useRef(null);
-  const optionalLikeC4Model = useOptionalLikeC4Model();
-  enableCompareWithLatest = enableCompareWithLatest && !!onLayoutTypeChange && !!optionalLikeC4Model && !isEmptyish(optionalLikeC4Model.$data.manualLayouts);
-  const hasLikeC4Model = !!optionalLikeC4Model;
-  const hasEditor = !!useOptionalLikeC4Editor();
-  const readonly = !hasEditor;
-  nodesSelectable ??= hasEditor || enableFocusMode || !!onNavigateTo || !!onNodeClick;
-  const bounds = pickViewBounds(view, dynamicViewVariant);
-  const fitViewPadding = useNormalizedViewPadding(_fitViewPadding);
-  if (initialRef.current == null) {
-    initialRef.current = {
-      defaultEdges: [],
-      defaultNodes: [],
-      initialWidth: initialWidth ?? bounds.width,
-      initialHeight: initialHeight ?? bounds.height,
-      initialFitViewOptions: {
-        maxZoom: MaxZoom,
-        minZoom: MinZoom,
-        padding: fitViewPadding
-      },
-      initialMaxZoom: MaxZoom,
-      initialMinZoom: MinZoom
-    };
-  }
-  const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && view.bounds.width * view.bounds.height > 16e6 && view.nodes.some((n) => n.children?.length > 0) : reduceGraphics;
-  return /* @__PURE__ */ jsx(Profiler, { id: "LikeC4Diagram", onRender: noop, children: /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(FramerMotionConfig, { reducedMotion: isReducedGraphicsMode ? "always" : void 0, children: /* @__PURE__ */ jsx(IconRendererProvider, { value: renderIcon ?? null, children: /* @__PURE__ */ jsx(
-    DiagramFeatures,
-    {
-      features: {
-        enableFitView: fitView,
-        enableEditor: hasEditor,
-        enableReadOnly: readonly,
-        enableFocusMode,
-        enableNavigateTo: !!onNavigateTo,
-        enableElementDetails: enableElementDetails && hasLikeC4Model,
-        enableRelationshipDetails: enableRelationshipDetails && hasLikeC4Model,
-        enableRelationshipBrowser: enableRelationshipBrowser && hasLikeC4Model,
-        enableSearch: enableSearch && hasLikeC4Model,
-        enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
-        enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
-        enableNotations,
-        enableVscode: !!onOpenSource,
-        enableControls: controls,
-        enableElementTags,
-        enableCompareWithLatest,
-        enableNotes
-      },
-      children: /* @__PURE__ */ jsxs(
-        DiagramEventHandlers,
-        {
-          handlers: {
-            onCanvasClick,
-            onCanvasContextMenu,
-            onCanvasDblClick,
-            onEdgeClick,
-            onEdgeContextMenu,
-            onNavigateTo,
-            onNodeClick,
-            onNodeContextMenu,
-            onOpenSource,
-            onLogoClick,
-            onInitialized,
-            onLayoutTypeChange
-          },
-          children: [
-            /* @__PURE__ */ jsx(LikeC4Styles, { id }),
-            /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainer, { id, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
-              ReactFlowProvider,
-              {
-                fitView,
-                ...initialRef.current,
-                children: /* @__PURE__ */ jsx(
-                  DiagramActorProvider,
-                  {
-                    id,
-                    view,
-                    zoomable,
-                    pannable,
-                    fitViewPadding,
-                    nodesDraggable: hasEditor,
-                    nodesSelectable,
-                    where: where ?? null,
-                    dynamicViewVariant,
-                    children: /* @__PURE__ */ jsxs(CurrentViewModelProvider, { children: [
-                      /* @__PURE__ */ jsx(
-                        LikeC4DiagramXYFlow,
-                        {
-                          background,
-                          reactFlowProps,
-                          renderNodes,
-                          children
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(LikeC4DiagramUI, {})
-                    ] })
-                  }
-                )
-              }
-            ) }) })
-          ]
-        }
-      )
-    }
-  ) }) }) }) });
+import "./_virtual/_rolldown/runtime.js";
+import { IconRendererProvider } from "./context/IconRenderer.js";
+import { FitViewPaddings, MinZoom } from "./base/const.js";
+import { RootContainer } from "./components/RootContainer.js";
+import { DiagramEventHandlers } from "./context/DiagramEventHandlers.js";
+import { DiagramFeatures } from "./context/DiagramFeatures.js";
+import { EnsureMantine } from "./context/EnsureMantine.js";
+import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
+import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.js";
+import { CurrentViewModelProvider } from "./context/CurrentViewModelProvider.js";
+import { TagStylesProvider } from "./context/TagStylesContext.js";
+import { useOptionalLikeC4Editor } from "./editor/LikeC4EditorProvider.js";
+import { useId } from "./hooks/useId.js";
+import { pickViewBounds } from "./utils/view-bounds.js";
+import { LikeC4DiagramUI } from "./likec4diagram/DiagramUI.js";
+import { LikeC4DiagramXYFlow } from "./likec4diagram/DiagramXYFlow.js";
+import { DiagramActorProvider } from "./likec4diagram/state/DiagramActorProvider.js";
+import { LikeC4Styles } from "./LikeC4Styles.js";
+import { Profiler, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCustomCompareMemo } from "@react-hookz/web";
+import { ReactFlowProvider } from "@xyflow/react";
+import { deepEqual } from "fast-equals";
+import { isEmptyish, isPlainObject, mapValues } from "remeda";
+//#region src/LikeC4Diagram.tsx
+var noop = () => {};
+/**
+* Low-level component to display LikeC4 view
+* Expects CSS to be injected
+*
+* Use {@link ReactLikeC4} or {@link LikeC4View} for ready-to-use component
+*/
+function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onLogoClick, onLayoutTypeChange, onInitialized, view, className, controls = true, fitView = true, fitViewPadding: _fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default, pannable = true, zoomable = true, background = "dots", enableElementTags = false, enableFocusMode = false, enableElementDetails = false, enableRelationshipDetails = false, enableRelationshipBrowser = false, enableCompareWithLatest = !!onLayoutTypeChange, nodesSelectable, enableNotations = false, showNavigationButtons = !!onNavigateTo, enableDynamicViewWalkthrough = false, dynamicViewVariant, enableSearch = false, enableNotes = true, initialWidth, initialHeight, reduceGraphics = "auto", renderIcon, where, reactFlowProps, renderNodes, children }) {
+	const id = useId();
+	const initialRef = useRef(null);
+	const optionalLikeC4Model = useOptionalLikeC4Model();
+	enableCompareWithLatest = enableCompareWithLatest && !!onLayoutTypeChange && !!optionalLikeC4Model && !isEmptyish(optionalLikeC4Model.$data.manualLayouts);
+	const hasLikeC4Model = !!optionalLikeC4Model;
+	const editor = useOptionalLikeC4Editor();
+	const hasEditor = !!editor;
+	const readonly = !hasEditor;
+	nodesSelectable ??= hasEditor || enableFocusMode || !!onNavigateTo || !!onNodeClick;
+	const bounds = pickViewBounds(view, dynamicViewVariant);
+	const fitViewPadding = useNormalizedViewPadding(_fitViewPadding);
+	if (initialRef.current == null) initialRef.current = {
+		defaultEdges: [],
+		defaultNodes: [],
+		initialWidth: initialWidth ?? bounds.width,
+		initialHeight: initialHeight ?? bounds.height,
+		initialFitViewOptions: {
+			maxZoom: 3,
+			minZoom: MinZoom,
+			padding: fitViewPadding
+		},
+		initialMaxZoom: 3,
+		initialMinZoom: MinZoom
+	};
+	const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && view.bounds.width * view.bounds.height > 16e6 && view.nodes.some((n) => n.children?.length > 0) : reduceGraphics;
+	return /* @__PURE__ */ jsx(Profiler, {
+		id: "LikeC4Diagram",
+		onRender: noop,
+		children: /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(FramerMotionConfig, {
+			reducedMotion: isReducedGraphicsMode ? "always" : void 0,
+			children: /* @__PURE__ */ jsx(IconRendererProvider, {
+				value: renderIcon ?? null,
+				children: /* @__PURE__ */ jsx(DiagramFeatures, {
+					features: {
+						enableFitView: fitView,
+						enableEditor: hasEditor,
+						enableAISemanticLayout: hasEditor && !!editor.applySemanticLayout,
+						enableReadOnly: readonly,
+						enableFocusMode,
+						enableNavigateTo: !!onNavigateTo,
+						enableElementDetails: enableElementDetails && hasLikeC4Model,
+						enableRelationshipDetails: enableRelationshipDetails && hasLikeC4Model,
+						enableRelationshipBrowser: enableRelationshipBrowser && hasLikeC4Model,
+						enableSearch: enableSearch && hasLikeC4Model,
+						enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
+						enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
+						enableNotations,
+						enableVscode: !!onOpenSource,
+						enableControls: controls,
+						enableElementTags,
+						enableCompareWithLatest,
+						enableNotes
+					},
+					children: /* @__PURE__ */ jsxs(DiagramEventHandlers, {
+						handlers: {
+							onCanvasClick,
+							onCanvasContextMenu,
+							onCanvasDblClick,
+							onEdgeClick,
+							onEdgeContextMenu,
+							onNavigateTo,
+							onNodeClick,
+							onNodeContextMenu,
+							onOpenSource,
+							onLogoClick,
+							onInitialized,
+							onLayoutTypeChange
+						},
+						children: [/* @__PURE__ */ jsx(LikeC4Styles, { id }), /* @__PURE__ */ jsx(TagStylesProvider, {
+							rootSelector: `#${id}`,
+							children: /* @__PURE__ */ jsx(RootContainer, {
+								id,
+								className,
+								reduceGraphics: isReducedGraphicsMode,
+								children: /* @__PURE__ */ jsx(ReactFlowProvider, {
+									fitView,
+									...initialRef.current,
+									children: /* @__PURE__ */ jsx(DiagramActorProvider, {
+										id,
+										view,
+										zoomable,
+										pannable,
+										fitViewPadding,
+										nodesDraggable: hasEditor,
+										nodesSelectable,
+										where: where ?? null,
+										dynamicViewVariant,
+										children: /* @__PURE__ */ jsxs(CurrentViewModelProvider, { children: [/* @__PURE__ */ jsx(LikeC4DiagramXYFlow, {
+											background,
+											reactFlowProps,
+											renderNodes,
+											children
+										}), /* @__PURE__ */ jsx(LikeC4DiagramUI, {})] })
+									})
+								})
+							})
+						})]
+					})
+				})
+			})
+		}) })
+	});
 }
-const toLiteralPaddingWithUnit = (value) => {
-  if (typeof value === "number") {
-    return `${value}px`;
-  }
-  return value;
+var toLiteralPaddingWithUnit = (value) => {
+	if (typeof value === "number") return `${value}px`;
+	return value;
 };
+/**
+* Converts number values to px and keep referential integrity
+*/
 function useNormalizedViewPadding(raw) {
-  return useCustomCompareMemo(
-    () => {
-      if (isPlainObject(raw)) {
-        return mapValues(raw, toLiteralPaddingWithUnit);
-      }
-      const v = toLiteralPaddingWithUnit(raw);
-      return {
-        x: v,
-        y: v
-      };
-    },
-    [raw],
-    deepEqual
-  );
+	return useCustomCompareMemo(() => {
+		if (isPlainObject(raw)) return mapValues(raw, toLiteralPaddingWithUnit);
+		const v = toLiteralPaddingWithUnit(raw);
+		return {
+			x: v,
+			y: v
+		};
+	}, [raw], deepEqual);
 }
-
+//#endregion
 export { LikeC4Diagram };

package/dist/LikeC4ModelProvider.js

@@ -1,11 +1,15 @@
-import { jsx } from 'react/jsx-runtime';
-import { LikeC4ModelContextProvider } from './context/LikeC4ModelContext.js';
-
-function LikeC4ModelProvider({
-  children,
-  likec4model
-}) {
-  return /* @__PURE__ */ jsx(LikeC4ModelContextProvider, { value: likec4model, children });
+import "./_virtual/_rolldown/runtime.js";
+import { LikeC4ModelContextProvider } from "./context/LikeC4ModelContext.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/LikeC4ModelProvider.tsx
+/**
+* Ensures LikeC4Model context
+*/
+function LikeC4ModelProvider({ children, likec4model }) {
+	return /* @__PURE__ */ jsx(LikeC4ModelContextProvider, {
+		value: likec4model,
+		children
+	});
 }
-
+//#endregion
 export { LikeC4ModelProvider };

package/dist/LikeC4ProjectsOverview.js

@@ -1,32 +1,26 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { RootContainer } from './components/RootContainer.js';
-import { useId } from './hooks/useId.js';
-import { useChangeLikeC4Project } from './hooks/useLikeC4Project.js';
-import { LikeC4Styles } from './LikeC4Styles.js';
-import { EnsureMantine } from './context/EnsureMantine.js';
-import { FramerMotionConfig } from './context/FramerMotionConfig.js';
-import { ProjectsOverview } from './projects-overview/ProjectsOverview.js';
-
-function LikeC4ProjectsOverview({
-  view,
-  className,
-  onNavigateToProject,
-  ...props
-}) {
-  const onChangeLikeC4Project = useChangeLikeC4Project();
-  const id = useId();
-  onNavigateToProject ??= onChangeLikeC4Project;
-  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [
-    /* @__PURE__ */ jsx(LikeC4Styles, { id }),
-    /* @__PURE__ */ jsx(RootContainer, { id, className, children: /* @__PURE__ */ jsx(
-      ProjectsOverview,
-      {
-        view,
-        onNavigateToProject,
-        ...props
-      }
-    ) })
-  ] }) });
+import "./_virtual/_rolldown/runtime.js";
+import { RootContainer } from "./components/RootContainer.js";
+import { EnsureMantine } from "./context/EnsureMantine.js";
+import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
+import { useId } from "./hooks/useId.js";
+import { useChangeLikeC4Project } from "./hooks/useLikeC4Project.js";
+import { LikeC4Styles } from "./LikeC4Styles.js";
+import { ProjectsOverview } from "./projects-overview/ProjectsOverview.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/LikeC4ProjectsOverview.tsx
+function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props }) {
+	const onChangeLikeC4Project = useChangeLikeC4Project();
+	const id = useId();
+	onNavigateToProject ??= onChangeLikeC4Project;
+	return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [/* @__PURE__ */ jsx(LikeC4Styles, { id }), /* @__PURE__ */ jsx(RootContainer, {
+		id,
+		className,
+		children: /* @__PURE__ */ jsx(ProjectsOverview, {
+			view,
+			onNavigateToProject,
+			...props
+		})
+	})] }) });
 }
-
+//#endregion
 export { LikeC4ProjectsOverview };

package/dist/LikeC4ProjectsProvider.js

@@ -1,28 +1,35 @@
-import { jsx } from 'react/jsx-runtime';
-import { deepEqual } from 'fast-equals';
-import { useEffect, useState } from 'react';
-import { useOptionalProjectsContext, LikeC4ProjectsContextProvider } from './context/LikeC4ProjectsContext.js';
-import { useCallbackRef } from './hooks/useCallbackRef.js';
-
-function LikeC4ProjectsProvider({
-  children,
-  projects,
-  onProjectChange: _onProjectChange
-}) {
-  const outerScope = useOptionalProjectsContext();
-  useEffect(() => {
-    if (outerScope) {
-      console.warn("LikeC4ProjectsProvider should not be nested inside another one");
-    }
-  }, []);
-  const onProjectChange = useCallbackRef(_onProjectChange);
-  const [value, setValue] = useState(() => ({ projects, onProjectChange }));
-  useEffect(() => {
-    setValue((current) => {
-      return deepEqual(current.projects, projects) ? current : { ...current, projects };
-    });
-  }, [projects]);
-  return /* @__PURE__ */ jsx(LikeC4ProjectsContextProvider, { value, children });
+import "./_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "./hooks/useCallbackRef.js";
+import { LikeC4ProjectsContextProvider, useOptionalProjectsContext } from "./context/LikeC4ProjectsContext.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { deepEqual } from "fast-equals";
+//#region src/LikeC4ProjectsProvider.tsx
+/**
+* Ensures LikeC4Projects context
+*/
+function LikeC4ProjectsProvider({ children, projects, onProjectChange: _onProjectChange }) {
+	const outerScope = useOptionalProjectsContext();
+	useEffect(() => {
+		if (outerScope) console.warn("LikeC4ProjectsProvider should not be nested inside another one");
+	}, []);
+	const onProjectChange = useCallbackRef(_onProjectChange);
+	const [value, setValue] = useState(() => ({
+		projects,
+		onProjectChange
+	}));
+	useEffect(() => {
+		setValue((current) => {
+			return deepEqual(current.projects, projects) ? current : {
+				...current,
+				projects
+			};
+		});
+	}, [projects]);
+	return /* @__PURE__ */ jsx(LikeC4ProjectsContextProvider, {
+		value,
+		children
+	});
 }
-
+//#endregion
 export { LikeC4ProjectsProvider };

package/dist/LikeC4Styles.js

@@ -1,27 +1,25 @@
-import { jsx } from 'react/jsx-runtime';
-import { useMantineStyleNonce } from '@mantine/core';
-import { useMemo, memo } from 'react';
-import { pipe, entries, map, join } from 'remeda';
-import { MAX_COMPOUND_DEPTH } from './base/const.js';
-import { useLikeC4Styles } from './hooks/useLikeC4Styles.js';
-
-const scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`;
-const whenDark = scheme("dark");
-const generateCompoundColors = (rootSelector, name, colors, depth) => {
-  const selector = `${rootSelector} :is([data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
-  return `
-${selector} {
+import "./_virtual/_rolldown/runtime.js";
+import { useLikeC4Styles } from "./hooks/useLikeC4Styles.js";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { entries, join, map, pipe } from "remeda";
+import { useMantineStyleNonce } from "@mantine/core";
+//#region src/LikeC4Styles.tsx
+var scheme = (scheme) => `[data-mantine-color-scheme="${scheme}"]`;
+var whenDark = scheme("dark");
+var generateCompoundColors = (rootSelector, name, colors, depth) => {
+	return `
+${`${rootSelector} :is([data-likec4-color="${name}"][data-compound-depth="${depth}"])`} {
   --likec4-palette-fill: ${colors.fill};
   --likec4-palette-stroke: ${colors.stroke};  
 }
   `;
 };
 function toStyle(styles, params) {
-  const { rootSelector, name, colors } = params;
-  const { elements, relationships } = colors;
-  const selector = `${rootSelector} :is([data-likec4-color=${name}])`;
-  return [
-    `
+	const { rootSelector, name, colors } = params;
+	const { elements, relationships } = colors;
+	const selector = `${rootSelector} :is([data-likec4-color=${name}])`;
+	return [`
 ${selector} {
   --likec4-palette-fill: ${elements.fill};
   --likec4-palette-stroke: ${elements.stroke};
@@ -36,49 +34,34 @@ ${whenDark} ${selector} {
   --likec4-palette-relation-stroke-selected: oklch(from ${relationships.line} calc(l + 0.15) c h);
 }
 
-  `,
-    ...styles.colorsForCompounds(elements, MAX_COMPOUND_DEPTH).map(
-      (colors2, depth) => generateCompoundColors(rootSelector, name, colors2, depth + 1)
-    )
-  ].map((s) => s.trim()).join("\n");
+  `, ...styles.colorsForCompounds(elements, 5).map((colors, depth) => generateCompoundColors(rootSelector, name, colors, depth + 1))].map((s) => s.trim()).join("\n");
 }
 function generateBuiltInColorStyles(styles, rootSelector) {
-  return pipe(
-    styles.theme.colors,
-    entries(),
-    map(
-      ([name, colors]) => toStyle(styles, {
-        rootSelector,
-        name,
-        colors
-      })
-    ),
-    join("\n")
-  );
+	return pipe(styles.theme.colors, entries(), map(([name, colors]) => toStyle(styles, {
+		rootSelector,
+		name,
+		colors
+	})), join("\n"));
 }
 function LikeC4Styles({ id }) {
-  const rootSelector = `#${id}`;
-  const nonce = useMantineStyleNonce()?.();
-  const $styles = useLikeC4Styles();
-  const colorsStyles = useMemo(() => generateBuiltInColorStyles($styles, rootSelector), [rootSelector, $styles]);
-  return /* @__PURE__ */ jsx(
-    MemoizedStyle,
-    {
-      id,
-      nonce,
-      colorsStyles
-    }
-  );
+	const rootSelector = `#${id}`;
+	const nonce = useMantineStyleNonce()?.();
+	const $styles = useLikeC4Styles();
+	return /* @__PURE__ */ jsx(MemoizedStyle, {
+		id,
+		nonce,
+		colorsStyles: useMemo(() => generateBuiltInColorStyles($styles, rootSelector), [rootSelector, $styles])
+	});
 }
-const MemoizedStyle = memo(({ id, nonce, colorsStyles }) => /* @__PURE__ */ jsx(
-  "style",
-  {
-    type: "text/css",
-    "data-likec4-colors": id,
-    dangerouslySetInnerHTML: { __html: colorsStyles },
-    nonce
-  }
-));
+/**
+* @internal Memoized styles gives a performance boost during development
+*/
+var MemoizedStyle = memo(({ id, nonce, colorsStyles }) => /* @__PURE__ */ jsx("style", {
+	type: "text/css",
+	"data-likec4-colors": id,
+	dangerouslySetInnerHTML: { __html: colorsStyles },
+	nonce: nonce || void 0
+}));
 MemoizedStyle.displayName = "MemoizedStyle";
-
+//#endregion
 export { LikeC4Styles };