create-pixi-vn 2.0.12 → 2.0.14

package/template-react-vite-muijoy-ink/src/components/ui/item.tsx

@@ -1,9 +1,10 @@
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
+import * as React from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
     return (
@@ -178,13 +179,13 @@ function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
 
 export {
     Item,
-    ItemActions,
+    ItemMedia,
     ItemContent,
-    ItemDescription,
-    ItemFooter,
+    ItemActions,
     ItemGroup,
-    ItemHeader,
-    ItemMedia,
     ItemSeparator,
     ItemTitle,
+    ItemDescription,
+    ItemHeader,
+    ItemFooter,
 };

package/template-react-vite-muijoy-ink/src/components/ui/label.tsx

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/template-react-vite-muijoy-ink/src/components/ui/radio-group.tsx

@@ -1,7 +1,10 @@
-import { cn } from "@/lib/utils";
+"use client";
+
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 
+import { cn } from "@/lib/utils";
+
 function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
     return (
         <RadioGroupPrimitive

package/template-react-vite-muijoy-ink/src/components/ui/scroll-area.tsx

@@ -1,7 +1,11 @@
+"use client";
+
+import * as React from "react";
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+
 import { cn } from "@/lib/utils";
 
-function ScrollArea({ className, children, ref, ...props }: ScrollAreaPrimitive.Root.Props) {
+function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {
     return (
         <ScrollAreaPrimitive.Root
             data-slot="scroll-area"
@@ -9,7 +13,6 @@ function ScrollArea({ className, children, ref, ...props }: ScrollAreaPrimitive.
             {...props}
         >
             <ScrollAreaPrimitive.Viewport
-                ref={ref}
                 data-slot="scroll-area-viewport"
                 className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
             >

package/template-react-vite-muijoy-ink/src/components/ui/select.tsx

@@ -1,7 +1,8 @@
+import * as React from "react";
 import { Select as SelectPrimitive } from "@base-ui/react/select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import type * as React from "react";
+
 import { cn } from "@/lib/utils";
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 
 const Select = SelectPrimitive.Root;
 

package/template-react-vite-muijoy-ink/src/components/ui/separator.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 
 import { cn } from "@/lib/utils";

package/template-react-vite-muijoy-ink/src/components/ui/sonner.tsx

@@ -1,12 +1,12 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 import {
     CircleCheckIcon,
     InfoIcon,
-    Loader2Icon,
-    OctagonXIcon,
     TriangleAlertIcon,
+    OctagonXIcon,
+    Loader2Icon,
 } from "lucide-react";
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
     const { theme = "system" } = useTheme();

package/template-react-vite-muijoy-ink/src/components/ui/spinner.tsx

@@ -1,9 +1,10 @@
-import { Loader2Icon } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { Loader2Icon } from "lucide-react";
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
     return (
         <Loader2Icon
+            data-slot="spinner"
             role="status"
             aria-label="Loading"
             className={cn("size-4 animate-spin", className)}

package/template-react-vite-muijoy-ink/src/components/ui/switch.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+
 import { cn } from "@/lib/utils";
 
 function Switch({

package/template-react-vite-muijoy-ink/src/components/ui/textarea.tsx

@@ -1,4 +1,5 @@
-import type * as React from "react";
+import * as React from "react";
+
 import { cn } from "@/lib/utils";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {

package/template-react-vite-muijoy-ink/src/components/ui/tooltip.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 
 import { cn } from "@/lib/utils";

package/template-react-vite-muijoy-ink/src/content/ink/hashtag-commands.ts

@@ -0,0 +1,39 @@
+import { characterIdsEnum } from "@/pixi-vn.keys.gen";
+import { RegisteredCharacters } from "@drincs/pixi-vn";
+import { HashtagCommands } from "@drincs/pixi-vn-ink";
+import zod from "zod";
+
+HashtagCommands.add(
+    async (script, { navigate }) => {
+        await navigate({ to: script[1] });
+        return true;
+    },
+    {
+        name: "navigate",
+        description: `Navigates to a specified route within the game.
+
+\`\`\`ink
+# navigate <route>
+\`\`\``,
+        validation: zod.tuple([zod.literal("navigate"), zod.string()]),
+    },
+);
+
+HashtagCommands.add(
+    async (script) => {
+        const character = RegisteredCharacters.get(script[1]);
+        if (character) {
+            character.name = script[2];
+        }
+        return true;
+    },
+    {
+        name: "character rename",
+        description: `Renames a character in the game.
+
+\`\`\`ink
+# rename <characterId> <newName>
+\`\`\``,
+        validation: zod.tuple([zod.literal("rename"), zod.enum(characterIdsEnum), zod.string()]),
+    },
+);

package/template-react-vite-muijoy-ink/src/content/ink/text-replaces.ts

@@ -0,0 +1,19 @@
+import { RegisteredCharacters } from "@drincs/pixi-vn";
+import { TextReplaces } from "@drincs/pixi-vn-ink";
+
+TextReplaces.add((key) => RegisteredCharacters.get(key)?.name, {
+    name: "character name",
+    validation: "characterId",
+    type: "after-translation",
+    i18nInterpolation: true,
+    description: "Replaces a character ID with the character's name in the game.",
+});
+
+TextReplaces.add(() => "Stephanie", {
+    name: "steph_fullname",
+    validation: /steph_fullname/,
+    type: "after-translation",
+    i18nInterpolation: true,
+    description:
+        "Replaces the placeholder 'steph_fullname' with the full name of the character Stephanie.",
+});

package/template-react-vite-muijoy-ink/src/lib/hooks/hotkeys-hooks.ts

@@ -250,6 +250,7 @@ export function useNarrationHotkeys(): null {
             callback: onSkipKeyUp,
             options: {
                 eventType: "keyup",
+                conflictBehavior: "allow",
                 meta: {
                     name: t("next"),
                     description: t("skip_release_description"),
@@ -262,6 +263,7 @@ export function useNarrationHotkeys(): null {
             callback: onSkipKeyUp,
             options: {
                 eventType: "keyup",
+                conflictBehavior: "allow",
                 meta: {
                     name: t("next"),
                     description: t("skip_release_space_description"),

package/template-react-vite-muijoy-ink/src/lib/hooks/ink-hooks.tsx

@@ -0,0 +1,12 @@
+import { onInkTranslate } from "@drincs/pixi-vn-ink";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+export default function useInkInitialization() {
+    const { t } = useTranslation(["narration"]);
+    useEffect(() => {
+        onInkTranslate(t);
+    }, [t]);
+
+    return null;
+}

package/template-react-vite-muijoy-ink/src/lib/hooks/narration-hooks.ts

@@ -2,6 +2,7 @@ import { SKIP_DELAY } from "@/constants";
 import { useGameProps } from "@/lib/hooks/props-hooks";
 import { AutoSettings } from "@/lib/stores/auto-settings-store";
 import { GameStatus } from "@/lib/stores/game-status-store";
+import { SearchParams } from "@/lib/stores/search-param-store";
 import { SkipSettings } from "@/lib/stores/skip-settings-store";
 import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
 import { hasScrollableParent, isScrollableElement } from "@/lib/utils/scroll-utils";
@@ -9,12 +10,18 @@ import { narration, stepHistory, type StoredIndexedChoiceInterface } from "@drin
 import { useDebouncer } from "@tanstack/react-pacer";
 import { useSelector } from "@tanstack/react-store";
 import type React from "react";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 
 export function useNarrationFunctions() {
     const gameProps = useGameProps();
+    const searchParams = useSelector(SearchParams.store, (state) => state);
+    const hasOpenMenu = useMemo(
+        () => Object.values(searchParams).some((value) => value !== undefined),
+        [searchParams],
+    );
 
     const goNext = useCallback(async () => {
+        if (hasOpenMenu) return;
         GameStatus.setLoading(true);
         try {
             if (!narration.canContinue) {
@@ -36,9 +43,10 @@ export function useNarrationFunctions() {
             console.error(e);
             return;
         }
-    }, [gameProps]);
+    }, [gameProps, hasOpenMenu]);
 
     const goBack = useCallback(async () => {
+        if (hasOpenMenu) return;
         GameStatus.setLoading(true);
         return stepHistory
             .back(gameProps)
@@ -50,10 +58,11 @@ export function useNarrationFunctions() {
                 GameStatus.setLoading(false);
                 console.error(e);
             });
-    }, [gameProps]);
+    }, [gameProps, hasOpenMenu]);
 
     const selectChoice = useCallback(
         async (item: StoredIndexedChoiceInterface) => {
+            if (hasOpenMenu) return;
             GameStatus.setLoading(true);
             return narration
                 .selectChoice(item, gameProps)
@@ -66,7 +75,7 @@ export function useNarrationFunctions() {
                     console.error(e);
                 });
         },
-        [gameProps],
+        [gameProps, hasOpenMenu],
     );
 
     return {
@@ -196,6 +205,11 @@ export function useSkipAutoDetector() {
         TextDisplaySettings.store,
         (state) => state.inProgress,
     );
+    const searchParams = useSelector(SearchParams.store, (state) => state);
+    const hasOpenMenu = useMemo(
+        () => Object.values(searchParams).some((value) => value !== undefined),
+        [searchParams],
+    );
     const { goNext } = useNarrationFunctions();
 
     const savedGoNext = useRef(goNext);
@@ -203,11 +217,11 @@ export function useSkipAutoDetector() {
         savedGoNext.current = goNext;
     }, [goNext]);
     useEffect(() => {
-        if (skipEnabled) {
+        if (skipEnabled && !hasOpenMenu) {
             const id = setInterval(() => savedGoNext.current(), SKIP_DELAY);
             return () => clearInterval(id);
         }
-    }, [skipEnabled]);
+    }, [skipEnabled, hasOpenMenu]);
 
     const autoDebouncer = useDebouncer(
         (_trigger: {
@@ -215,20 +229,21 @@ export function useSkipAutoDetector() {
             skipEnabled: boolean;
             typewriterInProgress: boolean;
             autoTime: number;
+            hasOpenMenu: boolean;
         }) => {
             goNext();
         },
         {
             wait: autoTime * 1000,
-            enabled: autoEnabled && !skipEnabled && !typewriterInProgress,
+            enabled: autoEnabled && !skipEnabled && !typewriterInProgress && !hasOpenMenu,
         },
     );
 
     const { maybeExecute } = autoDebouncer;
 
     useEffect(() => {
-        maybeExecute({ autoEnabled, skipEnabled, typewriterInProgress, autoTime });
-    }, [maybeExecute, autoEnabled, skipEnabled, typewriterInProgress, autoTime]);
+        maybeExecute({ autoEnabled, skipEnabled, typewriterInProgress, autoTime, hasOpenMenu });
+    }, [maybeExecute, autoEnabled, skipEnabled, typewriterInProgress, autoTime, hasOpenMenu]);
 
     return null;
 }

package/template-react-vite-muijoy-ink/src/lib/hooks/navigation-hooks.ts

@@ -1,9 +1,35 @@
 import { SearchParams } from "@/lib/stores/search-param-store";
-import { useDebouncedCallback } from "@tanstack/react-pacer";
 import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useSelector } from "@tanstack/react-store";
 import { useCallback, useEffect } from "react";
 
+// Shared pending param changes — all synchronous setters accumulate here
+// and a single navigate fires after a very short delay.
+const _pendingParams: Record<string, unknown> = {};
+let _pendingTimer: ReturnType<typeof setTimeout> | null = null;
+let _pendingNavigate: ((...args: unknown[]) => unknown) | null = null;
+
+function scheduleNavigate(navigate: (...args: unknown[]) => unknown, key: string, value: unknown) {
+    _pendingParams[key] = value;
+    _pendingNavigate = navigate;
+    if (_pendingTimer !== null) {
+        clearTimeout(_pendingTimer);
+    }
+    _pendingTimer = setTimeout(() => {
+        _pendingTimer = null;
+        if (_pendingNavigate) {
+            const snapshot = { ..._pendingParams };
+            for (const k of Object.keys(_pendingParams)) {
+                delete _pendingParams[k];
+            }
+            _pendingNavigate({
+                search: (prev: Record<string, unknown>) => ({ ...prev, ...snapshot }),
+            });
+            _pendingNavigate = null;
+        }
+    }, 10);
+}
+
 /**
  * useConfirmBackNavigation
  *
@@ -69,13 +95,6 @@ export function useSetSearchParamState<T>(
 ): (value: T | undefined | ((previous: T | undefined) => T | undefined)) => void {
     const navigate = useNavigate();
 
-    const debouncedNavigate = useDebouncedCallback(
-        (key: string, value: unknown) => {
-            navigate({ search: ((prev: any) => ({ ...prev, [key]: value })) as any });
-        },
-        { wait: 300 },
-    );
-
     return useCallback(
         (value) => {
             const currentValue = SearchParams.store.state[field] as T | undefined;
@@ -86,8 +105,8 @@ export function useSetSearchParamState<T>(
             const normalizedValue = nextValue === false ? undefined : nextValue;
 
             SearchParams.set(field, normalizedValue);
-            debouncedNavigate(field, normalizedValue);
+            scheduleNavigate(navigate as never, field, normalizedValue);
         },
-        [field, debouncedNavigate],
+        [field, navigate],
     );
 }

package/template-react-vite-muijoy-ink/src/lib/i18n.ts

@@ -1,3 +1,4 @@
+import { generateJsonInkTranslation } from "@drincs/pixi-vn-ink";
 import i18n, { type ReadCallback } from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import ChainedBackend from "i18next-chained-backend";
@@ -44,9 +45,29 @@ function getLocalesResource(lng: string): Promise<Record<string, Record<string,
     return import(`./../locales/${lng}.json`);
 }
 
+async function generateResourceToTranslate(lng: string): Promise<any> {
+    let res = await getLocalesResource(lng);
+    res = { ...res };
+    if (!res) {
+        res = {};
+    }
+    if (!res.narration) {
+        res.narration = {};
+    }
+    if (res.default) {
+        delete res.default;
+    }
+    const manifest = await import("@/assets/ink-manifest.gen.json");
+    for (const path of manifest.default) {
+        const element = await fetch(path).then((r) => r.json());
+        element && (await generateJsonInkTranslation(element, res.narration));
+    }
+    return res;
+}
+
 export async function downloadResourceToTranslate() {
     const lng = i18n.options.fallbackLng?.toString() || "en";
-    const data = await getLocalesResource(lng);
+    const data = await generateResourceToTranslate(lng);
     const jsonString = JSON.stringify(data);
     // download the save data as a JSON file
     const blob = new Blob([jsonString], { type: "application/json" });

package/template-react-vite-muijoy-ink/src/main.tsx

@@ -10,7 +10,6 @@ import { ChannelSound } from "@/lib/stores/channel-sound-stores";
 import { MasterSound } from "@/lib/stores/master-sound-storage";
 import "@/styles.css";
 import { Assets, canvas, Container, drawCanvasErrorHandler, Game, sound } from "@drincs/pixi-vn";
-import "@drincs/pixi-vn-spine";
 import { createRoot } from "react-dom/client";
 
 // Canvas setup with PIXI

package/template-react-vite-muijoy-ink/src/pixi-vn.keys.gen.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+// noinspection JSUnusedGlobalSymbols
+// This file is auto-generated by @drincs/pixi-vn vite plugin. Do not edit manually.
+declare module "@drincs/pixi-vn/characters" {
+    interface PixivnCharacterIds {
+        "mc": never;
+        "james": never;
+        "steph": never;
+        "sly": never;
+    }
+}
+declare module "@drincs/pixi-vn/narration" {
+    interface PixivnLabelIds {
+        "animation_01": never;
+        "second_part": never;
+        "start": never;
+        "start_|_c-0": never;
+        "start_|_c-1": never;
+    }
+}
+export const characterIds = ["mc","james","steph","sly"] as const;
+export const characterIdsEnum = {"mc":"mc","james":"james","steph":"steph","sly":"sly"} as const;
+export const labelIds = ["animation_01","second_part","start","start_|_c-0","start_|_c-1"] as const;
+export const labelIdsEnum = {"animation_01":"animation_01","second_part":"second_part","start":"start","start_|_c-0":"start_|_c-0","start_|_c-1":"start_|_c-1"} as const;

package/template-react-vite-muijoy-ink/src/routeTree.gen.ts

@@ -9,16 +9,10 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as NarrationRouteImport } from './routes/narration'
 import { Route as GameRouteImport } from './routes/game'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as GameNarrationRouteImport } from './routes/game/narration'
 
-const NarrationRoute = NarrationRouteImport.update({
-  id: '/narration',
-  path: '/narration',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const GameRoute = GameRouteImport.update({
   id: '/game',
   path: '/game',
@@ -38,45 +32,34 @@ const GameNarrationRoute = GameNarrationRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/game': typeof GameRouteWithChildren
-  '/narration': typeof NarrationRoute
   '/game/narration': typeof GameNarrationRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/game': typeof GameRouteWithChildren
-  '/narration': typeof NarrationRoute
   '/game/narration': typeof GameNarrationRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/game': typeof GameRouteWithChildren
-  '/narration': typeof NarrationRoute
   '/game/narration': typeof GameNarrationRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/game' | '/narration' | '/game/narration'
+  fullPaths: '/' | '/game' | '/game/narration'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/game' | '/narration' | '/game/narration'
-  id: '__root__' | '/' | '/game' | '/narration' | '/game/narration'
+  to: '/' | '/game' | '/game/narration'
+  id: '__root__' | '/' | '/game' | '/game/narration'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   GameRoute: typeof GameRouteWithChildren
-  NarrationRoute: typeof NarrationRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/narration': {
-      id: '/narration'
-      path: '/narration'
-      fullPath: '/narration'
-      preLoaderRoute: typeof NarrationRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/game': {
       id: '/game'
       path: '/game'
@@ -114,7 +97,6 @@ const GameRouteWithChildren = GameRoute._addFileChildren(GameRouteChildren)
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   GameRoute: GameRouteWithChildren,
-  NarrationRoute: NarrationRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

package/template-react-vite-muijoy-ink/src/routes/__root.tsx

@@ -3,6 +3,7 @@ import { SettingsDialogue } from "@/components/menus/settings";
 import { OfflineAllert } from "@/components/modals/error-allerts";
 import { RootProvider } from "@/components/providers/root-provider";
 import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
+import useInkInitialization from "@/lib/hooks/ink-hooks";
 import { useConfirmBackNavigation } from "@/lib/hooks/navigation-hooks";
 import { useAutoSaveOnPageClose } from "@/lib/hooks/save-hooks";
 import { useI18n } from "@/lib/i18n";
@@ -11,12 +12,14 @@ import { defineAssets } from "@/lib/utils/assets-utility";
 import { initializeIndexedDB } from "@/lib/utils/db-utility";
 import { loadRefreshSave } from "@/lib/utils/save-utility";
 import type { RouterContext } from "@/router";
+import { setupInkHmrListener } from "@drincs/pixi-vn-ink/vite-listener";
 import { setupPixivnViteData } from "@drincs/pixi-vn/vite-listener";
-import { TanStackDevtools } from "@tanstack/react-devtools";
-import { hotkeysDevtoolsPlugin } from "@tanstack/react-hotkeys-devtools";
-import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
 import { createRootRouteWithContext, ErrorComponent, Outlet } from "@tanstack/react-router";
-import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+import { lazy, Suspense } from "react";
+
+const DevDevtools = import.meta.env.DEV
+    ? lazy(() => import("@/components/dev-devtools"))
+    : null;
 
 export const Route = createRootRouteWithContext<RouterContext>()({
     validateSearch: (search) => SearchParams.setMany(search),
@@ -26,6 +29,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
         // Game.onNavigate(async (to) => redirect({ to }));
         await Promise.all([import("@/content"), initializeIndexedDB(), defineAssets(), useI18n()]);
         await setupPixivnViteData();
+        await setupInkHmrListener();
         if (location.pathname !== "/") {
             const isRefreshSaveExist = await loadRefreshSave();
             if (isRefreshSaveExist) {
@@ -43,6 +47,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 });
 
 function RootComponent() {
+    useInkInitialization();
     useAutoSaveOnPageClose();
     useConfirmBackNavigation();
 
@@ -54,22 +59,11 @@ function RootComponent() {
                 <Outlet />
             </RootProvider>
 
-            <TanStackDevtools
-                config={{
-                    position: "bottom-right",
-                }}
-                plugins={[
-                    {
-                        name: "UI screens",
-                        render: <TanStackRouterDevtoolsPanel />,
-                    },
-                    { ...hotkeysDevtoolsPlugin(), name: "Hotkeys" },
-                    {
-                        name: "UI cache",
-                        render: <ReactQueryDevtoolsPanel />,
-                    },
-                ]}
-            />
+            {DevDevtools && (
+                <Suspense>
+                    <DevDevtools />
+                </Suspense>
+            )}
         </>
     );
 }