@likec4/diagram 1.1.1 → 1.2.1

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const themedColors: ({
     key: "primary";
     value: "#3b82f6";
@@ -17,4 +16,4 @@ export type ThemeColorKey = typeof themedColors[0]['key'];
 export type ColorKey = typeof colors[0]['key'];
 export declare function NodeOptions({ selectedNodeIds }: {
     selectedNodeIds: string[];
-}): JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/xyflow/FitviewOnDiagramChange.d.ts

@@ -1,2 +1,4 @@
-/// <reference types="react" />
-export declare const FitViewOnDiagramChange: import('react').MemoExoticComponent<() => JSX.Element | null>;
+/**
+ * Fits the view when the view changes and nodes are initialized
+ */
+export declare function FitViewOnDiagramChange(): import("react/jsx-runtime").JSX.Element | null;

package/dist/xyflow/SyncWithDiagram.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 /**
  * Syncs the diagram state with the XYFlow instance
  */
-export declare const SyncWithDiagram: import('react').MemoExoticComponent<() => null>;
+export declare function SyncWithDiagram(): null;

package/dist/xyflow/XYFlow.d.ts

@@ -1,14 +1,11 @@
-import { XYFlowEdge, XYFlowNode } from './types';
-import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
-import { SetNonNullable, Simplify } from 'type-fest';
 import { CSSProperties, PropsWithChildren } from 'react';
+import { XYFlowEdge, XYFlowNode } from './types';
 
-type OnlyExpectedProps = Required<Pick<LikeC4DiagramProperties, 'className' | 'controls' | 'background'>>;
-type XYFlowWrapperProps = Simplify<PropsWithChildren<SetNonNullable<OnlyExpectedProps> & {
+type XYFlowWrapperProps = PropsWithChildren<{
+    className?: string | undefined;
     defaultNodes: XYFlowNode[];
     defaultEdges: XYFlowEdge[];
     style?: CSSProperties | undefined;
-}>>;
-declare function XYFlowWrapper({ className, children, defaultNodes, defaultEdges, controls, background, style }: XYFlowWrapperProps): JSX.Element;
-export declare const XYFlow: typeof XYFlowWrapper;
+}>;
+export declare function XYFlow({ className, children, defaultNodes, defaultEdges, style }: XYFlowWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/xyflow/XYFlowBackground.d.ts

@@ -1,10 +1,11 @@
-import { OverrideProperties } from 'type-fest';
 import { BackgroundProps } from '@xyflow/react';
+import { OverrideProperties } from 'type-fest';
 
 export type XYBackgroundVariant = 'dots' | 'lines' | 'cross';
-export type XYBackgroundProps = XYBackgroundVariant | OverrideProperties<BackgroundProps, {
+export type XYBackground = XYBackgroundVariant | OverrideProperties<BackgroundProps, {
     variant: XYBackgroundVariant;
 }>;
-export declare const XYFlowBackground: import('react').NamedExoticComponent<{
-    background: XYBackgroundProps;
-}>;
+export type XYBackgroundProps = {
+    background: XYBackground;
+};
+export declare function XYFlowBackground({ background }: XYBackgroundProps): import("react/jsx-runtime").JSX.Element;

package/dist/xyflow/XYFlowEvents.d.ts

@@ -8,128 +8,122 @@ export declare function useXYFlowEvents(): {
     onEdgeContextMenu: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
         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;
     onNodeClick: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
     onNodeDoubleClick: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
     onEdgeClick: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
         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;
     onMoveEnd: (event: MouseEvent | TouchEvent | null, _viewport: import('@xyflow/react').Viewport) => void;
-    onNodeMouseEnter: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
-    onNodeMouseLeave: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
-    onEdgeMouseEnter: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
+    onNodeMouseEnter: (_event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onNodeMouseLeave: (_event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onEdgeMouseEnter: (_event: import('react').MouseEvent<Element, MouseEvent>, { id, source, target }: {
         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;
-    onEdgeMouseLeave: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
+    onEdgeMouseLeave: (_event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
         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;
-    /**
-     * WOKAROUND:
-     * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
-     * https://github.com/xyflow/xyflow/issues/3282
-     */
-    onViewportChange: ({ x, y, zoom }: import('@xyflow/react').Viewport) => void;
 };

package/dist/xyflow/XYFlowInner.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
+
+type XYFlowInnerProps = PropsWithChildren<{
+    background: NonNullable<LikeC4DiagramProperties['background']>;
+    controls: boolean;
+    showDiagramTitle: boolean;
+    enableDynamicViewWalkthrough: boolean;
+}>;
+export declare function XYFlowInner({ children, background, controls, showDiagramTitle, enableDynamicViewWalkthrough }: XYFlowInnerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -1,32 +1,32 @@
-import { CSSProperties } from 'react';
 import { EdgeProps } from '@xyflow/react';
+import { CSSProperties } from 'react';
 
 export declare const RelationshipEdge: import('react').NamedExoticComponent<EdgeProps<{
     source: string;
     target: string;
-    style?: 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?: CSSProperties;
     labelShowBg?: boolean;
     labelBgStyle?: CSSProperties;
     labelBgPadding?: [number, number];
     labelBgBorderRadius?: number;
-    updatable?: import("@xyflow/react").EdgeUpdatable;
-    data: import("../types").RelationshipData;
-    type: "relationship";
+    style?: CSSProperties;
+    className?: string;
+    updatable?: import('@xyflow/react').EdgeUpdatable;
+    focusable?: boolean;
+    data: import('../types').RelationshipData;
+    readonly id: string;
+    readonly type: "relationship";
 }>>;

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

@@ -1,9 +1,11 @@
 export declare const container: string;
+export declare const dimmed: string;
 export declare const edgePathBg: string;
-export declare const fillStrokeCtx: string;
+export declare const markerContext: string;
 export declare const controlPoint: 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})`;
 export declare const edgeLabel: string;
-export declare const edgeLabelBody: string;
+export declare const stepEdgeNumber: string;
+export declare const edgeLabelText: string;

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

@@ -1,6 +1,8 @@
-import { InternalXYFlowNode } from '../types';
+import { Point } from '@likec4/core';
 import { Position, XYPosition } from '@xyflow/react';
+import { InternalXYFlowNode } from '../types';
 
+export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalXYFlowNode, [x1, y1]: Point): readonly [number, number];
 export declare function getPointPosition(node: InternalXYFlowNode, intersectionPoint: XYPosition): readonly [number, number, Position];
 export declare function getEdgeParams(source: InternalXYFlowNode, target: InternalXYFlowNode): {
     sx: number;

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

@@ -1,5 +1,5 @@
-import { XYFlowNode } from '../types';
 import { ReactFlowProps } from '@xyflow/react';
+import { XYFlowNode } from '../types';
 
 type LayoutConstraints = Required<Pick<ReactFlowProps<XYFlowNode>, 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop'>>;
 /**