@likec4/diagram 1.4.0 → 1.6.0

package/dist/ui/options/EdgeOptions.d.ts

@@ -0,0 +1,19 @@
+export declare const themedColors: ({
+    key: "primary";
+    value: "#3b82f6";
+} | {
+    key: "secondary";
+    value: "#0284c7";
+} | {
+    key: "muted";
+    value: "#64748b";
+})[];
+export declare const colors: {
+    key: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "red" | "sky";
+    value: "#3b82f6" | "#0284c7" | "#64748b" | "#737373" | "#AC4D39" | "#428a4f" | "#A35829" | "#6366f1";
+}[];
+export type ThemeColorKey = typeof themedColors[0]['key'];
+export type ColorKey = typeof colors[0]['key'];
+export declare const EdgeOptions: import('react').NamedExoticComponent<{
+    selectedEdgeIds: string[];
+}>;

package/dist/ui/options/NodeOptions.d.ts

@@ -14,6 +14,6 @@ export declare const colors: {
 }[];
 export type ThemeColorKey = typeof themedColors[0]['key'];
 export type ColorKey = typeof colors[0]['key'];
-export declare function NodeOptions({ selectedNodeIds }: {
+export declare const NodeOptions: import('react').NamedExoticComponent<{
     selectedNodeIds: string[];
-}): import("react/jsx-runtime").JSX.Element | null;
+}>;

package/dist/xyflow/EdgeMarkers.d.ts

@@ -0,0 +1,11 @@
+import { SVGProps } from 'react';
+
+export declare const EdgeMarkers: {
+    Arrow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    OArrow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    Open: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    Diamond: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    ODiamond: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    Dot: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    ODot: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/xyflow/XYFlowEvents.d.ts

@@ -1,5 +1,8 @@
-import { XYFlowNode } from './types';
+import { ReactFlowProps } from '@xyflow/react';
+import { Simplify } from 'type-fest';
+import { XYFlowEdge, XYFlowNode } from './types';
 
+export type XYFlowEventHandlers = Simplify<Required<Pick<ReactFlowProps<XYFlowNode, XYFlowEdge>, 'onDoubleClick' | 'onPaneClick' | 'onNodeClick' | 'onNodeDoubleClick' | 'onEdgeClick' | 'onMoveEnd' | 'onNodeContextMenu' | 'onEdgeContextMenu' | 'onPaneContextMenu' | 'onNodeMouseEnter' | 'onNodeMouseLeave' | 'onEdgeMouseEnter' | 'onEdgeMouseLeave'>>>;
 export declare function useXYFlowEvents(): {
     onDoubleClick: (event: import('react').MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onPaneClick: (event: import('react').MouseEvent<Element, MouseEvent>) => void;
@@ -20,7 +23,7 @@ export declare function useXYFlowEvents(): {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;
@@ -51,7 +54,7 @@ export declare function useXYFlowEvents(): {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;
@@ -83,7 +86,7 @@ export declare function useXYFlowEvents(): {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;
@@ -112,7 +115,7 @@ export declare function useXYFlowEvents(): {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;

package/dist/xyflow/const.d.ts

@@ -1,6 +1,6 @@
 export declare const ZIndexes: {
-    readonly Compound: 1;
-    readonly Edge: 2;
-    readonly Element: 3;
+    readonly Compound: 2;
+    readonly Edge: 4;
+    readonly Element: 6;
 };
 export declare const MinZoom = 0.1;

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

@@ -1,4 +1,4 @@
-import { DiagramView } from '@likec4/core';
+import { DiagramView } from '@likec4/core/types';
 import { XYFlowData } from '../xyflow/types';
 
 export declare function diagramViewToXYFlowData(view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__' | 'manualLayout'>, opts: {

package/dist/xyflow/edges/RelationshipEdge.d.ts

@@ -1,4 +1,5 @@
 import { EdgeProps } from '@xyflow/react';
+import { RelationshipData } from '../types';
 
 export declare const RelationshipEdge: import('react').NamedExoticComponent<EdgeProps<{
     source: string;
@@ -15,7 +16,7 @@ export declare const RelationshipEdge: import('react').NamedExoticComponent<Edge
     zIndex?: number;
     ariaLabel?: string;
     interactionWidth?: number;
-    label?: import('react').ReactNode;
+    label?: string | import('react').ReactNode;
     labelStyle?: import('react').CSSProperties;
     labelShowBg?: boolean;
     labelBgStyle?: import('react').CSSProperties;
@@ -25,7 +26,7 @@ export declare const RelationshipEdge: import('react').NamedExoticComponent<Edge
     className?: string;
     reconnectable?: boolean | import('@xyflow/react').HandleType;
     focusable?: boolean;
-    data: import('../types').RelationshipData;
+    data: RelationshipData;
     readonly id: string;
     readonly type: "relationship";
 }>>;

package/dist/xyflow/edges/edges.css.d.ts

@@ -3,6 +3,7 @@ export declare const dimmed: string;
 export declare const edgePathBg: string;
 export declare const markerContext: string;
 export declare const controlPoint: string;
+export declare const controlDragging: string;
 export declare const cssEdgePath: string;
 export declare const varLabelX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const varLabelY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/xyflow/edges/utils.d.ts

@@ -1,6 +1,7 @@
 import { Position, XYPosition } from '@xyflow/react';
 import { InternalXYFlowNode } from '../types';
 
+export declare function getNodeCenter(node: InternalXYFlowNode): XYPosition;
 export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalXYFlowNode, { x: x1, y: y1 }: XYPosition): {
     x: number;
     y: number;

package/dist/xyflow/hooks/index.d.ts

@@ -1,2 +1,3 @@
-export * from './useLayoutConstraints';
-export * from './useXYFlow';
+export { useLayoutConstraints } from './useLayoutConstraints';
+export { useXYFlow, useXYNodesData, useXYStore, useXYStoreApi } from './useXYFlow';
+export type * from './useXYFlow';

package/dist/xyflow/hooks/useXYFlow.d.ts

@@ -1,4 +1,4 @@
-import { XYFlowNode, XYFlowState } from '../types';
+import { XYFlowEdge, XYFlowNode, XYFlowState } from '../types';
 
 export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<XYFlowNode, {
     source: string;
@@ -15,7 +15,7 @@ export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<
     zIndex?: number;
     ariaLabel?: string;
     interactionWidth?: number;
-    label?: import('react').ReactNode;
+    label?: string | import('react').ReactNode;
     labelStyle?: import('react').CSSProperties;
     labelShowBg?: boolean;
     labelBgStyle?: import('react').CSSProperties;
@@ -30,8 +30,8 @@ export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<
     readonly type: "relationship";
 }>;
 export declare const useXYNodesData: {
-    (nodeId: string): Pick<XYFlowNode, "id" | "data" | "type"> | null;
-    (nodeIds: string[]): Pick<XYFlowNode, "id" | "data" | "type">[];
+    (nodeId: string): Pick<XYFlowNode, "id" | "type" | "data"> | null;
+    (nodeIds: string[]): Pick<XYFlowNode, "id" | "type" | "data">[];
 };
 export declare function useXYStore<StateSlice = unknown>(selector: (state: XYFlowState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
 export declare const useXYStoreApi: () => {
@@ -50,7 +50,7 @@ export declare const useXYStoreApi: () => {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;
@@ -79,7 +79,7 @@ export declare const useXYStoreApi: () => {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;
@@ -107,7 +107,7 @@ export declare const useXYStoreApi: () => {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;
@@ -135,7 +135,7 @@ export declare const useXYStoreApi: () => {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;
@@ -163,7 +163,7 @@ export declare const useXYStoreApi: () => {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;
@@ -191,7 +191,7 @@ export declare const useXYStoreApi: () => {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;
@@ -220,7 +220,7 @@ export declare const useXYStoreApi: () => {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;
@@ -248,7 +248,7 @@ export declare const useXYStoreApi: () => {
         zIndex?: number;
         ariaLabel?: string;
         interactionWidth?: number;
-        label?: import('react').ReactNode;
+        label?: string | import('react').ReactNode;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
         labelBgStyle?: import('react').CSSProperties;
@@ -264,3 +264,4 @@ export declare const useXYStoreApi: () => {
     }>) => void) => () => void;
 };
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>;
+export declare function useXYEdgesData(edgeIds: string[]): Pick<XYFlowEdge, 'id' | 'data'>[];

package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts

@@ -1,4 +1,5 @@
 export declare const container: string;
+export declare const nodeHandlerInCenter: string;
 export declare const dimmed: string;
 export declare const varOpacity: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const varBorderTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/xyflow/nodes/element/ElementShapeSvg.d.ts

@@ -1,5 +1,10 @@
 import { ElementShape } from '@likec4/core';
 
+export declare function cylinderSVGPath(diameter: number, height: number, tilt?: number): {
+    path: string;
+    ry: number;
+    rx: number;
+};
 type ElementShapeSvgProps = {
     shape: ElementShape;
     w: number;

package/dist/xyflow/nodes/element/element.css.d.ts

@@ -1,16 +1,19 @@
 export declare const stokeFillMix: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const container: string;
+export declare const handleCenter: string;
 export declare const containerAnimated: string;
 export declare const dimmed: string;
 export declare const indicator: string;
 export declare const fillElementFill: string;
 export declare const fillElementStroke: string;
 export declare const fillMixStroke: string;
+export declare const hasIcon: string;
 export declare const title: string;
 export declare const description: string;
 export declare const technology: string;
-export declare const element: string;
-export declare const iconMaxH: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const elementDataContainer: string;
+export declare const elementTextData: string;
 export declare const elementIcon: string;
+export declare const cssShapeSvgMultiple: string;
 export declare const cssShapeSvg: string;
 export declare const cssNavigateBtn: string;

package/dist/xyflow/types.d.ts

@@ -1,4 +1,4 @@
-import { BBox, DiagramEdge, DiagramNode, Fqn, Point, XYPosition } from '@likec4/core';
+import { BBox, DiagramEdge, DiagramNode, Fqn, XYPosition } from '@likec4/core';
 import { Edge, EdgeMouseHandler, InternalNode, Node, NodeMouseHandler, OnMoveEnd, OnMoveStart, ReactFlowInstance, ReactFlowState } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { SetReadonly, SetRequired } from 'type-fest';
@@ -26,8 +26,6 @@ export declare namespace XYFlowNode {
 export type RelationshipData = {
     edge: DiagramEdge;
     controlPoints: XYPosition[] | null;
-    headPoint: Point | null;
-    tailPoint: Point | null;
     type: 'bezier' | 'poly';
     stepNum: number | null;
     label: null | {
@@ -39,35 +37,7 @@ export type RelationshipEdge = TypedXYFlowEdge<RelationshipData, 'relationship'>
 export type XYFlowEdge = RelationshipEdge;
 export declare namespace XYFlowEdge {
     type Data = RelationshipData;
-    const isRelationship: (e: Edge) => e is {
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        selected?: boolean;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: import("react").ReactNode;
-        labelStyle?: import("react").CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: import("react").CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: import("react").CSSProperties;
-        className?: string;
-        reconnectable?: boolean | import("@xyflow/react").HandleType;
-        focusable?: boolean;
-        data: RelationshipData;
-        readonly id: string;
-        readonly type: "relationship";
-    };
+    const isRelationship: (e: Edge) => e is RelationshipEdge;
 }
 export type XYFlowInstance = ReactFlowInstance<XYFlowNode, XYFlowEdge>;
 export type XYFlowState = ReactFlowState<XYFlowNode, XYFlowEdge>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -40,7 +40,7 @@
       "./style.css": "./dist/style.css"
     }
   },
-  "packageManager": "yarn@4.3.0",
+  "packageManager": "yarn@4.3.1",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "prepack": "vite build --mode production",
@@ -48,50 +48,50 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.4.0",
+    "@likec4/core": "1.6.0",
     "@react-hookz/web": "^24.0.4",
-    "@tabler/icons-react": "^3.7.0",
+    "@tabler/icons-react": "^3.11.0",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.2.12",
-    "remeda": "^1.61.0",
+    "framer-motion": "^11.3.8",
+    "remeda": "^2.3.0",
     "zustand": "^4.5.4"
   },
   "peerDependencies": {
-    "@mantine/core": "7.10.2",
-    "@mantine/hooks": "7.10.2",
+    "@mantine/core": "^7.11.2",
+    "@mantine/hooks": "^7.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.4.0",
+    "@likec4/tsconfig": "1.6.0",
     "@lume/kiwi": "^0.4.3",
-    "@mantine/core": "7.10.2",
-    "@mantine/hooks": "7.10.2",
-    "@mantine/vanilla-extract": "7.10.2",
+    "@mantine/core": "7.11.2",
+    "@mantine/hooks": "7.11.2",
+    "@mantine/vanilla-extract": "7.11.2",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/bezier-js": "^4.1.3",
-    "@types/d3-shape": "^3",
+    "@types/d3-shape": "^3.1.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.8",
     "@vitejs/plugin-react": "^4.3.1",
-    "@xyflow/react": "12.0.0-next.24",
-    "@xyflow/system": "0.0.30",
+    "@xyflow/react": "12.0.3",
+    "@xyflow/system": "0.0.37",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
-    "execa": "^9.1.0",
+    "execa": "^9.3.0",
     "khroma": "^2.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tilg": "^0.1.1",
-    "type-fest": "^4.18.2",
-    "typescript": "^5.4.5",
-    "vite": "5.3.2",
+    "type-fest": "^4.21.0",
+    "typescript": "^5.5.3",
+    "vite": "5.3.4",
     "vite-plugin-dts": "^3.9.1"
   }
 }

package/src/LikeC4Diagram.css.ts

@@ -1,14 +1,6 @@
 import { globalStyle, style } from '@vanilla-extract/css'
 import { vars, xyvars } from './theme.css'
 
-export const keepAspectRatioContainer = style({
-  overflow: 'hidden',
-  position: 'relative',
-  width: '100%',
-  height: '100%',
-  padding: 0
-})
-
 export const cssReactFlow = style({
   '@supports': {
     // https://wojtek.im/journal/targeting-safari-with-css-media-query

package/src/LikeC4Diagram.props.ts

@@ -6,17 +6,29 @@ import type {
   EdgeId,
   ElementShape,
   Fqn,
+  IconUrl,
   NonEmptyArray,
   ThemeColor,
   ViewID
 } from '@likec4/core'
 import type { XYPosition } from '@xyflow/system'
-import type { MouseEvent as ReactMouseEvent } from 'react'
-import type { SetRequired, Simplify } from 'type-fest'
+import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
-import type { XYBackground, XYBackgroundProps } from './xyflow/XYFlowBackground'
+import type { XYBackground } from './xyflow/XYFlowBackground'
 
-export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>
+export type DiagramNodeWithNavigate = Omit<DiagramNode, 'navigateTo'> & {
+  navigateTo: ViewID
+}
+
+type ElementIconNodeProps = {
+  id: string
+  title: string
+  icon?: string | undefined
+}
+
+export type ElementIconRenderer = (props: {
+  node: ElementIconNodeProps
+}) => ReactNode
 
 export type OnNavigateTo = {
   (
@@ -36,7 +48,7 @@ export type OnNodeClick = (
 ) => void
 export type OnEdgeClick = (
   event: {
-    relation: DiagramEdge
+    edge: DiagramEdge
     xyedge: XYFlowEdge
     event: ReactMouseEvent
   }
@@ -177,6 +189,12 @@ export interface LikeC4DiagramProperties {
    * @default false
    */
   experimentalEdgeEditing?: boolean | undefined
+
+  /**
+   * Render custom icon for a node
+   * By default, if icon is http:// or https://, it will be rendered as an image
+   */
+  renderIcon?: ElementIconRenderer | undefined
 }
 
 export interface LikeC4DiagramEventHandlers {

package/src/LikeC4Diagram.tsx

@@ -7,7 +7,6 @@ import { domAnimation, LazyMotion } from 'framer-motion'
 import { memo, useEffect, useRef, useState } from 'react'
 import useTilg from 'tilg'
 import { rootClassName } from './globals.css'
-import { KeepAspectRatioContainer } from './KeepAspectRatioContainer'
 import { cssDisablePan, cssNoControls, cssReactFlow, cssTransparentBg } from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { EnsureMantine } from './mantine/EnsureMantine'
@@ -50,7 +49,8 @@ export function LikeC4Diagram({
   onEdgeContextMenu,
   onNavigateTo,
   onNodeClick,
-  onNodeContextMenu
+  onNodeContextMenu,
+  renderIcon
 }: LikeC4DiagramProps) {
   DEV && useTilg()
   const initialRef = useRef<{
@@ -71,6 +71,7 @@ export function LikeC4Diagram({
       initialHeight: initialHeight ?? view.height
     }
   }
+
   return (
     <EnsureMantine>
       <XYFlowProvider
@@ -79,6 +80,8 @@ export function LikeC4Diagram({
       >
         <DiagramContextProvider
           view={view}
+          keepAspectRatio={keepAspectRatio}
+          className={clsx(rootClassName, className)}
           readonly={readonly}
           pannable={pannable}
           zoomable={zoomable}
@@ -88,6 +91,7 @@ export function LikeC4Diagram({
           nodesDraggable={nodesDraggable}
           nodesSelectable={nodesSelectable}
           experimentalEdgeEditing={experimentalEdgeEditing}
+          renderIcon={renderIcon ?? null}
           onCanvasClick={onCanvasClick}
           onCanvasContextMenu={onCanvasContextMenu}
           onEdgeClick={onEdgeClick}
@@ -99,25 +103,18 @@ export function LikeC4Diagram({
           onCanvasDblClick={onCanvasDblClick}
         >
           <LazyMotion features={domAnimation} strict>
-            <KeepAspectRatioContainer
-              className={clsx(rootClassName, className)}
-              enabled={keepAspectRatio}
-              width={view.width}
-              height={view.height}
-            >
-              <LikeC4DiagramInnerMemo
-                defaultNodes={initialRef.current.defaultNodes}
-                defaultEdges={initialRef.current.defaultEdges}
-                fitView={fitView}
-                zoomable={zoomable}
-                background={background}
-                controls={controls}
-                pannable={pannable}
-                showDiagramTitle={showDiagramTitle}
-                showNavigationButtons={showNavigationButtons}
-                enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
-              />
-            </KeepAspectRatioContainer>
+            <LikeC4DiagramInnerMemo
+              defaultNodes={initialRef.current.defaultNodes}
+              defaultEdges={initialRef.current.defaultEdges}
+              fitView={fitView}
+              zoomable={zoomable}
+              background={background}
+              controls={controls}
+              pannable={pannable}
+              showDiagramTitle={showDiagramTitle}
+              showNavigationButtons={showNavigationButtons}
+              enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
+            />
           </LazyMotion>
         </DiagramContextProvider>
       </XYFlowProvider>

package/src/StaticLikeC4Diagram.tsx

@@ -11,6 +11,7 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'background'
   | 'initialWidth'
   | 'initialHeight'
+  | 'renderIcon'
 >
 
 export function StaticLikeC4Diagram({

package/src/globals.css.ts

@@ -8,6 +8,13 @@ import { vars } from './theme.css'
 export const rootClassName = 'likec4-diagram-root'
 
 globalStyle(`.${rootClassName}`, {
+  overflow: 'hidden',
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  margin: 0,
+  boxSizing: 'border-box',
   WebkitFontSmoothing: mantine.webkitFontSmoothing,
   MozOsxFontSmoothing: mantine.mozFontSmoothing
 })
@@ -21,7 +28,7 @@ createGlobalTheme(`.${rootClassName}`, {
     background: {
       color: mantine.colors.body,
       pattern: {
-        color: mantine.colors.dimmed
+        color: mantine.colors.dark[3]
       }
     }
   },
@@ -74,13 +81,13 @@ createGlobalTheme(`:where([data-mantine-color-scheme='light']) .${rootClassName}
   likec4: {
     background: {
       pattern: {
-        color: mantine.colors.dark[3]
+        color: mantine.colors.gray[6]
       }
     }
   }
 })
 
-for (const color of keys.strict(defaultTheme.elements)) {
+for (const color of keys(defaultTheme.elements)) {
   createGlobalTheme(`:where([data-likec4-color='${color}'])`, {
     element: {
       fill: vars.element.fill,

package/src/index.ts

@@ -1,7 +1,7 @@
 export { LikeC4Diagram } from './LikeC4Diagram'
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 
-export * from './hooks'
+export { useSetState, useUpdateEffect } from './hooks'
 export type * from './LikeC4Diagram'
 export type * from './LikeC4Diagram.props'
 export type * from './StaticLikeC4Diagram'

package/src/mantine.css.ts

@@ -1,4 +1,4 @@
 import { themeToVars } from '@mantine/vanilla-extract'
-import { theme } from './mantine/theme'
 
-export const mantine = themeToVars(theme)
+// we need only variables names
+export const mantine = themeToVars({})