@likec4/diagram 1.41.0 → 1.42.0

package/dist/{state → likec4diagram/state}/diagram-machine.js

@@ -1,15 +1,15 @@
-import { nonNullable, invariant, nonexhaustive, BBox, isStepEdgeId, getParallelStepsPrefix } from '@likec4/core';
+import { invariant, nonNullable, nonexhaustive, BBox, isStepEdgeId, getParallelStepsPrefix } from '@likec4/core';
 import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { nodeToRect } from '@xyflow/system';
 import { hasAtLeast, prop, clamp, first } from 'remeda';
 import { setup, assign, emit, sendTo, enqueueActions, assertEvent, cancel, stopChild, raise, spawnChild, and, or } from 'xstate';
-import { MinZoom } from '../base/const.js';
-import { Base } from '../base/types.js';
-import { AllDisabled } from '../context/DiagramFeatures.js';
-import { createLayoutConstraints } from '../likec4diagram/useLayoutConstraints.js';
-import { SeqParallelAreaColor } from '../likec4diagram/xyflow-sequence/const.js';
-import { overlaysActorLogic } from '../overlays/overlaysActor.js';
-import { searchActorLogic } from '../search/searchActor.js';
+import { MinZoom } from '../../base/const.js';
+import { Base } from '../../base/types.js';
+import { AllDisabled } from '../../context/DiagramFeatures.js';
+import { overlaysActorLogic } from '../../overlays/overlaysActor.js';
+import { searchActorLogic } from '../../search/searchActor.js';
+import { createLayoutConstraints } from '../useLayoutConstraints.js';
+import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
 import { getAligner, toNodeRect } from './aligners.js';
 import { updateActiveWalkthrough, focusNodesEdges, lastClickedNode, updateNavigationHistory, mergeXYNodesEdges, updateEdgeData, updateNodeData, resetEdgeControlPoints, navigateForward, navigateBack } from './assign.js';
 import { hotkeyActorLogic } from './hotkeyActor.js';
@@ -39,6 +39,7 @@ const _diagramMachine = setup({
     "enabled: RelationshipDetails": ({ context }) => context.features.enableRelationshipDetails,
     "enabled: Search": ({ context }) => context.features.enableSearch,
     "enabled: ElementDetails": ({ context }) => context.features.enableElementDetails,
+    "enabled: DynamicViewWalkthrough": ({ context }) => context.features.enableDynamicViewWalkthrough,
     "not readonly": ({ context }) => !context.features.enableReadOnly,
     "is dynamic view": ({ context }) => context.view._type === "dynamic",
     "is another view": ({ context, event }) => {
@@ -81,17 +82,13 @@ const _diagramMachine = setup({
       type: "navigateTo",
       viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
     })),
-    "trigger:OpenSource": emit((_, _params) => ({
-      type: "openSource",
-      params: _params
-    })),
     "assign lastClickedNode": assign(({ context, event }) => {
       assertEvent(event, "xyflow.nodeClick");
       return {
         lastClickedNode: lastClickedNode({ context, event })
       };
     }),
-    "assign: focusedNode": assign(({ context, event }) => {
+    "assign: focusedNode": assign(({ event }) => {
       let focusedNode;
       switch (event.type) {
         case "xyflow.nodeClick":
@@ -138,7 +135,7 @@ const _diagramMachine = setup({
       );
       viewport.x = Math.round(viewport.x);
       viewport.y = Math.round(viewport.y);
-      panZoom?.setViewport(viewport, duration > 0 ? { duration } : void 0);
+      panZoom?.setViewport(viewport, duration > 0 ? { duration } : void 0).catch(console.error);
     },
     "xyflow:fitFocusedBounds": ({ context }) => {
       const isActiveSequenceWalkthrough = !!context.activeWalkthrough && context.dynamicViewVariant === "sequence";
@@ -455,6 +452,17 @@ const _diagramMachine = setup({
         xyedge: event.edge
       };
     }),
+    "emit: initialized": emit(({ context }) => {
+      invariant(context.xyflow, "XYFlow instance not found");
+      return {
+        type: "initialized",
+        instance: context.xyflow
+      };
+    }),
+    "emit: openSource": emit((_, _params) => ({
+      type: "openSource",
+      params: _params
+    })),
     "assign: dynamicViewVariant": assign(({ event }) => {
       assertEvent(event, "switch.dynamicViewVariant");
       return {
@@ -507,7 +515,7 @@ const _diagramMachine = setup({
           target: "isReady"
         },
         "update.view": {
-          actions: assign(({ context, event, spawn, self }) => ({
+          actions: assign(({ context, event }) => ({
             initialized: {
               ...context.initialized,
               xydata: true
@@ -538,7 +546,8 @@ const _diagramMachine = setup({
               }]
             }
           })),
-          "startSyncLayout"
+          "startSyncLayout",
+          "emit: initialized"
         ],
         target: "ready"
       }, {
@@ -617,7 +626,7 @@ const _diagramMachine = setup({
         },
         "open.source": {
           actions: {
-            type: "trigger:OpenSource",
+            type: "emit: openSource",
             params: prop("event")
           }
         },
@@ -748,7 +757,7 @@ const _diagramMachine = setup({
               actions: [
                 "reset lastClickedNode",
                 "xyflow:fitDiagram",
-                { type: "trigger:OpenSource", params: ({ context }) => ({ view: context.view.id }) }
+                { type: "emit: openSource", params: ({ context }) => ({ view: context.view.id }) }
               ]
             },
             "focus.node": {
@@ -759,6 +768,7 @@ const _diagramMachine = setup({
             "xyflow.edgeClick": {
               guard: and([
                 "is dynamic view",
+                "enabled: DynamicViewWalkthrough",
                 "click: selected edge"
               ]),
               actions: [
@@ -781,7 +791,7 @@ const _diagramMachine = setup({
             spawnChild("hotkeyActorLogic", { id: "hotkey" }),
             "xyflow:fitFocusedBounds"
           ],
-          exit: enqueueActions(({ enqueue, context, event }) => {
+          exit: enqueueActions(({ enqueue, context }) => {
             enqueue.stopChild("hotkey");
             if (context.viewportBeforeFocus) {
               enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
@@ -866,7 +876,7 @@ const _diagramMachine = setup({
             "xyflow:fitFocusedBounds",
             "emit: walkthroughStarted"
           ],
-          exit: enqueueActions(({ enqueue, context, event }) => {
+          exit: enqueueActions(({ enqueue, context }) => {
             enqueue.stopChild("hotkey");
             if (context.viewportBeforeFocus) {
               enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
@@ -987,8 +997,8 @@ const _diagramMachine = setup({
                 params: {
                   fromNode: fromNode.id,
                   toPosition: {
-                    x: toNode.data.position[0],
-                    y: toNode.data.position[1]
+                    x: toNode.data.x,
+                    y: toNode.data.y
                   }
                 }
               });
@@ -1072,8 +1082,8 @@ const _diagramMachine = setup({
                 params: {
                   fromNode: fromNode.id,
                   toPosition: {
-                    x: toNode.data.position[0],
-                    y: toNode.data.position[1]
+                    x: toNode.data.x,
+                    y: toNode.data.y
                   }
                 }
               });

package/dist/{state → likec4diagram/state}/persistence.d.ts

@@ -1,4 +1,4 @@
-import { EnabledFeatures } from '../context/DiagramFeatures';
+import { EnabledFeatures } from '../../context/DiagramFeatures';
 export declare const DiagramToggledFeaturesPersistence: {
     read(): Partial<EnabledFeatures> | null;
     write<F extends Partial<EnabledFeatures>>(toggledFeatures: F): F;

package/dist/{state → likec4diagram/state}/syncManualLayoutActor.d.ts

@@ -27,7 +27,7 @@ declare const _syncManualLayoutActorLogic: StateMachine<Readonly<Input>, Events,
 }, {
     type: "same view";
     params: unknown;
-}, "timeout", "paused" | "stopped" | "synced" | "pending" | "idle", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
+}, "timeout", "stopped" | "synced" | "pending" | "idle" | "paused", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
     readonly initial: "idle";
     readonly context: ({ input }: {
         spawn: {

package/dist/{state → likec4diagram/state}/syncManualLayoutActor.js

@@ -1,7 +1,7 @@
 import { getNodeDimensions, getBoundsOfRects, boxToRect } from '@xyflow/system';
 import { reduce, hasAtLeast } from 'remeda';
 import { setup, assign } from 'xstate';
-import { isSamePoint, bezierControlPoints } from '../utils/xyflow.js';
+import { isSamePoint, bezierControlPoints } from '../../utils/xyflow.js';
 
 const _syncManualLayoutActorLogic = setup({
   types: {
@@ -101,7 +101,7 @@ function createViewChange(parentContext) {
   let bounds;
   const nodes = reduce([...nodeLookup.values()], (acc, node) => {
     const dimensions = getNodeDimensions(node);
-    if (!isSamePoint(node.internals.positionAbsolute, node.data.position) || node.initialWidth !== dimensions.width || node.initialHeight !== dimensions.height) {
+    if (!isSamePoint(node.internals.positionAbsolute, node.data) || node.initialWidth !== dimensions.width || node.initialHeight !== dimensions.height) {
       movedNodes.add(node.id);
     }
     const rect = acc[node.id] = {

package/dist/{state → likec4diagram/state}/types.d.ts

@@ -1,6 +1,6 @@
 import { ActorRefFromLogic, ActorSystem, EventFromLogic, SnapshotFrom } from 'xstate';
-import { OverlaysActorRef } from '../overlays/overlaysActor';
-import { SearchActorRef } from '../search/searchActor';
+import { OverlaysActorRef } from '../../overlays/overlaysActor';
+import { SearchActorRef } from '../../search/searchActor';
 import { DiagramMachineLogic } from './diagram-machine';
 import { SyncLayoutActorLogic } from './syncManualLayoutActor';
 export type System = ActorSystem<{

package/dist/{state → likec4diagram/state}/utils.d.ts

@@ -1,7 +1,7 @@
 import { DiagramEdge, DiagramNode, BBox } from '@likec4/core/types';
 import { ActorSystem } from 'xstate';
-import { OverlaysActorRef } from '../overlays/overlaysActor';
-import { SearchActorRef } from '../search/searchActor';
+import { OverlaysActorRef } from '../../overlays/overlaysActor';
+import { SearchActorRef } from '../../search/searchActor';
 import { Context } from './diagram-machine';
 import { DiagramActorRef } from './types';
 export declare function typedSystem(system: ActorSystem<any>): {

package/dist/likec4diagram/types.d.ts

@@ -1,14 +1,11 @@
 import { BBox, DeploymentFqn, DiagramEdge, DiagramNode, ExclusiveUnion, Fqn, IconUrl, RichTextOrEmpty, ViewId } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/system';
-import { OptionalKeysOf, Simplify } from 'type-fest';
-import { Base, ReactFlowEdge, ReactFlowNode } from '../base/types';
-type NonOptional<T extends object> = Simplify<{
-    [P in Exclude<keyof T, OptionalKeysOf<T>>]: T[P];
-} & {
-    [P in OptionalKeysOf<T>]-?: T[P] | undefined;
-}>;
+import { FunctionComponent } from 'react';
+import { Simplify } from 'type-fest';
+import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from '../base/types';
 export declare namespace Types {
-    type LeafNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'position'>> & {
+    type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
+        technology: string | null;
         description: RichTextOrEmpty;
         /**
          * View this node belongs to
@@ -16,7 +13,7 @@ export declare namespace Types {
         viewId: ViewId;
         isMultiple?: boolean | undefined;
         icon: string | null;
-    };
+    }>;
     /**
      * Represents element from logical model
      */
@@ -31,11 +28,11 @@ export declare namespace Types {
     /**
      * Represents element from deployment model
      */
-    type DeploymentElementNodeData = LeafNodeData & {
+    type DeploymentElementNodeData = Simplify<LeafNodeData & {
         navigateTo: ViewId | null;
         deploymentFqn: DeploymentFqn;
         modelFqn: Fqn | null;
-    };
+    }>;
     type SequenceActorNodePort = {
         id: string;
         cx: number;
@@ -53,23 +50,23 @@ export declare namespace Types {
     type SequenceParallelAreaData = Simplify<LeafNodeData & {
         parallelPrefix: string;
     }>;
-    type CompoundNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'tags' | 'position'>> & {
+    type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'tags' | 'x' | 'y'>> & {
         /**
          * View this node belongs to
          */
         viewId: ViewId;
         depth: number;
         icon?: IconUrl;
-    };
-    type CompoundElementNodeData = CompoundNodeData & {
+    }>;
+    type CompoundElementNodeData = Simplify<CompoundNodeData & {
         modelFqn: Fqn;
         deploymentFqn?: never;
         /**
          * If set - this node has navigation to another view and diagram has handler for this
          */
         navigateTo: ViewId | null;
-    };
-    type CompoundDeploymentNodeData = CompoundNodeData & {
+    }>;
+    type CompoundDeploymentNodeData = Simplify<CompoundNodeData & {
         deploymentFqn: DeploymentFqn;
         /**
          * If set - this node refers to a model element
@@ -79,18 +76,19 @@ export declare namespace Types {
          * If set - this node has navigation to another view and diagram has handler for this
          */
         navigateTo: ViewId | null;
-    };
-    type ViewGroupNodeData = CompoundNodeData & {
+    }>;
+    type ViewGroupNodeData = Simplify<CompoundNodeData & {
         isViewGroup: true;
-    };
-    type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
-    type DeploymentElementNode = ReactFlowNode<DeploymentElementNodeData, 'deployment'>;
-    type SequenceActorNode = ReactFlowNode<SequenceActorNodeData, 'seq-actor'>;
-    type SequenceParallelArea = ReactFlowNode<SequenceParallelAreaData, 'seq-parallel'>;
-    type CompoundElementNode = ReactFlowNode<CompoundElementNodeData, 'compound-element'>;
-    type CompoundDeploymentNode = ReactFlowNode<CompoundDeploymentNodeData, 'compound-deployment'>;
-    type ViewGroupNode = ReactFlowNode<ViewGroupNodeData, 'view-group'>;
-    type Node = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode | SequenceActorNode | SequenceParallelArea;
+    }>;
+    type ElementNode = BaseNode<ElementNodeData, 'element'>;
+    type DeploymentElementNode = BaseNode<DeploymentElementNodeData, 'deployment'>;
+    type SequenceActorNode = BaseNode<SequenceActorNodeData, 'seq-actor'>;
+    type SequenceParallelArea = BaseNode<SequenceParallelAreaData, 'seq-parallel'>;
+    type CompoundElementNode = BaseNode<CompoundElementNodeData, 'compound-element'>;
+    type CompoundDeploymentNode = BaseNode<CompoundDeploymentNodeData, 'compound-deployment'>;
+    type ViewGroupNode = BaseNode<ViewGroupNodeData, 'view-group'>;
+    type AnyNode = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode | SequenceActorNode | SequenceParallelArea;
+    type NodeType = AnyNode['type'];
     type NodeData = ExclusiveUnion<{
         ElementNodeData: ElementNodeData;
         DeploymentElementNodeData: DeploymentElementNodeData;
@@ -100,20 +98,39 @@ export declare namespace Types {
         SequenceActorNodeData: SequenceActorNodeData;
         SequenceParallelAreaData: SequenceParallelAreaData;
     }>;
-    type RelationshipEdgeData = Simplify<Base.EdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo'>> & {
+    type Node<Type extends NodeType = NodeType> = Extract<AnyNode, {
+        type: Type;
+    }>;
+    type NodeProps<Type extends NodeType = NodeType> = BaseNodeProps<Node<Type>>;
+    type RelationshipEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath'>> & {
         notes: RichTextOrEmpty;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
     }>;
-    type SequenceStepEdgeData = Simplify<Base.EdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo'>> & {
+    type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath'>> & {
         notes: RichTextOrEmpty;
         labelXY: XYPosition | null;
         labelBBox: BBox;
         controlPoints: XYPosition[] | undefined | null;
     }>;
-    type RelationshipEdge = ReactFlowEdge<RelationshipEdgeData, 'relationship'>;
-    type SequenceStepEdge = ReactFlowEdge<SequenceStepEdgeData, 'seq-step'>;
-    type Edge = RelationshipEdge | SequenceStepEdge;
-    type EdgeData = RelationshipEdgeData | SequenceStepEdgeData;
+    type RelationshipEdge = BaseEdge<RelationshipEdgeData, 'relationship'>;
+    type SequenceStepEdge = BaseEdge<SequenceStepEdgeData, 'seq-step'>;
+    type AnyEdge = RelationshipEdge | SequenceStepEdge;
+    type EdgeType = AnyEdge['type'];
+    type Edge<Type extends EdgeType = EdgeType> = Extract<AnyEdge, {
+        type: Type;
+    }>;
+    type EdgeProps<Type extends EdgeType = EdgeType> = BaseEdgeProps<Edge<Type>>;
+    type EdgeData = ExclusiveUnion<{
+        RelationshipEdgeData: RelationshipEdgeData;
+        SequenceStepEdgeData: SequenceStepEdgeData;
+    }>;
+    type NodeRenderer<T extends NodeType> = FunctionComponent<NodeProps<T>>;
+    type NodeRenderers = {
+        [T in NodeType]: NodeRenderer<T>;
+    };
+    type EdgeRenderer<T extends EdgeType> = FunctionComponent<EdgeProps<T>>;
+    type EdgeRenderers = {
+        [T in EdgeType]: EdgeRenderer<T>;
+    };
 }
-export {};

package/dist/likec4diagram/ui/index.d.ts

@@ -1,4 +1 @@
-export { Controls } from './controls/Controls';
-export { DiagramTitlePanel } from './diagram-title/DiagramTitlePanel';
 export { NotationPanel } from './notation/NotationPanel';
-export { DynamicViewWalkthrough } from './walkthrough/DynamicViewWalkthrough';

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -1,10 +1,13 @@
 import { css } from '@likec4/styles/css';
 
 const container = css({
+  position: "absolute",
   bottom: "0",
   right: "0",
   padding: "2",
-  margin: "0"
+  margin: "0",
+  width: "min-content",
+  height: "min-content"
 });
 const icon = css({
   ["--ai-radius"]: "0px",

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -9,10 +9,10 @@ import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
 import { container, icon, card, tabPanel, shapeBadge, elementNotation } from './NotationPanel.css.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
-import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
-import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
-import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
+import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
+import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
+import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 
 const ElementNotation = ({ value }) => {
   const {
@@ -139,7 +139,7 @@ const NotationPanel = memo(() => {
           translateX: "100%",
           opacity: 0.6
         },
-        className: cx("react-flow__panel", container),
+        className: container,
         children: /* @__PURE__ */ jsx(Tooltip, { label: "View has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
           ThemeIcon,
           {
@@ -162,7 +162,7 @@ const NotationPanel = memo(() => {
           translateX: "100%",
           opacity: 0.6
         },
-        className: cx("react-flow__panel", container),
+        className: container,
         children: /* @__PURE__ */ jsx(Tooltip, { label: "Show notation", color: "dark", fz: "xs", ...portalProps, children: /* @__PURE__ */ jsx(
           ActionIcon,
           {

package/dist/likec4diagram/useLayoutConstraints.d.ts

@@ -2,7 +2,7 @@ import { NonEmptyArray } from '@likec4/core';
 import { InternalNode as RFInternalNode, OnNodeDrag, XYPosition } from '@xyflow/react';
 import { XYStoreApi } from '../hooks';
 import { Types } from './types';
-type InternalNode = RFInternalNode<Types.Node>;
+type InternalNode = RFInternalNode<Types.AnyNode>;
 declare abstract class Rect {
     static readonly LeftPadding = 40;
     static readonly RightPadding = 40;

package/dist/likec4diagram/xyflow-diagram/diagram-view.d.ts

@@ -1,4 +1,4 @@
-import { BBox, DiagramView, WhereOperator } from '@likec4/core';
+import { DiagramView, WhereOperator, BBox } from '@likec4/core';
 import { Types } from '../types';
 export declare function diagramToXY(opts: {
     view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | 'bounds' | '_type'>;

package/dist/likec4diagram/xyflow-diagram/diagram-view.js

@@ -7,7 +7,7 @@ function diagramToXY(opts) {
     view,
     nodesSelectable: selectable
   } = opts;
-  view._type === "dynamic"; const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
+  const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
   const queue = Queue.from(view.nodes.reduce(
     (acc, node) => {
       nodeLookup.set(node.id, node);
@@ -43,12 +43,12 @@ function diagramToXY(opts) {
       }
     }
     const position = {
-      x: node.position[0],
-      y: node.position[1]
+      x: node.x,
+      y: node.y
     };
     if (parent) {
-      position.x -= parent.position[0];
-      position.y -= parent.position[1];
+      position.x -= parent.x;
+      position.y -= parent.y;
     }
     const id = ns + node.id;
     const base = {
@@ -79,13 +79,14 @@ function diagramToXY(opts) {
       depth: node.depth ?? 0,
       icon: node.icon ?? "none",
       tags: node.tags ?? null,
-      position: node.position
+      x: node.x,
+      y: node.y
     };
     const leafNodeData = {
       viewId: view.id,
       id: node.id,
       title: node.title,
-      technology: node.technology,
+      technology: node.technology ?? null,
       description: RichText.from(node.description),
       height: node.height,
       width: node.width,
@@ -95,7 +96,8 @@ function diagramToXY(opts) {
       style: node.style,
       icon: node.icon ?? null,
       tags: node.tags,
-      position: node.position,
+      x: node.x,
+      y: node.y,
       isMultiple: node.style?.multiple ?? false
     };
     if (node.kind === GroupElementKind) {
@@ -212,7 +214,8 @@ function diagramToXY(opts) {
         line: edge.line ?? "dashed",
         dir: edge.dir ?? "forward",
         head: edge.head ?? "normal",
-        tail: edge.tail ?? "none"
+        tail: edge.tail ?? "none",
+        astPath: edge.astPath
       },
       interactionWidth: 20
     });

package/dist/likec4diagram/xyflow-sequence/const.js

@@ -1,10 +1,3 @@
-const ACTOR_GAP = 60;
-const COLUMN_GAP = 32;
-const MIN_ROW_HEIGHT = 80;
-const PORT_HEIGHT = 32;
-const STEP_LABEL_MARGIN = 50;
-const FIRST_STEP_OFFSET = 30;
-const CONTINUOUS_OFFSET = 22;
 const SeqZIndex = {
   parallel: 1,
   actor: 10};
@@ -13,4 +6,4 @@ const SeqParallelAreaColor = {
   active: "amber"
 };
 
-export { ACTOR_GAP, COLUMN_GAP, CONTINUOUS_OFFSET, FIRST_STEP_OFFSET, MIN_ROW_HEIGHT, PORT_HEIGHT, STEP_LABEL_MARGIN, SeqParallelAreaColor, SeqZIndex };
+export { SeqParallelAreaColor, SeqZIndex };

package/dist/likec4diagram/xyflow-sequence/sequence-layout.d.ts

@@ -0,0 +1,7 @@
+import { BBox, LayoutedDynamicView } from '@likec4/core/types';
+import { Types } from '../types';
+export declare function sequenceLayoutToXY(view: LayoutedDynamicView): {
+    bounds: BBox;
+    xynodes: Array<Types.SequenceActorNode | Types.SequenceParallelArea | Types.ViewGroupNode>;
+    xyedges: Array<Types.SequenceStepEdge>;
+};