@likec4/diagram 1.28.0 → 1.29.0

package/dist/LikeC4CustomColors.js

@@ -2,7 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import '@likec4/core';
 import { useMantineStyleNonce } from '@mantine/core';
 import { deepEqual } from 'fast-equals';
-import { memo } from 'react';
+import { r as reactExports } from './_virtual/index.js';
 import { entries } from 'remeda';
 
 function toStyle(name, colors) {
@@ -24,7 +24,7 @@ function toStyle(name, colors) {
 }
   `;
 }
-const LikeC4CustomColors = memo(({ customColors }) => {
+const LikeC4CustomColors = reactExports.memo(({ customColors }) => {
   const styles = entries(customColors).map(([name, color]) => toStyle(name, color)).join("\n");
   const nonce = useMantineStyleNonce()?.();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: styles }, nonce }) });

package/dist/LikeC4Diagram.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ReactFlowProvider } from '@xyflow/react';
-import { useRef } from 'react';
+import { r as reactExports } from './_virtual/index.js';
 import { isEmpty } from 'remeda';
 import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout.js';
 import { ReduceGraphicsContext } from './context/ReduceGraphics.js';
@@ -58,7 +58,7 @@ function LikeC4Diagram({
   children
 }) {
   const hasLikec4model = !!useLikeC4Model();
-  const initialRef = useRef(null);
+  const initialRef = reactExports.useRef(null);
   const isDynamicView = view.__ === "dynamic";
   if (initialRef.current == null) {
     initialRef.current = {

package/dist/LikeC4ModelProvider.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import 'react';
+import './_virtual/index.js';
 import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext.js';
 
 function LikeC4ModelProvider({

package/dist/_virtual/index.js

@@ -0,0 +1,5 @@
+import { __require as requireReact } from '../node_modules/.pnpm/react@19.0.0/node_modules/react/index.js';
+
+var reactExports = requireReact();
+
+export { reactExports as r };

package/dist/_virtual/index2.js

@@ -0,0 +1,3 @@
+var react = {exports: {}};
+
+export { react as __module };

package/dist/_virtual/react.production.js

@@ -0,0 +1,3 @@
+var react_production = {};
+
+export { react_production as __exports };

package/dist/base/BaseXYFlow.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { useCallbackRef } from '@mantine/hooks';
 import { ReactFlow, useStore } from '@xyflow/react';
-import { useMemo, Fragment } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow.js';
 import { stopPropagation } from '../utils/xyflow.js';
@@ -82,7 +82,7 @@ const BaseXYFlow = ({
       maxZoom: zoomable ? MaxZoom : 1,
       minZoom: zoomable ? MinZoom : 1,
       fitView,
-      fitViewOptions: useMemo(() => ({
+      fitViewOptions: reactExports.useMemo(() => ({
         minZoom: MinZoom,
         maxZoom: 1,
         padding: fitViewPadding,
@@ -103,8 +103,8 @@ const BaseXYFlow = ({
       edgesFocusable: false,
       nodesDraggable,
       nodeDragThreshold: 4,
-      nodeClickDistance: 1.9,
-      paneClickDistance: 1.9,
+      nodeClickDistance: 3,
+      paneClickDistance: 3,
       elevateNodesOnSelect: false,
       selectNodesOnDrag: false,
       onNodesChange,
@@ -156,7 +156,7 @@ const BaseXYFlow = ({
       onEdgeDoubleClick: stopPropagation,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(reactExports.Fragment, { children: [
           isBgWithPattern && /* @__PURE__ */ jsx(Background, { background }),
           onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize })
         ] }, "_internals"),

package/dist/base/primitives/compound/CompoundActionButton.js

@@ -4,7 +4,7 @@ import { actionBtn } from '@likec4/styles/recipes';
 import { Box, ActionIcon } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { IconZoomScan } from '@tabler/icons-react';
-import { m } from 'framer-motion';
+import * as m from 'motion/react-m';
 import { stopPropagation } from '../../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
 

package/dist/base/primitives/compound/CompoundDetailsButton.js

@@ -4,7 +4,7 @@ import { actionBtn } from '@likec4/styles/recipes';
 import { Box, ActionIcon } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { IconId } from '@tabler/icons-react';
-import { m } from 'framer-motion';
+import * as m from 'motion/react-m';
 import { stopPropagation } from '../../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
 

package/dist/base/primitives/compound/CompoundNodeContainer.d.ts

@@ -1,5 +1,5 @@
 import { DiagramNode } from '@likec4/core';
-import { HTMLMotionProps } from 'framer-motion';
+import { HTMLMotionProps } from 'motion/react';
 import { PropsWithChildren } from 'react';
 import { NodeProps } from '../../types';
 type RequiredData = Pick<DiagramNode, 'color' | 'depth' | 'style'>;

package/dist/base/primitives/compound/CompoundNodeContainer.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
-import { m } from 'framer-motion';
-import 'react';
+import { m } from 'motion/react';
+import '../../../_virtual/index.js';
 import { isNumber, clamp } from 'remeda';
 import { compound, borderOpacityPercent, borderRadius, borderWidth, compoundOpacity } from './CompoundNodeContainer.css.js';
 import { useIsReducedGraphics } from '../../../context/ReduceGraphics.js';

package/dist/base/primitives/customEdge.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent, NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { Base, EdgeProps } from '../types';
-import { Position } from '@xyflow/react';
+import { Position } from '@xyflow/system';
 export declare const edgePropsEqual: <P extends Record<string, unknown> = Base.EdgeData>(prev: EdgeProps<P>, next: EdgeProps<P>) => boolean;
 export declare function customEdge<P extends Record<string, unknown> = Base.NodeData>(Edge: FunctionComponent<EdgeProps<P>>): NamedExoticComponent<{
     id: string;

package/dist/base/primitives/customEdge.js

@@ -1,12 +1,12 @@
 import { deepEqual } from 'fast-equals';
-import { memo } from 'react';
+import { r as reactExports } from '../../_virtual/index.js';
 
 const isSame = (a, b) => {
   return Math.abs(a - b) < 2.5;
 };
-const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data);
+const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.animated ?? false, next.animated ?? false) && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data);
 function customEdge(Edge) {
-  return memo(Edge, edgePropsEqual);
+  return reactExports.memo(Edge, edgePropsEqual);
 }
 
 export { customEdge, edgePropsEqual };

package/dist/base/primitives/customNode.js

@@ -1,9 +1,9 @@
 import { deepEqual } from 'fast-equals';
-import { memo } from 'react';
+import { r as reactExports } from '../../_virtual/index.js';
 
 const nodePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(prev.data, next.data);
 function customNode(Node) {
-  return memo(Node, nodePropsEqual);
+  return reactExports.memo(Node, nodePropsEqual);
 }
 
 export { customNode, nodePropsEqual };

package/dist/base/primitives/edge/EdgeContainer.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { invariant } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
-import 'react';
+import '../../../_virtual/index.js';
 import { edgeVars, edgeContainer } from './edge.css.js';
 
 function EdgeContainer({

package/dist/base/primitives/edge/EdgeLabel.css.d.ts

@@ -16,6 +16,9 @@ export declare const labelsva: SlotRecipeRuntimeFn<"root" | "stepNumber" | "labe
                 padding: "0px";
             };
             labelContents: {
+                display: "flex";
+                flexDirection: "column";
+                alignItems: "center";
                 padding: "2px 5px 4px 0px";
             };
             labelText: {

package/dist/base/primitives/edge/EdgeLabel.css.js

@@ -115,6 +115,9 @@ const labelsva = sva({
           padding: "0px"
         },
         labelContents: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
           padding: "2px 5px 4px 0px"
         },
         labelText: {

package/dist/base/primitives/edge/EdgeLabel.d.ts

@@ -1,5 +1,5 @@
 import { DiagramEdge } from '@likec4/core';
-import { BoxProps } from '@mantine/core';
+import { BoxProps } from '@likec4/styles/jsx';
 import { PropsWithChildren } from 'react';
 import { UndefinedOnPartialDeep } from 'type-fest';
 import { EdgeProps } from '../../types';

package/dist/base/primitives/edge/EdgeLabel.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { isStepEdgeId, extractStep } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
-import { Box, Text } from '@mantine/core';
-import 'react';
+import { Box } from '@likec4/styles/jsx';
+import { Text } from '@mantine/core';
+import '../../../_virtual/index.js';
 import { isTruthy } from 'remeda';
 import { labelsva } from './EdgeLabel.css.js';
 

package/dist/base/primitives/edge/EdgeLabelContainer.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { EdgeLabelRenderer } from '@xyflow/react';
-import 'react';
+import '../../../_virtual/index.js';
 import { isNumber } from 'remeda';
 import { ZIndexes } from '../../const.js';
 import { edgeVars } from './edge.css.js';

package/dist/base/primitives/edge/EdgePath.d.ts

@@ -1,45 +1,13 @@
-import { PointerEventHandler, ForwardRefExoticComponent, CSSProperties, ReactNode, RefAttributes } from 'react';
-import { Position } from '@xyflow/react';
-import { RelationshipLineType, RelationshipArrowType } from '@likec4/core';
-export declare const EdgePath: ForwardRefExoticComponent<{
-    id: string;
-    selected?: boolean;
-    selectable?: boolean;
-    deletable?: boolean;
-    style?: CSSProperties;
-    source: string;
-    target: string;
-    animated?: boolean;
-    sourceX: number;
-    sourceY: number;
-    targetX: number;
-    targetY: number;
-    sourcePosition: Position;
-    targetPosition: Position;
-    label?: ReactNode;
-    labelStyle?: CSSProperties;
-    labelShowBg?: boolean;
-    labelBgStyle?: CSSProperties;
-    labelBgPadding?: [number, number];
-    labelBgBorderRadius?: number;
-    sourceHandleId?: string | null;
-    targetHandleId?: string | null;
-    markerStart?: string;
-    markerEnd?: string;
-    pathOptions?: any;
-    interactionWidth?: number;
-    data: {
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../..").Base.Dimmed;
-    } & {
-        dir?: "forward" | "back" | "both" | undefined;
-        line?: RelationshipLineType | undefined;
-        head?: RelationshipArrowType | undefined;
-        tail?: RelationshipArrowType | undefined;
-    };
-} & {
+import { DiagramEdge } from '@likec4/core';
+import { PointerEventHandler, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { UndefinedOnPartialDeep } from 'type-fest';
+import { EdgeProps } from '../../types';
+type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'line' | 'dir' | 'tail' | 'head'>>;
+type EdgePathProps = {
+    edgeProps: EdgeProps<Data>;
     svgPath: string;
     strokeWidth?: number;
     onEdgePointerDown?: PointerEventHandler<SVGGElement> | undefined;
-} & RefAttributes<SVGPathElement>>;
+};
+export declare const EdgePath: ForwardRefExoticComponent<EdgePathProps & RefAttributes<SVGPathElement>>;
+export {};

package/dist/base/primitives/edge/EdgePath.js

@@ -1,22 +1,24 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { forwardRef } from 'react';
+import { cx, css } from '@likec4/styles/css';
+import { r as reactExports } from '../../../_virtual/index.js';
 import { hideOnReducedGraphics, markerContext, edgePathBg, cssEdgePath } from './edge.css.js';
 import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers.js';
 
-const EdgePath = forwardRef(({
-  id,
-  data: {
-    line,
-    dir,
-    tail,
-    head
+const EdgePath = reactExports.forwardRef(({
+  edgeProps: {
+    id,
+    data: {
+      line,
+      dir,
+      tail,
+      head
+    },
+    style,
+    interactionWidth
   },
+  onEdgePointerDown,
   strokeWidth,
-  svgPath,
-  style,
-  interactionWidth,
-  onEdgePointerDown
+  svgPath
 }, svgPathRef) => {
   let markerStartName = arrowTypeToMarker(tail);
   let markerEndName = arrowTypeToMarker(head ?? "normal");
@@ -37,10 +39,15 @@ const EdgePath = forwardRef(({
     /* @__PURE__ */ jsx(
       "path",
       {
-        className: cx("react-flow__edge-interaction", hideOnReducedGraphics),
+        className: cx(
+          "react-flow__edge-interaction",
+          hideOnReducedGraphics,
+          css({
+            fill: "[none]",
+            strokeOpacity: 0
+          })
+        ),
         d: svgPath,
-        fill: "none",
-        stroke: "transparent",
         strokeWidth: interactionWidth ?? 10
       }
     ),

package/dist/base/primitives/edge/edge.css.js

@@ -63,7 +63,7 @@ const markerContext = css({
   stroke: "[var(--xy-edge-stroke)]"
 });
 const cssEdgePath = css({
-  fill: "[none]",
+  fill: "[none!]",
   strokeDashoffset: 10,
   _noReduceGraphics: {
     transition: "stroke 130ms ease-out,stroke-width 130ms ease-out"

package/dist/base/primitives/element/ElementActionButtons.js

@@ -3,7 +3,7 @@ import { css, cx } from '@likec4/styles/css';
 import { actionBtn } from '@likec4/styles/recipes';
 import { Box, ActionIcon } from '@mantine/core';
 import { useId } from '@mantine/hooks';
-import { m } from 'framer-motion';
+import * as m from 'motion/react-m';
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow.js';
 import { stopPropagation } from '../../../utils/xyflow.js';
 
@@ -60,7 +60,6 @@ function ElementActionButtons({
         ActionIcon,
         {
           component: m.button,
-          layout: true,
           className: actionBtn({}),
           initial: false,
           whileTap: { scale: 1 },

package/dist/base/primitives/element/ElementDetailsButton.js

@@ -4,7 +4,7 @@ import { actionBtn } from '@likec4/styles/recipes';
 import { Box, ActionIcon } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import { IconId } from '@tabler/icons-react';
-import { m } from 'framer-motion';
+import * as m from 'motion/react-m';
 import { stopPropagation } from '../../../utils/xyflow.js';
 
 const container = css({
@@ -42,7 +42,6 @@ function ElementDetailsButton({
     {
       className: cx("nodrag nopan", actionBtn({ variant: "transparent" })),
       component: m.button,
-      layout: true,
       initial: false,
       style: {
         originX: 0.45,

package/dist/base/primitives/element/ElementNodeContainer.js

@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { createPolymorphicComponent, Box } from '@mantine/core';
-import { m } from 'framer-motion';
-import { forwardRef } from 'react';
+import * as m from 'motion/react-m';
+import { r as reactExports } from '../../../_virtual/index.js';
 import { container } from './ElementNodeContainer.css.js';
 
 function nodeSizes({
@@ -30,7 +30,7 @@ function nodeSizes({
   };
 }
 const ElementNodeContainer = createPolymorphicComponent(
-  forwardRef(({
+  reactExports.forwardRef(({
     nodeProps: {
       selected = false,
       selectable = false,

package/dist/base/updateEdges.js

@@ -1,13 +1,18 @@
 import { deepEqual } from 'fast-equals';
-import { isDefined } from 'remeda';
+import { isDefined, omit } from 'remeda';
 
 function _update(current, update) {
   return update.map((next) => {
     const existing = current.find((n) => n.id === next.id);
-    if (existing && existing.type === next.type) {
+    if (existing && deepEqual(existing.type, next.type)) {
       if (deepEqual(existing.hidden ?? false, next.hidden ?? false) && deepEqual(existing.source, next.source) && deepEqual(existing.sourceHandle ?? null, next.sourceHandle ?? null) && deepEqual(existing.target, next.target) && deepEqual(existing.targetHandle ?? null, next.targetHandle ?? null) && deepEqual(existing.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(existing.data, next.data)) {
         return existing;
       }
+      return {
+        ...omit(existing, ["hidden", "zIndex"]),
+        ...next,
+        data: next.data
+      };
     }
     return next;
   });

package/dist/base/updateNodes.js

@@ -1,15 +1,23 @@
 import { getNodeDimensions } from '@xyflow/system';
 import { deepEqual } from 'fast-equals';
-import { isDefined } from 'remeda';
+import { isDefined, omit } from 'remeda';
 
 function _update(current, updated) {
   return updated.map((update) => {
     const existing = current.find((n) => n.id === update.id);
-    if (existing) {
+    if (existing && deepEqual(existing.type, update.type)) {
       const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
-      if (deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.zIndex ?? 0, update.zIndex ?? 0) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data)) {
+      if (deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.zIndex ?? 0, update.zIndex ?? 0) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data)) {
         return existing;
       }
+      return {
+        ...omit(existing, ["measured", "parentId", "hidden", "zIndex"]),
+        ...update,
+        // Force dimensions from update
+        width: update.initialWidth,
+        height: update.initialHeight,
+        data: update.data
+      };
     }
     return update;
   });

package/dist/bundle/LikeC4View.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { memo, useState } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { ShadowRoot } from './ShadowRoot.js';
 import { cx } from '@likec4/styles/css';
 import { Box, ActionIcon } from '@mantine/core';
@@ -30,7 +30,7 @@ function LikeC4View({
   }
   return /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props });
 }
-const LikeC4ViewInner = memo(({
+const LikeC4ViewInner = reactExports.memo(({
   view,
   className,
   pannable = false,
@@ -61,7 +61,7 @@ const LikeC4ViewInner = memo(({
   const likec4model = useLikeC4Model(true, "layouted");
   const colorScheme = useColorScheme(explicitColorScheme);
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view);
-  const [browserViewId, onNavigateTo] = useState(null);
+  const [browserViewId, onNavigateTo] = reactExports.useState(null);
   const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null;
   const notations = view.notation?.elements ?? [];
   const hasNotations = notations.length > 0;

package/dist/bundle/ReactLikeC4.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import 'react';
+import '../_virtual/index.js';
 import { ShadowRoot } from './ShadowRoot.js';
 import { cx } from '@likec4/styles/css';
 import { isString, isFunction } from 'remeda';

package/dist/bundle/ShadowRoot.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { MantineProvider } from '@mantine/core';
-import { useRef, useCallback } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import root from 'react-shadow';
 import { isDefined } from 'remeda';
 import { useBundledStyleSheet, DefaultTheme } from './styles.css.js';
@@ -15,9 +15,9 @@ function ShadowRoot({
   colorScheme,
   ...props
 }) {
-  const rootRef = useRef(null);
+  const rootRef = reactExports.useRef(null);
   const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
-  const getRootElement = useCallback(() => rootRef.current ?? void 0, [rootRef]);
+  const getRootElement = reactExports.useCallback(() => rootRef.current ?? void 0, [rootRef]);
   let getStyleNonce;
   if (isDefined(styleNonce)) {
     getStyleNonce = typeof styleNonce === "function" ? styleNonce : () => styleNonce;

package/dist/bundle/styles.css.js

@@ -2,7 +2,7 @@ import { css } from '@likec4/styles/css';
 import { createTheme, Portal } from '@mantine/core';
 import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback, useId } from '@mantine/hooks';
 import { useIsomorphicLayoutEffect } from '@react-hookz/web';
-import { useState } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { first, isString, isFunction } from 'remeda';
 import inlinedStyles from '../styles.css.js';
 import fontsCss from './font.css.js';
@@ -42,7 +42,7 @@ const cssInteractive = css({
   }
 });
 function useBundledStyleSheet(injectFontCss, styleNonce) {
-  const [styleSheets, setStyleSheets] = useState([]);
+  const [styleSheets, setStyleSheets] = reactExports.useState([]);
   useIsomorphicLayoutEffect(() => {
     if (injectFontCss && !document.querySelector(`style[data-likec4-font]`)) {
       const style = document.createElement("style");
@@ -83,7 +83,7 @@ const getComputedColorScheme = () => {
 };
 function useColorScheme(explicit) {
   const preferred = useColorScheme$1();
-  const [computed, setComputed] = useState(getComputedColorScheme);
+  const [computed, setComputed] = reactExports.useState(getComputedColorScheme);
   useMutationObserver(
     useDebouncedCallback(() => setComputed(getComputedColorScheme), 100),
     {

package/dist/context/ControlsCustomLayout.js

@@ -1,5 +1,5 @@
 import { createOptionalContext } from '@mantine/core';
-import 'react';
+import '../_virtual/index.js';
 
 const [
   ControlsCustomLayoutProvider,

package/dist/context/DiagramEventHandlers.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useSyncedRef } from '@react-hookz/web';
-import { useMemo, createContext, useContext } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { isFunction, mapToObj } from 'remeda';
 
 const HandlerNames = [
@@ -16,7 +16,7 @@ const HandlerNames = [
   "onChange",
   "onCanvasDblClick"
 ];
-const DiagramEventHandlersContext = createContext({
+const DiagramEventHandlersContext = reactExports.createContext({
   ...mapToObj(HandlerNames, (name) => [name, null]),
   handlersRef: {
     current: {}
@@ -28,7 +28,7 @@ function DiagramEventHandlers({
 }) {
   const handlersRef = useSyncedRef(handlers);
   const deps = HandlerNames.map((name) => isFunction(handlers[name]));
-  const value = useMemo(() => ({
+  const value = reactExports.useMemo(() => ({
     ...mapToObj(HandlerNames, (name) => {
       if (handlersRef.current[name]) {
         return [name, (...args) => handlersRef.current[name]?.(...args)];
@@ -40,10 +40,10 @@ function DiagramEventHandlers({
   return /* @__PURE__ */ jsx(DiagramEventHandlersContext.Provider, { value, children });
 }
 function useDiagramEventHandlers() {
-  return useContext(DiagramEventHandlersContext);
+  return reactExports.useContext(DiagramEventHandlersContext);
 }
 function useDiagramEventHandlersRef() {
-  return useContext(DiagramEventHandlersContext).handlersRef;
+  return reactExports.useContext(DiagramEventHandlersContext).handlersRef;
 }
 
 export { DiagramEventHandlers, useDiagramEventHandlers, useDiagramEventHandlersRef };