@likec4/diagram 1.24.0 → 1.25.0

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

@@ -18,7 +18,12 @@ export const NavigationButtons = () => {
   return (
     <AnimatePresence>
       {hasStepBack && (
-        <m.div
+        <ActionIcon
+          component={m.button}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.navigate('back')
+          }}
           layout
           initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
           animate={{ opacity: 1, transform: 'translateX(0)' }}
@@ -26,18 +31,14 @@ export const NavigationButtons = () => {
             opacity: 0.05,
             transform: 'translateX(-10px)',
           }}
-          key={'back'}>
-          <ActionIcon
-            onClick={e => {
-              e.stopPropagation()
-              diagram.navigate('back')
-            }}>
-            <IconChevronLeft />
-          </ActionIcon>
-        </m.div>
+          key={'back'}
+        >
+          <IconChevronLeft />
+        </ActionIcon>
       )}
       {hasStepForward && (
-        <m.div
+        <ActionIcon
+          component={m.button}
           layout
           initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
           animate={{ opacity: 1, transform: 'translateX(0)' }}
@@ -45,15 +46,13 @@ export const NavigationButtons = () => {
             opacity: 0,
             transform: 'translateX(10px)',
           }}
-          key={'forward'}>
-          <ActionIcon
-            onClick={e => {
-              e.stopPropagation()
-              diagram.navigate('forward')
-            }}>
-            <IconChevronRight />
-          </ActionIcon>
-        </m.div>
+          key={'forward'}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.navigate('forward')
+          }}>
+          <IconChevronRight />
+        </ActionIcon>
       )}
     </AnimatePresence>
   )

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

@@ -1,7 +1,7 @@
 import { rem } from '@mantine/core'
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars } from '../../../theme-vars'
+import { mantine, vars, whereNotReducedGraphics, whereReducedGraphics } from '../../../theme-vars'
 
 export const navigationButtons = style({
   gap: calc(mantine.spacing.xs).divide(1.5).toString(),
@@ -14,6 +14,17 @@ export const panel = style({
   top: fallbackVar(vars.navigationPanel.top, '1rem'),
   left: fallbackVar(vars.navigationPanel.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',
+  },
 })
 
 globalStyle(`.likec4-top-left-panel .action-icon`, {
@@ -27,7 +38,11 @@ globalStyle(`.likec4-top-left-panel .action-icon .tabler-icon`, {
 })
 
 export const actionIconGroup = style({
-  boxShadow: mantine.shadows.md,
+  selectors: {
+    [`${whereNotReducedGraphics} &`]: {
+      boxShadow: mantine.shadows.md,
+    },
+  },
 })
 
 export const autolayoutIcon = style({})

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

@@ -1,20 +1,13 @@
 import { fallbackVar, style } from '@vanilla-extract/css'
-import { mantine, vars, whereDark } from '../../../theme-vars'
-
-export const container = style({
-  bottom: 0,
-  left: 0,
-  padding: 8,
-  margin: 0,
-})
+import { mantine, vars, whereDark, whereNotReducedGraphics } from '../../../theme-vars'
 
 export const card = style({
   cursor: 'default',
   minWidth: 200,
   maxWidth: 'calc(100vw - 16px)',
-  backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
-  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  width: 'auto',
+  backgroundColor: mantine.colors.body,
+  borderRadius: '0px',
   '@media': {
     [mantine.largerThan('sm')]: {
       minWidth: 250,
@@ -27,6 +20,15 @@ export const card = style({
   },
   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%)`,
     },
   },

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

@@ -41,20 +41,18 @@ export function DiagramTitlePanel() {
       }
       {isNotActiveWalkthrough && (
         <m.div
-          key={id}
           initial={{ opacity: 0.05, scale: 0.7 }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{
             opacity: 0.05,
             scale: 0.6,
           }}
-          className={clsx('react-flow__panel', css.container)}
+          className={clsx('react-flow__panel', 'left', 'bottom')}
           style={{
             transformOrigin: 'left center',
           }}
         >
           <Card
-            radius="sm"
             className={css.card}
             withBorder={!isCollapsed}
             p={isCollapsed ? 'sm' : 'md'}
@@ -126,10 +124,14 @@ export function DiagramTitlePanel() {
                   <Spoiler
                     maxHeight={42}
                     showLabel={
-                      <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>show more</Button>
+                      <Button component={'div'} color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>
+                        show more
+                      </Button>
                     }
                     hideLabel={
-                      <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>hide</Button>
+                      <Button component={'div'} color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>
+                        hide
+                      </Button>
                     }>
                     <Text
                       component={'div'}

package/src/likec4diagram/ui/notation/NotationPanel.css.ts

@@ -1,6 +1,6 @@
 import { fallbackVar, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars, whereDark } from '../../../theme-vars'
+import { mantine, vars, whereDark, whereNotReducedGraphics } from '../../../theme-vars'
 // import { stokeFillMix } from '../../xyflow/nodes/element/element.css'
 
 export const container = style({
@@ -10,6 +10,19 @@ export const container = style({
   margin: 0,
 })
 
+export const icon = style({
+  vars: {
+    ['--ai-radius']: '0px',
+  },
+  selectors: {
+    [`${whereNotReducedGraphics} &`]: {
+      vars: {
+        ['--ai-radius']: mantine.radius.md,
+      },
+    },
+  },
+})
+
 export const card = style({
   cursor: 'default',
   userSelect: 'none',

package/src/likec4diagram/ui/notation/NotationPanel.tsx

@@ -178,7 +178,7 @@ export const NotationPanel = memo(() => {
               size={'lg'}
               variant="default"
               color="gray"
-              radius={'md'}
+              className={css.icon}
               onClick={() => setCollapsed(false)}
             >
               <IconHelpCircle stroke={1.5} />

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

@@ -1,6 +1,5 @@
 import { createContainer, createGlobalVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../../theme-vars'
-import { whereLight } from '../../../theme-vars.css'
+import { mantine, whereLight } from '../../../theme-vars'
 import { button, buttonFocused, description, descriptionColor, iconColor, title } from './_shared.css'
 
 export { focusable } from './_shared.css'

package/src/likec4diagram/ui/search/ElementsColumn.tsx

@@ -1,8 +1,8 @@
 import {
   type Fqn,
+  type LikeC4Model,
   ifilter,
   isAncestor,
-  LikeC4Model,
   nameFromFqn,
   sortParentsFirst,
   toArray,

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

@@ -1,7 +1,6 @@
 import { rem } from '@mantine/core'
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../../theme-vars'
-import { vars, whereDark, whereLight } from '../../../theme-vars.css'
+import { mantine, vars, whereDark, whereLight } from '../../../theme-vars'
 import { button, buttonFocused } from './_shared.css'
 export { focusable } from './_shared.css'
 

package/src/likec4diagram/ui/search/SearchInput.tsx

@@ -39,7 +39,7 @@ export function LikeC4SearchInput() {
   const previous = usePreviousDistinct(search)
   const isFirstRender = useIsFirstRender()
 
-  const [isEmptyForSomeTime] = useDebouncedValue(search === '' && !isFirstRender, isString(previous) ? 400 : 1000)
+  const [isEmptyForSomeTime] = useDebouncedValue(search === '' && !isFirstRender, isString(previous) ? 500 : 2000)
 
   useWindowEvent(
     'keydown',

package/src/likec4diagram/ui/search/ViewsColum.tsx

@@ -22,13 +22,12 @@ import { m } from 'framer-motion'
 import { first } from 'remeda'
 import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
-import { emptyBoX } from './_shared.css'
 import { useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
 import { centerY, moveFocusToSearchInput } from './utils'
 import * as css from './ViewsColumn.css'
 
 export const NothingFound = () => (
-  <Box className={emptyBoX}>
+  <Box className={css.emptyBoX}>
     Nothing found
   </Box>
 )

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

@@ -2,7 +2,7 @@ import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
 import { mantine } from '../../../theme-vars'
 import { button, description, descriptionColor, iconColor, title } from './_shared.css'
 
-export { focusable } from './_shared.css'
+export { emptyBoX, focusable } from './_shared.css'
 
 export const viewButton = style([button, {
   flexWrap: 'nowrap',

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

@@ -1,6 +1,5 @@
-import { type StyleRule, createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../../theme-vars'
-import { whereDark, whereLight } from '../../../theme-vars.css'
+import { type StyleRule, createVar, fallbackVar, style } from '@vanilla-extract/css'
+import { mantine, whereDark, whereLight } from '../../../theme-vars'
 
 export const titleColor = createVar('title-color')
 export const descriptionColor = createVar('description-color')

package/src/likec4model/useLikeC4Model.ts

@@ -1,4 +1,4 @@
-import { LikeC4Model } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core'
 import { useContext } from 'react'
 import { isDefined, isNonNullish, isString } from 'remeda'
 import { LikeC4ModelContext } from './LikeC4ModelContext'

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

@@ -5,6 +5,9 @@ import { easings, mantine, transitions, vars, whereDark, whereLight } from '../.
 export const cardBg = createVar('card-bg')
 const cardBgImage = createVar('card-bg-top')
 
+export const backdropBlur = createVar('backdrop-blur')
+export const backdropOpacity = createVar('backdrop-opacity')
+
 export const dialog = style({
   boxSizing: 'border-box',
   margin: 0,
@@ -18,14 +21,14 @@ export const dialog = style({
   background: 'transparent',
   border: '0 solid transparent',
   vars: {
-    '--backdrop-opacity': '0%',
-    '--backdrop-blur': '0px',
+    [backdropOpacity]: '0%',
+    [backdropBlur]: '0px',
   },
   selectors: {
     [`&::backdrop`]: {
-      WebkitBackdropFilter: 'blur(var(--backdrop-blur))',
-      backdropFilter: 'blur(var(--backdrop-blur))',
-      backgroundColor: `rgb(36 36 36 / var(--backdrop-opacity))`,
+      WebkitBackdropFilter: `blur(${backdropBlur})`,
+      backdropFilter: `blur(${backdropBlur})`,
+      backgroundColor: `rgb(36 36 36 / ${backdropOpacity})`,
     },
   },
 })