@likec4/diagram 1.34.2 → 1.36.0

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/useDiagram.d.ts

@@ -5,7 +5,7 @@ import { FeatureName } from '../context/DiagramFeatures';
 import { OpenSourceParams } from '../LikeC4Diagram.props';
 import { Types } from '../likec4diagram/types';
 import { AlignmentMode } from '../state/aligners';
-import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext, SyncLayoutActorSnapshot } from '../state/types';
+import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext } from '../state/types';
 import { useDiagramActorRef } from './safeContext';
 export { useDiagramActorRef };
 export interface DiagramApi {
@@ -95,7 +95,6 @@ export interface DiagramApi {
  */
 export declare function useDiagram(): DiagramApi;
 export declare function useDiagramActorSnapshot<T = unknown>(selector: (state: DiagramActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
-export declare function useDiagramSyncLayoutState<T = unknown>(selector: (state: SyncLayoutActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 /**
  * Read diagram context
  */

package/dist/hooks/useDiagram.js

@@ -122,14 +122,10 @@ function useDiagramActorSnapshot(selector, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
   return useSelector(actorRef, useCallbackRef(selector), compare);
 }
-function useDiagramSyncLayoutState(selector, compare = shallowEqual) {
-  const syncLayoutActorRef = useDiagramActorSnapshot((s) => s.context.syncLayoutActorRef);
-  return useSelector(syncLayoutActorRef, useCallbackRef(selector), compare);
-}
 function useDiagramContext(selector, compare = shallowEqual, deps) {
   const actorRef = useDiagramActorRef();
   const select = useCallback((s) => selector(s.context), deps ?? []);
   return useSelector(actorRef, select, compare);
 }
 
-export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useDiagramSyncLayoutState };
+export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext };

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';
@@ -10,6 +11,7 @@ export { useCurrentViewId } from './hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext } from './hooks/useDiagram.js';
 export { useDiagramActorRef } from './hooks/safeContext.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './hooks/useXYFlow.js';
+export { useCurrentViewModel } from './likec4model/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './likec4model/useLikeC4Model.js';
 export { useMantinePortalProps } from './hooks/useMantinePortalProps.js';
 export { useSetState } from './hooks/useSetState.js';

package/dist/likec4diagram/DiagramUI.js

@@ -5,13 +5,15 @@ import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { Search } from '../search/Search.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
+import { NavigationPanel } from '../navigationpanel/NavigationPanel.js';
 import { Controls } from './ui/controls/Controls.js';
-import { DiagramTitlePanel } from './ui/diagram-title/DiagramTitlePanel.js';
 import { NotationPanel } from './ui/notation/NotationPanel.js';
+import { DiagramTitlePanel } from './ui/diagram-title/DiagramTitlePanel.js';
 import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough.js';
 
 const DiagramUI = memo(() => {
   const {
+    enableControls,
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough,
@@ -20,11 +22,13 @@ const DiagramUI = memo(() => {
   const overlaysActorRef = useOverlaysActorRef();
   const searchActorRef = useSearchActorRef();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Controls, {}),
+    enableControls === "next" ? /* @__PURE__ */ jsx(NavigationPanel, {}) : /* @__PURE__ */ jsx(Controls, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
-    enableViewTitle && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
-    enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    enableControls !== "next" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      enableViewTitle && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
+      enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {})
+    ] }),
     enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef })
   ] });
 });

package/dist/likec4diagram/DiagramXYFlow.js

@@ -30,7 +30,7 @@ const selectXYProps = (ctx) => ({
     }
   }
 });
-const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
+const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.fitViewPadding, b.fitViewPadding) && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
 function LikeC4DiagramXYFlow({
   background = "dots",
   nodesDraggable = false,

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';
@@ -10,12 +10,12 @@ import { findDiagramNode, findDiagramEdge } from '../../../state/utils.js';
 import { menuDropdown, endpoint, title, menuItemRelationship } from './RelationshipsDropdownMenu.css.js';
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconInfoCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconInfoCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 import { useEnabledFeatures, IfEnabled } from '../../../context/DiagramFeatures.js';
 import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
-import IconArrowRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconArrowRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const stopPropagation = (e) => e.stopPropagation();
 const Tooltip = Tooltip$1.withProps({
@@ -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/ElementActions.js

@@ -3,8 +3,8 @@ import { hasAtLeast } from '@likec4/core';
 import { useMemo } from 'react';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
 
 const ElementActions = ({

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/custom/nodes/toolbar/ElementToolbar.js

@@ -6,8 +6,8 @@ import { stopPropagation } from '../../../../utils/xyflow.js';
 import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
-import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.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';
 
 function ElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();

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

@@ -6,8 +6,8 @@ import { useState } from 'react';
 import { keys } from 'remeda';
 import { useDiagram } from '../../../../hooks/useDiagram.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
-import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 
 const {
   primary,

package/dist/likec4diagram/ui/controls/ChangeAutoLayoutButton.js

@@ -7,7 +7,7 @@ import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
 import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.css.js';
 import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
-import IconLayoutDashboard from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
+import IconLayoutDashboard from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
 
 const selector = (state) => ({
   viewId: state.view.id,

package/dist/likec4diagram/ui/controls/Controls.js

@@ -1,11 +1,12 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { ActionIconGroup, Group, Stack, Box, Badge, Loader } from '@mantine/core';
+import { hstack } from '@likec4/styles/patterns';
+import { ActionIconGroup, Stack, Group, Box } from '@mantine/core';
 import { m, LayoutGroup } from 'motion/react';
 import { memo } from 'react';
 import { SearchControl } from '../../../components/SearchControl.js';
 import { useControlsCustomLayout } from '../../../context/ControlsCustomLayout.js';
-import { useDiagramContext, useDiagram, useDiagramSyncLayoutState } from '../../../hooks/useDiagram.js';
+import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton.js';
 import { LayoutDriftNotification } from './LayoutDriftNotification.js';
@@ -16,9 +17,9 @@ import { ToggleReadonly } from './ToggleReadonly.js';
 import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconFocusCentered from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
-import IconMenu2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconFocusCentered from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
+import IconMenu2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js';
 import { stopPropagation } from '../../../utils/xyflow.js';
 
 const ControlsDefaultLayout = ({
@@ -27,9 +28,8 @@ const ControlsDefaultLayout = ({
   search,
   actionsGroup
 }) => /* @__PURE__ */ jsxs(
-  Group,
+  m.div,
   {
-    component: m.div,
     initial: {
       opacity: 0.05,
       translateX: -30,
@@ -45,13 +45,15 @@ const ControlsDefaultLayout = ({
       translateX: -30,
       translateY: -10
     },
-    align: "flex-start",
     className: cx(
+      hstack({
+        gap: "sm",
+        alignItems: "flex-start"
+      }),
       "react-flow__panel",
       panel,
       "likec4-top-left-panel"
     ),
-    gap: "xs",
     onClick: stopPropagation,
     children: [
       /* @__PURE__ */ jsxs(Stack, { align: "flex-start", gap: "xs", children: [
@@ -116,7 +118,6 @@ const Controls = memo(() => {
           }
         }
       ),
-      syncInProgressBadge: /* @__PURE__ */ jsx(SyncLayoutBadge, {}),
       actionsGroup: /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
         enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
           ActionIcon,
@@ -149,10 +150,5 @@ const Controls = memo(() => {
     }
   ) });
 });
-const SyncLayoutBadge = () => {
-  const isPending = useDiagramSyncLayoutState((s) => s.hasTag("pending"));
-  if (!isPending) return null;
-  return /* @__PURE__ */ jsx(Badge, { color: "pink", radius: "xs", size: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(Loader, { color: "orange", size: 8 }), children: "Pending..." });
-};
 
 export { Controls };

package/dist/likec4diagram/ui/controls/LayoutDriftNotification.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { HoverCard, HoverCardTarget, HoverCardDropdown, Notification, Text, Code } from '@mantine/core';
 import { css } from '@likec4/styles/css';
 import { ActionIcon } from './_shared.js';
-import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
 
 const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
   HoverCard,

package/dist/likec4diagram/ui/controls/ManualLayoutToolsButton.js

@@ -2,15 +2,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover, PopoverTarget, PopoverDropdown, Group, ActionIconGroup } from '@mantine/core';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
-import IconLayoutCollage from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
-import IconLayoutBoardSplit from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
-import IconLayoutAlignLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
-import IconLayoutAlignCenter from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
-import IconLayoutAlignRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
-import IconLayoutAlignTop from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
-import IconLayoutAlignMiddle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
-import IconLayoutAlignBottom from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
-import IconRouteOff from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
+import IconLayoutCollage from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
+import IconLayoutBoardSplit from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
+import IconLayoutAlignLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
+import IconLayoutAlignCenter from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
+import IconLayoutAlignRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
+import IconLayoutAlignTop from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
+import IconLayoutAlignMiddle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
+import IconLayoutAlignBottom from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
+import IconRouteOff from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
 
 const Action = ({
   label,

package/dist/likec4diagram/ui/controls/NavigationButtons.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { AnimatePresence, m } from 'motion/react';
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
 import { ActionIcon } from './_shared.js';
-import IconChevronLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const NavigationButtons = () => {
   const diagram = useDiagram();
@@ -18,6 +18,7 @@ const NavigationButtons = () => {
     hasStepBack && /* @__PURE__ */ jsx(
       ActionIcon,
       {
+        variant: "subtle",
         component: m.button,
         onClick: (e) => {
           e.stopPropagation();
@@ -37,6 +38,7 @@ const NavigationButtons = () => {
     hasStepForward && /* @__PURE__ */ jsx(
       ActionIcon,
       {
+        variant: "subtle",
         component: m.button,
         layout: true,
         initial: { opacity: 0.05, transform: "translateX(10px)" },

package/dist/likec4diagram/ui/controls/ToggleReadonly.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
-import IconLock from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
-import IconLockOpen2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+import IconLock from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
+import IconLockOpen2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
 
 const selector = (state) => ({
   visible: state.features.enableReadOnly !== true,

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
 });