@likec4/diagram 1.21.1 → 1.22.0

package/src/context/IconRenderer.tsx

@@ -1,5 +1,16 @@
+import type { ElementShape } from '@likec4/core'
+import {
+  type Icon,
+  type IconProps,
+  IconBrowser,
+  IconCylinder,
+  IconDeviceMobile,
+  IconRectangularPrism,
+  IconReorder,
+  IconUser,
+} from '@tabler/icons-react'
 import clsx from 'clsx'
-import { type ReactNode, createContext, useContext } from 'react'
+import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes, createContext, useContext } from 'react'
 import type { ElementIconRenderer } from '../LikeC4Diagram.props'
 
 const IconRendererContext = createContext<ElementIconRenderer | null>(null)
@@ -43,3 +54,45 @@ export function IconRenderer({
     </div>
   )
 }
+
+const ShapeIcons = {
+  browser: IconBrowser,
+  cylinder: IconCylinder,
+  mobile: IconDeviceMobile,
+  person: IconUser,
+  queue: IconReorder,
+  rectangle: IconRectangularPrism,
+  storage: IconCylinder,
+} satisfies Record<ElementShape, ForwardRefExoticComponent<IconProps & RefAttributes<Icon>>>
+
+export function IconOrShapeRenderer({
+  element,
+  className,
+}: {
+  element: {
+    id: string
+    title: string
+    shape: ElementShape
+    icon?: string | null | undefined
+  }
+  className: string
+}) {
+  const icon = IconRenderer({
+    element,
+    className,
+  })
+  if (icon) {
+    return icon
+  }
+  const ShapeIcon = ShapeIcons[element.shape]
+  return (
+    <div
+      className={clsx(
+        className,
+        'likec4-shape-icon',
+      )}
+    >
+      <ShapeIcon />
+    </div>
+  )
+}

package/src/globals.css.ts

@@ -7,8 +7,6 @@ import { mantine, vars, whereDark } from './theme-vars'
 export const rootClassName = 'likec4-diagram-root'
 
 globalStyle(`.${rootClassName}`, {
-  containerName: 'likec4-diagram-root',
-  containerType: 'size',
   overflow: 'hidden',
   position: 'relative',
   width: '100%',

package/src/likec4diagram/DiagramUI.tsx

@@ -1,5 +1,4 @@
 import { IfEnabled } from '../context'
-import { LikeC4Search } from '../LikeC4Search'
 import { Overlays } from '../overlays/Overlays'
 import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
@@ -8,9 +7,6 @@ export function DiagramUI() {
     <>
       <Controls />
       <Overlays />
-      <IfEnabled feature="Search">
-        <LikeC4Search />
-      </IfEnabled>
       <IfEnabled feature="ViewTitle">
         <DiagramTitlePanel />
       </IfEnabled>

package/src/likec4diagram/XYFlow.tsx

@@ -2,6 +2,7 @@ import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
+import { memo } from 'react'
 import type { EnforceOptional } from 'type-fest/source/enforce-optional'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
@@ -9,6 +10,7 @@ import { useDiagram } from '../hooks/useDiagram'
 import { useDiagramContext } from '../hooks/useDiagramContext'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import { edgeTypes, nodeTypes } from './custom'
+import { DiagramUI } from './DiagramUI'
 import type { DiagramContext } from './state/machine'
 import type { Types } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
@@ -43,7 +45,7 @@ type Picked = EnforceOptional<
 >
 export type LikeC4DiagramXYFlowProps = Required<Picked>
 
-export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlowProps) => {
+export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({ background, nodesDraggable, nodesSelectable }) => {
   const diagram = useDiagram()
   const {
     initialized,
@@ -80,10 +82,10 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       onNodesChange={useCallbackRef((changes) => {
-        diagram.send({ type: 'xyflow.applyNodeChages', changes })
+        diagram.send({ type: 'xyflow.applyNodeChanges', changes })
       })}
       onEdgesChange={useCallbackRef((changes) => {
-        diagram.send({ type: 'xyflow.applyEdgeChages', changes })
+        diagram.send({ type: 'xyflow.applyEdgeChanges', changes })
       })}
       background={initialized ? background : 'transparent'}
       // Fitview is handled in onInit
@@ -105,6 +107,7 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
       })}
       onDoubleClick={useCallbackRef(e => {
         e.stopPropagation()
+        e.preventDefault()
         diagram.send({ type: 'xyflow.paneDblClick' })
         onCanvasDblClick?.(e as any)
       })}
@@ -115,34 +118,31 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
       onInit={useCallbackRef((instance) => {
         diagram.send({ type: 'xyflow.init', instance })
       })}
-      {...onNodeContextMenu && {
-        onNodeContextMenu: useCallbackRef((event, node) => {
-          const diagramNode = nonNullable(
-            diagram.findDiagramNode(node.id as NodeId),
-            `diagramNode ${node.id} not found`,
-          )
-          onNodeContextMenu(diagramNode, event)
-        }),
-      }}
-      {...onEdgeContextMenu && {
-        onEdgeContextMenu: useCallbackRef((event, edge) => {
-          const diagramEdge = nonNullable(
-            diagram.findDiagramEdge(edge.id as EdgeId),
-            `diagramEdge ${edge.id} not found`,
-          )
-          onEdgeContextMenu(diagramEdge, event)
-        }),
-      }}
-      {...onCanvasContextMenu && {
-        onPaneContextMenu: useCallbackRef((event) => {
-          onCanvasContextMenu(event as any)
-        }),
-      }}
+      onNodeContextMenu={useCallbackRef((event, node) => {
+        const diagramNode = nonNullable(
+          diagram.findDiagramNode(node.id as NodeId),
+          `diagramNode ${node.id} not found`,
+        )
+        onNodeContextMenu?.(diagramNode, event)
+      })}
+      onEdgeContextMenu={useCallbackRef((event, edge) => {
+        const diagramEdge = nonNullable(
+          diagram.findDiagramEdge(edge.id as EdgeId),
+          `diagramEdge ${edge.id} not found`,
+        )
+        onEdgeContextMenu?.(diagramEdge, event)
+      })}
+      onPaneContextMenu={useCallbackRef((event) => {
+        onCanvasContextMenu?.(event as any)
+      })}
       {...enableFitView && {
         onViewportResize,
       }}
-      {...(notReadOnly && rest.nodesDraggable && layoutConstraints)}
-      {...props}
-      {...rest} />
+      nodesDraggable={nodesDraggable}
+      nodesSelectable={nodesSelectable}
+      {...(notReadOnly && nodesDraggable && layoutConstraints)}
+      {...props}>
+      <DiagramUI />
+    </BaseXYFlow>
   )
-}
+}, shallowEqual)

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

@@ -27,7 +27,7 @@ import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@
 import clsx from 'clsx'
 import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
-import { Link } from '../../../base/Link'
+import { Link } from '../../../components/Link'
 import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
@@ -127,6 +127,7 @@ export function RelationshipsDropdownMenu({
       closeOnClickOutside
       clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
       closeOnEscape
+      keepMounted={false}
       closeOnItemClick={false}
       disabled={disabled}
       position="bottom-start"

package/src/likec4diagram/state/assign.ts

@@ -321,7 +321,7 @@ export function resetEdgeControlPoints({ context }: ActionArg): Partial<DiagramC
     }
 
     // Edge is a loop
-    if (source == target) {
+    if (source === target) {
       const loopSize = 80
       const centerOfTopBoundary = new VectorImpl(0, source.height || 0)
         .mul(-0.5)

package/src/likec4diagram/state/machine.ts

@@ -4,7 +4,6 @@ import {
   type EdgeId,
   type Fqn,
   type NodeId,
-  type RelationId,
   type StepEdgeId,
   type ViewChange,
   type ViewId,
@@ -136,8 +135,8 @@ export namespace DiagramContext {
 export type Events =
   | HotKeyEvent
   | { type: 'xyflow.init'; instance: ReactFlowInstance<Types.Node, Types.Edge> }
-  | { type: 'xyflow.applyNodeChages'; changes: NodeChange<Types.Node>[] }
-  | { type: 'xyflow.applyEdgeChages'; changes: EdgeChange<Types.Edge>[] }
+  | { type: 'xyflow.applyNodeChanges'; changes: NodeChange<Types.Node>[] }
+  | { type: 'xyflow.applyEdgeChanges'; changes: EdgeChange<Types.Edge>[] }
   | { type: 'xyflow.viewportMoved'; viewport: Viewport; manually: boolean }
   | { type: 'xyflow.nodeClick'; node: Types.Node }
   | { type: 'xyflow.edgeClick'; edge: Types.Edge }
@@ -634,7 +633,7 @@ export const diagramMachine = setup({
         pending: {
           entry: enqueueActions(({ enqueue }) => {
             enqueue.sendTo(c => c.context.syncLayoutActorRef, { type: 'stop' })
-            enqueue.stopChild('layout')
+            enqueue.stopChild('syncLayout')
             enqueue({
               type: 'trigger:NavigateTo',
               params: ({ context }) => ({
@@ -657,15 +656,16 @@ export const diagramMachine = setup({
                       },
                     },
                   })
+                  enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 80 })
                 } else {
                   enqueue({
                     type: 'xyflow:setViewportCenter',
                     params: getBBoxCenter(event.view.bounds),
                   })
+                  enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
                 }
                 enqueue.assign(updateNavigationHistory)
                 enqueue.assign(mergeXYNodesEdges)
-                enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 75 })
               }),
               target: 'done',
             },
@@ -765,12 +765,12 @@ export const diagramMachine = setup({
     },
   },
   on: {
-    'xyflow.applyNodeChages': {
+    'xyflow.applyNodeChanges': {
       actions: assign({
         xynodes: ({ context, event }) => applyNodeChanges(event.changes, context.xynodes),
       }),
     },
-    'xyflow.applyEdgeChages': {
+    'xyflow.applyEdgeChanges': {
       actions: assign({
         xyedges: ({ context, event }) => applyEdgeChanges(event.changes, context.xyedges),
       }),
@@ -838,17 +838,19 @@ export const diagramMachine = setup({
                   },
                 },
               })
+              enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 80 })
             } else {
               enqueue({
                 type: 'xyflow:setViewportCenter',
                 params: getBBoxCenter(event.view.bounds),
               })
+              enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
             }
           } else {
             enqueue.sendTo(c => c.context.syncLayoutActorRef, { type: 'synced' })
-          }
-          if (isAnotherView || !context.viewportChangedManually) {
-            enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 90 })
+            if (!context.viewportChangedManually) {
+              enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 50 })
+            }
           }
           enqueue.assign(mergeXYNodesEdges)
           enqueue.assign({

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

@@ -1,14 +1,15 @@
-import { ActionIconGroup, Badge, Loader, Stack } from '@mantine/core'
-import { openSpotlight } from '@mantine/spotlight'
-import { IconFileSymlink, IconFocusCentered, IconSearch } from '@tabler/icons-react'
+import { ActionIconGroup, Badge, Group, Loader, Stack } from '@mantine/core'
+import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
 import { clsx } from 'clsx'
+import { LayoutGroup } from 'framer-motion'
 import { memo } from 'react'
-import { IfNotEnabled, useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
+import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
 import { useDiagramSyncLayoutState } from '../../../hooks/useDiagramActor'
 import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import { stopPropagation } from '../../../utils'
+import { LikeC4Search } from '../search/LikeC4Search'
 import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
 import { LayoutDriftNotification } from './LayoutDriftNotification'
@@ -25,41 +26,47 @@ export const Controls = memo(() => {
   const diagram = useDiagram()
   const {
     onOpenSource,
+    onBurgerMenuClick,
   } = useDiagramEventHandlers()
   const {
     enableControls,
     enableSearch,
     enableNavigationButtons,
     enableReadOnly,
-    enableEdgeEditing,
     enableVscode,
   } = useEnabledFeatures()
   const notReadOnly = !enableReadOnly
   const portalProps = useMantinePortalProps()
+
   return (
-    <>
-      <Stack
-        className={clsx(
-          'react-flow__panel',
-          css.panel,
-          'likec4-top-left-panel',
-        )}
-        align="flex-start"
-        onClick={stopPropagation}
-        gap={'xs'}>
-        {enableNavigationButtons && <NavigationButtons />}
-        <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
-          {enableControls && enableSearch && (
-            <Tooltip label="Search (Ctrl+F or ⌘+F)" {...portalProps}>
+    <Group
+      align="flex-start"
+      className={clsx(
+        'react-flow__panel',
+        css.panel,
+        'likec4-top-left-panel',
+      )}
+      gap="xs"
+      onClick={stopPropagation}
+    >
+      <Stack align="flex-start" gap="xs">
+        <LayoutGroup>
+          <Group
+            className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
+            gap={'xs'}>
+            {onBurgerMenuClick && (
               <ActionIcon
                 onClick={e => {
                   e.stopPropagation()
-                  openSpotlight()
+                  onBurgerMenuClick()
                 }}>
-                <IconSearch />
+                <IconMenu2 />
               </ActionIcon>
-            </Tooltip>
-          )}
+            )}
+            {enableNavigationButtons && <NavigationButtons />}
+          </Group>
+        </LayoutGroup>
+        <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
           {enableVscode && (
             <Tooltip label="Open source" {...portalProps}>
               <ActionIcon
@@ -90,9 +97,12 @@ export const Controls = memo(() => {
             </Tooltip>
           )}
         </ActionIconGroup>
-        {notReadOnly && <SyncLayoutBadge />}
       </Stack>
-    </>
+      <Group>
+        {enableSearch && <LikeC4Search />}
+        {notReadOnly && <SyncLayoutBadge />}
+      </Group>
+    </Group>
   )
 })
 

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

@@ -2,19 +2,13 @@ import { IconChevronRight } from '@tabler/icons-react'
 
 import { AnimatePresence, m } from 'framer-motion'
 
-import { Group } from '@mantine/core'
-import { IconChevronLeft, IconMenu2 } from '@tabler/icons-react'
-import clsx from 'clsx'
-import { LayoutGroup } from 'framer-motion'
-import { useDiagramEventHandlers } from '../../../context'
+import { IconChevronLeft } from '@tabler/icons-react'
 import { useDiagram } from '../../../hooks/useDiagram'
 import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import { ActionIcon } from './_shared'
-import * as css from './styles.css'
 
 export const NavigationButtons = () => {
   const diagram = useDiagram()
-  const { onBurgerMenuClick } = useDiagramEventHandlers()
   const {
     hasStepBack,
     hasStepForward,
@@ -23,61 +17,45 @@ export const NavigationButtons = () => {
     hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1,
   }))
   return (
-    <LayoutGroup>
-      <Group
-        className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
-        align="flex-start"
-        gap={'xs'}>
-        {onBurgerMenuClick && (
+    <AnimatePresence>
+      {hasStepBack && (
+        <m.div
+          layout
+          initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
+          animate={{ opacity: 1, transform: 'translateX(0)' }}
+          exit={{
+            opacity: 0.05,
+            transform: 'translateX(-10px)',
+          }}
+          key={'back'}>
           <ActionIcon
             onClick={e => {
               e.stopPropagation()
-              onBurgerMenuClick()
+              diagram.navigate('back')
             }}>
-            <IconMenu2 />
+            <IconChevronLeft />
           </ActionIcon>
-        )}
-        <AnimatePresence>
-          {hasStepBack && (
-            <m.div
-              layout
-              initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
-              animate={{ opacity: 1, transform: 'translateX(0)' }}
-              exit={{
-                opacity: 0.05,
-                transform: 'translateX(-10px)',
-              }}
-              key={'back'}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  diagram.navigate('back')
-                }}>
-                <IconChevronLeft />
-              </ActionIcon>
-            </m.div>
-          )}
-          {hasStepForward && (
-            <m.div
-              layout
-              initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
-              animate={{ opacity: 1, transform: 'translateX(0)' }}
-              exit={{
-                opacity: 0,
-                transform: 'translateX(10px)',
-              }}
-              key={'forward'}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  diagram.navigate('forward')
-                }}>
-                <IconChevronRight />
-              </ActionIcon>
-            </m.div>
-          )}
-        </AnimatePresence>
-      </Group>
-    </LayoutGroup>
+        </m.div>
+      )}
+      {hasStepForward && (
+        <m.div
+          layout
+          initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
+          animate={{ opacity: 1, transform: 'translateX(0)' }}
+          exit={{
+            opacity: 0,
+            transform: 'translateX(10px)',
+          }}
+          key={'forward'}>
+          <ActionIcon
+            onClick={e => {
+              e.stopPropagation()
+              diagram.navigate('forward')
+            }}>
+            <IconChevronRight />
+          </ActionIcon>
+        </m.div>
+      )}
+    </AnimatePresence>
   )
 }

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

@@ -5,12 +5,14 @@ import { mantine, vars } from '../../../theme-vars'
 
 export const navigationButtons = style({
   gap: calc(mantine.spacing.xs).divide(1.5).toString(),
+  ':empty': {
+    display: 'none',
+  },
 })
 
 export const panel = style({
   top: fallbackVar(vars.navigationPanel.top, '1rem'),
   left: fallbackVar(vars.navigationPanel.left, '1rem'),
-  gap: calc(mantine.spacing.xs).divide(1.5).toString(),
   margin: 0,
 })
 

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

@@ -3,7 +3,7 @@ import { useLocalStorage } from '@mantine/hooks'
 import { IconMenu } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { Link } from '../../../base'
+import { Link } from '../../../components/Link'
 import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import type { DiagramContext } from '../../state/machine'
 import * as css from './DiagramTitlePanel.css'

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

@@ -0,0 +1,119 @@
+import { createContainer, createGlobalVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../../theme-vars'
+import { whereLight } from '../../../theme-vars.css'
+import { button, buttonFocused, description, descriptionColor, iconColor, title } from './_shared.css'
+
+export { focusable } from './_shared.css'
+
+export const treeContainer = createContainer('likec4-elements-tree')
+
+const whenContainerIsNarrow = `${treeContainer} (width < 450px)`
+
+export const treeNode = style({
+  outline: 'none',
+  marginBottom: 8,
+})
+export const treeRoot = style({
+  overflow: 'hidden',
+  containerName: treeContainer,
+  containerType: 'inline-size',
+  height: '100%',
+})
+export const treeLabel = style({
+  display: 'flex',
+  alignItems: 'baseline',
+  outline: 'none !important',
+  gap: 4,
+})
+export const treeSubtree = style({
+  marginTop: 8,
+})
+
+export const iconSize = createGlobalVar('likec4-icon-size')
+export const elementExpandIcon = style({
+  color: mantine.colors.dimmed,
+})
+
+export const elementButton = style([button, {
+  flexGrow: 1,
+  vars: {
+    [iconSize]: '24px',
+  },
+  '@container': {
+    [`${whenContainerIsNarrow}`]: {
+      vars: {
+        [iconSize]: '18px',
+      },
+    },
+  },
+}])
+
+globalStyle(`${treeNode}:focus > ${treeLabel} ${elementButton}`, buttonFocused)
+
+export const elementTitleAndId = style({
+  '@container': {
+    [`${whenContainerIsNarrow}`]: {
+      flexDirection: 'column-reverse',
+      alignItems: 'flex-start',
+      gap: 2,
+    },
+  },
+})
+
+export const elementTitle = style([title])
+export const elementId = style({
+  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
+  fontSize: 10,
+  lineHeight: 1.3,
+  display: 'block',
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+  padding: '1px 5px',
+  borderRadius: 4,
+  background: `color-mix(in srgb, ${mantine.colors.dark[9]}, transparent 70%)`,
+  selectors: {
+    [`${whereLight} &`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.gray[3]}, transparent 80%)`,
+    },
+  },
+})
+export const elementDescription = style([description])
+
+export const elementIcon = style({
+  flex: `0 0 ${iconSize}`,
+  height: iconSize,
+  width: iconSize,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
+  marginTop: 4,
+})
+globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
+  width: '100%',
+  height: 'auto',
+  maxHeight: '100%',
+  pointerEvents: 'none',
+})
+globalStyle(`${elementIcon} img`, {
+  objectFit: 'contain',
+})
+globalStyle(`${elementIcon}.likec4-shape-icon svg`, {
+  color: iconColor,
+  width: '90%',
+  strokeWidth: 1.5,
+})
+
+export const elementViewsCount = style({
+  flex: 0,
+  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
+  fontSize: 10,
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+  lineHeight: 1.1,
+  '@container': {
+    [`${whenContainerIsNarrow}`]: {
+      display: 'none',
+    },
+  },
+})