@likec4/diagram 1.35.0 → 1.36.1

package/dist/components/Link.js

@@ -1,108 +1,105 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { cx, css, cva } from '@likec4/styles/css';
-import { CopyButton, Anchor, ActionIcon, Box, Text } from '@mantine/core';
-import { stopPropagation } from '../utils/xyflow.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { css, cx } from '@likec4/styles/css';
+import { Badge, CopyButton, ActionIcon } from '@mantine/core';
+import { forwardRef } from 'react';
+import { GithubIcon } from './GithubIcon.js';
 import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
 import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
 
-const link = cva({
-  base: {
-    display: "flex",
-    overflow: "hidden",
-    alignItems: "center",
-    gap: "micro",
-    justifyContent: "stretch",
-    transitionProperty: "all",
-    transitionDuration: "fast",
-    transitionTimingFunction: "inOut",
-    border: `1px dashed {colors.mantine.colors.defaultBorder}`,
-    rounded: "sm",
-    cursor: "pointer",
-    color: "mantine.colors.gray[7]",
-    _dark: {
-      color: "mantine.colors.dark[1]"
-    },
-    _hover: {
-      transitionTimingFunction: "out",
-      color: "mantine.colors.defaultColor",
-      background: "mantine.colors.defaultHover"
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        minHeight: "22px",
-        padding: "2px 8px 2px 2px"
-      },
-      md: {
-        minHeight: "30px",
-        padding: "3px 16px 3px 3px"
-      }
-    }
-  }
-});
-const titleBox = css({
-  flex: "1 1 100%",
-  transition: `transform 100ms {easings.inOut}`,
-  _groupHover: {
-    transitionTimingFunction: "out",
-    transitionDelay: "50ms",
-    transform: "translateX(1px)"
-  }
-});
-function Link({
-  value,
-  size = "md"
-}) {
-  const isNormalSize = size === "md";
-  const url = value.url.includes("://") ? value.url : new window.URL(value.url, window.location.href).toString();
-  return /* @__PURE__ */ jsx(CopyButton, { value: url, children: ({ copied, copy }) => /* @__PURE__ */ jsxs(
-    Anchor,
-    {
-      href: url,
-      target: "_blank",
-      underline: "never",
-      className: cx(
-        "group",
-        link({ size })
-      ),
-      onClick: stopPropagation,
-      children: [
-        /* @__PURE__ */ jsx(
+const GITHUB_PREFIX = "https://github.com/";
+const Link = forwardRef(
+  ({ value, className, ...props }, ref) => {
+    const url = value.url.includes("://") ? value.url : new window.URL(value.url, window.location.href).toString();
+    let isGithub = url.startsWith(GITHUB_PREFIX);
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        ref,
+        variant: "default",
+        radius: "sm",
+        size: "sm",
+        tt: "none",
+        leftSection: value.title ? /* @__PURE__ */ jsx(Fragment, { children: value.title }) : null,
+        rightSection: /* @__PURE__ */ jsx(CopyButton, { value: url, timeout: 1500, children: ({ copy, copied }) => /* @__PURE__ */ jsx(
           ActionIcon,
           {
             className: css({
-              flex: "0"
+              opacity: copied ? 1 : 0.45,
+              transition: "fast",
+              _hover: {
+                opacity: 1
+              }
             }),
             tabIndex: -1,
-            size: isNormalSize ? 24 : 20,
-            variant: copied ? "light" : "subtle",
+            size: "20",
+            variant: copied ? "light" : "transparent",
             color: copied ? "teal" : "gray",
+            "data-active": copied,
             onClick: (e) => {
               e.stopPropagation();
               e.preventDefault();
               copy();
             },
-            children: copied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, { style: { width: "65%", opacity: 0.65 } })
+            children: copied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, { stroke: 2.5 })
           }
-        ),
-        /* @__PURE__ */ jsxs(Box, { className: titleBox, children: [
-          /* @__PURE__ */ jsx(
-            Text,
+        ) }),
+        ...props,
+        className: cx(className, "group"),
+        classNames: {
+          root: css({
+            flexWrap: "nowrap",
+            minHeight: 24,
+            maxWidth: 500,
+            userSelect: "all",
+            pr: "0",
+            _hover: {
+              backgroundColor: {
+                base: "mantine.colors.gray[1]",
+                _dark: "mantine.colors.dark[5]"
+              }
+            }
+          }),
+          section: css({
+            '&:is([data-position="left"])': {
+              color: "mantine.colors.dimmed",
+              userSelect: "none",
+              pointerEvents: "none",
+              _groupHover: {
+                color: "[inherit]",
+                opacity: 0.7
+              }
+            }
+          }),
+          label: css({
+            "& > a": {
+              color: "[inherit]",
+              cursor: "pointer",
+              transition: "fast",
+              opacity: {
+                base: 0.7,
+                _hover: 1
+              },
+              textDecoration: {
+                base: "none",
+                _hover: "underline"
+              }
+            }
+          })
+        },
+        children: /* @__PURE__ */ jsxs("a", { href: url, target: "_blank", children: [
+          isGithub && /* @__PURE__ */ jsx(
+            GithubIcon,
             {
-              component: "div",
-              fz: isNormalSize ? "xs" : 11,
-              truncate: true,
-              lh: isNormalSize ? 1.3 : 1.2,
-              fw: value.title ? 500 : 400,
-              children: value.title || url
+              height: "12",
+              width: "12",
+              style: { verticalAlign: "middle", marginRight: "4px" }
             }
           ),
-          value.title && /* @__PURE__ */ jsx(Text, { component: "div", fz: isNormalSize ? 10 : 9, c: "dimmed", lh: isNormalSize ? 1.2 : 1.1, truncate: true, children: url })
+          isGithub ? url.replace(GITHUB_PREFIX, "") : url
         ] })
-      ]
-    }
-  ) });
-}
+      }
+    );
+  }
+);
 
 export { Link };

package/dist/components/NavigationLink.d.ts

@@ -1,6 +1,6 @@
 import { NavLinkProps } from '@mantine/core';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface NavigationLinkProps extends NavLinkProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof NavLinkProps> {
+import { ComponentPropsWithoutRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface NavigationLinkProps extends Omit<NavLinkProps, 'classNames'>, Omit<ComponentPropsWithoutRef<'button'>, keyof NavLinkProps> {
     truncateLabel?: boolean;
 }
 export declare const NavigationLink: ForwardRefExoticComponent<NavigationLinkProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/SearchControl.css.js

@@ -3,7 +3,7 @@ import { css } from '@likec4/styles/css';
 const root = css({
   height: "30px",
   paddingLeft: "sm",
-  paddingRight: "4px",
+  paddingRight: "1",
   borderRadius: "sm",
   // TODO
   // color: fallbackVar('var(--search-color)', 'mantine.colors.placeholder)',
@@ -39,21 +39,22 @@ const placeholder = css({
   fontSize: "sm",
   // mantine.fontSizes.sm,
   fontWeight: 500,
-  paddingRight: "10px",
+  paddingRight: "2.5",
+  // 10px
   color: "mantine.colors.placeholder",
   flex: "1",
   sm: {
-    paddingRight: "30px"
+    paddingRight: "[30px]"
   },
   md: {
-    paddingRight: "50px"
+    paddingRight: "[50px]"
   }
 });
 const shortcut = css({
   fontSize: "11px",
   fontWeight: 600,
   lineHeight: 1,
-  padding: "4px 7px",
+  padding: "[4px 7px]",
   borderRadius: "sm",
   border: "1px solid",
   transition: "fast",

package/dist/context/DiagramEventHandlers.d.ts

@@ -1,15 +1,15 @@
-import { Any } from '@likec4/core/types';
+import { aux } from '@likec4/core/types';
 import { PropsWithChildren, RefObject } from 'react';
 import { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
 type RequiredOrNull<T> = {
     [P in keyof T]-?: NonNullable<T[P]> | null;
 };
-type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers<Any>> & {
-    handlersRef: RefObject<LikeC4DiagramEventHandlers<Any>>;
+export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandlers<aux.Any>> & {
+    handlersRef: RefObject<LikeC4DiagramEventHandlers<aux.Any>>;
 };
-export declare function DiagramEventHandlers<A extends Any>({ handlers, children, }: PropsWithChildren<{
+export declare function DiagramEventHandlers<A extends aux.Any>({ handlers, children, }: PropsWithChildren<{
     handlers: LikeC4DiagramEventHandlers<A>;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function useDiagramEventHandlers(): DiagramEventHandlersContextValue;
-export declare function useDiagramEventHandlersRef(): RefObject<LikeC4DiagramEventHandlers<Any>>;
+export declare function useDiagramEventHandlers(): DiagramEventHandlersContext;
+export declare function useDiagramEventHandlersRef<A extends aux.Any = aux.Any>(): RefObject<LikeC4DiagramEventHandlers<A>>;
 export {};

package/dist/context/DiagramEventHandlers.js

@@ -16,7 +16,7 @@ const HandlerNames = [
   "onChange",
   "onCanvasDblClick"
 ];
-const DiagramEventHandlersContext = createContext({
+const DiagramEventHandlersReactContext = createContext({
   ...mapToObj(HandlerNames, (name) => [name, null]),
   handlersRef: {
     current: {}
@@ -37,13 +37,10 @@ function DiagramEventHandlers({
     }),
     handlersRef
   }), [handlersRef, ...deps]);
-  return /* @__PURE__ */ jsx(DiagramEventHandlersContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, { value, children });
 }
 function useDiagramEventHandlers() {
-  return useContext(DiagramEventHandlersContext);
-}
-function useDiagramEventHandlersRef() {
-  return useContext(DiagramEventHandlersContext).handlersRef;
+  return useContext(DiagramEventHandlersReactContext);
 }
 
-export { DiagramEventHandlers, useDiagramEventHandlers, useDiagramEventHandlersRef };
+export { DiagramEventHandlers, useDiagramEventHandlers };

package/dist/globals.css.js

@@ -0,0 +1,3 @@
+const globalsCss = ".likec4-root{overflow:hidden;position:relative;padding:0;margin:0;width:100%;height:100%;border:0px solid transparent;container-name:likec4-root;container-type:size}.likec4-root .react-flow:is(.not-initialized){opacity:0}:where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon{width:75%;height:75%}.likec4-root :where(.react-flow__node,.react-flow__edge,.likec4-edge-label-container):has([data-likec4-dimmed]){opacity:.25}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge,.likec4-edge-label-container):has([data-likec4-dimmed]){filter:grayscale(85%) blur(3px)}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge,.likec4-edge-label-container):has([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}[data-mantine-color-scheme=dark] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>svg{mix-blend-mode:plus-lighter}[data-mantine-color-scheme=light] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>svg{mix-blend-mode:screen}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-stroke-width: 3;--xy-edge-stroke: var(--likec4-palette-relation-stroke);--xy-edge-stroke-selected: var(--likec4-palette-relation-stroke-selected);--xy-edge-label-color: var(--likec4-palette-relation-label);--xy-edge-label-background-color: var(--likec4-palette-relation-label-bg)}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container):is([data-likec4-hovered=true],[data-edge-active=true]){--xy-edge-stroke-width: 4;--xy-edge-stroke: var(--likec4-palette-relation-stroke-selected)}[data-mantine-color-scheme=dark] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)}[data-mantine-color-scheme=light] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-color: color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)}";
+
+export { globalsCss as default };

package/dist/hooks/useXYFlow.d.ts

@@ -3,7 +3,7 @@ import { Types } from '../likec4diagram/types';
 import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
 import { Dimmed } from '../base/types.Base';
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId, MarkdownOrString } from '@likec4/core';
 export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     id: string;
     source: string;
@@ -46,7 +46,7 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
         tail: RelationshipArrowType | undefined;
         labelBBox: BBox | null | undefined;
         navigateTo: ViewId<string> | null | undefined;
-        notes: string | undefined;
+        notes: MarkdownOrString | undefined;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
     };
@@ -96,7 +96,7 @@ export declare const useXYStoreApi: () => {
             tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: string | undefined;
+            notes: MarkdownOrString | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -143,7 +143,7 @@ export declare const useXYStoreApi: () => {
             tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: string | undefined;
+            notes: MarkdownOrString | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -189,7 +189,7 @@ export declare const useXYStoreApi: () => {
             tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: string | undefined;
+            notes: MarkdownOrString | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -235,7 +235,7 @@ export declare const useXYStoreApi: () => {
             tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: string | undefined;
+            notes: MarkdownOrString | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -281,7 +281,7 @@ export declare const useXYStoreApi: () => {
             tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: string | undefined;
+            notes: MarkdownOrString | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -327,7 +327,7 @@ export declare const useXYStoreApi: () => {
             tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: string | undefined;
+            notes: MarkdownOrString | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -374,7 +374,7 @@ export declare const useXYStoreApi: () => {
             tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: string | undefined;
+            notes: MarkdownOrString | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -420,7 +420,7 @@ export declare const useXYStoreApi: () => {
             tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: string | undefined;
+            notes: MarkdownOrString | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { IconRendererProvider } from './context/IconRenderer';
 export { LikeC4Diagram, type LikeC4DiagramProps, } from './LikeC4Diagram';
 export { Overlay, type OverlayProps, } from './overlays/overlay/Overlay';
 export { LikeC4ModelProvider, type LikeC4ModelProviderProps, } from './LikeC4ModelProvider';
+export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, } from './LikeC4ProjectsProvider';
 export * from './custom/hooks';
 export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, WhereOperator, } from './LikeC4Diagram.props';
 export { StaticLikeC4Diagram, type StaticLikeC4DiagramProps, } from './StaticLikeC4Diagram';

package/dist/index.js

@@ -3,6 +3,7 @@ export { IconRendererProvider } from './context/IconRenderer.js';
 export { LikeC4Diagram } from './LikeC4Diagram.js';
 export { Overlay } from './overlays/overlay/Overlay.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
+export { LikeC4ProjectsProvider } from './LikeC4ProjectsProvider.js';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
 export { useDiagramEventHandlers } from './context/DiagramEventHandlers.js';
 export { useEnabledFeatures } from './context/DiagramFeatures.js';

package/dist/likec4diagram/DiagramUI.js

@@ -2,6 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo } from 'react';
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
 import { useSearchActorRef } from '../hooks/useSearchActor.js';
+import { EnsureCurrentViewModel } from '../likec4model/LikeC4ModelContext.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { Search } from '../search/Search.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
@@ -22,7 +23,7 @@ const DiagramUI = memo(() => {
   const overlaysActorRef = useOverlaysActorRef();
   const searchActorRef = useSearchActorRef();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    enableControls === "next" ? /* @__PURE__ */ jsx(NavigationPanel, {}) : /* @__PURE__ */ jsx(Controls, {}),
+    enableControls === "next" ? /* @__PURE__ */ jsx(EnsureCurrentViewModel, { children: /* @__PURE__ */ jsx(NavigationPanel, {}) }) : /* @__PURE__ */ jsx(Controls, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
     enableControls !== "next" && /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/likec4diagram/custom/edges/NotePopover.css.js

@@ -2,8 +2,8 @@ import { css } from '@likec4/styles/css';
 
 const edgeNoteCloseButton = css({
   position: "absolute",
-  top: 1,
-  right: 1,
+  top: "[1px]",
+  right: "[1px]",
   zIndex: 9
 });
 const edgeNoteText = css({

package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts

@@ -1,4 +1,4 @@
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId, MarkdownOrString } from '@likec4/core';
 import { XYPosition } from '@xyflow/react';
 import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
@@ -45,7 +45,7 @@ export declare const RelationshipEdge: FunctionComponent<{
         tail: RelationshipArrowType | undefined;
         labelBBox: BBox | null | undefined;
         navigateTo: ViewId<string> | null | undefined;
-        notes: string | undefined;
+        notes: MarkdownOrString | undefined;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
     };

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -257,7 +257,7 @@ const RelationshipEdge = customEdge((props) => {
   if (!isControlPointDragging && !isPanning) {
     const notes = props.data.notes;
     if (notes && activeWalkthroughStep === props.id) {
-      edgeLabel = /* @__PURE__ */ jsx(NotePopover, { notes, children: edgeLabel });
+      edgeLabel = /* @__PURE__ */ jsx(NotePopover, { notes: notes.txt ?? notes.md, children: edgeLabel });
     } else if (enableRelationshipDetails) {
       edgeLabel = /* @__PURE__ */ jsx(
         RelationshipsDropdownMenu,

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.js

@@ -6,24 +6,24 @@ const menuDropdown = css({
   maxWidth: "min(90vw, 500px)"
 });
 const menuItemRelationship = css({
-  gap: 4
+  gap: "1"
 });
 const endpoint = css({
   display: "block",
   fontSize: "xxs",
   fontWeight: 500,
   whiteSpace: "nowrap",
-  padding: "2px 4px",
-  borderRadius: 2,
-  background: `likec4.palette.fill/30`,
+  padding: "[2px 4px]",
+  borderRadius: "[2px]",
+  background: `var(--likec4-palette-fill)/30`,
   lineHeight: "[1.11]",
   mixBlendMode: "hard-light",
   color: {
-    _light: `[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]`,
-    _dark: "likec4.palette.loContrast"
+    _light: `[color-mix(in srgb, var(--likec4-palette-stroke), {colors.likec4.mixColor} 60%)]`,
+    _dark: "var(--likec4-palette-loContrast)"
   }
   // _dark: {
-  //   background: `likec4.palette.fill/60`,
+  //   background: `var(--likec4-palette-fill)/60`,
   // },
 });
 const title = css({

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { nameFromFqn } from '@likec4/core';
-import { cx, css } from '@likec4/styles/css';
+import { cx } from '@likec4/styles/css';
 import { Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, MenuItem, Stack, Group, Text, TooltipGroup, Space, Tooltip as Tooltip$1 } from '@mantine/core';
 import { memo, useCallback, Fragment as Fragment$1, forwardRef } from 'react';
 import { pipe, map, filter, isTruthy, partition } from 'remeda';
@@ -155,9 +155,9 @@ const Relationship = forwardRef(({
   const links = r.links;
   return /* @__PURE__ */ jsxs(Stack, { ref, className: cx(menuItemRelationship, className), ...props, children: [
     /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
-      /* @__PURE__ */ jsx(Text, { component: "div", className: cx(css({ likec4Palette: sourceNode.color }), endpoint), children: sourceId }),
+      /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": sourceNode.color, className: endpoint, children: sourceId }),
       /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: "11px", opacity: 0.65 }),
-      /* @__PURE__ */ jsx(Text, { component: "div", className: cx(css({ likec4Palette: targetNode.color }), endpoint), children: targetId }),
+      /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": targetNode.color, className: endpoint, children: targetId }),
       (navigateTo || !!onOpenSource) && /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 100, children: [
         /* @__PURE__ */ jsx(Space, { w: "xs" }),
         navigateTo && /* @__PURE__ */ jsx(Tooltip, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -5,13 +5,13 @@ const controlPointsContainer = css({
   overflow: "visible",
   position: "absolute",
   pointerEvents: "none",
-  top: 0,
-  left: 0,
+  top: "0",
+  left: "0",
   mixBlendMode: "normal"
 });
 const controlPoint = css({
-  fill: `likec4.relation.stroke`,
-  stroke: `likec4.relation.stroke`,
+  fill: `var(--likec4-palette-relation-stroke)`,
+  stroke: `var(--likec4-palette-relation-stroke)`,
   fillOpacity: 0.75,
   strokeWidth: 1,
   cursor: "grab",

package/dist/likec4diagram/custom/index.d.ts

@@ -3,7 +3,7 @@ import { MemoExoticComponent, FunctionComponent, CSSProperties, ReactNode } from
 import { NodeProps } from '../../base';
 import { Position, XYPosition } from '@xyflow/system';
 import { EdgeData, Dimmed } from '../../base/types.Base';
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId, MarkdownOrString } from '@likec4/core';
 export declare const BuiltinNodes: {
     element: MemoExoticComponent<(props: NodeProps<Types.ElementNodeData, "element">) => import("react/jsx-runtime").JSX.Element>;
     deployment: MemoExoticComponent<(props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => import("react/jsx-runtime").JSX.Element>;
@@ -54,7 +54,7 @@ export declare const edgeTypes: {
             tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: string | undefined;
+            notes: MarkdownOrString | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };

package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.js

@@ -109,8 +109,8 @@ function BorderStyleOption({
       },
       styles: {
         label: {
-          paddingTop: 2,
-          paddingBottom: 2
+          paddingTop: "0.5",
+          paddingBottom: "0.5"
         }
       },
       data: [

package/dist/likec4diagram/ui/controls/styles.css.js

@@ -1,15 +1,15 @@
 import { css } from '@likec4/styles/css';
 
 const navigationButtons = css({
-  gap: "micro",
+  gap: "xxs",
   _empty: {
     display: "none"
   }
 });
 const panel = css({
-  top: "1rem",
-  left: "1rem",
-  margin: 0,
+  top: "md",
+  left: "md",
+  margin: "0",
   pointerEvents: "none",
   "& :where(button, .action-icon, [role='dialog'])": {
     pointerEvents: "all"
@@ -43,7 +43,7 @@ const autolayoutButton = css({
   flex: "1 1 40%",
   textAlign: "center",
   fontWeight: 500,
-  padding: "4px 6px",
+  padding: "[4px 6px]",
   fontSize: "11px",
   zIndex: 1
 });

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -5,8 +5,8 @@ import { useLocalStorage } from '@mantine/hooks';
 import { AnimatePresence, m } from 'motion/react';
 import { Link } from '../../../components/Link.js';
 import { useDiagramContext } from '../../../hooks/useDiagram.js';
+import { useOptionalCurrentViewModel } from '../../../likec4model/useCurrentViewModel.js';
 import { card, title, description } from './DiagramTitlePanel.css.js';
-import { useCurrentViewModel } from '../../../likec4model/useCurrentViewModel.js';
 import IconMenu from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu.js';
 import { MarkdownBlock } from '../../../base/primitives/MarkdownBlock.js';
 
@@ -20,15 +20,15 @@ function selector(context) {
   };
 }
 function DiagramTitlePanel() {
-  const view = useCurrentViewModel();
+  const view = useOptionalCurrentViewModel();
   const { isNotActiveWalkthrough } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-webview-collapsed",
     defaultValue: false
   });
-  const title$1 = view.title ?? "untitled";
+  const title$1 = view?.title ?? "untitled";
   const toggle = () => setCollapsed((v) => !v);
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: view && isNotActiveWalkthrough && /* @__PURE__ */ jsx(
     m.div,
     {
       initial: { opacity: 0.05, scale: 0.7 },