@likec4/diagram 1.47.0 → 1.49.0

package/dist/base/updateEdges.js

@@ -1,5 +1,5 @@
 import { deepEqual } from 'fast-equals';
-import { isDefined, pickBy, isShallowEqual } from 'remeda';
+import { isDefined, hasSubObject, pickBy, isShallowEqual } from 'remeda';
 
 const EMPTY_OBJ = {};
 function _update(current, updated) {
@@ -13,8 +13,31 @@ function _update(current, updated) {
     if (!existing) {
       return update;
     }
-    const isSameData = deepEqual(existing.data, update.data);
-    const data = isSameData ? existing.data : update.data;
+    if (existing === update) {
+      return existing;
+    }
+    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
+        };
+      }
+      if (isDefined(existing.data.dimmed) && !isDefined(update.data.dimmed)) {
+        data = {
+          ...data,
+          dimmed: existing.data.dimmed
+        };
+      }
+      if (isDefined(existing.data.active) && !isDefined(update.data.active)) {
+        data = {
+          ...data,
+          active: existing.data.active
+        };
+      }
+    }
     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;
     }

package/dist/base/updateNodes.js

@@ -1,6 +1,6 @@
 import { getNodeDimensions } from '@xyflow/system';
-import { deepEqual } from 'fast-equals';
-import { isDefined, hasSubObject, pickBy, isShallowEqual } from 'remeda';
+import { deepEqual, shallowEqual } from 'fast-equals';
+import { isDefined, hasSubObject, pickBy } from 'remeda';
 
 const EMPTY_OBJ = {};
 function _update(current, updated) {
@@ -12,6 +12,9 @@ function _update(current, updated) {
     if (!existing) {
       return update;
     }
+    if (existing === update) {
+      return existing;
+    }
     const isSameData = hasSubObject(existing.data, update.data);
     let data = isSameData ? existing.data : update.data;
     if (!isSameData) {
@@ -36,8 +39,8 @@ function _update(current, updated) {
     }
     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 existing properties that are defined, except parentId and handles
+      ...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId" && k !== "handles"),
       // Retain measured dimensions from existing if present
       ..."measured" in existing && {
         measured: {
@@ -54,7 +57,7 @@ function _update(current, updated) {
       data
     };
   });
-  return isShallowEqual(current, updated) ? current : updated;
+  return shallowEqual(current, updated) ? current : updated;
 }
 function updateNodes(current, update) {
   if (isDefined(update)) {

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

@@ -1,5 +1,5 @@
 import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
-import { JsxStyleProps } from '../../styled-system/types';
+import { JsxStyleProps } from '@likec4/styles/types';
 import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
 export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color'> & {
     value: RichTextType;

package/dist/base-primitives/Markdown.js

@@ -23,8 +23,8 @@ const Markdown = forwardRef(({
   return /* @__PURE__ */ jsx(
     Box,
     {
-      ref,
       ...props,
+      ref,
       className: cx(
         markdownBlock({
           uselikec4palette,

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

@@ -1,5 +1,7 @@
-import { MemoExoticComponent } from 'react';
+import { AutoLayoutDirection } from '@likec4/core/types';
 /**
  * XYFlow requires handles to be defined on nodes.
  */
-export declare const DefaultHandles: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare function DefaultHandles({ direction }: {
+    direction?: AutoLayoutDirection | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/base-primitives/NodeHandles.js

@@ -1,25 +1,52 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { nonexhaustive } from '@likec4/core';
 import { Position, Handle } from '@xyflow/react';
-import { memo, Fragment as Fragment$1 } from 'react';
 
-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"
+function DefaultHandles({ direction = "TB" }) {
+  let sourcePosition, targetPosition;
+  switch (direction) {
+    case "TB": {
+      sourcePosition = Position.Bottom;
+      targetPosition = Position.Top;
+      break;
     }
-  ),
-  /* @__PURE__ */ jsx(
-    Handle,
-    {
-      type: "target",
-      position,
-      className: "likec4-node-handle-center"
+    case "BT": {
+      sourcePosition = Position.Top;
+      targetPosition = Position.Bottom;
+      break;
     }
-  )
-] }, position)) }));
+    case "LR": {
+      sourcePosition = Position.Right;
+      targetPosition = Position.Left;
+      break;
+    }
+    case "RL": {
+      sourcePosition = Position.Left;
+      targetPosition = Position.Right;
+      break;
+    }
+    default: {
+      nonexhaustive(direction);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: sourcePosition,
+        className: "likec4-node-handle-center"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: targetPosition,
+        className: "likec4-node-handle-center"
+      }
+    )
+  ] });
+}
 
 export { DefaultHandles };

package/dist/base-primitives/compound/CompoundActionButton.js

@@ -6,8 +6,28 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
+const variants = {
+  normal: {
+    scale: 1,
+    x: 0,
+    y: 0
+  },
+  hovered: {
+    scale: 1.2,
+    x: -1,
+    y: -1
+  },
+  whileHover: {
+    scale: 1.4,
+    x: -3,
+    y: -1
+  },
+  whileTap: {
+    scale: 1
+  }
+};
 function CompoundActionButton({
   data: {
     hovered: isHovered = false
@@ -17,23 +37,18 @@ function CompoundActionButton({
 }) {
   const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0);
   const isHoverDebounced = debounced[0] && isHovered;
+  let variant = isHoverDebounced ? "hovered" : "normal";
   return /* @__PURE__ */ jsx(
     m.div,
     {
       initial: false,
-      animate: {
-        scale: isHoverDebounced ? 1.2 : 1,
-        x: isHoverDebounced ? -1 : 0,
-        y: isHoverDebounced ? -1 : 0
-      },
-      whileHover: {
-        scale: 1.4,
-        x: -3,
-        y: -1
-      },
+      variants,
+      animate: variant,
+      whileHover: "whileHover",
+      whileTap: "whileTap",
       className: "likec4-compound-navigation compound-action",
-      whileTap: { scale: 1 },
       onClick: stopPropagation,
+      tabIndex: -1,
       children: /* @__PURE__ */ jsx(
         ActionIcon,
         {
@@ -44,6 +59,7 @@ function CompoundActionButton({
             }),
             actionBtn({ variant: "transparent" })
           ),
+          tabIndex: -1,
           onClick,
           onDoubleClick: stopPropagation,
           children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })

package/dist/base-primitives/compound/CompoundDetailsButton.js

@@ -6,8 +6,24 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
+const variants = {
+  normal: {
+    scale: 1
+    // opacity: 0.6,
+  },
+  hovered: {
+    scale: 1.2
+    // opacity: 1,
+  },
+  whileHover: {
+    scale: 1.4
+  },
+  whileTap: {
+    scale: 1
+  }
+};
 function CompoundDetailsButton({
   data: {
     hovered: isHovered = false
@@ -17,19 +33,17 @@ function CompoundDetailsButton({
 }) {
   const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0);
   const isHoverDebounced = debounced[0] && isHovered;
+  const variant = isHoverDebounced ? "hovered" : "normal";
   return /* @__PURE__ */ jsx(
     m.div,
     {
       initial: false,
-      animate: {
-        scale: isHoverDebounced ? 1.2 : 1
-        // opacity: isHoverDebounced ? 1 : 0.6,
-      },
-      whileHover: {
-        scale: 1.4
-      },
-      whileTap: { scale: 1 },
+      variants,
+      animate: variant,
+      whileHover: "whileHover",
+      whileTap: "whileTap",
       className: "likec4-compound-details details-button",
+      tabIndex: -1,
       children: /* @__PURE__ */ jsx(
         ActionIcon,
         {
@@ -40,6 +54,7 @@ function CompoundDetailsButton({
             }),
             actionBtn({ variant: "transparent" })
           ),
+          tabIndex: -1,
           onClick,
           onDoubleClick: stopPropagation,
           children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })

package/dist/base-primitives/compound/CompoundNodeContainer.js

@@ -3,6 +3,8 @@ import { cx } from '@likec4/styles/css';
 import { compoundNode } from '@likec4/styles/recipes';
 import * as m from 'motion/react-m';
 import { clamp } from 'remeda';
+import { MAX_COMPOUND_DEPTH } from '../../base/const.js';
+import { useLikeC4Styles } from '../../hooks/useLikeC4Styles.js';
 
 function CompoundNodeContainer({
   nodeProps: {
@@ -17,24 +19,25 @@ function CompoundNodeContainer({
   style,
   ...rest
 }) {
+  const styles = useLikeC4Styles();
   let opacity = clamp(data.style.opacity ?? 100, {
     min: 0,
     max: 100
   });
-  const isTransparent = opacity < 99;
-  const MIN_OPACITY = 65;
+  const isTransparent = opacity < 98;
+  const MIN_OPACITY = 50;
   const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * (opacity / 100), {
     min: 0,
     max: 100 - MIN_OPACITY
   });
   const compoundClass = compoundNode({
     isTransparent,
-    inverseColor: opacity < 60,
-    borderStyle: data.style.border ?? (isTransparent ? "dashed" : "none")
+    inverseColor: opacity < 70,
+    borderStyle: data.style.border ?? (isTransparent ? styles.defaults.group.border : "none")
   });
   const depth = clamp(data.depth ?? 1, {
     min: 1,
-    max: 5
+    max: MAX_COMPOUND_DEPTH
   });
   return /* @__PURE__ */ jsx(
     m.div,
@@ -50,12 +53,12 @@ function CompoundNodeContainer({
       ...isDimmed !== false && {
         "data-likec4-dimmed": isDimmed
       },
-      style: {
-        ...style,
-        // @ts-expect-error
+      tabIndex: -1,
+      animate: {
         ["--_border-transparency"]: `${borderOpacity}%`,
         ["--_compound-transparency"]: `${opacity}%`
       },
+      style,
       ...rest,
       children
     }

package/dist/base-primitives/compound/CompoundTitle.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Text } from '@mantine/core';
 import { IconRenderer } from '../../context/IconRenderer.js';
 
 function CompoundTitle({ data }) {
@@ -9,7 +8,7 @@ function CompoundTitle({ data }) {
   });
   return /* @__PURE__ */ jsxs("div", { className: "likec4-compound-title-container", children: [
     elementIcon,
-    /* @__PURE__ */ jsx(Text, { component: "h3", className: "likec4-compound-title", truncate: "end", children: data.title })
+    /* @__PURE__ */ jsx("div", { className: "likec4-compound-title", children: data.title })
   ] });
 }
 

package/dist/base-primitives/compound/actionbtns.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeRuntimeFn } from '../../../styled-system';
+import { RecipeRuntimeFn } from '@likec4/styles';
 export declare const compoundActionBtn: RecipeRuntimeFn<{
     delay: {
         true: {

package/dist/base-primitives/edge/EdgeActionButton.js

@@ -3,7 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { edgeActionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(

package/dist/base-primitives/edge/EdgeContainer.js

@@ -14,10 +14,11 @@ function EdgeContainer({
     dimmed: isDimmed = false,
     ...data
   },
-  animated,
+  animated = false,
   children,
   style
 }) {
+  animated = animated || isActive;
   const props = {
     className: cx(
       className,
@@ -28,8 +29,10 @@ function EdgeContainer({
     "data-likec4-color": color,
     "data-edge-dir": data.dir ?? "forward",
     "data-edge-active": isActive,
-    "data-edge-animated": animated || isActive,
     "data-likec4-hovered": isHovered,
+    ...animated && {
+      "data-likec4-animated": animated
+    },
     ...selected && {
       "data-likec4-selected": selected
     },

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

@@ -20,12 +20,11 @@ const EdgeLabel = forwardRef(({
   },
   pointerEvents = "all",
   className,
-  style: _style,
-  // omit
   children,
   ...rest
 }, ref) => {
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
+  const isStepEdge = stepNum !== null;
   const hasLabel = isTruthy(label) || isTruthy(technology);
   return /* @__PURE__ */ jsxs(
     m.div,
@@ -36,8 +35,8 @@ const EdgeLabel = forwardRef(({
         "likec4-edge-label",
         edgeLabel({
           pointerEvents,
-          isStepEdge: stepNum !== null,
-          cursor: selectable || stepNum !== null ? "pointer" : "default"
+          isStepEdge,
+          cursor: selectable || isStepEdge ? "pointer" : "default"
         }),
         className
       ),

package/dist/base-primitives/edge/EdgeLabelContainer.d.ts

@@ -14,5 +14,6 @@ type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
     } | undefined;
     edgeProps: BaseEdgePropsWithData<Data>;
 };
-export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, animated, }, labelPosition: labelXY, className, style, children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, animated, }, labelPosition: labelXY, className, style: _, // omit styles for container
+children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,14 +1,11 @@
 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 '../../base/const.js';
-import { useXYStore } from '../../hooks/useXYFlow.js';
 
 const toCssVarValue = (value) => {
-  if (value === void 0) return void 0;
-  return isNumber(value) ? `${Math.round(value)}px` : value;
+  if (value === void 0) return "";
+  return isNumber(value) ? `${Math.trunc(value)}px` : value;
 };
 function EdgeLabelContainer({
   edgeProps: {
@@ -25,23 +22,17 @@ function EdgeLabelContainer({
   },
   labelPosition: labelXY,
   className,
-  style,
+  style: _,
+  // omit styles for container
   children,
   ...rest
 }) {
-  let zIndex = useXYStore(
-    useCallback((state) => {
-      return state.edgeLookup.get(id)?.zIndex ?? ZIndexes.Edge;
-    }, [id])
-  );
-  if (isHovered || isActive) {
-    zIndex += 100;
-  }
   let labelX = labelXY?.x ?? labelBBox?.x, labelY = labelXY?.y ?? labelBBox?.y;
   if (labelX === void 0 || labelY === void 0) {
     return null;
   }
   const translate = labelXY?.translate ?? "";
+  animated = animated || isActive;
   return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -55,6 +46,9 @@ function EdgeLabelContainer({
       "data-likec4-color": color,
       "data-edge-active": isActive,
       "data-edge-animated": animated || isActive,
+      ...animated && {
+        "data-likec4-animated": animated
+      },
       ...selected !== false && {
         "data-likec4-selected": selected
       },
@@ -62,14 +56,17 @@ function EdgeLabelContainer({
         "data-likec4-dimmed": isDimmed
       },
       style: {
-        ...labelBBox && {
-          maxWidth: labelBBox.width + 18
-        },
-        zIndex,
-        ...style,
         transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate}`
       },
-      children
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: labelBBox ? {
+            maxWidth: labelBBox.width + 20
+          } : void 0,
+          children
+        }
+      )
     },
     id
   ) });