@likec4/diagram 1.39.5 → 1.40.0

package/dist/LikeC4Diagram.d.ts

@@ -2,4 +2,4 @@ import { Any } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4DiagramProperties<A> & LikeC4DiagramEventHandlers<A>>;
-export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, view, className, fitView, fitViewPadding, readonly, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, controls, showDiagramTitle, showNotations, showNavigationButtons, enableDynamicViewWalkthrough, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, renderControls, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, view, className, readonly, controls, fitView, fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, showDiagramTitle, showNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, renderControls, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -13,6 +13,7 @@ import { IconRendererProvider } from './context/IconRenderer.js';
 import { DiagramFeatures } from './context/DiagramFeatures.js';
 import { DiagramEventHandlers } from './context/DiagramEventHandlers.js';
 import { RootContainer } from './context/RootContainer.js';
+import { FitViewPaddings } from './base/const.js';
 
 function LikeC4Diagram({
   onCanvasClick,
@@ -28,9 +29,10 @@ function LikeC4Diagram({
   onBurgerMenuClick,
   view,
   className,
-  fitView = true,
-  fitViewPadding = "8px",
   readonly = true,
+  controls = !readonly,
+  fitView = true,
+  fitViewPadding = controls === "next" ? FitViewPaddings.withControls : FitViewPaddings.default,
   pannable = true,
   zoomable = true,
   background = "dots",
@@ -41,11 +43,11 @@ function LikeC4Diagram({
   enableRelationshipBrowser = enableRelationshipDetails,
   nodesDraggable = !readonly,
   nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
-  controls = !readonly,
   showDiagramTitle = true,
   showNotations = true,
   showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = false,
+  dynamicViewVariant,
   enableSearch = true,
   initialWidth,
   initialHeight,
@@ -54,7 +56,7 @@ function LikeC4Diagram({
   renderIcon,
   renderControls,
   where,
-  reactFlowProps = {},
+  reactFlowProps,
   renderNodes,
   children
 }) {
@@ -126,6 +128,7 @@ function LikeC4Diagram({
                         fitViewPadding,
                         nodesSelectable,
                         where: where ?? null,
+                        dynamicViewVariant,
                         children: /* @__PURE__ */ jsx(ControlsCustomLayoutProvider, { value: renderControls ?? null, children: /* @__PURE__ */ jsx(
                           LikeC4DiagramXYFlow,
                           {

package/dist/LikeC4Diagram.props.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEdge, DiagramNode, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types';
 import { ReactFlowProps as XYFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { SetRequired } from 'type-fest';
@@ -183,6 +183,11 @@ export interface LikeC4DiagramProperties<A extends Any = Any> {
      * @default false
      */
     enableDynamicViewWalkthrough?: boolean | undefined;
+    /**
+     * Default dynamic view display variant
+     * @default 'diagram'
+     */
+    dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
     /**
      * Display element tags in the bottom left corner
      * @default false

package/dist/base/const.d.ts

@@ -6,3 +6,12 @@ export declare const ZIndexes: {
 };
 export declare const MinZoom = 0.05;
 export declare const MaxZoom = 3;
+export declare const FitViewPaddings: {
+    default: "16px";
+    withControls: {
+        top: "50px";
+        left: "16px";
+        right: "16px";
+        bottom: "16px";
+    };
+};

package/dist/base/const.js

@@ -7,5 +7,14 @@ const ZIndexes = {
 };
 const MinZoom = 0.05;
 const MaxZoom = 3;
+const FitViewPaddings = {
+  default: "16px",
+  withControls: {
+    top: "50px",
+    left: "16px",
+    right: "16px",
+    bottom: "16px"
+  }
+};
 
-export { MaxZoom, MinZoom, ZIndexes };
+export { FitViewPaddings, MaxZoom, MinZoom, ZIndexes };

package/dist/base/index.d.ts

@@ -1,2 +1,3 @@
 export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
 export { Base, type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';
+export * from './const';

package/dist/base/primitives/edge/EdgeLabel.js

@@ -28,6 +28,7 @@ const EdgeLabel = forwardRef(({
     isStepEdge: stepNum !== null,
     cursor: selectable || stepNum !== null ? "pointer" : "default"
   });
+  const hasLabel = isTruthy(label) || isTruthy(technology);
   return /* @__PURE__ */ jsxs(
     m.div,
     {
@@ -40,7 +41,7 @@ const EdgeLabel = forwardRef(({
       ...rest,
       children: [
         stepNum !== null && /* @__PURE__ */ jsx(Box, { className: classes.stepNumber, children: stepNum }),
-        /* @__PURE__ */ jsxs(Box, { className: classes.labelContents, children: [
+        hasLabel && /* @__PURE__ */ jsxs(Box, { className: classes.labelContents, children: [
           isTruthy(label) && /* @__PURE__ */ jsx(
             Box,
             {

package/dist/base/primitives/edge/EdgeLabelContainer.js

@@ -1,8 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { EdgeLabelRenderer } from '@xyflow/react';
+import { useCallback } from 'react';
 import { isNumber } from 'remeda';
 import { ZIndexes } from '../../const.js';
+import { useXYStore } from '../../../hooks/useXYFlow.js';
 
 const toCssVarValue = (value) => {
   if (value === void 0) return void 0;
@@ -25,9 +27,13 @@ function EdgeLabelContainer({
   children,
   ...rest
 }) {
-  let zIndex = ZIndexes.Edge;
+  let zIndex = useXYStore(
+    useCallback((state) => {
+      return state.edgeLookup.get(id)?.zIndex ?? ZIndexes.Edge;
+    }, [id])
+  );
   if (isHovered || isActive) {
-    zIndex = ZIndexes.Element + 1;
+    zIndex += 100;
   }
   let labelX = labelXY?.x ?? labelBBox?.x, labelY = labelXY?.y ?? labelBBox?.y;
   if (labelX === void 0 || labelY === void 0) {
@@ -37,6 +43,7 @@ function EdgeLabelContainer({
   return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
     "div",
     {
+      ...rest,
       className: cx(
         "nodrag nopan",
         "likec4-edge-label-container",
@@ -57,11 +64,10 @@ function EdgeLabelContainer({
         ...style,
         transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate || ""}`
       },
-      ...rest,
       children
     },
     id
-  ) }, id);
+  ) });
 }
 
 export { EdgeLabelContainer };

package/dist/base/primitives/edge/EdgePath.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { forwardRef } from 'react';
-import { hideOnReducedGraphics, markerContext, edgePathBg, cssEdgePath } from './edge.css.js';
+import { markerContext, edgePathBg, cssEdgePath } from './edge.css.js';
 import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers.js';
 
 const EdgePath = forwardRef(({
@@ -13,6 +13,7 @@ const EdgePath = forwardRef(({
       tail,
       head
     },
+    selectable = true,
     style,
     interactionWidth
   },
@@ -36,19 +37,22 @@ const EdgePath = forwardRef(({
     strokeDasharray = "8,10";
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    selectable && /* @__PURE__ */ jsx(
       "path",
       {
         className: cx(
           "react-flow__edge-interaction",
-          hideOnReducedGraphics,
+          "hide-on-reduced-graphics",
           css({
-            fill: "[none]",
-            strokeOpacity: 0
+            fill: "none"
           })
         ),
         d: svgPath,
-        strokeWidth: interactionWidth ?? 10
+        style: {
+          strokeWidth: interactionWidth ?? 10,
+          stroke: "currentcolor",
+          strokeOpacity: 0
+        }
       }
     ),
     /* @__PURE__ */ jsxs("g", { className: markerContext, onPointerDown: onEdgePointerDown, children: [
@@ -59,7 +63,11 @@ const EdgePath = forwardRef(({
       /* @__PURE__ */ jsx(
         "path",
         {
-          className: cx("react-flow__edge-path", edgePathBg),
+          className: cx(
+            "react-flow__edge-path",
+            "hide-on-reduced-graphics",
+            edgePathBg
+          ),
           d: svgPath,
           style,
           strokeLinecap: "round"
@@ -71,7 +79,7 @@ const EdgePath = forwardRef(({
           ref: svgPathRef,
           className: cx(
             "react-flow__edge-path",
-            "react-flow__edge-interaction",
+            selectable && "react-flow__edge-interaction",
             cssEdgePath
           ),
           d: svgPath,
@@ -86,5 +94,6 @@ const EdgePath = forwardRef(({
     ] })
   ] });
 });
+EdgePath.displayName = "EdgePath";
 
 export { EdgePath };

package/dist/base/primitives/edge/edge.css.d.ts

@@ -1,5 +1,4 @@
 export declare const edgeContainer: string;
-export declare const hideOnReducedGraphics: string;
 export declare const edgePathBg: string;
 export declare const markerContext: string;
 export declare const cssEdgePath: string;

package/dist/base/primitives/edge/edge.css.js

@@ -6,17 +6,9 @@ const edgeContainer = css({
     transition: "none"
   }
 });
-const _hideOnReducedGraphics = css.raw({
-  _reduceGraphicsOnPan: {
-    display: "none"
-  },
-  _smallZoom: {
-    display: "none"
-  }
-});
-const hideOnReducedGraphics = css(_hideOnReducedGraphics);
-const edgePathBg = css(_hideOnReducedGraphics, {
-  fill: "[none]",
+const edgePathBg = css({
+  pointerEvents: "none",
+  fill: "none",
   strokeWidth: "calc(var(--xy-edge-stroke-width) + 2)",
   strokeOpacity: 0.08,
   _noReduceGraphics: {
@@ -42,8 +34,8 @@ const markerContext = css({
   stroke: "[var(--xy-edge-stroke)]"
 });
 const cssEdgePath = css({
-  fill: "[none!]",
-  strokeDashoffset: 10,
+  fill: "none",
+  strokeDashoffset: 0,
   _noReduceGraphics: {
     animationStyle: "xyedgeAnimated",
     animationPlayState: "paused",
@@ -76,4 +68,4 @@ const cssEdgePath = css({
   }
 });
 
-export { cssEdgePath, edgeContainer, edgePathBg, hideOnReducedGraphics, markerContext };
+export { cssEdgePath, edgeContainer, edgePathBg, markerContext };

package/dist/base/primitives/element/ElementActionButtons.js

@@ -5,7 +5,6 @@ import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import * as m from 'motion/react-m';
-import { useIsZoomTooSmall } from '../../../hooks/useXYFlow.js';
 import { stopPropagation } from '../../../utils/xyflow.js';
 
 const container = css({
@@ -37,8 +36,7 @@ function ElementActionButtons({
   buttons
 }) {
   const id = useId();
-  const zoomTooSmall = useIsZoomTooSmall();
-  if (!buttons.length || zoomTooSmall) {
+  if (!buttons.length) {
     return null;
   }
   return /* @__PURE__ */ jsx(Box, { className: container, children: /* @__PURE__ */ jsx(

package/dist/base/primitives/element/ElementNodeContainer.d.ts

@@ -2,7 +2,6 @@ import { Color, ElementShape, ElementStyle } from '@likec4/core/types';
 import { MotionNodeLayoutOptions } from 'motion/react';
 import { CSSProperties, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { NodeProps } from '../../types';
-import { ShapeSize, SpacingSize, TextSize } from '@likec4/core';
 export type RequiredData = {
     color: Color;
     shape: ElementShape;
@@ -15,11 +14,6 @@ export type ElementNodeContainerProps = {
     style?: CSSProperties | undefined;
     [key: `data-${string}`]: string | undefined;
 } & MotionNodeLayoutOptions;
-export declare function nodeSizes({ size, padding, textSize, }: ElementStyle): {
-    size: ShapeSize;
-    padding: SpacingSize;
-    textSize: TextSize;
-};
 /**
  * Top-level primitive to compose leaf nodes renderers.
  * This container provides the state via data-* attributes

package/dist/base/primitives/element/ElementNodeContainer.js

@@ -1,33 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from '@likec4/core/types';
+import { ensureSizes } from '@likec4/core/types';
 import { cx } from '@likec4/styles/css';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
 import { container } from './ElementNodeContainer.css.js';
 
-function nodeSizes({
-  size,
-  padding,
-  textSize
-}) {
-  if (!size && !!textSize) {
-    size = textSize;
-  }
-  if (!textSize && !!size) {
-    textSize = size;
-  }
-  if (!padding && !!size) {
-    padding = size;
-  }
-  size ??= DefaultShapeSize;
-  textSize ??= DefaultTextSize;
-  padding ??= DefaultPaddingSize;
-  return {
-    size,
-    padding,
-    textSize
-  };
-}
 const ElementNodeContainer = forwardRef(({
   nodeProps: {
     selected = false,
@@ -56,7 +33,7 @@ const ElementNodeContainer = forwardRef(({
     size,
     padding,
     textSize
-  } = nodeSizes(data.style ?? {});
+  } = ensureSizes(data.style ?? {});
   return /* @__PURE__ */ jsx(
     m.div,
     {
@@ -93,4 +70,4 @@ const ElementNodeContainer = forwardRef(({
 });
 ElementNodeContainer.displayName = "ElementNodeContainer";
 
-export { ElementNodeContainer, nodeSizes };
+export { ElementNodeContainer };

package/dist/base/primitives/element/ElementTitle.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { ensureSizes } from '@likec4/core/types';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { elementNodeIcon, elementNodeData } from '@likec4/styles/recipes';
@@ -6,7 +7,6 @@ import { Text } from '@mantine/core';
 import { isTruthy, isEmpty, isNumber } from 'remeda';
 import { IconRenderer } from '../../../context/IconRenderer.js';
 import { MarkdownBlock } from '../MarkdownBlock.js';
-import { nodeSizes } from './ElementNodeContainer.js';
 
 function ElementTitle({ id, data, iconSize }) {
   const elementIcon = IconRenderer({
@@ -22,7 +22,7 @@ function ElementTitle({ id, data, iconSize }) {
     hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !isEmpty(data.technology ?? "")
   });
-  const size = nodeSizes(data.style).size;
+  const { size } = ensureSizes(data.style);
   const isSm = size === "sm";
   const isSmOrXs = isSm || size === "xs";
   return /* @__PURE__ */ jsxs(

package/dist/base/types.d.ts

@@ -2,8 +2,8 @@ import { OptionalKeysOf, SetRequired, Simplify } from 'type-fest';
 import type * as RF from '@xyflow/react';
 type RFNode<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string | undefined = string | undefined> = RF.Node<NodeData, NodeType>;
 type RFEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = RF.Edge<EdgeData, EdgeType>;
-type ReactFlowNodeProps<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string | undefined = string | undefined> = RF.NodeProps<RFNode<NodeData, NodeType>>;
-type ReactFlowEdgeProps<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = RF.EdgeProps<RFEdge<EdgeData, EdgeType>>;
+type ReactFlowNodeProps<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string | undefined = string | undefined> = RF.NodeProps<RF.Node<NodeData, NodeType>>;
+type ReactFlowEdgeProps<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = RF.EdgeProps<RF.Edge<EdgeData, EdgeType>>;
 export declare namespace Base {
     export type Dimmed = 'immediate' | boolean;
     export type NodeData = {
@@ -87,7 +87,7 @@ export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends s
 /**
  * ReactFlow Custom Edge properties with BaseEdgeData at least
  */
-export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = SetRequired<Simplify<ReactFlowEdgeProps<Base.EdgeData & T, EdgeType>>, 'data'>;
+export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = Simplify<SetRequired<ReactFlowEdgeProps<Base.EdgeData & T, EdgeType>, 'data'>>;
 export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<RFNode<Data, NodeType>, 'type' | 'initialWidth' | 'initialHeight'>;
 export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends string> = SetRequired<RFEdge<Data, EdgeType>, 'type' | 'data'>;
 export {};

package/dist/bundle/LikeC4View.js

@@ -4,6 +4,7 @@ import { Box, ActionIcon } from '@mantine/core';
 import { useCallbackRef, shallowEqual } from '@mantine/hooks';
 import { memo, useState } from 'react';
 import { isBoolean } from 'remeda';
+import { FitViewPaddings } from '../base/const.js';
 import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
 import { LikeC4Diagram } from '../LikeC4Diagram.js';
 import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
@@ -31,12 +32,6 @@ function LikeC4View({
   }
   return /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props });
 }
-const DEFAULT_BROWSER_PADDING = {
-  top: "50px",
-  bottom: "16px",
-  left: "16px",
-  right: "16px"
-};
 const LikeC4ViewInner = memo(({
   view,
   className,
@@ -46,8 +41,6 @@ const LikeC4ViewInner = memo(({
   colorScheme: explicitColorScheme,
   injectFontCss = true,
   controls = false,
-  fitView = true,
-  fitViewPadding = "16px",
   background = "transparent",
   browser = true,
   showDiagramTitle = false,
@@ -117,8 +110,8 @@ const LikeC4ViewInner = memo(({
               pannable,
               zoomable,
               background,
-              fitView,
-              fitViewPadding,
+              fitView: true,
+              fitViewPadding: FitViewPaddings.default,
               showDiagramTitle,
               showNotations: showNotations && hasNotations,
               enableDynamicViewWalkthrough,
@@ -138,7 +131,6 @@ const LikeC4ViewInner = memo(({
               ),
               enableSearch: false,
               ...isBrowserEnabled && {
-                onNavigateTo,
                 onCanvasClick: onNavigateToThisView,
                 onNodeClick: onNavigateToThisView
               },
@@ -164,8 +156,8 @@ const LikeC4ViewInner = memo(({
                 controls: "next",
                 readonly: true,
                 fitView: true,
-                fitViewPadding: DEFAULT_BROWSER_PADDING,
                 ...props,
+                fitViewPadding: FitViewPaddings.withControls,
                 ...browserProps,
                 showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.nodes.length ?? 0) > 0,
                 renderNodes

package/dist/bundle/LikeC4View.props.d.ts

@@ -1,4 +1,3 @@
-import { WhereOperator } from '@likec4/core/types';
 import { CSSProperties } from 'react';
 import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from '../LikeC4Diagram.props';
 import type * as t from '@likec4/core/types';
@@ -87,9 +86,14 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
     enableFocusMode?: boolean | undefined;
     /**
      * If Walkthrough for dynamic views should be enabled
-     * @default enableFocusMode
+     * @default false
      */
     enableDynamicViewWalkthrough?: boolean | undefined;
+    /**
+     * Default dynamic view display variant
+     * @default 'diagram'
+     */
+    dynamicViewVariant?: t.DynamicViewDisplayVariant | undefined;
     /**
      * Enable popup with element details
      * @default false
@@ -117,7 +121,7 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
      * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
      */
     reduceGraphics?: 'auto' | boolean | undefined;
-    where?: WhereOperator<A> | undefined;
+    where?: t.WhereOperator<A> | undefined;
     /**
      * Override some react flow props
      */
@@ -185,6 +189,11 @@ export interface LikeC4BrowserProps {
      * @default true
      */
     enableDynamicViewWalkthrough?: boolean | undefined;
+    /**
+     * Default dynamic view display variant
+     * @default 'diagram'
+     */
+    dynamicViewVariant?: t.DynamicViewDisplayVariant | undefined;
     /**
      * Enable popup with element details
      * @default true

package/dist/bundle/custom.js

@@ -1,4 +1,4 @@
-export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, viewGroupNode } from '../custom/customNodes.js';
+export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from '../custom/customNodes.js';
 export { CompoundActionButton } from '../base/primitives/compound/CompoundActionButton.js';
 export { CompoundDetailsButton } from '../base/primitives/compound/CompoundDetailsButton.js';
 export { CompoundNodeContainer } from '../base/primitives/compound/CompoundNodeContainer.js';

package/dist/custom/customNodes.d.ts

@@ -230,11 +230,17 @@ export type CustomViewGroupNodeProps = {
     nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>;
     nodeModel: NodeModel.IsGroup<Any>;
 };
+export declare const sequenceActorNode: CustomNodeComponent<CustomSequenceActorNodeProps>;
+export type CustomSequenceActorNodeProps = {
+    nodeProps: NodeProps<Types.SequenceActorNodeData, 'seq-actor'>;
+    nodeModel: NodeModel.WithElement<Any>;
+};
 export interface CustomNodes {
     element?: FunctionComponent<NodeProps<Types.ElementNodeData, 'element'>>;
     deployment?: FunctionComponent<NodeProps<Types.DeploymentElementNodeData, 'deployment'>>;
     compoundElement?: FunctionComponent<NodeProps<Types.CompoundElementNodeData, 'compound-element'>>;
     compoundDeployment?: FunctionComponent<NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>>;
     viewGroup?: FunctionComponent<NodeProps<Types.ViewGroupNodeData, 'view-group'>>;
+    sequenceActor?: FunctionComponent<NodeProps<Types.SequenceActorNodeData, 'seq-actor'>>;
 }
 export {};

package/dist/custom/customNodes.js

@@ -26,5 +26,6 @@ const deploymentNode = customDiagramNode;
 const compoundElementNode = customDiagramNode;
 const compoundDeploymentNode = customDiagramNode;
 const viewGroupNode = customDiagramNode;
+const sequenceActorNode = customDiagramNode;
 
-export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, viewGroupNode };
+export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode };

package/dist/custom/index.js

@@ -1,4 +1,4 @@
-export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, viewGroupNode } from './customNodes.js';
+export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from './customNodes.js';
 export { CompoundActionButton } from '../base/primitives/compound/CompoundActionButton.js';
 export { CompoundDetailsButton } from '../base/primitives/compound/CompoundDetailsButton.js';
 export { CompoundNodeContainer } from '../base/primitives/compound/CompoundNodeContainer.js';

package/dist/hooks/useDiagram.d.ts

@@ -1,4 +1,4 @@
-import { aux, DiagramEdge, DiagramNode, DiagramView, NodeId, NodeNotation as ElementNotation, scalar } from '@likec4/core/types';
+import { aux, DiagramEdge, DiagramNode, DiagramView, DynamicViewDisplayVariant, NodeId, NodeNotation as ElementNotation, scalar } from '@likec4/core/types';
 import { DependencyList } from 'react';
 import { PartialDeep } from 'type-fest';
 import { FeatureName } from '../context/DiagramFeatures';
@@ -92,6 +92,10 @@ export interface DiagramApi {
     highlightNotation(notation: ElementNotation, kind?: string): void;
     unhighlightNotation(): void;
     openSearch(searchValue?: string): void;
+    /**
+     * Switch dynamic view display variant
+     */
+    switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void;
 }
 /**
  * Diagram API

package/dist/hooks/useDiagram.js

@@ -118,6 +118,9 @@ function useDiagram() {
     },
     openSearch: (searchValue) => {
       actor.send({ type: "open.search", ...searchValue && { search: searchValue } });
+    },
+    switchDynamicViewVariant: (variant) => {
+      actor.send({ type: "switch.dynamicViewVariant", variant });
     }
   }), [actor]);
 }