@likec4/diagram 1.27.3 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.27.3",
+  "version": "1.28.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -48,23 +48,23 @@
     "@react-hookz/web": "^25.1.0",
     "@tabler/icons-react": "3.31.0",
     "@xstate/react": "^5.0.3",
-    "@xyflow/react": "^12.5.2",
+    "@xyflow/react": "^12.5.3",
     "@xyflow/system": "^0.0.53",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "fast-equals": "^5.2.2",
-    "framer-motion": "^12.6.2",
+    "framer-motion": "^12.6.3",
     "nanostores": "0.11.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^5.0.0",
     "react-shadow": "^20.6.0",
     "remeda": "^2.21.2",
-    "type-fest": "^4.38.0",
+    "type-fest": "^4.39.1",
     "xstate": "^5.19.2",
-    "@likec4/core": "1.27.3",
-    "@likec4/styles": "1.27.3"
+    "@likec4/core": "1.28.0",
+    "@likec4/styles": "1.28.0"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.53.3",
@@ -76,12 +76,12 @@
     "@types/node": "^20.17.28",
     "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.5.3",
-    "typescript": "^5.8.2",
-    "vite": "^6.2.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.0.9",
+    "vitest": "^3.1.1",
     "wireit": "^0.14.11",
-    "@likec4/tsconfig": "1.27.3"
+    "@likec4/tsconfig": "1.28.0"
   },
   "scripts": {
     "generate": "panda codegen",

package/src/base/primitives/compound/CompoundNodeContainer.css.ts

@@ -1,7 +1,4 @@
 import { css, sva } from '@likec4/styles/css'
-// import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-// import { calc } from '@vanilla-extract/css-utils'
-// import { easings, vars, whereLight, whereNotReducedGraphics } from '../../../theme-vars'
 
 // export const _compoundOpacity = '--_compound-opacity'
 // const compoundOpacity = `var(${_compoundOpacity})`

package/src/base/primitives/edge/EdgeActionButton.tsx

@@ -2,10 +2,9 @@ import { cx } from '@likec4/styles/css'
 import { ActionIcon } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
 import { stopPropagation } from '../../../utils/xyflow'
-import type { EdgeProps } from '../../types'
 import { actionBtn } from './edge.css'
 
-type EdgeActionBtnProps = EdgeProps & {
+type EdgeActionBtnProps = {
   icon?: React.ReactNode
   onClick: (e: React.MouseEvent) => void
 }

package/src/base/primitives/element/ElementActionButtons.tsx

@@ -1,6 +1,7 @@
 import { css, cx } from '@likec4/styles/css'
 import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
+import { useId } from '@mantine/hooks'
 import { m } from 'framer-motion'
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
 import { stopPropagation } from '../../../utils/xyflow'
@@ -33,13 +34,13 @@ const actionButtons = css({
 })
 
 export function ElementActionButtons({
-  id,
   selected = false,
   data: {
     hovered: isHovered = false,
   },
   buttons,
 }: ElementActionButtonsProps) {
+  const id = useId()
   const zoomTooSmall = useIsZoomTooSmall()
   if (!buttons.length || zoomTooSmall) {
     return null
@@ -49,6 +50,7 @@ export function ElementActionButtons({
       <Box
         component={m.div}
         layoutRoot
+        key={`${id}-action-buttons`}
         initial={false}
         style={{
           originY: 0,
@@ -67,14 +69,14 @@ export function ElementActionButtons({
             component={m.button}
             layout
             className={actionBtn({})}
-            key={`action-button-${id}-${button.key ?? index}`}
+            key={`${id}-${button.key ?? index}`}
             initial={false}
             whileTap={{ scale: 1 }}
             whileHover={{
               scale: 1.3,
             }}
-            // Otherwise node receives click event and is selected
             onClick={button.onClick}
+            // Otherwise node receives click event and is selected
             onDoubleClick={stopPropagation}
           >
             {button.icon}

package/src/base/primitives/element/ElementDetailsButton.tsx

@@ -1,6 +1,7 @@
 import { css, cx } from '@likec4/styles/css'
 import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
+import { useId } from '@mantine/hooks'
 import { IconId } from '@tabler/icons-react'
 import { m } from 'framer-motion'
 import { stopPropagation } from '../../../utils/xyflow'
@@ -41,11 +42,14 @@ export function ElementDetailsButton({
   icon,
   onClick,
 }: ElementDetailsButtonProps) {
+  const id = useId()
   return (
     <Box className={cx(container, 'details-button')}>
       <ActionIcon
+        key={id}
         className={cx('nodrag nopan', actionBtn({ variant: 'transparent' }))}
         component={m.button}
+        layout
         initial={false}
         style={{
           originX: 0.45,

package/src/base/primitives/element/ElementNodeContainer.css.ts

@@ -1,7 +1,4 @@
 import { css as style } from '@likec4/styles/css'
-// import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-// import { easings, vars, whereReducedGraphics } from '../../../theme-vars'
-// import { iconSize, paddingSize, textSize } from './vars.css'
 
 export const container = style({
   position: 'relative',
@@ -52,18 +49,3 @@ export const container = style({
     cursor: 'pointer',
   },
 })
-
-// const sizes = ['xs', 'sm', 'lg', 'xl'] as const
-// sizes.forEach((size) => {
-//   globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
-//     vars: {
-//       [textSize]: rem(defaultTheme.textSizes[size]),
-//     },
-//   })
-
-//   globalStyle(`${container}[data-likec4-padding="${size}"]`, {
-//     vars: {
-//       [paddingSize]: rem(defaultTheme.spacing[size]),
-//     },
-//   })
-// })

package/src/bundle/styles.css.ts

@@ -1,9 +1,14 @@
 import type { DiagramView } from '@likec4/core'
 import { css } from '@likec4/styles/css'
 import { type MantineThemeOverride, createTheme, Portal } from '@mantine/core'
-import { useColorScheme as usePreferredColorScheme, useDebouncedCallback, useMutationObserver } from '@mantine/hooks'
+import {
+  useColorScheme as usePreferredColorScheme,
+  useDebouncedCallback,
+  useId,
+  useMutationObserver,
+} from '@mantine/hooks'
 import { useIsomorphicLayoutEffect } from '@react-hookz/web'
-import { useId, useState } from 'react'
+import { useState } from 'react'
 import { first, isFunction, isString } from 'remeda'
 import inlinedStyles from '../styles.css?inline'
 import fontsCss from './font.css?inline'

package/src/components/SearchControl.css.ts

@@ -1,10 +1,6 @@
-import { css as style } from '@likec4/styles/css'
-// import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-// import { mantine, transitions, vars, whereDark, whereLight, whereNotReducedGraphics } from '../theme-vars'
+import { css } from '@likec4/styles/css'
 
-// const transparent = createVar('transparent')
-// const bgColor = createVar('bgcolor')
-export const root = style({
+export const root = css({
   height: '30px',
   paddingLeft: 'sm',
   paddingRight: '4px',
@@ -42,7 +38,7 @@ export const root = style({
   },
 })
 
-export const placeholder = style({
+export const placeholder = css({
   fontSize: 'sm', // mantine.fontSizes.sm,
   fontWeight: 500,
   paddingRight: '50px',
@@ -50,7 +46,7 @@ export const placeholder = style({
   flex: '1',
 })
 
-export const shortcut = style({
+export const shortcut = css({
   fontSize: '11px',
   fontWeight: 600,
   lineHeight: 1,

package/src/hooks/useDiagram.ts

@@ -2,7 +2,7 @@ import { type DiagramView, type EdgeId, type ElementNotation, type Fqn, type Nod
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector as useXstateSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { useMemo, useTransition } from 'react'
+import { useMemo } from 'react'
 import type { PartialDeep } from 'type-fest'
 import type { FeatureName } from '../context/DiagramFeatures'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'

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

@@ -335,7 +335,13 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
   return (
     <>
       <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
-        <EdgePath {...props} svgPath={edgePath} ref={svgPathRef} onEdgePointerDown={onEdgePointerDown} />
+        <EdgePath
+          {...props}
+          svgPath={edgePath}
+          ref={svgPathRef}
+          {...enableEdgeEditing && {
+            onEdgePointerDown,
+          }} />
         <EdgeLabelContainer
           edgeProps={props}
           labelPosition={{

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

@@ -1,6 +1,4 @@
 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'
 

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

@@ -1,8 +1,4 @@
 import { css } from '@likec4/styles/css'
-// import { fallbackVar, style } from '@vanilla-extract/css'
-// import { calc } from '@vanilla-extract/css-utils'
-// import { mantine, vars, whereDark, whereNotReducedGraphics } from '../../../theme-vars'
-// import { stokeFillMix } from '../../xyflow/nodes/element/element.css'
 
 export const container = css({
   bottom: 0,

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

@@ -1,6 +1,5 @@
 import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
 import { css, cx } from '@likec4/styles/css'
-import { token } from '@likec4/styles/tokens'
 import {
   ActionIcon,
   Badge,

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

@@ -1,9 +1,5 @@
 import { css, cx } from '@likec4/styles/css'
 
-// import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-// import { mantine } from '../../../theme-vars'
-// import { button, description, descriptionColor, iconColor, title } from './_shared.css'
-
 export { emptyBoX, focusable } from './_shared.css'
 
 const _viewBtn = 'likec4-view-btn'

package/src/overlays/Overlays.tsx

@@ -108,7 +108,7 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
         return (
           <Overlay
             key={overlay.actorRef.sessionId}
-            overlayLevel={Math.min(index, 3) as 0 | 1 | 2 | 3}
+            overlayLevel={index}
             onClose={() => close(overlay.actorRef)}>
             <RelationshipsBrowser actorRef={overlay.actorRef} />
           </Overlay>
@@ -116,7 +116,7 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
       case 'relationshipDetails':
         return (
           <Overlay
-            overlayLevel={Math.min(index, 3) as 0 | 1 | 2 | 3}
+            overlayLevel={index}
             key={overlay.actorRef.sessionId}
             onClose={() => close(overlay.actorRef)}>
             <RelationshipDetails actorRef={overlay.actorRef} />

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

@@ -61,22 +61,6 @@ const dialog = css.raw({
   xl: {
     [offset]: '4rem',
   },
-  //     inset: '[calc(2rem + var(--_level, 0) * 1rem), 2rem, 2rem, 2rem]',
-  //     width: 'calc(100vw - 4rem)',
-  //     height: 'calc(100vh - 4rem - var(--_level, 0) * 1rem)',
-  //   },
-  //   lg: {
-  //     inset: '[calc(4rem + var(--_level, 0) * 1rem), 4rem, 4rem, 4rem]',
-  //     width: 'calc(100vw - 8rem)',
-  //     height: 'calc(100vh - 8rem)',
-  //   },
-  //   xl: {
-  //     [borderRadius]: '8px',
-  //     padding: '8px',
-  //     inset: '[calc(5rem + var(--_level, 0) * 1rem), 5rem, 5rem, 5rem]',
-  //     width: 'calc(100vw - 10rem)',
-  //     height: 'calc(100vh - 10rem - var(--_level, 0) * 1rem)',
-  //   },
 })
 
 const body = css.raw({
@@ -99,28 +83,4 @@ export const overlay = sva({
     dialog: dialog,
     body: body,
   },
-  variants: {
-    level: {
-      0: {
-        dialog: {
-          [level]: '0',
-        },
-      },
-      1: {
-        dialog: {
-          [level]: '1',
-        },
-      },
-      2: {
-        dialog: {
-          [level]: '2',
-        },
-      },
-      3: {
-        dialog: {
-          [level]: '3',
-        },
-      },
-    },
-  },
 })

package/src/overlays/overlay/Overlay.tsx

@@ -6,12 +6,12 @@ import {
 import { useMergedRef } from '@mantine/hooks'
 import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
 import { m, useReducedMotionConfig } from 'framer-motion'
-import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
+import { type PropsWithChildren, forwardRef, useEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
-import { backdropBlur, backdropOpacity, overlay as overlayCVA } from './Overlay.css'
+import { backdropBlur, backdropOpacity, level as cssVarLevel, overlay as overlayCVA } from './Overlay.css'
 
 type OverlayProps = PropsWithChildren<{
-  overlayLevel?: 0 | 1 | 2 | 3
+  overlayLevel?: number
   className?: string
   classes?: {
     dialog?: string
@@ -21,108 +21,117 @@ type OverlayProps = PropsWithChildren<{
   onClick?: never
 }>
 
-export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
-  ({ children, onClose, className, classes, overlayLevel = 0, ...rest }, ref) => {
-    const [opened, setOpened] = useState(false)
-    const dialogRef = useRef<HTMLDialogElement>(null)
-    const isClosingRef = useRef(false)
+export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
+  onClose,
+  className,
+  classes,
+  overlayLevel = 0,
+  children,
+  ...rest
+}, ref) => {
+  const [opened, setOpened] = useState(false)
+  const dialogRef = useRef<HTMLDialogElement>(null)
+  const isClosingRef = useRef(false)
 
-    const motionNotReduced = useReducedMotionConfig() !== true
+  const motionNotReduced = useReducedMotionConfig() !== true
 
-    const onCloseRef = useSyncedRef(onClose)
-    const close = useDebouncedCallback(
-      () => {
-        if (isClosingRef.current) return
-        isClosingRef.current = true
-        onCloseRef.current()
-      },
-      [],
-      50,
-    )
+  const onCloseRef = useSyncedRef(onClose)
+  const close = useDebouncedCallback(
+    () => {
+      if (isClosingRef.current) return
+      isClosingRef.current = true
+      onCloseRef.current()
+    },
+    [],
+    50,
+  )
 
-    useLayoutEffect(() => {
-      const cancel = (e: Event) => {
-        e.preventDefault()
-        close()
-      }
-      dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
-      return () => {
-        dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
-      }
-    }, [])
+  useEffect(() => {
+    const cancel = (e: Event) => {
+      e.preventDefault()
+      close()
+    }
+    dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
+    return () => {
+      dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
+    }
+  }, [])
 
-    useTimeoutEffect(() => {
-      if (!dialogRef.current?.open) {
-        // Move dialog to the top of the DOM
-        dialogRef.current?.showModal()
-      }
-    }, 20)
+  useTimeoutEffect(() => {
+    if (!dialogRef.current?.open) {
+      // Move dialog to the top of the DOM
+      dialogRef.current?.showModal()
+    }
+  }, 30)
 
-    useTimeoutEffect(() => {
-      setOpened(true)
-    }, 120)
+  useTimeoutEffect(() => {
+    setOpened(true)
+  }, 120)
 
-    const styles = overlayCVA({
-      level: overlayLevel as 0 | 1 | 2 | 3,
-    })
+  const styles = overlayCVA({
+    level: overlayLevel as 0 | 1 | 2 | 3,
+  })
 
-    return (
-      <m.dialog
-        ref={useMergedRef(dialogRef, ref)}
-        className={cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className)}
-        layout
-        {...motionNotReduced
-          ? ({
-            initial: {
-              [backdropBlur]: '0px',
-              [backdropOpacity]: '0%',
-              scale: overlayLevel > 0 ? 0.9 : 1.075,
-              opacity: 0,
-            },
-            animate: {
-              [backdropBlur]: overlayLevel > 0 ? '4px' : '8px',
-              [backdropOpacity]: overlayLevel > 0 ? '50%' : '60%',
-              scale: 1,
-              opacity: 1,
-              transition: {
-                delay: 0.075,
-              },
-            },
-            exit: {
-              scale: 1.2,
-              opacity: 0,
-              [backdropBlur]: '0px',
-              [backdropOpacity]: '0%',
+  return (
+    <m.dialog
+      ref={useMergedRef(dialogRef, ref)}
+      className={cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className)}
+      layout
+      style={{
+        // @ts-ignore
+        [cssVarLevel]: overlayLevel,
+      }}
+      {...motionNotReduced
+        ? ({
+          initial: {
+            [backdropBlur]: '0px',
+            [backdropOpacity]: '0%',
+            scale: overlayLevel > 0 ? 0.9 : 1.075,
+            opacity: 0,
+          },
+          animate: {
+            [backdropBlur]: overlayLevel > 0 ? '4px' : '8px',
+            [backdropOpacity]: overlayLevel > 0 ? '50%' : '60%',
+            scale: 1,
+            opacity: 1,
+            transition: {
+              delay: 0.075,
             },
-          })
-          : {
-            initial: {
-              [backdropBlur]: '8px',
-              [backdropOpacity]: '60%',
-            },
-          }}
-        onClick={e => {
-          e.stopPropagation()
-          if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
-            dialogRef.current?.close()
-            return
-          }
-        }}
-        onDoubleClick={stopPropagation}
-        onPointerDown={stopPropagation}
-        onClose={e => {
-          e.stopPropagation()
-          close()
+          },
+          exit: {
+            scale: 1.2,
+            opacity: 0,
+            [backdropBlur]: '0px',
+            [backdropOpacity]: '0%',
+          },
+        })
+        : {
+          initial: {
+            [backdropBlur]: '8px',
+            [backdropOpacity]: '60%',
+          },
         }}
-        {...rest}
-      >
-        <RemoveScroll forwardProps removeScrollBar={false}>
-          <Box className={cx(styles.body, 'overlay-body', classes?.body)}>
-            {opened && <>{children}</>}
-          </Box>
-        </RemoveScroll>
-      </m.dialog>
-    )
-  },
-)
+      onClick={e => {
+        e.stopPropagation()
+        if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
+          dialogRef.current?.close()
+          return
+        }
+      }}
+      onDoubleClick={stopPropagation}
+      onPointerDown={stopPropagation}
+      onClose={e => {
+        e.stopPropagation()
+        close()
+      }}
+      {...rest}
+    >
+      <RemoveScroll forwardProps removeScrollBar={false}>
+        <Box className={cx(styles.body, 'overlay-body', classes?.body)}>
+          {opened && <>{children}</>}
+        </Box>
+      </RemoveScroll>
+    </m.dialog>
+  )
+})
 Overlay.displayName = 'Overlay'

package/src/overlays/overlaysActor.ts

@@ -1,5 +1,6 @@
 import type { Fqn } from '@likec4/core'
 import { getHotkeyHandler } from '@mantine/hooks'
+import type { KeyboardEvent } from 'react'
 import { isString, last, reverse } from 'remeda'
 import {
   type ActorLogicFrom,
@@ -45,7 +46,10 @@ const hotkeyLogic = fromCallback(({ sendBack }: {
   sendBack: (event: HotKeyEvent) => void
 }) => {
   const handler = getHotkeyHandler([
-    ['Escape', () => sendBack({ type: 'close' }), {
+    ['Escape', (event: KeyboardEvent) => {
+      event.stopPropagation()
+      sendBack({ type: 'close' })
+    }, {
       preventDefault: true,
     }],
   ])

package/src/overlays/relationship-details/custom/nodeTypes.tsx

@@ -33,7 +33,7 @@ export const ElementNode = customNode<RelationshipDetailsTypes.ElementNodeData>(
   return (
     <ElementNodeContainer nodeProps={props}>
       <ElementShape {...props} />
-      <ElementTitle {...props} iconSize={40} />
+      <ElementTitle {...props} />
       <ElementDetailsButtonWithHandler {...props} />
       <ElementActions {...props} />
       <ElementPorts {...props} />

package/src/overlays/relationships-browser/custom/nodeTypes.tsx

@@ -36,7 +36,7 @@ export const ElementNode = customNode<RelationshipsBrowserTypes.ElementNodeData>
   return (
     <ElementNodeContainer key={props.id} component={m.div} layoutId={props.id} nodeProps={props}>
       <ElementShape {...props} />
-      <ElementTitle {...props} iconSize={40} />
+      <ElementTitle {...props} />
       <ElementDetailsButtonWithHandler {...props} />
       <ElementActions {...props} />
       <ElementPorts {...props} />

package/src/state/hotkeyActor.ts

@@ -1,4 +1,5 @@
 import { getHotkeyHandler } from '@mantine/hooks'
+import type { KeyboardEvent } from 'react'
 import { type AnyEventObject, type NonReducibleUnknown, fromCallback } from 'xstate'
 
 export type HotKeyEvent = { type: 'key.esc' | `key.arrow.${'left' | 'right'}` }
@@ -7,16 +8,25 @@ export const hotkeyActorLogic = fromCallback<AnyEventObject, NonReducibleUnknown
   sendBack: (event: HotKeyEvent) => void
 }) => {
   const escHandler = getHotkeyHandler([
-    ['Escape', () => sendBack({ type: 'key.esc' }), {
+    ['Escape', (event: KeyboardEvent) => {
+      event.stopPropagation()
+      sendBack({ type: 'key.esc' })
+    }, {
       preventDefault: true,
     }],
   ])
 
   const arrowshandler = getHotkeyHandler([
-    ['ArrowLeft', () => sendBack({ type: 'key.arrow.left' }), {
+    ['ArrowLeft', (event: KeyboardEvent) => {
+      event.stopPropagation()
+      sendBack({ type: 'key.arrow.left' })
+    }, {
       preventDefault: true,
     }],
-    ['ArrowRight', () => sendBack({ type: 'key.arrow.right' }), {
+    ['ArrowRight', (event: KeyboardEvent) => {
+      event.stopPropagation()
+      sendBack({ type: 'key.arrow.right' })
+    }, {
       preventDefault: true,
     }],
   ])