@likec4/diagram 1.48.0 → 1.49.0

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.4/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,18 +33,15 @@ 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(

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

@@ -4,6 +4,7 @@ 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: {
@@ -18,6 +19,7 @@ function CompoundNodeContainer({
   style,
   ...rest
 }) {
+  const styles = useLikeC4Styles();
   let opacity = clamp(data.style.opacity ?? 100, {
     min: 0,
     max: 100
@@ -31,7 +33,7 @@ function CompoundNodeContainer({
   const compoundClass = compoundNode({
     isTransparent,
     inverseColor: opacity < 70,
-    borderStyle: data.style.border ?? (isTransparent ? "dashed" : "none")
+    borderStyle: data.style.border ?? (isTransparent ? styles.defaults.group.border : "none")
   });
   const depth = clamp(data.depth ?? 1, {
     min: 1,
@@ -52,12 +54,11 @@ function CompoundNodeContainer({
         "data-likec4-dimmed": isDimmed
       },
       tabIndex: -1,
-      style: {
-        ...style,
-        // @ts-expect-error
+      animate: {
         ["--_border-transparency"]: `${borderOpacity}%`,
         ["--_compound-transparency"]: `${opacity}%`
       },
+      style,
       ...rest,
       children
     }

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.4/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/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 "";
-  return isNumber(value) ? `${Math.round(value)}px` : value;
+  return isNumber(value) ? `${Math.trunc(value)}px` : value;
 };
 function EdgeLabelContainer({
   edgeProps: {
@@ -25,18 +22,11 @@ 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;
@@ -66,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
   ) });

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

@@ -1,12 +1,32 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { actionButtons, actionBtn } from '@likec4/styles/recipes';
+import { actionBtn, actionButtons } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconBolt from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
+import IconBolt from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
 
+const variants = {
+  normal: {
+    originY: 0,
+    opacity: 0.75,
+    scale: 0.8,
+    y: 0
+  },
+  selected: {
+    originY: 0,
+    opacity: 1,
+    scale: 0.9,
+    y: 7
+  },
+  hovered: {
+    originY: 0,
+    opacity: 1,
+    scale: 1.12,
+    y: 7
+  }
+};
 function ElementActionButtons({
   selected = false,
   data: {
@@ -18,19 +38,24 @@ function ElementActionButtons({
   if (!buttons.length) {
     return null;
   }
+  let variant;
+  switch (true) {
+    case isHovered:
+      variant = "hovered";
+      break;
+    case selected:
+      variant = "selected";
+      break;
+    default:
+      variant = "normal";
+  }
   return /* @__PURE__ */ jsx("div", { className: actionButtons(), children: /* @__PURE__ */ jsx(
     m.div,
     {
       layoutRoot: true,
       initial: false,
-      style: {
-        originY: 0
-      },
-      animate: {
-        opacity: isHovered || selected ? 1 : 0.75,
-        scale: isHovered ? 1.1 : selected ? 0.9 : 0.8,
-        y: isHovered || selected ? 6 : 0
-      },
+      variants,
+      animate: variant,
       layoutDependency: `${isHovered}-${selected}`,
       "data-likec4-hovered": isHovered,
       className: cx("nodrag nopan"),

package/dist/base-primitives/element/ElementDetailsButton.js

@@ -5,8 +5,35 @@ import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/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: {
+    originX: 0.4,
+    originY: 0.6,
+    scale: 1,
+    opacity: 0.5
+  },
+  hovered: {
+    originX: 0.4,
+    originY: 0.6,
+    scale: 1.25,
+    opacity: 0.9
+  },
+  selected: {
+    originX: 0.4,
+    originY: 0.6,
+    scale: 1.25,
+    opacity: 0.9
+  },
+  whileHover: {
+    scale: 1.4,
+    opacity: 1
+  },
+  whileTap: {
+    scale: 1.15
+  }
+};
 const container = css({
   position: "absolute",
   top: "0.5",
@@ -40,28 +67,30 @@ function ElementDetailsButton({
   icon,
   onClick
 }) {
+  let variant;
+  switch (true) {
+    case isHovered:
+      variant = "hovered";
+      break;
+    case selected:
+      variant = "selected";
+      break;
+    default:
+      variant = "normal";
+  }
   return /* @__PURE__ */ jsx(Box, { className: cx(container, "details-button"), children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      className: cx("nodrag nopan", actionBtn({ variant: "transparent" })),
+      className: cx(
+        "nodrag nopan",
+        actionBtn({ variant: "transparent" })
+      ),
       component: m.button,
       initial: false,
-      style: {
-        originX: 0.45,
-        originY: 0.55
-      },
-      animate: isHovered || selected ? {
-        scale: 1.2,
-        opacity: 0.8
-      } : {
-        scale: 1,
-        opacity: 0.5
-      },
-      whileHover: {
-        scale: 1.4,
-        opacity: 1
-      },
-      whileTap: { scale: 1.15 },
+      variants,
+      animate: variant,
+      whileHover: "whileHover",
+      whileTap: "whileTap",
       onClick,
       onDoubleClick: stopPropagation,
       tabIndex: -1,

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

@@ -1,7 +1,7 @@
 import { Color, ComputedNodeStyle, ElementShape } from '@likec4/core/types';
-import { MotionNodeLayoutOptions } from 'motion/react';
-import { CSSProperties, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { MotionNodeLayoutOptions, MotionStyle } from 'motion/react';
 import { BaseNodePropsWithData } from '../../base/types';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 type RequiredData = {
     color: Color;
     shape: ElementShape;
@@ -15,7 +15,7 @@ export declare const ElementNodeContainer: ForwardRefExoticComponent<{
     [key: `data-${string}`]: string | undefined;
     nodeProps: BaseNodePropsWithData<RequiredData>;
     className?: string | undefined;
-    style?: CSSProperties | undefined;
+    style?: MotionStyle | undefined;
 } & MotionNodeLayoutOptions & {
     children?: ReactNode | undefined;
 } & RefAttributes<HTMLDivElement>>;

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

@@ -5,6 +5,20 @@ import { elementNode } from '@likec4/styles/recipes';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
 
+const variants = {
+  normal: {
+    scale: 1
+  },
+  hovered: {
+    scale: 1.05
+  },
+  selected: {
+    scale: 1.02
+  },
+  tap: {
+    scale: 0.98
+  }
+};
 const ElementNodeContainer = forwardRef(({
   nodeProps: {
     selected = false,
@@ -20,14 +34,16 @@ const ElementNodeContainer = forwardRef(({
   children,
   ...rest
 }, ref) => {
-  let scale = 1;
+  let variant;
   switch (true) {
     case isHovered:
-      scale = 1.05;
+      variant = "hovered";
       break;
     case selected:
-      scale = 1.02;
+      variant = "selected";
       break;
+    default:
+      variant = "normal";
   }
   const {
     size,
@@ -43,12 +59,11 @@ const ElementNodeContainer = forwardRef(({
         "group",
         className
       ),
+      variants,
       initial: false,
       ...selectable && {
-        animate: {
-          scale
-        },
-        whileTap: { scale: 0.98 }
+        animate: variant,
+        whileTap: "tap"
       },
       "data-likec4-hovered": isHovered,
       "data-likec4-color": data.color,
@@ -59,9 +74,7 @@ const ElementNodeContainer = forwardRef(({
       ...isDimmed !== false && {
         "data-likec4-dimmed": isDimmed
       },
-      style: {
-        ...style
-      },
+      style,
       tabIndex: -1,
       ...rest,
       children

package/dist/base-primitives/element/ElementShape.d.ts

@@ -1,12 +1,12 @@
 import { ComputedNodeStyle, ElementShape } from '@likec4/core/types';
-type Data = {
+type RequiredData = {
     shape: ElementShape;
     width: number;
     height: number;
     style?: ComputedNodeStyle;
 };
 type ElementShapeProps = {
-    data: Data;
+    data: RequiredData;
     width?: number | undefined;
     height?: number | undefined;
     /**

package/dist/base-primitives/element/ElementShape.js

@@ -86,8 +86,69 @@ const PersonIcon = {
   height: 120,
   path: `M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z`
 };
-function ShapeSvg({ shape, w, h }) {
+const ComponentTopLeftRect = ({ index, size }) => {
+  let width, height, offsetX, offsetY, between;
+  switch (size) {
+    case "xs":
+    case "sm": {
+      width = 40;
+      height = 18;
+      offsetX = -16;
+      offsetY = 16;
+      between = 10;
+      break;
+    }
+    case "md": {
+      width = 60;
+      height = 26;
+      offsetX = -20;
+      offsetY = 22;
+      between = 14;
+      break;
+    }
+    case "lg":
+    case "xl": {
+      width = 70;
+      height = 32;
+      offsetX = -24;
+      offsetY = 32;
+      between = 18;
+      break;
+    }
+    default: {
+      nonexhaustive(size);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x: offsetX,
+      y: offsetY + (height + between) * index,
+      width,
+      height,
+      rx: 3,
+      className: "top-left-rect",
+      strokeWidth: 2
+    }
+  );
+};
+function ShapeSvg({ shape, w, h, size = "md" }) {
   switch (shape) {
+    case "component": {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: w,
+            height: h,
+            rx: 6,
+            strokeWidth: 0
+          }
+        ),
+        /* @__PURE__ */ jsx(ComponentTopLeftRect, { index: 0, size }),
+        /* @__PURE__ */ jsx(ComponentTopLeftRect, { index: 1, size })
+      ] });
+    }
     case "mobile": {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
@@ -264,23 +325,25 @@ function ElementShape({ data, width, height, showSeletionOutline = true }) {
         },
         className: elementShapeRecipe({
           shapetype: "html",
-          withBorder
+          withBorder,
+          withOutline: showSeletionOutline
         }),
         children: [
           isMultiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
-          showSeletionOutline && /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
+          /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
         ]
       }
     );
   }
   const className = elementShapeRecipe({
-    shapetype: "svg"
+    shapetype: "svg",
+    withOutline: showSeletionOutline
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h }) }),
+    isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, size: data.style?.size, w, h }) }),
     /* @__PURE__ */ jsxs("svg", { className, viewBox: `0 0 ${w} ${h}`, children: [
-      showSeletionOutline && /* @__PURE__ */ jsx(ShapeSvgOutline, { shape: data.shape, w, h }),
-      /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h })
+      /* @__PURE__ */ jsx(ShapeSvgOutline, { shape: data.shape, w, h }),
+      /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, size: data.style?.size, w, h })
     ] })
   ] });
 }

package/dist/components/ErrorFallback.js

@@ -4,7 +4,7 @@ import { HStack, VStack } from '@likec4/styles/jsx';
 import { ThemeIcon, Text, ScrollAreaAutosize, Button } from '@mantine/core';
 import { useRef, useEffect } from 'react';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function ErrorFallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";

package/dist/components/Link.js

@@ -4,8 +4,8 @@ import { styled } from '@likec4/styles/jsx';
 import { Badge, CopyButton, ActionIcon } from '@mantine/core';
 import { forwardRef } from 'react';
 import { GithubIcon } from './GithubIcon.js';
-import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
-import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
+import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
 
 const GITHUB_PREFIX = "https://github.com/";
 const Link = forwardRef(
@@ -63,7 +63,7 @@ const Link = forwardRef(
           }),
           section: css({
             '&:is([data-position="left"])': {
-              color: "mantine.colors.dimmed",
+              color: "text.dimmed",
               userSelect: "none",
               pointerEvents: "none",
               _groupHover: {

package/dist/components/Logo.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { forwardRef } from 'react';
 

package/dist/components/NavigationPanel.js

@@ -36,15 +36,13 @@ const Logo = withContext(LogoButton, "logo");
 const Label = withContext(m.div, "label", {
   shouldForwardProp
 });
-const Dropdown = withContext(m.div, "dropdown", {
+withContext(m.div, "dropdown", {
   shouldForwardProp
 });
 const NavigationPanel = {
   Root,
   Body,
   Logo,
-  Label,
-  Dropdown
-};
+  Label};
 
 export { NavigationPanel };

package/dist/components/PortalToContainer.js

@@ -1,14 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { Portal } from '@mantine/core';
-import { useContext } from 'react';
-import { RootContainerContext } from '../context/RootContainerContext.js';
+import { useRootContainerContext } from '../context/RootContainerContext.js';
 
 function PortalToContainer({ children }) {
-  const ctx = useContext(RootContainerContext);
+  const ctx = useRootContainerContext();
   if (!ctx) {
     throw new Error("PortalToContainer must be used within RootContainer");
   }
-  return /* @__PURE__ */ jsx(Portal, { target: ctx.ref.current ?? `#${ctx.id}`, children });
+  return /* @__PURE__ */ jsx(Portal, { target: ctx.ref.current ?? ctx.selector, children });
 }
 
 export { PortalToContainer };