@likec4/diagram 1.26.2 → 1.27.1

package/src/overlays/element-details/TabPanelDeployments.css.ts

@@ -1,69 +1,64 @@
-import { rem, Text, ThemeIcon } from '@mantine/core'
-import { globalStyle, style } from '@vanilla-extract/css'
-import { easings, mantine, transitions, whereDark } from '../../theme-vars'
+import { css, cx } from '@likec4/styles/css'
 
-export const treeNode = style({})
-globalStyle(`${treeNode}[data-level='1']`, {
-  marginBottom: rem(16),
+export const treeNode = css({
+  [`&[data-level='1']`]: {
+    marginBottom: 'sm',
+  },
 })
 
-export const treeNodeLabel = style({
+export const treeNodeLabel = css({
   cursor: 'default',
   marginTop: 0,
   marginBottom: 0,
 })
 
-const label = style({
-  transition: transitions.fast,
-  color: mantine.colors.gray[7],
-  ':hover': {
-    transitionTimingFunction: easings.out,
+const label = css({
+  transition: 'fast',
+  color: 'mantine.colors.gray[7]',
+  _dark: {
+    color: 'mantine.colors.dark[1]',
+  },
+  '& > *': {
+    transition: 'fast',
   },
-  selectors: {
-    [`${whereDark} &`]: {
-      color: mantine.colors.dark[1],
+  _hover: {
+    transitionTimingFunction: 'out',
+    '& > :not([data-no-transform])': {
+      transitionTimingFunction: 'out',
+      transform: 'translateX(1px)',
     },
   },
-})
-globalStyle(`${label} > *`, {
-  transition: transitions.fast,
-})
-globalStyle(`${label}:hover > :not([data-no-transform])`, {
-  transitionTimingFunction: easings.out,
-  transform: 'translateX(1px)',
-})
-globalStyle(`.mantine-Button-root:hover ${label} > :not([data-no-transform])`, {
-  transitionTimingFunction: easings.out,
-  transform: 'translateX(1px)',
+  //   '.mantine-Button-root:hover & > :not([data-no-transform])': {
+  // transitionTimingFunction: 'out',
+  //   transform: 'translateX(1px)',
+  //   },
 })
 
-export const nodeLabel = style([label, {}])
+export const nodeLabel = cx(label)
 
-export const instanceLabel = style([label, {
-  cursor: 'pointer',
-  width: '100%',
-  justifyContent: 'stretch',
-  flexWrap: 'nowrap',
-  height: rem(36),
-  paddingInlineStart: rem(16),
-  paddingInlineEnd: rem(10),
-  borderRadius: mantine.radius.sm,
-  alignItems: 'center',
-  color: mantine.colors.gray[7],
-  selectors: {
-    [`${whereDark} &`]: {
-      color: mantine.colors.gray.lightColor,
+export const instanceLabel = cx(
+  label,
+  css({
+    cursor: 'pointer',
+    width: '100%',
+    justifyContent: 'stretch',
+    flexWrap: 'nowrap',
+    height: '36px',
+    paddingInlineStart: '16px',
+    paddingInlineEnd: '10px',
+    borderRadius: 'sm',
+    alignItems: 'center',
+    color: 'mantine.colors.gray[7]',
+    _dark: {
+      color: 'mantine.colors.gray.lightColor',
     },
-  },
-  ':hover': {
-    background: mantine.colors.gray.lightHover,
-  },
-}])
-globalStyle(`${instanceLabel} .tabler-icon`, {
-  transition: transitions.fast,
-  width: '90%',
-  opacity: 0.65,
-})
-// globalStyle(`.mantine-Button-root:hover ${instanceLabel} .tabler-icon`, {
-//   opacity: 0.8
-// })
+    _hover: {
+      background: 'mantine.colors.gray.lightHover',
+    },
+    '& .tabler-icon': {
+      transition: 'fast',
+      width: '90%',
+      opacity: 0.65,
+    },
+  }),
+)

package/src/overlays/element-details/TabPanelRelationships.css.ts

@@ -1,106 +1,102 @@
-import { globalStyle, style } from '@vanilla-extract/css'
-import { mantine, vars, whereDark, whereLight } from '../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const fqn = style({
+export const fqn = css({
   display: 'inline-block',
-  fontSize: mantine.fontSizes.sm,
+  fontSize: 'sm',
   fontWeight: 500,
   whiteSpace: 'nowrap',
   padding: '3px 6px',
   borderRadius: 3,
-  background: `color-mix(in srgb , ${vars.element.fill},  transparent 25%)`,
+  background: `likec4.palette.fill/75`,
   lineHeight: 1.2,
-  color: vars.element.hiContrast,
+  color: 'likec4.palette.hiContrast',
   // selectors: {
   //   [`${whereDark} &`]: {
   //   }
   // }
 })
 
-export const relationshipStat = style({
-  selectors: {
-    [`${whereLight} &`]: {
-      background: mantine.colors.gray[1],
-    },
-    // [`&[data-zero]`]: {
-    //   color: mantine.colors.dimmed
-    // },
-    // [`${whereLight} &[data-zero]`]: {
-    //   background: mantine.colors.gray[3]
-    // },
-    [`&[data-missing]`]: {
-      color: mantine.colors.orange[4],
-      background: `color-mix(in srgb, ${mantine.colors.orange[8]} 15%, transparent)`,
-      borderColor: `color-mix(in srgb, ${mantine.colors.orange[5]} 20%, transparent)`,
-    },
-    [`${whereLight} &[data-missing]`]: {
-      color: mantine.colors.orange[8],
+export const relationshipStat = css({
+  _light: {
+    background: 'mantine.colors.gray[1]',
+    '&[data-missing': {},
+  },
+  // [`&[data-zero]`]: {
+  //   color: mantine.colors.dimmed
+  // },
+  // [`${whereLight} &[data-zero]`]: {
+  //   background: mantine.colors.gray[3]
+  // },
+  [`&[data-missing]`]: {
+    color: 'mantine.colors.orange[4]',
+    background: `mantine.colors.orange[8]/15`,
+    borderColor: `mantine.colors.orange[5]/20`,
+    _light: {
+      color: 'mantine.colors.orange[8]',
     },
   },
 })
 
-export const xyflow = style({
+export const xyflow = css({
   flex: '1 1 100%',
   position: 'relative',
   width: '100%',
   height: '100%',
-  background: mantine.colors.body,
-  border: `1px solid ${mantine.colors.defaultBorder}`,
-  borderRadius: mantine.radius.sm,
-  selectors: {
-    [`${whereLight} &`]: {
-      borderColor: mantine.colors.gray[3],
-      background: mantine.colors.gray[1],
-    },
+  background: 'mantine.colors.body',
+  border: `1px solid {colors.mantine.colors.defaultBorder}`,
+  borderRadius: 'sm',
+  _light: {
+    borderColor: 'mantine.colors.gray[3]',
+    background: 'mantine.colors.gray[1]',
   },
 })
 
-export const panelScope = style({
-  ':before': {
-    content: 'scope:',
+export const panelScope = css({
+  _before: {
+    content: '"scope:"',
     position: 'absolute',
     top: 0,
     left: 8,
-    fontSize: 9,
+    fontSize: '2xs',
     fontWeight: 500,
-    lineHeight: 1,
-    color: mantine.colors.dimmed,
+    lineHeight: '1',
+    color: 'mantine.colors.dimmed',
     opacity: 0.85,
     transform: 'translateY(-100%) translateY(-2px)',
   },
+  _light: {
+    '& .mantine-SegmentedControl-root': {
+      background: 'mantine.colors.gray[3]',
+    },
+  },
 })
 
-globalStyle(`${whereLight} ${panelScope} .mantine-SegmentedControl-root`, {
-  background: mantine.colors.gray[3],
-})
-
-export const edgeNum = style({
+export const edgeNum = css({
   display: 'inline-block',
-  fontSize: mantine.fontSizes.xl,
+  fontSize: 'xl',
   fontWeight: 600,
   padding: '1px 5px',
   minWidth: 24,
   textAlign: 'center',
-  borderRadius: mantine.radius.sm,
-  background: mantine.colors.dark[7],
-  color: mantine.colors.defaultColor,
-  selectors: {
-    [`${whereLight} &`]: {
-      background: mantine.colors.gray[4],
-      color: mantine.colors.dark[6],
-    },
-    [`&[data-zero]`]: {
-      color: mantine.colors.dimmed,
-    },
-    [`${whereLight} &[data-zero]`]: {
-      background: mantine.colors.gray[3],
-    },
-    [`&[data-missing]`]: {
-      color: mantine.colors.orange[4],
-      background: `color-mix(in srgb, ${mantine.colors.orange[8]} 20%, transparent)`,
-    },
-    [`${whereLight} &[data-missing]`]: {
-      color: mantine.colors.orange[8],
-    },
+  borderRadius: 'sm',
+  background: 'mantine.colors.dark[7]',
+  color: 'mantine.colors.defaultColor',
+  [`&[data-zero]`]: {
+    color: 'mantine.colors.dimmed',
+  },
+  [`&[data-missing]`]: {
+    color: 'mantine.colors.orange[4]',
+    background: `mantine.colors.orange[8]/20`,
   },
+  // _light: {
+  //   background: 'mantine.colors.gray[4]',
+  //   color: 'mantine.colors.dark[6]',
+
+  //   [`&[data-zero]`]: {
+  //     background: 'mantine.colors.gray[3]',
+  //   },
+  //   [`&[data-missing]`]: {
+  //     color: 'mantine.colors.orange[8]',
+  //   },
+  // },
 })

package/src/overlays/element-details/TabPanelRelationships.tsx

@@ -1,9 +1,10 @@
 import { type LikeC4Model, nameFromFqn } from '@likec4/core'
-import { Box, Group, Paper, Stack, Text, ThemeIcon, Tooltip as MantineTooltip } from '@mantine/core'
-import { IconArrowRight, IconInfoCircle } from '@tabler/icons-react'
+import { ActionIcon, Box, Group, Paper, Stack, Text, ThemeIcon, Tooltip as MantineTooltip } from '@mantine/core'
+import { IconArrowRight, IconExternalLink, IconInfoCircle } from '@tabler/icons-react'
 import { useSelector } from '@xstate/react'
 import { useState } from 'react'
 import { unique } from 'remeda'
+import { useOverlaysActorRef } from '../../hooks/useOverlaysActor'
 import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser'
 import { useElementDetailsActorRef } from './actorContext'
 import * as css from './TabPanelRelationships.css'
@@ -28,6 +29,7 @@ export function TabPanelRelationships({
   node,
   element,
 }: RelationshipsTabPanelProps) {
+  const overlaysActor = useOverlaysActorRef()
   const delailsActor = useElementDetailsActorRef()
   const relationshipsBrowserActor = useSelector(delailsActor, s => s.children[`${delailsActor.id}-relationships`])
   const [scope, setScope] = useState<'global' | 'view'>('view')
@@ -85,7 +87,34 @@ export function TabPanelRelationships({
       )}
 
       <Box className={css.xyflow}>
-        {relationshipsBrowserActor && <RelationshipsBrowser actorRef={relationshipsBrowserActor} />}
+        {relationshipsBrowserActor && (
+          <>
+            <RelationshipsBrowser actorRef={relationshipsBrowserActor} />
+            <Box pos={'absolute'} top={12} right={12}>
+              <ActionIcon
+                size="md"
+                variant="default"
+                radius="sm"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  const {
+                    subject,
+                    scope,
+                    viewId,
+                  } = relationshipsBrowserActor.getSnapshot().context
+                  overlaysActor.send({
+                    type: 'open.relationshipsBrowser',
+                    subject: subject,
+                    scope,
+                    viewId,
+                  })
+                }}
+              >
+                <IconExternalLink stroke={1.6} style={{ width: '70%' }} />
+              </ActionIcon>
+            </Box>
+          </>
+        )}
       </Box>
     </Stack>
   )

package/src/overlays/element-details/TabPanelStructure.css.ts

@@ -1,36 +1,36 @@
-import { globalStyle, style } from '@vanilla-extract/css'
-import { easings, mantine, transitions, whereDark } from '../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const treeNodeLabel = style({
-  marginTop: mantine.spacing.sm,
-  marginBottom: mantine.spacing.sm,
+export const treeNodeLabel = css({
+  marginTop: 'sm',
+  marginBottom: 'sm',
 })
 
-export const elementLabel = style({
+export const elementLabel = css({
   display: 'inline-flex',
-  transition: transitions.fast,
-  border: `1px dashed ${mantine.colors.defaultBorder}`,
-  borderRadius: mantine.radius.sm,
-  padding: `${mantine.spacing.xs} ${mantine.spacing.md}`,
+  transition: 'fast',
+  border: `1px dashed`,
+  borderColor: 'mantine.colors.defaultBorder',
+  borderRadius: 'sm',
+  px: 'md',
+  py: 'xs',
   alignItems: 'center',
   cursor: 'pointer',
-  color: mantine.colors.gray[7],
-  ':hover': {
-    transitionTimingFunction: easings.out,
-    borderStyle: 'solid',
-    color: mantine.colors.defaultColor,
-    background: mantine.colors.defaultHover,
+  color: 'mantine.colors.gray[7]',
+
+  _dark: {
+    color: 'mantine.colors.dark[1]',
+  },
+  '& > *': {
+    transition: 'fast',
   },
-  selectors: {
-    [`${whereDark} &`]: {
-      color: mantine.colors.dark[1],
+  _hover: {
+    transitionTimingFunction: 'out',
+    borderStyle: 'solid',
+    color: 'mantine.colors.defaultColor',
+    background: 'mantine.colors.defaultHover',
+    '& > *': {
+      transitionTimingFunction: 'out',
+      transform: 'translateX(1px)',
     },
   },
 })
-globalStyle(`${elementLabel} > *`, {
-  transition: transitions.fast,
-})
-globalStyle(`${elementLabel}:hover > *`, {
-  transitionTimingFunction: easings.out,
-  transform: 'translateX(1px)',
-})

package/src/overlays/element-details/actor.ts

@@ -62,8 +62,10 @@ export const elementDetailsLogic = setup({
         id: ({ self }) => `${self.id}-relationships`,
         input: ({ context }) => ({
           subject: context.subject,
-          scope: context.currentView,
-          enableNavigationMenu: false,
+          viewId: context.currentView.id,
+          scope: 'view',
+          enableSelectSubject: false,
+          enableChangeScope: true,
           closeable: false,
         }),
       }),

package/src/overlays/overlay/Overlay.css.ts

@@ -1,70 +1,76 @@
-import { createVar, style } from '@vanilla-extract/css'
-import { calc } from '@vanilla-extract/css-utils'
-import { mantine, whereLight } from '../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const backdropBlur = createVar('backdrop-blur')
-export const backdropOpacity = createVar('backdrop-opacity')
-const backdropColor = createVar('backdrop-color')
+export const backdropBlur = '--_blur'
+export const backdropOpacity = '--_opacity'
 
-const borderRadius = createVar('border-radius')
-export const dialog = style({
+const borderRadius = '--_border-radius'
+export const dialog = css({
   boxSizing: 'border-box',
   margin: 0,
   position: 'fixed',
-  inset: '5rem 4rem 4rem 4rem',
   width: 'auto',
   height: 'auto',
   maxWidth: '100vw',
   maxHeight: '100vh',
-  background: `color-mix(in srgb, ${mantine.colors.defaultBorder}, transparent 50%)`,
-  boxShadow: mantine.shadows.xl,
-  border: `0 solid transparent`,
+  background: `mantine.colors.defaultBorder/50`,
+  shadow: 'xl',
+  border: 'transparent',
   outline: 'none',
-  borderRadius: borderRadius,
-  padding: 6,
-  vars: {
-    [borderRadius]: '8px',
-    [backdropColor]: '34 34 34',
-    [backdropOpacity]: '0%',
-    [backdropBlur]: '0px',
-  },
-  selectors: {
-    [`&::backdrop`]: {
-      cursor: 'zoom-out',
-      WebkitBackdropFilter: `blur(${backdropBlur})`,
-      backdropFilter: `blur(${backdropBlur})`,
-      backgroundColor: `rgb(${backdropColor} / ${backdropOpacity})`,
-    },
-    [`${whereLight} &`]: {
-      vars: {
-        [backdropBlur]: '15 15 15',
-      },
+  borderRadius: `var(${borderRadius})`,
+  [backdropBlur]: '0px',
+  [backdropOpacity]: '0%',
+  _backdrop: {
+    cursor: 'zoom-out',
+    backdropFilter: `blur(var(${backdropBlur}))`,
+    backgroundColor: {
+      _dark: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
+      _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`,
     },
   },
-  '@media': {
-    [mantine.smallerThan('md')]: {
-      borderRadius: mantine.radius.sm,
-      inset: '2rem',
-      width: 'calc(100vw - 4rem)',
-      height: 'calc(100vh - 4rem)',
-    },
-    [mantine.smallerThan('sm')]: {
-      border: 'none',
-      inset: 0,
-      width: '100vw',
-      height: '100vh',
-    },
+  smDown: {
+    [borderRadius]: '0px',
+    border: 'none',
+    inset: 0,
+    padding: 0,
+    width: '100vw',
+    height: '100vh',
+  },
+  sm: {
+    [borderRadius]: '6px',
+    padding: '6px',
+    inset: '1rem',
+    width: 'calc(100vw - 2rem)',
+    height: 'calc(100vh - 2rem)',
+  },
+  md: {
+    inset: '2rem',
+    width: 'calc(100vw - 4rem)',
+    height: 'calc(100vh - 4rem)',
+  },
+  lg: {
+    inset: '4rem',
+    width: 'calc(100vw - 8rem)',
+    height: 'calc(100vh - 8rem)',
+  },
+  xl: {
+    [borderRadius]: '8px',
+    padding: '8px',
+    inset: '5rem',
+    width: 'calc(100vw - 10rem)',
+    height: 'calc(100vh - 10rem)',
   },
 })
 
-export const body = style({
+export const body = css({
   position: 'relative',
   containerName: 'overlay-dialog',
   containerType: 'size',
   border: `0 solid transparent`,
-  borderRadius: calc(borderRadius).subtract('2px').toString(),
-  backgroundColor: mantine.colors.body,
+  background: 'mantine.colors.body',
   overflow: 'hidden',
   width: '100%',
   height: '100%',
+  sm: {
+    borderRadius: `calc(var(${borderRadius}) - 2px)`,
+  },
 })