@likec4/diagram 1.26.1 → 1.27.0

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

@@ -1,11 +1,12 @@
+import { css, cx } from '@likec4/styles/css'
+import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
+import { useDebouncedValue } from '@mantine/hooks'
 import { IconId } from '@tabler/icons-react'
-import clsx from 'clsx'
 import { m } from 'framer-motion'
-import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
-import * as css from './CompoundDetailsButton.css'
+import { compoundActionBtn } from './actionbtns.css'
 
 type CompoundDetailsButtonProps = NodeProps & {
   icon?: React.ReactNode
@@ -19,33 +20,55 @@ export function CompoundDetailsButton({
   icon,
   onClick,
 }: CompoundDetailsButtonProps) {
+  // Debounce first "isHovered"
+  const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)
+  const isHoverDebounced = debounced[0] && isHovered
   return (
-    <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'details-button')} onClick={stopPropagation}>
-      <ActionIcon
-        component={m.div}
-        className={clsx('nodrag nopan', css.actionIcon)}
+    <Box
+      className={cx(
+        css({
+          position: 'absolute',
+          top: '[2px]',
+          right: '[2px]',
+          _smallZoom: {
+            display: 'none',
+          },
+        }),
+        'details-button',
+      )}
+      onClick={stopPropagation}>
+      <m.div
         initial={false}
-        style={{
-          originX: 0.45,
-          originY: 0.55,
+        animate={{
+          scale: isHoverDebounced ? 1.2 : 1,
+          opacity: isHoverDebounced ? 1 : 0.6,
         }}
-        animate={isHovered
-          ? {
-            scale: 1.2,
-          }
-          : {
-            scale: 1,
-          }}
         whileHover={{
-          scale: 1.42,
+          scale: 1.4,
         }}
-        whileTap={{ scale: 1.15 }}
-        size={'md'}
-        radius="md"
-        onClick={onClick}
-        onDoubleClick={stopPropagation}>
-        {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
-      </ActionIcon>
+        whileTap={{ scale: 1 }}
+      >
+        <ActionIcon
+          className={cx(
+            'nodrag nopan',
+            compoundActionBtn({
+              delay: isHovered && !isHoverDebounced,
+            }),
+            css({
+              _whenHovered: {
+                opacity: .75,
+              },
+              _hover: {
+                opacity: 1,
+              },
+            }),
+            actionBtn({ variant: 'transparent' }),
+          )}
+          onClick={onClick}
+          onDoubleClick={stopPropagation}>
+          {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
+        </ActionIcon>
+      </m.div>
     </Box>
   )
 }

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

@@ -1,111 +1,96 @@
-import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { calc } from '@vanilla-extract/css-utils'
-import { easings, vars, whereLight, whereNotReducedGraphics } from '../../../theme-vars'
+import { css, sva } from '@likec4/styles/css'
+// import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
+// import { calc } from '@vanilla-extract/css-utils'
+// import { easings, vars, whereLight, whereNotReducedGraphics } from '../../../theme-vars'
 
-export const varCompoundOpacity = createVar('opacity')
-export const varBorderRadius = createVar('borderRadius')
-export const varBorderTransparency = createVar('borderTransparency')
-export const varBorderColor = createVar('border-color')
-const varBorderWidth = createVar('border-width')
+// export const _compoundOpacity = '--_compound-opacity'
+// const compoundOpacity = `var(${_compoundOpacity})`
+// // const varCompoundOpacity = createVar('compound-opacity')
 
-export const container = style({
-  vars: {
-    [varBorderRadius]: '6px',
-    [varBorderWidth]: '3px',
-  },
+// export const _borderTransparency = '--_compound-border-transparency'
+// const borderTransparency = `var(${_borderTransparency})`
+
+// export const _borderWidth =
+// const borderWidth = `var(${_borderWidth})`
+export const borderWidth = {
+  var: '--_border-width',
+  ref: 'var(--_border-width, 2px)',
+} as const
+
+export const borderRadius = {
+  var: '--_border-radius',
+  ref: 'var(--_border-radius, 4px)',
+} as const
+
+export const compoundOpacity = {
+  var: '--_compound-opacity',
+  ref: 'var(--_compound-opacity, 1)',
+} as const
+
+export const borderOpacityPercent = {
+  var: '--_border-opacity-percent',
+  ref: 'var(--_border-opacity-percent, 100%)',
+} as const
+
+const root = css.raw({
   position: 'relative',
   width: '100%',
   height: '100%',
-  padding: 0,
-  margin: 0,
-  border: '0px solid transparent',
-  ':before': {
-    borderRadius: varBorderRadius,
-    content: ' ',
+  padding: '0',
+  margin: '0',
+  border: 'transparent',
+  pointerEvents: 'none',
+  _before: {
+    borderRadius: borderRadius.ref,
+    content: '" "',
     position: 'absolute',
-    top: 0,
-    left: 0,
+    top: '0',
+    left: '0',
     width: '100%',
     height: '100%',
-    border: '0px solid transparent',
-    background: vars.element.fill,
+    border: 'transparent',
+    background: 'likec4.palette.fill',
     backgroundClip: 'padding-box',
+    transitionDelay: '.075ms',
   },
-  selectors: {
-    [`&:is([data-compound-transparent="true"])`]: {
-      boxShadow: 'none',
-    },
-    [`&:is([data-compound-transparent="true"]):before`]: {
-      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}`,
+  _noReduceGraphics: {
+    _before: {
+      transition: `all {durations.slow} {easings.inOut}`,
     },
-    [`:where(.react-flow__node.dragging) &`]: {
-      boxShadow: 'none',
-    },
-    [`&:is([data-likec4-dimmed="true"])`]: {
-      opacity: 0.25,
-      transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
-      transitionDelay: '200ms',
-      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-    },
-    [`&:is([data-likec4-dimmed="immediate"])`]: {
-      opacity: 0.25,
-      transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
-      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+    '&[data-likec4-hovered=\'true\']': {
+      _before: {
+        transitionDelay: '.2s',
+        transitionTimingFunction: 'in',
+      },
     },
   },
-})
-
-globalStyle(`:where([data-mantine-color-scheme='dark'] [data-compound-transparent="true"])`, {
-  vars: {
-    ['--_compound-border-color']: `color-mix(in srgb, ${vars.compound.titleColor} 25%, ${vars.element.stroke})`,
-  },
-})
-globalStyle(`:where([data-mantine-color-scheme='light'] [data-compound-transparent="true"])`, {
-  vars: {
-    ['--_compound-title-color']: vars.element.stroke,
+  '&:is([data-compound-transparent])': {
+    _before: {
+      opacity: compoundOpacity.ref,
+      borderWidth: `calc(${borderWidth.ref} - 1px)`,
+    },
   },
 })
 
-export const compoundBorder = style({
-  borderRadius: varBorderRadius,
-  padding: 0,
-  margin: 0,
-  transition: `all 250ms ${easings.inOut}`,
+const compoundBorder = css.raw({
+  borderRadius: borderRadius.ref,
+  padding: '0',
+  margin: '0',
+  transition: `all 250ms {easings.inOut}`,
   cursor: 'default',
   position: 'absolute',
-  top: 0,
-  left: 0,
+  top: '0',
+  left: '0',
   width: '100%',
   height: '100%',
   pointerEvents: 'none',
   background: 'transparent',
   borderStyle: 'dashed',
-  borderWidth: varBorderWidth,
-  borderColor: `color-mix(in srgb , ${varBorderColor}, transparent ${fallbackVar(varBorderTransparency, '5%')})`,
-  vars: {
-    [varBorderColor]: `var(--_compound-border-color,${vars.element.stroke})`,
-  },
-})
-
-const indicatorKeyframes = keyframes({
-  'from': {
-    opacity: 0.6,
-  },
-  'to': {
-    opacity: 0.3,
-  },
+  borderWidth: `[${borderWidth.ref}]`,
+  borderColor: `[color-mix(in srgb, {colors.likec4.palette.stroke} ${borderOpacityPercent.ref}, transparent)]`,
 })
 
-const indicatorStroke = createVar('indicator-stroke')
-const indicatorStrokeWidth = createVar('indicator-stroke-width')
-export const indicator = style({
+const indicatorSvg = css.raw({
   position: 'absolute',
   top: '0',
   left: '0',
@@ -114,37 +99,52 @@ export const indicator = style({
   pointerEvents: 'none',
   overflow: 'visible',
   visibility: 'hidden',
-  vars: {
-    [indicatorStroke]: vars.element.loContrast,
-    [indicatorStrokeWidth]: '6',
+  _whenFocused: {
+    visibility: 'visible',
   },
-  selectors: {
-    ':where(.react-flow__node.selected:not(:focus-visible)) &': {
-      visibility: 'visible',
-    },
-    ':where(.react-flow__node:focus-within:not(.selected)) &': {
-      vars: {
-        [indicatorStroke]: `color-mix(in srgb, ${vars.element.stroke} 30%, ${vars.element.loContrast})`,
-        [indicatorStrokeWidth]: '8',
-      },
-    },
-    [`${whereLight} &`]: {
-      vars: {
-        [indicatorStroke]: `color-mix(in srgb, ${vars.element.stroke} 80%, #000)`,
-      },
-    },
+  _whenSelected: {
+    visibility: 'visible',
+  },
+  _whenPanning: {
+    display: 'none',
   },
 })
 
-globalStyle(`${indicator} rect`, {
-  stroke: indicatorStroke,
-  strokeWidth: indicatorStrokeWidth,
-  fill: 'none',
+const indicatorRect = css.raw({
+  stroke: `[color-mix(in srgb, {colors.likec4.palette.stroke} 60%, {colors.likec4.palette.hiContrast})]`,
+  strokeWidth: '4',
+  fill: '[none]',
+  animationStyle: 'indicator',
+  _light: {
+    stroke: `[color-mix(in srgb, {colors.likec4.palette.stroke} 80%, {colors.likec4.palette.hiContrast})]`,
+  },
 })
-globalStyle(`${whereNotReducedGraphics}  ${indicator} rect`, {
-  transformOrigin: 'center center',
-  animationDuration: '800ms',
-  animationIterationCount: 'infinite',
-  animationDirection: 'alternate',
-  animationName: indicatorKeyframes,
+
+export const compound = sva({
+  slots: ['root', 'compoundBorder', 'indicatorSvg', 'indicatorRect'],
+  className: 'compound-container',
+  base: {
+    root,
+    compoundBorder,
+    indicatorSvg,
+    indicatorRect,
+  },
+  variants: {
+    isTransparent: {
+      false: {
+        root: {
+          _before: {
+            boxShadow: {
+              _noReduceGraphics: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
+              _whenSelected: 'none',
+              _whenPanning: 'none !important',
+            },
+          },
+        },
+      },
+      true: {
+        root: {},
+      },
+    },
+  },
 })

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

@@ -1,13 +1,11 @@
 import type { DiagramNode } from '@likec4/core'
-import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
-import { useDebouncedValue } from '@mantine/hooks'
-import clsx from 'clsx'
-import { m } from 'framer-motion'
-import { type PropsWithChildren, forwardRef } from 'react'
+import { css, cx } from '@likec4/styles/css'
+import { type HTMLMotionProps, m } from 'framer-motion'
+import { type PropsWithChildren } from 'react'
 import { clamp, isNumber } from 'remeda'
 import { useIsReducedGraphics } from '../../../hooks/useReducedGraphics'
 import type { NodeProps } from '../../types'
-import * as css from './CompoundNodeContainer.css'
+import * as styles from './CompoundNodeContainer.css'
 
 type RequiredData = Pick<
   DiagramNode,
@@ -18,98 +16,100 @@ type RequiredData = Pick<
 >
 
 type CompoundNodeContainerProps =
-  & BoxProps
+  & Omit<HTMLMotionProps<'div'>, 'children'>
   & PropsWithChildren<{
     nodeProps: NodeProps<RequiredData>
   }>
 
-function getVarName(variable: string): string {
-  var matches = variable.match(/^var\((.*)\)$/)
-  if (matches) {
-    return matches[1]!
+export function CompoundNodeContainer({
+  nodeProps: {
+    selected: isSelected = false,
+    data: {
+      hovered: isHovered = false,
+      dimmed: isDimmed = false,
+      ...data
+    },
+  },
+  children,
+  style,
+  ...rest
+}: CompoundNodeContainerProps) {
+  const isReducedGraphics = useIsReducedGraphics()
+  const isTransparent = isNumber(data.style.opacity) && data.style.opacity < 99
+  let opacity = clamp((data.style.opacity ?? 100) / 100, {
+    min: 0,
+    max: 1,
+  })
+  if (isTransparent && isHovered && !isReducedGraphics) {
+    opacity = Math.min(opacity + 0.08, 1)
   }
-  return variable
-}
 
-const opacityVar = getVarName(css.varCompoundOpacity)
-const borderTransparencyVar = getVarName(css.varBorderTransparency)
+  // const [opacity] = useDebouncedValue(Math.round(_opacity * 100) / 100, isHovered ? 200 : 50)
 
-export const CompoundNodeContainer = createPolymorphicComponent<'div', CompoundNodeContainerProps>(
-  forwardRef<HTMLDivElement, CompoundNodeContainerProps>(({
-    nodeProps: {
-      selected: isSelected = false,
-      data: {
-        hovered: isHovered = false,
-        dimmed: isDimmed = false,
-        ...data
-      },
-    },
-    children,
-    style,
-    ...rest
-  }, ref) => {
-    const isReducedGraphics = useIsReducedGraphics()
-    const isTransparent = isNumber(data.style.opacity) && data.style.opacity < 100
-    let _opacity = clamp((data.style.opacity ?? 100) / 100, {
-      min: 0,
-      max: 1,
-    })
-    if (isTransparent && isHovered && !isReducedGraphics) {
-      _opacity = Math.min(_opacity + 0.11, 1)
-    }
+  const MIN_OPACITY = 65
+  const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * opacity, {
+    min: 0,
+    max: 100 - MIN_OPACITY,
+  })
 
-    const [opacity] = useDebouncedValue(Math.round(_opacity * 100) / 100, isHovered ? 200 : 50)
+  const classes = styles.compound({
+    isTransparent,
+  })
+  const depth = clamp(data.depth ?? 1, {
+    min: 1,
+    max: 5,
+  })
 
-    const MAX_TRANSPARENCY = 65
-    const borderTransparency = clamp(MAX_TRANSPARENCY - 0.8 * opacity * MAX_TRANSPARENCY, {
-      min: 0,
-      max: MAX_TRANSPARENCY,
-    })
-
-    return (
-      <Box
-        ref={ref}
-        component={m.div}
-        className={clsx([
-          css.container,
-          'likec4-compound-node',
-        ])}
-        initial={false}
-        data-hovered={isHovered}
-        data-likec4-color={data.color}
-        data-compound-depth={data.depth ?? 1}
-        data-compound-transparent={isTransparent}
-        data-likec4-dimmed={isDimmed}
-        data-likec4-shape={data.shape}
-        style={{
-          ...style,
-          [opacityVar]: opacity,
-          [borderTransparencyVar]: `${borderTransparency}%`,
-        }}
-        {...rest}
-      >
-        {isTransparent && !isSelected && data.style.border !== 'none' && (
-          <div
-            className={css.compoundBorder}
-            style={{
-              borderStyle: data.style.border ?? 'dashed',
-            }}
-          />
-        )}
-        {isSelected && (
-          <svg className={css.indicator}>
-            <rect
-              x={0}
-              y={0}
-              width={'100%'}
-              height={'100%'}
-              rx={6}
-            />
-          </svg>
-        )}
-        {children}
-      </Box>
-    )
-  }),
-)
-CompoundNodeContainer.displayName = 'CompoundNodeContainer'
+  return (
+    <m.div
+      className={cx(
+        css({
+          likec4Palette: `${data.color}.${depth}`,
+        }),
+        classes.root,
+        'likec4-compound-node',
+      )}
+      initial={false}
+      data-likec4-hovered={isHovered}
+      data-likec4-color={data.color}
+      data-compound-depth={depth}
+      data-likec4-shape={data.shape}
+      {...isTransparent && {
+        'data-compound-transparent': true,
+        'data-compound-title-inverse': opacity < 0.5,
+      }}
+      {...isDimmed !== false && {
+        'likec4-dimmed': isDimmed,
+      }}
+      style={{
+        ...style,
+        // @ts-expect-error
+        [styles.compoundOpacity.var]: opacity,
+        [styles.borderWidth.var]: `3px`,
+        [styles.borderRadius.var]: `6px`,
+        [styles.borderOpacityPercent.var]: `${borderOpacity}%`,
+      }}
+      {...rest}
+    >
+      {isTransparent && data.style.border !== 'none' && (
+        <div
+          className={classes.compoundBorder}
+          style={{
+            borderStyle: data.style.border ?? 'dashed',
+          }}
+        />
+      )}
+      <svg className={classes.indicatorSvg}>
+        <rect
+          className={classes.indicatorRect}
+          x={0}
+          y={0}
+          width={'100%'}
+          height={'100%'}
+          rx={6}
+        />
+      </svg>
+      {children}
+    </m.div>
+  )
+}

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

@@ -1,19 +1,85 @@
 import type { DiagramNode } from '@likec4/core'
+import { css, cx } from '@likec4/styles/css'
 import { Box, Text } from '@mantine/core'
-import clsx from 'clsx'
-import type { NodeProps } from '../../types'
-import * as css from './CompoundTitle.css'
 import { IconRenderer } from '../../../context'
+import type { NodeProps } from '../../types'
 
 type Data = Pick<
   DiagramNode,
   | 'color'
   | 'title'
   | 'icon'
+  | 'style'
 >
 
 type CompoundTitleProps = NodeProps<Data>
 
+const titleContainer = css({
+  position: 'absolute',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '6px',
+  left: '14px',
+  top: '4px',
+  right: '30px',
+  width: 'auto',
+  minHeight: '30px',
+  [`:where(.react-flow__node.draggable) &`]: {
+    pointerEvents: 'all',
+    cursor: 'grab',
+  },
+  [`.likec4-compound-node:has(.compound-action) &`]: {
+    paddingLeft: '22px',
+  },
+})
+
+const titleText = css({
+  flex: '1',
+  fontFamily: 'likec4.compound',
+  fontWeight: 600,
+  fontSize: '15px',
+  textTransform: 'uppercase',
+  letterSpacing: '0.2px',
+  color: 'likec4.palette.loContrast',
+  '[data-compound-title-inverse] &': {
+    color: {
+      base: '[color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]',
+      _light: 'likec4.palette.stroke',
+    },
+  },
+})
+
+const iconSize = '20px'
+const cssIcon = css({
+  flex: `0 0 ${iconSize}`,
+  height: `${iconSize}`,
+  width: `${iconSize}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  mixBlendMode: {
+    base: 'hard-light',
+    _reduceGraphicsOnPan: 'normal',
+  },
+  [`& svg, & img`]: {
+    width: '100%',
+    height: 'auto',
+    maxHeight: '100%',
+    pointerEvents: 'none',
+    filter: {
+      base: [
+        'drop-shadow(0 0 3px rgb(0 0 0 / 12%))',
+        'drop-shadow(0 1px 8px rgb(0 0 0 / 8%))',
+        'drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))',
+      ],
+      _reduceGraphicsOnPan: 'none',
+    },
+  },
+  [`& img`]: {
+    objectFit: 'contain',
+  },
+})
+
 export function CompoundTitle({ id, data }: CompoundTitleProps) {
   const elementIcon = IconRenderer({
     element: {
@@ -21,17 +87,17 @@ export function CompoundTitle({ id, data }: CompoundTitleProps) {
       title: data.title,
       icon: data.icon,
     },
-    className: css.icon,
+    className: cssIcon,
   })
 
   return (
     <Box
-      className={clsx(
-        css.compoundTitle,
+      className={cx(
+        titleContainer,
         'likec4-compound-title',
       )}>
       {elementIcon}
-      <Text className={css.title} truncate="end">
+      <Text className={titleText} truncate="end">
         {data.title}
       </Text>
     </Box>