@likec4/diagram 1.42.1 → 1.44.0

package/dist/LikeC4Diagram.d.ts

@@ -8,4 +8,4 @@ export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4Di
  *
  * Use {@link ReactLikeC4} or {@link LikeC4View} for ready-to-use component
  */
-export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, onInitialized, view, className, readonly, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, showNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, 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, onLayoutTypeChange, onInitialized, view, className, readonly, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, nodesDraggable, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCustomCompareMemo } from '@react-hookz/web';
 import { ReactFlowProvider } from '@xyflow/react';
-import { deepEqual } from 'fast-equals';
 import { useRef } from 'react';
 import { isPlainObject, mapValues } from 'remeda';
 import { RootContainer } from './components/RootContainer.js';
@@ -11,7 +10,7 @@ import { LikeC4DiagramUI } from './likec4diagram/DiagramUI.js';
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
 import { DiagramActorProvider } from './likec4diagram/state/DiagramActorProvider.js';
 import { LikeC4Styles } from './LikeC4Styles.js';
-import { getViewBounds } from './utils/get-view-bounds.js';
+import { pickViewBounds } from './utils/view-bounds.js';
 import { MinZoom, MaxZoom, FitViewPaddings } from './base/const.js';
 import { EnsureMantine } from './context/EnsureMantine.js';
 import { FramerMotionConfig } from './context/FramerMotionConfig.js';
@@ -31,6 +30,7 @@ function LikeC4Diagram({
   onNodeContextMenu,
   onOpenSource,
   onBurgerMenuClick,
+  onLayoutTypeChange,
   onInitialized,
   view,
   className,
@@ -46,16 +46,16 @@ function LikeC4Diagram({
   enableElementDetails = false,
   enableRelationshipDetails = false,
   enableRelationshipBrowser = false,
+  enableCompareWithLatest = !!onLayoutTypeChange,
   nodesDraggable = !readonly,
   nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
-  showNotations = true,
+  enableNotations = false,
   showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = false,
   dynamicViewVariant,
   enableSearch = false,
   initialWidth,
   initialHeight,
-  experimentalEdgeEditing = !readonly,
   reduceGraphics = "auto",
   renderIcon,
   where,
@@ -65,7 +65,7 @@ function LikeC4Diagram({
 }) {
   const id = useId();
   const initialRef = useRef(null);
-  const bounds = getViewBounds(view, dynamicViewVariant);
+  const bounds = pickViewBounds(view, dynamicViewVariant);
   const fitViewPadding = useNormalizedViewPadding(_fitViewPadding);
   if (initialRef.current == null) {
     initialRef.current = {
@@ -101,11 +101,11 @@ function LikeC4Diagram({
             enableSearch,
             enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
             enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
-            enableEdgeEditing: experimentalEdgeEditing,
-            enableNotations: showNotations,
+            enableNotations,
             enableVscode: !!onOpenSource,
             enableControls: controls,
-            enableElementTags
+            enableElementTags,
+            enableCompareWithLatest: enableCompareWithLatest && !!onLayoutTypeChange
           },
           children: /* @__PURE__ */ jsxs(
             DiagramEventHandlers,
@@ -122,7 +122,8 @@ function LikeC4Diagram({
                 onNodeContextMenu,
                 onOpenSource,
                 onBurgerMenuClick,
-                onInitialized
+                onInitialized,
+                onLayoutTypeChange
               },
               children: [
                 /* @__PURE__ */ jsx(LikeC4Styles, { id }),
@@ -138,6 +139,7 @@ function LikeC4Diagram({
                         zoomable,
                         pannable,
                         fitViewPadding,
+                        nodesDraggable,
                         nodesSelectable,
                         where: where ?? null,
                         dynamicViewVariant,
@@ -145,8 +147,6 @@ function LikeC4Diagram({
                           /* @__PURE__ */ jsx(
                             LikeC4DiagramXYFlow,
                             {
-                              nodesDraggable,
-                              nodesSelectable,
                               background,
                               reactFlowProps,
                               renderNodes,
@@ -182,8 +182,11 @@ function useNormalizedViewPadding(raw) {
       return toLiteralPaddingWithUnit(raw);
     },
     [raw],
-    deepEqual
+    compareViewPaddingObject
   );
 }
+const compareViewPaddingObject = ([a], [b]) => {
+  return a === b || isPlainObject(a) && isPlainObject(b) && a.bottom == b.bottom && a.left == b.left && a.right == b.right && a.top == b.top;
+};
 
 export { LikeC4Diagram };

package/dist/LikeC4Diagram.props.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutedView, LayoutType, ViewChange, WhereOperator } from '@likec4/core/types';
 import { ReactFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { CamelCasedProperties, SetRequired } from 'type-fest';
@@ -39,6 +39,11 @@ export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
  *   bottom: '8px',
  *   left: '8px',
  * }
+ *
+ * {
+ *   x: '16px',
+ *   y: '16px',
+ * }
  */
 export type ViewPadding = PaddingWithUnit | {
     top?: PaddingWithUnit;
@@ -78,8 +83,8 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      */
     fitView?: boolean | undefined;
     /**
-     * Padding around the diagram
-     * @default '8px'
+     * Padding around the diagram (number - pixels)
+     * @default 16 - 16px
      *
      * @see {@link ViewPadding}
      *
@@ -88,15 +93,15 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * <LikeC4Diagram
      *   fitViewPadding={{
      *     x: '16px',
-     *     y: '16px',
+     *     y: 16,
      *   }}
      * />
      *
      * <LikeC4Diagram
      *   fitViewPadding={{
-     *     top: '8px',
+     *     top: 8,
      *     right: '8px',
-     *     bottom: '8px',
+     *     bottom: '1px',
      *     left: '8px',
      *   }}
      * />
@@ -135,9 +140,9 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * Display notations in the bottom right corner
      * (Active if only notations are present)
      *
-     * @default true
+     * @default false
      */
-    showNotations?: boolean | undefined;
+    enableNotations?: boolean | undefined;
     /**
      * Display dropdown with details on relationship's label click
      * @default false
@@ -169,6 +174,11 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * @default false
      */
     enableDynamicViewWalkthrough?: boolean | undefined;
+    /**
+     * Enable "Compare with auto layout" action when view was manually modified and out of sync with latest model
+     * @default true if `onLayoutTypeChange` is set, false otherwise
+     */
+    enableCompareWithLatest?: boolean | undefined;
     /**
      * Default dynamic view display variant
      * @default 'diagram'
@@ -179,11 +189,6 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * @default false
      */
     enableElementTags?: boolean | undefined;
-    /**
-     * Experimental feature to enable edge editing
-     * @default false
-     */
-    experimentalEdgeEditing?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      * Enable it if you have a large or static view
@@ -235,6 +240,7 @@ export type OnEdgeClick<A extends Any = Unknown> = (edge: DiagramEdge<A>, event:
  * On pane/canvas click (not on any node or edge)
  */
 export type OnCanvasClick = (event: ReactMouseEvent) => void;
+export type OnCanvasContextMenu = (event: ReactMouseEvent | MouseEvent) => void;
 export type ChangeEvent = {
     change: ViewChange;
 };
@@ -243,12 +249,13 @@ export type OnInitialized = (params: {
     diagram: DiagramApi;
     xyflow: XYFlowInstance;
 }) => void;
+export type OnLayoutTypeChange = (layoutType: LayoutType) => void;
 export interface LikeC4DiagramEventHandlers<A extends Any = Unknown> {
     onChange?: OnChange | null | undefined;
     onNavigateTo?: OnNavigateTo<A> | null | undefined;
     onNodeClick?: OnNodeClick<A> | null | undefined;
     onNodeContextMenu?: OnNodeClick<A> | null | undefined;
-    onCanvasContextMenu?: OnCanvasClick | null | undefined;
+    onCanvasContextMenu?: OnCanvasContextMenu | null | undefined;
     onEdgeClick?: OnEdgeClick<A> | null | undefined;
     onEdgeContextMenu?: OnEdgeClick<A> | null | undefined;
     onCanvasClick?: OnCanvasClick | null | undefined;
@@ -256,4 +263,11 @@ export interface LikeC4DiagramEventHandlers<A extends Any = Unknown> {
     onBurgerMenuClick?: null | undefined | (() => void);
     onOpenSource?: OnOpenSource<A> | null | undefined;
     onInitialized?: OnInitialized | null | undefined;
+    /**
+     * Triggered when user changes layout type (e.g. from 'manual' to 'auto')
+     * Expected another `view` to be passed to the diagram
+     *
+     * @param layoutType new layout type
+     */
+    onLayoutTypeChange?: OnLayoutTypeChange | null | undefined;
 }

package/dist/LikeC4ProjectsProvider.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { useCallbackRef } from '@mantine/hooks';
 import { useCustomCompareMemo } from '@react-hookz/web';
 import { shallowEqual } from 'fast-equals';
 import { useContext } from 'react';
 import { LikeC4ProjectsContext } from './context/LikeC4ProjectsContext.js';
+import { useCallbackRef } from './hooks/useCallbackRef.js';
 
 function LikeC4ProjectsProvider({
   children,

package/dist/LikeC4View.d.ts

@@ -56,9 +56,28 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
     fitView?: boolean | undefined;
     /**
      * Padding around the diagram
-     * @default '8px'
+     * @default '16px'
      *
      * @see {@link ViewPadding}
+     *
+     * @example
+     * ```tsx
+     * <LikeC4View
+     *   fitViewPadding={{
+     *     x: '16px',
+     *     y: 16,
+     *   }}
+     * />
+     *
+     * <LikeC4View
+     *   fitViewPadding={{
+     *     top: 8,
+     *     right: '8px',
+     *     bottom: '1px',
+     *     left: '8px',
+     *   }}
+     * />
+     * ```
      */
     fitViewPadding?: ViewPadding | undefined;
     /**
@@ -70,7 +89,7 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
      * Display notations of the view
      * @default false
      */
-    showNotations?: boolean | undefined;
+    enableNotations?: boolean | undefined;
     /**
      * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
      * Conflicts with `browser` prop
@@ -210,7 +229,12 @@ export interface LikeC4BrowserProps {
      * Display notations of the view
      * @default true
      */
-    showNotations?: boolean | undefined;
+    enableNotations?: boolean | undefined;
+    /**
+     * Enable "Compare with auto layout" action when view was manually modified and out of sync with latest model
+     * @default true
+     */
+    enableCompareWithLatest?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      *
@@ -236,4 +260,4 @@ export interface LikeC4BrowserProps {
  *
  * Component is wrapped in ShadowRoot to isolate styles.
  */
-export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, background, browser, showNavigationButtons, showNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, background, browser, showNavigationButtons, enableNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4View.js

@@ -1,18 +1,19 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
-import { Box, ActionIcon } from '@mantine/core';
-import { useCallbackRef } from '@mantine/hooks';
+import { Box } from '@likec4/styles/jsx';
+import { ActionIcon } from '@mantine/core';
 import { useState } from 'react';
 import { isBoolean } from 'remeda';
 import { FitViewPaddings } from './base/const.js';
 import { ErrorMessage, ViewNotFound } from './components/ViewNotFound.js';
 import { FramerMotionConfig } from './context/FramerMotionConfig.js';
+import { useCallbackRef } from './hooks/useCallbackRef.js';
 import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
 import { LikeC4Diagram } from './LikeC4Diagram.js';
 import { Overlay } from './overlays/overlay/Overlay.js';
 import { ShadowRoot } from './shadowroot/ShadowRoot.js';
-import { getViewBounds } from './utils/get-view-bounds.js';
-import IconX from './node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import { pickViewBounds } from './utils/view-bounds.js';
+import IconX from './node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 const cssInteractive = css({
   cursor: "pointer",
@@ -33,7 +34,7 @@ function LikeC4View({
   background = "transparent",
   browser = true,
   showNavigationButtons = false,
-  showNotations,
+  enableNotations,
   enableFocusMode = false,
   enableDynamicViewWalkthrough = false,
   enableElementDetails = false,
@@ -49,14 +50,21 @@ function LikeC4View({
   ...props
 }) {
   const likec4model = useOptionalLikeC4Model();
-  const [browserViewId, onNavigateTo] = useState(null);
+  const [layoutType, setLayoutType] = useState("manual");
+  const [browserViewId, _onNavigateTo] = useState(null);
+  const onNavigateTo = useCallbackRef((viewId2) => {
+    if (viewId2 && viewId2 !== browserViewId) {
+      setLayoutType("manual");
+    }
+    _onNavigateTo(viewId2);
+  });
   const onNavigateToThisView = useCallbackRef(() => {
     onNavigateTo(viewId);
   });
   if (!likec4model) {
     return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
   }
-  const view = likec4model.findView(viewId)?.$view;
+  const view = likec4model.findView(viewId)?.$layouted;
   if (!view) {
     return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
   }
@@ -67,13 +75,13 @@ function LikeC4View({
       '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
     ] });
   }
-  const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null;
-  const notations = view.notation?.nodes ?? [];
-  const hasNotations = notations.length > 0;
-  showNotations ??= hasNotations;
+  const browserViewModel = browserViewId ? likec4model.findView(browserViewId) : null;
+  const browserView = layoutType === "manual" ? browserViewModel?.$layouted : browserViewModel?.$view;
+  const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
+  const browserViewHasNotations = (browserView?.notation?.nodes?.length ?? 0) > 0;
   const isBrowserEnabled = browser !== false;
   const browserProps = isBoolean(browser) ? {} : browser;
-  const bounds = getViewBounds(view, props.dynamicViewVariant);
+  const bounds = pickViewBounds(view, props.dynamicViewVariant);
   return /* @__PURE__ */ jsx(
     ShadowRoot,
     {
@@ -98,10 +106,10 @@ function LikeC4View({
             background,
             fitView: true,
             fitViewPadding: FitViewPaddings.default,
-            showNotations,
+            enableNotations: hasNotations,
             enableDynamicViewWalkthrough,
             showNavigationButtons,
-            experimentalEdgeEditing: false,
+            enableCompareWithLatest: false,
             enableFocusMode,
             enableRelationshipDetails,
             enableElementDetails,
@@ -142,17 +150,20 @@ function LikeC4View({
               enableRelationshipDetails: true,
               enableSearch: true,
               enableElementTags: true,
+              enableCompareWithLatest: true,
               controls: true,
               readonly: true,
+              nodesDraggable: false,
               fitView: true,
               ...props,
               fitViewPadding: FitViewPaddings.withControls,
               ...browserProps,
-              showNotations: browserProps.showNotations ?? showNotations,
-              renderNodes
+              enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
+              renderNodes,
+              onLayoutTypeChange: setLayoutType
             }
           ),
-          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "1rem", right: "1rem", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "4", right: "4", zIndex: "999", children: /* @__PURE__ */ jsx(
             ActionIcon,
             {
               variant: "default",

package/dist/ReactLikeC4.d.ts

@@ -36,4 +36,4 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
  *
  * Component is wrapped in ShadowRoot to isolate styles.
  */
-export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, colorScheme, injectFontCss, keepAspectRatio, showNotations, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
+export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, colorScheme, injectFontCss, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;

package/dist/ReactLikeC4.js

@@ -4,15 +4,15 @@ import { ErrorMessage, ViewNotFound } from './components/ViewNotFound.js';
 import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
 import { LikeC4Diagram } from './LikeC4Diagram.js';
 import { ShadowRoot } from './shadowroot/ShadowRoot.js';
-import { getViewBounds } from './utils/get-view-bounds.js';
+import { pickViewBounds } from './utils/view-bounds.js';
 
 function ReactLikeC4({
   viewId,
   className,
   colorScheme,
   injectFontCss = true,
+  enableNotations,
   keepAspectRatio,
-  showNotations,
   style,
   mantineTheme,
   styleNonce,
@@ -33,10 +33,8 @@ function ReactLikeC4({
       '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
     ] });
   }
-  const notations = view.notation?.nodes ?? [];
-  const hasNotations = notations.length > 0;
-  showNotations ??= hasNotations;
-  const bounds = getViewBounds(view, props.dynamicViewVariant);
+  const bounds = pickViewBounds(view, props.dynamicViewVariant);
+  const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
   return /* @__PURE__ */ jsx(
     ShadowRoot,
     {
@@ -54,7 +52,7 @@ function ReactLikeC4({
         LikeC4Diagram,
         {
           view,
-          showNotations,
+          enableNotations: hasNotations,
           ...props
         }
       )

package/dist/StaticLikeC4Diagram.js

@@ -24,13 +24,13 @@ function StaticLikeC4Diagram({
       zoomable: false,
       controls: false,
       background,
-      showNotations: false,
+      enableNotations: false,
       enableElementDetails: false,
       enableRelationshipDetails,
       enableRelationshipBrowser,
       enableDynamicViewWalkthrough: false,
       showNavigationButtons: false,
-      experimentalEdgeEditing: false,
+      enableCompareWithLatest: false,
       enableFocusMode: false,
       enableSearch: false,
       nodesSelectable: false,

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,3 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+export { commonjsGlobal };

package/dist/_virtual/assign-dea9f7c8.cjs.js

@@ -0,0 +1,3 @@
+var assignDea9f7c8_cjs = {};
+
+export { assignDea9f7c8_cjs as __exports };

package/dist/_virtual/log-ec8d4df4.cjs.js

@@ -0,0 +1,3 @@
+var logEc8d4df4_cjs = {};
+
+export { logEc8d4df4_cjs as __exports };

package/dist/_virtual/raise-da5b247f.cjs.js

@@ -0,0 +1,3 @@
+var raiseDa5b247f_cjs = {};
+
+export { raiseDa5b247f_cjs as __exports };

package/dist/_virtual/xstate-actions.cjs.js

@@ -0,0 +1,5 @@
+import { __require as requireXstateActions_cjs } from '../node_modules/.pnpm/xstate@5.24.0_patch_hash_3a1bd6d012ec67bf6e38a00c3226d1be77089442f83aeb6e424b00ca2a11d21c/node_modules/xstate/actions/dist/xstate-actions.cjs.js';
+
+var xstateActions_cjsExports = requireXstateActions_cjs();
+
+export { xstateActions_cjsExports as x };

package/dist/_virtual/xstate-actions.cjs2.js

@@ -0,0 +1,3 @@
+var xstateActions_cjs = {};
+
+export { xstateActions_cjs as __exports };

package/dist/_virtual/xstate-dev.cjs.js

@@ -0,0 +1,3 @@
+var xstateDev_cjs = {};
+
+export { xstateDev_cjs as __exports };

package/dist/_virtual/xstate-guards.cjs.js

@@ -0,0 +1,5 @@
+import { __require as requireXstateGuards_cjs } from '../node_modules/.pnpm/xstate@5.24.0_patch_hash_3a1bd6d012ec67bf6e38a00c3226d1be77089442f83aeb6e424b00ca2a11d21c/node_modules/xstate/guards/dist/xstate-guards.cjs.js';
+
+var xstateGuards_cjsExports = requireXstateGuards_cjs();
+
+export { xstateGuards_cjsExports as x };

package/dist/_virtual/xstate-guards.cjs2.js

@@ -0,0 +1,3 @@
+var xstateGuards_cjs = {};
+
+export { xstateGuards_cjs as __exports };

package/dist/base/Background.d.ts

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

package/dist/base/Background.js

@@ -1,6 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { nonexhaustive } from '@likec4/core';
 import { Background as Background$1, BackgroundVariant } from '@xyflow/react';
+import { deepEqual } from 'fast-equals';
+import { memo } from 'react';
 
 function literalToEnum(value) {
   switch (value) {
@@ -14,11 +16,18 @@ function literalToEnum(value) {
       nonexhaustive(value);
   }
 }
-function Background({ background }) {
+const compareProps = (prev, next) => {
+  if (typeof prev.background === "string" && typeof next.background === "string") {
+    return prev.background === next.background;
+  }
+  return deepEqual(prev.background, next.background);
+};
+const Background = memo(({ background }) => {
   if (typeof background === "string") {
     return /* @__PURE__ */ jsx(Background$1, { variant: literalToEnum(background), size: 2, gap: 20 });
   }
   return /* @__PURE__ */ jsx(Background$1, { ...background });
-}
+}, compareProps);
+Background.displayName = "Background";
 
 export { Background };

package/dist/base/Base.d.ts

@@ -0,0 +1,28 @@
+type WithDimmed = {
+    data: {
+        dimmed?: Base.Dimmed;
+    };
+};
+type WithHovered = {
+    data: {
+        hovered?: boolean;
+    };
+};
+declare function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
+declare function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
+declare function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
+declare function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
+type WithData<D> = {
+    data: D;
+};
+declare function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
+declare function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E;
+export declare const Base: {
+    setDimmed: typeof setDimmed;
+    setHovered: typeof setHovered;
+    setData: typeof setData;
+};
+export declare namespace Base {
+    type Dimmed = 'immediate' | boolean;
+}
+export {};

package/dist/base/BaseXYFlow.d.ts

@@ -4,12 +4,12 @@ import { ViewPadding } from '../LikeC4Diagram.props';
 import { XYBackground } from './Background';
 import { BaseEdge, BaseNode } from './types';
 export type BaseXYFlowProps<NodeType extends BaseNode, EdgeType extends BaseEdge> = Simplify<{
-    pannable?: boolean;
-    zoomable?: boolean;
-    nodesSelectable?: boolean;
-    nodesDraggable?: boolean;
+    pannable: boolean;
+    zoomable: boolean;
+    nodesSelectable: boolean;
+    nodesDraggable: boolean;
     background?: 'transparent' | 'solid' | XYBackground;
     fitViewPadding?: ViewPadding | undefined;
     onViewportResize?: undefined | (() => void);
-} & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'onNodeDoubleClick' | 'onEdgeDoubleClick' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
+} & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'fitViewOptions' | 'nodesSelectable' | 'nodesDraggable'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
 export declare function BaseXYFlow<NodeType extends BaseNode, EdgeType extends BaseEdge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }: BaseXYFlowProps<NodeType, EdgeType>): import("react/jsx-runtime").JSX.Element;