@likec4/diagram 1.8.1 → 1.9.0

package/dist/LikeC4CustomColors.d.ts

@@ -0,0 +1,3 @@
+import { LikeC4CustomColorsProperties } from './LikeC4CustomColors.props';
+
+export declare function LikeC4CustomColors({ customColors }: LikeC4CustomColorsProperties): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4CustomColors.props.d.ts

@@ -0,0 +1,5 @@
+import { CustomColorDefinitions } from '@likec4/core';
+
+export interface LikeC4CustomColorsProperties {
+    customColors: CustomColorDefinitions;
+}

package/dist/LikeC4Diagram.d.ts

@@ -2,3 +2,6 @@ import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Dia
 
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
 export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showElementLinks, showDiagramTitle, showNotations, enableDynamicViewWalkthrough, enableFocusMode, initialWidth, initialHeight, keepAspectRatio, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSourceElement, onOpenSourceView, onOpenSourceRelation, onBurgerMenuClick, renderIcon, where, showNavigationButtons }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace LikeC4Diagram {
+    var displayName: string;
+}

package/dist/LikeC4Diagram.props.d.ts

@@ -1,39 +1,9 @@
-import { DiagramEdge, DiagramNode, DiagramView, Fqn, NonEmptyArray, RelationID, ViewChange, ViewID } from '@likec4/core';
+import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationID, ViewChange, ViewID, WhereOperator } from '@likec4/core';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { XYFlowEdge, XYFlowNode } from './xyflow/types';
 import { XYBackground } from './xyflow/XYFlowBackground';
 
-type EqualOperator<V> = {
-    eq: V;
-    neq?: never;
-} | {
-    eq?: never;
-    neq: V;
-};
-type AllNever = {
-    not?: never;
-    and?: never;
-    or?: never;
-    tag?: never;
-    kind?: never;
-};
-type TagKindOperator<Tag, Kind> = Omit<AllNever, 'tag' | 'kind'> & ({
-    tag: EqualOperator<Tag>;
-    kind?: never;
-} | {
-    tag?: never;
-    kind: EqualOperator<Kind>;
-});
-type NotOperator<Tag, Kind> = Omit<AllNever, 'not'> & {
-    not: TagKindOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>;
-};
-type AndOperator<Tag, Kind> = Omit<AllNever, 'and'> & {
-    and: NonEmptyArray<TagKindOperator<Tag, Kind> | OrOperator<Tag, Kind> | NotOperator<Tag, Kind>>;
-};
-type OrOperator<Tag, Kind> = Omit<AllNever, 'or'> & {
-    or: NonEmptyArray<TagKindOperator<Tag, Kind> | AndOperator<Tag, Kind> | NotOperator<Tag, Kind>>;
-};
-export type WhereOperator<Tag extends string, Kind extends string> = TagKindOperator<Tag, Kind> | NotOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>;
+export type { WhereOperator };
 export type DiagramNodeWithNavigate = Omit<DiagramNode, 'navigateTo'> & {
     navigateTo: ViewID;
 };
@@ -182,4 +152,3 @@ export interface LikeC4DiagramEventHandlers {
     onOpenSourceElement?: null | undefined | ((fqn: Fqn) => void);
     onOpenSourceRelation?: null | undefined | ((id: RelationID) => void);
 }
-export {};

package/dist/index.mjs

@@ -724,6 +724,7 @@ function DiagramContextProvider({
     }
   );
 }
+DiagramContextProvider.displayName = "DiagramContextProvider";
 function useDiagramState(selector2, equalityFn) {
   const store = useContext(DiagramContext);
   if (store === null)
@@ -736,12 +737,35 @@ function useDiagramStoreApi() {
     throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
   return store;
 }
+var vars = { safariAnimationHook: "var(--likec4-safari-animation-hook)", default: { font: "var(--likec4-default-font-family)" }, likec4: { font: "var(--likec4-font-family)", background: { color: "var(--likec4-background-color)", pattern: { color: "var(--likec4-background-pattern-color)" } } }, compound: { font: "var(--likec4-compound-font-family)", titleColor: "var(--likec4-compound-title-color)" }, element: { font: "var(--likec4-element-font-family)", fill: "var(--likec4-element-fill)", stroke: "var(--likec4-element-stroke)", hiContrast: "var(--likec4-element-hiContrast)", loContrast: "var(--likec4-element-loContrast)" }, relation: { lineColor: "var(--likec4-relation-lineColor)", labelColor: "var(--likec4-relation-labelColor)", labelBgColor: "var(--likec4-relation-labelBg)" }, optionsPanel: { top: "var(--likec4-options-panel-top)", right: "var(--likec4-options-panel-right)" }, navigationPanel: { top: "var(--likec4-navigation-panel-top)", left: "var(--likec4-navigation-panel-left)" } };
+function LikeC4CustomColors({ customColors }) {
+  function toStyle(name, colorValues) {
+    const rules = new Array(
+      ...entries(colorValues.elements).map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
+      ...entries(colorValues.relationships).map(
+        ([key, value]) => `${stripCssVarReference(vars.relation[key])}: ${value};`
+      )
+    ).join(`
+`);
+    return `:where([data-likec4-color=${name}]) {
+            ${rules}
+        }`;
+  }
+  function stripCssVarReference(ref) {
+    const end = ref.indexOf(",");
+    return ref.substring(4, end == -1 ? ref.length - 1 : end);
+  }
+  const styles = entries(customColors).map(([name, color]) => toStyle(name, color)).join(`
+`);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: styles } }) });
+}
 var cssReactFlow = "_2h8g8h0", cssDisablePan = "_2h8g8h1", cssTransparentBg = "_2h8g8h2", cssNoControls = "_2h8g8h3";
 function EnsureMantine({ children }) {
   if (!useContext(MantineContext))
     throw new Error("LikeC4Diagram must be a child of MantineProvider");
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
+EnsureMantine.displayName = "EnsureMantine";
 function selectXYFlowSize(state) {
   return `${Math.round(state.width)}:${Math.round(state.height)}`;
 }
@@ -2335,6 +2359,7 @@ function XYFlow({
     }
   );
 }
+XYFlow.displayName = "XYFlow";
 var container$2 = "hbkbtj0", card$1 = "hbkbtj1", title = "hbkbtj2", description = "hbkbtj3";
 const selector$1 = (s) => ({
   id: s.view.id,
@@ -2592,7 +2617,7 @@ function DynamicViewWalkthrough() {
     }
   );
 }
-var vars = { safariAnimationHook: "var(--likec4-safari-animation-hook)", default: { font: "var(--likec4-default-font-family)" }, likec4: { font: "var(--likec4-font-family)", background: { color: "var(--likec4-background-color)", pattern: { color: "var(--likec4-background-pattern-color)" } } }, compound: { font: "var(--likec4-compound-font-family)", titleColor: "var(--likec4-compound-title-color)" }, element: { font: "var(--likec4-element-font-family)", fill: "var(--likec4-element-fill)", stroke: "var(--likec4-element-stroke)", hiContrast: "var(--likec4-element-hiContrast)", loContrast: "var(--likec4-element-loContrast)" }, relation: { lineColor: "var(--likec4-relation-lineColor)", labelColor: "var(--likec4-relation-labelColor)", labelBgColor: "var(--likec4-relation-labelBg)" }, optionsPanel: { top: "var(--likec4-options-panel-top)", right: "var(--likec4-options-panel-right)" }, navigationPanel: { top: "var(--likec4-navigation-panel-top)", left: "var(--likec4-navigation-panel-left)" } }, container = "_1ncdyfa0", card = "_1ncdyfa1", tabPanel = "_1ncdyfa2", elementNotation = "_1ncdyfa3", shapeSvg = "_1ncdyfa4", shapeBadge = "_1ncdyfa5";
+var container = "_1ncdyfa0", card = "_1ncdyfa1", tabPanel = "_1ncdyfa2", elementNotation = "_1ncdyfa3", shapeSvg = "_1ncdyfa4", shapeBadge = "_1ncdyfa5";
 const ElementNotation = ({ value }) => {
   const {
     title: title2,
@@ -2707,7 +2732,7 @@ function NotationPanel() {
     defaultValue: !0
   }), hasNotations = notations.length > 0, portalProps = target ? { portalProps: { target } } : { withinPortal: !1 };
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    !hasNotations && /* @__PURE__ */ jsx(
+    !hasNotations && isVisible && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -2717,7 +2742,7 @@ function NotationPanel() {
           opacity: 0.6
         },
         className: clsx("react-flow__panel", container),
-        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "Diagram has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "View has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
           ThemeIcon,
           {
             size: "xl",
@@ -3518,58 +3543,62 @@ function LikeC4Diagram({
     initialWidth: initialWidth ?? view.bounds.width,
     initialHeight: initialHeight ?? view.bounds.height
   });
-  return readonly !== !0 && where && console.warn("where filter is only supported in readonly mode"), /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, strict: !0, children: /* @__PURE__ */ jsx(
+  return readonly !== !0 && where && console.warn("where filter is only supported in readonly mode"), /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, strict: !0, children: /* @__PURE__ */ jsxs(
     ReactFlowProvider,
     {
       fitView,
       ...initialRef.current,
-      children: /* @__PURE__ */ jsx(
-        DiagramContextProvider,
-        {
-          view,
-          keepAspectRatio,
-          className: clsx(rootClassName, className),
-          readonly,
-          pannable,
-          zoomable,
-          fitViewEnabled: fitView,
-          fitViewPadding,
-          showElementLinks,
-          showNavigationButtons,
-          showNotations,
-          nodesDraggable,
-          nodesSelectable,
-          experimentalEdgeEditing,
-          enableDynamicViewWalkthrough,
-          enableFocusMode,
-          whereFilter: where ?? null,
-          renderIcon: renderIcon ?? null,
-          onCanvasClick: onCanvasClick ?? null,
-          onCanvasContextMenu: onCanvasContextMenu ?? null,
-          onEdgeClick: onEdgeClick ?? null,
-          onEdgeContextMenu: onEdgeContextMenu ?? null,
-          onNodeClick: onNodeClick ?? null,
-          onNodeContextMenu: onNodeContextMenu ?? null,
-          onChange: onChange ?? null,
-          onNavigateTo: onNavigateTo ?? null,
-          onCanvasDblClick: onCanvasDblClick ?? null,
-          onOpenSourceView: onOpenSourceView ?? null,
-          onOpenSourceElement: onOpenSourceElement ?? null,
-          onOpenSourceRelation: onOpenSourceRelation ?? null,
-          onBurgerMenuClick: onBurgerMenuClick ?? null,
-          children: /* @__PURE__ */ jsx(
-            LikeC4DiagramInnerMemo,
-            {
-              controls,
-              background,
-              showDiagramTitle
-            }
-          )
-        }
-      )
+      children: [
+        customColorsDefined(view) && /* @__PURE__ */ jsx(LikeC4CustomColors, { customColors: view.customColorDefinitions }),
+        /* @__PURE__ */ jsx(
+          DiagramContextProvider,
+          {
+            view,
+            keepAspectRatio,
+            className: clsx(rootClassName, className),
+            readonly,
+            pannable,
+            zoomable,
+            fitViewEnabled: fitView,
+            fitViewPadding,
+            showElementLinks,
+            showNavigationButtons,
+            showNotations,
+            nodesDraggable,
+            nodesSelectable,
+            experimentalEdgeEditing,
+            enableDynamicViewWalkthrough,
+            enableFocusMode,
+            whereFilter: where ?? null,
+            renderIcon: renderIcon ?? null,
+            onCanvasClick: onCanvasClick ?? null,
+            onCanvasContextMenu: onCanvasContextMenu ?? null,
+            onEdgeClick: onEdgeClick ?? null,
+            onEdgeContextMenu: onEdgeContextMenu ?? null,
+            onNodeClick: onNodeClick ?? null,
+            onNodeContextMenu: onNodeContextMenu ?? null,
+            onChange: onChange ?? null,
+            onNavigateTo: onNavigateTo ?? null,
+            onCanvasDblClick: onCanvasDblClick ?? null,
+            onOpenSourceView: onOpenSourceView ?? null,
+            onOpenSourceElement: onOpenSourceElement ?? null,
+            onOpenSourceRelation: onOpenSourceRelation ?? null,
+            onBurgerMenuClick: onBurgerMenuClick ?? null,
+            children: /* @__PURE__ */ jsx(
+              LikeC4DiagramInnerMemo,
+              {
+                controls,
+                background,
+                showDiagramTitle
+              }
+            )
+          }
+        )
+      ]
     }
   ) }) });
 }
+LikeC4Diagram.displayName = "LikeC4Diagram";
 const LikeC4DiagramInnerMemo = memo(function({
   background,
   controls,
@@ -3614,6 +3643,10 @@ const LikeC4DiagramInnerMemo = memo(function({
     ] })
   ] });
 }, shallowEqual);
+LikeC4DiagramInnerMemo.displayName = "LikeC4DiagramInnerMemo";
+function customColorsDefined(view) {
+  return Object.keys(view.customColorDefinitions).length > 0;
+}
 function StaticLikeC4Diagram({
   view,
   fitView = !0,

package/dist/mantine/EnsureMantine.d.ts

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

package/dist/state/DiagramContext.d.ts

@@ -16,7 +16,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
     experimentalEdgeEditing: boolean;
     enableFocusMode: boolean;
     renderIcon: import('..').ElementIconRenderer | null;
-    whereFilter: import('..').WhereOperator<string, string> | null;
+    whereFilter: import('@likec4/core').WhereOperator<string, string> | null;
     enableDynamicViewWalkthrough: boolean;
     xyflow: import('..').XYFlowInstance;
     xystore: import('../hooks/useXYFlow').XYStoreApi;
@@ -98,7 +98,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             experimentalEdgeEditing: boolean;
             enableFocusMode: boolean;
             renderIcon: import('..').ElementIconRenderer | null;
-            whereFilter: import('..').WhereOperator<string, string> | null;
+            whereFilter: import('@likec4/core').WhereOperator<string, string> | null;
             enableDynamicViewWalkthrough: boolean;
             xyflow: import('..').XYFlowInstance;
             xystore: import('../hooks/useXYFlow').XYStoreApi;
@@ -234,7 +234,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             experimentalEdgeEditing: boolean;
             enableFocusMode: boolean;
             renderIcon: import('..').ElementIconRenderer | null;
-            whereFilter: import('..').WhereOperator<string, string> | null;
+            whereFilter: import('@likec4/core').WhereOperator<string, string> | null;
             enableDynamicViewWalkthrough: boolean;
             xyflow: import('..').XYFlowInstance;
             xystore: import('../hooks/useXYFlow').XYStoreApi;
@@ -371,7 +371,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
             experimentalEdgeEditing: boolean;
             enableFocusMode: boolean;
             renderIcon: import('..').ElementIconRenderer | null;
-            whereFilter: import('..').WhereOperator<string, string> | null;
+            whereFilter: import('@likec4/core').WhereOperator<string, string> | null;
             enableDynamicViewWalkthrough: boolean;
             xyflow: import('..').XYFlowInstance;
             xystore: import('../hooks/useXYFlow').XYStoreApi;
@@ -515,7 +515,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
         experimentalEdgeEditing: boolean;
         enableFocusMode: boolean;
         renderIcon: import('..').ElementIconRenderer | null;
-        whereFilter: import('..').WhereOperator<string, string> | null;
+        whereFilter: import('@likec4/core').WhereOperator<string, string> | null;
         enableDynamicViewWalkthrough: boolean;
         xyflow: import('..').XYFlowInstance;
         xystore: import('../hooks/useXYFlow').XYStoreApi;
@@ -651,7 +651,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
         experimentalEdgeEditing: boolean;
         enableFocusMode: boolean;
         renderIcon: import('..').ElementIconRenderer | null;
-        whereFilter: import('..').WhereOperator<string, string> | null;
+        whereFilter: import('@likec4/core').WhereOperator<string, string> | null;
         enableDynamicViewWalkthrough: boolean;
         xyflow: import('..').XYFlowInstance;
         xystore: import('../hooks/useXYFlow').XYStoreApi;
@@ -787,7 +787,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
         experimentalEdgeEditing: boolean;
         enableFocusMode: boolean;
         renderIcon: import('..').ElementIconRenderer | null;
-        whereFilter: import('..').WhereOperator<string, string> | null;
+        whereFilter: import('@likec4/core').WhereOperator<string, string> | null;
         enableDynamicViewWalkthrough: boolean;
         xyflow: import('..').XYFlowInstance;
         xystore: import('../hooks/useXYFlow').XYStoreApi;
@@ -923,7 +923,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
         experimentalEdgeEditing: boolean;
         enableFocusMode: boolean;
         renderIcon: import('..').ElementIconRenderer | null;
-        whereFilter: import('..').WhereOperator<string, string> | null;
+        whereFilter: import('@likec4/core').WhereOperator<string, string> | null;
         enableDynamicViewWalkthrough: boolean;
         xyflow: import('..').XYFlowInstance;
         xystore: import('../hooks/useXYFlow').XYStoreApi;
@@ -1059,7 +1059,7 @@ export declare const DiagramContext: import('react').Context<import('zustand/tra
         experimentalEdgeEditing: boolean;
         enableFocusMode: boolean;
         renderIcon: import('..').ElementIconRenderer | null;
-        whereFilter: import('..').WhereOperator<string, string> | null;
+        whereFilter: import('@likec4/core').WhereOperator<string, string> | null;
         enableDynamicViewWalkthrough: boolean;
         xyflow: import('..').XYFlowInstance;
         xystore: import('../hooks/useXYFlow').XYStoreApi;
@@ -1187,3 +1187,6 @@ export type DiagramContextProviderProps = PropsWithChildren<Omit<DiagramInitialS
     keepAspectRatio: boolean;
 }>;
 export declare function DiagramContextProvider({ children, view, className, keepAspectRatio, whereFilter, ...props }: DiagramContextProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DiagramContextProvider {
+    var displayName: string;
+}

package/dist/state/diagram-to-xyflow.d.ts

@@ -1,4 +1,4 @@
-import { DiagramView } from '@likec4/core/types';
+import { DiagramView } from '@likec4/core';
 import { WhereOperator } from '../LikeC4Diagram.props';
 import { XYFlowEdge, XYFlowNode } from '../xyflow/types';
 

package/dist/xyflow/XYFlow.d.ts

@@ -6,4 +6,7 @@ type XYFlowWrapperProps = PropsWithChildren<{
     style?: CSSProperties | undefined;
 }>;
 export declare function XYFlow({ colorMode, className, children, style }: XYFlowWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace XYFlow {
+    var displayName: string;
+}
 export {};

package/dist/xyflow/utils.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEdge, Point } from '@likec4/core/types';
+import { DiagramEdge, Point } from '@likec4/core';
 import { Rect, XYPosition } from '@xyflow/react';
 import { InternalXYFlowNode } from './types';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -48,6 +48,7 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
+    "@likec4/core": "1.9.0",
     "@lume/kiwi": "^0.4.3",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "^3.14.0",
@@ -62,22 +63,22 @@
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
     "framer-motion": "^11.3.30",
+    "khroma": "^2.1.0",
     "remeda": "^2.11.0",
+    "type-fest": "^4.26.0",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@likec4/core": "1.8.1",
     "@mantine/core": "^7.11.2",
     "@mantine/hooks": "^7.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/core": "1.8.1",
-    "@likec4/tsconfig": "1.8.1",
-    "@mantine/core": "7.11.2",
-    "@mantine/hooks": "7.11.2",
-    "@mantine/vanilla-extract": "7.11.2",
+    "@likec4/tsconfig": "1.9.0",
+    "@mantine/core": "7.12.2",
+    "@mantine/hooks": "7.12.2",
+    "@mantine/vanilla-extract": "7.12.2",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
@@ -86,10 +87,8 @@
     "@vanilla-extract/esbuild-plugin": "^2.3.10",
     "@vitejs/plugin-react": "^4.3.1",
     "execa": "^9.3.1",
-    "khroma": "^2.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "type-fest": "^4.21.0",
     "typescript": "^5.5.4",
     "vite": "5.3.4",
     "vite-plugin-dts": "^3.9.1"

package/src/LikeC4CustomColors.props.ts

@@ -0,0 +1,5 @@
+import { type CustomColorDefinitions } from '@likec4/core'
+
+export interface LikeC4CustomColorsProperties {
+  customColors: CustomColorDefinitions
+}

package/src/LikeC4CustomColors.tsx

@@ -0,0 +1,37 @@
+import { type ThemeColorValues } from '@likec4/core'
+import { entries } from 'remeda'
+import type { LikeC4CustomColorsProperties } from './LikeC4CustomColors.props'
+import { vars } from './theme.css'
+
+type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number} )`
+
+export function LikeC4CustomColors({ customColors }: LikeC4CustomColorsProperties) {
+  function toStyle(name: String, colorValues: ThemeColorValues): String {
+    const rules = new Array<String>(
+      ...entries(colorValues.elements).map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
+      ...entries(colorValues.relationships).map(([key, value]) =>
+        `${stripCssVarReference(vars.relation[key])}: ${value};`
+      )
+    )
+      .join('\n')
+
+    return `:where([data-likec4-color=${name}]) {
+            ${rules}
+        }`
+  }
+
+  function stripCssVarReference(ref: CSSVarFunction): String {
+    const end = ref.indexOf(',')
+    return ref.substring(4, end == -1 ? ref.length - 1 : end)
+  }
+
+  const styles = entries(customColors)
+    .map(([name, color]) => toStyle(name, color))
+    .join('\n')
+
+  return (
+    <>
+      <style type="text/css" dangerouslySetInnerHTML={{ __html: styles }} />
+    </>
+  )
+}

package/src/LikeC4Diagram.props.ts

@@ -3,70 +3,72 @@ import type {
   DiagramNode,
   DiagramView,
   Fqn,
-  NonEmptyArray,
   RelationID,
   ViewChange,
-  ViewID
+  ViewID,
+  WhereOperator
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 import type { XYBackground } from './xyflow/XYFlowBackground'
 
-type EqualOperator<V> = {
-  eq: V
-  neq?: never
-} | {
-  eq?: never
-  neq: V
-}
-
-type AllNever = {
-  not?: never
-  and?: never
-  or?: never
-  tag?: never
-  kind?: never
-}
+// type EqualOperator<V> = {
+//   eq: V
+//   neq?: never
+// } | {
+//   eq?: never
+//   neq: V
+// }
 
-type TagKindOperator<Tag, Kind> =
-  & Omit<AllNever, 'tag' | 'kind'>
-  & ({
-    tag: EqualOperator<Tag>
-    kind?: never
-  } | {
-    tag?: never
-    kind: EqualOperator<Kind>
-  })
-
-type NotOperator<Tag, Kind> = Omit<AllNever, 'not'> & {
-  not: TagKindOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>
-}
+// type AllNever = {
+//   not?: never
+//   and?: never
+//   or?: never
+//   tag?: never
+//   kind?: never
+// }
 
-type AndOperator<Tag, Kind> = Omit<AllNever, 'and'> & {
-  and: NonEmptyArray<
-    | TagKindOperator<Tag, Kind>
-    | OrOperator<Tag, Kind>
-    | NotOperator<Tag, Kind>
-  >
-}
+// type TagKindOperator<Tag, Kind> =
+//   & Omit<AllNever, 'tag' | 'kind'>
+//   & ({
+//     tag: EqualOperator<Tag>
+//     kind?: never
+//   } | {
+//     tag?: never
+//     kind: EqualOperator<Kind>
+//   })
+
+// type NotOperator<Tag, Kind> = Omit<AllNever, 'not'> & {
+//   not: TagKindOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>
+// }
 
-type OrOperator<Tag, Kind> = Omit<AllNever, 'or'> & {
-  or: NonEmptyArray<
-    | TagKindOperator<Tag, Kind>
-    | AndOperator<Tag, Kind>
-    | NotOperator<Tag, Kind>
-  >
-}
+// type AndOperator<Tag, Kind> = Omit<AllNever, 'and'> & {
+//   and: NonEmptyArray<
+//     | TagKindOperator<Tag, Kind>
+//     | OrOperator<Tag, Kind>
+//     | NotOperator<Tag, Kind>
+//   >
+// }
 
-// export const isOrOperator = (operator: WhereOperator): operator is OrOperator<WhereOperator> => {
-//   return 'or' in operator
+// type OrOperator<Tag, Kind> = Omit<AllNever, 'or'> & {
+//   or: NonEmptyArray<
+//     | TagKindOperator<Tag, Kind>
+//     | AndOperator<Tag, Kind>
+//     | NotOperator<Tag, Kind>
+//   >
 // }
 
-export type WhereOperator<Tag extends string, Kind extends string> =
-  | TagKindOperator<Tag, Kind>
-  | NotOperator<Tag, Kind>
-  | AndOperator<Tag, Kind>
-  | OrOperator<Tag, Kind>
+// // export const isOrOperator = (operator: WhereOperator): operator is OrOperator<WhereOperator> => {
+// //   return 'or' in operator
+// // }
+
+// export type WhereOperator<Tag extends string, Kind extends string> =
+//   | TagKindOperator<Tag, Kind>
+//   | NotOperator<Tag, Kind>
+//   | AndOperator<Tag, Kind>
+//   | OrOperator<Tag, Kind>
+
+export type { WhereOperator }
 
 export type DiagramNodeWithNavigate = Omit<DiagramNode, 'navigateTo'> & {
   navigateTo: ViewID

package/src/LikeC4Diagram.tsx

@@ -1,3 +1,4 @@
+import type { DiagramView } from '@likec4/core'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
@@ -5,6 +6,7 @@ import { domAnimation, LazyMotion } from 'framer-motion'
 import { memo, useRef } from 'react'
 import { rootClassName } from './globals.css'
 import { useDiagramState } from './hooks/useDiagramState'
+import { LikeC4CustomColors } from './LikeC4CustomColors'
 import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { EnsureMantine } from './mantine/EnsureMantine'
@@ -70,6 +72,7 @@ export function LikeC4Diagram({
           fitView={fitView}
           {...initialRef.current}
         >
+          {customColorsDefined(view) && <LikeC4CustomColors customColors={view.customColorDefinitions} />}
           <DiagramContextProvider
             view={view}
             keepAspectRatio={keepAspectRatio}
@@ -114,6 +117,7 @@ export function LikeC4Diagram({
     </EnsureMantine>
   )
 }
+LikeC4Diagram.displayName = 'LikeC4Diagram'
 
 type LikeC4DiagramInnerProps = {
   background: NonNullable<LikeC4DiagramProperties['background']>
@@ -164,3 +168,8 @@ const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4Diag
     </>
   )
 }, shallowEqual)
+LikeC4DiagramInnerMemo.displayName = 'LikeC4DiagramInnerMemo'
+
+function customColorsDefined(view: DiagramView) {
+  return Object.keys(view.customColorDefinitions).length > 0
+}

package/src/mantine/EnsureMantine.tsx

@@ -12,3 +12,4 @@ export function EnsureMantine({ children }: EnsureMantineProps) {
 
   return <>{children}</>
 }
+EnsureMantine.displayName = 'EnsureMantine'

package/src/state/DiagramContext.tsx

@@ -79,3 +79,4 @@ export function DiagramContextProvider({
     </div>
   )
 }
+DiagramContextProvider.displayName = 'DiagramContextProvider'

package/src/state/diagram-to-xyflow.ts

@@ -1,5 +1,5 @@
 import { extractStep, invariant, nonNullable, whereOperatorAsPredicate } from '@likec4/core'
-import type { DiagramEdge, DiagramNode, DiagramView, Fqn } from '@likec4/core/types'
+import type { DiagramEdge, DiagramNode, DiagramView, Fqn } from '@likec4/core'
 import { hasAtLeast } from 'remeda'
 import type { WhereOperator } from '../LikeC4Diagram.props'
 import { ZIndexes } from '../xyflow/const'

package/src/ui/notation/NotationPanel.tsx

@@ -141,7 +141,7 @@ export function NotationPanel() {
 
   return (
     <AnimatePresence>
-      {!hasNotations && (
+      {!hasNotations && isVisible && (
         <m.div
           key={'empty'}
           initial={{ opacity: 0.75, translateX: '50%' }}
@@ -151,7 +151,7 @@ export function NotationPanel() {
             opacity: 0.6
           }}
           className={clsx('react-flow__panel', css.container)}>
-          <Tooltip label="Diagram has no notations" color="orange" {...portalProps}>
+          <Tooltip label="View has no notations" color="orange" {...portalProps}>
             <ThemeIcon
               size={'xl'}
               variant="light"

package/src/xyflow/XYFlow.tsx

@@ -194,5 +194,6 @@ export function XYFlow({
     </ReactFlow>
   )
 }
+XYFlow.displayName = 'XYFlow'
 
 // export const XYFlow = memo(XYFlowWrapper) as typeof XYFlowWrapper

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -1,7 +1,6 @@
-import type { DiagramNode } from '@likec4/core/types'
-import { ActionIcon, Text as MantineText, Tooltip } from '@mantine/core'
-import { IconFileSymlink } from '@tabler/icons-react'
-import { Handle, type NodeProps, NodeToolbar, Position } from '@xyflow/react'
+import type { DiagramNode } from '@likec4/core'
+import { Text as MantineText } from '@mantine/core'
+import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { m, type Variants } from 'framer-motion'

package/src/xyflow/utils.ts

@@ -1,5 +1,5 @@
 import { hasAtLeast, invariant } from '@likec4/core'
-import type { DiagramEdge, Point } from '@likec4/core/types'
+import type { DiagramEdge, Point } from '@likec4/core'
 import type { Rect, XYPosition } from '@xyflow/react'
 import { Bezier } from 'bezier-js'
 import { isArray } from 'remeda'