@likec4/diagram 1.1.1 → 1.2.1

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;
-    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";
+    style?: import('react').CSSProperties;
+    className?: string;
+    updatable?: import('@xyflow/react').EdgeUpdatable;
+    focusable?: boolean;
+    data: import('../types').RelationshipData;
+    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;
-        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";
+        style?: import('react').CSSProperties;
+        className?: string;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        focusable?: boolean;
+        data: import('../types').RelationshipData;
+        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;
-        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";
+        style?: import('react').CSSProperties;
+        className?: string;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        focusable?: boolean;
+        data: import('../types').RelationshipData;
+        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;
-        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";
+        style?: import('react').CSSProperties;
+        className?: string;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        focusable?: boolean;
+        data: import('../types').RelationshipData;
+        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;
-        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";
+        style?: import('react').CSSProperties;
+        className?: string;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        focusable?: boolean;
+        data: import('../types').RelationshipData;
+        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;
-        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";
+        style?: import('react').CSSProperties;
+        className?: string;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        focusable?: boolean;
+        data: import('../types').RelationshipData;
+        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;
-        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";
+        style?: import('react').CSSProperties;
+        className?: string;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        focusable?: boolean;
+        data: import('../types').RelationshipData;
+        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;
-        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";
+        style?: import('react').CSSProperties;
+        className?: string;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        focusable?: boolean;
+        data: import('../types').RelationshipData;
+        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;
-        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";
+        style?: import('react').CSSProperties;
+        className?: string;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        focusable?: boolean;
+        data: import('../types').RelationshipData;
+        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/compound/CompoundNode.d.ts

@@ -1,5 +1,5 @@
-import { CompoundXYFlowNode } from '../../types';
 import { NodeProps } from '@xyflow/react';
+import { CompoundXYFlowNode } from '../../types';
 
 type CompoundNodeProps = Pick<NodeProps<CompoundXYFlowNode>, 'id' | 'data' | 'width' | 'height' | 'selected'>;
 export declare const CompoundNodeMemo: import('react').NamedExoticComponent<CompoundNodeProps>;

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

@@ -1,6 +1,6 @@
-import { ElementXYFlowNode } from '../../types';
 import { NodeProps } from '@xyflow/react';
+import { ElementXYFlowNode } from '../../types';
 
 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,13 +1,14 @@
-import { SetReadonly, SetRequired, Simplify } 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';
+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';
 
 export type ElementNodeData = {
     fqn: Fqn;
     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;
-        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;
+        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>;