@likec4/diagram 1.26.2 → 1.27.1

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -6,6 +6,7 @@ import {
   DiagramNode,
   nameFromFqn,
 } from '@likec4/core'
+import { css, cx } from '@likec4/styles/css'
 import {
   type StackProps,
   ActionIcon,
@@ -24,8 +25,7 @@ import {
   TooltipGroup,
 } from '@mantine/core'
 import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@tabler/icons-react'
-import clsx from 'clsx'
-import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, useCallback } from 'react'
+import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, memo, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
 import { Link } from '../../../components/Link'
 import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
@@ -33,7 +33,7 @@ import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
 import { useLikeC4Model } from '../../../likec4model'
 import { findDiagramEdge, findDiagramNode } from '../../../state/utils'
-import * as css from './RelationshipsDropdownMenu.css'
+import * as styles from './RelationshipsDropdownMenu.css'
 
 const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()
 
@@ -48,18 +48,20 @@ export const Tooltip = MantineTooltip.withProps({
   withinPortal: false,
 })
 
-export function RelationshipsDropdownMenu({
-  edgeId,
-  source,
-  target,
-  disabled = false,
-  children,
-}: PropsWithChildren<{
-  edgeId: EdgeId
-  source: string
-  target: string
-  disabled?: boolean | undefined
-}>) {
+export const RelationshipsDropdownMenu = memo((
+  {
+    edgeId,
+    source,
+    target,
+    disabled = false,
+    children,
+  }: PropsWithChildren<{
+    edgeId: EdgeId
+    source: string
+    target: string
+    disabled?: boolean | undefined
+  }>,
+) => {
   const { diagramEdge, sourceNode, targetNode } = useDiagramContext(ctx => ({
     diagramEdge: findDiagramEdge(ctx, edgeId),
     sourceNode: findDiagramNode(ctx, source),
@@ -137,7 +139,7 @@ export function RelationshipsDropdownMenu({
         {children}
       </MenuTarget>
       <MenuDropdown
-        className={css.menuDropdown}
+        className={styles.menuDropdown}
         onPointerDownCapture={stopPropagation}
         onPointerDown={stopPropagation}
         onClick={stopPropagation}
@@ -167,7 +169,7 @@ export function RelationshipsDropdownMenu({
       </MenuDropdown>
     </Menu>
   )
-}
+})
 
 const Relationship = forwardRef<
   HTMLDivElement,
@@ -196,13 +198,13 @@ const Relationship = forwardRef<
   const links = r.links
 
   return (
-    <Stack ref={ref} className={clsx(css.menuItemRelationship, className)} {...props}>
+    <Stack ref={ref} className={cx(styles.menuItemRelationship, className)} {...props}>
       <Group gap={4}>
-        <Text component="div" className={css.endpoint} data-likec4-color={sourceNode.color}>
+        <Text component="div" className={cx(css({ likec4Palette: sourceNode.color }), styles.endpoint)}>
           {sourceId}
         </Text>
-        <IconArrowRight stroke={2.5} size={11} />
-        <Text component="div" className={css.endpoint} data-likec4-color={targetNode.color}>
+        <IconArrowRight stroke={2.5} size={'11px'} opacity={0.65} />
+        <Text component="div" className={cx(css({ likec4Palette: targetNode.color }), styles.endpoint)}>
           {targetId}
         </Text>
         {(navigateTo || !!onOpenSource) && (
@@ -211,7 +213,7 @@ const Relationship = forwardRef<
             {navigateTo && (
               <Tooltip label={'Open dynamic view'}>
                 <ActionIcon
-                  className={clsx('nodrag nopan')}
+                  className={cx('nodrag nopan')}
                   size={'sm'}
                   radius="sm"
                   variant="default"
@@ -229,7 +231,7 @@ const Relationship = forwardRef<
             <IfEnabled feature="Vscode">
               <Tooltip label={'Open source'}>
                 <ActionIcon
-                  className={clsx('nodrag nopan')}
+                  className={cx('nodrag nopan')}
                   size={'sm'}
                   radius="sm"
                   variant="default"
@@ -247,7 +249,7 @@ const Relationship = forwardRef<
           </TooltipGroup>
         )}
       </Group>
-      <Box className={css.title}>{r.title || 'untitled'}</Box>
+      <Box className={styles.title}>{r.title || 'untitled'}</Box>
       {r.description && <Text size="xs" c="dimmed">{r.description}</Text>}
       {links.length > 0 && (
         <Stack

package/src/likec4diagram/custom/edges/edges.css.ts

@@ -1,54 +1,47 @@
-import { globalStyle, style } from '@vanilla-extract/css'
-import { ZIndexes } from '../../../base/const'
-import { mantine, xyvars } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
+// import { globalStyle, style } from '@vanilla-extract/css'
+// import { mantine, xyvars } from '../../../theme-vars'
 
 const isSelected = '.react-flow__edge.selected'
 
-export const controlPointsContainer = style({
+export const controlPointsContainer = css({
   overflow: 'visible',
   position: 'absolute',
   pointerEvents: 'none',
   top: 0,
   left: 0,
-  zIndex: ZIndexes.Edge,
-  selectors: {
-    [`&:is([data-edge-hovered='true'])`]: {
-      zIndex: ZIndexes.Edge + 1,
-    },
-  },
+  mixBlendMode: 'normal',
 })
 
-export const controlPoint = style({
-  fill: xyvars.edge.stroke,
-  stroke: xyvars.edge.stroke,
+export const controlPoint = css({
+  fill: `likec4.relation.stroke`,
+  stroke: `likec4.relation.stroke`,
   fillOpacity: 0.75,
   strokeWidth: 1,
   cursor: 'grab',
   pointerEvents: 'auto',
   visibility: 'hidden',
-  ':hover': {
-    stroke: mantine.colors.primaryColors.filledHover,
-    strokeWidth: 9,
+  _hover: {
+    fillOpacity: 1,
+    stroke: 'mantine.colors.primary.filledHover',
+    strokeWidth: 10,
     transition: 'stroke 100ms ease-out, stroke-width 100ms ease-out',
   },
-  selectors: {
-    [`:where(${isSelected}, [data-edge-hovered='true']) &`]: {
-      visibility: 'visible',
-      transition: 'fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out',
-      transitionDelay: '50ms',
-      fillOpacity: 1,
-      strokeWidth: 5,
-    },
+  [`:where(${isSelected}, [data-likec4-hovered='true']) &`]: {
+    visibility: 'visible',
+    transition: 'fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out',
+    transitionDelay: '50ms',
+    fillOpacity: 1,
+    strokeWidth: 5,
   },
 })
 
-export const controlDragging = style({
+export const controlDragging = css({
   cursor: 'grabbing',
-})
-
-globalStyle(`${controlDragging} *`, {
-  cursor: 'grabbing !important',
-})
-globalStyle(`${controlDragging} .react-flow__edge-interaction`, {
-  cursor: 'grabbing !important',
+  '& *': {
+    cursor: 'grabbing !important',
+  },
+  '& .react-flow__edge-interaction': {
+    cursor: 'grabbing !important',
+  },
 })

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

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

package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { Box, Group, Paper, Stack, Text } from '@mantine/core'
+import { Box, Group, Paper, Stack, Text, Tooltip } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { type NodeToolbarProps, NodeToolbar } from '@xyflow/react'
 import clsx from 'clsx'
@@ -6,7 +6,7 @@ import type { ReactNode } from 'react'
 import type { Base } from '../../../../base'
 import { useDiagramContext } from '../../../../hooks/useDiagram'
 import { stopPropagation } from '../../../../utils/xyflow'
-import * as css from './styles.css'
+import * as styles from './styles.css'
 
 export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
   nodeProps: Base.NodeProps
@@ -45,9 +45,13 @@ export function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps)
   }
   // TODO: This is a workaround to prevent the toolbar from flickering when the node unhovered
   const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, delay)
+  if (!isToolbarVisible) {
+    return null
+  }
+
   return (
     <NodeToolbar
-      isVisible={!dragging && isToolbarVisible}
+      isVisible={!dragging}
       offset={4}
       {...props}>
       <Paper
@@ -63,9 +67,9 @@ export function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps)
         onClick={stopPropagation}
         onDoubleClick={stopPropagation}
         withBorder>
-        <Stack gap={6}>
-          <Box pl={2}>
-            <Text c="dimmed" className={css.toolbarTitle}>{title}</Text>
+        <Stack gap={'6px'}>
+          <Box px={'4px'}>
+            <Text className={styles.toolbarTitle}>{title}</Text>
           </Box>
           <Group gap={4}>
             {children}

package/src/likec4diagram/custom/nodes/toolbar/styles.css.ts

@@ -1,9 +1,13 @@
-import { rem } from '@mantine/core'
-import { style } from '@vanilla-extract/css'
+import { css } from '@likec4/styles/css'
 
-export const toolbarTitle = style({
-  fontSize: rem(10),
+export const toolbarTitle = css({
+  color: 'mantine.colors.dimmed',
+  fontSize: '10px',
   fontWeight: 600,
+  maxWidth: '220px',
   cursor: 'default',
   userSelect: 'all',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
 })

package/src/likec4diagram/ui/controls/LayoutDriftNotification.tsx

@@ -5,14 +5,13 @@ import {
   HoverCardDropdown,
   HoverCardTarget,
   Notification,
-  Overlay,
   Text,
 } from '@mantine/core'
 import {
   IconAlertTriangle,
 } from '@tabler/icons-react'
 
-import { mantine } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
 import { ActionIcon } from './_shared'
 
 export const LayoutDriftNotification = (props: PopoverProps) => (
@@ -22,8 +21,13 @@ export const LayoutDriftNotification = (props: PopoverProps) => (
     closeDelay={100}
     {...props}>
     <HoverCardTarget>
-      <ActionIcon c="orange">
-        <Overlay color={mantine.colors.orange.lightHover} backgroundOpacity={1} />
+      <ActionIcon
+        color={'orange'}
+        c="orange"
+        className={css({
+          bg: 'mantine.colors.orange.light',
+        })}
+      >
         <IconAlertTriangle />
       </ActionIcon>
     </HoverCardTarget>

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

@@ -1,95 +1,84 @@
-import { rem } from '@mantine/core'
-import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars, whereNotReducedGraphics, whereReducedGraphics } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const navigationButtons = style({
-  gap: calc(mantine.spacing.xs).divide(1.5).toString(),
-  ':empty': {
+export const navigationButtons = css({
+  gap: 'micro',
+  _empty: {
     display: 'none',
   },
 })
 
-export const panel = style({
-  top: fallbackVar(vars.navigationPanel.top, '1rem'),
-  left: fallbackVar(vars.navigationPanel.left, '1rem'),
+export const panel = css({
+  top: '1rem',
+  left: '1rem',
   margin: 0,
   pointerEvents: 'none',
-})
-
-globalStyle(`${panel} :where(button, .action-icon, [role="dialog"])`, {
-  pointerEvents: 'all',
-})
-
-globalStyle(`${whereReducedGraphics} ${panel} .action-icon`, {
-  vars: {
-    '--ai-radius': '0px',
+  '& :where(button, .action-icon, [role=\'dialog\'])': {
+    pointerEvents: 'all',
   },
-})
-
-globalStyle(`.likec4-top-left-panel .action-icon`, {
-  vars: {
+  ['& .action-icon']: {
     ['--ai-size']: '2rem',
   },
-})
-globalStyle(`.likec4-top-left-panel .action-icon .tabler-icon`, {
-  width: '65%',
-  height: '65%',
-})
-
-export const actionIconGroup = style({
-  selectors: {
-    [`${whereNotReducedGraphics} &`]: {
-      boxShadow: mantine.shadows.md,
+  ['& .tabler-icon']: {
+    width: '65%',
+    height: '65%',
+  },
+  _reduceGraphics: {
+    '& .action-icon': {
+      '--ai-radius': '0px',
     },
   },
 })
 
-export const autolayoutIcon = style({})
+export const actionIconGroup = css({
+  shadow: {
+    base: 'md',
+    _whenPanning: 'none',
+  },
+})
 
-globalStyle(`${autolayoutIcon} .tabler-icon`, {
-  width: '65%',
-  height: '65%',
+export const autolayoutIcon = css({
+  ['& .tabler-icon']: {
+    width: '65%',
+    height: '65%',
+  },
 })
 
-export const autolayoutButton = style({
+export const autolayoutButton = css({
   flex: '1 1 40%',
   textAlign: 'center',
   fontWeight: 500,
   padding: '4px 6px',
-  fontSize: rem(11),
+  fontSize: '11px',
   zIndex: 1,
 })
 
-export const autolayoutIndicator = style({
-  background: mantine.colors.gray[2],
-  borderRadius: mantine.radius.sm,
-  border: `1px solid ${mantine.colors.gray[3]}`,
-  selectors: {
-    [`:where([data-mantine-color-scheme="dark"]) &`]: {
-      background: mantine.colors.dark[5],
-      borderColor: mantine.colors.dark[4],
-    },
+export const autolayoutIndicator = css({
+  background: 'mantine.colors.gray[2]',
+  borderRadius: 'sm',
+  border: `1px solid`,
+  borderColor: 'mantine.colors.gray[4]',
+  _dark: {
+    background: 'mantine.colors.dark[5]',
+    borderColor: 'mantine.colors.dark[4]',
   },
 })
 
-export const spacingSliderBody = style({
+export const spacingSliderBody = css({
   position: 'relative',
-  borderRadius: mantine.radius.sm,
-  background: mantine.colors.gray[3],
+  borderRadius: 'sm',
+  background: 'mantine.colors.gray[3]',
   boxShadow: 'inset 1px 1px 3px 0px #00000024',
-  selectors: {
-    [`:where([data-mantine-color-scheme="dark"]) &`]: {
-      background: mantine.colors.dark[7],
-    },
+  _dark: {
+    background: 'mantine.colors.dark[7]',
   },
 })
 
-export const spacingSliderThumb = style({
+export const spacingSliderThumb = css({
   position: 'absolute',
   width: 8,
   height: 8,
-  border: `2px solid ${mantine.colors.gray[5]}`,
+  border: `2px solid`,
+  borderColor: 'mantine.colors.gray[5]',
   borderRadius: 3,
   transform: 'translate(-50%, -50%)',
 })

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

@@ -1,47 +1,51 @@
-import { fallbackVar, style } from '@vanilla-extract/css'
-import { mantine, vars, whereDark, whereNotReducedGraphics } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const card = style({
+export const card = css({
   cursor: 'default',
   minWidth: 200,
   maxWidth: 'calc(100vw - 16px)',
   width: 'auto',
-  backgroundColor: mantine.colors.body,
-  borderRadius: '0px',
-  '@media': {
-    [mantine.largerThan('sm')]: {
-      minWidth: 250,
-      maxWidth: '90vw',
-    },
-    [mantine.largerThan('md')]: {
-      minWidth: 350,
-      maxWidth: '70vw',
-    },
+  // backgroundColor: 'mantine.colors.body',
+  borderRadius: 'sm',
+  sm: {
+    minWidth: 250,
+    maxWidth: '90vw',
   },
-  selectors: {
-    [`${whereDark} &`]: {
-      backgroundColor: mantine.colors.dark[6],
-    },
-    [`${whereNotReducedGraphics} &`]: {
-      borderRadius: mantine.radius.sm,
-      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%)`,
-    },
+  md: {
+    minWidth: 350,
+    maxWidth: '70vw',
   },
+
+  shadow: {
+    base: 'xs',
+    _whenPanning: 'none',
+  },
+
+  backgroundColor: {
+    base: 'mantine.colors.body/80',
+    _dark: 'mantine.colors.dark[6]/80',
+    _whenPanning: 'mantine.colors.body',
+  },
+  // _dark: {
+  //   backgroundColor: 'mantine.colors.dark[6]',
+  // },
+  // _noReduceGraphics: {
+  //   borderRadius: 'sm',
+  //   backgroundColor: `mantine.colors.body/80`,
+  //   // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  //   // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  //   _dark: {
+  //     backgroundColor: `mantine.colors.dark[6]/80`,
+  //   },
+  // },
 })
 
-export const title = style({})
+export const title = css({})
 
-export const description = style({
+export const description = css({
   whiteSpaceCollapse: 'preserve-breaks',
-  color: mantine.colors.gray[7],
-  selectors: {
-    [`${whereDark} &`]: {
-      color: mantine.colors.gray[5],
-    },
+  color: 'mantine.colors.gray[7]',
+  _dark: {
+    color: 'mantine.colors.gray[5]',
   },
 })

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

@@ -5,7 +5,7 @@ import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 import { Link } from '../../../components/Link'
 import { useDiagramContext } from '../../../hooks/useDiagram'
-import * as css from './DiagramTitlePanel.css'
+import * as styles from './DiagramTitlePanel.css'
 
 export function DiagramTitlePanel() {
   const { id, title, description, links, isNotActiveWalkthrough } = useDiagramContext(s => ({
@@ -53,7 +53,7 @@ export function DiagramTitlePanel() {
           }}
         >
           <Card
-            className={css.card}
+            className={styles.card}
             withBorder={!isCollapsed}
             p={isCollapsed ? 'sm' : 'md'}
             onDoubleClick={e => e.stopPropagation()}>
@@ -100,7 +100,7 @@ export function DiagramTitlePanel() {
                     size={'md'}
                     fw={500}
                     lh={1.1}
-                    className={css.title}
+                    className={styles.title}
                   >
                     {title}
                   </Text>
@@ -136,7 +136,7 @@ export function DiagramTitlePanel() {
                     <Text
                       component={'div'}
                       size="sm"
-                      className={css.description}>
+                      className={styles.description}>
                       {description || 'no description'}
                     </Text>
                   </Spoiler>