@likec4/diagram 1.47.0 → 1.49.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-2025 Denis Davydkov
+Copyright (c) 2023-2026 Denis Davydkov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -35,15 +35,13 @@ You need to prepare it and wrap your diagram with`LikeC4ModelProvider` component
 
 See [📖 Documentation](https://likec4.dev/tooling/react/#likec4modelprovider) for examples.
 
-## Bundled version
-
-The easiest way to use this package is the bundled version.\
-Diagram renders inside shadow DOM and has its own styles.
-
 ### LikeC4View
 
+The easiest way to use this package is the `LikeC4View` component.\
+It renders inside shadow DOM and has its own styles.
+
 ```tsx
-import { LikeC4ModelProvider, LikeC4View } from '@likec4/diagram/bundle'
+import { LikeC4ModelProvider, LikeC4View } from '@likec4/diagram'
 /**
  * See https://likec4.dev/tooling/react/#likec4modelprovider
  */
@@ -68,7 +66,7 @@ See [LikeC4ViewProps](./src/LikeC4View.tsx) for available props.
 You may need to import icons, if you use built-in node renderers.
 
 ```tsx
-import { type ElementIconRenderer, LikeC4, LikeC4ModelProvider, LikeC4View } from '@likec4/diagram/bundle'
+import { type ElementIconRenderer, LikeC4, LikeC4ModelProvider, LikeC4View } from '@likec4/diagram'
 import { lazy, Suspense } from 'react'
 
 // Better to lazy load icons, bundle is quite large at the moment
@@ -100,7 +98,7 @@ function App() {
 Component works in most usecases, but if you need more - use `ReactLikeC4`:
 
 ```tsx
-import { ReactLikeC4, LikeC4ModelProvider } from '@likec4/diagram/bundle'
+import { ReactLikeC4, LikeC4ModelProvider } from '@likec4/diagram'
 
 function App() {
   const [viewId, setViewId] = useState('index')
@@ -161,7 +159,7 @@ Here are the options:
    > Layers order is important.
 
 3. Font.\
-   LikeC4Diagram uses [`IBM Plex Sans`](https://fontsource.org/fonts/ibm-plex-sans) by default.\
+   LikeC4Diagram uses [`IBM Plex Sans Variable`](https://fontsource.org/fonts/ibm-plex-sans) by default.\
    You can import it from [fontsource](https://fontsource.org/fonts/ibm-plex-sans) or any other CDN, bundle, or import:
 
    ```css
@@ -279,7 +277,7 @@ function App() {
 ### Custom node renderer
 
 LikeC4Diagram can use custom node renderers.\
-Compose custom nodes renderers using primitives from `@likec4/diagram/custom` (or `@likec4/diagram/bundle/custom` for the bundled version).\
+Compose custom nodes renderers using primitives from `@likec4/diagram/custom`.\
 See [customNodes.tsx](./src/custom/customNodes.tsx) for examples.
 
 ```tsx

package/adhoc-editor/package.json

@@ -0,0 +1,4 @@
+{
+  "types": "../dist/adhoc-editor/index.d.ts",
+  "module": "../dist/adhoc-editor/index.js"
+}

package/dist/LikeC4Diagram.d.ts

@@ -1,5 +1,6 @@
 import { Any } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4DiagramProperties<A> & LikeC4DiagramEventHandlers<A>>;
 /**
@@ -8,4 +9,4 @@ export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4Di
  *
  * Use {@link ReactLikeC4} or {@link LikeC4View} for ready-to-use component
  */
-export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onLogoClick, onLayoutTypeChange, onInitialized, view, className, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onLogoClick, onLayoutTypeChange, onInitialized, view, className, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, enableNotes, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): JSX.Element;

package/dist/LikeC4Diagram.js

@@ -2,17 +2,19 @@ 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 } from 'react';
-import { isPlainObject, mapValues } from 'remeda';
+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 { useOptionalLikeC4EditorPort } from './editor/LikeC4EditorProvider.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';
@@ -20,6 +22,8 @@ import { IconRendererProvider } from './context/IconRenderer.js';
 import { DiagramFeatures } from './context/DiagramFeatures.js';
 import { DiagramEventHandlers } from './context/DiagramEventHandlers.js';
 
+const noop = () => {
+};
 function LikeC4Diagram({
   onCanvasClick,
   onCanvasContextMenu,
@@ -53,6 +57,7 @@ function LikeC4Diagram({
   enableDynamicViewWalkthrough = false,
   dynamicViewVariant,
   enableSearch = false,
+  enableNotes = true,
   initialWidth,
   initialHeight,
   reduceGraphics = "auto",
@@ -64,7 +69,10 @@ function LikeC4Diagram({
 }) {
   const id = useId();
   const initialRef = useRef(null);
-  const hasEditor = !!useOptionalLikeC4EditorPort();
+  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);
@@ -84,90 +92,86 @@ function LikeC4Diagram({
       initialMinZoom: MinZoom
     };
   }
-  const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && (bounds.width ?? 1) * (bounds.height ?? 1) > 6e6 && view.nodes.some((n) => n.children?.length > 0) : reduceGraphics;
-  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(
-    FramerMotionConfig,
+  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,
     {
-      ...isReducedGraphicsMode && { reducedMotion: "always" },
-      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,
         {
-          features: {
-            enableFitView: fitView,
-            enableEditor: hasEditor,
-            enableReadOnly: readonly,
-            enableFocusMode,
-            enableNavigateTo: !!onNavigateTo,
-            enableElementDetails,
-            enableRelationshipDetails,
-            enableRelationshipBrowser,
-            enableSearch,
-            enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
-            enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
-            enableNotations,
-            enableVscode: !!onOpenSource,
-            enableControls: controls,
-            enableElementTags,
-            enableCompareWithLatest: enableCompareWithLatest && !!onLayoutTypeChange
+          handlers: {
+            onCanvasClick,
+            onCanvasContextMenu,
+            onCanvasDblClick,
+            onEdgeClick,
+            onEdgeContextMenu,
+            onNavigateTo,
+            onNodeClick,
+            onNodeContextMenu,
+            onOpenSource,
+            onLogoClick,
+            onInitialized,
+            onLayoutTypeChange
           },
-          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,
+          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,
                   {
-                    fitView,
-                    ...initialRef.current,
-                    children: /* @__PURE__ */ jsxs(
-                      DiagramActorProvider,
-                      {
-                        view,
-                        zoomable,
-                        pannable,
-                        fitViewPadding,
-                        nodesDraggable: hasEditor,
-                        nodesSelectable,
-                        where: where ?? null,
-                        dynamicViewVariant,
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            LikeC4DiagramXYFlow,
-                            {
-                              background,
-                              reactFlowProps,
-                              renderNodes,
-                              children
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(LikeC4DiagramUI, {})
-                        ]
-                      }
-                    )
+                    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") {

package/dist/LikeC4Diagram.props.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutedView, LayoutType, ViewChange, WhereOperator } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutedView, LayoutType, WhereOperator } from '@likec4/core/types';
 import { ReactFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { CamelCasedProperties, SetRequired } from 'type-fest';
@@ -183,6 +183,12 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * @default false
      */
     enableElementTags?: boolean | undefined;
+    /**
+     * Display element notes, if they are present in the view
+     *
+     * @default true
+     */
+    enableNotes?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      * Enable it if you have a large or static view
@@ -194,6 +200,8 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
     /**
      * Render icon for an element, bundled or remote
      * By default, if icon is http:// or https://, it will be rendered as an image
+     *
+     * Consider using `IconRendererProvider`
      */
     renderIcon?: ElementIconRenderer | undefined;
     /**
@@ -234,11 +242,7 @@ export type OnEdgeClick<A extends Any = Unknown> = (edge: DiagramEdge<A>, event:
  * On pane/canvas click (not on any node or edge)
  */
 export type OnCanvasClick = (event: ReactMouseEvent) => void;
-export type OnCanvasContextMenu = (event: ReactMouseEvent | MouseEvent) => void;
-export type ChangeEvent = {
-    change: ViewChange;
-};
-export type OnChange = (event: ChangeEvent) => void;
+export type OnCanvasContextMenu = (event: ReactMouseEvent) => void;
 export type OnInitialized = (params: {
     diagram: DiagramApi;
     xyflow: XYFlowInstance;

package/dist/LikeC4ModelProvider.d.ts

@@ -1,10 +1,10 @@
 import { LikeC4Model } from '@likec4/core/model';
-import { aux } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-export interface LikeC4ModelProviderProps<A extends aux.Any = aux.Unknown> {
-    likec4model: LikeC4Model<A>;
+import { JSX } from 'react/jsx-runtime';
+export interface LikeC4ModelProviderProps {
+    likec4model: LikeC4Model<any>;
 }
 /**
  * Ensures LikeC4Model context
  */
-export declare function LikeC4ModelProvider<A extends aux.Any = aux.Unknown>({ children, likec4model, }: PropsWithChildren<LikeC4ModelProviderProps<A>>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ModelProvider({ children, likec4model, }: PropsWithChildren<LikeC4ModelProviderProps>): JSX.Element;

package/dist/LikeC4ModelProvider.js

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { LikeC4ModelContext } from './context/LikeC4ModelContext.js';
+import { LikeC4ModelContextProvider } from './context/LikeC4ModelContext.js';
 
 function LikeC4ModelProvider({
   children,
   likec4model
 }) {
-  return /* @__PURE__ */ jsx(LikeC4ModelContext.Provider, { value: likec4model, children });
+  return /* @__PURE__ */ jsx(LikeC4ModelContextProvider, { value: likec4model, children });
 }
 
 export { LikeC4ModelProvider };

package/dist/LikeC4ProjectsOverview.d.ts

@@ -1,7 +1,8 @@
+import { JSX } from 'react/jsx-runtime';
 import { Simplify } from 'type-fest';
 import { ProjectsOverviewProps } from './projects-overview';
-export type LikeC4ProjectsOverviewProps = Simplify<Omit<ProjectsOverviewProps, 'id'> & {
+export type LikeC4ProjectsOverviewProps = Simplify<ProjectsOverviewProps & {
     className?: string;
     onSelectProject?: ProjectsOverviewProps['onNavigateToProject'];
 }>;
-export declare function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props }: LikeC4ProjectsOverviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props }: LikeC4ProjectsOverviewProps): JSX.Element;

package/dist/LikeC4ProjectsProvider.d.ts

@@ -1,5 +1,6 @@
 import { LikeC4Project, ProjectId } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
+import { JSX } from 'react/jsx-runtime';
 export interface LikeC4ProjectsProviderProps {
     /**
      * Projects to be used in the navigation panel.
@@ -14,4 +15,4 @@ export interface LikeC4ProjectsProviderProps {
 /**
  * Ensures LikeC4Projects context
  */
-export declare function LikeC4ProjectsProvider({ children, projects, onProjectChange: _onProjectChange, }: PropsWithChildren<LikeC4ProjectsProviderProps>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ProjectsProvider({ children, projects, onProjectChange: _onProjectChange, }: PropsWithChildren<LikeC4ProjectsProviderProps>): JSX.Element;

package/dist/LikeC4ProjectsProvider.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { deepEqual } from 'fast-equals';
-import { useContext, useState, useEffect } from 'react';
-import { LikeC4ProjectsContext } from './context/LikeC4ProjectsContext.js';
+import { useEffect, useState } from 'react';
+import { useOptionalProjectsContext, LikeC4ProjectsContextProvider } from './context/LikeC4ProjectsContext.js';
 import { useCallbackRef } from './hooks/useCallbackRef.js';
 
 function LikeC4ProjectsProvider({
@@ -9,18 +9,20 @@ function LikeC4ProjectsProvider({
   projects,
   onProjectChange: _onProjectChange
 }) {
-  const outerScope = useContext(LikeC4ProjectsContext);
-  if (outerScope) {
-    console.warn("LikeC4ProjectsProvider should not be nested inside another one");
-  }
+  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 : { projects, onProjectChange };
+      return deepEqual(current.projects, projects) ? current : { ...current, projects };
     });
   }, [projects]);
-  return /* @__PURE__ */ jsx(LikeC4ProjectsContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(LikeC4ProjectsContextProvider, { value, children });
 }
 
 export { LikeC4ProjectsProvider };

package/dist/LikeC4Styles.d.ts

@@ -1,7 +1,4 @@
-import { NamedExoticComponent } from 'react';
-export declare const LikeC4Styles: NamedExoticComponent<{
+import { JSX } from 'react/jsx-runtime';
+export declare function LikeC4Styles({ id }: {
     id: string;
-}>;
-/**
- * @internal Memoized styles gives a performance boost during development
- */
+}): JSX.Element;

package/dist/LikeC4Styles.js

@@ -1,41 +1,25 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMantineStyleNonce } from '@mantine/core';
-import { toRgba, mix, toHex, scale } from 'khroma';
-import { memo } from 'react';
-import { pipe, entries, map, join, range } from 'remeda';
+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 MAX_DEPTH = 5;
 const generateCompoundColors = (rootSelector, name, colors, depth) => {
-  const compoundDarkColor = (color) => toHex(
-    scale(color, {
-      l: -22 - 5 * depth,
-      s: -10 - 6 * depth
-    })
-  );
-  const compoundLightColor = (color) => toHex(
-    scale(color, {
-      l: -20 - 3 * depth,
-      s: -3 - 6 * depth
-    })
-  );
-  const selector = `:where(${rootSelector} [data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
+  const selector = `${rootSelector} :is([data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
   return `
 ${selector} {
-  --likec4-palette-fill: ${compoundLightColor(colors.elements.fill)};
-  --likec4-palette-stroke: ${compoundLightColor(colors.elements.stroke)};
+  --likec4-palette-fill: ${colors.fill};
+  --likec4-palette-stroke: ${colors.stroke};  
 }
-${whenDark} ${selector} {
-  --likec4-palette-fill: ${compoundDarkColor(colors.elements.fill)};
-  --likec4-palette-stroke: ${compoundDarkColor(colors.elements.stroke)};
-}
-  `.trim();
+  `;
 };
-function toStyle(rootSelector, name, colors) {
+function toStyle(styles, params) {
+  const { rootSelector, name, colors } = params;
   const { elements, relationships } = colors;
-  const selector = `:where(${rootSelector} [data-likec4-color=${name}])`;
+  const selector = `${rootSelector} :is([data-likec4-color=${name}])`;
   return [
     `
 ${selector} {
@@ -46,38 +30,55 @@ ${selector} {
   --likec4-palette-relation-stroke: ${relationships.line};
   --likec4-palette-relation-label: ${relationships.label};
   --likec4-palette-relation-label-bg: ${relationships.labelBg};
-  --likec4-palette-relation-stroke-selected: ${toRgba(mix(relationships.line, "black", 85))};
+  --likec4-palette-relation-stroke-selected: oklch(from ${relationships.line} calc(l - 0.15) c h);
 }
 ${whenDark} ${selector} {
-  --likec4-palette-relation-stroke-selected: ${toRgba(mix(relationships.line, "white", 70))};
+  --likec4-palette-relation-stroke-selected: oklch(from ${relationships.line} calc(l + 0.15) c h);
 }
 
-  `.trim(),
-    ...range(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(rootSelector, name, colors, depth))
-  ].join("\n");
+  `,
+    ...styles.colorsForCompounds(elements, MAX_COMPOUND_DEPTH).map(
+      (colors2, depth) => generateCompoundColors(rootSelector, name, colors2, depth + 1)
+    )
+  ].map((s) => s.trim()).join("\n");
 }
-function generateBuiltInColorStyles(rootSelector, theme) {
+function generateBuiltInColorStyles(styles, rootSelector) {
   return pipe(
-    theme.colors,
+    styles.theme.colors,
     entries(),
-    map(([color, values]) => toStyle(rootSelector, color, values)),
+    map(
+      ([name, colors]) => toStyle(styles, {
+        rootSelector,
+        name,
+        colors
+      })
+    ),
     join("\n")
   );
 }
-const LikeC4Styles = memo(({ id }) => {
+function LikeC4Styles({ id }) {
   const rootSelector = `#${id}`;
   const nonce = useMantineStyleNonce()?.();
-  const { theme } = useLikeC4Styles();
-  const colorsStyles = generateBuiltInColorStyles(rootSelector, theme);
+  const $styles = useLikeC4Styles();
+  const colorsStyles = useMemo(() => generateBuiltInColorStyles($styles, rootSelector), [rootSelector, $styles]);
   return /* @__PURE__ */ jsx(
-    "style",
+    MemoizedStyle,
     {
-      type: "text/css",
-      "data-likec4-colors": id,
-      dangerouslySetInnerHTML: { __html: colorsStyles },
-      nonce
+      id,
+      nonce,
+      colorsStyles
     }
   );
-});
+}
+const MemoizedStyle = memo(({ id, nonce, colorsStyles }) => /* @__PURE__ */ jsx(
+  "style",
+  {
+    type: "text/css",
+    "data-likec4-colors": id,
+    dangerouslySetInnerHTML: { __html: colorsStyles },
+    nonce
+  }
+));
+MemoizedStyle.displayName = "MemoizedStyle";
 
 export { LikeC4Styles };

package/dist/LikeC4View.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import { ElementIconRenderer, NodeRenderers, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from './LikeC4Diagram.props';
 import type * as t from '@likec4/core/types';
 export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
@@ -6,6 +7,14 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
      * View to display.
      */
     viewId: t.aux.ViewId<A>;
+    /**
+     * Layout to display
+     * - `auto`: auto-layouted from the current sources
+     * - `manual`: manually layouted (if available, falls back to `auto`)
+     *
+     * @default 'manual'
+     */
+    layoutType?: t.LayoutType | undefined;
     /**
      * Enable/disable panning
      * @default false
@@ -128,6 +137,12 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
      * @default enableRelationshipDetails
      */
     enableRelationshipBrowser?: boolean | undefined;
+    /**
+     * Display element notes, if they are present in the view
+     *
+     * @default false
+     */
+    enableNotes?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      *
@@ -235,6 +250,12 @@ export interface LikeC4BrowserProps {
      * @default true
      */
     enableCompareWithLatest?: boolean | undefined;
+    /**
+     * Display element notes, if they are present in the view
+     *
+     * @default true
+     */
+    enableNotes?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      *
@@ -260,4 +281,4 @@ export interface LikeC4BrowserProps {
  *
  * Component is wrapped in ShadowRoot to isolate styles.
  */
-export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, background, browser, showNavigationButtons, enableNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, layoutType: initialLayoutType, background, browser, showNavigationButtons, enableNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableNotes, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): JSX.Element;