@likec4/diagram 1.3.0 → 1.5.0

package/dist/theme.css.d.ts

@@ -1,4 +1,5 @@
 export declare const vars: {
+    safariAnimationHook: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     default: {
         font: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
@@ -31,6 +32,10 @@ export declare const vars: {
         top: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         right: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
+    navigationPanel: {
+        top: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        left: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
 };
 export declare const xyvars: {
     background: {

package/dist/ui/BackwardForwardPanel.css.d.ts

@@ -0,0 +1 @@
+export declare const panel: string;

package/dist/ui/BackwardForwardPanel.d.ts

@@ -0,0 +1 @@
+export declare function BackwardForwardPanel(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/DiagramTitlePanel.css.d.ts

@@ -1,4 +1,4 @@
 export declare const container: string;
-export declare const paper: string;
+export declare const card: string;
 export declare const title: string;
 export declare const description: string;

package/dist/ui/OptionsPanel.d.ts

@@ -1,3 +1 @@
-/// <reference types="react" />
-declare const OptionsPanelMemo: import('react').NamedExoticComponent<object>;
-export default OptionsPanelMemo;
+export default function OptionsPanel(): import("react/jsx-runtime").JSX.Element;

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;
@@ -28,7 +31,7 @@ export declare function useXYFlowEvents(): {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('./types').RelationshipData;
         readonly id: string;
@@ -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;
@@ -59,7 +62,7 @@ export declare function useXYFlowEvents(): {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('./types').RelationshipData;
         readonly id: string;
@@ -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;
@@ -91,7 +94,7 @@ export declare function useXYFlowEvents(): {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('./types').RelationshipData;
         readonly id: string;
@@ -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;
@@ -120,7 +123,7 @@ export declare function useXYFlowEvents(): {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('./types').RelationshipData;
         readonly id: string;

package/dist/xyflow/XYFlowInner.d.ts

@@ -5,6 +5,7 @@ type XYFlowInnerProps = PropsWithChildren<{
     background: NonNullable<LikeC4DiagramProperties['background']>;
     controls: boolean;
     showDiagramTitle: boolean;
+    showNavigationButtons: boolean;
     enableDynamicViewWalkthrough: boolean;
 }>;
 export declare const XYFlowInner: import('react').NamedExoticComponent<XYFlowInnerProps>;

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;
@@ -23,9 +24,9 @@ export declare const RelationshipEdge: import('react').NamedExoticComponent<Edge
     labelBgBorderRadius?: number;
     style?: import('react').CSSProperties;
     className?: string;
-    updatable?: import('@xyflow/react').EdgeUpdatable;
+    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;
@@ -23,15 +23,15 @@ export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<
     labelBgBorderRadius?: number;
     style?: import('react').CSSProperties;
     className?: string;
-    updatable?: import('@xyflow/react').EdgeUpdatable;
+    reconnectable?: boolean | import('@xyflow/react').HandleType;
     focusable?: boolean;
     data: import('../types').RelationshipData;
     readonly id: string;
     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;
@@ -58,7 +58,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -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;
@@ -87,7 +87,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -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;
@@ -115,7 +115,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -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;
@@ -143,7 +143,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -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;
@@ -171,7 +171,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -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;
@@ -199,7 +199,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -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;
@@ -228,7 +228,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -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;
@@ -256,7 +256,7 @@ export declare const useXYStoreApi: () => {
         labelBgBorderRadius?: number;
         style?: import('react').CSSProperties;
         className?: string;
-        updatable?: import('@xyflow/react').EdgeUpdatable;
+        reconnectable?: boolean | import('@xyflow/react').HandleType;
         focusable?: boolean;
         data: import('../types').RelationshipData;
         readonly id: string;
@@ -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/ElementIcon.d.ts

@@ -2,9 +2,6 @@ import { XYFlowNode } from '../../types';
 
 type ElementIconProps = {
     node: XYFlowNode['data']['element'];
-    maxWidth?: number | undefined;
-    paddingX?: number | undefined;
-    paddingY?: number | undefined;
 };
-export declare function ElementIcon({ node, paddingY }: ElementIconProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ElementIcon({ node: { icon, title, labelBBox } }: ElementIconProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,5 +1,7 @@
 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;
@@ -9,7 +11,7 @@ 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 iconOffsetY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const elementIcon: 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;
-        updatable?: import("@xyflow/react").EdgeUpdatable;
-        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.3.0",
+  "version": "1.5.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.3.0",
+    "@likec4/core": "1.5.0",
     "@react-hookz/web": "^24.0.4",
-    "@tabler/icons-react": "^3.0.0",
+    "@tabler/icons-react": "^3.9.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.2",
-    "remeda": "^1.61.0",
-    "zustand": "^4.5.2"
+    "framer-motion": "^11.2.13",
+    "remeda": "^2.3.0",
+    "zustand": "^4.5.4"
   },
   "peerDependencies": {
-    "@mantine/core": "7.10.2",
-    "@mantine/hooks": "7.10.2",
+    "@mantine/core": "^7.11.1",
+    "@mantine/hooks": "^7.11.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.3.0",
+    "@likec4/tsconfig": "1.5.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.1",
+    "@mantine/hooks": "7.11.1",
+    "@mantine/vanilla-extract": "7.11.1",
     "@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.7",
+    "@vanilla-extract/esbuild-plugin": "^2.3.8",
     "@vitejs/plugin-react": "^4.3.1",
-    "@xyflow/react": "12.0.0-next.21",
-    "@xyflow/system": "0.0.29",
+    "@xyflow/react": "12.0.1",
+    "@xyflow/system": "0.0.35",
     "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.1",
+    "type-fest": "^4.21.0",
+    "typescript": "^5.5.3",
+    "vite": "5.3.3",
     "vite-plugin-dts": "^3.9.1"
   }
 }

package/src/LikeC4Diagram.css.ts

@@ -1,16 +1,18 @@
 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
+    '(hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)': {
+      // TODO: this workaround disables animations in Safari (to improve performance)
+      vars: {
+        [vars.safariAnimationHook]: ''
+      }
+    }
+  }
 })
 
-export const cssReactFlow = style({})
-
 globalStyle(`.react-flow${cssReactFlow}`, {
   vars: {
     [xyvars.background.color]: vars.likec4.background.color,