likec4 0.44.1 → 0.44.2

package/dist/@likec4/diagrams/index.mjs

@@ -0,0 +1,1927 @@
+import { useState, useCallback, useRef, useLayoutEffect, useEffect, forwardRef, useImperativeHandle, useMemo } from 'react';
+import { DefaultArrowType, DefaultLineStyle, DefaultRelationshipColor, invariant, nonexhaustive, nonNullable, defaultTheme, isString } from '@likec4/core';
+import { useHookableRef, useUpdateEffect, useMeasure, useKeyboardEvent, useSyncedRef as useSyncedRef$1, useMediaQuery } from '@react-hookz/web/esm';
+import { animated, useSpring, useTransition, easings } from '@react-spring/konva';
+import { equals, memoize, clamp } from 'rambdax';
+import { Stage, Group, Rect, Text, Line, Path, Ellipse, Image, Circle, Layer } from 'react-konva/es/ReactKonvaCore';
+import KonvaCore from 'konva/lib/Core';
+import 'konva/lib/shapes/Rect';
+import 'konva/lib/shapes/Text';
+import 'konva/lib/shapes/Path';
+import 'konva/lib/shapes/Circle';
+import 'konva/lib/shapes/Line';
+import 'konva/lib/shapes/Image';
+import 'konva/lib/shapes/Ellipse';
+import { toHex, scale } from 'khroma';
+import { atom, useAtom, useAtomValue, useSetAtom, createStore, Provider } from 'jotai';
+import { selectAtom } from 'jotai/utils';
+import { createUseGesture, dragAction, pinchAction } from '@use-gesture/react';
+import { useIsMounted } from '@react-hookz/web/esm/useIsMounted';
+import { createPortal } from 'react-dom';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock-upgrade';
+
+KonvaCore.hitOnDragEnabled = true;
+KonvaCore.capturePointerEventsEnabled = true;
+KonvaCore.dragButtons = [0, 2];
+const AnimatedStage = /* @__PURE__ */ animated(Stage);
+const AnimatedRect = /* @__PURE__ */ animated(Rect);
+const AnimatedGroup = /* @__PURE__ */ animated(Group);
+const AnimatedText = /* @__PURE__ */ animated(Text);
+const AnimatedPath = /* @__PURE__ */ animated(Path);
+const AnimatedLine = /* @__PURE__ */ animated(Line);
+const AnimatedEllipse = /* @__PURE__ */ animated(Ellipse);
+
+function EdgeArrow({
+  arrowType,
+  points,
+  springs,
+  globalCompositeOperation
+}) {
+  const isOutline = arrowType === "odiamond" || arrowType === "onormal";
+  return /* @__PURE__ */ React.createElement(
+    AnimatedLine,
+    {
+      opacity: springs.opacity,
+      points: points.flat(),
+      closed: true,
+      fill: isOutline ? void 0 : springs.lineColor,
+      stroke: springs.lineColor,
+      strokeWidth: 1.6,
+      hitStrokeWidth: 5,
+      lineCap: "round",
+      lineJoin: "miter",
+      globalCompositeOperation
+    }
+  );
+}
+function EdgeLabelBg({
+  animate,
+  labelBBox,
+  isHovered,
+  springs
+}) {
+  const padding = 4;
+  const props = useSpring({
+    to: {
+      x: labelBBox.x - padding,
+      y: labelBBox.y - padding,
+      width: labelBBox.width + padding * 2,
+      height: labelBBox.height + padding * 2,
+      opacity: isHovered ? 0.25 : 0.1
+    },
+    immediate: !animate
+  });
+  return /* @__PURE__ */ React.createElement(
+    AnimatedRect,
+    {
+      ...props,
+      fill: springs.labelBgColor,
+      cornerRadius: 2,
+      globalCompositeOperation: "darken",
+      hitStrokeWidth: 5
+    }
+  );
+}
+function EdgeShape({ animate = true, edge, theme, isHovered, springs }) {
+  const {
+    points,
+    head,
+    color,
+    line = DefaultLineStyle,
+    headArrow,
+    tail,
+    tailArrow,
+    labelBBox,
+    labels
+  } = edge;
+  const globalCompositeOperation = !color || color === DefaultRelationshipColor ? "luminosity" : "lighten";
+  const isDotted = line === "dotted";
+  const isDashed = isDotted || line === "dashed";
+  let dash;
+  if (isDotted) {
+    dash = [1, 5];
+  } else if (isDashed) {
+    dash = [10, 8];
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedLine,
+    {
+      opacity: springs.opacity,
+      bezier: true,
+      dashEnabled: isDashed,
+      dashOffset: 1,
+      points: points.flat(),
+      dash,
+      stroke: springs.lineColor,
+      strokeWidth: springs.lineWidth,
+      hitStrokeWidth: 20,
+      lineCap: "round",
+      lineJoin: "round",
+      globalCompositeOperation
+    }
+  ), head !== "none" && headArrow && /* @__PURE__ */ React.createElement(
+    EdgeArrow,
+    {
+      key: "head",
+      arrowType: head ?? DefaultArrowType,
+      points: headArrow,
+      springs,
+      globalCompositeOperation
+    }
+  ), tail !== "none" && tailArrow && /* @__PURE__ */ React.createElement(
+    EdgeArrow,
+    {
+      key: "tail",
+      arrowType: tail ?? DefaultArrowType,
+      points: tailArrow,
+      springs,
+      globalCompositeOperation
+    }
+  ), labelBBox && labelBBox.width > 0 && /* @__PURE__ */ React.createElement(
+    EdgeLabelBg,
+    {
+      animate,
+      labelBBox,
+      isHovered,
+      springs
+    }
+  ), labels && labels.map((label, i) => /* @__PURE__ */ React.createElement(
+    AnimatedText,
+    {
+      key: i,
+      x: label.pt[0],
+      y: label.pt[1],
+      offsetY: label.fontSize / 2,
+      opacity: springs.opacity,
+      fill: springs.labelColor,
+      fontFamily: theme.font,
+      fontSize: label.fontSize,
+      fontStyle: label.fontStyle ?? "normal",
+      text: label.text,
+      listening: false,
+      globalCompositeOperation,
+      shadowEnabled: springs.opacity.to((o) => o > 0.5),
+      shadowColor: "#222",
+      shadowOpacity: 0.15,
+      shadowOffsetX: 1,
+      shadowOffsetY: 2,
+      shadowBlur: 2
+    }
+  )));
+}
+
+function mousePointer(e) {
+  const container = e.target.getStage()?.container();
+  if (container) {
+    container.style.cursor = "pointer";
+  }
+}
+function mouseDefault(e) {
+  const container = e.target.getStage()?.container();
+  if (container) {
+    container.style.cursor = "auto";
+  }
+}
+
+const currentHoveredNodeAtom = atom(null);
+const nodeTimeoutAtom = atom(void 0);
+const hoveredNodeAtom = atom(
+  (get) => get(currentHoveredNodeAtom),
+  (get, set, update) => {
+    clearTimeout(get(nodeTimeoutAtom));
+    clearTimeout(get(edgeTimeoutAtom));
+    const _prev = get(currentHoveredNodeAtom);
+    const _next = typeof update === "function" ? update(_prev) : update;
+    if (equals(_prev, _next)) {
+      return false;
+    }
+    if (_next != null && _prev == null) {
+      set(
+        nodeTimeoutAtom,
+        setTimeout(() => {
+          set(currentHoveredNodeAtom, _next);
+          set(currentHoveredEdgeAtom, null);
+        }, 200)
+      );
+      return true;
+    }
+    if (_next != null && _prev != null) {
+      set(
+        nodeTimeoutAtom,
+        setTimeout(() => {
+          set(currentHoveredNodeAtom, _next);
+          set(currentHoveredEdgeAtom, null);
+        }, 150)
+      );
+      return true;
+    }
+    if (_next == null && _prev != null) {
+      set(
+        nodeTimeoutAtom,
+        setTimeout(() => {
+          set(currentHoveredNodeAtom, null);
+        }, 150)
+      );
+      return true;
+    }
+    set(currentHoveredNodeAtom, _next);
+    return true;
+  }
+);
+const hoveredNodeIdAtom = selectAtom(hoveredNodeAtom, (node) => node?.id ?? null);
+const currentHoveredEdgeAtom = atom(null);
+const edgeTimeoutAtom = atom(void 0);
+const hoveredEdgeAtom = atom(
+  (get) => get(currentHoveredEdgeAtom),
+  (get, set, update) => {
+    clearTimeout(get(nodeTimeoutAtom));
+    clearTimeout(get(edgeTimeoutAtom));
+    const _prev = get(currentHoveredEdgeAtom);
+    const _next = typeof update === "function" ? update(_prev) : update;
+    if (equals(_prev, _next)) {
+      return false;
+    }
+    if (_next != null && _prev == null) {
+      set(
+        edgeTimeoutAtom,
+        setTimeout(() => {
+          set(currentHoveredEdgeAtom, _next);
+          set(currentHoveredNodeAtom, null);
+        }, 400)
+      );
+      return true;
+    }
+    if (_next != null && _prev != null) {
+      set(
+        edgeTimeoutAtom,
+        setTimeout(() => {
+          set(currentHoveredEdgeAtom, _next);
+          set(currentHoveredNodeAtom, null);
+        }, 150)
+      );
+      return true;
+    }
+    if (_next == null && _prev != null) {
+      set(
+        edgeTimeoutAtom,
+        setTimeout(() => {
+          set(currentHoveredEdgeAtom, null);
+        }, 150)
+      );
+      return true;
+    }
+    set(currentHoveredEdgeAtom, null);
+    return true;
+  }
+);
+const hoveredEdgeIdAtom = selectAtom(hoveredEdgeAtom, (edge) => edge?.id ?? null);
+
+function useHoveredNode() {
+  return useAtom(hoveredNodeAtom);
+}
+function useHoveredNodeId() {
+  return useAtomValue(hoveredNodeIdAtom);
+}
+function useSetHoveredNode() {
+  return useSetAtom(hoveredNodeAtom);
+}
+function useHoveredEdge() {
+  return useAtom(hoveredEdgeAtom);
+}
+function useHoveredEdgeId() {
+  return useAtomValue(hoveredEdgeIdAtom);
+}
+function useSetHoveredEdge() {
+  return useSetAtom(hoveredEdgeAtom);
+}
+
+let _isDragging = false;
+let tm;
+const DiagramGesture = {
+  get isDragging() {
+    return _isDragging;
+  },
+  set isDragging(value) {
+    clearTimeout(tm);
+    if (value) {
+      _isDragging = value;
+      return;
+    }
+    if (_isDragging) {
+      tm = setTimeout(() => {
+        _isDragging = false;
+      }, 100);
+    }
+  }
+};
+
+function DiagramStateProvider({ children }) {
+  const [store] = useState(() => createStore());
+  return /* @__PURE__ */ React.createElement(Provider, { store }, children);
+}
+
+const edgeColors = memoize((colors, isHovered) => {
+  if (isHovered) {
+    return {
+      lineColor: toHex(
+        scale(colors.lineColor, {
+          l: 25,
+          s: -5
+        })
+      ),
+      labelColor: toHex(
+        scale(colors.labelColor, {
+          l: 40
+        })
+      ),
+      labelBgColor: toHex(
+        scale(colors.labelBgColor, {
+          l: -10
+        })
+      )
+    };
+  } else {
+    return colors;
+  }
+});
+function Edges({ animate, theme, diagram, onEdgeClick }) {
+  const hoveredEdgeId = useHoveredEdgeId();
+  const setHoveredEdge = useSetHoveredEdge();
+  const edgeSprings = useCallback(
+    (edge, isHovered = false) => {
+      return {
+        opacity: 1,
+        lineWidth: 2,
+        ...edgeColors(theme.relationships[edge.color ?? DefaultRelationshipColor], isHovered)
+      };
+    },
+    [theme]
+  );
+  const edgeTransitions = useTransition(diagram.edges, {
+    from: (edge) => ({
+      ...edgeSprings(edge),
+      opacity: 0.15,
+      lineWidth: 2
+    }),
+    initial: (edge) => edgeSprings(edge),
+    update: (edge) => {
+      const isInactive = animate && hoveredEdgeId !== null && hoveredEdgeId !== edge.id;
+      const isHovered = animate && hoveredEdgeId === edge.id;
+      return {
+        ...edgeSprings(edge, isHovered),
+        opacity: isInactive ? 0.4 : 1,
+        lineWidth: isHovered ? 3 : 2
+      };
+    },
+    enter: {
+      opacity: 1
+    },
+    leave: (edge) => {
+      return {
+        ...edgeSprings(edge),
+        opacity: 0.05,
+        lineWidth: 2
+      };
+    },
+    expires: true,
+    exitBeforeEnter: true,
+    immediate: !animate,
+    // delay: 30,
+    config: {
+      duration: 160,
+      precision: 5e-3
+    },
+    // unique edge key, scoped to this diagram
+    // to avoid any issues with diagram-to-diagram transitions
+    keys: (e) => e.id + diagram.id
+  });
+  return edgeTransitions((springs, edge, { key }) => /* @__PURE__ */ React.createElement(
+    Group,
+    {
+      key,
+      onPointerClick: (e) => {
+        if (!onEdgeClick || DiagramGesture.isDragging || e.evt.button !== 0) {
+          return;
+        }
+        e.cancelBubble = true;
+        onEdgeClick(edge, e);
+      },
+      onPointerEnter: (e) => {
+        if (animate) {
+          setHoveredEdge(edge);
+          mousePointer(e);
+        }
+      },
+      onPointerLeave: (e) => {
+        setHoveredEdge(null);
+        mouseDefault(e);
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      EdgeShape,
+      {
+        animate,
+        edge,
+        isHovered: hoveredEdgeId === edge.id,
+        theme,
+        springs
+      }
+    )
+  ));
+}
+
+function Portal({ selector, enabled, children }) {
+  const outer = useRef(null);
+  const inner = useRef(null);
+  const safeRef = useRef();
+  const shouldMove = enabled ?? true;
+  useLayoutEffect(() => {
+    if (!outer.current || !inner.current) {
+      return;
+    }
+    const stage = outer.current.getStage();
+    if (!stage) {
+      return;
+    }
+    if (shouldMove) {
+      const newContainer = stage.findOne(selector);
+      if (newContainer) {
+        safeRef.current = inner.current;
+        inner.current.moveTo(newContainer);
+      }
+    } else if (safeRef.current) {
+      safeRef.current.moveTo(outer.current);
+      safeRef.current = void 0;
+    }
+  }, [selector, shouldMove]);
+  useEffect(() => {
+    return () => {
+      safeRef.current?.destroy();
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(Group, { ref: outer }, /* @__PURE__ */ React.createElement(Group, { ref: inner }, children));
+}
+
+const ZoomInIcon = ({ fill, opacity = 1, size = 20, x, y }) => {
+  const originalSize = 15;
+  const scale = size / originalSize;
+  const offsetIcon = originalSize / 2;
+  return /* @__PURE__ */ React.createElement(
+    Path,
+    {
+      data: "M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159ZM4.25 6.5C4.25 6.22386 4.47386 6 4.75 6H6V4.75C6 4.47386 6.22386 4.25 6.5 4.25C6.77614 4.25 7 4.47386 7 4.75V6H8.25C8.52614 6 8.75 6.22386 8.75 6.5C8.75 6.77614 8.52614 7 8.25 7H7V8.25C7 8.52614 6.77614 8.75 6.5 8.75C6.22386 8.75 6 8.52614 6 8.25V7H4.75C4.47386 7 4.25 6.77614 4.25 6.5Z",
+      fill,
+      fillRule: "evenodd",
+      strokeEnabled: false,
+      x,
+      y,
+      offsetX: offsetIcon,
+      offsetY: offsetIcon,
+      scaleX: scale,
+      scaleY: scale,
+      width: originalSize,
+      height: originalSize,
+      opacity,
+      globalCompositeOperation: "luminosity",
+      hitStrokeWidth: 5
+    }
+  );
+};
+
+function CompoundShape({ node, theme, springs, labelOffsetX = 4 }) {
+  const { labels } = node;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedRect,
+    {
+      cornerRadius: 4,
+      shadowColor: theme.shadow,
+      shadowBlur: node.level > 0 ? 20 : 10,
+      shadowOpacity: node.level > 0 ? 0.35 : 0.8,
+      shadowOffsetX: 0,
+      shadowOffsetY: 4,
+      shadowEnabled: springs.opacity.to((v) => v > 0.7),
+      width: springs.width,
+      height: springs.height,
+      fill: springs.fill,
+      strokeEnabled: false,
+      listening: false
+    }
+  ), labels.map(({ pt: [x, y], ...label }, i) => /* @__PURE__ */ React.createElement(
+    AnimatedText,
+    {
+      key: i,
+      x,
+      y: y - 4,
+      offsetX: labelOffsetX,
+      offsetY: label.fontSize / 2,
+      width: springs.width.to((v) => v - x - 4),
+      fill: "#BABABA",
+      fontFamily: theme.font,
+      fontSize: label.fontSize,
+      fontStyle: label.fontStyle ?? "normal",
+      letterSpacing: 0.8,
+      align: label.align,
+      text: label.text,
+      wrap: "none",
+      ellipsis: true,
+      perfectDrawEnabled: false,
+      padding: 6,
+      hitStrokeWidth: 3,
+      globalCompositeOperation: "luminosity"
+    }
+  )));
+}
+
+const compoundColor = memoize(
+  (color, depth) => toHex(
+    scale(color, {
+      l: -35 - 5 * depth,
+      s: -15 - 5 * depth
+    })
+  )
+);
+function isCompound(node) {
+  return node.children.length > 0;
+}
+function nodeSprings(theme, node) {
+  const {
+    position: [x, y],
+    size: { width, height },
+    color
+  } = node;
+  const colors = theme.elements[color];
+  const offsetX = Math.round(width / 2);
+  const offsetY = Math.round(height / 2);
+  return {
+    opacity: 1,
+    scaleX: 1,
+    scaleY: 1,
+    x: x + offsetX,
+    y: y + offsetY,
+    fill: isCompound(node) ? compoundColor(colors.fill, node.depth ?? 1) : colors.fill,
+    stroke: isCompound(node) ? compoundColor(colors.stroke, node.depth ?? 1) : colors.stroke,
+    width,
+    height,
+    offsetX,
+    offsetY
+  };
+}
+const useNodeSpringsFn = (theme) => {
+  return useCallback((node) => nodeSprings(theme, node), [theme]);
+};
+const useShadowSprings = (isHovered = false, theme, springs) => {
+  const [values] = useSpring(
+    {
+      shadowBlur: isHovered ? 30 : 12,
+      shadowOpacity: isHovered ? 0.5 : 0.35,
+      shadowOffsetX: 0,
+      shadowOffsetY: isHovered ? 16 : 4,
+      shadowColor: theme.shadow
+    },
+    [isHovered, theme]
+  );
+  return {
+    shadowEnabled: springs.opacity.to((v) => v > 0.8),
+    ...values
+  };
+};
+
+const imageElements = /* @__PURE__ */ new Map();
+function useImageLoader(url, crossOrigin, referrerpolicy) {
+  const isMounted = useIsMounted();
+  const imageRef = useRef(url ? imageElements.get(url) : void 0);
+  const statusRef = useRef(imageRef.current ? "loaded" : "loading");
+  const [_, setStateToken] = useState(0);
+  const urlRef = useRef(url);
+  if (!url || urlRef.current !== url) {
+    statusRef.current = "loading";
+    imageRef.current = void 0;
+    urlRef.current = url;
+  }
+  useLayoutEffect(() => {
+    if (!url) {
+      return;
+    }
+    const urlClosure = url;
+    const imgCached = imageElements.get(url);
+    if (imgCached) {
+      statusRef.current = "loaded";
+      if (imageRef.current !== imgCached) {
+        imageRef.current = imgCached;
+        setStateToken(Math.random());
+      }
+      return;
+    }
+    const img = document.createElement("img");
+    function onload() {
+      if (!isMounted())
+        return;
+      imageElements.set(urlClosure, img);
+      if (urlRef.current === urlClosure) {
+        statusRef.current = "loaded";
+        imageRef.current = img;
+        setStateToken(Math.random());
+      }
+    }
+    function onerror() {
+      if (!isMounted() || urlRef.current !== urlClosure)
+        return;
+      statusRef.current = "failed";
+      imageRef.current = void 0;
+      setStateToken(Math.random());
+    }
+    img.addEventListener("load", onload);
+    img.addEventListener("error", onerror);
+    crossOrigin && (img.crossOrigin = crossOrigin);
+    referrerpolicy && (img.referrerPolicy = referrerpolicy);
+    img.src = url;
+    return () => {
+      img.removeEventListener("load", onload);
+      img.removeEventListener("error", onerror);
+    };
+  }, [url, crossOrigin ?? null, referrerpolicy ?? null]);
+  if (imageRef.current !== void 0) {
+    statusRef.current = "loaded";
+    return [imageRef.current, "loaded"];
+  }
+  invariant(statusRef.current !== "loaded", "image status cant be loaded");
+  return [imageRef.current, statusRef.current];
+}
+
+function NodeIcon({ icon, maxWidth, maxHeight, offsetX = 0, offsetY = 0 }) {
+  const [image] = useImageLoader(icon);
+  if (!image) {
+    return null;
+  }
+  const padding = 16;
+  const maxIconWidth = Math.round(maxWidth - padding * 2);
+  const maxIconHeight = Math.round(maxHeight - padding * 2);
+  const scale = Math.min(maxIconWidth / image.width, maxIconHeight / image.height, 1);
+  const iconWidth = Math.floor(image.width * scale);
+  const iconHeight = Math.floor(image.height * scale);
+  return /* @__PURE__ */ React.createElement(
+    Image,
+    {
+      image,
+      x: padding + (maxIconWidth - iconWidth) / 2,
+      y: padding + (maxIconHeight - iconHeight) / 2,
+      offsetX,
+      offsetY,
+      width: iconWidth,
+      height: iconHeight,
+      listening: false,
+      globalCompositeOperation: "hard-light"
+    }
+  );
+}
+
+function NodeLabels({
+  node: { icon, labels, size, color },
+  theme,
+  offsetX = 0,
+  offsetY = 0,
+  maxWidth
+}) {
+  const colors = theme.elements[color];
+  const width = maxWidth ?? size.width;
+  const firstLabel = labels[0];
+  const titleFontSize = firstLabel?.fontSize ?? 12;
+  let nodeIcon;
+  if (icon) {
+    const maxHeight = firstLabel ? Math.floor(firstLabel.pt[1] - firstLabel.fontSize / 2) : size.height;
+    nodeIcon = /* @__PURE__ */ React.createElement(
+      NodeIcon,
+      {
+        icon,
+        maxWidth: width,
+        maxHeight,
+        offsetX,
+        offsetY
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, nodeIcon, labels.map((label, i) => {
+    let color2 = colors.hiContrast;
+    if (label.fontSize !== titleFontSize) {
+      color2 = colors.loContrast;
+    }
+    return /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        key: label.text + i,
+        x: 8,
+        width: width - 16,
+        y: label.pt[1],
+        offsetY: offsetY + label.fontSize / 2,
+        offsetX,
+        fill: color2,
+        fontFamily: theme.font,
+        fontSize: label.fontSize,
+        fontStyle: label.fontStyle ?? "normal",
+        align: "center",
+        text: label.text,
+        strokeEnabled: false,
+        perfectDrawEnabled: false,
+        listening: false
+      }
+    );
+  }));
+}
+NodeLabels.displayName = "NodeLabels";
+
+function RectangleShape({ node, theme, springs, isHovered }) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedRect,
+    {
+      ...useShadowSprings(isHovered, theme, springs),
+      cornerRadius: 6,
+      strokeEnabled: false,
+      width: springs.width,
+      height: springs.height,
+      fill: springs.fill
+    }
+  ), /* @__PURE__ */ React.createElement(NodeLabels, { node, theme }));
+}
+
+function cylinderSVGPath(diameter, height, tilt = 0.0825) {
+  const radius = Math.round(diameter / 2);
+  const rx = radius;
+  const ry = Math.round(tilt * radius);
+  const tiltAdjustedHeight = height - 2 * ry;
+  const path = `  M ${diameter},${ry}
+        a ${rx},${ry} 0,0,0 ${-diameter} 0
+        l 0,${tiltAdjustedHeight}
+        a ${rx},${ry} 0,0,0 ${diameter} 0
+        l 0,${-tiltAdjustedHeight}
+        `.replace(/\s+/g, " ").trim();
+  return {
+    path,
+    ry,
+    rx
+  };
+}
+function CylinderShape({ node, theme, springs, isHovered }) {
+  const {
+    size: { width, height }
+  } = node;
+  const { path, rx, ry } = cylinderSVGPath(width, height);
+  const cylinder = useSpring({
+    to: {
+      rx,
+      ry
+    }
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedPath,
+    {
+      ...useShadowSprings(isHovered, theme, springs),
+      data: path,
+      shadowForStrokeEnabled: false,
+      fill: springs.fill
+    }
+  ), /* @__PURE__ */ React.createElement(
+    AnimatedEllipse,
+    {
+      x: cylinder.rx,
+      y: cylinder.ry,
+      radiusX: cylinder.rx,
+      radiusY: cylinder.ry,
+      fill: springs.stroke
+    }
+  ), /* @__PURE__ */ React.createElement(NodeLabels, { node, offsetY: -ry * (node.icon ? 1.5 : 0.5), theme }));
+}
+
+function MobileShape({ node, theme, springs, isHovered }) {
+  const colors = theme.elements[node.color];
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedRect,
+    {
+      ...useShadowSprings(isHovered, theme, springs),
+      cornerRadius: 6,
+      width: springs.width,
+      height: springs.height,
+      fill: springs.stroke
+    }
+  ), /* @__PURE__ */ React.createElement(Circle, { x: 16, y: node.size.height / 2, radius: 10, fill: colors.fill, listening: false }), /* @__PURE__ */ React.createElement(
+    AnimatedRect,
+    {
+      cornerRadius: 4,
+      x: 31,
+      y: 12,
+      width: springs.width.to((w) => w - 43),
+      height: springs.height.to((h) => h - 24),
+      fill: springs.fill,
+      listening: false
+    }
+  ), /* @__PURE__ */ React.createElement(NodeLabels, { node, theme, offsetX: -6 }));
+}
+
+function queueSVGPath(width, height, tilt = 0.2) {
+  const diameter = height;
+  const radius = Math.round(diameter / 2);
+  const ry = radius;
+  const rx = Math.round(diameter / 2 * tilt);
+  const tiltAdjustedWidth = width - 2 * rx;
+  const path = `  M ${rx},0
+        a ${rx},${ry} 0,0,0 0 ${diameter}
+        l ${tiltAdjustedWidth},0
+        a ${rx},${ry} 0,0,0 0 ${-diameter}
+        `.replace(/\s+/g, " ").trim();
+  return {
+    path,
+    ry,
+    rx
+  };
+}
+function QueueShape({ node, theme, springs, isHovered }) {
+  const {
+    size: { width, height }
+  } = node;
+  const { path, rx, ry } = queueSVGPath(width, height);
+  const props = useSpring({
+    to: {
+      x: width - rx,
+      y: ry,
+      rx,
+      ry
+    }
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedPath,
+    {
+      ...useShadowSprings(isHovered, theme, springs),
+      data: path,
+      fill: springs.fill
+    }
+  ), /* @__PURE__ */ React.createElement(
+    AnimatedEllipse,
+    {
+      x: props.x,
+      y: props.y,
+      radiusX: props.rx,
+      radiusY: props.ry,
+      fill: springs.stroke
+    }
+  ), /* @__PURE__ */ React.createElement(NodeLabels, { node, maxWidth: width - rx * 2, theme }));
+}
+
+const PersonIcon = {
+  width: 115,
+  height: 120,
+  path: `M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z`
+};
+function PersonShape({ node, theme, springs, isHovered }) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedRect,
+    {
+      ...useShadowSprings(isHovered, theme, springs),
+      cornerRadius: 6,
+      perfectDrawEnabled: false,
+      strokeEnabled: false,
+      width: springs.width,
+      height: springs.height,
+      fill: springs.fill
+    }
+  ), /* @__PURE__ */ React.createElement(
+    AnimatedPath,
+    {
+      x: springs.width.to((v) => v - 8),
+      y: springs.height,
+      data: PersonIcon.path,
+      width: PersonIcon.width,
+      height: PersonIcon.height,
+      fill: springs.stroke,
+      opacity: 0.7,
+      perfectDrawEnabled: false,
+      offsetX: PersonIcon.width,
+      offsetY: PersonIcon.height,
+      listening: false
+    }
+  ), /* @__PURE__ */ React.createElement(NodeLabels, { node, theme }));
+}
+
+function BrowserShape({ node, theme, springs, isHovered }) {
+  const colors = theme.elements[node.color];
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedRect,
+    {
+      ...useShadowSprings(isHovered, theme, springs),
+      cornerRadius: 6,
+      strokeEnabled: false,
+      width: springs.width,
+      height: springs.height,
+      fill: springs.stroke
+    }
+  ), /* @__PURE__ */ React.createElement(Circle, { x: 16, y: 15, radius: 7, fill: colors.fill, listening: false }), /* @__PURE__ */ React.createElement(Circle, { x: 36, y: 15, radius: 7, fill: colors.fill, listening: false }), /* @__PURE__ */ React.createElement(Circle, { x: 56, y: 15, radius: 7, fill: colors.fill, listening: false }), /* @__PURE__ */ React.createElement(
+    AnimatedRect,
+    {
+      cornerRadius: 5,
+      x: 70,
+      y: 7,
+      width: springs.width.to((w) => w - 80),
+      height: 16,
+      fill: springs.fill,
+      listening: false
+    }
+  ), /* @__PURE__ */ React.createElement(
+    AnimatedRect,
+    {
+      cornerRadius: 5,
+      x: 9,
+      y: 31,
+      width: springs.width.to((w) => w - 18),
+      height: springs.height.to((h) => h - 40),
+      fill: springs.fill,
+      listening: false
+    }
+  ), /* @__PURE__ */ React.createElement(NodeLabels, { node, theme, offsetY: -8 }));
+}
+
+function nodeShape({ shape }) {
+  switch (shape) {
+    case "cylinder":
+    case "storage": {
+      return CylinderShape;
+    }
+    case "queue": {
+      return QueueShape;
+    }
+    case "browser": {
+      return BrowserShape;
+    }
+    case "person": {
+      return PersonShape;
+    }
+    case "rectangle": {
+      return RectangleShape;
+    }
+    case "mobile": {
+      return MobileShape;
+    }
+    default: {
+      return nonexhaustive(shape);
+    }
+  }
+}
+const keyOf = (node) => {
+  const key = (node.parent ? node.parent + "-" : "") + node.id;
+  if (isCompound(node)) {
+    return "compound-" + key;
+  }
+  return key;
+};
+function Nodes({ animate, theme, diagram, onNodeClick }) {
+  const _prev = useRef(/* @__PURE__ */ new Map());
+  const _last = useRef(diagram);
+  if (_last.current.id !== diagram.id) {
+    _prev.current = new Map(_last.current.nodes.map((n) => [n.id, n]));
+  }
+  _last.current = diagram;
+  const prevNodes = _prev.current;
+  const hoveredNodeId = useHoveredNodeId();
+  const [hoveredEdge] = useHoveredEdge();
+  const nodeSprings = useNodeSpringsFn(theme);
+  const nodeTransitions = useTransition(diagram.nodes, {
+    initial: nodeSprings,
+    from: (node) => {
+      const prevNode = prevNodes.get(node.id);
+      if (prevNode) {
+        return nodeSprings(prevNode);
+      }
+      return {
+        ...nodeSprings(node),
+        opacity: 0,
+        scaleX: isCompound(node) ? 0.85 : 0.6,
+        scaleY: isCompound(node) ? 0.85 : 0.6
+      };
+    },
+    enter: (node) => {
+      const isReplacing = prevNodes.has(node.id);
+      return {
+        ...nodeSprings(node),
+        delay: isReplacing ? 50 : 70
+      };
+    },
+    // update: nodeSprings(),
+    update: (node) => {
+      const isInactive = animate && hoveredEdge && hoveredEdge.source !== node.id && hoveredEdge.target !== node.id;
+      const scale = animate && !isCompound(node) && hoveredNodeId === node.id ? 1.08 : 1;
+      return {
+        ...nodeSprings(node),
+        opacity: isInactive ? 0.3 : 1,
+        scaleX: scale,
+        scaleY: scale
+      };
+    },
+    leave: (node) => {
+      const replacedWith = diagram.nodes.find((n) => n.id === node.id);
+      if (replacedWith && keyOf(node) !== keyOf(replacedWith)) {
+        return {
+          opacity: 0,
+          immediate: true
+        };
+      }
+      return {
+        opacity: 0,
+        scaleX: isCompound(node) ? 0.7 : 0.5,
+        scaleY: isCompound(node) ? 0.7 : 0.5,
+        config: {
+          duration: 120
+        }
+      };
+    },
+    sort: (a, b) => {
+      if (isCompound(a) === isCompound(b)) {
+        return a.level - b.level;
+      }
+      return isCompound(a) ? -1 : 1;
+    },
+    expires: true,
+    immediate: !animate,
+    keys: keyOf
+  });
+  return nodeTransitions((_, node, { key, ctrl, expired }) => /* @__PURE__ */ React.createElement(
+    NodeSnape,
+    {
+      key,
+      animate,
+      node,
+      theme,
+      ctrl,
+      expired,
+      onNodeClick,
+      isHovered: node.id === hoveredNodeId
+    }
+  ));
+}
+function NodeSnape({
+  animate,
+  node,
+  ctrl,
+  theme,
+  isHovered,
+  expired,
+  onNodeClick
+}) {
+  const setHoveredNode = useSetHoveredNode();
+  const _isCompound = isCompound(node);
+  const isNavigatable = !!node.navigateTo && !!onNodeClick;
+  const Shape = nodeShape(node);
+  const springs = ctrl.springs;
+  return /* @__PURE__ */ React.createElement(Portal, { selector: ".top", enabled: isHovered && !_isCompound }, /* @__PURE__ */ React.createElement(
+    AnimatedGroup,
+    {
+      name: node.id,
+      visible: expired !== true,
+      onPointerEnter: (e) => {
+        if (animate) {
+          setHoveredNode(node);
+          onNodeClick && mousePointer(e);
+        }
+      },
+      onPointerLeave: (e) => {
+        setHoveredNode(null);
+        mouseDefault(e);
+      },
+      ...onNodeClick && {
+        onPointerClick: (e) => {
+          if (DiagramGesture.isDragging || e.evt.button !== 0) {
+            return;
+          }
+          e.cancelBubble = true;
+          onNodeClick(node, e);
+        }
+      },
+      x: springs.x,
+      y: springs.y,
+      offsetX: springs.offsetX,
+      offsetY: springs.offsetY,
+      width: springs.width,
+      height: springs.height,
+      scaleX: springs.scaleX,
+      scaleY: springs.scaleY,
+      opacity: springs.opacity
+    },
+    _isCompound && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      CompoundShape,
+      {
+        node,
+        theme,
+        springs,
+        labelOffsetX: isNavigatable ? -12 : 4
+      }
+    ), isNavigatable && /* @__PURE__ */ React.createElement(ZoomInIcon, { fill: "#BABABA", opacity: 0.9, size: 16, x: 16, y: 18 })),
+    !_isCompound && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Shape, { node, theme, springs, isHovered }), isNavigatable && /* @__PURE__ */ React.createElement(
+      ZoomInIcon,
+      {
+        fill: "#BABABA",
+        size: 16,
+        x: node.size.width / 2,
+        y: node.size.height - 20
+      }
+    ))
+  ));
+}
+
+const useGesture = createUseGesture([dragAction, pinchAction]);
+const useSyncedRef = (value) => {
+  const ref = useRef(value);
+  Object.assign(ref.current, value);
+  return ref;
+};
+const NoPadding = [0, 0, 0, 0];
+function diagramNodeId(konvaNode) {
+  let shape = konvaNode;
+  while (shape && shape.nodeType !== "Stage") {
+    const name = shape.name();
+    if (name !== "") {
+      return name;
+    }
+    shape = shape.parent;
+  }
+  return null;
+}
+const Diagram = /* @__PURE__ */ forwardRef(
+  ({
+    diagram,
+    padding: _padding = NoPadding,
+    pannable = true,
+    zoomable = true,
+    animate = true,
+    initialPosition,
+    onEdgeClick,
+    onNodeClick,
+    onNodeContextMenu,
+    onStageClick,
+    onStageContextMenu,
+    width: _width,
+    height: _height,
+    ...props
+  }, ref) => {
+    const immediate = !animate;
+    const id = diagram.id;
+    const containerRef = useRef(null);
+    const stageRef = useHookableRef(null, (value) => {
+      containerRef.current = value?.container() ?? null;
+      if (containerRef.current) {
+        containerRef.current.style.touchAction = "none";
+      }
+      return value;
+    });
+    const width = _width ?? diagram.width;
+    const height = _height ?? diagram.height;
+    const toCenterOnRect = (centerTo) => {
+      const [paddingTop, paddingRight, paddingBottom, paddingLeft] = Array.isArray(_padding) ? _padding : [_padding, _padding, _padding, _padding];
+      const container = stageRef.current?.container();
+      const viewRect = {
+        width: Math.min(container?.clientWidth ?? width, width) - paddingLeft - paddingRight,
+        height: Math.min(container?.clientHeight ?? height, height) - paddingTop - paddingBottom
+      }, viewScale = Math.min(viewRect.width / centerTo.width, viewRect.height / centerTo.height), scale = clamp(0.1, 1.1, viewScale), centeringAjustment = {
+        x: ((width - centerTo.width) * scale + viewRect.width) / 2,
+        y: ((height - centerTo.height) * scale + viewRect.height) / 2
+      }, finalPosition = {
+        x: Math.ceil(paddingLeft + centeringAjustment.x - centerTo.x * scale),
+        y: Math.ceil(paddingTop + centeringAjustment.y - centerTo.y * scale)
+      };
+      return {
+        ...finalPosition,
+        scale
+      };
+    };
+    const toFitDiagram = () => toCenterOnRect({ x: 0, y: 0, width: diagram.width, height: diagram.height });
+    const [stageProps, stageSpringApi] = useSpring(
+      () => initialPosition ? {
+        from: initialPosition,
+        to: toFitDiagram()
+      } : {
+        from: toFitDiagram(),
+        immediate
+      }
+    );
+    const centerOnRect = (centerTo) => {
+      stageSpringApi.start({
+        to: toCenterOnRect(centerTo),
+        immediate
+      });
+      return;
+    };
+    const centerAndFit = (delay = 70, durationMs) => {
+      stageSpringApi.start({
+        to: toFitDiagram(),
+        delay,
+        config: durationMs ? {
+          duration: durationMs,
+          easing: easings.easeInOutCubic
+        } : {},
+        immediate
+      });
+      return;
+    };
+    const resetStageZoom = (_immediate) => {
+      stageSpringApi.start({
+        to: {
+          x: 0,
+          y: 0,
+          scale: 1
+        },
+        immediate
+      });
+      return;
+    };
+    const refs = useSyncedRef({
+      diagram,
+      width,
+      height,
+      centerOnRect,
+      centerAndFit,
+      resetStageZoom
+    });
+    useImperativeHandle(
+      ref,
+      () => ({
+        get stage() {
+          return nonNullable(stageRef.current, "not mounted");
+        },
+        get diagramView() {
+          return refs.current.diagram;
+        },
+        get container() {
+          return nonNullable(stageRef.current?.container(), "not mounted");
+        },
+        resetStageZoom: (_immediate) => {
+          refs.current.resetStageZoom(_immediate);
+        },
+        centerOnNode: (node) => refs.current.centerOnRect({
+          x: node.position[0],
+          y: node.position[1],
+          width: node.size.width,
+          height: node.size.height
+        }),
+        centerAndFit: () => refs.current.centerAndFit()
+      }),
+      [refs, id, stageRef]
+    );
+    useUpdateEffect(() => {
+      refs.current.centerAndFit(80, 650);
+    }, [id, height, width]);
+    useEffect(() => {
+      if (!zoomable) {
+        return;
+      }
+      const handler = (e) => e.preventDefault();
+      document.addEventListener("gesturestart", handler);
+      document.addEventListener("gesturechange", handler);
+      return () => {
+        document.removeEventListener("gesturestart", handler);
+        document.removeEventListener("gesturechange", handler);
+      };
+    }, [zoomable]);
+    useGesture(
+      {
+        onDragEnd: () => {
+          DiagramGesture.isDragging = false;
+        },
+        onDrag: (state) => {
+          const {
+            pinching,
+            down,
+            cancel,
+            intentional,
+            offset: [x, y]
+          } = state;
+          if (pinching) {
+            return cancel();
+          }
+          if (intentional) {
+            DiagramGesture.isDragging = true;
+            stageSpringApi.start({
+              to: {
+                x,
+                y
+              },
+              immediate: immediate || down
+            });
+          }
+        },
+        onPinch: ({ memo, first, last, origin: [ox, oy], movement: [ms], offset: [scale] }) => {
+          if (first) {
+            const stage = nonNullable(stageRef.current);
+            const { x: x2, y: y2 } = stage.getAbsolutePosition();
+            const tx = Math.round(ox - x2);
+            const ty = Math.round(oy - y2);
+            memo = [stage.x(), stage.y(), tx, ty];
+          }
+          const x = Math.round(memo[0] - (ms - 1) * memo[2]);
+          const y = Math.round(memo[1] - (ms - 1) * memo[3]);
+          stageSpringApi.start({
+            to: {
+              x,
+              y,
+              scale
+            },
+            immediate: immediate || !last || !first
+          });
+          return memo;
+        }
+      },
+      {
+        target: containerRef,
+        drag: {
+          enabled: pannable,
+          threshold: 4,
+          from: () => [stageProps.x.get(), stageProps.y.get()],
+          pointer: {
+            buttons: -1,
+            keys: false
+          }
+        },
+        pinch: {
+          pointer: {
+            touch: true
+          },
+          enabled: zoomable,
+          scaleBounds: { min: 0.1, max: 1.4 },
+          rubberband: 0.05,
+          pinchOnWheel: true
+        }
+      }
+    );
+    const sharedProps = {
+      animate,
+      theme: defaultTheme,
+      diagram
+    };
+    return /* @__PURE__ */ React.createElement(
+      AnimatedStage,
+      {
+        ref: stageRef,
+        width,
+        height,
+        offsetX: width / 2,
+        offsetY: height / 2,
+        x: stageProps.x,
+        y: stageProps.y,
+        scaleX: stageProps.scale,
+        scaleY: stageProps.scale,
+        ...(onStageContextMenu || onNodeContextMenu) && {
+          onContextMenu: (e) => {
+            if (DiagramGesture.isDragging || !stageRef.current) {
+              return;
+            }
+            if (e.target === stageRef.current || !onNodeContextMenu) {
+              e.cancelBubble = true;
+              onStageContextMenu?.(stageRef.current, e);
+              return;
+            }
+            if (onNodeContextMenu) {
+              const nodeId = diagramNodeId(e.target);
+              const node = nodeId && refs.current.diagram.nodes.find((n) => n.id === nodeId);
+              if (node) {
+                e.cancelBubble = true;
+                onNodeContextMenu(node, e);
+                return;
+              }
+            }
+          }
+        },
+        ...onStageClick && {
+          onPointerClick: (e) => {
+            if (DiagramGesture.isDragging || e.evt.button !== 0 || !stageRef.current) {
+              return;
+            }
+            if (e.target === stageRef.current) {
+              e.cancelBubble = true;
+              onStageClick(stageRef.current, e);
+            }
+          }
+        },
+        ...zoomable && {
+          onPointerDblClick: (e) => {
+            if (DiagramGesture.isDragging || e.evt.button !== 0 || !stageRef.current) {
+              return;
+            }
+            if (e.target === stageRef.current) {
+              e.cancelBubble = true;
+              centerAndFit();
+            }
+          }
+        },
+        ...props
+      },
+      /* @__PURE__ */ React.createElement(Layer, null, /* @__PURE__ */ React.createElement(Nodes, { ...sharedProps, onNodeClick }), /* @__PURE__ */ React.createElement(Edges, { ...sharedProps, onEdgeClick })),
+      /* @__PURE__ */ React.createElement(Layer, { name: "top" })
+    );
+  }
+);
+Diagram.displayName = "Diagram";
+
+function readViewIdFromUrl(url) {
+  return readViewId(new URL(url).hash);
+}
+function readViewId(hash = window.location.hash) {
+  if (hash.startsWith("#")) {
+    hash = hash.slice(1);
+  }
+  if (hash.includes("likec4")) {
+    return new URLSearchParams(hash).get("likec4");
+  }
+  return null;
+}
+function writeViewId(viewId) {
+  let hash = window.location.hash;
+  if (hash.startsWith("#")) {
+    hash = hash.slice(1);
+  }
+  const hashParams = new URLSearchParams(hash);
+  if (viewId != null) {
+    if (hashParams.get("likec4") !== viewId) {
+      hashParams.set("likec4", viewId);
+      window.location.hash = hashParams.toString();
+    }
+    return;
+  }
+  if (viewId === null && hashParams.has("likec4")) {
+    hashParams.delete("likec4");
+    window.location.hash = hashParams.toString();
+    return;
+  }
+}
+const noopIsViewId = (value) => isString(value) && value.length > 0;
+function useViewIdFromHash({
+  initialViewId,
+  onReturnToInitial,
+  resetHashOnUnmount = true,
+  isViewId = noopIsViewId
+}) {
+  const [viewId, setStateViewId] = useState(() => {
+    const id = readViewId();
+    return isViewId(id) ? id : initialViewId;
+  });
+  const viewIdRef = useRef(viewId);
+  const prevIdRef = useRef();
+  if (viewIdRef.current !== viewId) {
+    prevIdRef.current = viewIdRef.current;
+    viewIdRef.current = viewId;
+  }
+  const onReturnRef = useRef(onReturnToInitial);
+  onReturnRef.current = onReturnToInitial;
+  useEffect(() => {
+    const tm = setTimeout(() => {
+      writeViewId(viewIdRef.current);
+    }, 300);
+    return () => clearTimeout(tm);
+  }, []);
+  useEffect(() => {
+    const onHashChange = (ev) => {
+      const newViewId = readViewIdFromUrl(ev.newURL);
+      if (newViewId === null) {
+        const oldViewId = readViewIdFromUrl(ev.oldURL);
+        if (oldViewId != null && onReturnRef.current) {
+          onReturnRef.current?.();
+        }
+        return;
+      }
+      if (isViewId(newViewId) && newViewId !== viewIdRef.current) {
+        setStateViewId(newViewId);
+      }
+    };
+    window.addEventListener("hashchange", onHashChange);
+    return () => {
+      window.removeEventListener("hashchange", onHashChange);
+      if (resetHashOnUnmount) {
+        writeViewId(null);
+      }
+    };
+  }, []);
+  const setViewId = useCallback((nextViewId) => {
+    if (isViewId(nextViewId) && nextViewId !== viewIdRef.current) {
+      writeViewId(nextViewId);
+    }
+  }, []);
+  return [viewId, setViewId];
+}
+
+const ResponsiveDiagram = /* @__PURE__ */ forwardRef(
+  ({ diagram, animate = false, className, diagramClassName, style, ...props }, ref) => {
+    const [measures, containerRef] = useMeasure();
+    const w = diagram.width, h = diagram.height;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "relative",
+          display: "flex",
+          aspectRatio: `${w} / ${h}`,
+          width: "100%",
+          height: "auto",
+          marginLeft: "auto",
+          marginRight: "auto",
+          padding: 0,
+          maxWidth: w,
+          boxSizing: "border-box",
+          ...style
+        },
+        className
+      },
+      /* @__PURE__ */ React.createElement("div", { ref: containerRef, style: { flex: "1 1 100%", overflow: "hidden" } }, measures && /* @__PURE__ */ React.createElement(
+        Diagram,
+        {
+          ref,
+          width: Math.floor(measures.width),
+          height: Math.floor(measures.height),
+          diagram,
+          className: diagramClassName,
+          animate,
+          ...props
+        }
+      ))
+    );
+  }
+);
+ResponsiveDiagram.displayName = "ResponsiveDiagram";
+
+const CrossIcon = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    ref,
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  )
+));
+const CloseButton = ({
+  style,
+  ...props
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ...props,
+    style: {
+      position: "absolute",
+      top: "1rem",
+      right: "1rem",
+      width: 24,
+      height: 24,
+      cursor: "pointer",
+      color: "var(--likec4-browser-close-btn-color, rgba(200,200,200,0.8))",
+      ...style
+    }
+  },
+  /* @__PURE__ */ React.createElement(CrossIcon, { width: 24, height: 24 })
+);
+
+const DefaultPadding = [30, 30, 30, 30];
+const StyleOverlay = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "var(--likec4-browser-overlay-bg, rgba(18,18,18,0.8))",
+  backdropFilter: "var(--likec4-browser-backdrop, blur(4px))",
+  zIndex: "var(--likec4-overlay-z-index, 100)",
+  display: "flex",
+  placeContent: "strech",
+  placeItems: "strech",
+  touchAction: "pan-x pan-y pinch-zoom",
+  boxSizing: "border-box",
+  margin: 0,
+  padding: 0,
+  border: "0 solid transparent"
+};
+const StyleContainer = {
+  margin: 0,
+  padding: 0,
+  flex: "1 1 100%",
+  overflow: "hidden"
+};
+function FullscreenDiagram({
+  diagram,
+  initialPosition,
+  padding,
+  style,
+  styleDiagram,
+  closeOnEsc = true,
+  closeOnOutsideClick,
+  onNodeClick,
+  onEdgeClick,
+  onStageClick,
+  onClose,
+  children,
+  ...props
+}) {
+  if (onStageClick && closeOnOutsideClick === true) {
+    throw new Error("onStageClick cannot be used with closeOnOutsideClick");
+  }
+  if (closeOnEsc || closeOnOutsideClick) {
+    invariant(onClose, "onClose is required when closeOnEsc or closeOnOutsideClick");
+  }
+  const overlayRef = useRef(null);
+  const [measures, containerRef] = useMeasure();
+  useEffect(() => {
+    const target = overlayRef.current;
+    if (!target) {
+      return;
+    }
+    disableBodyScroll(target);
+    return () => {
+      enableBodyScroll(target);
+    };
+  }, []);
+  useKeyboardEvent(
+    closeOnEsc && "Escape",
+    () => {
+      onClose?.();
+    },
+    [],
+    { eventOptions: { passive: true } }
+  );
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: overlayRef,
+      style: {
+        ...StyleOverlay,
+        ...style
+      },
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          ...StyleContainer
+        }
+      },
+      measures && /* @__PURE__ */ React.createElement(
+        Diagram,
+        {
+          animate: true,
+          pannable: true,
+          zoomable: true,
+          diagram,
+          width: measures.width,
+          height: measures.height,
+          initialPosition,
+          padding: padding ?? DefaultPadding,
+          style: styleDiagram,
+          onNodeClick,
+          onEdgeClick,
+          onStageClick: onStageClick ?? (closeOnOutsideClick ? onClose : void 0)
+        }
+      )
+    ),
+    children,
+    onClose && /* @__PURE__ */ React.createElement(CloseButton, { onClick: () => onClose() })
+  );
+}
+FullscreenDiagram.displayName = "FullscreenDiagram";
+
+const ContainerStyles = {
+  position: "absolute",
+  pointerEvents: "none",
+  userSelect: "none",
+  top: 0,
+  left: 0,
+  width: "100%",
+  margin: 0,
+  padding: "10px 20px 0 20px",
+  boxSizing: "border-box",
+  color: "rgb(241 245 249 / 95%)",
+  fontFamily: 'ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif',
+  fontSize: "16px",
+  lineHeight: "1.1",
+  fontWeight: "500",
+  textShadow: "4px 4px 5px rgb(17 17 17)"
+};
+function FullscreenDiagramTitle({ children, style, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        ...ContainerStyles,
+        ...style
+      },
+      ...props
+    },
+    children
+  );
+}
+FullscreenDiagramTitle.displayName = "FullscreenDiagramTitle";
+
+function FullscreenDiagramBrowser({
+  initialViewId,
+  views,
+  initialPosition,
+  onClose,
+  closeOnEsc,
+  closeOnOutsideClick,
+  ...props
+}) {
+  const viewsRef = useSyncedRef$1(views);
+  const [viewId, setViewId] = useViewIdFromHash({
+    initialViewId,
+    onReturnToInitial: () => {
+      onClose?.();
+    }
+  });
+  const diagram = views[viewId];
+  invariant(diagram, `View "${viewId}" not found in views`);
+  const onNodeClick = useCallback(
+    (node) => {
+      if (node.navigateTo && node.navigateTo in viewsRef.current) {
+        setViewId(node.navigateTo);
+      }
+    },
+    [viewsRef, setViewId]
+  );
+  return createPortal(
+    /* @__PURE__ */ React.createElement(
+      FullscreenDiagram,
+      {
+        diagram,
+        initialPosition,
+        closeOnEsc: true,
+        closeOnOutsideClick: true,
+        onNodeClick,
+        onClose,
+        ...props
+      },
+      /* @__PURE__ */ React.createElement(FullscreenDiagramTitle, null, diagram.title)
+    ),
+    document.body,
+    "FullscreenDiagramBrowser"
+  );
+}
+FullscreenDiagramBrowser.displayName = "FullscreenDiagramBrowser";
+
+const EmbeddedPadding = [20, 20, 20, 20];
+const defaultRenderDisclose = ({
+  views,
+  viewId,
+  initialPosition,
+  onClose
+}) => /* @__PURE__ */ React.createElement(
+  FullscreenDiagramBrowser,
+  {
+    views,
+    initialViewId: viewId,
+    initialPosition,
+    onClose
+  }
+);
+const EmbeddedDiagram = /* @__PURE__ */ forwardRef(
+  ({
+    animate = false,
+    views,
+    viewId,
+    padding,
+    noBrowser = false,
+    renderDisclose = defaultRenderDisclose,
+    ...props
+  }, ref) => {
+    const diagram = views[viewId];
+    invariant(diagram, `View "${viewId}" not found in views`);
+    const [initialPosition, setBrowserInitialPosition] = useState(
+      null
+    );
+    const isOpened = initialPosition !== null;
+    const openBrowser = (s) => {
+      const rect = s.container().getBoundingClientRect(), scale = s.scaleX(), embeddedX = s.x() - s.offsetX(), embeddedY = s.y() - s.offsetY(), offset = {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2
+      };
+      setBrowserInitialPosition({
+        x: Math.ceil(embeddedX + rect.x * scale + offset.x),
+        y: Math.ceil(embeddedY + rect.y * scale + offset.y),
+        scale
+      });
+    };
+    const onNodeEdgeClick = (_node, e) => {
+      const stage = e.target.getStage();
+      if (stage) {
+        e.cancelBubble = true;
+        openBrowser(stage);
+      }
+    };
+    const onClose = useCallback(() => setBrowserInitialPosition(null), []);
+    const enableBrowseClicks = !noBrowser && !isOpened;
+    return /* @__PURE__ */ React.createElement("div", { ...props }, /* @__PURE__ */ React.createElement(
+      ResponsiveDiagram,
+      {
+        ref,
+        animate,
+        zoomable: false,
+        pannable: false,
+        diagram,
+        padding: padding ?? EmbeddedPadding,
+        ...enableBrowseClicks && {
+          onStageClick: openBrowser,
+          onEdgeClick: onNodeEdgeClick,
+          onNodeClick: onNodeEdgeClick
+        }
+      }
+    ), isOpened && renderDisclose({ views, viewId, initialPosition, onClose }));
+  }
+);
+
+const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+function useDarkMode() {
+  return useMediaQuery(COLOR_SCHEME_QUERY) ?? true;
+}
+
+function useDiagramApi() {
+  const ref = useRef(null);
+  return useMemo(
+    () => [
+      ref,
+      {
+        get stage() {
+          return nonNullable(ref.current, "not mounted, use ref").stage;
+        },
+        get diagramView() {
+          return nonNullable(ref.current, "not mounted, use ref").diagramView;
+        },
+        get container() {
+          return nonNullable(ref.current, "not mounted, use ref").container;
+        },
+        resetStageZoom: (_immediate) => {
+          nonNullable(ref.current, "not mounted, use ref").resetStageZoom(_immediate);
+        },
+        centerOnNode: (node) => nonNullable(ref.current, "not mounted, use ref").centerOnNode(node),
+        centerAndFit: () => nonNullable(ref.current, "not mounted, use ref").centerAndFit()
+      }
+    ],
+    [ref]
+  );
+}
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class LikeC4 {
+  constructor(views) {
+    this.views = views;
+    __publicField(this, "isViewId", (value) => {
+      return value != null && typeof value === "string" && Object.prototype.hasOwnProperty.call(this.views, value);
+    });
+    /**
+     * React hook to use location hash for ViewId.
+     * When the element with this hook is mounted, hash is set to `...#likec4={initialViewId}`
+     * When element with this hook is unmounted, `likec4` is removed from hash if `resetHashOnUnmount` is true (default: true)
+     * You can also provide `onReturnToInitial` callback to handle back navigation (when user goes beyond the initialViewId)
+     */
+    __publicField(this, "useViewId", (props) => useViewIdFromHash({ ...props, isViewId: this.isViewId }));
+    __publicField(this, "Diagram", forwardRef(({ viewId, ...props }, ref) => {
+      const diagram = this.views[viewId];
+      if (!diagram) {
+        throw new Error(`View "${viewId}" not found in views`);
+      }
+      return /* @__PURE__ */ React.createElement(Diagram, { ref, diagram, ...props });
+    }));
+    __publicField(this, "Responsive", forwardRef(({ viewId, ...props }, ref) => {
+      const diagram = this.views[viewId];
+      if (!diagram) {
+        throw new Error(`View "${viewId}" not found in views`);
+      }
+      return /* @__PURE__ */ React.createElement(ResponsiveDiagram, { ref, diagram, ...props });
+    }));
+    __publicField(this, "Fullscreen", ({ viewId, ...props }) => {
+      const diagram = this.views[viewId];
+      if (!diagram) {
+        throw new Error(`View "${viewId}" not found in views`);
+      }
+      return /* @__PURE__ */ React.createElement(FullscreenDiagram, { diagram, ...props });
+    });
+    __publicField(this, "Embedded", forwardRef((props, ref) => {
+      return /* @__PURE__ */ React.createElement(EmbeddedDiagram, { ref, views: this.views, ...props });
+    }));
+    __publicField(this, "Browser", (props) => {
+      return /* @__PURE__ */ React.createElement(FullscreenDiagramBrowser, { views: this.views, ...props });
+    });
+  }
+  static create(views) {
+    if (Object.keys(views).length === 0) {
+      throw new Error("LikeC4: views must not be empty");
+    }
+    return new LikeC4(views);
+  }
+}
+
+export { Diagram, DiagramGesture, DiagramStateProvider, EmbeddedDiagram, FullscreenDiagram, FullscreenDiagramBrowser, FullscreenDiagramTitle, LikeC4, ResponsiveDiagram, useDarkMode, useDiagramApi, useHoveredEdge, useHoveredEdgeId, useHoveredNode, useHoveredNodeId, useSetHoveredEdge, useSetHoveredNode, useViewIdFromHash };