@likec4/diagram 1.13.0 → 1.15.0

package/src/state/diagram-to-xyflow.ts

@@ -1,6 +1,7 @@
-import type { DiagramEdge, DiagramNode, DiagramView, Fqn } from '@likec4/core'
+import { type DiagramEdge, DiagramNode, type DiagramView, ElementKind, type Fqn } from '@likec4/core'
 import { nonNullable, whereOperatorAsPredicate } from '@likec4/core'
 import { hasAtLeast } from 'remeda'
+import type { UnionToIntersection } from 'type-fest'
 import type { WhereOperator } from '../LikeC4Diagram.props'
 import { ZIndexes } from '../xyflow/const'
 import type { XYFlowEdge, XYFlowNode } from '../xyflow/types'
@@ -55,7 +56,7 @@ export function diagramViewToXYFlowData(
   let next: typeof traverse[0] | undefined
   while ((next = traverse.shift())) {
     const { node, parent } = next
-    const isCompound = hasAtLeast(node.children, 1)
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group
     if (isCompound) {
       traverse.push(...node.children.map(child => ({ node: nodeById(child), parent: node })))
     }
@@ -69,35 +70,45 @@ export function diagramViewToXYFlowData(
       position.y -= parent.position[1]
     }
 
-    // const outEdges = node.outEdges.map(e => view.edges.find(edge => edge.id === e)).filter(Boolean)
-    // const inEdges = node.inEdges.map(e => view.edges.find(edge => edge.id === e)).filter(Boolean)
-
     const id = ns + node.id
-    const draggable = opts.draggable
-    xynodes.push({
+
+    const base: Omit<UnionToIntersection<XYFlowNode>, 'data'> = {
       id,
-      type: isCompound ? 'compound' : 'element',
-      data: {
-        fqn: node.id,
-        element: node
-      },
-      draggable,
-      selectable: opts.selectable,
+      draggable: opts.draggable,
+      selectable: opts.selectable && node.kind !== ElementKind.Group,
       focusable: opts.selectable && !isCompound,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       width: node.width,
       height: node.height,
-      hidden: !visiblePredicate(node),
-      // parentId: parent ? ns + parent.id : null,
+      hidden: node.kind !== ElementKind.Group && !visiblePredicate(node),
       ...(parent && {
         parentId: ns + parent.id
-      }),
-      ...(isCompound && {
-        dragHandle: '.likec4-compound-title'
       })
-    })
+    }
+
+    xynodes.push(
+      isCompound
+        ? {
+          ...base,
+          type: 'compound',
+          data: {
+            fqn: node.id,
+            isViewGroup: node.kind === ElementKind.Group,
+            element: node
+          },
+          dragHandle: '.likec4-compound-title'
+        }
+        : {
+          ...base,
+          type: 'element',
+          data: {
+            fqn: node.id,
+            element: node
+          }
+        }
+    )
   }
 
   for (const edge of view.edges) {

package/src/state/diagramStore.ts

@@ -395,7 +395,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               selectable: nodesSelectable
             })
 
-            update.xynodes = update.xynodes.map(update => {
+            update.xynodes = update.xynodes.map((update) => {
               const existing = xynodes.find(n => n.id === update.id)
               if (
                 existing
@@ -403,18 +403,18 @@ export function createDiagramStore(props: DiagramInitialState) {
                 && eq(existing.parentId ?? null, update.parentId ?? null)
               ) {
                 if (
-                  existing.hidden === update.hidden
-                  && existing.width === update.width
+                  existing.width === update.width
                   && existing.height === update.height
+                  && eq(existing.hidden ?? false, update.hidden ?? false)
                   && eq(existing.position, update.position)
-                  && eq(existing.data.element, update.data.element)
+                  && eq(existing.data, update.data)
                 ) {
                   return existing
                 }
                 return {
                   ...existing,
                   ...update
-                }
+                } as XYFlowNode
               }
               return update
             })
@@ -425,7 +425,7 @@ export function createDiagramStore(props: DiagramInitialState) {
                 const existing = xyedges.find(n => n.id === update.id)
                 if (existing) {
                   if (
-                    existing.hidden === update.hidden
+                    eq(existing.hidden ?? false, update.hidden ?? false)
                     && eq(existing.data.label, update.data.label)
                     && eq(existing.data.controlPoints, update.data.controlPoints)
                     && eq(existing.data.edge, update.data.edge)
@@ -850,22 +850,21 @@ export function createDiagramStore(props: DiagramInitialState) {
           },
 
           openOverlay: (overlay) => {
-            set(
-              {
-                activeOverlay: overlay
-              },
-              noReplace,
-              'openOverlay'
-            )
+            if (eq(overlay, get().activeOverlay)) {
+              return
+            }
+            set({ activeOverlay: overlay }, noReplace, 'openOverlay')
           },
           closeOverlay: () => {
-            set(
-              {
-                activeOverlay: null
-              },
-              noReplace,
-              'openOverlay'
-            )
+            if (get().activeOverlay !== null) {
+              set(
+                {
+                  activeOverlay: null
+                },
+                noReplace,
+                'openOverlay'
+              )
+            }
           },
 
           fitDiagram: (duration = 500) => {
@@ -875,7 +874,7 @@ export function createDiagramStore(props: DiagramInitialState) {
             const bounds = view.bounds
             const maxZoom = Math.max(1, transform[2])
             const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, fitViewPadding)
-            panZoom?.setViewport(viewport, { duration })
+            panZoom?.setViewport(viewport, duration > 0 ? { duration } : undefined)
           },
 
           nextDynamicStep: (increment = 1) => {
@@ -969,8 +968,11 @@ export function createDiagramStore(props: DiagramInitialState) {
           },
 
           onInit: (instance) => {
-            const { xyflow, initialized } = get()
+            const { xyflow, initialized, fitViewEnabled, fitDiagram } = get()
             if (!initialized || xyflow !== instance) {
+              if (fitViewEnabled) {
+                fitDiagram(0)
+              }
               set(
                 {
                   xyflow: instance,
@@ -1063,7 +1065,12 @@ export function createDiagramStore(props: DiagramInitialState) {
             const { nodeLookup, parentLookup } = xystore.getState()
 
             const selectedNodes = new Set(nodeLookup.values().filter(n => n.selected).map(n => n.id))
-            const nodesToAlign = new Set(selectedNodes.difference(new Set(parentLookup.keys())))
+            const nodesToAlign = [...selectedNodes.difference(new Set(parentLookup.keys()))]
+
+            if (!hasAtLeast(nodesToAlign, 2)) {
+              console.warn('At least 2 nodes must be selected to align')
+              return
+            }
             const constraints = createLayoutConstraints(xystore, nodesToAlign)
 
             let getEdgePosition: (nodes: InternalNode<XYFlowNode>[]) => number

package/src/xyflow/XYFlow.tsx

@@ -128,7 +128,8 @@ export function XYFlow({
       zoomOnDoubleClick={false}
       maxZoom={zoomable ? MaxZoom : 1}
       minZoom={zoomable ? MinZoom : 1}
-      fitView={fitView}
+      // Fitview is handled by store in onInit
+      fitView={false}
       fitViewOptions={useMemo(() => ({
         minZoom: MinZoom,
         maxZoom: 1,

package/src/xyflow/XYFlowEvents.tsx

@@ -225,11 +225,13 @@ export function useXYFlowEvents() {
           }
           if (!onEdgeClick) {
             event.stopPropagation()
+            return
           }
         } else if (nodesSelectable) {
           xystore.getState().addSelectedEdges([xyedge.id])
           if (!onEdgeClick) {
             event.stopPropagation()
+            return
           }
         }
         onEdgeClick?.(
@@ -245,7 +247,9 @@ export function useXYFlowEvents() {
           enableDynamicViewWalkthrough,
           focusOnNode,
           activeWalkthrough,
-          activateWalkthrough
+          activateWalkthrough,
+          openOverlay,
+          showRelationshipDetails
         } = diagramApi.getState()
         // if we are in dynamic view, and clicked on an edge, activate the step
         if (isDynamicView && enableDynamicViewWalkthrough) {
@@ -257,6 +261,14 @@ export function useXYFlowEvents() {
           return
         }
 
+        if (showRelationshipDetails) {
+          openOverlay({
+            edgeDetails: xyedge.data.edge.id
+          })
+          event.stopPropagation()
+          return
+        }
+
         if (enableFocusMode) {
           focusOnNode(xyedge.source)
           event.stopPropagation()

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -137,7 +137,6 @@ const curve = d3line<XYPosition>()
 export const RelationshipEdge = memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
   id,
   data,
-  selected,
   sourceX,
   sourceY,
   targetX,
@@ -438,10 +437,17 @@ export const RelationshipEdge = memo<EdgeProps<XYFlowEdge>>(function Relationshi
   const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null
   const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null
 
-  let labelZIndex = 1 + (isHovered ? ZIndexes.Element : (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge))
-  if (isEdgePathEditable && selected) {
+  const edgeZIndex = edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge
+  let labelZIndex
+  if (isEdgePathEditable) {
     // Move label below ControlPoints, otherwise they don't capture events
-    labelZIndex = (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge) - 1
+    labelZIndex = edgeZIndex - 1
+  }
+  else if (isHovered) {
+    // Move above the elements
+    labelZIndex = ZIndexes.Element + 1
+  } else {
+    labelZIndex = edgeZIndex + 1
   }
 
   return (

package/src/xyflow/edges/RelationshipsDropdownMenu.tsx

@@ -1,4 +1,4 @@
-import { type DiagramNode, LikeC4Model, nameFromFqn } from '@likec4/core'
+import { type DiagramNode, invariant, LikeC4Model, nameFromFqn } from '@likec4/core'
 import {
   ActionIcon,
   Box,
@@ -16,9 +16,9 @@ import {
   Tooltip as MantineTooltip,
   TooltipGroup
 } from '@mantine/core'
-import { IconArrowRight, IconFileSymlink, IconZoomScan } from '@tabler/icons-react'
+import { IconArrowRight, IconArrowsMaximize, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { forwardRef, Fragment, type MouseEventHandler, type PropsWithChildren } from 'react'
+import { forwardRef, Fragment, type MouseEventHandler, type PropsWithChildren, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useXYNodesData } from '../../hooks'
 import type { RelationshipData } from '../types'
@@ -47,10 +47,12 @@ export function RelationshipsDropdownMenu({
   disabled?: boolean | undefined
   likec4model: LikeC4Model
 }>) {
+  const openOverlay = useDiagramState(s => s.openOverlay)
   const portalProps = useMantinePortalProps()
   const [sourceXYNode, targetXYNode] = useXYNodesData([edge.source, edge.target])
 
-  if (!sourceXYNode || !targetXYNode) return children
+  invariant(sourceXYNode, `Source XYNode ${edge.source} not found for edge ${edge.id}`)
+  invariant(targetXYNode, `Target XYNode ${edge.target} not found for edge ${edge.id}`)
 
   const [direct, nested] = pipe(
     edge.relations,
@@ -70,14 +72,11 @@ export function RelationshipsDropdownMenu({
     partition(r => r.relationship.source === edge.source && r.relationship.target === edge.target)
   )
 
-  if (direct.length + nested.length === 0) {
-    return <>{children}</>
-  }
-
   const renderRelationship = (relationship: LikeC4Model.ViewModel.Relationship, index: number) => (
     <Fragment key={relationship.id}>
       {index > 0 && <MenuDivider opacity={0.65} />}
       <MenuItem
+        onClick={onClickOpenOverlay}
         component={Relationship}
         relationship={relationship}
         sourceNode={sourceXYNode.data.element}
@@ -86,6 +85,17 @@ export function RelationshipsDropdownMenu({
     </Fragment>
   )
 
+  const onClickOpenOverlay = useCallback((e: React.MouseEvent): void => {
+    e.stopPropagation()
+    openOverlay({
+      edgeDetails: edge.id
+    })
+  }, [edge.id, openOverlay])
+
+  if (direct.length + nested.length === 0) {
+    return <>{children}</>
+  }
+
   return (
     <Menu
       trigger={'click-hover'}
@@ -107,7 +117,6 @@ export function RelationshipsDropdownMenu({
         onPointerDownCapture={stopPropagation}
         onPointerDown={stopPropagation}
         onClick={stopPropagation}
-        onDoubleClick={stopPropagation}
       >
         {direct.length > 0 && (
           <>
@@ -122,22 +131,15 @@ export function RelationshipsDropdownMenu({
             {nested.map(renderRelationship)}
           </>
         )}
-        {
-          /* <Box pos={'absolute'} top={5} right={6}>
+        <Box pos={'absolute'} top={5} right={6}>
           <ActionIcon
             size={24}
-            variant="light"
-            onClick={e => {
-              e.stopPropagation()
-              diagramApi.getState().openOverlay({
-                edgeDetails: edge.id
-              })
-            }}
+            variant="subtle"
+            onClick={onClickOpenOverlay}
           >
-            <IconArrowsMaximize style={{ width: '70%' }} />
+            <IconInfoCircle style={{ width: '70%' }} />
           </ActionIcon>
-        </Box> */
-        }
+        </Box>
       </MenuDropdown>
     </Menu>
   )
@@ -195,6 +197,7 @@ const Relationship = forwardRef<
                   variant="default"
                   onPointerDownCapture={stopPropagation}
                   onClick={event => {
+                    event.stopPropagation()
                     diagramApi.getState().onNavigateTo?.(navigateTo, event)
                   }}
                   role="button"

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -122,6 +122,7 @@ export const title = style({
   paddingLeft: 14,
   paddingTop: 13,
   paddingBottom: 6,
+  minHeight: 30,
   mixBlendMode: 'screen',
   selectors: {
     [`:where(.react-flow__node.draggable) &`]: {

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -1,4 +1,4 @@
-import type { ThemeColor } from '@likec4/core'
+import { type ThemeColor } from '@likec4/core'
 import { ActionIcon, Box, Text, Tooltip } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconTransform, IconZoomScan } from '@tabler/icons-react'
@@ -127,14 +127,12 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
   selected = false,
   dragging = false,
   data: {
-    element: {
-      color,
-      style,
-      depth = 1,
-      ...element
-    }
+    isViewGroup,
+    element
   }
 }) {
+  const { depth, style, color } = element
+  const isNotViewGroup = !isViewGroup
   const opacity = clamp((style.opacity ?? 100) / 100, {
     min: 0,
     max: 1
@@ -164,9 +162,11 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
     hasOnNavigateTo: !!s.onNavigateTo,
     enableRelationshipsMode: s.enableRelationshipsBrowser
   }))
-  const isNavigable = !!element.navigateTo && hasOnNavigateTo
+  // If this is a view group, we don't want to show the navigate button
+  const isNavigable = isNotViewGroup && !!element.navigateTo && hasOnNavigateTo
+  const hasRelationshipsBrowser = isNotViewGroup && enableRelationshipsMode
 
-  const _isToolbarVisible = isEditable && (isHovered || (import.meta.env.DEV && selected))
+  const _isToolbarVisible = isNotViewGroup && isEditable && (isHovered || (import.meta.env.DEV && selected))
   const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
 
   const [animateVariants, animateHandlers] = useFramerAnimateVariants()
@@ -263,7 +263,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
             component="div"
             className={clsx(
               css.title,
-              (isNavigable || enableRelationshipsMode) && css.titleWithNavigation,
+              (isNavigable || hasRelationshipsBrowser) && css.titleWithNavigation,
               'likec4-compound-title'
             )}>
             {element.title}
@@ -286,7 +286,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
             <IconZoomScan stroke={1.8} style={{ width: '75%' }} />
           </ActionIcon>
         )}
-        {enableRelationshipsMode && (
+        {hasRelationshipsBrowser && (
           <Tooltip
             fz="xs"
             color="dark"

package/src/xyflow/nodes/shared/Toolbar.tsx

@@ -260,7 +260,7 @@ function GoToSourceButton({ elementId }: { elementId: Fqn }) {
           e.stopPropagation()
           diagramApi.getState().onOpenSourceElement?.(elementId)
         }}>
-        <IconFileSymlink size={'70%'} stroke={1.8} />
+        <IconFileSymlink stroke={1.8} style={{ width: '70%' }} />
       </ActionIcon>
     </Tooltip>
   )

package/src/xyflow/types.ts

@@ -11,6 +11,7 @@ export type ElementXYFlowNode = Node<{
 
 export type CompoundXYFlowNode = Node<{
   fqn: Fqn
+  isViewGroup: boolean
   element: DiagramNode
 }, 'compound'>
 

package/src/xyflow/useLayoutConstraints.ts

@@ -1,8 +1,8 @@
-import { invariant, isAncestor, nonNullable } from '@likec4/core'
+import { invariant, isAncestor, type NodeId, type NonEmptyArray, nonNullable } from '@likec4/core'
 import type { InternalNode, NodeChange, ReactFlowProps, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
-import { isNullish } from 'remeda'
+import { filter, hasAtLeast, isNullish, map, pipe } from 'remeda'
 import { useDiagramStoreApi } from '../hooks'
 import { type XYStoreApi } from '../hooks/useXYFlow'
 import type { XYFlowNode } from './types'
@@ -99,11 +99,27 @@ type NodePositionUpdater = (
 
 export function createLayoutConstraints(
   xyflowApi: XYStoreApi,
-  editingNodeIds: Set<string>
+  editingNodeIds: NonEmptyArray<string>
 ) {
   const { parentLookup, nodeLookup } = xyflowApi.getState()
   const rects = new Map<string, Leaf | Compound>()
 
+  const ancestorsOf = (nodeId: string) => {
+    const ancestors = [] as string[]
+    const xynode = nodeLookup.get(nodeId)
+    let parent = xynode?.parentId
+    let parentNode: InternalNode<XYFlowNode> | undefined
+    while (parent && (parentNode = nodeLookup.get(parent))) {
+      ancestors.push(parentNode.id as NodeId)
+      parent = parentNode.parentId
+    }
+    return ancestors
+  }
+
+  const ancestorsOfDraggingNodes = new Set(
+    editingNodeIds.flatMap(ancestorsOf)
+  )
+
   const traverse = new Array<{ xynode: InternalNode<XYFlowNode>; parent: Compound | null }>()
 
   for (const [, xynode] of nodeLookup) {
@@ -117,11 +133,11 @@ export function createLayoutConstraints(
 
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift()!
-    const isEditing = editingNodeIds.has(xynode.id)
+    const isEditing = editingNodeIds.includes(xynode.id)
 
     // Traverse children if the node is a compound, not dragging, and is an ancestor of the dragging node
     const shouldTraverse = !isEditing && xynode.type === 'compound'
-      && editingNodeIds.values().some(x => isAncestor(xynode.id, x))
+      && ancestorsOfDraggingNodes.has(xynode.id)
 
     const rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent)
     rects.set(xynode.id, rect)
@@ -157,7 +173,6 @@ export function createLayoutConstraints(
           maxY: -Infinity
         })
 
-
         r.minX = childrenBB.minX - Rect.LeftPadding
         r.minY = childrenBB.minY - Rect.TopPadding
         r.maxX = childrenBB.maxX + Rect.RightPadding
@@ -200,11 +215,14 @@ export function createLayoutConstraints(
     animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null
       updater(
-        [
-          ...editingNodeIds.values()
-            .filter(id => rects.has(id) && nodeLookup.has(id))
-            .map(id => ({ rect: nonNullable(rects.get(id)), node: nodeLookup.get(id)! }))
-        ]
+        pipe(
+          editingNodeIds,
+          filter(id => rects.has(id) && nodeLookup.has(id)),
+          map(id => ({
+            rect: nonNullable(rects.get(id)),
+            node: nonNullable(nodeLookup.get(id))
+          }))
+        )
       )
       updateXYFlowNodes()
     })
@@ -229,17 +247,18 @@ export function useLayoutConstraints(): LayoutConstraints {
       const { nodeLookup } = xystore.getState()
       cancelSaveManualLayout()
 
-      const draggingNodes = new Set(
-        nodeLookup.values()
-          .filter(x => x.dragging === true || x.id === xynode.id || x.selected)
-          .filter(x => x.draggable === true)
-          .map(x => x.id)
+      const draggingNodes = pipe(
+        Array.from(nodeLookup.values()),
+        filter(n => n.dragging === true || n.id === xynode.id || n.selected === true),
+        filter(n => n.draggable !== false),
+        map(x => x.id)
       )
-      solverRef.current = createLayoutConstraints(xystore, draggingNodes)
+      if (hasAtLeast(draggingNodes, 1)) {
+        solverRef.current = createLayoutConstraints(xystore, draggingNodes)
+      }
     },
     onNodeDrag: () => {
-      invariant(solverRef.current, 'solverRef.current should be defined')
-      solverRef.current.onMove((nodes) => {
+      solverRef.current?.onMove((nodes) => {
         nodes.forEach(({ rect, node }) => {
           rect.positionAbsolute = node.internals.positionAbsolute
         })

package/src/components/Overlay.css.ts

@@ -1,78 +0,0 @@
-import { createVar, keyframes, style } from '@vanilla-extract/css'
-import { whereDark } from '../theme-vars'
-
-const dialogFadeIn = keyframes({
-  '0%': {
-    opacity: 0,
-    display: 'none'
-  },
-  '100%': {
-    opacity: 1,
-    display: 'block'
-  }
-})
-
-const dialogFadeOut = keyframes({
-  '0%': {
-    opacity: 1,
-    transform: 'scale(1)',
-    display: 'block'
-  },
-  '100%': {
-    opacity: 0,
-    transform: 'scale(0.98)',
-    display: 'none'
-  }
-})
-
-const backdropRgb = createVar('backdrop-rgb')
-
-const dialogBackdropFadeIn = keyframes({
-  '0%': {
-    WebkitBackdropFilter: 'blur(1px)',
-    backdropFilter: 'blur(1px)',
-    backgroundColor: `rgb(${backdropRgb} / 30%)`
-  },
-  '100%': {
-    WebkitBackdropFilter: 'blur(8px)',
-    backdropFilter: 'blur(8px)',
-    backgroundColor: `rgb(${backdropRgb} / 85%)`
-  }
-})
-
-export const dialog = style({
-  top: 0,
-  left: 0,
-  padding: 0,
-  margin: 0,
-  boxSizing: 'border-box',
-  border: '0 solid transparent',
-  width: '100%',
-  maxWidth: '100dvw',
-  height: '100%',
-  maxHeight: '100dvh',
-  background: 'transparent',
-  animation: `${dialogFadeOut} 130ms cubic-bezier(0.50, 0, 1, 1)`,
-  transformOrigin: '50% 20%',
-  vars: {
-    [backdropRgb]: '255 255 255'
-  },
-  selectors: {
-    [`${whereDark} &`]: {
-      vars: {
-        [backdropRgb]: '36 36 36'
-      }
-    },
-    '&[open]': {
-      animation: `${dialogFadeIn} 200ms cubic-bezier(0, 0, 0.40, 1) forwards`
-    },
-    '&::backdrop': {
-      WebkitBackdropFilter: 'blur(1px)',
-      backdropFilter: 'blur(1px)',
-      backgroundColor: `rgb(${backdropRgb} / 30%)`
-    },
-    '&[open]::backdrop': {
-      animation: `${dialogBackdropFadeIn} 350ms cubic-bezier(0, 0, 0.40, 1) forwards`
-    }
-  }
-})