@likec4/diagram 1.0.0-rc.1 → 1.0.0

package/dist/LikeC4Diagram.d.ts

@@ -1,4 +1,4 @@
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
-export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, colorScheme, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showElementLinks, initialWidth, initialHeight, keepAspectRatio, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu }: LikeC4DiagramProps): JSX.Element;
+export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showElementLinks, initialWidth, initialHeight, keepAspectRatio, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu }: LikeC4DiagramProps): JSX.Element;

package/dist/LikeC4Diagram.props.d.ts

@@ -5,7 +5,9 @@ import { MouseEvent as ReactMouseEvent } from 'react';
 import { DiagramEdge, DiagramNode, DiagramView, ElementShape, Fqn, NonEmptyArray, ThemeColor, ViewID } from '@likec4/core';
 
 export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>;
-export type OnNavigateTo = (to: ViewID, event: ReactMouseEvent, element: DiagramNodeWithNavigate, xynode: XYFlowNode) => void;
+export type OnNavigateTo = {
+    (to: ViewID, event: ReactMouseEvent, element: DiagramNodeWithNavigate, xynode: XYFlowNode): void;
+};
 export type OnNodeClick = (event: {
     element: DiagramNode;
     xynode: XYFlowNode;
@@ -36,7 +38,9 @@ export type Change = Changes.ChangeColor | Changes.ChangeShape;
 export type ChangeEvent = {
     changes: NonEmptyArray<Change>;
 };
-export type OnChange = (event: ChangeEvent) => void;
+export type OnChange = {
+    (event: ChangeEvent): void;
+};
 export type LikeC4ColorScheme = 'light' | 'dark';
 export interface LikeC4DiagramProperties {
     view: DiagramView;
@@ -47,7 +51,6 @@ export interface LikeC4DiagramProperties {
      *
      * @example 'light' | 'dark'
      */
-    colorScheme?: LikeC4ColorScheme | undefined;
     /**
      * Show/hide controls menu
      * @default false

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,4 +1,4 @@
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
 
-export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'keepAspectRatio' | 'className' | 'colorScheme' | 'fitView' | 'fitViewPadding' | 'background' | 'initialWidth' | 'initialHeight'>;
+export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'keepAspectRatio' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'initialWidth' | 'initialHeight'>;
 export declare function StaticLikeC4Diagram({ view, fitView, fitViewPadding, background, ...rest }: StaticLikeC4DiagramProps): JSX.Element;

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 
-export { EmbeddedLikeC4Diagram } from './EmbeddedLikeC4Diagram';
 export { LikeC4Diagram } from './LikeC4Diagram';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
-export type * from './EmbeddedLikeC4Diagram';
+export * from './hooks';
 export type * from './LikeC4Diagram';
 export type * from './LikeC4Diagram.props';
 export type * from './StaticLikeC4Diagram';

package/dist/index.mjs

@@ -2,30 +2,19 @@ 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 { invariant, isAncestor, nonNullable, nonexhaustive, defaultTheme, ElementShapes } from "@likec4/core";
-import { createTheme, MantineContext, MantineProvider, Box, Stack, Text, TooltipGroup, Divider, Flex, Tooltip, ColorSwatch, CheckIcon, rem, Select, Card, ActionIcon, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Group, Anchor, CopyButton, Button, useMantineColorScheme, ModalRoot, ModalOverlay, ModalContent, ModalBody, Title, CloseButton } from "@mantine/core";
-import { useFirstMountState, useCustomCompareEffect, useDebouncedState, useRafEffect, useDebouncedEffect, useToggle } from "@react-hookz/web";
-import { shallowEqual, deepEqual } from "fast-equals";
 import { createContext, memo, useState, forwardRef, useCallback, useMemo, useEffect, useRef, useContext, useLayoutEffect, useId } from "react";
 import { createWithEqualityFn, useStoreWithEqualityFn } from "zustand/traditional";
 import { shallow } from "zustand/shallow";
 import { createPortal } from "react-dom";
-import { AnimatePresence, motion } from "framer-motion";
-import { isNullish, keys, hasAtLeast, takeWhile, clamp as clamp$1, isNumber } from "remeda";
+import { MantineContext, Box, 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 { invariant, isAncestor, nonNullable, nonexhaustive, defaultTheme, ElementShapes } from "@likec4/core";
 import { DEV } from "esm-env";
+import { shallowEqual, deepEqual } from "fast-equals";
 import { subscribeWithSelector, devtools } from "zustand/middleware";
-var rootClassName = "likec4-diagram-root", modalContent = "_1yqpph0", modalBody = "_1yqpph1", modalHeader = "_1yqpph2", modalCloseButtonBox = "_1yqpph3", modalCloseButton = "_1yqpph4";
-const noop$1 = () => {
-};
-function useUpdateEffect(callback, deps, equalityFn, effectHook) {
-  const isFirstMount = useFirstMountState();
-  useCustomCompareEffect(
-    isFirstMount ? noop$1 : callback,
-    deps,
-    equalityFn ?? shallowEqual,
-    effectHook
-  );
-}
+import { useFirstMountState, useCustomCompareEffect, useDebouncedState, useRafEffect, useDebouncedEffect } from "@react-hookz/web";
+import { AnimatePresence, motion } from "framer-motion";
+import { isNullish, keys, hasAtLeast, takeWhile, clamp as clamp$1, isNumber } from "remeda";
+var rootClassName = "likec4-diagram-root";
 function cc(names) {
   if (typeof names == "string" || typeof names == "number")
     return "" + names;
@@ -38,7 +27,7 @@ function cc(names) {
       names[k] && (out += (out && " ") + k);
   return out;
 }
-var noop = { value: () => {
+var noop$1 = { value: () => {
 } };
 function dispatch() {
   for (var i = 0, n = arguments.length, _ = {}, t; i < n; ++i) {
@@ -109,7 +98,7 @@ function get$2(type, name) {
 function set$1(type, name, callback) {
   for (var i = 0, n = type.length; i < n; ++i)
     if (type[i].name === name) {
-      type[i] = noop, type = type.slice(0, i).concat(type.slice(i + 1));
+      type[i] = noop$1, type = type.slice(0, i).concat(type.slice(i + 1));
       break;
     }
   return callback != null && type.push({ name, value: callback }), type;
@@ -2248,7 +2237,8 @@ const errorMessages = {
   error008: (handleType, { id: id2, sourceHandle, targetHandle }) => `Couldn't create edge for ${handleType} handle id: "${sourceHandle && targetHandle}", edge id: ${id2}.`,
   error010: () => "Handle: No node id found. Make sure to only use a Handle inside a custom Node.",
   error011: (edgeType) => `Edge type "${edgeType}" not found. Using fallback type "default".`,
-  error012: (id2) => `Node with id "${id2}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`
+  error012: (id2) => `Node with id "${id2}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,
+  error013: (lib = "react") => `It seems that you haven't loaded the styles. Please import '@xyflow/${lib}/dist/style.css' or base.css to make sure everything is working properly.`
 }, infiniteExtent = [
   [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
   [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]
@@ -2887,37 +2877,27 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
   if (updates.forEach((update) => {
     const node = nodeLookup.get(update.id);
     if (node != null && node.hidden)
-      nodeLookup.set(node.id, {
-        ...node,
-        internals: {
-          ...node.internals,
-          handleBounds: void 0
-        }
-      }), updatedInternals = !0;
+      node.internals = {
+        ...node.internals,
+        handleBounds: void 0
+      }, updatedInternals = !0;
     else if (node) {
       const dimensions = getDimensions(update.nodeElement), dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
-      if (!!(dimensions.width && dimensions.height && (dimensionChanged || !node.internals.handleBounds || update.force))) {
-        const newNode = {
-          ...node,
-          measured: dimensions,
-          internals: {
-            ...node.internals,
-            handleBounds: {
-              source: getHandleBounds(".source", update.nodeElement, zoom2, node.origin || nodeOrigin),
-              target: getHandleBounds(".target", update.nodeElement, zoom2, node.origin || nodeOrigin)
-            }
-          }
-        };
-        nodeLookup.set(node.id, newNode), updatedInternals = !0, dimensionChanged && (changes.push({
-          id: newNode.id,
-          type: "dimensions",
-          dimensions
-        }), newNode.expandParent && newNode.parentId && parentExpandChildren.push({
-          id: newNode.id,
-          parentId: newNode.parentId,
-          rect: nodeToRect(newNode, newNode.origin || nodeOrigin)
-        }));
-      }
+      !!(dimensions.width && dimensions.height && (dimensionChanged || !node.internals.handleBounds || update.force)) && (node.measured = dimensions, node.internals = {
+        ...node.internals,
+        handleBounds: {
+          source: getHandleBounds(".source", update.nodeElement, zoom2, node.origin || nodeOrigin),
+          target: getHandleBounds(".target", update.nodeElement, zoom2, node.origin || nodeOrigin)
+        }
+      }, updatedInternals = !0, dimensionChanged && (changes.push({
+        id: node.id,
+        type: "dimensions",
+        dimensions
+      }), node.expandParent && node.parentId && parentExpandChildren.push({
+        id: node.id,
+        parentId: node.parentId,
+        rect: nodeToRect(node, nodeOrigin)
+      })));
     }
   }), parentExpandChildren.length > 0) {
     const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
@@ -5218,11 +5198,15 @@ function ConnectionLineWrapper({ containerStyle: containerStyle2, style: style2,
 }
 const emptyTypes = {};
 function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes = emptyTypes) {
-  useRef(0), useStoreApi(), useEffect(() => {
+  useRef(nodeOrEdgeTypes), useStoreApi(), useEffect(() => {
   }, [nodeOrEdgeTypes]);
 }
+function useStylesLoadedWarning() {
+  useStoreApi(), useRef(!1), useEffect(() => {
+  }, []);
+}
 function GraphViewComponent({ nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, edgeUpdaterRadius, onEdgeUpdateStart, onEdgeUpdateEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId, viewport, onViewportChange }) {
-  return useNodeOrEdgeTypesWarning(nodeTypes2), useNodeOrEdgeTypesWarning(edgeTypes2), useOnInitHandler(onInit), useViewportSync(viewport), jsx(FlowRenderer, { onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, onSelectionContextMenu, preventScrolling, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes2, onEdgeClick, onEdgeDoubleClick, onEdgeUpdate, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes2, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) });
+  return useNodeOrEdgeTypesWarning(nodeTypes2), useNodeOrEdgeTypesWarning(edgeTypes2), useStylesLoadedWarning(), useOnInitHandler(onInit), useViewportSync(viewport), jsx(FlowRenderer, { onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, onSelectionContextMenu, preventScrolling, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes2, onEdgeClick, onEdgeDoubleClick, onEdgeUpdate, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes2, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) });
 }
 GraphViewComponent.displayName = "GraphView";
 const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView2 } = {}) => {
@@ -5484,11 +5468,11 @@ const wrapperStyle = {
   position: "relative",
   zIndex: 0
 };
-function ReactFlow$1({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = !1, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesUpdatable, elementsSelectable = !0, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = !0, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, children: children2, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView: fitView2, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = !1, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug, ...rest }, ref) {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = !1, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesUpdatable, elementsSelectable = !0, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = !0, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, children: children2, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView: fitView2, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = !1, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug, ...rest }, ref) {
   const rfId = id2 || "1", colorModeClassName = useColorModeClass(colorMode);
   return jsx("div", { ...rest, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), "data-testid": "rf__wrapper", id: id2, children: jsxs(Wrapper, { nodes, edges, width, height, fitView: fitView2, children: [jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeOrigin, nodeExtent, viewport, onViewportChange }), jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, nodesConnectable, nodesFocusable, edgesFocusable, edgesUpdatable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView: fitView2, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, onBeforeDelete, debug }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
-var index = fixedForwardRef(ReactFlow$1);
+var index = fixedForwardRef(ReactFlow);
 const selector$8 = (s) => {
   var _a;
   return (_a = s.domNode) == null ? void 0 : _a.querySelector(".react-flow__edgelabel-renderer");
@@ -5875,33 +5859,33 @@ function clsx() {
   return n;
 }
 var cssReactFlow = "_2h8g8h0", cssDisablePan = "_2h8g8h1", cssTransparentBg = "_2h8g8h2", cssNoControls = "_2h8g8h3";
-const theme = createTheme({
-  primaryColor: "indigo",
-  cursorType: "pointer",
-  headings: {
-    fontWeight: "500",
-    sizes: {
-      h1: {
-        // fontSize: '2rem',
-        fontWeight: "600"
-      },
-      h2: {
-        // fontSize: '1.85rem',
-      }
-    }
-  }
-});
-function EnsureMantine({ colorScheme, children: children2 }) {
-  return useContext(MantineContext) ? /* @__PURE__ */ jsx(Fragment, { children: children2 }) : /* @__PURE__ */ jsx(
-    MantineProvider,
-    {
-      ...colorScheme && {
-        forceColorScheme: colorScheme
-      },
-      theme,
-      defaultColorScheme: "auto",
-      children: children2
-    }
+function EnsureMantine({ children: children2 }) {
+  if (!useContext(MantineContext))
+    throw new Error("LikeC4Diagram must be a child of MantineProvider");
+  return /* @__PURE__ */ jsx(Fragment, { children: children2 });
+}
+function useSetState(initialState) {
+  const [state, _setState] = useState(initialState), setState = useCallback(
+    (statePartial) => _setState((current) => {
+      const next = {
+        ...current,
+        ...typeof statePartial == "function" ? statePartial(current) : statePartial
+      };
+      return shallowEqual(current, next) ? current : next;
+    }),
+    []
+  );
+  return [state, setState];
+}
+const noop = () => {
+};
+function useUpdateEffect(callback, deps, equalityFn, effectHook) {
+  const isFirstMount = useFirstMountState();
+  useCustomCompareEffect(
+    isFirstMount ? noop : callback,
+    deps,
+    equalityFn ?? shallowEqual,
+    effectHook
   );
 }
 function createMap() {
@@ -7019,6 +7003,35 @@ class Row {
     pair !== void 0 && this.insertRow(row, pair.second);
   }
 }
+function useDiagramState(selector2, equalityFn) {
+  const store = useContext(DiagramContext);
+  if (store === null)
+    throw new Error("useDiagramStore could be used only inside DiagramContext");
+  return useStoreWithEqualityFn(store, selector2, equalityFn ?? shallowEqual);
+}
+function useDiagramStoreApi() {
+  const store = useContext(DiagramContext);
+  if (store === null)
+    throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
+  return useMemo(
+    () => ({
+      getState: store.getState,
+      setState: store.setState,
+      subscribe: store.subscribe
+    }),
+    [store]
+  );
+}
+function WhenInitialized({ children: children2 }) {
+  const diagramApi = useDiagramStoreApi(), [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized);
+  return useEffect(() => {
+    if (!isInitialized)
+      return diagramApi.subscribe(
+        (s) => s.initialized,
+        setIsInitialized
+      );
+  }, [isInitialized]), isInitialized ? /* @__PURE__ */ jsx(Fragment, { children: children2 }) : null;
+}
 const useXYFlow = useReactFlow, useXYNodesData = useNodesData;
 function useXYStore(selector2, equalityFn) {
   return useStore(
@@ -7380,35 +7393,6 @@ function DiagramContextProvider({ children: children2, view, ...props }) {
     [props]
   ), /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children: children2 });
 }
-function useDiagramState(selector2, equalityFn) {
-  const store = useContext(DiagramContext);
-  if (store === null)
-    throw new Error("useDiagramStore could be used only inside DiagramContext");
-  return useStoreWithEqualityFn(store, selector2, equalityFn ?? shallowEqual);
-}
-function useDiagramStoreApi() {
-  const store = useContext(DiagramContext);
-  if (store === null)
-    throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
-  return useMemo(
-    () => ({
-      getState: store.getState,
-      setState: store.setState,
-      subscribe: store.subscribe
-    }),
-    [store]
-  );
-}
-function WhenInitialized({ children: children2 }) {
-  const diagramApi = useDiagramStoreApi(), [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized);
-  return useEffect(() => {
-    if (!isInitialized)
-      return diagramApi.subscribe(
-        (s) => s.initialized,
-        setIsInitialized
-      );
-  }, [isInitialized]), isInitialized ? /* @__PURE__ */ jsx(Fragment, { children: children2 }) : null;
-}
 var wrapper = "_14qhjro0";
 function KeepAspectRatio({
   children: children2,
@@ -7448,7 +7432,7 @@ const {
 }));
 function NodeOptions({ selectedNodeIds }) {
   const diagramApi = useDiagramStoreApi(), nodes = useXYNodesData(selectedNodeIds);
-  if (useXYFlow(), !hasAtLeast(nodes, 1))
+  if (!hasAtLeast(nodes, 1))
     return null;
   const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes;
   return /* @__PURE__ */ jsxs(Stack, { children: [
@@ -7595,7 +7579,7 @@ var panel = "_1lmzt1h0";
 const OptionsPanelMemo = /* @__PURE__ */ memo(function() {
   const [selectedNodes, setSelectedNodes] = useState([]);
   return useOnSelectionChange({
-    onChange: ({ nodes, edges }) => {
+    onChange: ({ nodes }) => {
       const next = nodes.map((n) => n.id).sort();
       setSelectedNodes((prev) => shallowEqual(prev, next) ? prev : next);
     }
@@ -7751,7 +7735,7 @@ function FitViewOnViewportResize({ diagramApi }) {
 }
 const diagramChangeId = (s) => s.view.id + "_" + s.view.autoLayout + "_" + s.fitViewPadding;
 function FitViewOnDiagramChanges() {
-  const diagramApi = useDiagramStoreApi(), [viewportMoved, setViewportMoved] = useState(diagramApi.getState().viewportChanged), [processedChangeId, setProcessed] = useState(diagramChangeId(diagramApi.getState())), [pendingChangeId, setPending] = useDebouncedState(processedChangeId, 50), isReady = useNodesInitialized({
+  const diagramApi = useDiagramStoreApi(), [viewportMoved, setViewportMoved] = useState(diagramApi.getState().viewportChanged), [processedChangeId, setProcessed] = useState(diagramChangeId(diagramApi.getState())), [pendingChangeId, setPending] = useDebouncedState(processedChangeId, 100), isReady = useNodesInitialized({
     includeHiddenNodes: !0
   });
   return useEffect(
@@ -7780,33 +7764,7 @@ function toDomPrecision(v) {
   return v === null ? 0.01 : Math.round(v * 100) / 100;
 }
 const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is(a.parentId, b.parentId), SyncWithDiagram = memo(() => {
-  const xyflow = useXYFlow(), xyflowApi = useXYStoreApi(), diagramStoreApi = useDiagramStoreApi(), correctPosition = useCallback((lastOnNavigate, nodes) => {
-    const elFrom = lastOnNavigate.element, elTo = nodes.find((n) => n.id === elFrom.id);
-    if (elTo) {
-      const centerFrom = lastOnNavigate.elementCenterScreenPosition, centerTo = xyflow.flowToScreenPosition({
-        x: elTo.position[0] + elTo.width / 2,
-        y: elTo.position[1] + elTo.height / 2
-      }), diff = {
-        x: toDomPrecision(centerFrom.x - centerTo.x),
-        y: toDomPrecision(centerFrom.y - centerTo.y)
-      };
-      requestAnimationFrame(() => {
-        xyflowApi.getState().panBy(diff);
-      });
-    }
-    queueMicrotask(() => {
-      diagramStoreApi.setState(
-        {
-          lastOnNavigate: {
-            ...lastOnNavigate,
-            positionCorrected: !0
-          }
-        },
-        !1,
-        "positionCorrected"
-      );
-    });
-  }, [diagramStoreApi, xyflowApi]);
+  const xyflow = useXYFlow(), xyflowApi = useXYStoreApi(), diagramStoreApi = useDiagramStoreApi();
   return useEffect(() => diagramStoreApi.subscribe(
     // selector
     (state) => ({
@@ -7838,15 +7796,22 @@ const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is
       ), (lastOnNavigate == null ? void 0 : lastOnNavigate.toView) === viewId && !lastOnNavigate.positionCorrected) {
         const elFrom = lastOnNavigate.element, elTo = nodes.find((n) => n.id === elFrom.id);
         if (elTo) {
-          const centerFrom = lastOnNavigate.elementCenterScreenPosition, centerTo = xyflow.flowToScreenPosition({
-            x: elTo.position[0] + elTo.width / 2,
-            y: elTo.position[1] + elTo.height / 2
-          }), diff = {
-            x: toDomPrecision(centerFrom.x - centerTo.x),
-            y: toDomPrecision(centerFrom.y - centerTo.y)
-          };
+          const centerFrom = lastOnNavigate.elementCenterScreenPosition, nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height);
           requestAnimationFrame(() => {
             requestAnimationFrame(() => {
+              const v = xyflow.getViewport();
+              nextZoom < v.zoom && xyflow.setViewport({
+                x: v.x,
+                y: v.y,
+                zoom: nextZoom
+              });
+              const centerTo = xyflow.flowToScreenPosition({
+                x: elTo.position[0] + elTo.width / 2,
+                y: elTo.position[1] + elTo.height / 2
+              }), diff = {
+                x: toDomPrecision(centerFrom.x - centerTo.x),
+                y: toDomPrecision(centerFrom.y - centerTo.y)
+              };
               xyflowApi.getState().panBy(diff);
             });
           });
@@ -7866,7 +7831,7 @@ const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is
     {
       equalityFn: shallowEqual
     }
-  ), [xyflow, xyflowApi, diagramStoreApi, correctPosition]), null;
+  ), [xyflow, xyflowApi, diagramStoreApi]), null;
 });
 function getVarName(variable) {
   var matches = variable.match(/^var\((.*)\)$/);
@@ -7978,8 +7943,8 @@ function bezierPath(bezierSpline) {
 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({
   id: id2,
   data,
-  selected: selected2,
-  markerEnd,
+  selected: _selected,
+  markerEnd: _markerEnd,
   style: style2,
   source,
   target,
@@ -7989,8 +7954,7 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
   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,
-    controlPoints
+    edge
   } = data, color2 = edge.color ?? "gray", isHovered = useDiagramState((s) => s.hoveredEdgeId === id2), line = edge.line ?? "dashed", isDotted = line === "dotted", isDashed = isDotted || line === "dashed";
   let strokeDasharray;
   isDotted ? strokeDasharray = "1,8" : isDashed && (strokeDasharray = "8,10");
@@ -8702,8 +8666,6 @@ const compoundColor = (color2, depth) => toHex(
 var container = "_1b6tkn2", indicator = "_1b6tkn4", fillElementFill = "_1b6tkn5", fillMixStroke = "_1b6tkn7", title = "_1b6tkn8", description = "_1b6tkn9", technology = "_1b6tkna", cssElement = "_1b6tknb", iconMaxH = "var(--_1b6tknc)", elementIcon = "_1b6tknd", cssShapeSvg = "_1b6tkng", cssNavigateBtn = "_1b6tknh";
 function ElementIcon({
   node,
-  maxWidth,
-  paddingX = 32,
   paddingY = 32
 }) {
   if (!node.icon)
@@ -8712,7 +8674,7 @@ function ElementIcon({
   if (!firstLabel)
     return null;
   const firstLabelY = Math.floor(firstLabel.pt[1] - firstLabel.fontSize * 1.25), maxIconHeight = Math.floor(firstLabelY - paddingY - 16);
-  return maxWidth ?? node.width - paddingX * 2, /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx(elementIcon, "likec4-element-icon"),
@@ -8767,7 +8729,7 @@ function ElementLink({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(HoverCardDropdown, { p: "xs", children: /* @__PURE__ */ jsx(Stack, { onClick: (e) => e.stopPropagation(), gap: "xs", children: element.links.map((link, i) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", gap: "sm", children: [
+        /* @__PURE__ */ jsx(HoverCardDropdown, { onClick: (e) => e.stopPropagation(), p: "xs", children: /* @__PURE__ */ jsx(Stack, { gap: "xs", children: element.links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", gap: "sm", children: [
           /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "clip", maxWidth: clamp$1(element.width, { min: 200, max: 400 }) }, children: /* @__PURE__ */ jsx(Anchor, { href: link, target: "_blank", fz: "13", truncate: "end", children: link }) }),
           /* @__PURE__ */ jsx(CopyButton, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Button, { size: "compact-xs", fz: "12", onClick: copy, color: copied ? "teal" : "gray", children: copied ? "Copied" : "Copy" }) })
         ] }, link)) }) })
@@ -9173,7 +9135,7 @@ function useXYFlowEvents() {
     }
   }), [diagramApi, xyflowApi]);
 }
-const ReactFlow = index, nodeTypes = {
+const nodeTypes = {
   element: ElementNode,
   compound: CompoundNodeMemo
 }, edgeTypes = {
@@ -9210,7 +9172,7 @@ function XYFlowWrapper({
     ...editor
   } = useDiagramState(selector), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents(), isBgWithPattern = background !== "transparent" && background !== "solid", { colorScheme } = useMantineColorScheme(), colorMode = colorScheme !== "auto" ? colorScheme : void 0;
   return /* @__PURE__ */ jsxs(
-    ReactFlow,
+    index,
     {
       className,
       style: style2,
@@ -9296,7 +9258,6 @@ function LikeC4Diagram({
   className,
   fitView: fitView2 = !0,
   fitViewPadding = 0,
-  colorScheme,
   readonly = !0,
   pannable = !0,
   zoomable = !0,
@@ -9331,7 +9292,7 @@ function LikeC4Diagram({
       initialHeight: initialHeight ?? view.height
     };
   }
-  return /* @__PURE__ */ jsx(EnsureMantine, { colorScheme, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(
     ReactFlowProvider,
     {
       fitView: fitView2,
@@ -9419,67 +9380,9 @@ function StaticLikeC4Diagram({
     }
   );
 }
-function EmbeddedLikeC4DiagramCmp({
-  viewId,
-  views,
-  colorScheme
-}) {
-  const [isOpened, toggleOpened] = useToggle(!1), [browserViewId, setBrowserViewId] = useState(viewId), view = views[viewId];
-  invariant(view, `View with id ${viewId} not found`);
-  const browserView = views[browserViewId];
-  invariant(browserView, `View with id ${browserViewId} not found`);
-  const closeBrowser = () => {
-    toggleOpened(!1), setBrowserViewId(viewId);
-  };
-  return useUpdateEffect(closeBrowser, [viewId]), /* @__PURE__ */ jsxs(EnsureMantine, { colorScheme, children: [
-    /* @__PURE__ */ jsx(
-      KeepAspectRatio,
-      {
-        enabled: !0,
-        height: view.height,
-        width: view.width,
-        onClick: (e) => {
-          e.stopPropagation(), toggleOpened(!0);
-        },
-        children: /* @__PURE__ */ jsx(
-          StaticLikeC4Diagram,
-          {
-            colorScheme,
-            view,
-            fitView: !0,
-            fitViewPadding: 0.01,
-            background: "transparent",
-            keepAspectRatio: !1
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs(ModalRoot, { opened: isOpened, onClose: closeBrowser, fullScreen: !0, children: [
-      /* @__PURE__ */ jsx(ModalOverlay, { blur: 16 }),
-      /* @__PURE__ */ jsx(ModalContent, { className: modalContent, children: /* @__PURE__ */ jsxs(ModalBody, { className: modalBody, children: [
-        /* @__PURE__ */ jsx(Box, { className: modalHeader, children: /* @__PURE__ */ jsx(Title, { order: 4, children: browserView.title || browserView.id }) }),
-        isOpened && /* @__PURE__ */ jsx(
-          LikeC4Diagram,
-          {
-            readonly: !0,
-            view: browserView,
-            colorScheme,
-            background: "transparent",
-            fitViewPadding: 0.09,
-            onCanvasDblClick: closeBrowser,
-            onNavigateTo: (to) => {
-              setBrowserViewId(to);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { className: modalCloseButtonBox, children: /* @__PURE__ */ jsx(CloseButton, { className: modalCloseButton, onClick: closeBrowser }) })
-      ] }) })
-    ] })
-  ] });
-}
-const EmbeddedLikeC4Diagram = memo(EmbeddedLikeC4DiagramCmp, shallowEqual);
 export {
-  EmbeddedLikeC4Diagram,
   LikeC4Diagram,
-  StaticLikeC4Diagram
+  StaticLikeC4Diagram,
+  useSetState,
+  useUpdateEffect
 };

package/dist/mantine/EnsureMantine.d.ts

@@ -1,6 +1,5 @@
-import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
 import { PropsWithChildren } from 'react';
 
-type EnsureMantineProps = PropsWithChildren<Pick<LikeC4DiagramProperties, 'colorScheme'>>;
-export declare function EnsureMantine({ colorScheme, children }: EnsureMantineProps): JSX.Element;
+type EnsureMantineProps = PropsWithChildren<{}>;
+export declare function EnsureMantine({ children }: EnsureMantineProps): JSX.Element;
 export {};