likec4 1.39.0 → 1.39.1

package/__app__/src/main.js

@@ -1403,6 +1403,14 @@ function usePrevious$1(value) {
     ref.current = value;
   }, [value]), ref.current;
 }
+function useInViewport() {
+  const observer = useRef(null), [inViewport, setInViewport] = useState(!1);
+  return { ref: useCallback((node2) => {
+    typeof IntersectionObserver < "u" && (node2 && !observer.current ? observer.current = new IntersectionObserver(
+      (entries) => setInViewport(entries.some((entry) => entry.isIntersecting))
+    ) : observer.current?.disconnect(), node2 ? observer.current?.observe(node2) : setInViewport(!1));
+  }, []), inViewport };
+}
 function useMutationObserver(callback, options, target) {
   const observer = useRef(null), ref = useRef(null);
   return useEffect(() => {
@@ -30086,9 +30094,9 @@ function m$3(r2) {
 }
 var d$4 = (r2) => typeof r2 == "function" && r2.length === 1;
 function m$2(...r2) {
-  return u$8(o$8, r2);
+  return u$8(o$9, r2);
 }
-function o$8(r2, t2) {
+function o$9(r2, t2) {
   let e2 = [...r2];
   return e2.sort(t2), e2;
 }
@@ -30122,6 +30130,11 @@ function p$2(...e2) {
   return u$8(t$7, e2);
 }
 var t$7 = (e2, o2) => e2[o2];
+function o$8(r2, n2) {
+  let e2 = Math.ceil(r2), t2 = Math.floor(n2);
+  if (t2 < e2) throw new RangeError(`randomInteger: The range [${r2.toString()},${n2.toString()}] contains no integer`);
+  return Math.floor(Math.random() * (t2 - e2 + 1) + e2);
+}
 function a$5(...r2) {
   return u$8(o$7, r2);
 }
@@ -31034,11 +31047,12 @@ function useTagSpecification(tag) {
 }
 const RootContainerContext = createContext(createRef());
 function RootContainer({
+  id: id2,
   className,
   reduceGraphics = !1,
   children: children2
 }) {
-  const id2 = useId$2(), ref = useRef(null), $isPanning = usePanningAtom();
+  const ref = useRef(null), $isPanning = usePanningAtom();
   return useEffect(() => $isPanning.listen((isPanning) => {
     ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
   }), [$isPanning]), /* @__PURE__ */ jsx(
@@ -36502,8 +36516,7 @@ const EdgeLabel = forwardRef(({
       className: cx(classes2.root, "likec4-edge-label", className),
       "data-edge-id": id2,
       animate: {
-        originY: 0.25,
-        scale: isHovered && !selected2 ? 1.08 : 1
+        scale: isHovered && !selected2 ? 1.06 : 1
       },
       ...rest,
       children: [
@@ -47808,13 +47821,16 @@ const scrollArea = css({
   fontSize: "xxs",
   fontWeight: 500,
   whiteSpace: "nowrap",
-  padding: "[2px 4px]",
+  paddingX: "1",
+  paddingY: "0.5",
   borderRadius: "[2px]",
-  background: "var(--likec4-palette-fill)/30",
-  lineHeight: "[1.11]",
-  mixBlendMode: "hard-light",
+  background: {
+    _light: "var(--likec4-palette-fill)/90",
+    _dark: "var(--likec4-palette-fill)/60"
+  },
+  lineHeight: "1",
   color: {
-    _light: "[color-mix(in srgb, var(--likec4-palette-stroke), {colors.likec4.mixColor} 60%)]",
+    _light: "var(--likec4-palette-hiContrast)",
     _dark: "var(--likec4-palette-loContrast)"
   }
 }), title$1 = css({
@@ -47840,9 +47856,9 @@ function selectDiagramContext(c2) {
 }
 const RelationshipPopover = memo$2(() => {
   const actorRef = xstateReact_cjsExports.useActorRef(RelationshipPopoverActorLogic), diagram = useDiagram(), { viewId, selected: selected2 } = useDiagramContext(selectDiagramContext), openedEdgeId = xstateReact_cjsExports.useSelector(actorRef, (s2) => s2.hasTag("opened") ? s2.context.edgeId : null);
-  useUpdateEffect(() => {
+  useOnDiagramEvent("viewChange", () => {
     actorRef.send({ type: "close" });
-  }, [viewId]), useOnDiagramEvent("edgeMouseEnter", ({ edge }) => {
+  }), useOnDiagramEvent("edgeMouseEnter", ({ edge }) => {
     actorRef.send({ type: "xyedge.mouseEnter", edgeId: edge.data.id });
   }), useOnDiagramEvent("edgeMouseLeave", () => {
     actorRef.send({ type: "xyedge.mouseLeave" });
@@ -47850,7 +47866,7 @@ const RelationshipPopover = memo$2(() => {
     actorRef.send({ type: "close" });
   }), useOnDiagramEvent("walkthroughStarted", () => {
     actorRef.send({ type: "close" });
-  }), useUpdateEffect(() => {
+  }), useEffect(() => {
     selected2 ? actorRef.send({ type: "xyedge.select", edgeId: selected2 }) : actorRef.send({ type: "xyedge.unselect" });
   }, [selected2]);
   const onMouseEnter = useCallback((event) => {
@@ -47888,7 +47904,7 @@ const RelationshipPopover = memo$2(() => {
       onMouseLeave
     }
   );
-}), getEdgeLabelElement = (edgeId, container2) => container2?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? null, selectTransform = (s2) => roundDpr(s2.transform[0]) + " " + roundDpr(s2.transform[1]) + " " + s2.transform[2].toFixed(3), RelationshipPopoverInternal = ({
+}), getEdgeLabelElement = (edgeId, container2) => container2?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? null, POPOVER_PADDING = 8, RelationshipPopoverInternal = ({
   viewId,
   diagramEdge,
   sourceNode,
@@ -47896,21 +47912,21 @@ const RelationshipPopover = memo$2(() => {
   onMouseEnter,
   onMouseLeave
 }) => {
-  const ref = useRef(null), { enableNavigateTo, enableVscode } = useEnabledFeatures(), { onOpenSource } = useDiagramEventHandlers(), { portalProps } = useMantinePortalProps(), [referenceEl, setReferenceEl] = useState(null), viewport = useXYStore(selectTransform);
+  const ref = useRef(null), { enableNavigateTo, enableVscode } = useEnabledFeatures(), { onOpenSource } = useDiagramEventHandlers(), { portalProps } = useMantinePortalProps(), [referenceEl, setReferenceEl] = useState(null);
   useEffect(() => {
     setReferenceEl(getEdgeLabelElement(diagramEdge.id, portalProps?.target));
-  }, [diagramEdge, viewport]), useEffect(() => {
+  }, [diagramEdge]), useEffect(() => {
     const reference = referenceEl, popper = ref.current;
     if (!reference || !popper)
       return;
     let wasCanceled = !1;
     const cleanup = autoUpdate(reference, popper, () => {
       computePosition(reference, popper, {
-        placement: "bottom",
+        placement: "bottom-start",
         middleware: [
           offset$2(2),
           autoPlacement({
-            padding: 16,
+            padding: POPOVER_PADDING,
             allowedPlacements: [
               "bottom-start",
               "bottom-end",
@@ -47923,21 +47939,24 @@ const RelationshipPopover = memo$2(() => {
             ]
           }),
           size$1({
-            padding: 16,
+            padding: POPOVER_PADDING,
             apply({ availableHeight, availableWidth, elements }) {
               wasCanceled || Object.assign(elements.floating.style, {
-                maxWidth: `${u(roundDpr(availableWidth), { min: 150, max: 400 })}px`,
+                maxWidth: `${u(roundDpr(availableWidth), { min: 200, max: 400 })}px`,
                 maxHeight: `${u(roundDpr(availableHeight), { min: 0, max: 500 })}px`
               });
             }
           }),
           hide$1({
-            padding: 16
+            padding: POPOVER_PADDING * 2
           })
         ]
       }).then(({ x: x2, y: y2, middlewareData }) => {
         wasCanceled || (popper.style.transform = `translate(${roundDpr(x2)}px, ${roundDpr(y2)}px)`, popper.style.visibility = middlewareData.hide?.referenceHidden ? "hidden" : "visible");
       });
+    }, {
+      ancestorResize: !1,
+      animationFrame: !0
     });
     return () => {
       wasCanceled = !0, cleanup();
@@ -47995,7 +48014,7 @@ const RelationshipPopover = memo$2(() => {
       styles: {
         viewport: {
           overscrollBehavior: "contain",
-          minWidth: 150
+          minWidth: 180
         }
       },
       className: cx(
@@ -48015,9 +48034,9 @@ const RelationshipPopover = memo$2(() => {
         VStack,
         {
           css: {
-            gap: "3.5",
+            gap: "3",
             padding: "4",
-            paddingTop: "2.5"
+            paddingTop: "2"
           },
           children: [
             /* @__PURE__ */ jsx(
@@ -48038,12 +48057,19 @@ const RelationshipPopover = memo$2(() => {
               }
             ),
             direct.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              /* @__PURE__ */ jsx(Divider$1, { label: /* @__PURE__ */ jsx(Label, { children: "direct relationships" }), labelPosition: "left" }),
+              /* @__PURE__ */ jsx(Label, { children: "DIRECT RELATIONSHIPS" }),
               direct.map(renderRelationship)
             ] }),
             nested.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              direct.length > 0 && /* @__PURE__ */ jsx(Space, {}),
-              /* @__PURE__ */ jsx(Divider$1, { label: /* @__PURE__ */ jsx(Label, { children: "resolved from nested" }), labelPosition: "left" }),
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  css: {
+                    mt: direct.length > 0 ? "2" : "0"
+                  },
+                  children: "RESOLVED FROM NESTED"
+                }
+              ),
               nested.map(renderRelationship)
             ] })
           ]
@@ -48060,7 +48086,7 @@ const RelationshipPopover = memo$2(() => {
   onNavigateTo,
   onOpenSource
 }, ref) => {
-  const sourceId = getShortId(r2, r2.source.id, sourceNode), targetId = getShortId(r2, r2.target.id, targetNode), navigateTo = onNavigateTo && r2.navigateTo?.id !== viewId ? r2.navigateTo?.id : void 0, links = r2.links;
+  const sourceId = getEndpointId(r2, "source", sourceNode), targetId = getEndpointId(r2, "target", targetNode), navigateTo = onNavigateTo && r2.navigateTo?.id !== viewId ? r2.navigateTo?.id : void 0, links = r2.links;
   return /* @__PURE__ */ jsxs(
     VStack,
     {
@@ -48068,8 +48094,8 @@ const RelationshipPopover = memo$2(() => {
       className: bleed({
         block: "2",
         inline: "2",
-        paddingBlock: "2",
-        paddingInline: "2",
+        paddingY: "2.5",
+        paddingX: "2",
         gap: "1",
         rounded: "sm",
         backgroundColor: {
@@ -48080,42 +48106,40 @@ const RelationshipPopover = memo$2(() => {
         }
       }),
       children: [
-        /* @__PURE__ */ jsxs(HStack, { gap: "0.5", children: [
-          /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": sourceNode.color, className: endpoint, children: sourceId }),
+        /* @__PURE__ */ jsx(HStack, { gap: "0.5", children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 200, children: [
+          /* @__PURE__ */ jsx(Tooltip$1, { label: sourceId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": sourceNode.color, className: endpoint, children: sourceId.short }) }),
           /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: "11px", opacity: 0.65 }),
-          /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": targetNode.color, className: endpoint, children: targetId }),
-          /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 100, children: [
-            navigateTo && /* @__PURE__ */ jsx(Tooltip$1, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
-              ActionIcon$1,
-              {
-                size: "sm",
-                radius: "sm",
-                variant: "default",
-                onClick: (event) => {
-                  event.stopPropagation(), onNavigateTo?.(navigateTo);
-                },
-                style: {
-                  alignSelf: "flex-end"
-                },
-                role: "button",
-                children: /* @__PURE__ */ jsx(IconZoomScan, { size: "80%", stroke: 2 })
-              }
-            ) }),
-            onOpenSource && /* @__PURE__ */ jsx(Tooltip$1, { label: "Open source", children: /* @__PURE__ */ jsx(
-              ActionIcon$1,
-              {
-                size: "sm",
-                radius: "sm",
-                variant: "default",
-                onClick: (event) => {
-                  event.stopPropagation(), onOpenSource();
-                },
-                role: "button",
-                children: /* @__PURE__ */ jsx(IconFileSymlink, { size: "80%", stroke: 2 })
-              }
-            ) })
-          ] })
-        ] }),
+          /* @__PURE__ */ jsx(Tooltip$1, { label: targetId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": targetNode.color, className: endpoint, children: targetId.short }) }),
+          navigateTo && /* @__PURE__ */ jsx(Tooltip$1, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
+            ActionIcon$1,
+            {
+              size: "sm",
+              radius: "sm",
+              variant: "default",
+              onClick: (event) => {
+                event.stopPropagation(), onNavigateTo?.(navigateTo);
+              },
+              style: {
+                alignSelf: "flex-end"
+              },
+              role: "button",
+              children: /* @__PURE__ */ jsx(IconZoomScan, { size: "80%", stroke: 2 })
+            }
+          ) }),
+          onOpenSource && /* @__PURE__ */ jsx(Tooltip$1, { label: "Open source", children: /* @__PURE__ */ jsx(
+            ActionIcon$1,
+            {
+              size: "sm",
+              radius: "sm",
+              variant: "default",
+              onClick: (event) => {
+                event.stopPropagation(), onOpenSource();
+              },
+              role: "button",
+              children: /* @__PURE__ */ jsx(IconFileSymlink, { size: "80%", stroke: 2 })
+            }
+          ) })
+        ] }) }),
         /* @__PURE__ */ jsx(Box, { className: title$1, children: r2.title || "untitled" }),
         r2.kind && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
           /* @__PURE__ */ jsx(Label, { children: "kind" }),
@@ -48150,13 +48174,13 @@ const RelationshipPopover = memo$2(() => {
       ]
     }
   );
-}), Label = styled("span", {
+}), Label = styled("div", {
   base: {
-    display: "inline-block",
+    display: "block",
     fontSize: "xxs",
     fontWeight: 500,
     userSelect: "none",
-    lineHeight: "[1.11]",
+    lineHeight: "sm",
     color: "mantine.colors.dimmed"
   }
 }), Tooltip$1 = Tooltip$7.withProps({
@@ -48167,9 +48191,9 @@ const RelationshipPopover = memo$2(() => {
   offset: 8,
   withinPortal: !1
 });
-function getShortId(r2, actualEndpointId, diagramNode) {
-  const diagramNodeId = r2.isDeploymentRelation() ? diagramNode.id : diagramNode.modelRef || "";
-  return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length);
+function getEndpointId(r2, endpoint2, diagramNode) {
+  const diagramNodeId = r2.isDeploymentRelation() ? diagramNode.id : diagramNode.modelRef || "", full = r2[endpoint2].id, short = nameFromFqn(diagramNodeId) + full.slice(diagramNodeId.length);
+  return { full, short };
 }
 const root = css({
   height: "30px",
@@ -50236,7 +50260,7 @@ const channels = new Channels({ r: 0, g: 0, b: 0, a: 0 }, "transparent"), Hex =
   for (const c2 in channels2)
     adjustments[c2] = delta(ch[c2], channels2[c2], Utils.channel.max[c2]);
   return adjust(color2, adjustments);
-}, globalsCss = ".likec4-shadow-root dialog{color:var(--mantine-color-text)}.likec4-root{overflow:hidden;position:relative;padding:0;margin:0;width:100%;height:100%;border:0px solid transparent;container-name:likec4-root;container-type:size}.likec4-root .react-flow:is(.not-initialized){opacity:0}.likec4-root .react-flow{contain:paint;--xy-background-color: var(--colors-likec4-background);--xy-background-pattern-color: var(--colors-likec4-background-pattern, var(--colors-likec4-background))}.likec4-root .react-flow:is(.bg-transparent){background:transparent!important;--xy-background-color: transparent !important}.likec4-root .react-flow .react-flow__pane{user-select:none;--webkit-user-select: none}.likec4-static-view .react-flow .react-flow__attribution{display:none}:where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon{width:75%;height:75%}.likec4-root .likec4-edge-label-container{top:0;left:0;position:absolute;width:auto;height:auto}.likec4-root :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){opacity:.25}.likec4-root .likec4-edge-label-container:is([data-likec4-dimmed]){opacity:.25}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){filter:grayscale(85%) blur(3px)}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed]){filter:grayscale(85%) blur(3px)}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root .react-flow :where(.react-flow__nodes,.react-flow__edges,.react-flow__edgelabel-renderer){display:contents}.likec4-root .react-flow__node.draggable:has(.likec4-compound-node){cursor:default}[data-mantine-color-scheme=dark] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:plus-lighter}[data-mantine-color-scheme=light] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:screen}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-stroke-width: 3;--xy-edge-stroke: var(--likec4-palette-relation-stroke);--xy-edge-stroke-selected: var(--likec4-palette-relation-stroke-selected);--xy-edge-label-color: var(--likec4-palette-relation-label);--xy-edge-label-background-color: var(--likec4-palette-relation-label-bg)}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container):is([data-likec4-hovered=true],[data-edge-active=true]){--xy-edge-stroke-width: 4;--xy-edge-stroke: var(--likec4-palette-relation-stroke-selected)}[data-mantine-color-scheme=dark] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)}[data-mantine-color-scheme=light] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-color: color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)}", scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`, whenDark = scheme("dark"), whenLight = scheme("light"), MAX_DEPTH = 5, generateCompoundColors = (name, colors2, depth) => {
+}, globalsCss = ".likec4-shadow-root dialog{color:var(--mantine-color-text)}.likec4-root{overflow:hidden;position:relative;padding:0;margin:0;width:100%;height:100%;border:0px solid transparent;container-name:likec4-root;container-type:size}.likec4-root .react-flow:is(.not-initialized){opacity:0}.likec4-root .react-flow{contain:paint;--xy-background-color: var(--colors-likec4-background);--xy-background-pattern-color: var(--colors-likec4-background-pattern, var(--colors-likec4-background))}.likec4-root .react-flow:is(.bg-transparent){background:transparent!important;--xy-background-color: transparent !important}.likec4-root .react-flow .react-flow__pane{user-select:none;--webkit-user-select: none}.likec4-static-view .react-flow .react-flow__attribution{display:none}:where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon{width:75%;height:75%}.likec4-root .likec4-edge-label-container{top:0;left:0;position:absolute;width:auto;height:auto}.likec4-root :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){opacity:.25}.likec4-root .likec4-edge-label-container:is([data-likec4-dimmed]){opacity:.25}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){filter:grayscale(85%)}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed]){filter:grayscale(85%)}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root .react-flow :where(.react-flow__nodes,.react-flow__edges,.react-flow__edgelabel-renderer){display:contents}.likec4-root .react-flow__node.draggable:has(.likec4-compound-node){cursor:default}[data-mantine-color-scheme=dark] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:plus-lighter}[data-mantine-color-scheme=light] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:screen}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-stroke-width: 3;--xy-edge-stroke: var(--likec4-palette-relation-stroke);--xy-edge-stroke-selected: var(--likec4-palette-relation-stroke-selected);--xy-edge-label-color: var(--likec4-palette-relation-label);--xy-edge-label-background-color: var(--likec4-palette-relation-label-bg)}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container):is([data-likec4-hovered=true],[data-edge-active=true]){--xy-edge-stroke-width: 4;--xy-edge-stroke: var(--likec4-palette-relation-stroke-selected)}[data-mantine-color-scheme=dark] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)}[data-mantine-color-scheme=light] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-color: color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)}", scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`, whenDark = scheme("dark"), whenLight = scheme("light"), MAX_DEPTH = 5, generateCompoundColors = (rootSelector, name, colors2, depth) => {
   const compoundDarkColor = (color2) => toHex(
     scale(color2, {
       l: -22 - 5 * depth,
@@ -50247,7 +50271,7 @@ const channels = new Channels({ r: 0, g: 0, b: 0, a: 0 }, "transparent"), Hex =
       l: -20 - 3 * depth,
       s: -3 - 6 * depth
     })
-  ), selector3 = `:where([data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
+  ), selector3 = `:where(${rootSelector} [data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
   return `
 ${selector3} {
   --likec4-palette-fill: ${compoundLightColor(colors2.elements.fill)};
@@ -50259,8 +50283,8 @@ ${whenDark} ${selector3} {
 }
   `.trim();
 };
-function toStyle(name, colors2) {
-  const selector3 = `:where([data-likec4-color=${name}])`;
+function toStyle(rootSelector, name, colors2) {
+  const selector3 = `:where(${rootSelector} [data-likec4-color=${name}])`;
   return [
     `
 ${selector3} {
@@ -50280,37 +50304,67 @@ ${whenDark} ${selector3} {
 }
 
   `.trim(),
-    ...a$5(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(name, colors2, depth))
+    ...a$5(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(rootSelector, name, colors2, depth))
   ].join(`
 `);
 }
-const builtInColors = ThemeColors.map(
-  (color2) => toStyle(color2, {
-    elements: defaultTheme.elements[color2],
-    relationships: defaultTheme.relationships[color2]
-  })
-).join(`
-`);
-function generateCustomColorStyles(customColors) {
+function generateCustomColorStyles(customColors, rootSelector) {
   return C(
     t$1(customColors),
-    m$1(([name, color2]) => toStyle(name, color2)),
+    m$1(([name, color2]) => toStyle(rootSelector, name, color2)),
     r$2(`
 `)
   );
 }
-function LikeC4Styles() {
-  const nonce = useMantineStyleNonce()?.(), { customColors } = useLikeC4Specification(), customColorsStyles = customColors ? generateCustomColorStyles(customColors) : "";
-  return /* @__PURE__ */ jsx(MemoizedStyles, { nonce, customColorsStyles, builtInColors });
+function generateBuiltInColorStyles(rootSelector) {
+  return C(
+    ThemeColors,
+    m$1(
+      (color2) => toStyle(rootSelector, color2, {
+        elements: defaultTheme.elements[color2],
+        relationships: defaultTheme.relationships[color2]
+      })
+    ),
+    r$2(`
+`)
+  );
+}
+function LikeC4Styles({ id: id2 }) {
+  const rootSelector = `#${id2}`, nonce = useMantineStyleNonce()?.(), { customColors } = useLikeC4Specification(), customColorsStyles = customColors ? generateCustomColorStyles(customColors, rootSelector) : "", builtInColors = generateBuiltInColorStyles(rootSelector);
+  return /* @__PURE__ */ jsx(
+    MemoizedStyles,
+    {
+      id: id2,
+      nonce,
+      customColorsStyles,
+      builtInColors
+    }
+  );
 }
-const MemoizedStyles = memo$2(({ nonce, customColorsStyles, builtInColors: builtInColors2 }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-  /* @__PURE__ */ jsx("style", { type: "text/css", "data-likec4-global": !0, dangerouslySetInnerHTML: { __html: globalsCss }, nonce }),
-  /* @__PURE__ */ jsx("style", { type: "text/css", "data-likec4-colors": !0, dangerouslySetInnerHTML: { __html: builtInColors2 }, nonce }),
+const MemoizedStyles = memo$2(({ id: id2, nonce, customColorsStyles, builtInColors }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  /* @__PURE__ */ jsx(
+    "style",
+    {
+      type: "text/css",
+      "data-likec4-global": id2,
+      dangerouslySetInnerHTML: { __html: globalsCss.replaceAll(".likec4-root", `#${id2}.likec4-root`) },
+      nonce
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "style",
+    {
+      type: "text/css",
+      "data-likec4-colors": id2,
+      dangerouslySetInnerHTML: { __html: builtInColors },
+      nonce
+    }
+  ),
   customColorsStyles && /* @__PURE__ */ jsx(
     "style",
     {
       type: "text/css",
-      "data-likec4-custom-colors": !0,
+      "data-likec4-custom-colors": id2,
       dangerouslySetInnerHTML: { __html: customColorsStyles },
       nonce
     }
@@ -53459,7 +53513,7 @@ function LikeC4Diagram({
   renderNodes,
   children: children2
 }) {
-  const initialRef = useRef(null);
+  const id2 = useId$2().replace("mantine-", "likec4-"), initialRef = useRef(null);
   initialRef.current == null && (initialRef.current = {
     defaultEdges: [],
     defaultNodes: [],
@@ -53509,8 +53563,8 @@ function LikeC4Diagram({
                 onBurgerMenuClick
               },
               children: /* @__PURE__ */ jsxs(ReduceGraphicsContext, { reduceGraphics: isReducedGraphicsMode, children: [
-                /* @__PURE__ */ jsx(LikeC4Styles, {}),
-                /* @__PURE__ */ jsx(RootContainer, { className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(LikeC4Styles, { id: id2 }),
+                /* @__PURE__ */ jsx(RootContainer, { id: id2, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
                   ReactFlowProvider,
                   {
                     fitView,
@@ -53835,12 +53889,15 @@ function RouteComponent$1() {
   ) });
 }
 function ViewCard({ view }) {
-  const [visible2, setVisible] = useState(!1);
-  return useTimeoutEffect(() => {
-    setVisible(!0);
-  }, 100), /* @__PURE__ */ jsxs(
+  const [visible2, setVisible] = useState(!1), { ref, inViewport } = useInViewport();
+  return useEffect(() => {
+    if (!inViewport || visible2) return;
+    const tm = setTimeout(() => setVisible(!0), o$8(30, 80));
+    return () => clearTimeout(tm);
+  }, [inViewport]), /* @__PURE__ */ jsxs(
     Card,
     {
+      ref,
       shadow: "xs",
       padding: "lg",
       radius: "sm",