@likec4/diagram 1.26.1 → 1.27.0

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

@@ -1,103 +1,187 @@
-import { type StyleRule, createVar, fallbackVar, style } from '@vanilla-extract/css'
-import { mantine, whereDark, whereLight } from '../../../theme-vars'
+import { css, sva } from '@likec4/styles/css'
+import type { ColorToken } from '@likec4/styles/tokens'
 
-export const titleColor = createVar('title-color')
-export const descriptionColor = createVar('description-color')
-export const iconColor = createVar('icon-color')
+// export const titleColor = '--title-color'
+// export const descriptionColor = '---description-color'
+// export const iconColor = '--icon-color'
 
-export const buttonFocused = {
+const buttonFocused = css.raw({
   outline: 'none',
-  backgroundColor: mantine.colors.primaryColors[8],
-  borderColor: mantine.colors.primaryColors[9],
-  vars: {
-    [iconColor]: mantine.colors.primaryColors[2],
-    [titleColor]: mantine.colors.primaryColors[0],
-    [descriptionColor]: mantine.colors.primaryColors[1],
-  },
-} satisfies StyleRule
+  background: 'mantine.colors.primary[8]',
+  borderColor: 'mantine.colors.primary[9]',
+})
+
+const _treenodefocus = '.mantine-Tree-node:focus > .mantine-Tree-label &'
 
-export const button = style({
+function colors(color: ColorToken, hover: ColorToken) {
+  return {
+    color,
+    _groupHover: {
+      color: hover,
+    },
+    _groupFocus: {
+      color: hover,
+    },
+    [_treenodefocus]: {
+      color: hover,
+    },
+  }
+}
+
+const button = css.raw({
   display: 'flex',
   width: '100%',
-  background: mantine.colors.body,
-  borderRadius: mantine.radius.sm,
+  background: 'mantine.colors.body',
+  rounded: 'sm',
   padding: `12px 8px 12px 14px`,
-  minHeight: 60,
-  gap: 10,
+  minHeight: '60px',
+  gap: '8',
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
-  border: `1px solid ${mantine.colors.defaultBorder}`,
-  vars: {
-    [titleColor]: mantine.colors.dark[1],
-    [iconColor]: mantine.colors.dimmed,
-    [descriptionColor]: mantine.colors.dimmed,
-  },
-  ':hover': {
+  border: `1px solid`,
+  borderColor: 'mantine.colors.defaultBorder',
+  // [titleColor]: '{colors.mantine.colors.dark[1]}',
+  // [iconColor]: '{colors.mantine.colors.dimmed}',
+  // [descriptionColor]: '{colors.mantine.colors.dimmed}',
+  _hover: {
     ...buttonFocused,
-    borderColor: mantine.colors.primaryColors[9],
-    backgroundColor: `color-mix(in srgb, ${buttonFocused.backgroundColor}, transparent 40%)`,
+    borderColor: 'mantine.colors.primary[9]',
+    background: `mantine.colors.primary[8]/60`,
   },
-  ':focus': buttonFocused,
-  selectors: {
-    [`${whereDark} &`]: {
-      borderColor: 'transparent',
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`,
-      // background: mantine.colors.dark[6],
-    },
-    [`${whereLight} &`]: {
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.white}, transparent 10%)`,
-      vars: {
-        [iconColor]: mantine.colors.gray[6],
-        [titleColor]: mantine.colors.gray[7],
-      },
-    },
-    [`${whereLight} &:hover`]: {
-      borderColor: mantine.colors.primaryColors[6],
-      backgroundColor: mantine.colors.primaryColors[5],
-      vars: {
-        [iconColor]: mantine.colors.primaryColors[3],
-        [titleColor]: mantine.colors.primaryColors[0],
-        [descriptionColor]: mantine.colors.primaryColors[1],
-      },
+  _focus: buttonFocused,
+  [_treenodefocus]: buttonFocused,
+  _dark: {
+    borderColor: 'transparent',
+    background: `mantine.colors.dark[6]/80`,
+    // background: 'mantine.colors.dark[6]',
+  },
+  _light: {
+    background: `mantine.colors.white/80`,
+    // [iconColor]: '{colors.mantine.colors.gray[6]}',
+    // [titleColor]: '{colors.mantine.colors.gray[7]}',
+    _hover: {
+      borderColor: 'mantine.colors.primary[6]',
+      backgroundColor: 'mantine.colors.primary[5]',
+      // [iconColor]: '{colors.mantine.colors.primary[3])',
+      // [titleColor]: '{colors.mantine.colors.primary[0])',
+      // [descriptionColor]: '{colors.mantine.colors.primary[1]}',
     },
   },
 })
 
-export const focusable = style({})
+export const focusable = 'likec4-focusable'
+
+const iconSize = {
+  ref: 'var(--likec4-icon-size, 24px)',
+}
+
+const icon = css.raw({
+  ...colors('mantine.colors.dimmed', 'mantine.colors.primary[0]'),
+  _light: {
+    ...colors('mantine.colors.gray[6]', 'mantine.colors.primary[3]'),
+  },
+  flex: `0 0 ${iconSize.ref}`,
+  height: iconSize.ref,
+  width: iconSize.ref,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
 
-export const title = style({
-  color: fallbackVar(titleColor, mantine.colors.gray[7]),
-  fontSize: 16,
+  ['--ti-size']: iconSize.ref,
+  [`& svg, & img`]: {
+    width: '100%',
+    height: 'auto',
+    maxHeight: '100%',
+    pointerEvents: 'none',
+  },
+  [`& img`]: {
+    objectFit: 'contain',
+  },
+  '&.likec4-shape-icon svg': {
+    // color: `[var(${iconColor})]`,
+    strokeWidth: 1.5,
+  },
+  // [iconSize]: '24px',
+  // [whenContainerIsNarrow]: {
+  //   [iconSize]: '18px',
+  // },
+})
+
+const title = css.raw({
+  fontSize: '16px',
   fontWeight: 500,
-  lineHeight: 1.1,
-  selectors: {
-    [`:where([data-disabled]) &`]: {
-      opacity: 0.4,
-    },
+  lineHeight: '1.1',
+  [`:where([data-disabled]) &`]: {
+    opacity: 0.4,
+  },
+
+  // color: 'mantine.colors.dark[1]',
+  // _groupHover: {
+  //   color: 'mantine.colors.primary[1]',
+  // },
+  // _groupFocus: {
+  //   color: 'mantine.colors.primary[1]',
+  // },
+  ...colors('mantine.colors.dark[1]', 'mantine.colors.primary[1]'),
+  _light: {
+    ...colors('mantine.colors.gray[6]', 'mantine.colors.primary[3]'),
+    // color: `mantine.colors.gray[6]`,
+    // _groupHover: {
+    //   color: 'mantine.colors.primary[3]',
+    // },
+    // _groupFocus: {
+    //   color: 'mantine.colors.primary[3]',
+    // },
   },
 })
-export const description = style({
-  marginTop: 4,
-  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
-  fontSize: 12,
-  lineHeight: 1.4,
-  selectors: {
-    [`:where([data-disabled]) &`]: {
-      opacity: 0.85,
+const descriptionColor = css.raw({
+  color: {
+    base: 'mantine.colors.dimmed',
+    _groupHover: {
+      base: 'mantine.colors.primary[1]',
+      _light: 'mantine.colors.primary[0]',
     },
+    _groupFocus: 'mantine.colors.primary[0]',
+  },
+  [_treenodefocus]: {
+    color: 'mantine.colors.primary[0]',
+  },
+})
+
+const description = css.raw(descriptionColor, {
+  marginTop: '4px',
+  fontSize: '12px',
+  lineHeight: '1.4',
+
+  [`:where([data-disabled]) &`]: {
+    opacity: 0.85,
   },
 })
 
-export const emptyBoX = style({
+export const emptyBoX = css({
   width: '100%',
   height: '100%',
-  border: `2px dashed ${mantine.colors.defaultBorder}`,
-  borderRadius: mantine.radius.md,
+  border: `2px dashed`,
+  borderColor: 'mantine.colors.defaultBorder',
+  rounded: 'md',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  fontSize: mantine.fontSizes.md,
-  color: mantine.colors.dimmed,
-  padding: mantine.spacing.md,
-  paddingBlock: mantine.spacing.xl,
+  fontSize: 'md',
+  color: 'mantine.colors.dimmed',
+  padding: 'md',
+  paddingBlock: 'xl',
+})
+
+export const buttonsva = sva({
+  slots: ['root', 'icon', 'title', 'description', 'descriptionColor'],
+  className: 'search-button',
+  base: {
+    root: button,
+    icon,
+    title,
+    description,
+    descriptionColor,
+  },
 })

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.ts

@@ -1,7 +1,7 @@
-import { createVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
+import type { SystemStyleObject } from '@likec4/styles/types'
 
-export const container = style({
+export const container = css({
   position: 'absolute',
   bottom: '0.5rem',
   left: '50%',
@@ -12,50 +12,48 @@ export const container = style({
   flexDirection: 'column',
   gap: '0.4rem',
   alignItems: 'center',
-  '@media': {
-    [mantine.largerThan('md')]: {
-      gap: '0.6rem',
-    },
+  md: {
+    gap: '0.6rem',
   },
 })
 
-export const buttons = style({
+const tablerIcons = {
+  '& .tabler-icon': {
+    width: '0.85em',
+    height: '0.85em',
+  },
+} satisfies SystemStyleObject
+
+export const buttons = css({
   backdropFilter: 'blur(8px)',
   transition: 'all 175ms ease-in',
-  ':hover': {
-    transitionTimingFunction: 'ease-out',
+  _hover: {
+    transitionTimingFunction: 'out',
     transform: 'scale(1.1)',
   },
-  ':active': {
+  _active: {
     transitionDuration: '100ms',
     transform: 'scale(0.98) translateY(3px)',
   },
+  ...tablerIcons,
 })
 
-var transparency = createVar()
-export const btn = style({
+export const btn = css({
   transition: 'all 175ms ease-in',
-  backgroundColor: 'var(--button-bg)',
-  vars: {
-    [transparency]: '35%',
-    ['--button-bg']: `color-mix(in srgb, ${mantine.colors.primaryColors.filled}, transparent ${transparency})`,
-    ['--button-hover']: `color-mix(in srgb, ${mantine.colors.primaryColors.filledHover}, transparent ${transparency})`,
+  background: 'mantine.colors.primary.filled/65',
+  _hover: {
+    background: 'mantine.colors.primary.filledHover/65',
   },
-  selectors: {
-    [mantine.lightSelector]: {
-      vars: {
-        [transparency]: '15%',
-      },
+  _light: {
+    background: 'mantine.colors.primary.filled/85',
+    _hover: {
+      background: 'mantine.colors.primary.filledHover/85',
     },
   },
+  ...tablerIcons,
 })
 
-globalStyle(`:where(${buttons}, ${btn}) .tabler-icon`, {
-  width: '0.85em',
-  height: '0.85em',
-})
-
-export const parallelStateFrame = style({
+export const parallelStateFrame = css({
   position: 'absolute',
   margin: 0,
   padding: 0,
@@ -63,11 +61,10 @@ export const parallelStateFrame = style({
   left: 0,
   width: '100%',
   height: '100%',
-  border: `2px solid ${mantine.colors.orange[6]}`,
+  border: `2px solid`,
+  borderColor: 'mantine.colors.orange[6]',
   pointerEvents: 'none',
-  '@media': {
-    [mantine.largerThan('md')]: {
-      borderWidth: 4,
-    },
+  md: {
+    borderWidth: 4,
   },
 })

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.tsx

@@ -10,7 +10,7 @@ import { AnimatePresence, m } from 'framer-motion'
 import { isNonNull, isTruthy } from 'remeda'
 import { useXYStore } from '../../../hooks'
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
-import * as css from './DynamicViewWalkthrough.css'
+import * as styles from './DynamicViewWalkthrough.css'
 
 export function DynamicViewWalkthrough() {
   const isMobile = useXYStore(s => s.width <= 750)
@@ -28,7 +28,7 @@ export function DynamicViewWalkthrough() {
   const diagram = useDiagram()
 
   const buttonProps = {
-    className: css.btn,
+    className: styles.btn,
     size: isMobile ? 'compact-md' : 'lg',
     radius: isMobile ? 'lg' : 'xl',
   }
@@ -58,11 +58,11 @@ export function DynamicViewWalkthrough() {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          className={clsx('react-flow__panel', css.parallelStateFrame)}
+          className={clsx('react-flow__panel', styles.parallelStateFrame)}
         />
       )}
       <Box
-        className={clsx('react-flow__panel', css.container)}
+        className={clsx('react-flow__panel', styles.container)}
         onClick={(e) => e.stopPropagation()}
         onDoubleClick={(e) => e.stopPropagation()}
       >
@@ -70,7 +70,7 @@ export function DynamicViewWalkthrough() {
           && (
             <Button
               {...buttonProps}
-              className={clsx(css.buttons, css.btn)}
+              className={clsx(styles.buttons, styles.btn)}
               rightSection={<IconPlayerPlayFilled />}
               onClick={() => diagram.startWalkthrough()}
               px={'xl'}>
@@ -95,7 +95,7 @@ export function DynamicViewWalkthrough() {
           </Badge>
         )}
         {isActive && (
-          <ButtonGroup className={css.buttons}>
+          <ButtonGroup className={styles.buttons}>
             <Button
               {...buttonProps}
               pl={'lg'}

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -94,7 +94,7 @@ function viewToNodesEdge(opts: {
     const base = {
       id,
       selectable: selectable && node.kind !== ElementKind.Group,
-      focusable: selectable && !isCompound,
+      focusable: selectable && node.kind !== ElementKind.Group,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -171,6 +171,7 @@ function viewToNodesEdge(opts: {
               deploymentFqn: deploymentFqn,
               modelFqn,
             },
+            dragHandle: '.likec4-compound-title',
           } satisfies Types.CompoundDeploymentNode,
         )
         break

package/src/overlays/Overlays.tsx

@@ -2,7 +2,7 @@ import { nonexhaustive } from '@likec4/core'
 import { Box, Button, Code, Group, Notification, ScrollAreaAutosize } from '@mantine/core'
 import { IconX } from '@tabler/icons-react'
 import { useSelector } from '@xstate/react'
-import { AnimatePresence, useReducedMotion } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, useReducedMotion } from 'framer-motion'
 import { animate } from 'framer-motion/dom'
 import { memo, useEffect, useMemo } from 'react'
 import { type FallbackProps, ErrorBoundary } from 'react-error-boundary'
@@ -135,9 +135,11 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
   return (
     <DiagramFeatures.Overlays>
       <ErrorBoundary FallbackComponent={Fallback} onReset={() => overlaysActorRef.send({ type: 'close.all' })}>
-        <AnimatePresence>
-          {overlaysReact}
-        </AnimatePresence>
+        <LayoutGroup>
+          <AnimatePresence>
+            {overlaysReact}
+          </AnimatePresence>
+        </LayoutGroup>
       </ErrorBoundary>
     </DiagramFeatures.Overlays>
   )