likec4 0.46.1 → 0.48.0

package/dist/@likec4/core/types/expression.js

@@ -1,6 +1,9 @@
 export function isElementRef(expr) {
   return "element" in expr;
 }
+export function isCustomElement(expr) {
+  return "custom" in expr;
+}
 export function isWildcard(expr) {
   return "wildcard" in expr;
 }

package/dist/@likec4/diagrams/diagram/Diagram.js

@@ -232,12 +232,16 @@ export const Diagram = /* @__PURE__ */ forwardRef(
               mouse: true,
               capture: true
             },
-            !onNodeContextMenu && !onStageContextMenu && {
+            !onNodeContextMenu && !onStageContextMenu ? {
               buttons: -1
-            }
+            } : void 0
           )
         },
         pinch: {
+          eventOptions: {
+            passive: true,
+            capture: true
+          },
           target: containerRef,
           pointer: {
             touch: true

package/dist/@likec4/diagrams/diagram/Nodes.js

@@ -186,10 +186,10 @@ const NodeShape = memo(
                 node,
                 theme,
                 springs,
-                labelOffsetX: isNavigatable ? -18 : 0
+                labelOffsetX: isNavigatable ? -20 : 0
               }
             ),
-            isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { opacity: 0.9, size: 18, x: 18, y: 22 })
+            isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { opacity: 0.9, size: 20, x: 18, y: 21 })
           ] }),
           !_isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered }),

package/dist/@likec4/diagrams/diagram/icons/ZoomIn.js

@@ -20,6 +20,7 @@ export const ZoomInIcon = ({ fill = "#BABABA", opacity = 1, size = 20, x, y }) =
       width: originalSize,
       height: originalSize,
       opacity,
+      perfectDrawEnabled: false,
       globalCompositeOperation: "luminosity"
     }
   );

package/dist/@likec4/diagrams/diagram/shapes/Compound.js

@@ -23,21 +23,19 @@ export function CompoundShape({ node, theme, springs, labelOffsetX = 0 }) {
     labels.map(({ pt: [x, y], ...label }, i) => /* @__PURE__ */ jsx(
       Text,
       {
-        x: x - 6,
-        y: y - 8,
+        x: x + 4,
+        y,
         offsetX: labelOffsetX,
-        width: node.size.width - x - 8 - 6 + labelOffsetX,
+        width: node.size.width + labelOffsetX - 4,
         fill: "#BABABA",
         fontFamily: theme.font,
         fontSize: label.fontSize,
         fontStyle: label.fontStyle ?? "normal",
-        letterSpacing: 0.75,
         align: label.align,
         text: label.text,
         wrap: "none",
         ellipsis: true,
         perfectDrawEnabled: false,
-        padding: 8,
         globalCompositeOperation: "luminosity"
       },
       i

package/dist/@likec4/diagrams/diagram/shapes/Edge.js

@@ -42,7 +42,7 @@ function EdgeLabelBg({
       y: labelBBox.y - padding,
       width: labelBBox.width + padding * 2,
       height: labelBBox.height + padding * 2,
-      opacity: isHovered ? 0.5 : 0.12
+      opacity: isHovered ? 0.75 : 0.65
     },
     immediate: !animate
   });
@@ -53,7 +53,7 @@ function EdgeLabelBg({
       perfectDrawEnabled: false,
       fill: springs.labelBgColor,
       cornerRadius: 2,
-      globalCompositeOperation: "darken",
+      globalCompositeOperation: "lighten",
       hitStrokeWidth: 5
     }
   );

package/dist/__app__/src/pages/useTransparentBackground.js

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 export function useTransparentBackground(enabled = true) {
     useEffect(() => {
         const htmlEl = document.body.parentElement;
-        if (!htmlEl || !enabled)
+        if (!htmlEl || enabled !== true)
             return;
         // see ../../likec4.css
         const classname = 'transparent-bg';