likec4 1.27.2 → 1.27.3

package/__app__/src/main.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useState, Fragment, createContext, useContext, useRef, useEffect, useMemo, useCallback, useLayoutEffect as useLayoutEffect$1, useId as useId$2, forwardRef, cloneElement, Children, createElement, useInsertionEffect as useInsertionEffect$1, isValidElement, Component, memo as memo$2, useSyncExternalStore, createRef, useTransition as useTransition$1, useDeferredValue, use, StrictMode } from "react";
+import React__default, { useState, Fragment, createContext, useContext, useRef, useEffect, useMemo, useCallback, useLayoutEffect as useLayoutEffect$1, useId as useId$2, forwardRef, cloneElement, Children, createElement, useInsertionEffect as useInsertionEffect$1, isValidElement, Component, memo as memo$2, useSyncExternalStore, createRef, useDeferredValue, use, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal, flushSync } from "react-dom";
-import { ComponentName, withOverviewGraph, isDevelopment, krokiD2SvgUrl, useHashHistory, basepath } from "./const.js";
+import { ComponentName, useHashHistory, withOverviewGraph, isDevelopment, krokiD2SvgUrl, basepath } from "./const.js";
 import { projects, isSingleProject } from "likec4:projects";
 import { createLikeC4Model } from "likec4/model";
 import { invariant as invariant$2, hasAtLeast, nonexhaustive, isStepEdgeId, extractStep, DefaultShapeSize, DefaultTextSize, DefaultPaddingSize, compareNatural, DiagramNode, nameFromFqn, nonNullable, defaultTheme, ElementShapes, toArray, ifind, DefaultMap, ancestorsFqn, isScopedElementView, isDeploymentView, Queue, ElementKind, delay as delay$1, isAncestor, sortParentsFirst, ifilter, whereOperatorAsPredicate, getBBoxCenter, getParallelStepsPrefix, ComputedView, isDescendantOf } from "@likec4/core";
@@ -34023,38 +34023,28 @@ const useDiagramActorRef = () => {
   return ctx;
 };
 function useDiagram() {
-  const actor = useDiagramActorRef(), [, startTransition] = useTransition$1();
+  const actor = useDiagramActorRef();
   return useMemo(() => ({
     actor,
     send: actor.send,
     navigateTo: (viewId, fromNode) => {
-      startTransition(() => {
-        actor.send({
-          type: "navigate.to",
-          viewId,
-          ...fromNode && { fromNode }
-        });
+      actor.send({
+        type: "navigate.to",
+        viewId,
+        ...fromNode && { fromNode }
       });
     },
     navigate: (direction) => {
-      startTransition(() => {
-        actor.send({ type: `navigate.${direction}` });
-      });
+      actor.send({ type: `navigate.${direction}` });
     },
     fitDiagram: (duration = 350) => {
-      startTransition(() => {
-        actor.send({ type: "fitDiagram", duration });
-      });
+      actor.send({ type: "fitDiagram", duration });
     },
     openRelationshipsBrowser: (fqn2) => {
-      startTransition(() => {
-        actor.send({ type: "open.relationshipsBrowser", fqn: fqn2 });
-      });
+      actor.send({ type: "open.relationshipsBrowser", fqn: fqn2 });
     },
     openSource: (params) => {
-      startTransition(() => {
-        actor.send({ type: "open.source", ...params });
-      });
+      actor.send({ type: "open.source", ...params });
     },
     openElementDetails: (fqn2, fromNode) => {
       actor.send({ type: "open.elementDetails", fqn: fqn2, fromNode });
@@ -35392,9 +35382,10 @@ function EdgeLabelContainer({
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: css({
+          style: {
             display: "contents"
-          }),
+          },
+          // Work around to keep same global selector data-likec4-dimmed
           ...isDimmed !== !1 && {
             "data-likec4-dimmed": isDimmed
           },
@@ -35718,17 +35709,19 @@ function ElementActionButtons({
       "data-likec4-hovered": isHovered,
       className: cx("nodrag nopan", actionButtons),
       children: buttons2.map((button2, index2) => /* @__PURE__ */ jsx(
-        m$2.div,
+        ActionIcon$1,
         {
+          component: m$2.button,
+          layout: !0,
+          className: actionBtn$1({}),
           initial: !1,
           whileTap: { scale: 1 },
           whileHover: {
             scale: 1.3
           },
-          onTap: (e2) => button2.onClick(e2),
-          onClick: stopPropagation$1,
+          onClick: button2.onClick,
           onDoubleClick: stopPropagation$1,
-          children: /* @__PURE__ */ jsx(ActionIcon$1, { className: actionBtn$1({}), children: button2.icon })
+          children: button2.icon
         },
         `action-button-${id2}-${button2.key ?? index2}`
       ))
@@ -38358,7 +38351,7 @@ function useRelationshipsBrowserState(selector3, compare = shallowEqual) {
   return xstateReact_cjsExports.useSelector(actor, useCallbackRef(selector3), compare);
 }
 function useRelationshipsBrowser() {
-  const actor = useRelationshipsBrowserActor(), [, startTransition] = useTransition$1();
+  const actor = useRelationshipsBrowserActor();
   return useMemo(() => ({
     actor,
     get rootElementId() {
@@ -38379,12 +38372,10 @@ function useRelationshipsBrowser() {
       });
     },
     navigateTo: (subject, fromNode) => {
-      startTransition(() => {
-        actor.send({
-          type: "navigate.to",
-          subject,
-          fromNode
-        });
+      actor.send({
+        type: "navigate.to",
+        subject,
+        fromNode
       });
     },
     fitDiagram: () => {
@@ -40881,7 +40872,7 @@ const dagre = /* @__PURE__ */ getDefaultExportFromCjs(dagreExports), Sizes$2 = {
     edgesep: 25
   },
   edgeLabel: {
-    width: 120,
+    width: 140,
     height: 10,
     minlen: 1,
     weight: 1
@@ -41073,7 +41064,7 @@ function layoutRelationshipsView$1(data, scope) {
     for (const edge of g.edges())
       g.setEdge(edge, {
         ...Sizes$2.edgeLabel,
-        width: edgeCount > 30 ? 800 : 400
+        width: edgeCount > 25 ? 800 : 400
       });
   const dagreBounds = applyDagreLayout$2(g), _calculatedNodeBounds = C(
     nodeIds,
@@ -41163,8 +41154,6 @@ function layoutRelationshipsView$1(data, scope) {
           width,
           height
         },
-        inEdges: [],
-        outEdges: [],
         children: [],
         width,
         height,
@@ -41205,8 +41194,6 @@ function layoutRelationshipsView$1(data, scope) {
         ...element.$element.style
       },
       navigateTo,
-      inEdges: [],
-      outEdges: [],
       ...children2.length > 0 && { depth: nodeDepth(id2) },
       children: children2,
       width,
@@ -42402,7 +42389,7 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   [backdropBlur]: "0px",
   [level]: "0",
   [offset]: "0px",
-  [inset]: "calc((1 + var(--_level) * 0.5) * var(--_offset))",
+  [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
   [backdropOpacity]: "0%",
   _backdrop: {
     cursor: "zoom-out",
@@ -42423,8 +42410,8 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
     height: "100vh"
   },
   sm: {
-    inset: "[var(--_inset) var(--_offset) var(--_offset) var(--_inset)]",
-    width: "calc(100vw - var(--_offset) - var(--_inset))",
+    inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
+    width: "calc(100vw - 2 * var(--_inset))",
     height: "calc(100vh - var(--_offset) - var(--_inset))",
     [borderRadius]: "6px",
     padding: "6px",
@@ -42539,15 +42526,13 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
             [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
             scale: 1,
             opacity: 1,
-            translateY: 0,
             transition: {
               delay: 0.075
             }
           },
           exit: {
-            scale: 1.3,
+            scale: 1.2,
             opacity: 0,
-            translateY: -10,
             [backdropBlur]: "0px",
             [backdropOpacity]: "0%"
           }
@@ -43144,123 +43129,7 @@ const findRootSubject = (nodes) => nodes.find(
   //   xyedges: [],
   //   xynodes: [],
   // }),
-}), finalize = (elements, explicits) => elements.size > 2 && explicits.size !== elements.size ? new Set(sortParentsFirst([
-  ...treeFromElements$1(elements).flatten(),
-  ...explicits
-])) : elements.size > 1 ? new Set(sortParentsFirst([...elements])) : elements;
-function computeEdgeDetailsViewData(edges, view) {
-  const sources = /* @__PURE__ */ new Set(), relationships = /* @__PURE__ */ new Set(), targets = /* @__PURE__ */ new Set(), explicit = {
-    sources: /* @__PURE__ */ new Set(),
-    targets: /* @__PURE__ */ new Set()
-  }, addExplicit = (el, type) => {
-    type === "source" ? (sources.add(el), explicit.sources.add(el)) : (targets.add(el), explicit.targets.add(el));
-  };
-  for (const edgeId of edges) {
-    const edge = view.findEdge(edgeId), _relationships = edge ? [...edge.relationships("model")] : [];
-    if (!edge || !hasAtLeast(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement())
-      continue;
-    const source = edge.source.element, target = edge.target.element;
-    addExplicit(source, "source"), addExplicit(target, "target");
-    for (const relationship of _relationships) {
-      if (relationships.add(relationship), relationship.source !== source) {
-        addExplicit(relationship.source, "source");
-        for (const parent of relationship.source.ancestors()) {
-          if (parent === source)
-            break;
-          sources.add(parent);
-        }
-      }
-      if (relationship.target !== target) {
-        addExplicit(relationship.target, "target");
-        for (const parent of relationship.target.ancestors()) {
-          if (parent === target)
-            break;
-          targets.add(parent);
-        }
-      }
-    }
-  }
-  return {
-    sources: finalize(sources, explicit.sources),
-    targets: finalize(targets, explicit.targets),
-    relationships
-  };
-}
-function computeRelationshipDetailsViewData({
-  // relationships: _relationships,
-  source,
-  target
-}) {
-  const sources = /* @__PURE__ */ new Set(), relationships = /* @__PURE__ */ new Set(), targets = /* @__PURE__ */ new Set(), explicit = {
-    sources: /* @__PURE__ */ new Set(),
-    targets: /* @__PURE__ */ new Set()
-  }, addExplicit = (el, type) => {
-    type === "source" ? (sources.add(el), explicit.sources.add(el)) : (targets.add(el), explicit.targets.add(el));
-  };
-  source && addExplicit(source, "source"), target && addExplicit(target, "target");
-  const [connection] = modelConnection.findConnection(source, target, "directed");
-  if (!connection)
-    return {
-      sources,
-      targets,
-      relationships
-    };
-  for (const relationship of connection.relations) {
-    const relationSource = relationship.source, relationTarget = relationship.target;
-    if (addExplicit(relationSource, "source"), addExplicit(relationTarget, "target"), relationships.add(relationship), source !== relationSource) {
-      invariant$2(isAncestor(source, relationSource), `${source.id} is not an ancestor of ${relationSource.id}`);
-      for (const parent of relationSource.ancestors()) {
-        if (parent === source)
-          break;
-        sources.add(parent);
-      }
-    }
-    if (target !== relationTarget) {
-      invariant$2(isAncestor(target, relationTarget), `${target.id} is not an ancestor of ${relationTarget.id}`);
-      for (const parent of relationTarget.ancestors()) {
-        if (parent === target)
-          break;
-        targets.add(parent);
-      }
-    }
-  }
-  return {
-    sources: finalize(sources, explicit.sources),
-    targets: finalize(targets, explicit.targets),
-    relationships
-  };
-}
-const RelationshipDetailsActorContext = createContext(null);
-function useRelationshipDetailsActor() {
-  return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
-}
-function useRelationshipDetailsState(selector3, compare = shallowEqual) {
-  const select2 = useCallbackRef(selector3), actor = useRelationshipDetailsActor();
-  return xstateReact_cjsExports.useSelector(actor, select2, compare);
-}
-function useRelationshipDetails() {
-  const actor = useRelationshipDetailsActor(), [, startTransition] = useTransition$1();
-  return useMemo(() => ({
-    actor,
-    get rootElementId() {
-      return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;
-    },
-    getState: () => actor.getSnapshot().context,
-    send: actor.send,
-    navigateTo: (...params) => {
-      params.length === 1 ? actor.send({ type: "navigate.to", params: { edgeId: params[0] } }) : actor.send({ type: "navigate.to", params: { source: params[0], target: params[1] } });
-    },
-    fitDiagram: () => {
-      startTransition(() => {
-        actor.send({ type: "fitDiagram" });
-      });
-    },
-    close: () => {
-      actor._parent ? actor._parent?.send({ type: "close", actorId: actor.id }) : actor.send({ type: "close" });
-    }
-  }), [actor]);
-}
-const Sizes$1 = {
+}), Sizes$1 = {
   dagre: {
     ranksep: 60,
     nodesep: 35,
@@ -43800,12 +43669,7 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
           actions: [
             "updateLayoutData",
             xstate_cjsExports.cancel("fitDiagram"),
-            {
-              type: "xyflow:fitDiagram",
-              params: {
-                duration: 0
-              }
-            },
+            xstate_cjsExports.raise({ type: "fitDiagram", duration: 0 }, { id: "fitDiagram", delay: 50 }),
             xstate_cjsExports.raise({ type: "xyflow.updateNodeInternals" }, { delay: 75 })
           ]
         },
@@ -44061,7 +43925,93 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
     "stopListeningToEsc",
     "closeAllOverlays"
   ]
-}), RelationshipEdge = customEdge((props) => {
+}), finalize = (elements, explicits) => elements.size > 2 && explicits.size !== elements.size ? new Set(sortParentsFirst([
+  ...treeFromElements$1(elements).flatten(),
+  ...explicits
+])) : elements.size > 1 ? new Set(sortParentsFirst([...elements])) : elements;
+function computeEdgeDetailsViewData(edges, view) {
+  const sources = /* @__PURE__ */ new Set(), relationships = /* @__PURE__ */ new Set(), targets = /* @__PURE__ */ new Set(), explicit = {
+    sources: /* @__PURE__ */ new Set(),
+    targets: /* @__PURE__ */ new Set()
+  }, addExplicit = (el, type) => {
+    type === "source" ? (sources.add(el), explicit.sources.add(el)) : (targets.add(el), explicit.targets.add(el));
+  };
+  for (const edgeId of edges) {
+    const edge = view.findEdge(edgeId), _relationships = edge ? [...edge.relationships("model")] : [];
+    if (!edge || !hasAtLeast(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement())
+      continue;
+    const source = edge.source.element, target = edge.target.element;
+    addExplicit(source, "source"), addExplicit(target, "target");
+    for (const relationship of _relationships) {
+      if (relationships.add(relationship), relationship.source !== source) {
+        addExplicit(relationship.source, "source");
+        for (const parent of relationship.source.ancestors()) {
+          if (parent === source)
+            break;
+          sources.add(parent);
+        }
+      }
+      if (relationship.target !== target) {
+        addExplicit(relationship.target, "target");
+        for (const parent of relationship.target.ancestors()) {
+          if (parent === target)
+            break;
+          targets.add(parent);
+        }
+      }
+    }
+  }
+  return {
+    sources: finalize(sources, explicit.sources),
+    targets: finalize(targets, explicit.targets),
+    relationships
+  };
+}
+function computeRelationshipDetailsViewData({
+  // relationships: _relationships,
+  source,
+  target
+}) {
+  const sources = /* @__PURE__ */ new Set(), relationships = /* @__PURE__ */ new Set(), targets = /* @__PURE__ */ new Set(), explicit = {
+    sources: /* @__PURE__ */ new Set(),
+    targets: /* @__PURE__ */ new Set()
+  }, addExplicit = (el, type) => {
+    type === "source" ? (sources.add(el), explicit.sources.add(el)) : (targets.add(el), explicit.targets.add(el));
+  };
+  source && addExplicit(source, "source"), target && addExplicit(target, "target");
+  const [connection] = modelConnection.findConnection(source, target, "directed");
+  if (!connection)
+    return {
+      sources,
+      targets,
+      relationships
+    };
+  for (const relationship of connection.relations) {
+    const relationSource = relationship.source, relationTarget = relationship.target;
+    if (addExplicit(relationSource, "source"), addExplicit(relationTarget, "target"), relationships.add(relationship), source !== relationSource) {
+      invariant$2(isAncestor(source, relationSource), `${source.id} is not an ancestor of ${relationSource.id}`);
+      for (const parent of relationSource.ancestors()) {
+        if (parent === source)
+          break;
+        sources.add(parent);
+      }
+    }
+    if (target !== relationTarget) {
+      invariant$2(isAncestor(target, relationTarget), `${target.id} is not an ancestor of ${relationTarget.id}`);
+      for (const parent of relationTarget.ancestors()) {
+        if (parent === target)
+          break;
+        targets.add(parent);
+      }
+    }
+  }
+  return {
+    sources: finalize(sources, explicit.sources),
+    targets: finalize(targets, explicit.targets),
+    relationships
+  };
+}
+const RelationshipEdge = customEdge((props) => {
   const { enableNavigateTo } = useEnabledFeature("NavigateTo"), {
     sourceX,
     targetY,
@@ -44195,7 +44145,35 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
     },
     id2
   ))
-] }), edgeEnpoint = css.raw({
+] }), RelationshipDetailsActorContext = createContext(null);
+function useRelationshipDetailsActor() {
+  return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
+}
+function useRelationshipDetailsState(selector3, compare = shallowEqual) {
+  const select2 = useCallbackRef(selector3), actor = useRelationshipDetailsActor();
+  return xstateReact_cjsExports.useSelector(actor, select2, compare);
+}
+function useRelationshipDetails() {
+  const actor = useRelationshipDetailsActor();
+  return useMemo(() => ({
+    actor,
+    get rootElementId() {
+      return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;
+    },
+    getState: () => actor.getSnapshot().context,
+    send: actor.send,
+    navigateTo: (...params) => {
+      params.length === 1 ? actor.send({ type: "navigate.to", params: { edgeId: params[0] } }) : actor.send({ type: "navigate.to", params: { source: params[0], target: params[1] } });
+    },
+    fitDiagram: () => {
+      actor.send({ type: "fitDiagram" });
+    },
+    close: () => {
+      actor._parent ? actor._parent?.send({ type: "close", actorId: actor.id }) : actor.send({ type: "close" });
+    }
+  }), [actor]);
+}
+const edgeEnpoint = css.raw({
   display: "inline-flex",
   alignItems: "center",
   padding: "6px 2px 0 2px",
@@ -47107,13 +47085,13 @@ const selectXYProps = (ctx) => ({
     onCanvasClick,
     onCanvasDblClick
   } = useDiagramEventHandlers(), notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
-    $isPanning.get() || $isPanning.set(!0);
-  }, isReducedGraphics ? 150 : 350), notPanning = useDebouncedCallback$1(() => {
+    $isPanning.set(!0);
+  }, isReducedGraphics ? 100 : 200), notPanning = useDebouncedCallback$1(() => {
     isPanning.clear(), $isPanning.get() && $isPanning.set(!1);
-  }, 120), onMove = useCallbackRef((event) => {
+  }, 200), onMove = useCallbackRef((event) => {
     event && ($isPanning.get() || isPanning.start(), notPanning());
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    notPanning.flush(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+    event && notPanning.flush(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   });
@@ -49759,17 +49737,17 @@ const AlertLocalhost = () => /* @__PURE__ */ jsx(
     children: copied ? "Copied" : "Copy to clipboard"
   }
 ), EmbedPanel = ({ diagram }) => {
-  const router = useRouter(), { colorScheme } = useMantineColorScheme(), [theme2, setTheme] = useState(colorScheme), padding = 20, url = new URL(
-    router.buildLocation({
-      to: "/embed/$viewId",
-      params: { viewId: diagram.id },
-      search: {
-        padding,
-        theme: theme2 !== "auto" ? theme2 : void 0
-      }
-    }).href,
-    window.location.href
-  ), width = diagram.bounds.width + padding * 2, height = diagram.bounds.height + padding * 2, href = url.href, code = `
+  const router = useRouter(), { colorScheme } = useMantineColorScheme(), [theme2, setTheme] = useState(colorScheme), padding = 20;
+  let location = router.buildLocation({
+    to: "/embed/$viewId",
+    params: { viewId: diagram.id },
+    search: {
+      padding,
+      theme: theme2 !== "auto" ? theme2 : void 0
+    }
+  }).href;
+  location = useHashHistory ? `#${location}` : location;
+  const url = new URL(location, window.location.href), width = diagram.bounds.width + padding * 2, height = diagram.bounds.height + padding * 2, href = url.href, code = `
 <div style="aspect-ratio:${width}/${height};width:100%;height:auto;max-width:${width}px;margin:0 auto">
   <iframe src="${href}" width="100%" height="100%" style="border:0;background:transparent;"></iframe>
 </div>