likec4 1.16.0 → 1.17.1

package/dist/__app__/react/likec4.tsx

@@ -78,13 +78,13 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
   background = 'transparent',
   browserBackground = 'dots',
   where,
-  showElementLinks = true,
   showDiagramTitle = false,
   showNavigationButtons = false,
   showNotations = false,
   enableFocusMode = false,
-  showRelationshipDetails = false,
-  enableRelationshipsBrowser = false,
+  enableElementDetails = false,
+  enableRelationshipDetails = false,
+  enableRelationshipBrowser = enableRelationshipDetails,
   browserClassName,
   browserStyle,
   mantineTheme,
@@ -124,12 +124,13 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
         onNavigateTo={interactive ? onNavigateTo : undefined}
         background={background}
         renderIcon={RenderIcon}
-        showElementLinks={showElementLinks}
         showDiagramTitle={showDiagramTitle}
         showNavigationButtons={showNavigationButtons}
         showNotations={showNotations}
         enableFocusMode={enableFocusMode}
-        showRelationshipDetails={showRelationshipDetails}
+        enableElementDetails={enableElementDetails}
+        enableRelationshipBrowser={enableRelationshipBrowser}
+        enableRelationshipDetails={enableRelationshipDetails}
         where={where}
         mantineTheme={mantineTheme}
         styleNonce={styleNonce}
@@ -149,7 +150,9 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
           style={browserStyle}
           mantineTheme={mantineTheme}
           styleNonce={styleNonce}
-          enableRelationshipsBrowser={enableRelationshipsBrowser}
+          enableElementDetails
+          enableRelationshipBrowser
+          enableRelationshipDetails
         />
       )}
     </LikeC4ModelProvider>

package/dist/__app__/src/chunks/{-index-overview-BRH5n7M1.js → -index-overview-DrCqsLHx.js}

@@ -1,19 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useOverviewGraph } from "virtual:likec4/overview-graph";
-import { u, c as createReactComponent, I as IconFolderFilled, e, a as useUpdateEffect, n as nonexhaustive } from "./main-DejpCNPJ.js";
-import { u as useRouter } from "./tanstack-router-CfO1HFS2.js";
-import { B as BaseEdge, H as Handle, P as Position, u as useNodesState, a as useEdgesState, i as index, b as Background, c as BackgroundVariant } from "./likec4-zEZHE7gJ.js";
+import { c as createReactComponent, I as IconFolderFilled, n, u as useUpdateEffect, i, a as nonexhaustive } from "./main-E2hyQKFO.js";
+import { u as useRouter } from "./tanstack-router-CF1kJvtP.js";
+import { B as BaseEdge, H as Handle, P as Position, u as useNodesState, a as useEdgesState, i as index, b as Background, c as BackgroundVariant } from "./likec4-DF_Jsv_p.js";
 import { memo, useRef, useMemo } from "react";
-import { P as Paper, c as clsx, G as Group, T as ThemeIcon, a as Text, C as Card, b as CardSection, d as Center, I as Image, B as Box, u as useMantineColorScheme } from "./mantine-Dx0sIYv1.js";
+import { P as Paper, c as clsx, G as Group, T as ThemeIcon, a as Text, C as Card, b as CardSection, d as Center, I as Image, B as Box, u as useMantineColorScheme } from "./mantine-BzD51ZKm.js";
 import { usePreviewUrl } from "virtual:likec4/previews";
-function i(...e2) {
-  return u(y, e2);
-}
-function y(e2, r) {
-  let o = {};
-  for (let n of r) n in e2 && (o[n] = e2[n]);
-  return o;
-}
 /**
  * @license @tabler/icons-react v3.17.0 - MIT
  *
@@ -29,7 +21,7 @@ var IconLoader = createReactComponent("outline", "loader", "IconLoader", [["path
  */
 var IconFileFilled = createReactComponent("filled", "file-filled", "IconFileFilled", [["path", { d: "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z", key: "svg-0" }], ["path", { d: "M19 7h-4l-.001 -4.001z", key: "svg-1" }]]), root = "mxt2a80";
 function edgePath(points) {
-  return points.reduce((acc, [x, y2], i2) => acc + `${i2 === 0 ? "M" : " L"} ${x},${y2}`, "");
+  return points.reduce((acc, [x, y], i2) => acc + `${i2 === 0 ? "M" : " L"} ${x},${y}`, "");
 }
 function LinkEdge({
   id,
@@ -54,7 +46,7 @@ const FolderNode = /* @__PURE__ */ memo(function({
   parentId,
   id
 }) {
-  const isTopLevel = e(parentId);
+  const isTopLevel = n(parentId);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: handleCenter }),
     /* @__PURE__ */ jsx(
@@ -83,7 +75,7 @@ const FolderNode = /* @__PURE__ */ memo(function({
   parentId,
   id
 }) {
-  const isTopLevel = e(parentId);
+  const isTopLevel = n(parentId);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: handleCenter }),
     /* @__PURE__ */ jsx(
@@ -150,7 +142,7 @@ const FolderNode = /* @__PURE__ */ memo(function({
   link: LinkEdge
 }, overviewGraphToXYFlowData = (graph) => ({
   nodes: graph.nodes.map(({ id, parentId, position, width, height, ...node }) => {
-    const parent = parentId ? graph.nodes.find((n) => n.id === parentId) : null, rect = {
+    const parent = parentId ? graph.nodes.find((n2) => n2.id === parentId) : null, rect = {
       ...position,
       width,
       height
@@ -222,9 +214,9 @@ function OverviewDiagrams({
   const router = useRouter(), xyflowRef = useRef(), { colorScheme } = useMantineColorScheme(), xyflowdata = useMemo(() => overviewGraphToXYFlowData(graph), [graph]), [nodes, setNodes, onNodesChange] = useNodesState(xyflowdata.nodes), [edges, setEdges, onEdgeChanges] = useEdgesState(xyflowdata.edges);
   useUpdateEffect(() => {
     setNodes(
-      (nodes2) => xyflowdata.nodes.map((n) => {
-        const current = nodes2.find((node) => node.id === n.id);
-        return current ? { ...i(current, ["selected", "hidden"]), ...n } : n;
+      (nodes2) => xyflowdata.nodes.map((n2) => {
+        const current = nodes2.find((node) => node.id === n2.id);
+        return current ? { ...i(current, ["selected", "hidden"]), ...n2 } : n2;
       })
     ), setEdges(xyflowdata.edges);
   }, [xyflowdata.nodes, xyflowdata.edges]);
@@ -284,7 +276,7 @@ function OverviewDiagrams({
       onInit: (instance) => xyflowRef.current = instance,
       onNodeClick: (event, node) => {
         if (node.type === "view") {
-          event.stopPropagation(), setNodes((nodes2) => nodes2.map(({ data, ...n }) => ({ ...n, data: { ...data, dimmed: n.id !== node.id } }))), xyflowRef.current?.fitView({
+          event.stopPropagation(), setNodes((nodes2) => nodes2.map(({ data, ...n2 }) => ({ ...n2, data: { ...data, dimmed: n2.id !== node.id } }))), xyflowRef.current?.fitView({
             maxZoom: 10,
             padding: 0,
             nodes: [node],
@@ -302,7 +294,7 @@ function OverviewDiagrams({
           }, 800);
           return;
         }
-        node.selected && (event.stopPropagation(), setNodes((nodes2) => nodes2.map((n) => n.id === node.id ? { ...n, selected: !1 } : n)));
+        node.selected && (event.stopPropagation(), setNodes((nodes2) => nodes2.map((n2) => n2.id === node.id ? { ...n2, selected: !1 } : n2)));
       },
       children: /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, size: 4, gap: 50 })
     }

package/dist/__app__/src/chunks/{likec4-zEZHE7gJ.js → likec4-DF_Jsv_p.js}

@@ -2486,19 +2486,15 @@ function nodeHasDimensions(node) {
   return (node.measured?.width ?? node.width ?? node.initialWidth) !== void 0 && (node.measured?.height ?? node.height ?? node.initialHeight) !== void 0;
 }
 function evaluateAbsolutePosition(position, dimensions = { width: 0, height: 0 }, parentId, nodeLookup, nodeOrigin) {
-  let nextParentId = parentId;
-  const positionAbsolute = { ...position };
-  for (; nextParentId; ) {
-    const parent = nodeLookup.get(nextParentId);
-    if (nextParentId = parent?.parentId, parent) {
-      const origin = parent.origin || nodeOrigin;
-      positionAbsolute.x += parent.internals.positionAbsolute.x - (dimensions.width ?? 0) * origin[0], positionAbsolute.y += parent.internals.positionAbsolute.y - (dimensions.height ?? 0) * origin[1];
-    }
+  const positionAbsolute = { ...position }, parent = nodeLookup.get(parentId);
+  if (parent) {
+    const origin = parent.origin || nodeOrigin;
+    positionAbsolute.x += parent.internals.positionAbsolute.x - (dimensions.width ?? 0) * origin[0], positionAbsolute.y += parent.internals.positionAbsolute.y - (dimensions.height ?? 0) * origin[1];
   }
   return positionAbsolute;
 }
-function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = !1, transform: transform2 }) {
-  const { x, y } = getEventPosition(event), pointerPos = pointToRendererPoint({ x, y }, transform2), { x: xSnapped, y: ySnapped } = snapToGrid ? snapPosition(pointerPos, snapGrid) : pointerPos;
+function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = !1, transform: transform2, containerBounds }) {
+  const { x, y } = getEventPosition(event), pointerPos = pointToRendererPoint({ x: x - (containerBounds?.left ?? 0), y: y - (containerBounds?.top ?? 0) }, transform2), { x: xSnapped, y: ySnapped } = snapToGrid ? snapPosition(pointerPos, snapGrid) : pointerPos;
   return {
     xSnapped,
     ySnapped,
@@ -3054,13 +3050,13 @@ function getEventHandlerParams({ nodeId, dragItems, nodeLookup, dragging = !0 })
   }
   if (!nodeId)
     return [nodesFromDragItems[0], nodesFromDragItems];
-  const node = nodeLookup.get(nodeId).internals.userNode;
+  const node = nodeLookup.get(nodeId)?.internals.userNode;
   return [
-    {
+    node ? {
       ...node,
       position: dragItems.get(nodeId)?.position || node.position,
       dragging
-    },
+    } : nodesFromDragItems[0],
     nodesFromDragItems
   ];
 }
@@ -3120,7 +3116,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
     function startDrag(event) {
       const { nodeLookup, multiSelectionActive, nodesDraggable, transform: transform2, snapGrid, snapToGrid, selectNodesOnDrag, onNodeDragStart, onSelectionDragStart, unselectNodesAndEdges } = getStoreItems();
       dragStarted = !0, (!selectNodesOnDrag || !isSelectable) && !multiSelectionActive && nodeId && (nodeLookup.get(nodeId)?.selected || unselectNodesAndEdges()), isSelectable && selectNodesOnDrag && nodeId && onNodeMouseDown?.(nodeId);
-      const pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
+      const pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid, containerBounds });
       if (lastPos = pointerPos, dragItems = getDragItems(nodeLookup, nodesDraggable, pointerPos, nodeId), dragItems.size > 0 && (onDragStart || onNodeDragStart || !nodeId && onSelectionDragStart)) {
         const [currentNode, currentNodes] = getEventHandlerParams({
           nodeId,
@@ -3132,9 +3128,9 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
     }
     const d3DragInstance = drag().clickDistance(nodeClickDistance).on("start", (event) => {
       const { domNode: domNode2, nodeDragThreshold, transform: transform2, snapGrid, snapToGrid } = getStoreItems();
-      abortDrag = !1, nodeDragThreshold === 0 && startDrag(event), lastPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid }), containerBounds = domNode2?.getBoundingClientRect() || null, mousePosition = getEventPosition(event.sourceEvent, containerBounds);
+      containerBounds = domNode2?.getBoundingClientRect() || null, abortDrag = !1, nodeDragThreshold === 0 && startDrag(event), lastPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid, containerBounds }), mousePosition = getEventPosition(event.sourceEvent, containerBounds);
     }).on("drag", (event) => {
-      const { autoPanOnNodeDrag, transform: transform2, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems(), pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
+      const { autoPanOnNodeDrag, transform: transform2, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems(), pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid, containerBounds });
       if ((event.sourceEvent.type === "touchmove" && event.sourceEvent.touches.length > 1 || // if user deletes a node while dragging, we need to abort the drag to prevent errors
       nodeId && !nodeLookup.has(nodeId)) && (abortDrag = !0), !abortDrag) {
         if (!autoPanStarted && autoPanOnNodeDrag && dragStarted && (autoPanStarted = !0, autoPan()), !dragStarted) {
@@ -3694,12 +3690,18 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
   function update({ controlPosition, boundaries, keepAspectRatio, onResizeStart, onResize, onResizeEnd, shouldResize }) {
     let prevValues = { ...initPrevValues$1 }, startValues = { ...initStartValues };
     const controlDirection = getControlDirection(controlPosition);
-    let node, childNodes = [], parentNode, parentExtent, childExtent;
+    let node, containerBounds = null, childNodes = [], parentNode, parentExtent, childExtent;
     const dragHandler = drag().on("start", (event) => {
-      const { nodeLookup, transform: transform2, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
+      const { nodeLookup, transform: transform2, snapGrid, snapToGrid, nodeOrigin, paneDomNode } = getStoreItems();
       if (node = nodeLookup.get(nodeId), !node)
         return;
-      const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
+      containerBounds = paneDomNode?.getBoundingClientRect() ?? null;
+      const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, {
+        transform: transform2,
+        snapGrid,
+        snapToGrid,
+        containerBounds
+      });
       prevValues = {
         width: node.measured.width ?? 0,
         height: node.measured.height ?? 0,
@@ -3725,7 +3727,12 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         }
       onResizeStart?.(event, { ...prevValues });
     }).on("drag", (event) => {
-      const { transform: transform2, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems(), pointerPosition = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid }), childChanges = [];
+      const { transform: transform2, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems(), pointerPosition = getPointerPosition(event.sourceEvent, {
+        transform: transform2,
+        snapGrid,
+        snapToGrid,
+        containerBounds
+      }), childChanges = [];
       if (!node)
         return;
       const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues, change = {}, nodeOrigin = node.origin ?? storeNodeOrigin, { width, height, x, y } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, parentExtent, childExtent), isWidthChange = width !== prevWidth, isHeightChange = height !== prevHeight, isXPosChange = x !== prevX && isWidthChange, isYPosChange = y !== prevY && isHeightChange;
@@ -4006,7 +4013,12 @@ const defaultDoc = typeof document < "u" ? document : null;
 function useKeyPress(keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: !0 }) {
   const [keyPressed, setKeyPressed] = useState(!1), modifierPressed = useRef(!1), pressedKeys = useRef(/* @__PURE__ */ new Set([])), [keyCodes, keysToWatch] = useMemo(() => {
     if (keyCode !== null) {
-      const keys = (Array.isArray(keyCode) ? keyCode : [keyCode]).filter((kc) => typeof kc == "string").map((kc) => kc.split("+")), keysFlat = keys.reduce((res, item) => res.concat(...item), []);
+      const keys = (Array.isArray(keyCode) ? keyCode : [keyCode]).filter((kc) => typeof kc == "string").map((kc) => kc.replace("+", `
+`).replace(`
+
+`, `
++`).split(`
+`)), keysFlat = keys.reduce((res, item) => res.concat(...item), []);
       return [keys, keysFlat];
     }
     return [[], []];
@@ -4207,15 +4219,11 @@ function fixedForwardRef(render) {
 }
 const useIsomorphicLayoutEffect = typeof window < "u" ? useLayoutEffect : useEffect;
 function useQueue(runQueue) {
-  const [shouldFlush, setShouldFlush] = useState(!1), [queue] = useState(() => createQueue(() => setShouldFlush(!0)));
+  const [serial, setSerial] = useState(BigInt(0)), [queue] = useState(() => createQueue(() => setSerial((n2) => n2 + BigInt(1))));
   return useIsomorphicLayoutEffect(() => {
-    if (!shouldFlush) {
-      queue.reset();
-      return;
-    }
     const queueItems = queue.get();
-    queueItems.length && (runQueue(queueItems), queue.reset()), setShouldFlush(!1);
-  }, [shouldFlush]), queue;
+    queueItems.length && (runQueue(queueItems), queue.reset());
+  }, [serial]), queue;
 }
 function createQueue(cb) {
   let queue = [];
@@ -5710,6 +5718,9 @@ function useNodesData(nodeIds) {
     return isArrayOfIds ? data : data[0] ?? null;
   }, [nodeIds]), shallowNodeData);
 }
+function useInternalNode(id2) {
+  return useStore(useCallback((s) => s.nodeLookup.get(id2), [id2]), shallow$1);
+}
 function LinePattern({ dimensions, lineWidth, variant, className }) {
   return jsx("path", { strokeWidth: lineWidth, d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`, className: cc(["react-flow__background-pattern", variant, className]) });
 }
@@ -5932,13 +5943,14 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
         domNode: resizeControlRef.current,
         nodeId: id2,
         getStoreItems: () => {
-          const { nodeLookup, transform: transform2, snapGrid, snapToGrid, nodeOrigin } = store.getState();
+          const { nodeLookup, transform: transform2, snapGrid, snapToGrid, nodeOrigin, domNode } = store.getState();
           return {
             nodeLookup,
             transform: transform2,
             snapGrid,
             snapToGrid,
-            nodeOrigin
+            nodeOrigin,
+            paneDomNode: domNode
           };
         },
         onChange: (change, childChanges) => {
@@ -6092,5 +6104,6 @@ export {
   Panel as t,
   useNodesState as u,
   useOnViewportChange as v,
-  withSelectorExports as w
+  withSelectorExports as w,
+  useInternalNode as x
 };