@likec4/diagram 1.1.0 → 1.2.0

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

@@ -1 +1,2 @@
+export * from './DynamicViewWalkthrough';
 export { default as OptionsPanel } from './OptionsPanel';

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

@@ -0,0 +1 @@
+export declare function SelectEdgesOnNodeFocus(): 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';
 
-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

@@ -2,9 +2,10 @@ import { OverrideProperties } from 'type-fest';
 import { BackgroundProps } from '@xyflow/react';
 
 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

@@ -1,129 +1,129 @@
 import { XYFlowNode } from './types';
 
 export declare function useXYFlowEvents(): {
-    onDoubleClick: import('react').MouseEventHandler<HTMLDivElement> | undefined;
-    onNodeClick: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
-    onNodeContextMenu: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
-    onEdgeClick: (event: import('react').MouseEvent<Element, MouseEvent>, edge: {
+    onDoubleClick: (event: import('react').MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onPaneClick: (event: import('react').MouseEvent<Element, MouseEvent>) => void;
+    onNodeContextMenu: (event: import('react').MouseEvent<Element, MouseEvent>, xynode: XYFlowNode) => void;
+    onPaneContextMenu: (event: MouseEvent | import('react').MouseEvent<Element, MouseEvent>) => void;
+    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;
-    onEdgeContextMenu: import('@xyflow/react').EdgeMouseHandler<{
+    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;
-        labelStyle?: import("react").CSSProperties;
+        label?: import('react').ReactNode;
+        labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
-        labelBgStyle?: import("react").CSSProperties;
+        labelBgStyle?: import('react').CSSProperties;
         labelBgPadding?: [number, number];
         labelBgBorderRadius?: number;
-        updatable?: import("@xyflow/react").EdgeUpdatable;
-        data: import("./types").RelationshipData;
-        type: "relationship";
-    }>;
-    onMoveEnd: import('@xyflow/react').OnMove;
-    onNodeDoubleClick: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
-    onNodeMouseEnter: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
-    onNodeMouseLeave: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
-    onEdgeMouseEnter: import('@xyflow/react').EdgeMouseHandler<{
-        source: string;
-        target: string;
-        style?: import("react").CSSProperties;
-        id: string;
-        zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
-        hidden?: boolean;
+        style?: import('react').CSSProperties;
         className?: string;
-        label?: import("react").ReactNode;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        ariaLabel?: string;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
         focusable?: boolean;
+        data: import('./types').RelationshipData;
+        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>, { id, source, target }: {
+        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;
-        labelStyle?: import("react").CSSProperties;
+        label?: import('react').ReactNode;
+        labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
-        labelBgStyle?: import("react").CSSProperties;
+        labelBgStyle?: import('react').CSSProperties;
         labelBgPadding?: [number, number];
         labelBgBorderRadius?: number;
-        updatable?: import("@xyflow/react").EdgeUpdatable;
-        data: import("./types").RelationshipData;
-        type: "relationship";
-    }>;
-    onEdgeMouseLeave: import('@xyflow/react').EdgeMouseHandler<{
-        source: string;
-        target: string;
-        style?: import("react").CSSProperties;
-        id: string;
-        zIndex?: number;
-        markerEnd?: import("@xyflow/react").EdgeMarkerType;
-        markerStart?: import("@xyflow/react").EdgeMarkerType;
-        hidden?: boolean;
+        style?: import('react').CSSProperties;
         className?: string;
-        label?: import("react").ReactNode;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        ariaLabel?: string;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
         focusable?: boolean;
+        data: import('./types').RelationshipData;
+        readonly id: string;
+        readonly type: "relationship";
+    }) => void;
+    onEdgeMouseLeave: (event: import('react').MouseEvent<Element, MouseEvent>, xyedge: {
+        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;
-        labelStyle?: import("react").CSSProperties;
+        label?: import('react').ReactNode;
+        labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
-        labelBgStyle?: import("react").CSSProperties;
+        labelBgStyle?: import('react').CSSProperties;
         labelBgPadding?: [number, number];
         labelBgBorderRadius?: number;
-        updatable?: import("@xyflow/react").EdgeUpdatable;
-        data: import("./types").RelationshipData;
-        type: "relationship";
-    }>;
-    onPaneClick: (event: import('react').MouseEvent<Element, MouseEvent>) => void;
-    onPaneContextMenu: (event: MouseEvent | import('react').MouseEvent<Element, MouseEvent>) => void;
+        style?: import('react').CSSProperties;
+        className?: string;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        focusable?: boolean;
+        data: import('./types').RelationshipData;
+        readonly id: string;
+        readonly type: "relationship";
+    }) => void;
 };

package/dist/xyflow/XYFlowInner.d.ts

@@ -0,0 +1,11 @@
+import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
+import { PropsWithChildren } from 'react';
+
+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';
 
-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

@@ -4,29 +4,29 @@ import { EdgeProps } from '@xyflow/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;
+    style?: CSSProperties;
+    className?: string;
     updatable?: import("@xyflow/react").EdgeUpdatable;
+    focusable?: boolean;
     data: import("../types").RelationshipData;
-    type: "relationship";
+    readonly id: string;
+    readonly type: "relationship";
 }>>;

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

@@ -1,8 +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 { Position, XYPosition } from '@xyflow/react';
+import { Point } from '@likec4/core';
 
+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;