@likec4/diagram 1.24.1 → 1.25.1

package/src/base/primitives/edge/edge.css.ts

@@ -1,12 +1,16 @@
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import {
-  hiddenIfReducedGraphics,
-  hiddenIfZoomTooSmall,
   reactFlow,
-  whereNotReducedGraphics,
 } from '../../../LikeC4Diagram.css'
-import { vars, xyvars } from '../../../theme-vars'
-import { whereDark, whereLight } from '../../../theme-vars.css'
+import {
+  vars,
+  whereDark,
+  whereLight,
+  whereNotReducedGraphics,
+  whereReducedGraphics,
+  whereSmallZoom,
+  xyvars,
+} from '../../../theme-vars'
 
 export const mixColor = createVar('mix-color')
 
@@ -15,7 +19,7 @@ export const edgeVars = 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) 40%)`,
+    [xyvars.edge.labelColor]: vars.relation.labelColor,
     [xyvars.edge.labelBgColor]: vars.relation.labelBgColor,
     [xyvars.edge.strokeWidth]: '3',
   },
@@ -23,11 +27,11 @@ export const edgeVars = style({
     [`${whereDark} &`]: {
       vars: {
         [mixColor]: `white`,
-        [xyvars.edge.labelColor]: vars.relation.labelColor,
       },
     },
-    [`${whereNotReducedGraphics} &`]: {
+    [`${whereLight} ${whereNotReducedGraphics} &`]: {
       vars: {
+        [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%)`,
       },
     },
@@ -52,6 +56,9 @@ export const edgeContainer = style([edgeVars, {
       transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
     },
+    [`${whereReducedGraphics} &`]: {
+      transition: 'none',
+    },
   },
 }])
 const isSelected = '.react-flow__edge.selected'
@@ -77,14 +84,14 @@ globalStyle(`:where(${isSelected}) ${edgeVars}[data-edge-hovered='true']`, {
   },
 })
 
-globalStyle(`${reactFlow} .react-flow__edges > svg`, {
+globalStyle(`${reactFlow} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`, {
   mixBlendMode: 'plus-lighter',
 })
-globalStyle(`${whereLight} ${reactFlow} .react-flow__edges > svg`, {
+globalStyle(`${whereLight} ${reactFlow} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`, {
   mixBlendMode: 'screen',
 })
 
-export const edgePathBg = style([hiddenIfZoomTooSmall, hiddenIfReducedGraphics, {
+export const edgePathBg = style({
   // strokeWidth: xyvars.edge.strokeWidth,
   strokeOpacity: 0.08,
   // transition: 'stroke-width 175ms ease-in-out',
@@ -93,12 +100,15 @@ export const edgePathBg = style([hiddenIfZoomTooSmall, hiddenIfReducedGraphics,
   transitionDuration: '155ms',
   transitionTimingFunction: 'ease-out',
   selectors: {
+    [`:where([data-likec4-zoom-small="true"]) &`]: {
+      display: 'none',
+    },
     [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
       strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8)`,
       strokeOpacity: 0.15,
     },
   },
-}])
+})
 
 // To fix issue with marker not inheriting color from path - we need to create container
 export const markerContext = style({
@@ -122,21 +132,29 @@ export const cssEdgePath = style({
   animationFillMode: 'both',
   strokeDashoffset: 10,
   selectors: {
-    [`${reactFlow} :where([data-edge-hovered='true']) &`]: {
+    [`${whereNotReducedGraphics} &`]: {
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
+    },
+    [`:where([data-edge-hovered='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '450ms',
-      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
-    [`${reactFlow} :where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
-      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
-    [`${reactFlow} :where([data-edge-dir='back']) &`]: {
+    [`:where([data-edge-dir='back']) &`]: {
       animationDirection: 'reverse',
     },
     [`:where([data-edge-dimmed]) &`]: {
       animationPlayState: 'paused',
     },
+    [`${whereSmallZoom} &`]: {
+      animationName: 'none',
+    },
   },
 })
+
+export const looseReduce = style({
+  animationName: 'none',
+})

package/src/base/primitives/element/ElementActionButtons.css.ts

@@ -12,7 +12,7 @@ export const container = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  zIndex: 10,
+  // zIndex: 10,
 })
 
 export const actionButtons = style({

package/src/base/primitives/element/ElementActionButtons.tsx

@@ -2,7 +2,6 @@ import { ActionIcon, Box } from '@mantine/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
-import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import * as css from './ElementActionButtons.css'

package/src/base/primitives/element/ElementDetailsButton.css.ts

@@ -6,7 +6,6 @@ export const container = style({
   position: 'absolute',
   top: 2,
   right: 2,
-  zIndex: 10,
   selectors: {
     [`:where([data-likec4-shape='browser']) &`]: {
       right: 5,
@@ -33,7 +32,6 @@ export const actionIcon = style({
   pointerEvents: 'all',
   color: vars.element.loContrast,
   cursor: 'pointer',
-  backgroundColor: 'var(--ai-bg)',
   'vars': {
     '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
     '--ai-bg': `var(--ai-bg-idle)`,

package/src/base/primitives/element/ElementDetailsButton.tsx

@@ -22,9 +22,9 @@ export function ElementDetailsButton({
 }: ElementDetailsButtonProps) {
   return (
     <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'details-button')}>
-      <Box
-        className={clsx('nodrag nopan', css.actionIconWrapper)}
-        component={m.div}
+      <ActionIcon
+        className={clsx('nodrag nopan', css.actionIcon)}
+        component={m.button}
         initial={false}
         style={{
           originX: 0.45,
@@ -44,17 +44,13 @@ export function ElementDetailsButton({
           opacity: 1,
         }}
         whileTap={{ scale: 1.15 }}
+        size={'md'}
+        radius="md"
+        onClick={onClick}
+        onDoubleClick={stopPropagation}
       >
-        <ActionIcon
-          className={css.actionIcon}
-          size={'md'}
-          radius="md"
-          onClick={onClick}
-          onDoubleClick={stopPropagation}
-        >
-          {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
-        </ActionIcon>
-      </Box>
+        {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
+      </ActionIcon>
     </Box>
   )
 }

package/src/base/primitives/element/ElementNodeContainer.css.ts

@@ -1,6 +1,8 @@
-import { createVar, fallbackVar, style } from '@vanilla-extract/css'
-import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
-import { easings, vars } from '../../../theme-vars'
+import { defaultTheme } from '@likec4/core'
+import { rem } from '@mantine/core'
+import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { easings, vars, whereReducedGraphics } from '../../../theme-vars'
+import { iconSize, paddingSize, textSize } from './vars.css'
 
 export const stokeFillMix = createVar('stroke-fill-mix')
 
@@ -39,8 +41,55 @@ export const container = style({
       transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
     },
-    [`${reactFlowReducedGraphics} &:after`]: {
+    [`${whereReducedGraphics}  &:after`]: {
       display: 'none',
     },
+    [`:where(.react-flow__node.selectable:not(.dragging)) &`]: {
+      cursor: 'pointer',
+    },
+  },
+})
+
+globalStyle(`${container}`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.md),
+    [paddingSize]: rem(defaultTheme.spacing.md),
+    [iconSize]: '60px',
+  },
+})
+
+globalStyle(`${container}[data-likec4-shape-size="xs"]`, {
+  vars: {
+    [iconSize]: '24px',
+  },
+})
+globalStyle(`${container}[data-likec4-shape-size="sm"]`, {
+  vars: {
+    [iconSize]: '36px',
   },
 })
+globalStyle(`${container}[data-likec4-shape-size="lg"]`, {
+  vars: {
+    [iconSize]: '82px',
+  },
+})
+globalStyle(`${container}[data-likec4-shape-size="xl"]`, {
+  vars: {
+    [iconSize]: '90px',
+  },
+})
+
+const sizes = ['xs', 'sm', 'lg', 'xl'] as const
+sizes.forEach((size) => {
+  globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
+    vars: {
+      [textSize]: rem(defaultTheme.textSizes[size]),
+    },
+  })
+
+  globalStyle(`${container}[data-likec4-padding="${size}"]`, {
+    vars: {
+      [paddingSize]: rem(defaultTheme.spacing[size]),
+    },
+  })
+})

package/src/base/primitives/element/ElementNodeContainer.tsx

@@ -9,7 +9,6 @@ import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { type PropsWithChildren, forwardRef } from 'react'
-import { useIsReducedGraphics } from '../../../hooks/useIsReducedGraphics'
 import type { NodeProps } from '../../types'
 import * as css from './ElementNodeContainer.css'
 
@@ -64,7 +63,6 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
     children,
     ...rest
   }, ref) => {
-    const nonReducedGraphics = !useIsReducedGraphics()
     let scale = 1
     switch (true) {
       case isHovered:
@@ -90,7 +88,7 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
           'likec4-element-node',
         ])}
         initial={false}
-        {...selectable && nonReducedGraphics && {
+        {...selectable && {
           animate: {
             scale,
           },

package/src/base/primitives/element/ElementShape.css.ts

@@ -1,6 +1,6 @@
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { hiddenIfZoomTooSmall, reactFlowReducedGraphics, whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { easings, mantine, vars } from '../../../theme-vars'
+import { hiddenIfZoomTooSmall, reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
+import { easings, mantine, vars, whereNotReducedGraphics } from '../../../theme-vars'
 import { container, stokeFillMix } from './ElementNodeContainer.css'
 
 const indicatorKeyframes = keyframes({
@@ -81,7 +81,9 @@ const shapeBase = style({
   fill: vars.element.fill,
   stroke: vars.element.stroke,
   overflow: 'visible',
-  zIndex: -1,
+  // zIndex is removed to improve rendering performance
+  // this forces to keep shape in the same layer as the node
+  // zIndex: -1,
 })
 
 export const shapeSvgMultiple = style([shapeBase, hiddenIfZoomTooSmall, {
@@ -128,6 +130,16 @@ export const shapeSvg = style([shapeBase, {
         `,
       },
     },
+    [`:where([data-likec4-level='true']) &`]: {
+      vars: {
+        [filterShadow]: `
+        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
+        drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
+        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
+
+        `,
+      },
+    },
     [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
       vars: {
         [filterShadow]: `none`,
@@ -137,6 +149,7 @@ export const shapeSvg = style([shapeBase, {
       filter: 'none',
     },
     [`${reactFlowReducedGraphics} &`]: {
+      transition: 'none',
       filter: 'none',
     },
   },

package/src/base/primitives/element/ElementTitle.css.ts

@@ -2,12 +2,14 @@ import { rem } from '@mantine/core'
 import { createVar, globalStyle, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
 import { vars } from '../../../theme-vars'
-import { iconSize, paddingSize, textSize } from './styles.css'
+import { iconSize, paddingSize, textSize } from './vars.css'
 
 export const hasIcon = style({})
 
 const textAlign = createVar('text-align')
 
+export { iconSize, paddingSize, textSize }
+
 export const title = style({
   flex: '0 0 auto',
   fontFamily: vars.element.font,
@@ -66,6 +68,7 @@ export const technology = style({
 })
 
 export const elementDataContainer = style({
+  position: 'relative',
   flex: '1',
   height: 'fit-content',
   width: 'fit-content',

package/src/base/primitives/element/ElementTitle.tsx

@@ -1,14 +1,13 @@
 import { type DiagramNode } from '@likec4/core'
 import { Box, Text } from '@mantine/core'
-import { assignInlineVars } from '@vanilla-extract/dynamic'
 import clsx from 'clsx'
 import { isNumber, isTruthy } from 'remeda'
 import { IconRenderer } from '../../../context/IconRenderer'
 import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
+import { getVarName } from '../../../utils/css'
 import type { NodeProps } from '../../types'
 import { nodeSizes } from './ElementNodeContainer'
 import * as css from './ElementTitle.css'
-import { iconSize as varIconSize } from './styles.css'
 
 type Data =
   & Pick<
@@ -27,6 +26,8 @@ type ElementTitleProps = NodeProps<Data> & {
   iconSize?: number
 }
 
+const varIconSize = getVarName(css.iconSize)
+
 export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
   const elementIcon = IconRenderer({
     element: {
@@ -47,9 +48,9 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
         'likec4-element',
       )}
       style={{
-        ...isNumber(iconSize) && assignInlineVars({
+        ...isNumber(iconSize) && {
           [varIconSize]: `${iconSize}px`,
-        }),
+        },
       }}
     >
       {elementIcon}

package/src/base/primitives/element/vars.css.ts

@@ -0,0 +1,5 @@
+import { createGlobalVar, createVar } from '@vanilla-extract/css'
+
+export const textSize = createVar('text-size')
+export const paddingSize = createVar('padding-size')
+export const iconSize = createGlobalVar('likec4-icon-size')

package/src/components/Link.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 import { mantine } from '../theme-vars'
-import { easings, transitions, whereDark } from '../theme-vars.css'
+import { easings, transitions, whereDark } from '../theme-vars'
 
 export const elementLink = style({
   display: 'flex',

package/src/components/SearchControl.css.ts

@@ -1,19 +1,18 @@
 import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { whereNotReducedGraphics } from '../LikeC4Diagram.css'
-import { mantine, transitions, vars, whereDark, whereLight } from '../theme-vars'
+import { mantine, transitions, vars, whereDark, whereLight, whereNotReducedGraphics } from '../theme-vars'
 
 const transparent = createVar('transparent')
 const bgColor = createVar('bgcolor')
 export const root = style({
-  height: '32px',
+  height: '30px',
   paddingLeft: mantine.spacing.sm,
   paddingRight: '4px',
-  borderRadius: mantine.radius.sm,
-  color: mantine.colors.placeholder,
+  borderRadius: '0px',
+  color: fallbackVar('var(--search-color)', mantine.colors.placeholder),
   border: '1px solid',
   cursor: 'pointer',
-  transition: transitions.fast,
   backgroundColor: bgColor,
+  width: '100%',
   vars: {
     [transparent]: '20%',
     [bgColor]: mantine.colors.default,
@@ -32,6 +31,8 @@ export const root = style({
       },
     },
     [`${whereNotReducedGraphics} &`]: {
+      transition: transitions.fast,
+      borderRadius: fallbackVar('var(--search-border-radius)', mantine.radius.sm),
       backgroundColor: `color-mix(in srgb, ${bgColor}, transparent ${transparent})`,
       boxShadow: mantine.shadows.xs,
       WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
@@ -51,13 +52,20 @@ globalStyle(`${root} .tabler-icon`, {
   color: mantine.colors.text,
 })
 
+export const placeholder = style({
+  fontSize: mantine.fontSizes.sm,
+  fontWeight: 500,
+  paddingRight: 50,
+  flex: 1,
+})
+
 export const shortcut = style({
   fontSize: '11px',
+  fontWeight: 600,
   lineHeight: 1,
   padding: '4px 7px',
   borderRadius: mantine.radius.sm,
   border: '1px solid',
-  fontWeight: 'bold',
   selectors: {
     [`${whereLight} &`]: {
       color: mantine.colors.gray[7],

package/src/components/SearchControl.tsx

@@ -21,10 +21,10 @@ export function SearchControl({ className, ...others }: SearchControlProps) {
     <UnstyledButton {...others} className={cx(classes.root, className)}>
       <Group gap="xs">
         <IconSearch style={{ width: rem(15), height: rem(15) }} stroke={2} />
-        <Text fz="sm" fw="500" pr={50}>
+        <Text component="div" className={classes.placeholder}>
           Search
         </Text>
-        <Text fw={700} className={classes.shortcut}>
+        <Text component="div" className={classes.shortcut}>
           {isMac ? '⌘ + K' : 'Ctrl + K'}
         </Text>
       </Group>

package/src/context/ControlsCustomLayout.ts

@@ -0,0 +1,16 @@
+import { createOptionalContext } from '@mantine/core'
+import { type ReactNode } from 'react'
+
+export type ControlsCustomLayoutProps = {
+  burgerMenu: ReactNode
+  navigationButtons: ReactNode
+  search: ReactNode
+  actionsGroup: ReactNode
+  syncInProgressBadge: ReactNode
+}
+export type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode
+
+export const [
+  ControlsCustomLayoutProvider,
+  useControlsCustomLayout,
+] = createOptionalContext<ControlsCustomLayout | null>(null)

package/src/context/DiagramFeatures.tsx

@@ -1,8 +1,7 @@
 import type { ExclusiveUnion, NonEmptyArray } from '@likec4/core'
-import { useCustomCompareEffect } from '@react-hookz/web'
-import { type PropsWithChildren, createContext, useContext, useState } from 'react'
+import { shallowEqual } from 'fast-equals'
+import { type PropsWithChildren, createContext, useContext, useEffect, useState } from 'react'
 import { map, mapToObj, pick } from 'remeda'
-import { depsShallowEqual } from '../hooks/useUpdateEffect'
 
 const FeatureNames = [
   'Controls',
@@ -87,23 +86,25 @@ export function DiagramFeatures({
     }
   }>
 >) {
-  const scope = useContext(DiagramFeaturesContext)
-  const [enabled, setFeatures] = useState(scope)
+  const outerScope = useContext(DiagramFeaturesContext)
+  const [scope, setScope] = useState(outerScope)
 
-  useCustomCompareEffect(
+  useEffect(
     () => {
-      setFeatures(validate({
-        ...scope,
-        ...features,
-        ...overrides,
-      }))
+      setScope(current => {
+        const next = validate({
+          ...outerScope,
+          ...features,
+          ...overrides,
+        })
+        return shallowEqual(current, next) ? current : next
+      })
     },
-    [scope, features, overrides],
-    depsShallowEqual,
+    [outerScope, features, overrides],
   )
 
   return (
-    <DiagramFeaturesContext.Provider value={enabled}>
+    <DiagramFeaturesContext.Provider value={scope}>
       {children}
     </DiagramFeaturesContext.Provider>
   )

package/src/context/ReduceGraphics.tsx

@@ -0,0 +1,80 @@
+import { createOptionalContext, createSafeContext } from '@mantine/core'
+import { useDebouncedCallback, useTimeout } from '@mantine/hooks'
+import { useStore } from '@nanostores/react'
+import { useStoreApi } from '@xyflow/react'
+import { type Atom, type WritableAtom, atom } from 'nanostores'
+import { type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+
+const [ReduceGraphicsModeCtx, useReducedGraphics] = createOptionalContext<boolean>()
+/**
+ * Hook to determine if reduced graphics mode is enabled.
+ */
+export function useIsReducedGraphics() {
+  const isReduced = useReducedGraphics()
+  if (isReduced === null) {
+    console.warn('ReduceGraphicsMode is not provided')
+  }
+  return isReduced ?? false
+}
+
+const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext<WritableAtom<boolean>>(
+  'PanningAtomSafeCtx is not provided',
+)
+const [LooseReduceGraphicsAtomCtx, useLooseReduceGraphicsAtom] = createOptionalContext<Atom<boolean>>()
+
+const $defaultLooseReduceGraphics = atom(false)
+/**
+ * Reduce graphics when reduced mode is enabled and pan/zoom is active.
+ */
+export function useLooseReducedGraphics() {
+  const $isPanning = useLooseReduceGraphicsAtom() ?? $defaultLooseReduceGraphics
+  return useStore($isPanning)
+}
+
+export function ReduceGraphicsContext({ reduceGraphics, children }: PropsWithChildren<{ reduceGraphics: boolean }>) {
+  // const isEnabledRef = useSyncedRef(reduceGraphics)
+
+  const $isPanningRef = useRef<WritableAtom<boolean>>(null)
+  if (!$isPanningRef.current) {
+    $isPanningRef.current = atom(reduceGraphics)
+  }
+
+  const looseReduceGraphics = useMemo(() => {
+    return reduceGraphics ? $isPanningRef.current! : atom(false)
+  }, [reduceGraphics, $isPanningRef.current])
+
+  return (
+    <PanningAtomSafeCtx value={$isPanningRef.current}>
+      <LooseReduceGraphicsAtomCtx value={looseReduceGraphics}>
+        <ReduceGraphicsModeCtx value={reduceGraphics}>
+          {children}
+        </ReduceGraphicsModeCtx>
+      </LooseReduceGraphicsAtomCtx>
+    </PanningAtomSafeCtx>
+  )
+}
+
+export function ReduceGraphicsViewportListener() {
+  const store = useStoreApi()
+  const $isPanning = usePanningAtom()
+
+  const notPanning = useTimeout(() => {
+    $isPanning.set(false)
+  }, 150)
+
+  useEffect(() => {
+    store.setState({
+      onViewportChangeStart: () => {
+        notPanning.clear()
+      },
+      onViewportChange: () => {
+        $isPanning.set(true)
+      },
+      onViewportChangeEnd: () => {
+        notPanning.start()
+      },
+    })
+  }, [$isPanning, store])
+
+  return null
+}

package/src/context/RootContainer.tsx

@@ -1,17 +1,19 @@
 import { Box } from '@mantine/core'
 import clsx from 'clsx'
 import { type PropsWithChildren, createContext, createRef, useContext, useRef } from 'react'
-import { rootClassName } from '../globals.css'
-import { useIsReducedGraphics } from '../hooks/useIsReducedGraphics'
+import { rootClassName } from '../theme-vars'
 
 const RootContainerContext = createContext(createRef<HTMLDivElement>())
 
 export function RootContainer({
   className,
+  reduceGraphics = false,
   children,
-}: PropsWithChildren<{ className?: string | undefined }>) {
+}: PropsWithChildren<{
+  className?: string | undefined
+  reduceGraphics?: boolean
+}>) {
   const ref = useRef<HTMLDivElement>(null)
-  const reduceGraphics = useIsReducedGraphics()
   return (
     <Box
       className={clsx(rootClassName, className)}

package/src/hooks/useReducedGraphics.ts

@@ -0,0 +1 @@
+export { useIsReducedGraphics, useLooseReducedGraphics } from '../context/ReduceGraphics'

package/src/index.ts

@@ -1,5 +1,6 @@
 import '@xyflow/react/dist/style.css'
 
+export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout'
 export { FramerMotionConfig } from './context/FramerMotionConfig'
 export { LikeC4Diagram } from './LikeC4Diagram'
 export type { LikeC4DiagramProps } from './LikeC4Diagram'