@likec4/diagram 1.23.1 → 1.24.1

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

@@ -1,4 +1,5 @@
-import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { createVar, fallbackVar, style } from '@vanilla-extract/css'
+import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
 import { easings, vars } from '../../../theme-vars'
 
 export const stokeFillMix = createVar('stroke-fill-mix')
@@ -15,12 +16,6 @@ export const container = style({
   vars: {
     [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`,
   },
-  // selectors: {
-  //   ':where(.react-flow__node.selected) &': {
-  //     willChange: 'transform',
-  //   },
-  // },
-  // Catch pointer below the element
   ':after': {
     content: ' ',
     position: 'absolute',
@@ -31,19 +26,21 @@ export const container = style({
     background: 'transparent',
     pointerEvents: 'all',
   },
-})
-
-globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="true"])`, {
-  opacity: 0.25,
-  transition: `opacity 400ms ${easings.inOut}, filter 500ms ${easings.inOut}`,
-  transitionDelay: '50ms',
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
-  willChange: 'opacity, filter',
-})
 
-globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="immediate"])`, {
-  opacity: 0.25,
-  transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
-  willChange: 'opacity, filter',
+  selectors: {
+    [`&:is([data-likec4-dimmed="true"])`]: {
+      opacity: 0.25,
+      transition: `opacity 400ms ${easings.inOut}, filter 500ms ${easings.inOut}`,
+      transitionDelay: '50ms',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
+    },
+    [`&:is([data-likec4-dimmed="immediate"])`]: {
+      opacity: 0.25,
+      transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
+    },
+    [`${reactFlowReducedGraphics} &:after`]: {
+      display: 'none',
+    },
+  },
 })

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

@@ -9,6 +9,7 @@ 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'
 
@@ -63,6 +64,7 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
     children,
     ...rest
   }, ref) => {
+    const nonReducedGraphics = !useIsReducedGraphics()
     let scale = 1
     switch (true) {
       case isHovered:
@@ -88,7 +90,7 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
           'likec4-element-node',
         ])}
         initial={false}
-        {...selectable && {
+        {...selectable && nonReducedGraphics && {
           animate: {
             scale,
           },

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

@@ -1,4 +1,5 @@
 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 { container, stokeFillMix } from './ElementNodeContainer.css'
 
@@ -19,7 +20,7 @@ const outlineColor = fallbackVar(
 
 const indicatorStroke = createVar('indicator-stroke')
 
-export const indicator = style({
+export const indicator = style([hiddenIfZoomTooSmall, {
   stroke: indicatorStroke,
   fill: 'none',
   transformOrigin: 'center center',
@@ -36,6 +37,8 @@ export const indicator = style({
   selectors: {
     ':where(.react-flow__node.selected) &': {
       visibility: 'visible',
+    },
+    [`${whereNotReducedGraphics} :where(.react-flow__node.selected)  &`]: {
       animationName: fallbackVar(vars.safariAnimationHook, indicatorKeyframes),
     },
     [`:where(.react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
@@ -52,7 +55,7 @@ export const indicator = style({
       },
     },
   },
-})
+}])
 
 export const fillElementFill = style({
   fill: vars.element.fill,
@@ -81,7 +84,7 @@ const shapeBase = style({
   zIndex: -1,
 })
 
-export const shapeSvgMultiple = style([shapeBase, {
+export const shapeSvgMultiple = style([shapeBase, hiddenIfZoomTooSmall, {
   transformOrigin: '50% 25%',
   transform: 'translate(14px, 14px) perspective(300px) translateZ(-8px)',
   filter: ' brightness(0.65) saturate(0.8)',
@@ -131,9 +134,10 @@ export const shapeSvg = style([shapeBase, {
       },
     },
     [`:where([data-likec4-zoom-small="true"]) &`]: {
-      vars: {
-        [filterShadow]: `none`,
-      },
+      filter: 'none',
+    },
+    [`${reactFlowReducedGraphics} &`]: {
+      filter: 'none',
     },
   },
 }])

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

@@ -185,7 +185,7 @@ export function ElementShape(
   return (
     <>
       {isMultiple && (
-        <svg className={clsx(css.shapeSvgMultiple, hiddenIfZoomTooSmall)} viewBox={`0 0 ${w} ${h}`}>
+        <svg className={clsx(css.shapeSvgMultiple)} viewBox={`0 0 ${w} ${h}`}>
           <ElementShapeSvg shape={data.shape} w={w} h={h} />
         </svg>
       )}
@@ -223,5 +223,5 @@ export function SelectedIndicator({ shape, w, h }: ElementShapeProps) {
       break
     }
   }
-  return <g className={clsx(css.indicator, hiddenIfZoomTooSmall)}>{svg}</g>
+  return <g className={css.indicator}>{svg}</g>
 }

package/src/components/SearchControl.css.ts

@@ -1,4 +1,5 @@
 import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { whereNotReducedGraphics } from '../LikeC4Diagram.css'
 import { mantine, transitions, vars, whereDark, whereLight } from '../theme-vars'
 
 const transparent = createVar('transparent')
@@ -9,13 +10,10 @@ export const root = style({
   paddingRight: '4px',
   borderRadius: mantine.radius.sm,
   color: mantine.colors.placeholder,
-  boxShadow: mantine.shadows.xs,
   border: '1px solid',
   cursor: 'pointer',
   transition: transitions.fast,
-  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  backgroundColor: `color-mix(in srgb, ${bgColor}, transparent ${transparent})`,
+  backgroundColor: bgColor,
   vars: {
     [transparent]: '20%',
     [bgColor]: mantine.colors.default,
@@ -33,6 +31,12 @@ export const root = style({
         [bgColor]: mantine.colors.dark[6],
       },
     },
+    [`${whereNotReducedGraphics} &`]: {
+      backgroundColor: `color-mix(in srgb, ${bgColor}, transparent ${transparent})`,
+      boxShadow: mantine.shadows.xs,
+      WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+      backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+    },
   },
   ':hover': {
     borderColor: mantine.colors.defaultBorder,
@@ -58,6 +62,9 @@ export const shortcut = style({
     [`${whereLight} &`]: {
       color: mantine.colors.gray[7],
       borderColor: mantine.colors.gray[2],
+      backgroundColor: mantine.colors.gray[2],
+    },
+    [`${whereLight} ${whereNotReducedGraphics} &`]: {
       backgroundColor: `color-mix(in srgb, ${mantine.colors.gray[2]}, transparent 20%)`,
     },
     [`${whereDark} &`]: {

package/src/context/FramerMotionConfig.tsx

@@ -2,11 +2,22 @@ import { useMantineStyleNonce } from '@mantine/core'
 import { domMax, LazyMotion, MotionConfig } from 'framer-motion'
 import { type PropsWithChildren } from 'react'
 
-export const FramerMotionConfig = ({ children }: PropsWithChildren) => {
+export const FramerMotionConfig = ({
+  reducedMotion = 'user',
+  children,
+}: PropsWithChildren<{
+  /**
+   * If true, will respect the device prefersReducedMotion setting by switching
+   * transform animations off.
+   *
+   * @public
+   */
+  reducedMotion?: 'always' | 'never' | 'user'
+}>) => {
   const nonce = useMantineStyleNonce()?.()
   return (
     <LazyMotion features={domMax} strict>
-      <MotionConfig {...nonce && { nonce }}>
+      <MotionConfig reducedMotion={reducedMotion} {...nonce && { nonce }}>
         {children}
       </MotionConfig>
     </LazyMotion>

package/src/context/RootContainer.tsx

@@ -1,7 +1,8 @@
 import { Box } from '@mantine/core'
 import clsx from 'clsx'
-import { type PropsWithChildren, type RefObject, createContext, createRef, useContext, useRef } from 'react'
+import { type PropsWithChildren, createContext, createRef, useContext, useRef } from 'react'
 import { rootClassName } from '../globals.css'
+import { useIsReducedGraphics } from '../hooks/useIsReducedGraphics'
 
 const RootContainerContext = createContext(createRef<HTMLDivElement>())
 
@@ -10,8 +11,14 @@ export function RootContainer({
   children,
 }: PropsWithChildren<{ className?: string | undefined }>) {
   const ref = useRef<HTMLDivElement>(null)
+  const reduceGraphics = useIsReducedGraphics()
   return (
-    <Box className={clsx(rootClassName, className)} ref={ref}>
+    <Box
+      className={clsx(rootClassName, className)}
+      ref={ref}
+      {...reduceGraphics && {
+        ['data-likec4-reduced-graphics']: true,
+      }}>
       <RootContainerContext.Provider value={ref}>
         {children}
       </RootContainerContext.Provider>

package/src/globals.css.ts

@@ -6,6 +6,9 @@ import { mantine, vars, whereDark } from './theme-vars'
 
 export const rootClassName = 'likec4-diagram-root'
 
+export const whereReducedGraphics = `:where(.${rootClassName}:is([data-likec4-reduced-graphics="true"]))`
+export const whereNotReducedGraphics = `:where(.${rootClassName}:not([data-likec4-reduced-graphics]))`
+
 globalStyle(`.${rootClassName}`, {
   overflow: 'hidden',
   position: 'relative',

package/src/hooks/safeContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, use } from 'react'
+import { createSafeContext } from '@mantine/core'
+import { createContext, use, useContext } from 'react'
 import type { DiagramActorRef } from '../state/types'
 
 /**

package/src/hooks/useDiagram.ts

@@ -18,6 +18,7 @@ export function useDiagram() {
   const actor = useDiagramActorRef()
   const [, startTransition] = useTransition()
   return useMemo(() => ({
+    actor,
     send: actor.send,
     navigateTo: (viewId: ViewId, fromNode?: NodeId) => {
       startTransition(() => {

package/src/hooks/useIsReducedGraphics.ts

@@ -0,0 +1,5 @@
+import { createSafeContext } from '@mantine/core'
+
+export const [ReducedGraphicsContext, useIsReducedGraphics] = createSafeContext<boolean>(
+  'ReducedGraphicsContext is not provided',
+)

package/src/hooks/useXYFlow.ts

@@ -20,7 +20,7 @@ export type XYStoreApi = ReturnType<typeof useXYStoreApi>
 
 export const useXYInternalNode = useInternalNode<Types.Node>
 
-const selectZoom = (state: ReactFlowState) => state.transform[2] < 0.2
+const selectZoom = (state: ReactFlowState) => state.transform[2] < 0.25
 export function useIsZoomTooSmall() {
   return useStore(selectZoom)
 }

package/src/likec4diagram/DiagramUI.tsx

@@ -1,16 +1,17 @@
+import { memo } from 'react'
 import { useEnabledFeatures } from '../context'
 import { useDiagramActorSnapshot } from '../hooks/useDiagram'
 import { Overlays } from '../overlays/Overlays'
 import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
-export function DiagramUI() {
+export const DiagramUI = memo(() => {
   const {
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough,
   } = useEnabledFeatures()
 
-  const overlaysActorRef = useDiagramActorSnapshot(s => s.children.overlays)
+  const overlaysActorRef = useDiagramActorSnapshot(s => s.children.overlays, Object.is)
 
   return (
     <>
@@ -21,4 +22,5 @@ export function DiagramUI() {
       {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
     </>
   )
-}
+})
+DiagramUI.displayName = 'DiagramUI'

package/src/likec4diagram/custom/nodes/nodeTypes.tsx

@@ -39,7 +39,7 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }: NodeProps<Types.Node
 export const nodeTypes = {
   element: customNode<Types.ElementNodeData>((props) => (
     <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} isMultiple={props.data.isMultiple} />
+      <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
       <ElementTitle {...props} />
       <ElementActions {...props} />
       <ElementDetailsButtonWithHandler
@@ -53,7 +53,7 @@ export const nodeTypes = {
   )),
   deployment: customNode<Types.DeploymentElementNodeData>((props) => (
     <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} isMultiple={props.data.isMultiple} />
+      <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
       <ElementTitle {...props} />
       <DeploymentElementActions {...props} />
       {!!props.data.modelFqn && (

package/src/likec4diagram/ui/controls/styles.css.ts

@@ -1,6 +1,7 @@
 import { rem } from '@mantine/core'
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
+import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
 import { mantine, vars } from '../../../theme-vars'
 
 export const navigationButtons = style({
@@ -14,6 +15,11 @@ export const panel = style({
   top: fallbackVar(vars.navigationPanel.top, '1rem'),
   left: fallbackVar(vars.navigationPanel.left, '1rem'),
   margin: 0,
+  pointerEvents: 'none',
+})
+
+globalStyle(`${panel} :where(button, .action-icon)`, {
+  pointerEvents: 'all',
 })
 
 globalStyle(`.likec4-top-left-panel .action-icon`, {
@@ -27,7 +33,11 @@ globalStyle(`.likec4-top-left-panel .action-icon .tabler-icon`, {
 })
 
 export const actionIconGroup = style({
-  boxShadow: mantine.shadows.md,
+  selectors: {
+    [`${whereNotReducedGraphics} &`]: {
+      boxShadow: mantine.shadows.md,
+    },
+  },
 })
 
 export const autolayoutIcon = style({})

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.ts

@@ -1,4 +1,5 @@
 import { fallbackVar, style } from '@vanilla-extract/css'
+import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
 import { mantine, vars, whereDark } from '../../../theme-vars'
 
 export const container = style({
@@ -12,9 +13,7 @@ export const card = style({
   cursor: 'default',
   minWidth: 200,
   maxWidth: 'calc(100vw - 16px)',
-  backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
-  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  backgroundColor: mantine.colors.body,
   '@media': {
     [mantine.largerThan('sm')]: {
       minWidth: 250,
@@ -27,6 +26,14 @@ export const card = style({
   },
   selectors: {
     [`${whereDark} &`]: {
+      backgroundColor: mantine.colors.dark[6],
+    },
+    [`${whereNotReducedGraphics} &`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
+      WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+      backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+    },
+    [`${whereDark} ${whereNotReducedGraphics} &`]: {
       backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`,
     },
   },

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx

@@ -41,7 +41,6 @@ export function DiagramTitlePanel() {
       }
       {isNotActiveWalkthrough && (
         <m.div
-          key={id}
           initial={{ opacity: 0.05, scale: 0.7 }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{
@@ -126,10 +125,14 @@ export function DiagramTitlePanel() {
                   <Spoiler
                     maxHeight={42}
                     showLabel={
-                      <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>show more</Button>
+                      <Button component={'div'} color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>
+                        show more
+                      </Button>
                     }
                     hideLabel={
-                      <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>hide</Button>
+                      <Button component={'div'} color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>
+                        hide
+                      </Button>
                     }>
                     <Text
                       component={'div'}

package/src/likec4diagram/ui/search/LikeC4Search.css.ts

@@ -1,5 +1,6 @@
 import { rem } from '@mantine/core'
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { reactFlow } from '../../../LikeC4Diagram.css'
 import { mantine } from '../../../theme-vars'
 import { vars, whereDark, whereLight } from '../../../theme-vars.css'
 import { button, buttonFocused } from './_shared.css'