@likec4/diagram 1.24.1 → 1.25.0

package/src/base/primitives/compound/CompoundActionButton.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
-import { transitions, vars } from '../../../theme-vars'
+import { vars } from '../../../theme-vars'
 
 export const container = style({
   position: 'absolute',
@@ -11,21 +11,12 @@ export const container = style({
   // display: 'flex',
   // justifyContent: 'center',
   // alignItems: 'center',
-  zIndex: 10,
-})
-
-export const actionButton = style({
-  width: 'min-content',
-  height: 'min-content',
-  // display: 'flex',
-  // justifyContent: 'center',
-  // alignItems: 'center',
 })
 
 export const actionIcon = style({
   opacity: 0.45,
   color: `var(--_compound-title-color,${vars.element.loContrast})`,
-  transition: transitions.fast,
+  // transition: transitions.fast,
   'vars': {
     '--ai-color-hover': vars.element.hiContrast,
     '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
@@ -33,7 +24,7 @@ export const actionIcon = style({
     '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
     '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`,
   },
-  background: `var(--ai-bg)`,
+  // background: `var(--ai-bg)`,
   boxShadow: '1px 1px 3px 0px transparent',
   selectors: {
     [`:where([data-mantine-color-scheme='light'] [data-compound-transparent="true"]) &`]: {
@@ -46,8 +37,8 @@ export const actionIcon = style({
     },
     [`:where([data-hovered='true']) &`]: {
       opacity: 1,
-      transitionDelay: '100ms',
-      transitionDuration: '300ms',
+      // transitionDelay: '100ms',
+      // transitionDuration: '300ms',
       // boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
       // color: `var(--ai-color-hover)`,
       // vars: {

package/src/base/primitives/compound/CompoundActionButton.tsx

@@ -21,9 +21,9 @@ export function CompoundActionButton({
 }: CompoundActionButtonProps) {
   return (
     <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'compound-action')}>
-      <Box
-        className={clsx('nodrag nopan', css.actionButton)}
-        component={m.div}
+      <ActionIcon
+        className={clsx('nodrag nopan', css.actionIcon)}
+        component={m.button}
         initial={false}
         animate={{
           scale: isHovered ? 1.2 : 1,
@@ -36,18 +36,14 @@ export function CompoundActionButton({
           // y: 1,
         }}
         whileTap={{ scale: 1 }}
+        size={'md'}
+        radius="md"
+        // Otherwise node receives click event and is selected
+        onClick={onClick}
+        onDoubleClick={stopPropagation}
       >
-        <ActionIcon
-          className={css.actionIcon}
-          size={'md'}
-          radius="md"
-          // Otherwise node receives click event and is selected
-          onClick={onClick}
-          onDoubleClick={stopPropagation}
-        >
-          {icon ?? <IconZoomScan stroke={2} />}
-        </ActionIcon>
-      </Box>
+        {icon ?? <IconZoomScan stroke={2} />}
+      </ActionIcon>
     </Box>
   )
 }

package/src/base/primitives/compound/CompoundDetailsButton.css.ts

@@ -6,7 +6,6 @@ export const container = style({
   position: 'absolute',
   top: 2,
   right: 2,
-  zIndex: 10,
 })
 
 const btnColor = createVar('navigateBtnColor')
@@ -26,7 +25,6 @@ export const actionIcon = style({
   pointerEvents: 'all',
   cursor: 'pointer',
   color: `var(--_compound-title-color,${btnColor})`,
-  backgroundColor: 'var(--ai-bg)',
   'vars': {
     '--ai-color-hover': vars.element.hiContrast,
     '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,

package/src/base/primitives/compound/CompoundDetailsButton.tsx

@@ -21,9 +21,9 @@ export function CompoundDetailsButton({
 }: CompoundDetailsButtonProps) {
   return (
     <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'details-button')} onClick={stopPropagation}>
-      <Box
+      <ActionIcon
         component={m.div}
-        className={clsx('nodrag nopan', css.actionIconWrapper)}
+        className={clsx('nodrag nopan', css.actionIcon)}
         initial={false}
         style={{
           originX: 0.45,
@@ -40,16 +40,12 @@ export function CompoundDetailsButton({
           scale: 1.42,
         }}
         whileTap={{ scale: 1.15 }}
-      >
-        <ActionIcon
-          className={css.actionIcon}
-          size={'md'}
-          radius="md"
-          onClick={onClick}
-          onDoubleClick={stopPropagation}>
-          {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
-        </ActionIcon>
-      </Box>
+        size={'md'}
+        radius="md"
+        onClick={onClick}
+        onDoubleClick={stopPropagation}>
+        {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
+      </ActionIcon>
     </Box>
   )
 }

package/src/base/primitives/compound/CompoundNodeContainer.css.ts

@@ -1,7 +1,6 @@
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { easings, vars, whereLight } from '../../../theme-vars'
+import { easings, vars, whereLight, whereNotReducedGraphics } from '../../../theme-vars'
 
 export const varCompoundOpacity = createVar('opacity')
 export const varBorderRadius = createVar('borderRadius')
@@ -20,7 +19,6 @@ export const container = style({
   padding: 0,
   margin: 0,
   border: '0px solid transparent',
-  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
   ':before': {
     borderRadius: varBorderRadius,
     content: ' ',
@@ -41,6 +39,9 @@ export const container = style({
       opacity: varCompoundOpacity,
       borderWidth: calc(varBorderWidth).subtract('1px').toString(),
     },
+    [`${whereNotReducedGraphics} &`]: {
+      boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
+    },
     [`${whereNotReducedGraphics} &:is([data-compound-transparent="true"]):before`]: {
       transition: `all 200ms ${easings.inOut}`,
     },

package/src/base/primitives/compound/CompoundNodeContainer.tsx

@@ -60,8 +60,8 @@ export const CompoundNodeContainer = createPolymorphicComponent<'div', CompoundN
 
     const [opacity] = useDebouncedValue(Math.round(_opacity * 100) / 100, isHovered ? 200 : 50)
 
-    const MAX_TRANSPARENCY = 40
-    const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
+    const MAX_TRANSPARENCY = 65
+    const borderTransparency = clamp(MAX_TRANSPARENCY - 0.8 * opacity * MAX_TRANSPARENCY, {
       min: 0,
       max: MAX_TRANSPARENCY,
     })

package/src/base/primitives/compound/CompoundTitle.css.ts

@@ -1,7 +1,7 @@
 import { rem } from '@mantine/core'
 import { globalStyle, style } from '@vanilla-extract/css'
-import { hiddenIfZoomTooSmall, whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { vars } from '../../../theme-vars'
+import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
+import { vars, whereNotReducedGraphics } from '../../../theme-vars'
 
 export const compoundTitle = style([hiddenIfZoomTooSmall, {
   position: 'absolute',

package/src/base/primitives/customNode.ts

@@ -11,7 +11,7 @@ export const nodePropsEqual = <P extends Record<string, unknown> = Base.NodeData
   && eq(prev.dragging ?? false, next.dragging ?? false)
   && eq(prev.width ?? 0, next.width ?? 0)
   && eq(prev.height ?? 0, next.height ?? 0)
-  && eq(prev.zIndex, next.zIndex)
+  && eq(prev.zIndex ?? 0, next.zIndex ?? 0)
   // we can ignore position, as custom nodes positioned relative to it's NodeRenderer
   // && eq(prev.positionAbsoluteX, next.positionAbsoluteX)
   // && eq(prev.positionAbsoluteY, next.positionAbsoluteY)

package/src/base/primitives/edge/EdgeContainer.tsx

@@ -1,4 +1,4 @@
-import type { DiagramEdge } from '@likec4/core'
+import { type DiagramEdge, invariant } from '@likec4/core'
 import clsx from 'clsx'
 import { type PropsWithChildren } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'
@@ -15,12 +15,14 @@ type Data = UndefinedOnPartialDeep<
 
 type EdgeContainerProps = PropsWithChildren<
   EdgeProps<Data> & {
+    component?: 'g' | 'svg' | undefined
     className?: string | undefined
   }
 >
 
 export function EdgeContainer({
   className,
+  component = 'g',
   data: {
     hovered: isHovered = false,
     active: isActive = false,
@@ -29,20 +31,31 @@ export function EdgeContainer({
   },
   children,
 }: EdgeContainerProps) {
+  const props = {
+    className: clsx(
+      css.edgeContainer,
+      className,
+    ),
+    'data-likec4-color': data.color ?? 'gray',
+    'data-edge-dir': data.dir ?? 'forward',
+    'data-edge-active': isActive,
+    'data-edge-animated': isActive,
+    'data-edge-hovered': isHovered,
+    ...(isDimmed !== false && {
+      'data-edge-dimmed': isDimmed,
+    }),
+  }
+  if (component === 'svg') {
+    return (
+      <svg {...props}>
+        {children}
+      </svg>
+    )
+  }
+  invariant(component === 'g', 'EdgeContainer: component must be "g" or "svg"')
+
   return (
-    <g
-      className={clsx(
-        css.edgeContainer,
-        className,
-      )}
-      data-likec4-color={data.color ?? 'gray'}
-      data-edge-dir={data.dir ?? 'forward'}
-      data-edge-active={isActive}
-      data-edge-animated={isActive}
-      data-edge-hovered={isHovered}
-      {...isDimmed !== false && {
-        'data-edge-dimmed': isDimmed,
-      }}>
+    <g {...props}>
       {children}
     </g>
   )

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

@@ -1,7 +1,15 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { easings, mantine, transitions, vars, whereDark, whereLight, xyvars } from '../../../theme-vars'
+import {
+  easings,
+  mantine,
+  transitions,
+  vars,
+  whereDark,
+  whereLight,
+  whereNotReducedGraphics,
+  xyvars,
+} from '../../../theme-vars'
 import { edgeVars, mixColor } from './edge.css'
 
 const labelBorderRadius = 4
@@ -43,19 +51,8 @@ export const edgeLabelContainer = style([edgeVars, {
   width: 'auto',
   height: 'auto',
   backgroundColor: xyvars.edge.labelBgColor,
-  borderRadius: labelBorderRadius,
   border: '0px solid transparent',
-  transform: varTranslate,
-  transition: transitions.fast,
-  vars: {
-    [varTranslate]: `translate(0,0)`,
-  },
   selectors: {
-    '&[data-edge-hovered="true"]': {
-      mixBlendMode: 'normal',
-      transition: `all 190ms ${easings.inOut}`,
-      transform: `${varTranslate} scale(1.12)`,
-    },
     [`&:is([data-edge-dimmed="true"])`]: {
       opacity: 0.2,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
@@ -68,7 +65,14 @@ export const edgeLabelContainer = style([edgeVars, {
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
     },
     [`${whereNotReducedGraphics} &`]: {
+      borderRadius: labelBorderRadius,
       mixBlendMode: 'plus-lighter',
+      transform: varTranslate,
+      transition: transitions.fast,
+    },
+    [`${whereNotReducedGraphics} &[data-edge-hovered="true"]`]: {
+      transition: `all 190ms ${easings.inOut}`,
+      transform: `${varTranslate} scale(1.12)`,
     },
     [`${whereLight} ${whereNotReducedGraphics} &`]: {
       mixBlendMode: 'screen',
@@ -150,7 +154,7 @@ export const edgeNoteCloseButton = style({
   position: 'absolute',
   top: 4,
   right: 4,
-  zIndex: 9,
+  // zIndex: 9,
 })
 
 export const edgeNoteText = style({
@@ -172,7 +176,7 @@ export const edgeNoteText = style({
 })
 
 export const actionBtn = style({
-  zIndex: 'calc(var(--layer-overlays, 1) + 1)',
+  // zIndex: 'calc(var(--layer-overlays, 1) + 1)',
   pointerEvents: 'all',
   color: xyvars.edge.labelColor,
   cursor: 'pointer',

package/src/base/primitives/edge/EdgeLabel.tsx

@@ -1,12 +1,12 @@
 import { type DiagramEdge, extractStep, isStepEdgeId } from '@likec4/core'
 import { type BoxProps, Box, createPolymorphicComponent, Text } from '@mantine/core'
-import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { EdgeLabelRenderer } from '@xyflow/react'
 import clsx from 'clsx'
 import { type PropsWithChildren, forwardRef } from 'react'
 import { isNumber, isTruthy } from 'remeda'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
+import { getVarName } from '../../../utils/css'
 import { ZIndexes } from '../../const'
 import type { EdgeProps } from '../../types'
 import * as css from './EdgeLabel.css'
@@ -41,6 +41,8 @@ const toCssVarValue = (value: number | string | undefined) => {
   return isNumber(value) ? `${value}px` : value
 }
 
+const varTranslate = getVarName(css.varTranslate)
+
 export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
   forwardRef<HTMLDivElement, EdgeLabelProps>(({
     edgeProps: {
@@ -75,7 +77,6 @@ export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
     if (labelX === undefined || labelY === undefined || isZoomTooSmall) {
       return null
     }
-
     const translate = labelXY?.translate
 
     return (
@@ -96,13 +97,9 @@ export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
           style={{
             top: toCssVarValue(labelY),
             left: toCssVarValue(labelX),
-            // ...assignInlineVars({
-            //   [css.varLabelX]: toCssVarValue(labelX),
-            //   [css.varLabelY]: toCssVarValue(labelY),
-            // }),
-            ...(translate && assignInlineVars({
-              [css.varTranslate]: translate,
-            })),
+            ...(translate && {
+              [varTranslate]: translate,
+            }),
             ...(labelBBox && {
               maxWidth: labelBBox.width + 18,
             }),

package/src/base/primitives/edge/EdgePath.tsx

@@ -2,6 +2,7 @@ import type { DiagramEdge } from '@likec4/core'
 import clsx from 'clsx'
 import { type PointerEventHandler, forwardRef } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'
+import { useIsReducedGraphics } from '../../../hooks/useIsReducedGraphics'
 import type { EdgeProps } from '../../types'
 import * as css from './edge.css'
 import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers'
@@ -36,6 +37,7 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
   interactionWidth,
   onEdgePointerDown,
 }, svgPathRef) => {
+  const isReducedGraphicsMode = useIsReducedGraphics()
   let markerStartName = arrowTypeToMarker(tail)
   let markerEndName = arrowTypeToMarker(head ?? 'normal')
   if (dir === 'back') {
@@ -57,32 +59,42 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
 
   return (
     <>
-      <path
-        className={clsx('react-flow__edge-interaction')}
-        d={svgPath}
-        fill="none"
-        stroke={'transparent'}
-        strokeWidth={interactionWidth ?? 10}
-      />
+      {!isReducedGraphicsMode && (
+        <path
+          className={clsx('react-flow__edge-interaction')}
+          d={svgPath}
+          fill="none"
+          stroke={'transparent'}
+          strokeWidth={interactionWidth ?? 10}
+        />
+      )}
       <g className={css.markerContext} onPointerDown={onEdgePointerDown}>
         <defs>
           {MarkerStart && <MarkerStart id={'start' + id} />}
           {MarkerEnd && <MarkerEnd id={'end' + id} />}
         </defs>
-        <path
-          className={clsx('react-flow__edge-path', css.edgePathBg)}
-          d={svgPath}
-          style={style}
-          strokeLinecap={'round'}
-        />
+        {!isReducedGraphicsMode && (
+          <path
+            className={clsx('react-flow__edge-path', css.edgePathBg)}
+            d={svgPath}
+            style={style}
+            strokeLinecap={'round'}
+          />
+        )}
         <path
           ref={svgPathRef}
-          className={clsx('react-flow__edge-path', css.cssEdgePath)}
+          className={clsx(
+            'react-flow__edge-path',
+            isReducedGraphicsMode && 'react-flow__edge-interaction',
+            css.cssEdgePath,
+          )}
           d={svgPath}
           style={style}
           strokeWidth={strokeWidth}
-          strokeLinecap={'round'}
-          strokeDasharray={strokeDasharray}
+          {...!isReducedGraphicsMode && {
+            strokeLinecap: 'round',
+            strokeDasharray: strokeDasharray,
+          }}
           markerStart={MarkerStart ? `url(#start${id})` : undefined}
           markerEnd={MarkerEnd ? `url(#end${id})` : undefined}
         />

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

@@ -1,12 +1,8 @@
 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, xyvars } from '../../../theme-vars'
 
 export const mixColor = createVar('mix-color')
 
@@ -15,7 +11,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 +19,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%)`,
       },
     },
@@ -77,14 +73,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 +89,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({
@@ -116,12 +115,14 @@ const strokeKeyframes = keyframes({
 })
 
 export const cssEdgePath = style({
-  animationDuration: '800ms',
-  animationIterationCount: 'infinite',
-  animationTimingFunction: 'linear',
-  animationFillMode: 'both',
-  strokeDashoffset: 10,
   selectors: {
+    [`${whereNotReducedGraphics} &`]: {
+      animationDuration: '800ms',
+      animationIterationCount: 'infinite',
+      animationTimingFunction: 'linear',
+      animationFillMode: 'both',
+      strokeDashoffset: 10,
+    },
     [`${reactFlow} :where([data-edge-hovered='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '450ms',

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/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>
   )
 }