@likec4/diagram 1.44.0 → 1.46.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, 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;
+export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, onLayoutTypeChange, onInitialized, view, className, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, 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,6 +1,7 @@
 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,6 +12,7 @@ import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
 import { DiagramActorProvider } from './likec4diagram/state/DiagramActorProvider.js';
 import { LikeC4Styles } from './LikeC4Styles.js';
 import { pickViewBounds } from './utils/view-bounds.js';
+import { useOptionalLikeC4EditorPort } from './editor/LikeC4EditorProvider.js';
 import { MinZoom, MaxZoom, FitViewPaddings } from './base/const.js';
 import { EnsureMantine } from './context/EnsureMantine.js';
 import { FramerMotionConfig } from './context/FramerMotionConfig.js';
@@ -23,7 +25,6 @@ function LikeC4Diagram({
   onCanvasContextMenu,
   onCanvasDblClick,
   onEdgeClick,
-  onChange,
   onEdgeContextMenu,
   onNavigateTo,
   onNodeClick,
@@ -34,8 +35,7 @@ function LikeC4Diagram({
   onInitialized,
   view,
   className,
-  readonly = true,
-  controls = !readonly,
+  controls = true,
   fitView = true,
   fitViewPadding: _fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default,
   pannable = true,
@@ -47,8 +47,7 @@ function LikeC4Diagram({
   enableRelationshipDetails = false,
   enableRelationshipBrowser = false,
   enableCompareWithLatest = !!onLayoutTypeChange,
-  nodesDraggable = !readonly,
-  nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
+  nodesSelectable,
   enableNotations = false,
   showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = false,
@@ -65,6 +64,9 @@ function LikeC4Diagram({
 }) {
   const id = useId();
   const initialRef = useRef(null);
+  const hasEditor = !!useOptionalLikeC4EditorPort();
+  const readonly = !hasEditor;
+  nodesSelectable ??= hasEditor || enableFocusMode || !!onNavigateTo || !!onNodeClick;
   const bounds = pickViewBounds(view, dynamicViewVariant);
   const fitViewPadding = useNormalizedViewPadding(_fitViewPadding);
   if (initialRef.current == null) {
@@ -92,6 +94,7 @@ function LikeC4Diagram({
         {
           features: {
             enableFitView: fitView,
+            enableEditor: hasEditor,
             enableReadOnly: readonly,
             enableFocusMode,
             enableNavigateTo: !!onNavigateTo,
@@ -115,7 +118,6 @@ function LikeC4Diagram({
                 onCanvasContextMenu,
                 onCanvasDblClick,
                 onEdgeClick,
-                onChange,
                 onEdgeContextMenu,
                 onNavigateTo,
                 onNodeClick,
@@ -139,7 +141,7 @@ function LikeC4Diagram({
                         zoomable,
                         pannable,
                         fitViewPadding,
-                        nodesDraggable,
+                        nodesDraggable: hasEditor,
                         nodesSelectable,
                         where: where ?? null,
                         dynamicViewVariant,
@@ -179,14 +181,15 @@ function useNormalizedViewPadding(raw) {
       if (isPlainObject(raw)) {
         return mapValues(raw, toLiteralPaddingWithUnit);
       }
-      return toLiteralPaddingWithUnit(raw);
+      const v = toLiteralPaddingWithUnit(raw);
+      return {
+        x: v,
+        y: v
+      };
     },
     [raw],
-    compareViewPaddingObject
+    deepEqual
   );
 }
-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

@@ -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;
@@ -66,15 +67,10 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * @default true
      */
     zoomable?: boolean | undefined;
-    /**
-     * Disable any editing (dragging still can be enabled with `nodesDraggable`)
-     * @default true
-     */
-    readonly?: boolean | undefined;
     /**
      * Show/hide panel with top left controls
      *
-     * @default true if not readonly
+     * @default true
      */
     controls?: boolean | undefined;
     /**
@@ -109,13 +105,11 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      */
     fitViewPadding?: ViewPadding | undefined;
     /**
-     * @default false if readonly
+     * If not readonly, or `enableFocusMode`, `onNavigateTo` or  `onNodeClick` are set - nodes will be selectable
+     *
+     * @default false
      */
     nodesSelectable?: boolean | undefined;
-    /**
-     * @default false if readonly
-     */
-    nodesDraggable?: boolean | undefined;
     /**
      * Initial width of the diagram
      * (supposed to be used during SSR)
@@ -251,7 +245,6 @@ export type OnInitialized = (params: {
 }) => 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;

package/dist/LikeC4ProjectsProvider.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import { useCustomCompareMemo } from '@react-hookz/web';
-import { shallowEqual } from 'fast-equals';
-import { useContext } from 'react';
+import { deepEqual } from 'fast-equals';
+import { useContext, useState, useEffect } from 'react';
 import { LikeC4ProjectsContext } from './context/LikeC4ProjectsContext.js';
 import { useCallbackRef } from './hooks/useCallbackRef.js';
 
@@ -15,7 +14,12 @@ function LikeC4ProjectsProvider({
     console.warn("LikeC4ProjectsProvider should not be nested inside another one");
   }
   const onProjectChange = useCallbackRef(_onProjectChange);
-  const value = useCustomCompareMemo(() => ({ projects, onProjectChange }), [projects, onProjectChange], shallowEqual);
+  const [value, setValue] = useState(() => ({ projects, onProjectChange }));
+  useEffect(() => {
+    setValue((current) => {
+      return deepEqual(current.projects, projects) ? current : { projects, onProjectChange };
+    });
+  }, [projects]);
   return /* @__PURE__ */ jsx(LikeC4ProjectsContext.Provider, { value, 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 {
     /**
@@ -250,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

@@ -2,7 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { ActionIcon } from '@mantine/core';
-import { useState } from 'react';
+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';
@@ -13,7 +14,7 @@ import { LikeC4Diagram } from './LikeC4Diagram.js';
 import { Overlay } from './overlays/overlay/Overlay.js';
 import { ShadowRoot } from './shadowroot/ShadowRoot.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';
+import IconX from './node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 const cssInteractive = css({
   cursor: "pointer",
@@ -49,6 +50,7 @@ function LikeC4View({
   children,
   ...props
 }) {
+  const rootRef = useRef(null);
   const likec4model = useOptionalLikeC4Model();
   const [layoutType, setLayoutType] = useState("manual");
   const [browserViewId, _onNavigateTo] = useState(null);
@@ -82,9 +84,11 @@ function LikeC4View({
   const isBrowserEnabled = browser !== false;
   const browserProps = isBoolean(browser) ? {} : browser;
   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 +104,6 @@ function LikeC4View({
           LikeC4Diagram,
           {
             view,
-            readonly: true,
             pannable,
             zoomable,
             background,
@@ -116,7 +119,6 @@ function LikeC4View({
             enableRelationshipBrowser,
             enableElementTags: false,
             controls,
-            nodesDraggable: false,
             reduceGraphics,
             className: cx(
               "likec4-static-view",
@@ -133,7 +135,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,
             {
@@ -152,8 +154,6 @@ function LikeC4View({
               enableElementTags: true,
               enableCompareWithLatest: true,
               controls: true,
-              readonly: true,
-              nodesDraggable: false,
               fitView: true,
               ...props,
               fitViewPadding: FitViewPaddings.withControls,
@@ -175,7 +175,7 @@ function LikeC4View({
               children: /* @__PURE__ */ jsx(IconX, {})
             }
           ) })
-        ] })
+        ] }) })
       ] })
     }
   );

package/dist/ReactLikeC4.d.ts

@@ -1,5 +1,4 @@
-import { CSSProperties } from 'react';
-import { Except } from 'type-fest';
+import { CSSProperties, ReactNode } from 'react';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 import type * as t from '@likec4/core/types';
 export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
@@ -26,10 +25,8 @@ 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;
-} & Except<LikeC4DiagramProperties<A>, 'view', {
-    requireExactProps: true;
-}> & LikeC4DiagramEventHandlers<A>;
+    children?: ReactNode | undefined;
+} & Omit<LikeC4DiagramProperties<A>, 'view'> & LikeC4DiagramEventHandlers<A>;
 /**
  * Ready-to-use component to display embedded LikeC4 view, same as {@link LikeC4View}
  * But provides more control over the diagram

package/dist/StaticLikeC4Diagram.js

@@ -16,7 +16,6 @@ function StaticLikeC4Diagram({
     LikeC4Diagram,
     {
       view,
-      readonly: true,
       className: cx(className, "likec4-static-view"),
       fitView,
       fitViewPadding,
@@ -34,7 +33,6 @@ function StaticLikeC4Diagram({
       enableFocusMode: false,
       enableSearch: false,
       nodesSelectable: false,
-      nodesDraggable: false,
       enableElementTags: false,
       ...rest
     }

package/dist/base/Base.d.ts

@@ -16,7 +16,7 @@ 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;
+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;

package/dist/base/updateEdges.js

@@ -1,22 +1,32 @@
 import { deepEqual } from 'fast-equals';
-import { isDefined, omit } from 'remeda';
+import { isDefined, pickBy, isShallowEqual } from 'remeda';
 
-function _update(current, update) {
-  return update.map((next) => {
-    const existing = current.find((n) => n.id === next.id);
-    if (existing && existing.type === next.type && existing.source === next.source && existing.target === next.target) {
-      const isSameData = deepEqual(existing.data, next.data);
-      if (isSameData && deepEqual(existing.hidden ?? false, next.hidden ?? false) && deepEqual(existing.selected ?? false, next.selected ?? false) && deepEqual(existing.animated ?? false, next.animated ?? false) && deepEqual(existing.sourceHandle ?? null, next.sourceHandle ?? null) && deepEqual(existing.targetHandle ?? null, next.targetHandle ?? null) && deepEqual(existing.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(existing.label ?? null, next.label ?? null)) {
-        return existing;
-      }
-      return {
-        ...omit(existing, ["hidden", "zIndex"]),
-        ...next,
-        data: isSameData ? existing.data : next.data
-      };
+const EMPTY_OBJ = {};
+function _update(current, updated) {
+  if (current === updated) {
+    return current;
+  }
+  updated = updated.map((update) => {
+    const existing = current.find(
+      (n) => n.id === update.id && n.type === update.type && n.source === update.source && n.target === update.target
+    );
+    if (!existing) {
+      return update;
+    }
+    const isSameData = deepEqual(existing.data, update.data);
+    const data = isSameData ? existing.data : update.data;
+    if (isSameData && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.animated, update.animated ?? existing.animated) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.label, update.label) && deepEqual(existing.sourceHandle, update.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) {
+      return existing;
     }
-    return next;
+    return {
+      // Retain existing properties that are defined, except parentId
+      ...pickBy(existing, isDefined),
+      // Apply updates, omitting undefined values
+      ...pickBy(update, isDefined),
+      data
+    };
   });
+  return isShallowEqual(current, updated) ? current : updated;
 }
 function updateEdges(current, update) {
   if (isDefined(update)) {

package/dist/base/updateNodes.d.ts

@@ -1,3 +1,17 @@
 import { BaseNode } from './types';
+/**
+ * Updates nodes by merging existing nodes with updated nodes based on their IDs.
+ *
+ * Can be used in two ways:
+ * 1. By providing both current and updated node arrays:
+ *    `const newNodes = updateNodes(currentNodes, updatedNodes);`
+ * 2. By providing only the updated node array, returning a function that takes the current nodes:
+ *    `const updater = updateNodes(updatedNodes);
+ *     const newNodes = updater(currentNodes);`
+ *
+ * @param current - The current array of nodes.
+ * @param update - The array of nodes with updates.
+ * @returns The updated array of nodes.
+ */
 export declare function updateNodes<N extends BaseNode>(current: N[], update: N[]): N[];
 export declare function updateNodes<N extends BaseNode>(update: N[]): (current: N[]) => N[];

package/dist/base/updateNodes.js

@@ -1,34 +1,67 @@
 import { getNodeDimensions } from '@xyflow/system';
 import { deepEqual } from 'fast-equals';
-import { isDefined, omit } from 'remeda';
+import { isDefined, hasSubObject, pickBy, isShallowEqual } from 'remeda';
 
+const EMPTY_OBJ = {};
 function _update(current, updated) {
-  return updated.map((update) => {
-    const existing = current.find((n) => n.id === update.id);
-    if (existing && deepEqual(existing.type, update.type)) {
-      const isSameData = deepEqual(existing.data, update.data);
-      const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
-      if (isSameData && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.zIndex ?? 0, update.zIndex ?? 0) && deepEqual(existing.position, update.position)) {
-        return existing;
+  if (current === updated) {
+    return current;
+  }
+  updated = updated.map((update) => {
+    const existing = current.find((n) => n.id === update.id && n.type === update.type);
+    if (!existing) {
+      return update;
+    }
+    const isSameData = hasSubObject(existing.data, update.data);
+    let data = isSameData ? existing.data : update.data;
+    if (!isSameData) {
+      if (isDefined(existing.data.hovered) && !isDefined(update.data.hovered)) {
+        data = {
+          ...data,
+          hovered: existing.data.hovered
+        };
       }
-      return {
-        ...omit(existing, ["measured", "parentId", "hidden", "zIndex"]),
-        ...update,
-        // Force dimensions from update
-        width: update.initialWidth,
-        height: update.initialHeight,
-        data: isSameData ? existing.data : update.data
-      };
+      if (isDefined(existing.data.dimmed) && !isDefined(update.data.dimmed)) {
+        data = {
+          ...data,
+          dimmed: existing.data.dimmed
+        };
+      }
+    }
+    const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
+    const haveHandles = Object.hasOwn(existing, "handles") || Object.hasOwn(update, "handles");
+    const isSameHandles = !haveHandles || deepEqual(existing.handles ?? [], update.handles ?? []);
+    if (isSameData && isSameHandles && deepEqual(existingWidth, update.width ?? update.initialWidth) && deepEqual(existingHeight, update.height ?? update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.draggable, update.draggable ?? existing.draggable) && deepEqual(existing.dragHandle, update.dragHandle) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.position, update.position) && deepEqual(existing.domAttributes ?? EMPTY_OBJ, update.domAttributes ?? EMPTY_OBJ) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) {
+      return existing;
     }
-    return update;
+    const handles = haveHandles && isSameHandles ? existing.handles : update.handles;
+    return {
+      // Retain existing properties that are defined, except parentId
+      ...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId"),
+      // Retain measured dimensions from existing if present
+      ..."measured" in existing && {
+        measured: {
+          width: update.width ?? update.initialWidth,
+          height: update.height ?? update.initialHeight
+        }
+      },
+      // Apply updates, omitting undefined values
+      ...pickBy(update, isDefined),
+      // Force dimensions
+      width: update.width ?? update.initialWidth,
+      height: update.height ?? update.initialHeight,
+      ...handles && { handles },
+      data
+    };
   });
+  return isShallowEqual(current, updated) ? current : updated;
 }
 function updateNodes(current, update) {
   if (isDefined(update)) {
     return _update(current, update);
   }
   update = current;
-  return (current2) => _update(current2, update);
+  return (existing) => _update(existing, update);
 }
 
 export { updateNodes };

package/dist/base-primitives/Markdown.d.ts

@@ -1,8 +1,7 @@
 import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
-import { BoxProps } from '@likec4/styles/jsx';
 import { JsxStyleProps } from '@likec4/styles/types';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export type MarkdownProps = Omit<BoxProps, 'dangerouslySetInnerHTML' | 'children'> & {
+import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color'> & {
     value: RichTextType;
     /**
      * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
@@ -30,4 +29,31 @@ export type MarkdownProps = Omit<BoxProps, 'dangerouslySetInnerHTML' | 'children
      */
     emptyText?: string;
 };
-export declare const Markdown: ForwardRefExoticComponent<Omit<MarkdownProps, "ref"> & RefAttributes<HTMLDivElement>>;
+export declare const Markdown: ForwardRefExoticComponent<Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "color" | "dangerouslySetInnerHTML"> & {
+    value: RichTextType;
+    /**
+     * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
+     * @default false
+     */
+    uselikec4palette?: boolean;
+    /**
+     * Scale factor for the block
+     * @default 1
+     */
+    textScale?: number;
+    /**
+     * Font size for the block
+     * @default 'md'
+     */
+    fontSize?: (JsxStyleProps["fontSize"] & string) | undefined;
+    /**
+     * If true, the component will not render anything if the value is empty.
+     * @default false
+     */
+    hideIfEmpty?: boolean | undefined;
+    /**
+     * Text to show if the value is empty.
+     * @default "no content"
+     */
+    emptyText?: string;
+} & RefAttributes<HTMLDivElement>>;

package/dist/base-primitives/Markdown.js

@@ -37,8 +37,9 @@ const Markdown = forwardRef(({
         ...fontSize && {
           "--text-fz": `var(--font-sizes-${fontSize}, var(--font-sizes-md))`
         },
-        // @ts-expect-error
-        ["--mantine-scale"]: textScale
+        ...textScale !== 1 && {
+          ["--mantine-scale"]: textScale
+        }
       },
       ...content
     }

package/dist/base-primitives/NodeHandles.d.ts

@@ -1,4 +1,5 @@
+import { MemoExoticComponent } from 'react';
 /**
  * XYFlow requires handles to be defined on nodes.
  */
-export declare const DefaultHandles: () => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultHandles: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/base-primitives/NodeHandles.js

@@ -1,21 +1,25 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Handle, Position } from '@xyflow/react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Position, Handle } from '@xyflow/react';
+import { memo, Fragment as Fragment$1 } from 'react';
 
-const style = {
-  top: "50%",
-  left: "50%",
-  right: "unset",
-  bottom: "unset",
-  visibility: "hidden",
-  width: 5,
-  height: 5,
-  transform: "translate(-50%, -50%)"
-};
-const DefaultHandles = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style }),
-  /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, style }),
-  /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, style }),
-  /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style })
-] });
+const positions = [Position.Top, Position.Right, Position.Bottom, Position.Left];
+const DefaultHandles = memo(() => /* @__PURE__ */ jsx(Fragment, { children: positions.map((position) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  /* @__PURE__ */ jsx(
+    Handle,
+    {
+      type: "source",
+      position,
+      className: "likec4-node-handle-center"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Handle,
+    {
+      type: "target",
+      position,
+      className: "likec4-node-handle-center"
+    }
+  )
+] }, position)) }));
 
 export { DefaultHandles };

package/dist/base-primitives/compound/CompoundActionButton.d.ts

@@ -1,8 +1,9 @@
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { Simplify } from 'type-fest';
 import { BaseNodeProps } from '../../base/types';
 type CompoundActionButtonProps = Simplify<BaseNodeProps & {
-    icon?: React.ReactNode;
-    onClick: (e: React.MouseEvent) => void;
+    icon?: ReactNode;
+    onClick: (e: ReactMouseEvent) => void;
 }>;
 export declare function CompoundActionButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundActionButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};