@likec4/diagram 1.20.0 → 1.20.2

package/dist/LikeC4Diagram.css.d.ts

@@ -2,3 +2,4 @@ export declare const cssReactFlow: string;
 export declare const notInitialized: string;
 export declare const cssDisablePan: string;
 export declare const cssTransparentBg: string;
+export declare const hiddenIfZoomTooSmall: string;

package/dist/LikeC4Diagram.css.js

@@ -2,8 +2,10 @@
 var cssReactFlow = "_2h8g8h0";
 var cssDisablePan = "_2h8g8h2";
 var cssTransparentBg = "_2h8g8h3";
+var hiddenIfZoomTooSmall = "_2h8g8h4";
 export {
   cssDisablePan,
   cssReactFlow,
-  cssTransparentBg
+  cssTransparentBg,
+  hiddenIfZoomTooSmall
 };

package/dist/base/BaseXYFlow.js

@@ -1,13 +1,15 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useCallbackRef } from "@mantine/hooks";
-import { ReactFlow, useStoreApi, useOnViewportChange } from "@xyflow/react";
+import { ReactFlow, useStoreApi, useOnViewportChange, useStore } from "@xyflow/react";
 import clsx from "clsx";
-import { useMemo, useEffect } from "react";
+import { useMemo } from "react";
+import { useIsZoomTooSmall } from "../hooks/useXYFlow.js";
 import { cssReactFlow, cssDisablePan, cssTransparentBg } from "../LikeC4Diagram.css.js";
 import { stopPropagation } from "../utils/xyflow.js";
 import { Background } from "./Background.js";
 import { MaxZoom, MinZoom } from "./const.js";
 import { Base } from "./types.js";
+import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
 const BaseXYFlow = ({
   nodes,
   edges,
@@ -28,6 +30,7 @@ const BaseXYFlow = ({
   ...props
 }) => {
   const isBgWithPattern = background !== "transparent" && background !== "solid";
+  const isZoomTooSmall = useIsZoomTooSmall();
   return /* @__PURE__ */ jsxs(
     ReactFlow,
     {
@@ -41,6 +44,7 @@ const BaseXYFlow = ({
         background === "transparent" && cssTransparentBg,
         className
       ),
+      "data-likec4-zoom-small": isZoomTooSmall,
       zoomOnPinch: zoomable,
       zoomOnScroll: !pannable && zoomable,
       ...!zoomable && {
@@ -65,6 +69,7 @@ const BaseXYFlow = ({
       ...!pannable && {
         selectionKeyCode: null
       },
+      onlyRenderVisibleElements: nodes.length > 75,
       elementsSelectable: nodesSelectable,
       nodesFocusable: nodesDraggable || nodesSelectable,
       edgesFocusable: false,
@@ -127,18 +132,14 @@ const BaseXYFlowInner = ({
       }
     }
   });
-  const listenToViewportResize = !!onViewportResize;
-  const onViewportResizeCb = useCallbackRef(onViewportResize);
-  useEffect(() => {
-    if (!listenToViewportResize) {
-      return;
-    }
-    return xyflowApi.subscribe((state, prevState) => {
-      if (state.width !== prevState.width || state.height !== prevState.height) {
-        onViewportResizeCb();
-      }
-    });
-  }, [listenToViewportResize]);
+  return /* @__PURE__ */ jsx(Fragment, { children: onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize }) });
+};
+const selectDimensions = ({ width, height }) => ({ width, height });
+const ViewportResizeHanlder = ({
+  onViewportResize
+}) => {
+  const { width, height } = useStore(selectDimensions);
+  useUpdateEffect(onViewportResize, [width, height]);
   return /* @__PURE__ */ jsx(Fragment, {});
 };
 export {

package/dist/base/Link.css.d.ts

@@ -0,0 +1,3 @@
+export declare const elementLink: string;
+export declare const linkIcon: string;
+export declare const linkTitleBox: string;

package/dist/base/Link.css.js

@@ -0,0 +1,9 @@
+/* empty css                        */
+var elementLink = "_180738q0";
+var linkIcon = "_180738q1";
+var linkTitleBox = "_180738q2";
+export {
+  elementLink,
+  linkIcon,
+  linkTitleBox
+};

package/dist/base/Link.d.ts

@@ -0,0 +1,5 @@
+import { Link as LinkData } from '@likec4/core';
+export declare function Link({ value, size, }: {
+    size?: 'sm' | 'md';
+    value: LinkData;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/base/Link.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CopyButton, Anchor, ActionIcon, Box, Text } from "@mantine/core";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { elementLink, linkIcon, linkTitleBox } from "./Link.css.js";
+import { stopPropagation } from "../utils/xyflow.js";
+function Link({
+  value,
+  size = "md"
+}) {
+  const isNormalSize = size === "md";
+  const url = new URL(value.url, window.location.href).toString();
+  return /* @__PURE__ */ jsx(CopyButton, { value: url, children: ({ copied, copy }) => /* @__PURE__ */ jsxs(
+    Anchor,
+    {
+      href: url,
+      target: "_blank",
+      underline: "never",
+      className: elementLink,
+      "data-size": size,
+      onClick: stopPropagation,
+      children: [
+        /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            className: linkIcon,
+            tabIndex: -1,
+            size: isNormalSize ? 24 : 20,
+            variant: copied ? "light" : "subtle",
+            color: copied ? "teal" : "gray",
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              copy();
+            },
+            children: copied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, { style: { width: "65%", opacity: 0.65 } })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { className: linkTitleBox, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              component: "div",
+              fz: isNormalSize ? "xs" : 11,
+              truncate: true,
+              lh: isNormalSize ? 1.3 : 1.2,
+              fw: value.title ? 500 : 400,
+              children: value.title || url
+            }
+          ),
+          value.title && /* @__PURE__ */ jsx(Text, { component: "div", fz: isNormalSize ? 10 : 9, c: "dimmed", lh: isNormalSize ? 1.2 : 1.1, truncate: true, children: url })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  Link
+};

package/dist/base/const.d.ts

@@ -2,6 +2,7 @@ export declare const ZIndexes: {
     readonly Compound: 2;
     readonly Edge: 4;
     readonly Element: 6;
+    readonly Max: 8;
 };
 export declare const MinZoom = 0.1;
 export declare const MaxZoom = 2;

package/dist/base/const.js

@@ -1,7 +1,8 @@
 const ZIndexes = {
   Compound: 2,
   Edge: 4,
-  Element: 6
+  Element: 6,
+  Max: 8
 };
 const MinZoom = 0.1;
 const MaxZoom = 2;

package/dist/base/example/custom.d.ts

@@ -35,9 +35,9 @@ export declare const edgeTypes: {
         target: string;
         style?: CSSProperties;
         id: string;
-        selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
+        selected?: boolean;
         animated?: boolean;
         sourceX: number;
         sourceY: number;

package/dist/base/index.d.ts

@@ -1,2 +1,3 @@
 export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
 export { Base, type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';
+export { Link } from './Link';

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

@@ -3,6 +3,7 @@ import { Box, ActionIcon } from "@mantine/core";
 import { IconZoomScan } from "@tabler/icons-react";
 import clsx from "clsx";
 import { m } from "framer-motion";
+import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
 import { container, actionButton, actionIcon } from "./CompoundActionButton.css.js";
 function CompoundActionButton({
@@ -12,7 +13,7 @@ function CompoundActionButton({
   icon,
   onClick
 }) {
-  return /* @__PURE__ */ jsx(Box, { className: clsx(container, "compound-action"), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall, "compound-action"), children: /* @__PURE__ */ jsx(
     Box,
     {
       className: clsx("nodrag nopan", actionButton),

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

@@ -3,6 +3,7 @@ import { Box, ActionIcon } from "@mantine/core";
 import { IconId } from "@tabler/icons-react";
 import clsx from "clsx";
 import { m } from "framer-motion";
+import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
 import { container, actionIconWrapper, actionIcon } from "./CompoundDetailsButton.css.js";
 function CompoundDetailsButton({
@@ -12,7 +13,7 @@ function CompoundDetailsButton({
   icon,
   onClick
 }) {
-  return /* @__PURE__ */ jsx(Box, { className: clsx(container, "details-button"), onClick: stopPropagation, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall, "details-button"), onClick: stopPropagation, children: /* @__PURE__ */ jsx(
     Box,
     {
       component: m.div,

package/dist/base/primitives/compound/CompoundNodeContainer.css.d.ts

@@ -2,7 +2,6 @@ export declare const varCompoundOpacity: `var(--${string})` | `var(--${string},
 export declare const varBorderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const varBorderTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const varBorderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const dimmed: string;
 export declare const container: string;
 export declare const compoundBg: string;
 export declare const compoundBorder: string;

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

@@ -1,16 +1,14 @@
 /* empty css                                         */
 var varCompoundOpacity = "var(--_7cmew10)";
 var varBorderTransparency = "var(--_7cmew12)";
-var dimmed = "_7cmew15";
-var container = "_7cmew16";
-var compoundBg = "_7cmew17";
-var compoundBorder = "_7cmew18";
-var indicator = "_7cmew1c";
+var container = "_7cmew15";
+var compoundBg = "_7cmew16";
+var compoundBorder = "_7cmew17";
+var indicator = "_7cmew1b";
 export {
   compoundBg,
   compoundBorder,
   container,
-  dimmed,
   indicator,
   varBorderTransparency,
   varCompoundOpacity

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

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
 import { isNumber, clamp } from "remeda";
-import { container, dimmed, varCompoundOpacity, varBorderTransparency, indicator, compoundBg, compoundBorder } from "./CompoundNodeContainer.css.js";
+import { container, varCompoundOpacity, varBorderTransparency, indicator, compoundBg, compoundBorder } from "./CompoundNodeContainer.css.js";
 const CompoundNodeContainer = createPolymorphicComponent(
   forwardRef(({
     nodeProps: {
@@ -39,7 +39,6 @@ const CompoundNodeContainer = createPolymorphicComponent(
         component: m.div,
         className: clsx([
           container,
-          isDimmed && dimmed,
           "likec4-compound-node"
         ]),
         initial: false,
@@ -47,6 +46,7 @@ const CompoundNodeContainer = createPolymorphicComponent(
         "data-likec4-color": data.color,
         "data-compound-depth": data.depth ?? 1,
         "data-compound-transparent": isTransparent,
+        "data-likec4-dimmed": isDimmed,
         "data-likec4-shape": data.shape,
         style: assignInlineVars({
           [varCompoundOpacity]: opacity.toFixed(2),

package/dist/base/primitives/customEdge.d.ts

@@ -11,9 +11,9 @@ export declare function customEdge<P extends Record<string, unknown> = Base.Node
     target: string;
     style?: CSSProperties;
     id: string;
-    selected?: boolean;
     selectable?: boolean;
     deletable?: boolean;
+    selected?: boolean;
     animated?: boolean;
     sourceX: number;
     sourceY: number;

package/dist/base/primitives/customEdge.js

@@ -3,7 +3,7 @@ import { memo } from "react";
 const isSame = (a, b) => {
   return Math.abs(a - b) < 2.5;
 };
-const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.selected ?? false, next.selected ?? false) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data) && deepEqual(prev.style, next.style);
+const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data) && deepEqual(prev.style, next.style);
 function customEdge(Edge) {
   return memo(Edge, edgePropsEqual);
 }

package/dist/base/primitives/customNode.js

@@ -1,6 +1,6 @@
 import { deepEqual } from "fast-equals";
 import { memo } from "react";
-const nodePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.data, next.data);
+const nodePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex, next.zIndex) && deepEqual(prev.positionAbsoluteX, next.positionAbsoluteX) && deepEqual(prev.positionAbsoluteY, next.positionAbsoluteY) && deepEqual(prev.data, next.data);
 function customNode(Node) {
   return memo(Node, nodePropsEqual);
 }

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

@@ -6,6 +6,7 @@ import { EdgeLabelRenderer } from "@xyflow/react";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { isTruthy, isNumber } from "remeda";
+import { useIsZoomTooSmall } from "../../../hooks/useXYFlow.js";
 import { ZIndexes } from "../../const.js";
 import { edgeVars, edgeLabelContainer, dimmed, edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, varTranslate } from "./EdgeLabel.css.js";
 const toCssVarValue = (value) => {
@@ -31,13 +32,14 @@ const EdgeLabel = createPolymorphicComponent(
     children,
     ...rest
   }, ref) => {
+    const isZoomTooSmall = useIsZoomTooSmall();
     const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
     let zIndex = ZIndexes.Edge;
     if (isHovered || isActive) {
       zIndex = ZIndexes.Element + 1;
     }
     let labelX = (labelXY == null ? void 0 : labelXY.x) ?? (labelBBox == null ? void 0 : labelBBox.x), labelY = (labelXY == null ? void 0 : labelXY.y) ?? (labelBBox == null ? void 0 : labelBBox.y);
-    if (labelX === void 0 || labelY === void 0) {
+    if (labelX === void 0 || labelY === void 0 || isZoomTooSmall) {
       return null;
     }
     const translate = labelXY == null ? void 0 : labelXY.translate;

package/dist/base/primitives/edge/EdgePath.d.ts

@@ -6,9 +6,9 @@ export declare const EdgePath: ForwardRefExoticComponent<{
     target: string;
     style?: CSSProperties;
     id: string;
-    selected?: boolean;
     selectable?: boolean;
     deletable?: boolean;
+    selected?: boolean;
     animated?: boolean;
     sourceX: number;
     sourceY: number;
@@ -40,5 +40,6 @@ export declare const EdgePath: ForwardRefExoticComponent<{
     };
 } & {
     svgPath: string;
+    strokeWidth?: number;
     onEdgePointerDown?: PointerEventHandler<SVGGElement> | undefined;
 } & RefAttributes<SVGPathElement>>;

package/dist/base/primitives/edge/EdgePath.js

@@ -11,6 +11,7 @@ const EdgePath = forwardRef(({
     tail,
     head
   },
+  strokeWidth,
   svgPath,
   style,
   interactionWidth,
@@ -63,6 +64,7 @@ const EdgePath = forwardRef(({
           className: clsx("react-flow__edge-path", cssEdgePath),
           d: svgPath,
           style,
+          strokeWidth,
           strokeLinecap: "round",
           strokeDasharray,
           markerStart: MarkerStart ? `url(#start${id})` : void 0,

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

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Box, ActionIcon } from "@mantine/core";
 import clsx from "clsx";
 import { m } from "framer-motion";
+import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
 import { container, actionButtons, actionIcon } from "./ElementActionButtons.css.js";
 function ElementActionButtons({
@@ -15,7 +16,7 @@ function ElementActionButtons({
   if (!buttons.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Box, { className: container, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall), children: /* @__PURE__ */ jsx(
     Box,
     {
       component: m.div,

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

@@ -3,6 +3,7 @@ import { Box, ActionIcon } from "@mantine/core";
 import { IconId } from "@tabler/icons-react";
 import clsx from "clsx";
 import { m } from "framer-motion";
+import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
 import { container, actionIconWrapper, actionIcon } from "./ElementDetailsButton.css.js";
 function ElementDetailsButton({
@@ -13,7 +14,7 @@ function ElementDetailsButton({
   icon,
   onClick
 }) {
-  return /* @__PURE__ */ jsx(Box, { className: clsx(container, "details-button"), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall, "details-button"), children: /* @__PURE__ */ jsx(
     Box,
     {
       className: clsx("nodrag nopan", actionIconWrapper),

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

@@ -1,3 +1,2 @@
 export declare const stokeFillMix: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const container: string;
-export declare const dimmed: string;

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

@@ -1,7 +1,5 @@
 /* empty css                                        */
 var container = "_1smoows1";
-var dimmed = "_1smoows2";
 export {
-  container,
-  dimmed
+  container
 };

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

@@ -3,7 +3,7 @@ import { createPolymorphicComponent, Box } from "@mantine/core";
 import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
-import { container, dimmed } from "./ElementNodeContainer.css.js";
+import { container } from "./ElementNodeContainer.css.js";
 const ElementNodeContainer = createPolymorphicComponent(
   forwardRef(({
     nodeProps: {
@@ -34,11 +34,9 @@ const ElementNodeContainer = createPolymorphicComponent(
         ref,
         className: clsx([
           container,
-          isDimmed && dimmed,
           "likec4-element-node"
         ]),
         initial: false,
-        layoutRoot: true,
         ...selectable && {
           animate: {
             scale
@@ -48,6 +46,7 @@ const ElementNodeContainer = createPolymorphicComponent(
         "data-hovered": isHovered,
         "data-likec4-color": data.color,
         "data-likec4-shape": data.shape,
+        "data-likec4-dimmed": isDimmed,
         ...rest,
         children
       }

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

@@ -1,5 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
+import clsx from "clsx";
+import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { toDomPrecision } from "../../../utils/xyflow.js";
 import { shapeSvgMultiple, shapeSvg, indicator, fillMixStroke, fillElementFill } from "./ElementShape.css.js";
 function cylinderSVGPath(diameter, height, tilt = 0.065) {
@@ -150,7 +152,7 @@ function ElementShape({ data, width, height, isMultiple = false, withSelectedInd
   let w = !!width && width > 10 ? width : data.width;
   let h = !!height && height > 10 ? height : data.height;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isMultiple && /* @__PURE__ */ jsx("svg", { className: shapeSvgMultiple, viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h }) }),
+    isMultiple && /* @__PURE__ */ jsx("svg", { className: clsx(shapeSvgMultiple, hiddenIfZoomTooSmall), viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h }) }),
     /* @__PURE__ */ jsxs("svg", { className: shapeSvg, viewBox: `0 0 ${w} ${h}`, children: [
       withSelectedIndicator && /* @__PURE__ */ jsx(SelectedIndicator, { shape: data.shape, w, h }),
       /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h })
@@ -182,7 +184,7 @@ function SelectedIndicator({ shape, w, h }) {
       break;
     }
   }
-  return /* @__PURE__ */ jsx("g", { className: indicator, children: svg });
+  return /* @__PURE__ */ jsx("g", { className: clsx(indicator, hiddenIfZoomTooSmall), children: svg });
 }
 export {
   ElementShape,

package/dist/base/primitives/element/ElementTitle.js

@@ -4,6 +4,7 @@ import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic
 import clsx from "clsx";
 import { isTruthy, isNumber } from "remeda";
 import { IconRenderer } from "../../../context/IconRenderer.js";
+import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { elementIcon, elementDataContainer, hasIcon, elementTextData, title, technology, description, iconSize } from "./ElementTitle.css.js";
 function ElementTitle({ id, data, iconSize: iconSize$1 }) {
   const elementIcon$1 = IconRenderer({
@@ -43,7 +44,7 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
             Text,
             {
               component: "div",
-              className: clsx(technology, "likec4-element-technology"),
+              className: clsx(technology, hiddenIfZoomTooSmall, "likec4-element-technology"),
               children: data.technology
             }
           ),

package/dist/base/updateEdges.js

@@ -1,14 +1,14 @@
 import { deepEqual } from "fast-equals";
-import { isDefined } from "remeda";
+import { isDefined, omit } 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) {
-      if (deepEqual(existing.hidden ?? false, next.hidden ?? false) && deepEqual(existing.source, next.source) && deepEqual(existing.sourceHandle ?? null, next.sourceHandle ?? null) && deepEqual(existing.target, next.target) && deepEqual(existing.targetHandle ?? null, next.targetHandle ?? null) && deepEqual(existing.data, next.data)) {
+      if (deepEqual(existing.hidden ?? false, next.hidden ?? false) && deepEqual(existing.source, next.source) && deepEqual(existing.sourceHandle ?? null, next.sourceHandle ?? null) && deepEqual(existing.target, next.target) && deepEqual(existing.targetHandle ?? null, next.targetHandle ?? null) && deepEqual(existing.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(existing.data, next.data)) {
         return existing;
       }
       return {
-        ...existing,
+        ...omit(existing, ["hidden", "zIndex"]),
         ...next,
         data: {
           ...existing.data,

package/dist/base/updateNodes.js

@@ -6,11 +6,11 @@ function _update(current, updated) {
     const existing = current.find((n) => n.id === update.id);
     if (existing) {
       const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
-      if (deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data) && deepEqual(existing.parentId ?? null, update.parentId ?? null)) {
+      if (deepEqual(existing.type, update.type) && 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) && deepEqual(existing.data, update.data)) {
         return existing;
       }
       return {
-        ...omit(existing, ["measured", "parentId"]),
+        ...omit(existing, ["measured", "parentId", "hidden", "zIndex"]),
         ...update,
         // Force dimensions from update
         width: update.initialWidth,

package/dist/context/FramerMotionConfig.js

@@ -5,7 +5,7 @@ import "react";
 const FramerMotionConfig = ({ children }) => {
   var _a;
   const nonce = (_a = useMantineStyleNonce()) == null ? void 0 : _a();
-  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion: "user", ...nonce && { nonce }, children }) });
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(MotionConfig, { ...nonce && { nonce }, children }) });
 };
 export {
   FramerMotionConfig