@likec4/diagram 1.1.0 → 1.1.1

package/dist/index.mjs

@@ -2,18 +2,20 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => (__defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value), value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, memo, useState, forwardRef, useCallback, useMemo, useEffect, useRef, useContext, useLayoutEffect, useId } from "react";
+import { createContext, memo, useState, useEffect, useContext, useMemo, forwardRef, useCallback, useRef, useLayoutEffect, useId } from "react";
 import { createWithEqualityFn, useStoreWithEqualityFn } from "zustand/traditional";
 import { shallow } from "zustand/shallow";
 import { createPortal } from "react-dom";
-import { Box, MantineContext, Stack, Text, TooltipGroup, Divider, Flex, Tooltip, ColorSwatch, CheckIcon, rem, Select, Card, ActionIcon, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Group, Anchor, CopyButton, Button, useMantineColorScheme } from "@mantine/core";
+import { Box, MantineContext, Paper, Stack, Group, Text, Spoiler, Button, Anchor, CopyButton, Divider, TooltipGroup, Flex, Tooltip, ColorSwatch, CheckIcon, rem, Select, Slider, SegmentedControl, Card, ActionIcon, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, useMantineColorScheme } from "@mantine/core";
 import { invariant, isAncestor, nonNullable, nonexhaustive, defaultTheme, ElementShapes } from "@likec4/core";
 import { DEV } from "esm-env";
 import { shallowEqual, deepEqual } from "fast-equals";
+import { isNullish, entries, keys, hasAtLeast, takeWhile, clamp as clamp$1, isNumber } from "remeda";
 import { subscribeWithSelector, devtools } from "zustand/middleware";
 import { useFirstMountState, useCustomCompareEffect, useDebouncedCallback, useRafEffect, useDebouncedEffect } from "@react-hookz/web";
 import { AnimatePresence, motion } from "framer-motion";
-import { isNullish, keys, hasAtLeast, takeWhile, clamp as clamp$1, isNumber } from "remeda";
+import { useLocalStorage } from "@mantine/hooks";
+import { line, curveCatmullRomOpen } from "d3-shape";
 var rootClassName = "likec4-diagram-root";
 function cc(names) {
   if (typeof names == "string" || typeof names == "number")
@@ -4669,9 +4671,9 @@ function useVisibleNodeIds(onlyRenderVisible) {
 }
 const selector$e = (s) => s.updateNodeInternals;
 function useResizeObserver() {
-  const updateNodeInternals2 = useStore(selector$e), [resizeObserver] = useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries) => {
+  const updateNodeInternals2 = useStore(selector$e), [resizeObserver] = useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries2) => {
     const updates = /* @__PURE__ */ new Map();
-    entries.forEach((entry) => {
+    entries2.forEach((entry) => {
       const id2 = entry.target.getAttribute("data-id");
       updates.set(id2, {
         id: id2,
@@ -5645,7 +5647,7 @@ function NodeComponentWrapperInner({ id: id2, nodeOrigin, nodeColorFunc, nodeStr
 }
 const NodeComponentWrapper = memo(NodeComponentWrapperInner);
 var MiniMapNodes$1 = memo(MiniMapNodes);
-const defaultWidth = 200, defaultHeight = 150, selector$1 = (s) => {
+const defaultWidth = 200, defaultHeight = 150, selector$1$1 = (s) => {
   const viewBB = {
     x: -s.transform[0] / s.transform[2],
     y: -s.transform[1] / s.transform[2],
@@ -5688,7 +5690,7 @@ function MiniMapComponent({
   zoomStep = 10,
   offsetScale = 5
 }) {
-  const store = useStoreApi(), svg = useRef(null), { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore(selector$1, shallow), elementWidth = (style2 == null ? void 0 : style2.width) ?? defaultWidth, elementHeight = (style2 == null ? void 0 : style2.height) ?? defaultHeight, scaledWidth = boundingRect.width / elementWidth, scaledHeight = boundingRect.height / elementHeight, viewScale = Math.max(scaledWidth, scaledHeight), viewWidth = viewScale * elementWidth, viewHeight = viewScale * elementHeight, offset = offsetScale * viewScale, x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset, y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset, width = viewWidth + offset * 2, height = viewHeight + offset * 2, labelledBy = `${ARIA_LABEL_KEY}-${rfId}`, viewScaleRef = useRef(0), minimapInstance = useRef();
+  const store = useStoreApi(), svg = useRef(null), { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore(selector$1$1, shallow), elementWidth = (style2 == null ? void 0 : style2.width) ?? defaultWidth, elementHeight = (style2 == null ? void 0 : style2.height) ?? defaultHeight, scaledWidth = boundingRect.width / elementWidth, scaledHeight = boundingRect.height / elementHeight, viewScale = Math.max(scaledWidth, scaledHeight), viewWidth = viewScale * elementWidth, viewHeight = viewScale * elementHeight, offset = offsetScale * viewScale, x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset, y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset, width = viewWidth + offset * 2, height = viewHeight + offset * 2, labelledBy = `${ARIA_LABEL_KEY}-${rfId}`, viewScaleRef = useRef(0), minimapInstance = useRef();
   viewScaleRef.current = viewScale, useEffect(() => {
     if (svg.current && panZoom)
       return minimapInstance.current = XYMinimap({
@@ -7294,51 +7296,87 @@ function createDiagramStore(props) {
           setLastClickedEdge: (edgeId) => {
             edgeId !== get2().lastClickedEdgeId && set2({ lastClickedEdgeId: edgeId }, noReplace, edgeId ? "setLastClickedEdge" : "unsetLastClickedEdge");
           },
+          resetLastClicked: () => {
+            let {
+              focusedNodeId,
+              lastClickedNodeId,
+              lastClickedEdgeId
+            } = get2();
+            (focusedNodeId || lastClickedNodeId || lastClickedEdgeId) && set2(
+              {
+                focusedNodeId: null,
+                lastClickedNodeId: null,
+                lastClickedEdgeId: null
+              },
+              noReplace,
+              "resetLastClicked"
+            );
+          },
           getElement: (fqn) => {
             const { view } = get2();
             return view.nodes.find(({ id: id2 }) => id2 === fqn) ?? null;
           },
           triggerOnChange: (changes) => {
             var _a, _b;
-            const newShapes = /* @__PURE__ */ new Map(), newColor = /* @__PURE__ */ new Map();
+            DEV && console.debug("triggerOnChange", changes);
+            const newShapes = /* @__PURE__ */ new Map(), newColor = /* @__PURE__ */ new Map(), newOpacity = /* @__PURE__ */ new Map(), newBorder = /* @__PURE__ */ new Map();
             for (const change of changes) {
-              if (change.op === "change-shape") {
-                for (const target of change.targets)
-                  newShapes.set(target, change.shape);
-                continue;
-              }
-              if (change.op === "change-color") {
-                for (const target of change.targets)
-                  newColor.set(target, change.color);
-                continue;
-              }
-              nonexhaustive(change);
+              change.op !== "change-element-style" && nonexhaustive(change.op);
+              for (const target of change.targets)
+                for (const [key, value] of entries.strict(change.style))
+                  switch (key) {
+                    case "shape":
+                      newShapes.set(target, value);
+                      break;
+                    case "color":
+                      newColor.set(target, value);
+                      break;
+                    case "opacity":
+                      newOpacity.set(target, value);
+                      break;
+                    case "border":
+                      newBorder.set(target, value);
+                      break;
+                    default:
+                      nonexhaustive(key);
+                  }
             }
             get2().xyflow.setNodes(
               (nodes) => nodes.map((node) => {
-                let { data } = node;
-                const shape = newShapes.get(data.fqn);
-                shape && shape !== data.element.shape && (node = {
-                  ...node,
-                  data: {
-                    ...data,
-                    element: {
-                      ...data.element,
-                      shape
-                    }
+                var _a2, _b2;
+                let element = node.data.element;
+                const shape = newShapes.get(element.id);
+                shape && shape !== element.shape && (element = {
+                  ...element,
+                  shape
+                });
+                const color2 = newColor.get(element.id);
+                color2 && color2 !== element.color && (element = {
+                  ...element,
+                  color: color2
+                });
+                const opacity = newOpacity.get(element.id);
+                opacity && opacity !== ((_a2 = element.style) == null ? void 0 : _a2.opacity) && (element = {
+                  ...element,
+                  style: {
+                    ...element.style,
+                    opacity
                   }
-                }, data = node.data);
-                const color2 = newColor.get(data.fqn);
-                return color2 && color2 !== data.element.color && (node = {
+                });
+                const border = newBorder.get(element.id);
+                return border && border !== ((_b2 = element.style) == null ? void 0 : _b2.border) && (element = {
+                  ...element,
+                  style: {
+                    ...element.style,
+                    border
+                  }
+                }), element === node.data.element ? node : {
                   ...node,
                   data: {
-                    ...data,
-                    element: {
-                      ...data.element,
-                      color: color2
-                    }
+                    ...node.data,
+                    element
                   }
-                }), node;
+                };
               })
             ), (_b = (_a = get2()).onChange) == null || _b.call(_a, { changes });
           },
@@ -7376,7 +7414,7 @@ function createDiagramStore(props) {
             xyflow.fitView({
               includeHiddenNodes: !0,
               duration: centerNode && focusedNodeId ? 300 : 400,
-              padding: centerNode ? 0 : fitViewPadding,
+              padding: fitViewPadding,
               minZoom: MinZoom,
               maxZoom: 1,
               ...centerNode && { nodes: [centerNode] }
@@ -7420,6 +7458,146 @@ function DiagramContextProvider({ children: children2, view, ...props }) {
     [props]
   ), /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children: children2 });
 }
+var container$3 = "hbkbtj0", paper = "hbkbtj1", title$2 = "hbkbtj2", description$1 = "hbkbtj3";
+const selector$1 = (s) => ({
+  id: s.view.id,
+  title: s.view.title ?? "untitled",
+  description: s.view.description,
+  links: s.view.links
+});
+function DiagramTitlePanel() {
+  const { id: id2, title: title2, description: description2, links } = useDiagramState(selector$1), [isCollapsed, setCollapsed] = useLocalStorage({
+    key: "diagram-title-panel-collapsed",
+    defaultValue: !1
+  }), toggle = () => setCollapsed((v) => !v);
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0.05, scale: 0.7 },
+      animate: { opacity: 1, scale: 1 },
+      exit: {
+        opacity: 0.05,
+        scale: 0.6
+      },
+      className: clsx("react-flow__panel", container$3),
+      style: {
+        transformOrigin: "left center"
+      },
+      children: /* @__PURE__ */ jsx(
+        Paper,
+        {
+          radius: "sm",
+          withBorder: !isCollapsed,
+          className: paper,
+          p: isCollapsed ? "sm" : "md",
+          onDoubleClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", justify: "stretch", align: "stretch", children: [
+            /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", onClick: toggle, style: { cursor: "pointer" }, children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  component: "div",
+                  flex: "1",
+                  size: isCollapsed ? "sm" : "lg",
+                  fw: 500,
+                  lh: 1.1,
+                  className: title$2,
+                  children: title2
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  hidden: isCollapsed,
+                  component: "div",
+                  flex: "0 0 auto",
+                  inline: !0,
+                  size: "xs",
+                  fz: 9,
+                  fw: 500,
+                  c: "dimmed",
+                  style: {
+                    userSelect: "all"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { style: { userSelect: "none" }, children: [
+                      "id:",
+                      " "
+                    ] }),
+                    id2
+                  ]
+                }
+              )
+            ] }),
+            !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              description2 && /* @__PURE__ */ jsx(
+                Spoiler,
+                {
+                  maxHeight: 42,
+                  showLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", children: "show more" }),
+                  hideLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", children: "hide" }),
+                  children: /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      component: "div",
+                      size: "sm",
+                      className: description$1,
+                      children: description2 || "no description"
+                    }
+                  )
+                }
+              ),
+              !description2 && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  component: "div",
+                  size: "xs",
+                  c: "dimmed",
+                  children: "no description"
+                }
+              ),
+              links && /* @__PURE__ */ jsx(
+                Stack,
+                {
+                  gap: 3,
+                  justify: "stretch",
+                  align: "stretch",
+                  children: links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", align: "center", gap: "sm", children: [
+                    /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+                      Anchor,
+                      {
+                        href: link,
+                        target: "_blank",
+                        fz: "xs",
+                        truncate: "end",
+                        display: "inline-block",
+                        w: "100%",
+                        children: link
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(CopyButton, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "compact-xs",
+                        fz: "10",
+                        variant: "light",
+                        onClick: copy,
+                        color: copied ? "teal" : "gray",
+                        children: copied ? "copied" : "copy"
+                      }
+                    ) })
+                  ] }, link))
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    },
+    id2
+  ) });
+}
+var panel = "_1lmzt1h0";
 const {
   primary,
   secondary,
@@ -7437,7 +7615,16 @@ function NodeOptions({ selectedNodeIds }) {
   const diagramApi = useDiagramStoreApi(), nodes = useXYNodesData(selectedNodeIds);
   if (!hasAtLeast(nodes, 1))
     return null;
-  const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes;
+  if (nodes.length !== selectedNodeIds.length)
+    throw new Error("NodeOptions: nodes and props.nodes should have the same length");
+  const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes, showOpacityOption = rest.length === 0 && firstNode.type === "compound", triggerChange = (style2) => {
+    const targets = nodes.map((node) => node.data.element.id);
+    invariant(hasAtLeast(targets, 1), "At least one target is required"), diagramApi.getState().triggerOnChange([{
+      op: "change-element-style",
+      style: style2,
+      targets
+    }]);
+  };
   return /* @__PURE__ */ jsxs(Stack, { children: [
     /* @__PURE__ */ jsx(Box, { maw: 200, children: /* @__PURE__ */ jsx(Text, { size: "xs", c: rest.length > 0 ? "dimmed" : "", truncate: !0, children: rest.length === 0 ? firstNode.data.element.title : "[ multiple ]" }) }),
     showShapeOption && /* @__PURE__ */ jsx(
@@ -7445,14 +7632,7 @@ function NodeOptions({ selectedNodeIds }) {
       {
         nodes,
         onShapeChange: (shape) => {
-          const targets = [];
-          for (const nd of nodes)
-            nd.data.element.shape !== shape && targets.push(nd.data.element.id);
-          hasAtLeast(targets, 1) && diagramApi.getState().triggerOnChange([{
-            op: "change-shape",
-            shape,
-            targets
-          }]);
+          triggerChange({ shape });
         }
       }
     ),
@@ -7461,18 +7641,32 @@ function NodeOptions({ selectedNodeIds }) {
       {
         nodes,
         onColorChange: (color2) => {
-          const targets = [];
-          for (const nd of nodes)
-            nd.data.element.color !== color2 && targets.push(nd.data.element.id);
-          hasAtLeast(targets, 1) && diagramApi.getState().triggerOnChange([{
-            op: "change-color",
-            color: color2,
-            targets
-          }]);
+          triggerChange({ color: color2 });
         }
       }
     ),
-    /* @__PURE__ */ jsx(NavigateToOption, { nodes })
+    /* @__PURE__ */ jsx(NavigateToOption, { nodes }),
+    /* @__PURE__ */ jsx(Box, { children: showOpacityOption && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, { label: "opacity and border", labelPosition: "left" }),
+      /* @__PURE__ */ jsx(
+        OpacityOption,
+        {
+          node: firstNode,
+          onOpacityChange: (opacity) => {
+            triggerChange({ opacity });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        BorderStyleOption,
+        {
+          node: firstNode,
+          onChange: (border) => {
+            triggerChange({ border });
+          }
+        }
+      )
+    ] }) }, firstNode.id)
   ] });
 }
 function Colors({
@@ -7578,8 +7772,54 @@ function NavigateToOption({
     )
   ] });
 }
-var panel = "_1lmzt1h0";
-const OptionsPanelMemo = /* @__PURE__ */ memo(function() {
+function OpacityOption({
+  node,
+  onOpacityChange
+}) {
+  let selectedOpacity = node.data.element.style.opacity ?? 100;
+  const [value, setValue] = useState(selectedOpacity);
+  return useEffect(() => {
+    setValue(selectedOpacity);
+  }, [selectedOpacity]), /* @__PURE__ */ jsx(
+    Slider,
+    {
+      mt: "xs",
+      size: "sm",
+      color: "dark",
+      value,
+      onChange: setValue,
+      onChangeEnd: onOpacityChange
+    }
+  );
+}
+function BorderStyleOption({
+  node,
+  onChange
+}) {
+  let selecteBorderStyle = node.data.element.style.border ?? "dashed";
+  const [value, setValue] = useState(selecteBorderStyle);
+  return useEffect(() => {
+    setValue(selecteBorderStyle);
+  }, [selecteBorderStyle]), /* @__PURE__ */ jsx(Box, { mt: "md", children: /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "xs",
+      fullWidth: !0,
+      withItemsBorders: !1,
+      value,
+      onChange: (v) => {
+        setValue(v), onChange(v);
+      },
+      data: [
+        { label: "Solid", value: "solid" },
+        { label: "Dashed", value: "dashed" },
+        { label: "Dotted", value: "dotted" },
+        { label: "None", value: "none" }
+      ]
+    }
+  ) });
+}
+function OptionsPanel() {
   const [selectedNodes, setSelectedNodes] = useState([]);
   return useOnSelectionChange({
     onChange: ({ nodes }) => {
@@ -7603,7 +7843,7 @@ const OptionsPanelMemo = /* @__PURE__ */ memo(function() {
       children: /* @__PURE__ */ jsx(Card, { shadow: "sm", children: /* @__PURE__ */ jsx(NodeOptions, { selectedNodeIds: selectedNodes }) })
     }
   ) });
-}), OptionsPanel2 = OptionsPanelMemo;
+}
 function deriveEdgePoints(bezierSpline) {
   let [start2, ...bezierPoints] = bezierSpline;
   invariant(start2, "start should be defined");
@@ -7758,12 +7998,12 @@ function FitViewOnDiagramChanges() {
       (s) => s.viewportChanged,
       setViewportMoved
     ),
-    [diagramApi]
+    [diagramApi, setViewportMoved]
   ), useRafEffect(
     () => {
       !isReady || processedChangeId === pendingChangeId || (diagramApi.getState().fitDiagram(), setProcessed(pendingChangeId));
     },
-    [isReady, processedChangeId, pendingChangeId]
+    [isReady, processedChangeId, pendingChangeId, diagramApi]
   ), !viewportMoved && isReady ? /* @__PURE__ */ jsx(FitViewOnViewportResize, { diagramApi }) : null;
 }
 const selectFitViewFlag = (s) => s.fitViewEnabled, FitViewOnDiagramChange = memo(() => useDiagramState(selectFitViewFlag) ? /* @__PURE__ */ jsx(FitViewOnDiagramChanges, {}) : null);
@@ -7779,13 +8019,19 @@ const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is
     (state) => ({
       viewId: state.view.id,
       nodes: state.view.nodes,
-      edges: state.view.edges,
-      draggable: state.nodesDraggable,
-      selectable: state.nodesSelectable
+      edges: state.view.edges
     }),
     // listener
-    ({ viewId, nodes, edges, ...opts }) => {
-      const { lastOnNavigate } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData({ nodes, edges }, opts);
+    ({ viewId, nodes, edges }) => {
+      const {
+        lastOnNavigate,
+        nodesDraggable,
+        nodesSelectable,
+        focusedNodeId
+      } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData({ nodes, edges }, {
+        draggable: nodesDraggable,
+        selectable: nodesSelectable || focusedNodeId !== null
+      });
       if (xyflowRef.current.setNodes(
         (prev) => updates.nodes.map((update) => {
           const existing = prev.find(isSameNode(update));
@@ -7888,7 +8134,7 @@ function assignInlineVars(varsOrContract, tokens) {
     writable: !1
   }), styles;
 }
-var container$2 = "bexn7q0", edgePathBg = "bexn7q1", fillStrokeCtx = "bexn7q2", cssEdgePath = "bexn7q3", varLabelX = "var(--bexn7q4)", varLabelY = "var(--bexn7q5)", edgeLabel = "bexn7q7", edgeLabelBody = "bexn7q8";
+var container$2 = "bexn7q1", edgePathBg = "bexn7q2", fillStrokeCtx = "bexn7q3", cssEdgePath = "bexn7q6", varLabelX = "var(--bexn7q7)", varLabelY = "var(--bexn7q8)", edgeLabel = "bexn7qa", edgeLabelBody = "bexn7qb";
 function getNodeIntersection(intersectionNode, targetNode) {
   const {
     width: intersectionNodeWidth,
@@ -7950,28 +8196,23 @@ function bezierPath(bezierSpline) {
   }
   return invariant(points.length === 0, "all points should be consumed"), path;
 }
-const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, by]) => isSamePoint(a.x, bx) && isSamePoint(a.y, by), isEqualProps = (prev, next) => prev.id === next.id && prev.source === next.source && prev.target === next.target && isSamePoint(prev.sourceX, next.sourceX) && isSamePoint(prev.sourceY, next.sourceY) && isSamePoint(prev.targetX, next.targetX) && isSamePoint(prev.targetY, next.targetY) && deepEqual(prev.data, next.data), RelationshipEdge = /* @__PURE__ */ memo(function({
+const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, by]) => isSamePoint(a.x, bx) && isSamePoint(a.y, by), isEqualProps = (prev, next) => prev.id === next.id && prev.source === next.source && prev.target === next.target && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSamePoint(prev.sourceX, next.sourceX) && isSamePoint(prev.sourceY, next.sourceY) && isSamePoint(prev.targetX, next.targetX) && isSamePoint(prev.targetY, next.targetY) && deepEqual(prev.data, next.data), curve = line().curve(curveCatmullRomOpen.alpha(1)), RelationshipEdge = /* @__PURE__ */ memo(function({
   id: id2,
   data,
   selected: _selected,
-  markerEnd: _markerEnd,
   style: style2,
   source,
   target,
   interactionWidth
 }) {
   var _a, _b, _c;
-  const { nodeLookup, edgeLookup } = useXYStoreApi().getState(), sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`), targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`), isNotModified = isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) && isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position);
-  invariant(data, "data is required");
-  const {
-    edge
-  } = data, color2 = edge.color ?? "gray", isHovered = useDiagramState((s) => s.hoveredEdgeId === id2), line = edge.line ?? "dashed", isDotted = line === "dotted", isDashed = isDotted || line === "dashed";
+  const { nodeLookup, edgeLookup } = useXYStoreApi().getState(), sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`), targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`), isNotModified = isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) && isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position), { edge: diagramEdge, controlPoints } = data, color2 = diagramEdge.color ?? "gray", isHovered = useDiagramState((s) => s.hoveredEdgeId === id2), line2 = diagramEdge.line ?? "dashed", isDotted = line2 === "dotted", isDashed = isDotted || line2 === "dashed";
   let strokeDasharray;
   isDotted ? strokeDasharray = "1,8" : isDashed && (strokeDasharray = "8,10");
   const marker = `url(#arrow-${id2})`;
   let edgePath, labelX, labelY;
   if (isNotModified)
-    edgePath = bezierPath(edge.points), labelX = ((_a = data.label) == null ? void 0 : _a.bbox.x) ?? 0, labelY = ((_b = data.label) == null ? void 0 : _b.bbox.y) ?? 0;
+    edgePath = bezierPath(diagramEdge.points), labelX = ((_a = data.label) == null ? void 0 : _a.bbox.x) ?? 0, labelY = ((_b = data.label) == null ? void 0 : _b.bbox.y) ?? 0;
   else {
     const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode), [_edgePath, _labelX, _labelY] = getBezierPath({
       sourceX: sx,
@@ -7982,6 +8223,14 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
       targetY: ty
     });
     edgePath = _edgePath, labelX = _labelX, labelY = _labelY;
+    const sourceCenterPos = getNodePositionWithOrigin(sourceNode, [-0.5, -0.5]), targetCenterPos = getNodePositionWithOrigin(targetNode, [-0.5, -0.5]);
+    edgePath = curve([
+      [sourceCenterPos.positionAbsolute.x, sourceCenterPos.positionAbsolute.y],
+      [sx, sy],
+      ...controlPoints,
+      [tx, ty],
+      [targetCenterPos.positionAbsolute.x, targetCenterPos.positionAbsolute.y]
+    ]);
   }
   return /* @__PURE__ */ jsxs("g", { className: clsx(container$2), "data-likec4-color": color2, "data-edge-hovered": isHovered, children: [
     /* @__PURE__ */ jsx("g", { className: clsx(fillStrokeCtx), children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
@@ -8005,8 +8254,8 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
         edgePath,
         interactionWidth: interactionWidth ?? 10,
         strokeDasharray,
-        markerStart: edge.tailArrow ? marker : void 0,
-        markerEnd: edge.headArrow ? marker : void 0,
+        markerStart: diagramEdge.tailArrow ? marker : void 0,
+        markerEnd: diagramEdge.headArrow ? marker : void 0,
         style: style2
       }
     ),
@@ -8030,7 +8279,7 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
       }
     ) })
   ] });
-}, isEqualProps), RelationshipPath = memo(({
+}, isEqualProps), RelationshipPath = ({
   edgePath,
   interactionWidth,
   strokeDasharray,
@@ -8069,7 +8318,7 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
       strokeWidth: interactionWidth
     }
   )
-] })), Link = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+] }), Link = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "svg",
   {
     ref,
@@ -8596,6 +8845,36 @@ function ElementNode({
     }
   );
 }
+function SelectEdgesOnNodeFocus() {
+  const focusedNodeId = useDiagramState((s) => s.focusedNodeId), xyflowApi = useXYStoreApi();
+  return useUpdateEffect(() => {
+    const edgeChanges = [], nodeChanges = [], { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
+    if (focusedNodeId) {
+      for (const edge of edges)
+        edge.source === focusedNodeId || edge.target === focusedNodeId ? edgeChanges.push({
+          id: edge.id,
+          type: "select",
+          selected: !0
+        }) : edge.selected && edgeChanges.push({
+          id: edge.id,
+          type: "select",
+          selected: !1
+        });
+      for (const node of nodes)
+        node.selected && node.id !== focusedNodeId && nodeChanges.push({
+          id: node.id,
+          type: "select",
+          selected: !1
+        });
+      nodeChanges.push({
+        id: focusedNodeId,
+        type: "select",
+        selected: !0
+      }), edgeChanges.length > 0 && triggerEdgeChanges(edgeChanges), nodeChanges.length > 0 && triggerNodeChanges(nodeChanges);
+    } else
+      xyflowApi.getState().resetSelectedElements();
+  }, [focusedNodeId]), null;
+}
 function literalToEnum(value) {
   switch (value) {
     case "dots":
@@ -8613,14 +8892,19 @@ const XYFlowBackground = memo(({ background }) => {
     return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(background) });
   const { variant, ...rest } = background;
   return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(variant), ...rest });
-}, deepEqual);
+}, deepEqual), viewportDomNode = (state) => {
+  var _a;
+  return ((_a = state.domNode) == null ? void 0 : _a.querySelector(".react-flow__viewport")) ?? null;
+};
 function useXYFlowEvents() {
-  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = useRef(), dbclickGuarg = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
+  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = useRef(), viewportRef = useRef(viewportDomNode(xyflowApi.getState())), dbclickGuarg = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
     dblclickTimeout.current = void 0;
-  }, 250), !1);
-  return useMemo(() => ({
+  }, 250), !1), transformRef = useRef(""), cbRef = useRef();
+  return useEffect(() => xyflowApi.subscribe((state, prev) => {
+    (state.domNode !== prev.domNode || state.domNode && !viewportRef.current) && (viewportRef.current = viewportDomNode(state));
+  }), [xyflowApi]), useMemo(() => ({
     onDoubleClick: (event) => {
-      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null);
+      diagramApi.getState().resetLastClicked();
       const diagramState = diagramApi.getState();
       if (diagramState.onCanvasDblClick) {
         diagramState.onCanvasDblClick(event);
@@ -8634,9 +8918,8 @@ function useXYFlowEvents() {
     onPaneClick: (event) => {
       if (dbclickGuarg())
         return;
-      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null);
-      const { focusedNodeId, fitDiagram, onCanvasClick } = diagramApi.getState();
-      if (onCanvasClick) {
+      const { focusedNodeId, fitDiagram, onCanvasClick, resetLastClicked } = diagramApi.getState();
+      if (resetLastClicked(), onCanvasClick) {
         onCanvasClick(event);
         return;
       }
@@ -8652,7 +8935,7 @@ function useXYFlowEvents() {
     },
     onPaneContextMenu: (event) => {
       var _a, _b;
-      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null), (_b = (_a = diagramApi.getState()).onCanvasContextMenu) == null || _b.call(_a, event);
+      diagramApi.getState().resetLastClicked(), (_b = (_a = diagramApi.getState()).onCanvasContextMenu) == null || _b.call(_a, event);
     },
     onEdgeContextMenu: (event, xyedge) => {
       var _a, _b;
@@ -8676,16 +8959,25 @@ function useXYFlowEvents() {
       focusedNodeId && focusedNodeId !== xynode.id && (fitDiagram(xynode), event.stopPropagation());
     },
     onNodeDoubleClick: (event, xynode) => {
-      const { zoomable, fitDiagram, onNodeClick } = diagramApi.getState();
-      onNodeClick || zoomable && (fitDiagram(xynode), event.stopPropagation());
+      diagramApi.getState().setLastClickedNode(xynode.id);
+      const { zoomable, fitViewEnabled, fitDiagram, onNodeClick } = diagramApi.getState();
+      onNodeClick || zoomable && fitViewEnabled && (fitDiagram(xynode), event.stopPropagation());
     },
     onEdgeClick: (event, xyedge) => {
-      var _a, _b;
-      diagramApi.getState().setLastClickedEdge(xyedge.id), (_b = (_a = diagramApi.getState()).onEdgeClick) == null || _b.call(_a, {
-        relation: xyedge.data.edge,
-        xyedge,
-        event
-      });
+      diagramApi.getState().setLastClickedEdge(xyedge.id);
+      const { focusedNodeId, fitDiagram, onEdgeClick, xyflow } = diagramApi.getState();
+      if (onEdgeClick) {
+        onEdgeClick({
+          relation: xyedge.data.edge,
+          xyedge,
+          event
+        });
+        return;
+      }
+      if (focusedNodeId && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target)) {
+        const nextFocus = focusedNodeId === xyedge.source ? xyedge.target : xyedge.source;
+        fitDiagram(xyflow.getNode(nextFocus)), event.stopPropagation();
+      }
     },
     onMoveEnd: (event, _viewport) => {
       const viewportChanged = !!event;
@@ -8702,6 +8994,19 @@ function useXYFlowEvents() {
     },
     onEdgeMouseLeave: (event, xyedge) => {
       diagramApi.getState().setHoveredEdge(null);
+    },
+    /**
+     * WOKAROUND:
+     * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
+     * https://github.com/xyflow/xyflow/issues/3282
+     */
+    onViewportChange: ({ x, y, zoom: zoom2 }) => {
+      const scale = zoom2 != 1 ? zoom2.toFixed(6) : "1";
+      transformRef.current = `translate(${Math.round(x)}px, ${Math.round(y)}px) scale(${scale})`, cbRef.current ?? (cbRef.current = requestIdleCallback(() => {
+        cbRef.current = void 0, viewportRef.current && viewportRef.current.style.transform !== transformRef.current && (viewportRef.current.style.transform = transformRef.current);
+      }, {
+        timeout: 1e3
+      }));
     }
   }), [diagramApi, xyflowApi]);
 }
@@ -8711,7 +9016,7 @@ const nodeTypes = {
 }, edgeTypes = {
   relationship: RelationshipEdge
 }, selector = (s) => ({
-  nodesSelectable: s.nodesSelectable,
+  nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
   fitViewPadding: s.fitViewPadding,
@@ -8797,6 +9102,7 @@ function XYFlowWrapper({
       onNodeClick: handlers.onNodeClick,
       onNodeDoubleClick: handlers.onNodeDoubleClick,
       onEdgeClick: handlers.onEdgeClick,
+      onViewportChange: handlers.onViewportChange,
       onInit: () => {
         diagramApi.setState({ initialized: !0 }, !1, "initialized");
       },
@@ -8811,7 +9117,8 @@ function XYFlowWrapper({
       },
       children: [
         isBgWithPattern && /* @__PURE__ */ jsx(XYFlowBackground, { background }),
-        controls && /* @__PURE__ */ jsx(Controls, {}),
+        controls && /* @__PURE__ */ jsx(Controls, { position: "bottom-right" }),
+        zoomable && !editor.hasOnNodeClick && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {}),
         children2
       ]
     }
@@ -8831,6 +9138,7 @@ function LikeC4Diagram({
   background = "dots",
   controls = !1,
   showElementLinks = !0,
+  showDiagramTitle = !0,
   initialWidth,
   initialHeight,
   keepAspectRatio = !1,
@@ -8891,7 +9199,7 @@ function LikeC4Diagram({
                 enabled: keepAspectRatio,
                 width: view.width,
                 height: view.height,
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsxs(
                   XYFlow,
                   {
                     className: clsx(
@@ -8905,7 +9213,10 @@ function LikeC4Diagram({
                     controls,
                     defaultNodes: initialRef.current.defaultNodes,
                     defaultEdges: initialRef.current.defaultEdges,
-                    children: readonly !== !0 && /* @__PURE__ */ jsx(OptionsPanel2, {})
+                    children: [
+                      readonly !== !0 && /* @__PURE__ */ jsx(OptionsPanel, {}),
+                      showDiagramTitle === !0 && /* @__PURE__ */ jsx(DiagramTitlePanel, {})
+                    ]
                   }
                 )
               }
@@ -8939,6 +9250,7 @@ function StaticLikeC4Diagram({
       controls: !1,
       background,
       showElementLinks: !0,
+      showDiagramTitle: !1,
       nodesSelectable: !1,
       nodesDraggable: !1,
       ...rest