@likec4/diagram 1.24.1 → 1.25.1

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

@@ -47,13 +47,12 @@ export function DiagramTitlePanel() {
             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'}

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,8 +1,6 @@
 import { rem } from '@mantine/core'
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { reactFlow } from '../../../LikeC4Diagram.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})`,
     },
   },
 })

package/src/overlays/element-details/ElementDetailsCard.tsx

@@ -1,11 +1,11 @@
 import {
+  type ComputedView,
   type DiagramView,
   type Element,
   type Fqn,
   type LikeC4View,
   type NodeId,
   type ViewId,
-  ComputedView,
   isDeploymentView,
   isScopedElementView,
 } from '@likec4/core'
@@ -48,11 +48,15 @@ import { useDiagram } from '../../hooks/useDiagram'
 import type { OnNavigateTo } from '../../LikeC4Diagram.props'
 import { useLikeC4Model } from '../../likec4model'
 import { stopPropagation } from '../../utils'
+import { getVarName } from '../../utils/css'
 import * as css from './ElementDetailsCard.css'
 import { TabPanelDeployments } from './TabPanelDeployments'
 import { TabPanelRelationships } from './TabPanelRelationships'
 import { TabPanelStructure } from './TabPanelStructure'
 
+const backdropBlur = getVarName(css.backdropBlur) as '--backdrop-blur'
+const backdropOpacity = getVarName(css.backdropOpacity) as '--backdrop-opacity'
+
 const Divider = MantineDivider.withProps({
   mb: 8,
   labelPosition: 'left',
@@ -226,16 +230,16 @@ export function ElementDetailsCard({
       layout
       layoutRoot
       initial={{
-        '--backdrop-blur': '0px',
-        '--backdrop-opacity': '10%',
+        [backdropBlur]: '0px',
+        [backdropOpacity]: '10%',
       }}
       animate={{
-        '--backdrop-blur': '3px',
-        '--backdrop-opacity': '60%',
+        [backdropBlur]: '3px',
+        [backdropOpacity]: '60%',
       }}
       exit={{
-        '--backdrop-blur': '0px',
-        '--backdrop-opacity': '0%',
+        [backdropBlur]: '0px',
+        [backdropOpacity]: '0%',
         transition: {
           duration: 0.1,
         },

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

@@ -2,6 +2,10 @@ import { createVar, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
 import { mantine, whereLight } from '../../theme-vars'
 
+export const backdropBlur = createVar('backdrop-blur')
+export const backdropOpacity = createVar('backdrop-opacity')
+const backdropColor = createVar('backdrop-color')
+
 const borderRadius = createVar('border-radius')
 export const dialog = style({
   boxSizing: 'border-box',
@@ -20,20 +24,20 @@ export const dialog = style({
   padding: 6,
   vars: {
     [borderRadius]: '8px',
-    '--backdrop-color': '34 34 34',
-    '--backdrop-opacity': '0%',
-    '--backdrop-blur': '0px',
+    [backdropColor]: '34 34 34',
+    [backdropOpacity]: '0%',
+    [backdropBlur]: '0px',
   },
   selectors: {
     [`&::backdrop`]: {
       cursor: 'zoom-out',
-      WebkitBackdropFilter: 'blur(var(--backdrop-blur))',
-      backdropFilter: 'blur(var(--backdrop-blur))',
-      backgroundColor: `rgb(var(--backdrop-color) / var(--backdrop-opacity))`,
+      WebkitBackdropFilter: `blur(${backdropBlur})`,
+      backdropFilter: `blur(${backdropBlur})`,
+      backgroundColor: `rgb(${backdropColor} / ${backdropOpacity})`,
     },
     [`${whereLight} &`]: {
       vars: {
-        '--backdrop-color': '15 15 15',
+        [backdropBlur]: '15 15 15',
       },
     },
   },

package/src/overlays/overlay/Overlay.tsx

@@ -7,6 +7,7 @@ import clsx from 'clsx'
 import { type HTMLMotionProps, m } from 'framer-motion'
 import { type PropsWithChildren, useLayoutEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
+import { getVarName } from '../../utils/css'
 import * as css from './Overlay.css'
 
 type OverlayProps = PropsWithChildren<
@@ -20,6 +21,9 @@ type OverlayProps = PropsWithChildren<
   }
 >
 
+const backdropBlur = getVarName(css.backdropBlur) as '--backdrop-blur'
+const backdropOpacity = getVarName(css.backdropOpacity) as '--backdrop-opacity'
+
 export function Overlay({ children, onClose, className, classes, ...rest }: OverlayProps) {
   const [opened, setOpened] = useState(false)
   const dialogRef = useRef<HTMLDialogElement>(null)
@@ -68,15 +72,15 @@ export function Overlay({ children, onClose, className, classes, ...rest }: Over
       ref={dialogRef}
       className={clsx(css.dialog, classes?.dialog, className, RemoveScroll.classNames.fullWidth)}
       initial={{
-        '--backdrop-blur': '0px',
-        '--backdrop-opacity': '5%',
+        [backdropBlur]: '0px',
+        [backdropOpacity]: '5%',
         opacity: 0.85,
         translateY: 12,
         // opacity: 02.8,
       }}
       animate={{
-        '--backdrop-blur': '6px',
-        '--backdrop-opacity': '60%',
+        [backdropBlur]: '6px',
+        // [backdropOpacity]: '60%',
         translateY: 0,
         opacity: 1,
         // transition: {
@@ -86,8 +90,8 @@ export function Overlay({ children, onClose, className, classes, ...rest }: Over
       exit={{
         opacity: 0,
         translateY: -10,
-        '--backdrop-blur': '0px',
-        '--backdrop-opacity': '0%',
+        [backdropBlur]: '0px',
+        [backdropOpacity]: '0%',
         transition: {
           duration: 0.1,
         },

package/src/overlays/relationship-details/RelationshipDetails.tsx

@@ -2,15 +2,11 @@ import type { DiagramEdge, DiagramView } from '@likec4/core'
 import { ActionIcon, Group } from '@mantine/core'
 import { useCallbackRef, useStateHistory } from '@mantine/hooks'
 import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
-import { Panel, ReactFlowProvider, useEdgesState, useNodesState } from '@xyflow/react'
+import { Panel, ReactFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
 import { memo, useEffect, useRef } from 'react'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
-import { Base } from '../../base/types'
-import { updateEdges } from '../../base/updateEdges'
-import { updateNodes } from '../../base/updateNodes'
-import { useUpdateEffect } from '../../hooks'
 import type { RelationshipDetailsTypes as Types } from './_types'
 import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
 import { edgeTypes } from './custom/edgeTypes'

package/src/overlays/relationship-details/useLayoutedDetails.ts

@@ -44,10 +44,10 @@ const Sizes = {
 }
 
 export const ZIndexes = {
-  compound: 2,
-  edge: 3,
-  element: 4,
-
+  compound: 0,
+  // keep edges and elements in the same layer
+  edge: 2,
+  element: 2,
   max: 5,
 }
 

package/src/state/DiagramActorProvider.tsx

@@ -15,7 +15,6 @@ import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
 import type { DiagramActorRef } from './types'
 
 type ActorContextInput = Omit<Input, 'xystore' | 'features'>
-
 export function DiagramActorProvider({ input, children }: PropsWithChildren<{ input: ActorContextInput }>) {
   const handlersRef = useDiagramEventHandlersRef()
   const xystore = useStoreApi<Types.Node, Types.Edge>()

package/src/state/assign.ts

@@ -162,7 +162,21 @@ export function updateNavigationHistory({ context, event }: ActionArg): Partial<
     lastOnNavigate,
     viewport,
   } = context
-  const stepCurrent = nonNullable(history[currentIndex])
+  const stepCurrent = history[currentIndex]
+  if (!stepCurrent) {
+    return {
+      navigationHistory: {
+        currentIndex: 0,
+        history: [
+          {
+            viewId: event.view.id,
+            fromNode: null,
+            viewport: { ...viewport },
+          },
+        ],
+      },
+    }
+  }
   if (stepCurrent.viewId !== event.view.id) {
     // Navigation by browser back/forward ?
     if (!lastOnNavigate) {

package/src/state/diagram-machine.ts

@@ -266,6 +266,24 @@ export const diagramMachine = setup({
       panZoom?.setViewport(viewport, duration > 0 ? { duration } : undefined)
     },
 
+    'xyflow:fitFocusedBounds': ({ context }) => {
+      const { bounds, duration = 450 } = focusedBounds({ context })
+      const { width, height, panZoom, transform } = context.xystore.getState()
+
+      const maxZoom = Math.max(1, transform[2])
+      const viewport = getViewportForBounds(
+        bounds,
+        width,
+        height,
+        MinZoom,
+        maxZoom,
+        context.fitViewPadding,
+      )
+      viewport.x = Math.round(viewport.x)
+      viewport.y = Math.round(viewport.y)
+      panZoom?.setViewport(viewport, duration > 0 ? { duration } : undefined)
+    },
+
     'xyflow:setViewportCenter': ({ context }, params: { x: number; y: number }) => {
       const { x, y } = params
       invariant(context.xyflow, 'xyflow is not initialized')
@@ -487,10 +505,7 @@ export const diagramMachine = setup({
         })),
         'open source of focused or last clicked node',
         spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
-        {
-          type: 'xyflow:fitDiagram',
-          params: focusedBounds,
-        },
+        'xyflow:fitFocusedBounds',
       ],
       exit: enqueueActions(({ enqueue, context }) => {
         enqueue.stopChild('hotkey')
@@ -515,14 +530,11 @@ export const diagramMachine = setup({
             actions: [
               assign({
                 lastClickedNode,
-                focusedNode: ({ event }) => event.node.id as NodeId,
               }),
-              assign(focusNodesEdges),
-              'open source of focused or last clicked node',
-              {
-                type: 'xyflow:fitDiagram',
-                params: focusedBounds,
-              },
+              raise(({ event }) => ({
+                type: 'focus.node',
+                nodeId: event.node.id as NodeId,
+              })),
             ],
           },
         ],
@@ -533,10 +545,7 @@ export const diagramMachine = setup({
             }),
             assign(focusNodesEdges),
             'open source of focused or last clicked node',
-            {
-              type: 'xyflow:fitDiagram',
-              params: focusedBounds,
-            },
+            'xyflow:fitFocusedBounds',
           ],
         },
         'key.esc': {
@@ -631,10 +640,7 @@ export const diagramMachine = setup({
           },
         }),
         assign(updateActiveWalkthrough),
-        {
-          type: 'xyflow:fitDiagram',
-          params: focusedBounds,
-        },
+        'xyflow:fitFocusedBounds',
       ],
       on: {
         'key.esc': {
@@ -665,15 +671,15 @@ export const diagramMachine = setup({
               },
             })
             enqueue.assign(updateActiveWalkthrough)
-            enqueue({
-              type: 'xyflow:fitDiagram',
-              params: focusedBounds,
-            })
+            enqueue('xyflow:fitFocusedBounds')
           }),
         },
         'walkthrough.end': {
           target: 'idle',
         },
+        'xyflow.paneDblClick': {
+          target: 'idle',
+        },
         // We received another view, close overlay and process event again
         'update.view': {
           guard: 'is another view',
@@ -681,18 +687,18 @@ export const diagramMachine = setup({
           target: 'idle',
         },
       },
-      exit: enqueueActions(({ enqueue, context }) => {
+      exit: enqueueActions(({ enqueue, context, event }) => {
         enqueue.stopChild('hotkey')
         if (context.viewportBeforeFocus) {
           enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
         } else {
           enqueue({ type: 'xyflow:fitDiagram' })
         }
-        enqueue.assign((s) => ({
+        enqueue.assign({
           activeWalkthrough: null,
-          ...unfocusNodesEdges(s),
+          ...unfocusNodesEdges({ context, event }),
           viewportBeforeFocus: null,
-        }))
+        })
       }),
     },
   },
@@ -722,15 +728,13 @@ export const diagramMachine = setup({
     },
     'navigate.to': {
       guard: 'is another view',
-      actions: [
-        assign({
-          lastOnNavigate: ({ context, event }) => ({
-            fromView: context.view.id,
-            toView: event.viewId,
-            fromNode: event.fromNode ?? null,
-          }),
+      actions: assign({
+        lastOnNavigate: ({ context, event }) => ({
+          fromView: context.view.id,
+          toView: event.viewId,
+          fromNode: event.fromNode ?? null,
         }),
-      ],
+      }),
       target: '.navigating',
     },
     'navigate.back': {
@@ -810,7 +814,10 @@ export const diagramMachine = setup({
     'layout.align': {
       guard: 'not readonly',
       actions: [
-        { type: 'layout.align', params: ({ event }) => ({ mode: event.mode }) },
+        {
+          type: 'layout.align',
+          params: ({ event }) => ({ mode: event.mode }),
+        },
         raise({ type: 'saveManualLayout.schedule' }),
       ],
     },
@@ -829,7 +836,7 @@ export const diagramMachine = setup({
       ],
     },
     'open.elementDetails': {
-      actions: enqueueActions(({ context, enqueue, system, event }) => {
+      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => {
         let initiatedFrom = null as null | {
           node: NodeId
           clientRect: Rect
@@ -850,7 +857,7 @@ export const diagramMachine = setup({
             clientRect,
           }
         }
-        enqueue.sendTo(typedSystem(system).overlaysActorRef!, {
+        return ({
           type: 'open.elementDetails' as const,
           subject: event.fqn,
           currentView: context.view,

package/src/state/persistence.ts

@@ -9,7 +9,7 @@ export const DiagramToggledFeaturesPersistence = {
       if (fromStorage) {
         return JSON.parse(fromStorage) as Partial<EnabledFeatures>
       }
-      throw new Error(`Workspace ${key} not found`)
+      return null
     } catch (e) {
       console.error(`Error reading fromStorage ${key}:`, e)
       return null

package/src/theme-vars.css.ts

@@ -67,15 +67,3 @@ export const xyvars = createGlobalThemeContract({
     borderRadius: 'node-border-radius',
   },
 }, (value) => `xy-${value}`)
-
-export const whereLight = ':where([data-mantine-color-scheme="light"])'
-export const whereDark = ':where([data-mantine-color-scheme="dark"])'
-
-export const easings = {
-  out: 'cubic-bezier(0, 0, 0.40, 1)',
-  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)',
-}
-
-export const transitions = {
-  fast: `all 130ms ${easings.inOut}`,
-}

package/src/theme-vars.ts

@@ -1,12 +1,25 @@
 import { themeToVars } from '@mantine/vanilla-extract'
 
 export {
-  easings,
-  transitions,
   vars,
-  whereDark,
-  whereLight,
   xyvars,
 } from './theme-vars.css'
 
+export const rootClassName = 'likec4-diagram-root'
+export const whereNotReducedGraphics = `:where(.${rootClassName}:not([data-likec4-reduced-graphics]))`
+export const whereReducedGraphics = `:where(.${rootClassName}:is([data-likec4-reduced-graphics="true"]))`
+export const whereSmallZoom = `:where([data-likec4-zoom-small="true"])`
+
+export const whereLight = ':where([data-mantine-color-scheme="light"])'
+export const whereDark = ':where([data-mantine-color-scheme="dark"])'
+
+export const easings = {
+  out: 'cubic-bezier(0, 0, 0.40, 1)',
+  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)',
+}
+
+export const transitions = {
+  fast: `all 130ms ${easings.inOut}`,
+}
+
 export const mantine = themeToVars({})

package/src/utils/css.ts

@@ -0,0 +1,7 @@
+export function getVarName(variable: string): string {
+  var matches = variable.match(/^var\((.*)\)$/)
+  if (matches) {
+    return matches[1]!
+  }
+  return variable
+}

package/dist/base/primitives/element/styles.css.js

@@ -1,8 +0,0 @@
-/* empty css                                  */
-/* empty css                                        */
-/* empty css                                        */
-/* empty css                          */
-var iconSize = "var(--likec4-icon-size)";
-export {
-  iconSize
-};

package/dist/globals.css.d.ts

@@ -1,3 +0,0 @@
-export declare const rootClassName = "likec4-diagram-root";
-export declare const whereReducedGraphics = ":where(.likec4-diagram-root:is([data-likec4-reduced-graphics=\"true\"]))";
-export declare const whereNotReducedGraphics = ":where(.likec4-diagram-root:not([data-likec4-reduced-graphics]))";

package/dist/globals.css.js

@@ -1,5 +0,0 @@
-/* empty css                           */
-var rootClassName = "likec4-diagram-root";
-export {
-  rootClassName
-};

package/dist/hooks/useIsReducedGraphics.d.ts

@@ -1,4 +0,0 @@
-export declare const ReducedGraphicsContext: ({ children, value }: {
-    value: boolean;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useIsReducedGraphics: () => boolean;

package/dist/hooks/useIsReducedGraphics.js

@@ -1,8 +0,0 @@
-import { createSafeContext } from "@mantine/core";
-const [ReducedGraphicsContext, useIsReducedGraphics] = createSafeContext(
-  "ReducedGraphicsContext is not provided"
-);
-export {
-  ReducedGraphicsContext,
-  useIsReducedGraphics
-};