@likec4/diagram 1.43.0 → 1.45.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, enableNotations, 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

@@ -11,7 +11,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 +31,7 @@ function LikeC4Diagram({
   onNodeContextMenu,
   onOpenSource,
   onBurgerMenuClick,
+  onLayoutTypeChange,
   onInitialized,
   view,
   className,
@@ -46,6 +47,7 @@ function LikeC4Diagram({
   enableElementDetails = false,
   enableRelationshipDetails = false,
   enableRelationshipBrowser = false,
+  enableCompareWithLatest = !!onLayoutTypeChange,
   nodesDraggable = !readonly,
   nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
   enableNotations = false,
@@ -55,7 +57,6 @@ function LikeC4Diagram({
   enableSearch = false,
   initialWidth,
   initialHeight,
-  experimentalEdgeEditing = !readonly,
   reduceGraphics = "auto",
   renderIcon,
   where,
@@ -65,7 +66,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 +102,11 @@ function LikeC4Diagram({
             enableSearch,
             enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
             enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
-            enableEdgeEditing: experimentalEdgeEditing,
             enableNotations,
             enableVscode: !!onOpenSource,
             enableControls: controls,
-            enableElementTags
+            enableElementTags,
+            enableCompareWithLatest: enableCompareWithLatest && !!onLayoutTypeChange
           },
           children: /* @__PURE__ */ jsxs(
             DiagramEventHandlers,
@@ -122,7 +123,8 @@ function LikeC4Diagram({
                 onNodeContextMenu,
                 onOpenSource,
                 onBurgerMenuClick,
-                onInitialized
+                onInitialized,
+                onLayoutTypeChange
               },
               children: [
                 /* @__PURE__ */ jsx(LikeC4Styles, { id }),
@@ -138,6 +140,7 @@ function LikeC4Diagram({
                         zoomable,
                         pannable,
                         fitViewPadding,
+                        nodesDraggable,
                         nodesSelectable,
                         where: where ?? null,
                         dynamicViewVariant,
@@ -145,8 +148,6 @@ function LikeC4Diagram({
                           /* @__PURE__ */ jsx(
                             LikeC4DiagramXYFlow,
                             {
-                              nodesDraggable,
-                              nodesSelectable,
                               background,
                               reactFlowProps,
                               renderNodes,
@@ -179,7 +180,11 @@ function useNormalizedViewPadding(raw) {
       if (isPlainObject(raw)) {
         return mapValues(raw, toLiteralPaddingWithUnit);
       }
-      return toLiteralPaddingWithUnit(raw);
+      const v = toLiteralPaddingWithUnit(raw);
+      return {
+        x: v,
+        y: v
+      };
     },
     [raw],
     deepEqual

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';
@@ -29,6 +29,14 @@ export type LikeC4ColorScheme = 'light' | 'dark';
 export type OverrideReactFlowProps = Pick<ReactFlowProps<Types.AnyNode, Types.AnyEdge>, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold'>;
 export type PaddingUnit = 'px' | '%';
 export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
+export type ViewPaddings = {
+    top?: PaddingWithUnit;
+    right?: PaddingWithUnit;
+    bottom?: PaddingWithUnit;
+    left?: PaddingWithUnit;
+    x?: PaddingWithUnit;
+    y?: PaddingWithUnit;
+};
 /**
  * Padding around the diagram
  *
@@ -45,14 +53,7 @@ export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
  *   y: '16px',
  * }
  */
-export type ViewPadding = PaddingWithUnit | {
-    top?: PaddingWithUnit;
-    right?: PaddingWithUnit;
-    bottom?: PaddingWithUnit;
-    left?: PaddingWithUnit;
-    x?: PaddingWithUnit;
-    y?: PaddingWithUnit;
-};
+export type ViewPadding = PaddingWithUnit | ViewPaddings;
 export interface LikeC4DiagramProperties<A extends Any = Unknown> {
     view: LayoutedView<A>;
     className?: string | undefined;
@@ -174,6 +175,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'
@@ -184,11 +190,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
@@ -240,6 +241,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;
 };
@@ -248,12 +250,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;
@@ -261,4 +264,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/LikeC4Styles.js

@@ -7,7 +7,6 @@ import { useLikeC4Styles } from './hooks/useLikeC4Styles.js';
 
 const scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`;
 const whenDark = scheme("dark");
-const whenLight = scheme("light");
 const MAX_DEPTH = 5;
 const generateCompoundColors = (rootSelector, name, colors, depth) => {
   const compoundDarkColor = (color) => toHex(
@@ -47,8 +46,6 @@ ${selector} {
   --likec4-palette-relation-stroke: ${relationships.line};
   --likec4-palette-relation-label: ${relationships.label};
   --likec4-palette-relation-label-bg: ${relationships.labelBg};
-}
-${whenLight} ${selector} {
   --likec4-palette-relation-stroke-selected: ${toRgba(mix(relationships.line, "black", 85))};
 }
 ${whenDark} ${selector} {

package/dist/LikeC4View.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { ElementIconRenderer, NodeRenderers, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from './LikeC4Diagram.props';
 import type * as t from '@likec4/core/types';
 export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
@@ -159,7 +159,7 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
     /**
      * Children to render inside the diagram (not inside the browser overlay)
      */
-    children?: React.ReactNode | undefined;
+    children?: ReactNode | undefined;
 }
 export interface LikeC4BrowserProps {
     /**
@@ -230,6 +230,11 @@ export interface LikeC4BrowserProps {
      * @default true
      */
     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)
      *
@@ -245,7 +250,7 @@ export interface LikeC4BrowserProps {
     /**
      * Children to render inside the browser overlay
      */
-    children?: React.ReactNode | undefined;
+    children?: ReactNode | undefined;
 }
 /**
  * Ready-to-use component to display embedded LikeC4 view,

package/dist/LikeC4View.js

@@ -1,18 +1,20 @@
 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 { useState } from 'react';
+import { Box } from '@likec4/styles/jsx';
+import { ActionIcon } from '@mantine/core';
+import { AnimatePresence } from 'motion/react';
+import { useRef, 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",
@@ -48,15 +50,23 @@ function LikeC4View({
   children,
   ...props
 }) {
+  const rootRef = useRef(null);
   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,15 +77,18 @@ function LikeC4View({
       '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
     ] });
   }
-  const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null;
+  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);
+  const root = rootRef.current ? { root: rootRef.current } : void 0;
   return /* @__PURE__ */ jsx(
     ShadowRoot,
     {
+      ref: rootRef,
       injectFontCss,
       theme: mantineTheme,
       colorScheme,
@@ -100,7 +113,7 @@ function LikeC4View({
             enableNotations: hasNotations,
             enableDynamicViewWalkthrough,
             showNavigationButtons,
-            experimentalEdgeEditing: false,
+            enableCompareWithLatest: false,
             enableFocusMode,
             enableRelationshipDetails,
             enableElementDetails,
@@ -124,7 +137,7 @@ function LikeC4View({
             ...props
           }
         ),
-        browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: () => onNavigateTo(null), children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { ...root, children: browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: () => onNavigateTo(null), children: [
           /* @__PURE__ */ jsx(
             LikeC4Diagram,
             {
@@ -141,6 +154,7 @@ function LikeC4View({
               enableRelationshipDetails: true,
               enableSearch: true,
               enableElementTags: true,
+              enableCompareWithLatest: true,
               controls: true,
               readonly: true,
               nodesDraggable: false,
@@ -149,10 +163,11 @@ function LikeC4View({
               fitViewPadding: FitViewPaddings.withControls,
               ...browserProps,
               enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
-              renderNodes
+              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",
@@ -164,7 +179,7 @@ function LikeC4View({
               children: /* @__PURE__ */ jsx(IconX, {})
             }
           ) })
-        ] })
+        ] }) })
       ] })
     }
   );

package/dist/ReactLikeC4.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { Except } from 'type-fest';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 import type * as t from '@likec4/core/types';
@@ -26,7 +26,7 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
     mantineTheme?: any;
     /** Function to generate nonce attribute added to all generated `<style />` tags */
     styleNonce?: string | (() => string) | undefined;
-    children?: React.ReactNode | undefined;
+    children?: ReactNode | undefined;
 } & Except<LikeC4DiagramProperties<A>, 'view', {
     requireExactProps: true;
 }> & LikeC4DiagramEventHandlers<A>;

package/dist/ReactLikeC4.js

@@ -4,7 +4,7 @@ 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,
@@ -33,7 +33,7 @@ function ReactLikeC4({
       '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
     ] });
   }
-  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,

package/dist/StaticLikeC4Diagram.js

@@ -30,7 +30,7 @@ function StaticLikeC4Diagram({
       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<NoInfer<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;