@likec4/diagram 1.1.1 → 1.2.0

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

@@ -3,31 +3,31 @@ import { XYFlowNode, XYFlowState } from '../types';
 export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<XYFlowNode, {
     source: string;
     target: string;
-    style?: import("react").CSSProperties;
-    id: string;
-    zIndex?: number;
-    markerEnd?: import("@xyflow/react").EdgeMarkerType;
-    markerStart?: import("@xyflow/react").EdgeMarkerType;
-    hidden?: boolean;
-    className?: string;
-    label?: import("react").ReactNode;
-    selected?: boolean;
-    selectable?: boolean;
-    deletable?: boolean;
-    ariaLabel?: string;
-    focusable?: boolean;
     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;
     updatable?: import("@xyflow/react").EdgeUpdatable;
+    focusable?: boolean;
     data: import("../types").RelationshipData;
-    type: "relationship";
+    readonly id: string;
+    readonly type: "relationship";
 }>;
 export declare const useXYNodesData: {
     (nodeId: string): Pick<XYFlowNode, "id" | "data" | "type"> | null;
@@ -38,229 +38,229 @@ export declare const useXYStoreApi: () => {
     getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
         source: string;
         target: string;
-        style?: import("react").CSSProperties;
-        id: string;
-        zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
-        hidden?: boolean;
-        className?: string;
-        label?: import("react").ReactNode;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        ariaLabel?: string;
-        focusable?: boolean;
         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;
         updatable?: import("@xyflow/react").EdgeUpdatable;
+        focusable?: boolean;
         data: import("../types").RelationshipData;
-        type: "relationship";
+        readonly id: string;
+        readonly type: "relationship";
     }>;
     setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
         source: string;
         target: string;
-        style?: import("react").CSSProperties;
-        id: string;
-        zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
-        hidden?: boolean;
-        className?: string;
-        label?: import("react").ReactNode;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        ariaLabel?: string;
-        focusable?: boolean;
         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;
         updatable?: import("@xyflow/react").EdgeUpdatable;
+        focusable?: boolean;
         data: import("../types").RelationshipData;
-        type: "relationship";
+        readonly id: string;
+        readonly type: "relationship";
     }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
         source: string;
         target: string;
-        style?: import("react").CSSProperties;
-        id: string;
-        zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
-        hidden?: boolean;
-        className?: string;
-        label?: import("react").ReactNode;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        ariaLabel?: string;
-        focusable?: boolean;
         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;
         updatable?: import("@xyflow/react").EdgeUpdatable;
+        focusable?: boolean;
         data: import("../types").RelationshipData;
-        type: "relationship";
+        readonly id: string;
+        readonly type: "relationship";
     }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
         source: string;
         target: string;
-        style?: import("react").CSSProperties;
-        id: string;
-        zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
-        hidden?: boolean;
-        className?: string;
-        label?: import("react").ReactNode;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        ariaLabel?: string;
-        focusable?: boolean;
         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;
         updatable?: import("@xyflow/react").EdgeUpdatable;
+        focusable?: boolean;
         data: import("../types").RelationshipData;
-        type: "relationship";
+        readonly id: string;
+        readonly type: "relationship";
     }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
         source: string;
         target: string;
-        style?: import("react").CSSProperties;
-        id: string;
-        zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
-        hidden?: boolean;
-        className?: string;
-        label?: import("react").ReactNode;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        ariaLabel?: string;
-        focusable?: boolean;
         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;
         updatable?: import("@xyflow/react").EdgeUpdatable;
+        focusable?: boolean;
         data: import("../types").RelationshipData;
-        type: "relationship";
+        readonly id: string;
+        readonly type: "relationship";
     }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
         source: string;
         target: string;
-        style?: import("react").CSSProperties;
-        id: string;
-        zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
-        hidden?: boolean;
-        className?: string;
-        label?: import("react").ReactNode;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        ariaLabel?: string;
-        focusable?: boolean;
         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;
         updatable?: import("@xyflow/react").EdgeUpdatable;
+        focusable?: boolean;
         data: import("../types").RelationshipData;
-        type: "relationship";
+        readonly id: string;
+        readonly type: "relationship";
     }>>), replace?: boolean | undefined) => void;
     subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
         source: string;
         target: string;
-        style?: import("react").CSSProperties;
-        id: string;
-        zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
-        hidden?: boolean;
-        className?: string;
-        label?: import("react").ReactNode;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        ariaLabel?: string;
-        focusable?: boolean;
         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;
         updatable?: import("@xyflow/react").EdgeUpdatable;
+        focusable?: boolean;
         data: import("../types").RelationshipData;
-        type: "relationship";
+        readonly id: string;
+        readonly type: "relationship";
     }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
         source: string;
         target: string;
-        style?: import("react").CSSProperties;
-        id: string;
-        zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
-        hidden?: boolean;
-        className?: string;
-        label?: import("react").ReactNode;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        ariaLabel?: string;
-        focusable?: boolean;
         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;
         updatable?: import("@xyflow/react").EdgeUpdatable;
+        focusable?: boolean;
         data: import("../types").RelationshipData;
-        type: "relationship";
+        readonly id: string;
+        readonly type: "relationship";
     }>) => void) => () => void;
 };
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>;

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

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

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

@@ -6,5 +6,5 @@ type ElementIconProps = {
     paddingX?: number | undefined;
     paddingY?: number | undefined;
 };
-export declare function ElementIcon({ node, paddingY }: ElementIconProps): JSX.Element | null;
+export declare function ElementIcon({ node, paddingY }: ElementIconProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -3,5 +3,5 @@ import { XYFlowNode } from '../../types';
 type ElementLinkProps = {
     element: XYFlowNode['data']['element'];
 };
-export declare function ElementLink({ element }: ElementLinkProps): JSX.Element;
+export declare function ElementLink({ element }: ElementLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,5 +2,5 @@ import { ElementXYFlowNode } from '../../types';
 import { NodeProps } from '@xyflow/react';
 
 type ElementNodeProps = NodeProps<ElementXYFlowNode>;
-export declare function ElementNode({ id, data: { element }, dragging, selected, width, height }: ElementNodeProps): JSX.Element;
+export declare function ElementNode({ id, data: { element }, dragging, selected, width, height }: ElementNodeProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,9 +5,9 @@ type ElementShapeSvgProps = {
     w: number;
     h: number;
 };
-export declare function ElementShapeSvg({ shape, w, h }: ElementShapeSvgProps): JSX.Element;
+export declare function ElementShapeSvg({ shape, w, h }: ElementShapeSvgProps): import("react/jsx-runtime").JSX.Element;
 /**
  * When element is selected, this component is used to render the indicator
  */
-export declare function SelectedIndicator({ shape, w, h }: ElementShapeSvgProps): JSX.Element;
+export declare function SelectedIndicator({ shape, w, h }: ElementShapeSvgProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 export declare const stokeFillMix: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const container: string;
+export declare const dimmed: string;
 export declare const indicator: string;
 export declare const fillElementFill: string;
 export declare const fillElementStroke: string;
@@ -7,7 +8,7 @@ export declare const fillMixStroke: string;
 export declare const title: string;
 export declare const description: string;
 export declare const technology: string;
-export declare const cssElement: string;
+export declare const element: string;
 export declare const iconMaxH: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const elementIcon: string;
 export declare const cssShapeSvg: string;

package/dist/xyflow/nodes/shared/NavigateToBtn.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export type NavigateToBtnProps = {
     xynodeId: string;
     className?: string;
 };
-export declare function NavigateToBtn({ xynodeId, className }: NavigateToBtnProps): JSX.Element;
+export declare function NavigateToBtn({ xynodeId, className }: NavigateToBtnProps): import("react/jsx-runtime").JSX.Element;

package/dist/xyflow/types.d.ts

@@ -1,4 +1,4 @@
-import { SetReadonly, SetRequired, Simplify } from 'type-fest';
+import { SetReadonly, SetRequired } from 'type-fest';
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { Edge, EdgeMouseHandler, InternalNode, Node, NodeMouseHandler, OnMoveEnd, OnMoveStart, ReactFlowInstance, ReactFlowState } from '@xyflow/react';
 import { BBox, DiagramEdge, DiagramNode, Fqn, Point } from '@likec4/core';
@@ -8,6 +8,7 @@ export type ElementNodeData = {
     element: DiagramNode;
 };
 type TypedXYFlowNode<D extends Record<string, unknown>, T extends string> = SetReadonly<SetRequired<Node<D, T>, 'type'>, 'id' | 'type'>;
+type TypedXYFlowEdge<D extends Record<string, unknown>, T extends string> = SetReadonly<SetRequired<Edge<D, T>, 'type' | 'data'>, 'id' | 'type'>;
 export type ElementXYFlowNode = TypedXYFlowNode<ElementNodeData, 'element'>;
 export type CompoundNodeData = {
     fqn: Fqn;
@@ -28,45 +29,44 @@ export type RelationshipData = {
     headPoint: Point | null;
     tailPoint: Point | null;
     type: 'bezier' | 'poly';
+    stepNum: number | null;
     label: null | {
         bbox: BBox;
         text: string;
     };
 };
-export type RelationshipEdge = Simplify<SetRequired<Omit<Edge<RelationshipData>, 'type'>, 'data'> & {
-    type: 'relationship';
-}>;
+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;
-        style?: import('react').CSSProperties;
-        id: string;
-        zIndex?: number;
-        markerEnd?: import('@xyflow/react').EdgeMarkerType;
-        markerStart?: import('@xyflow/react').EdgeMarkerType;
-        hidden?: boolean;
-        className?: string;
-        label?: import('react').ReactNode;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        ariaLabel?: string;
-        focusable?: boolean;
         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;
         updatable?: import('@xyflow/react').EdgeUpdatable;
+        focusable?: boolean;
         data: RelationshipData;
-        type: "relationship";
+        readonly id: string;
+        readonly type: "relationship";
     };
 }
 export type XYFlowInstance = ReactFlowInstance<XYFlowNode, XYFlowEdge>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -40,9 +40,9 @@
       "./style.css": "./dist/style.css"
     }
   },
-  "packageManager": "yarn@4.2.2",
+  "packageManager": "yarn@4.3.0",
   "scripts": {
-    "typecheck": "tsc",
+    "typecheck": "tsc -b",
     "prepack": "vite build --mode production",
     "build:turbo": "run -T turbo build --filter='diagram'",
     "build": "vite build --mode development && tsc -b",
@@ -50,8 +50,9 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.1.1",
+    "@likec4/core": "1.2.0",
     "@react-hookz/web": "^24.0.4",
+    "@tabler/icons-react": "^3.0.0",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
@@ -60,30 +61,32 @@
     "zustand": "^4.5.2"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.9.2",
-    "@mantine/hooks": "^7.9.2",
+    "@mantine/core": "^7.10.1",
+    "@mantine/hooks": "^7.10.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@lume/kiwi": "^0.4.3",
-    "@mantine/core": "^7.9.2",
-    "@mantine/hooks": "^7.9.2",
-    "@mantine/vanilla-extract": "^7.9.2",
+    "@mantine/core": "^7.10.1",
+    "@mantine/hooks": "^7.10.1",
+    "@mantine/vanilla-extract": "^7.10.1",
     "@total-typescript/ts-reset": "^0.5.1",
+    "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.4",
-    "@vanilla-extract/css": "^1.15.1",
-    "@vanilla-extract/dynamic": "^2.1.0",
-    "@vanilla-extract/esbuild-plugin": "^2.3.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vanilla-extract/css": "^1.15.2",
+    "@vanilla-extract/dynamic": "^2.1.1",
+    "@vanilla-extract/esbuild-plugin": "^2.3.6",
     "@vitejs/plugin-react": "^4.2.1",
     "@xyflow/react": "^12.0.0-next",
+    "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "execa": "^9.1.0",
     "khroma": "^2.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "tilg": "^0.1.1",
     "type-fest": "^4.18.2",
     "typescript": "^5.4.5",

package/src/KeepAspectRatioContainer.tsx

@@ -27,7 +27,7 @@ export function KeepAspectRatioContainer({
         ? {
           ...style,
           aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
-          maxHeight: Math.ceil(height)
+          maxHeight: `var(--likec4-view-max-height, ${Math.ceil(height)}px)`
         }
         : style}>
       {children}

package/src/LikeC4Diagram.css.ts

@@ -2,6 +2,8 @@ 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

package/src/LikeC4Diagram.props.ts

@@ -11,8 +11,8 @@ import type {
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
-import type { XYBackgroundProps } from './xyflow/XYFlowBackground'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
+import type { XYBackground, XYBackgroundProps } from './xyflow/XYFlowBackground'
 
 export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>
 
@@ -57,8 +57,7 @@ export namespace Changes {
   }
 }
 
-export type Change =
-  | Changes.ChangeElementStyle
+export type Change = Changes.ChangeElementStyle
 
 export type ChangeEvent = {
   changes: NonEmptyArray<Change>
@@ -131,7 +130,7 @@ export interface LikeC4DiagramProperties {
    * Background pattern
    * @default 'dots'
    */
-  background?: 'transparent' | 'solid' | XYBackgroundProps | undefined
+  background?: 'transparent' | 'solid' | XYBackground | undefined
 
   /**
    * Display hovercards with element links
@@ -144,6 +143,12 @@ export interface LikeC4DiagramProperties {
    * @default true
    */
   showDiagramTitle?: boolean | undefined
+
+  /**
+   * If Walkthrough for dynamic views should be enabled
+   * @default false
+   */
+  enableDynamicViewWalkthrough?: boolean | undefined
 }
 
 export interface LikeC4DiagramEventHandlers {