@likec4/diagram 1.7.2 → 1.7.3

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -16,10 +16,10 @@ import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { deepEqual, deepEqual as eq } from 'fast-equals'
 import { memo, type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react'
 import { first, hasAtLeast, isArray, isTruthy, last } from 'remeda'
-import { useDiagramState, useDiagramStoreApi } from '../../state/useDiagramStore'
+import { useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { useXYStoreApi } from '../../hooks/useXYFlow'
 import { ZIndexes } from '../const'
 import { EdgeMarkers, type EdgeMarkerType } from '../EdgeMarkers'
-import { useXYStoreApi } from '../hooks/useXYFlow'
 import { type RelationshipData, type XYFlowEdge } from '../types'
 import { bezierControlPoints } from '../utils'
 import * as edgesCss from './edges.css'
@@ -97,9 +97,9 @@ function bezierPath(bezierSpline: NonEmptyArray<Point>) {
   return path
 }
 
-// If points are within 3px, consider them the same
+// If points are within 1px, consider them the same
 const isSame = (a: number, b: number) => {
-  return Math.abs(a - b) < 3.1
+  return Math.abs(a - b) < 2.5
 }
 
 const isSamePoint = (a: XYPosition | Point, b: XYPosition | Point) => {
@@ -150,12 +150,14 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const diagramStore = useDiagramStoreApi()
   const xyflowStore = useXYStoreApi()
-  const { isActive, isEdgePathEditable, isHovered, isDimmed } = useDiagramState(s => ({
-    isEdgePathEditable: s.readonly !== true && s.experimentalEdgeEditing === true,
+  const { isActive, isEdgePathEditable, isHovered, isDimmed, hasOpenSourceRelation } = useDiagramState(s => ({
+    isEdgePathEditable: s.readonly !== true && s.experimentalEdgeEditing === true && s.focusedNodeId === null
+      && s.activeDynamicViewStep === null,
     isActive: s.focusedNodeId === source || s.focusedNodeId === target
       || (s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum),
     isHovered: s.hoveredEdgeId === id,
-    isDimmed: s.dimmed.has(id)
+    isDimmed: s.dimmed.has(id),
+    hasOpenSourceRelation: !!s.onOpenSourceRelation
   }))
   const { nodeLookup, edgeLookup } = xyflowStore.getState()
   const sourceNode = nonNullable(nodeLookup.get(source)!, `source node ${source} not found`)
@@ -200,8 +202,6 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   let edgePath: string
 
   if (isModified) {
-    labelX = labelPos.x
-    labelY = labelPos.y
     const sourceCenterPos = { x: sourceX, y: sourceY }
     const targetCenterPos = { x: targetX, y: targetY }
 
@@ -254,10 +254,15 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
       })
     },
     [labelPos],
-    100,
+    50,
     300
   )
 
+  if (isModified || isControlPointDragging) {
+    labelX = labelPos.x
+    labelY = labelPos.y
+  }
+
   const onControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>) => {
     const { domNode } = xyflowStore.getState()
     if (!domNode || e.pointerType !== 'mouse') {
@@ -281,30 +286,47 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     e.stopPropagation()
     let hasMoved = false
     let pointer = { x: e.clientX, y: e.clientY }
+
     const onPointerMove = (e: PointerEvent) => {
-      if (!isSamePoint(pointer, [e.clientX, e.clientY])) {
+      if (hasMoved || !isSamePoint(pointer, [e.clientX, e.clientY])) {
         setIsControlPointDragging(true)
         hasMoved = true
         pointer = { x: e.clientX, y: e.clientY }
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
-        const newControlPoints = controlPoints.slice()
-        newControlPoints[index] = {
-          x: Math.round(x),
-          y: Math.round(y)
-        }
-        xyflow.updateEdgeData(id, { controlPoints: newControlPoints })
+        xyflow.updateEdgeData(id, xyedge => {
+          const cp = (xyedge.data.controlPoints ?? controlPoints).slice()
+          cp[index] = {
+            x: Math.round(x),
+            y: Math.round(y)
+          }
+          return {
+            controlPoints: cp
+          }
+        })
       }
+      e.stopPropagation()
     }
-    const onPointerUp = () => {
-      domNode.removeEventListener('pointermove', onPointerMove)
-      domNode.removeEventListener('pointerup', onPointerUp)
+
+    const onPointerUp = (e: PointerEvent) => {
+      domNode.removeEventListener('pointermove', onPointerMove, {
+        capture: true
+      })
+      if (hasMoved) {
+        e.stopPropagation()
+      }
       if (hasMoved || wasCanceled) {
         diagramStore.getState().scheduleSaveManualLayout()
       }
       setIsControlPointDragging(false)
     }
-    domNode.addEventListener('pointermove', onPointerMove)
-    domNode.addEventListener('pointerup', onPointerUp, { once: true })
+
+    domNode.addEventListener('pointermove', onPointerMove, {
+      capture: true
+    })
+    domNode.addEventListener('pointerup', onPointerUp, {
+      once: true,
+      capture: true
+    })
   }
 
   let markerStartName = toMarker(diagramEdge.tail)
@@ -318,6 +340,9 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
 
   const labelZIndex = 1 + (isHovered ? ZIndexes.Element : (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge))
 
+  const relationId = first(data.edge.relations)
+  const showOpenSourceRelation = hasOpenSourceRelation && relationId !== undefined
+
   return (
     <g
       className={clsx(
@@ -393,7 +418,12 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
             isHovered,
             isActive,
             isStepEdge
-          })} />
+          })}
+          onClick={showOpenSourceRelation && ((e) => {
+            e.stopPropagation()
+            diagramStore.getState().onOpenSourceRelation?.(relationId)
+          })}
+        />
       )}
     </g>
   )
@@ -412,9 +442,10 @@ type EdgeLabelProps = {
   isHovered: boolean
   isActive: boolean
   zIndex: number
+  onClick: false | ((e: ReactPointerEvent<HTMLDivElement>) => void)
 }
 
-const EdgeLabel = memo<EdgeLabelProps>(({
+const EdgeLabel = ({
   isDimmed,
   color,
   isModified,
@@ -426,8 +457,9 @@ const EdgeLabel = memo<EdgeLabelProps>(({
   stepNum,
   isHovered,
   isActive,
-  zIndex
-}) => {
+  zIndex,
+  onClick
+}: EdgeLabelProps) => {
   return (
     <EdgeLabelRenderer>
       <Box
@@ -455,6 +487,7 @@ const EdgeLabel = memo<EdgeLabelProps>(({
           'data-edge-hovered': isHovered,
           'data-edge-active': isActive
         }}
+        onClick={onClick || undefined}
       >
         {stepNum !== null && (
           <Box className={edgesCss.stepEdgeNumber}>
@@ -469,4 +502,4 @@ const EdgeLabel = memo<EdgeLabelProps>(({
       </Box>
     </EdgeLabelRenderer>
   )
-}, deepEqual)
+}

package/src/xyflow/edges/edges.css.ts

@@ -10,7 +10,7 @@ export const container = style({
     [mixColor]: `black`,
     [xyvars.edge.stroke]: vars.relation.lineColor,
     [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
-    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 20%)`,
+    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 40%)`,
     [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
     [xyvars.edge.strokeWidth]: '3'
   }
@@ -159,6 +159,24 @@ export const cssEdgePath = style({
   }
 })
 
+const labelBorderRadius = 2
+export const stepEdgeNumber = style({
+  flex: '0 0 auto',
+  fontWeight: 600,
+  fontSize: rem(14),
+  lineHeight: 1,
+  padding: '5px 5px',
+  textAlign: 'center',
+  minWidth: 22,
+  borderTopLeftRadius: labelBorderRadius,
+  borderBottomLeftRadius: labelBorderRadius,
+  backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 5%)`,
+  fontVariantNumeric: 'tabular-nums'
+})
+globalStyle(`:where([data-mantine-color-scheme="dark"]) :where([data-likec4-color="gray"]) ${stepEdgeNumber}`, {
+  backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`
+})
+
 export const varLabelX = createVar('label-x')
 export const varLabelY = createVar('label-y')
 
@@ -169,6 +187,7 @@ export const edgeLabel = style({
   left: 0,
   padding: '2px 4px 4px 4px',
   fontFamily: vars.likec4.font,
+  display: 'flex',
   position: 'absolute',
   pointerEvents: 'all',
   cursor: 'pointer',
@@ -177,7 +196,7 @@ export const edgeLabel = style({
   mixBlendMode: 'plus-lighter',
   color: xyvars.edge.labelColor,
   backgroundColor: xyvars.edge.labelBgColor,
-  borderRadius: 3,
+  borderRadius: labelBorderRadius,
   transform: varTranslate,
   vars: {
     [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`
@@ -187,6 +206,10 @@ export const edgeLabel = style({
       transition: 'all 140ms ease-in-out',
       transform: `${varTranslate} scale(1.12)`
     },
+    [`&:has(${stepEdgeNumber})`]: {
+      padding: 0,
+      gap: 2
+    },
     [`&:is(${dimmed})`]: {
       opacity: 0.3,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
@@ -197,32 +220,13 @@ export const edgeLabel = style({
   }
 })
 
-export const stepEdgeNumber = style({
-  position: 'absolute',
-  top: -2,
-  left: -2,
-  fontWeight: 500,
-  fontSize: rem(16),
-  lineHeight: 0.9,
-  padding: '4px 6px',
-  borderRadius: 99999,
-  textAlign: 'center',
-  minWidth: 22,
-  backgroundColor: xyvars.edge.labelBgColor,
-  transition: 'all 120ms ease-out',
-  transform: 'translateX(-100%)',
-  fontVariantNumeric: 'tabular-nums',
-  selectors: {
-    ':where([data-edge-hovered="true"],[data-edge-active="true"]) &': {
-      fontWeight: 600,
-      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 5%)`
-    }
-  }
-})
-
 export const edgeLabelText = style({
   textAlign: 'left',
   whiteSpaceCollapse: 'preserve-breaks',
   fontSize: rem(14),
   lineHeight: 1.185
 })
+
+globalStyle(`${edgeLabel}:has(${stepEdgeNumber}) ${edgeLabelText}`, {
+  padding: '2px 5px 4px 2px'
+})

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { memo } from 'react'
 import { clamp } from 'remeda'
-import { useDiagramState } from '../../../state/useDiagramStore'
+import { useDiagramState } from '../../../hooks/useDiagramState'
 import type { CompoundXYFlowNode } from '../../types'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
 import * as css from './CompoundNode.css'

package/src/xyflow/nodes/element/ElementLink.tsx

@@ -7,7 +7,6 @@ import {
   Group,
   HoverCard,
   HoverCardDropdown,
-  type HoverCardProps,
   HoverCardTarget,
   Stack,
   UnstyledButton
@@ -16,8 +15,8 @@ import { IconLink } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { useId } from 'react'
 import { clamp } from 'remeda'
+import { useDiagramState } from '../../../hooks/useDiagramState'
 import { type DiagramState } from '../../../state/diagramStore'
-import { useDiagramState } from '../../../state/useDiagramStore'
 import type { XYFlowNode } from '../../types'
 import { elementLink, trigger } from './ElementLink.css'
 

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -1,12 +1,13 @@
 import type { DiagramNode } from '@likec4/core/types'
-import { Text as MantineText } from '@mantine/core'
-import { Handle, type NodeProps, Position } from '@xyflow/react'
+import { ActionIcon, Text as MantineText, Tooltip } from '@mantine/core'
+import { IconFileSymlink } from '@tabler/icons-react'
+import { Handle, type NodeProps, NodeToolbar, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { m, type Variants } from 'framer-motion'
 import { memo } from 'react'
 import { isNumber, isTruthy } from 'remeda'
-import { type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../../../state/useDiagramStore'
+import { type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../../../hooks/useDiagramState'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
@@ -89,12 +90,13 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   height
 }) {
   const store = useDiagramStoreApi()
-  const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
+  const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive, hasGoToSource } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
     isInteractive: s.nodesDraggable || s.nodesSelectable || !!s.onNavigateTo,
     isHovercards: s.showElementLinks,
-    hasOnNavigateTo: !!s.onNavigateTo
+    hasOnNavigateTo: !!s.onNavigateTo,
+    hasGoToSource: !!s.onOpenSourceElement
   }))
   const isNavigable = hasOnNavigateTo && !!element.navigateTo
 

package/src/xyflow/nodes/shared/NavigateToBtn.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { useDiagramStoreApi } from '../../../state/useDiagramStore'
+import { useDiagramStoreApi } from '../../../hooks/useDiagramState'
 
 export type NavigateToBtnProps = {
   xynodeId: string

package/src/xyflow/{hooks/useLayoutConstraints.ts → useLayoutConstraints.ts}

@@ -4,9 +4,9 @@ import type { InternalNode, NodeChange, ReactFlowProps, XYPosition } from '@xyfl
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
 import { isNullish } from 'remeda'
-import { useDiagramStoreApi } from '../../state/useDiagramStore'
-import type { XYFlowNode } from '../types'
-import { type XYStoreApi } from './useXYFlow'
+import { useDiagramStoreApi } from '../hooks'
+import { type XYStoreApi } from '../hooks/useXYFlow'
+import type { XYFlowNode } from './types'
 
 abstract class Rect {
   id!: string

package/src/xyflow/utils.ts

@@ -1,8 +1,9 @@
 import { hasAtLeast, invariant } from '@likec4/core'
 import type { DiagramEdge, Point } from '@likec4/core/types'
-import type { XYPosition } from '@xyflow/react'
+import type { Rect, XYPosition } from '@xyflow/react'
 import { Bezier } from 'bezier-js'
 import { isArray } from 'remeda'
+import type { InternalXYFlowNode } from './types'
 
 export function toDomPrecision(v: number | null) {
   if (v === null) {
@@ -15,6 +16,29 @@ export function distance(a: XYPosition, b: XYPosition) {
   return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2))
 }
 
+export const nodeToRect = (nd: InternalXYFlowNode): Rect => ({
+  x: nd.internals.positionAbsolute.x,
+  y: nd.internals.positionAbsolute.y,
+  width: nd.width ?? nd.data.element.width,
+  height: nd.height ?? nd.data.element.height
+})
+
+/**
+ * Checks if a rectangle is completely inside another rectangle.
+ *
+ * @param test - The rectangle to test.
+ * @param target - The target rectangle.
+ * @returns `true` if the `test` rectangle is completely inside the `target` rectangle, otherwise `false`.
+ */
+export const isInside = (test: Rect, target: Rect) => {
+  return (
+    test.x >= target.x
+    && test.y >= target.y
+    && test.x + test.width <= target.x + target.width
+    && test.y + test.height <= target.y + target.height
+  )
+}
+
 export function bezierControlPoints(diagramEdge: DiagramEdge) {
   let [start, ...bezierPoints] = diagramEdge.points
   invariant(start, 'start should be defined')

package/dist/state/hooks.d.ts

@@ -1,4 +0,0 @@
-export { useDiagramState, useDiagramStoreApi } from './useDiagramStore';
-export { useNavigationHistory } from './useNavigationHistory';
-export type * from './diagramStore';
-export type * from './useDiagramStore';

package/dist/state/index.d.ts

@@ -1,2 +0,0 @@
-export type * from './diagramStore';
-export type * from './useDiagramStore';

package/dist/state/useNavigationHistory.d.ts

@@ -1,5 +0,0 @@
-export declare function useNavigationHistory(): {
-    hasBack: boolean;
-    hasForward: boolean;
-    ops: import('@mantine/hooks').UseStateHistoryHandlers<import('@likec4/core').ViewID>;
-};

package/dist/types.d.ts

@@ -1,20 +0,0 @@
-import { Fqn, RelationID, ViewID } from '@likec4/core';
-import { Simplify } from 'type-fest';
-
-type TaggedUnion<TagKey extends string, UnionMembers extends Record<string, Record<string, unknown>>> = {
-    [Name in keyof UnionMembers]: Simplify<{
-        [Key in TagKey]: Name;
-    } & UnionMembers[Name]>;
-}[keyof UnionMembers];
-export type DiagramEditorCommand = TaggedUnion<'type', {
-    showElement: {
-        element: Fqn;
-    };
-    showRelation: {
-        relation: RelationID;
-    };
-    showView: {
-        view: ViewID;
-    };
-}>;
-export {};

package/dist/ui/BackwardForwardPanel.css.d.ts

@@ -1 +0,0 @@
-export declare const panel: string;

package/dist/ui/BackwardForwardPanel.d.ts

@@ -1 +0,0 @@
-export declare function BackwardForwardPanel(): import("react/jsx-runtime").JSX.Element;

package/dist/xyflow/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export { useXYFlow, useXYNodesData, useXYStore, useXYStoreApi } from './useXYFlow';
-export type * from './useXYFlow';

package/src/state/hooks.ts

@@ -1,5 +0,0 @@
-export { useDiagramState, useDiagramStoreApi } from './useDiagramStore'
-export { useNavigationHistory } from './useNavigationHistory'
-
-export type * from './diagramStore'
-export type * from './useDiagramStore'

package/src/state/index.ts

@@ -1,2 +0,0 @@
-export type * from './diagramStore'
-export type * from './useDiagramStore'

package/src/state/useNavigationHistory.ts

@@ -1,39 +0,0 @@
-import { useStateHistory } from '@mantine/hooks'
-import { useMemo } from 'react'
-import { useUpdateEffect } from '../hooks/useUpdateEffect'
-import { useDiagramState, useDiagramStoreApi } from './useDiagramStore'
-
-export function useNavigationHistory() {
-  const store = useDiagramStoreApi()
-  const viewId = useDiagramState(s => s.view.id)
-
-  const [historyViewId, historyOps, {
-    history,
-    current: historyIndex
-  }] = useStateHistory(viewId)
-
-  const hasBack = historyIndex > 0
-  const hasForward = historyIndex < history.length - 1
-
-  useUpdateEffect(() => {
-    if (viewId !== historyViewId) {
-      historyOps.set(viewId)
-    }
-  }, [viewId])
-
-  useUpdateEffect(() => {
-    if (viewId !== historyViewId) {
-      store.getState().onNavigateTo?.(historyViewId)
-    }
-  }, [historyViewId])
-
-  return useMemo(() => ({
-    hasBack,
-    hasForward,
-    ops: historyOps
-  }), [
-    hasBack,
-    hasForward,
-    historyOps
-  ])
-}

package/src/types.ts

@@ -1,22 +0,0 @@
-import type { Fqn, RelationID, ViewID } from '@likec4/core'
-import type { Simplify } from 'type-fest'
-
-type TaggedUnion<
-  TagKey extends string,
-  UnionMembers extends Record<string, Record<string, unknown>>
-> = {
-  [Name in keyof UnionMembers]: Simplify<{ [Key in TagKey]: Name } & UnionMembers[Name]>
-}[keyof UnionMembers]
-
-export type DiagramEditorCommand = TaggedUnion<'type', {
-  // Sources
-  showElement: {
-    element: Fqn
-  }
-  showRelation: {
-    relation: RelationID
-  }
-  showView: {
-    view: ViewID
-  }
-}>

package/src/ui/BackwardForwardPanel.css.ts

@@ -1,22 +0,0 @@
-import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../mantine.css'
-import { vars } from '../theme.css'
-
-export const panel = style({
-  top: fallbackVar(vars.navigationPanel.top, '0.8rem'),
-  left: fallbackVar(vars.navigationPanel.left, '1rem'),
-  margin: 0
-})
-
-globalStyle(`${panel} .mantine-ActionIcon-root`, {
-  vars: {
-    ['--ai-size']: 'var(--ai-size-lg)'
-  }
-  // '@media': {
-  //   [mantine.largerThan('lg')]: {
-  //     vars: {
-  //       ['--ai-size']: 'var(--ai-size-xl)'
-  //     }
-  //   }
-  // }
-})

package/src/ui/BackwardForwardPanel.tsx

@@ -1,76 +0,0 @@
-import { ActionIcon, Group } from '@mantine/core'
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
-import clsx from 'clsx'
-import { AnimatePresence, m } from 'framer-motion'
-import { type DiagramState, useDiagramState } from '../state/hooks'
-import * as css from './BackwardForwardPanel.css'
-
-const historySelector = (s: DiagramState) => ({
-  hasStepBack: s.navigationHistoryIndex > 0,
-  hasStepForward: s.navigationHistoryIndex < s.navigationHistory.length - 1,
-  goBack: s.goBack,
-  goForward: s.goForward
-})
-
-export function BackwardForwardPanel() {
-  const {
-    hasStepBack,
-    hasStepForward,
-    goBack,
-    goForward
-  } = useDiagramState(historySelector)
-  return (
-    <Group
-      className={clsx(
-        'react-flow__panel',
-        css.panel,
-        'likec4-navigation-panel'
-      )}
-      gap={'xs'}>
-      <AnimatePresence>
-        {hasStepBack && (
-          <m.div
-            layout
-            initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
-            animate={{ opacity: 1, transform: 'translateX(0)' }}
-            exit={{
-              opacity: 0.05,
-              transform: 'translateX(-10px)'
-            }}
-            key={'back'}>
-            <ActionIcon
-              variant="light"
-              color="gray"
-              onClick={e => {
-                e.stopPropagation()
-                goBack()
-              }}>
-              <IconChevronLeft />
-            </ActionIcon>
-          </m.div>
-        )}
-        {hasStepForward && (
-          <m.div
-            layout
-            initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
-            animate={{ opacity: 1, transform: 'translateX(0)' }}
-            exit={{
-              opacity: 0,
-              transform: 'translateX(10px)'
-            }}
-            key={'forward'}>
-            <ActionIcon
-              variant="light"
-              color="gray"
-              onClick={e => {
-                e.stopPropagation()
-                goForward()
-              }}>
-              <IconChevronRight />
-            </ActionIcon>
-          </m.div>
-        )}
-      </AnimatePresence>
-    </Group>
-  )
-}

package/src/xyflow/hooks/index.ts

@@ -1,3 +0,0 @@
-export { useXYFlow, useXYNodesData, useXYStore, useXYStoreApi } from './useXYFlow'
-
-export type * from './useXYFlow'