create-pixi-vn 2.0.6 → 2.0.8

package/template-react-vite-muijoy-ink/src/lib/query/{interface-query.ts → narration-query.ts}

@@ -1,22 +1,21 @@
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
 import { type CharacterInterface, narration, stepHistory } from "@drincs/pixi-vn";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 
-export const INTERFACE_DATA_USE_QUEY_KEY = "interface_data_use_quey_key";
-
-const CAN_GO_BACK_USE_QUEY_KEY = "can_go_back_use_quey_key";
+const CAN_GO_BACK_USE_QUERY_KEY = "can_go_back_use_query_key";
 export function useQueryCanGoBack() {
     return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CAN_GO_BACK_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CAN_GO_BACK_USE_QUERY_KEY],
         queryFn: async () => stepHistory.canGoBack,
     });
 }
 
-const CHOICE_MENU_OPTIONS_USE_QUEY_KEY = "choice_menu_options_use_quey_key";
+const CHOICE_MENU_OPTIONS_USE_QUERY_KEY = "choice_menu_options_use_query_key";
 export function useQueryChoiceMenuOptions() {
     const { t } = useTranslation(["narration"]);
     return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CHOICE_MENU_OPTIONS_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CHOICE_MENU_OPTIONS_USE_QUERY_KEY],
         queryFn: async () =>
             narration.choices?.map((option) => ({
                 ...option,
@@ -28,10 +27,10 @@ export function useQueryChoiceMenuOptions() {
     });
 }
 
-const INPUT_VALUE_USE_QUEY_KEY = "input_value_use_quey_key";
+const INPUT_VALUE_USE_QUERY_KEY = "input_value_use_query_key";
 export function useQueryInputValue<T>() {
     return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, INPUT_VALUE_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, INPUT_VALUE_USE_QUERY_KEY],
         queryFn: async () => ({
             isRequired: narration.isRequiredInput,
             type: narration.inputType,
@@ -45,13 +44,13 @@ type DialogueModel = {
     text?: string;
     character?: CharacterInterface;
 };
-const DIALOGUE_USE_QUEY_KEY = "dialogue_use_quey_key";
+const DIALOGUE_USE_QUERY_KEY = "dialogue_use_query_key";
 export function useQueryDialogue() {
     const { t } = useTranslation(["narration"]);
     const queryClient = useQueryClient();
 
     return useQuery<DialogueModel>({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, DIALOGUE_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, DIALOGUE_USE_QUERY_KEY],
         queryFn: async ({ queryKey }) => {
             const dialogue = narration.dialogue;
             let text = dialogue?.text;
@@ -90,21 +89,21 @@ export function useQueryDialogue() {
     });
 }
 
-const CAN_GO_NEXT_USE_QUEY_KEY = "can_go_next_use_quey_key";
+const CAN_GO_NEXT_USE_QUERY_KEY = "can_go_next_use_query_key";
 export function useQueryCanGoNext() {
     return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CAN_GO_NEXT_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CAN_GO_NEXT_USE_QUERY_KEY],
         queryFn: async () => narration.canContinue && !narration.isRequiredInput,
     });
 }
 
-const NARRATIVE_HISTORY_USE_QUEY_KEY = "narrative_history_use_quey_key";
+const NARRATIVE_HISTORY_USE_QUERY_KEY = "narrative_history_use_query_key";
 export function useQueryNarrativeHistory({ searchString }: { searchString?: string }) {
     const { t } = useTranslation(["narration"]);
     const normalizedSearch = searchString?.toLowerCase().trim();
 
     return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, NARRATIVE_HISTORY_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, NARRATIVE_HISTORY_USE_QUERY_KEY],
         queryFn: async () => {
             const promises = stepHistory.narrativeHistory.map(async (step) => {
                 const character = step.dialogue?.character;

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

@@ -1,18 +1,18 @@
 import { getLastSaveFromIndexDB, getSaveFromIndexDB } from "@/lib/utils/save-utility";
 import { useQuery } from "@tanstack/react-query";
 
-export const SAVES_USE_QUEY_KEY = "saves_use_quey_key";
+export const SAVES_USE_QUERY_KEY = "saves_use_query_key";
 export function useQuerySaves({ id }: { id: number }) {
     return useQuery({
-        queryKey: [SAVES_USE_QUEY_KEY, id],
+        queryKey: [SAVES_USE_QUERY_KEY, id],
         queryFn: async () => (await getSaveFromIndexDB(id)) || null,
     });
 }
 
-export const LAST_SAVE_USE_QUEY_KEY = "last_save_use_quey_key";
+export const LAST_SAVE_USE_QUERY_KEY = "last_save_use_query_key";
 export function useQueryLastSave() {
     return useQuery({
-        queryKey: [LAST_SAVE_USE_QUEY_KEY],
+        queryKey: [LAST_SAVE_USE_QUERY_KEY],
         queryFn: async () => (await getLastSaveFromIndexDB()) || null,
     });
 }

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

@@ -1,10 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 
-export const IS_FULL_SCREEN_MODE_USE_QUEY_KEY = "is_full_screen_mode_use_quey_key";
+export const IS_FULL_SCREEN_MODE_USE_QUERY_KEY = "is_full_screen_mode_use_query_key";
 
 export function useQueryIsFullModeScreen() {
     return useQuery({
-        queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY],
+        queryKey: [IS_FULL_SCREEN_MODE_USE_QUERY_KEY],
         queryFn: async () => document.fullscreenElement !== null,
     });
 }

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

@@ -2,11 +2,11 @@ import { PendingComponent } from "@/components/loading";
 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";
-import { INTERFACE_DATA_USE_QUEY_KEY } from "@/lib/query/interface-query";
 import { SearchParams } from "@/lib/stores/search-param-store";
 import { defineAssets } from "@/lib/utils/assets-utility";
 import { initializeIndexedDB } from "@/lib/utils/db-utility";
@@ -33,7 +33,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
             const isRefreshSaveExist = await loadRefreshSave();
             if (isRefreshSaveExist) {
                 await context.queryClient.invalidateQueries({
-                    queryKey: [INTERFACE_DATA_USE_QUEY_KEY],
+                    queryKey: [INTERFACE_DATA_USE_QUERY_KEY],
                 });
             }
         }

package/template-react-vite-muijoy-ink-tauri/package-lock.json

@@ -10,8 +10,8 @@
       "license": "GPL-3.0",
       "dependencies": {
         "@base-ui/react": "^1.5.0",
-        "@drincs/pixi-vn": "^1.8.11",
-        "@drincs/pixi-vn-ink": "^1.0.4",
+        "@drincs/pixi-vn": "^1.8.13",
+        "@drincs/pixi-vn-ink": "^1.0.5",
         "@drincs/pixi-vn-spine": "^0.2.1",
         "@tailwindcss/vite": "^4.3.0",
         "@tanstack/react-devtools": "^0.10.5",
@@ -2119,9 +2119,9 @@
       }
     },
     "node_modules/@drincs/pixi-vn": {
-      "version": "1.8.12",
-      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.12.tgz",
-      "integrity": "sha512-1Ff8mZ+hYQzpA2F/LAH37f6cfEewJcYtE4hjLcJRQCv2ql+ti12JAAzCUItopUt8VWEKFGY43J8XILAc66wfjA==",
+      "version": "1.8.13",
+      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.13.tgz",
+      "integrity": "sha512-UFo1cUYmy3FSgqKqjHkA5NpTXSwjk24WMZAkGe9tgoVLcexi1d+TmhJGSt1VloPjw/hHwYKaip2vyrmBACZ1fA==",
       "license": "LGPL-2.1",
       "workspaces": [
         "sandbox"
@@ -2146,9 +2146,9 @@
       }
     },
     "node_modules/@drincs/pixi-vn-ink": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn-ink/-/pixi-vn-ink-1.0.4.tgz",
-      "integrity": "sha512-iRBWZTVxXsxqH9zHL7gERreg2103Arqfg6lxPld0PkKs1m0LVCgwVy1ZBuxY29FIU14jyYvHcmr9uU/EVmw8tA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn-ink/-/pixi-vn-ink-1.0.5.tgz",
+      "integrity": "sha512-oYp4xkp2MQJHebyDfnD90U3dtSZ/9ARwMehg1OvMwR7MRbpske9NNM6OJ9ijA68j/1TPJP/LUuDPpdNmDQwcRQ==",
       "license": "LGPL-2.1",
       "workspaces": [
         "playground"

package/template-react-vite-muijoy-ink-tauri/src/components/menus/choice-menus.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { useNarrationFunctions } from "@/lib/hooks/narration-hooks";
-import { useQueryChoiceMenuOptions } from "@/lib/query/interface-query";
+import { useQueryChoiceMenuOptions } from "@/lib/query/narration-query";
 import { GameStatus } from "@/lib/stores/game-status-store";
 import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
 import { useDebouncedValue } from "@tanstack/react-pacer";

package/template-react-vite-muijoy-ink-tauri/src/components/menus/main-menu.tsx

@@ -3,11 +3,14 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { CANVAS_UI_LAYER_NAME, overlayTextShadowClass } from "@/constants";
+import {
+    CANVAS_UI_LAYER_NAME,
+    INTERFACE_DATA_USE_QUERY_KEY,
+    overlayTextShadowClass,
+} from "@/constants";
 import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
 import { useGameProps } from "@/lib/hooks/props-hooks";
 import { useQuit } from "@/lib/hooks/quit-hooks";
-import { INTERFACE_DATA_USE_QUEY_KEY as INTERFACE_DATA_USE_QUERY_KEY } from "@/lib/query/interface-query";
 import { useQueryLastSave } from "@/lib/query/save-query";
 import { InterfaceSettings } from "@/lib/stores/interface-settings-store";
 import { cn } from "@/lib/utils";

package/template-react-vite-muijoy-ink-tauri/src/components/menus/settings/menus/history.tsx

@@ -11,7 +11,7 @@ import {
 import { Kbd } from "@/components/ui/kbd";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useImageSrc } from "@/lib/hooks/image-hooks";
-import { useQueryNarrativeHistory } from "@/lib/query/interface-query";
+import { useQueryNarrativeHistory } from "@/lib/query/narration-query";
 import { cn } from "@/lib/utils";
 import { useDebouncedValue } from "@tanstack/react-pacer";
 import { Check, Search } from "lucide-react";
@@ -42,10 +42,7 @@ export function HistoryList({ searchString }: { searchString?: string }) {
                     <Item key={key} variant="outline">
                         {item.character && (
                             <ItemMedia variant="image">
-                                <HistoryItemAvatar
-                                    icon={item.icon}
-                                    character={item.character}
-                                />
+                                <HistoryItemAvatar icon={item.icon} character={item.character} />
                             </ItemMedia>
                         )}
                         <ItemContent

package/template-react-vite-muijoy-ink-tauri/src/components/menus/settings/system-controls.tsx

@@ -14,7 +14,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { useLanguageSettings } from "@/lib/hooks/language-settings-hooks";
 import { downloadResourceToTranslate } from "@/lib/i18n";
 import {
-    IS_FULL_SCREEN_MODE_USE_QUEY_KEY,
+    IS_FULL_SCREEN_MODE_USE_QUERY_KEY,
     useQueryIsFullModeScreen,
 } from "@/lib/query/settings-query";
 import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
@@ -172,7 +172,7 @@ export function FullScreenSettings() {
                     promise.finally(() => {
                         setLoading(false);
                         queryClient.invalidateQueries({
-                            queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY],
+                            queryKey: [IS_FULL_SCREEN_MODE_USE_QUERY_KEY],
                         });
                     });
                 }}

package/template-react-vite-muijoy-ink-tauri/src/components/modals/input-request-dialogues.tsx

@@ -2,7 +2,7 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { useGameProps } from "@/lib/hooks/props-hooks";
-import { useQueryDialogue, useQueryInputValue } from "@/lib/query/interface-query";
+import { useQueryDialogue, useQueryInputValue } from "@/lib/query/narration-query";
 import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
 import { narration } from "@drincs/pixi-vn";
 import { useDebouncedValue } from "@tanstack/react-pacer";

package/template-react-vite-muijoy-ink-tauri/src/components/quick-tools.tsx

@@ -5,10 +5,10 @@ import { useNarrationFunctions } from "@/lib/hooks/narration-hooks";
 import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
 import { useGameProps } from "@/lib/hooks/props-hooks";
 import { useWheelActions } from "@/lib/hooks/quick-tools-hooks";
-import { useQueryCanGoBack } from "@/lib/query/interface-query";
+import { useQueryCanGoBack } from "@/lib/query/narration-query";
 import {
-    LAST_SAVE_USE_QUEY_KEY,
-    SAVES_USE_QUEY_KEY,
+    LAST_SAVE_USE_QUERY_KEY,
+    SAVES_USE_QUERY_KEY,
     useQueryLastSave,
 } from "@/lib/query/save-query";
 import { AutoSettings } from "@/lib/stores/auto-settings-store";
@@ -105,8 +105,8 @@ export function QuickTools() {
                 className="h-5 px-1 text-[10px] sm:h-6 sm:px-2 sm:text-xs"
                 onClick={() => {
                     const savePromise = saveGameToIndexDB().then((save) => {
-                        queryClient.setQueryData([SAVES_USE_QUEY_KEY, save.id], save);
-                        queryClient.setQueryData([LAST_SAVE_USE_QUEY_KEY], save);
+                        queryClient.setQueryData([SAVES_USE_QUERY_KEY, save.id], save);
+                        queryClient.setQueryData([LAST_SAVE_USE_QUERY_KEY], save);
                     });
                     toast.promise(savePromise, {
                         loading: t("saving"),

package/template-react-vite-muijoy-ink-tauri/src/components/screens/narration/index.tsx

@@ -1,7 +1,7 @@
 import { ChoiceMenu } from "@/components/menus/choice-menus";
 import { NarrationCards } from "@/components/screens/narration/narration-cards";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { useQueryDialogue } from "@/lib/query/interface-query";
+import { useQueryDialogue } from "@/lib/query/narration-query";
 
 export function NarrationScreen() {
     const { data: { animatedText, text } = {} } = useQueryDialogue();

package/template-react-vite-muijoy-ink-tauri/src/components/screens/narration/narration-cards.tsx

@@ -6,7 +6,7 @@ import { Image } from "@/components/ui/image";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useNarrationPointerHandlers } from "@/lib/hooks/narration-hooks";
-import { useQueryDialogue } from "@/lib/query/interface-query";
+import { useQueryDialogue } from "@/lib/query/narration-query";
 import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
 import { useSelector } from "@tanstack/react-store";
 import { type RefObject, useCallback, useRef } from "react";

package/template-react-vite-muijoy-ink-tauri/src/constants.ts

@@ -9,5 +9,7 @@ export const SFX_CHANNEL_NAME = "sfx";
 
 export const SKIP_DELAY = 100;
 
+export const INTERFACE_DATA_USE_QUERY_KEY = "interface_data_use_query_key";
+
 /** Text-shadow that outlines text with black so it remains legible over any image or canvas background. */
 export const overlayTextShadowClass = "[text-shadow:0_0_3px_black,0_0_6px_black]";

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

@@ -2,10 +2,10 @@ import { useAlertDialog } from "@/components/providers/alert-dialog-provider";
 import { useNarrationFunctions } from "@/lib/hooks/narration-hooks";
 import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
 import { useGameProps } from "@/lib/hooks/props-hooks";
-import { useQueryInputValue } from "@/lib/query/interface-query";
+import { useQueryInputValue } from "@/lib/query/narration-query";
 import {
-    LAST_SAVE_USE_QUEY_KEY,
-    SAVES_USE_QUEY_KEY,
+    LAST_SAVE_USE_QUERY_KEY,
+    SAVES_USE_QUERY_KEY,
     useQueryLastSave,
 } from "@/lib/query/save-query";
 import { QuickActionsWheelState } from "@/lib/stores/quick-actions-wheel-store";
@@ -47,8 +47,8 @@ export function useSaveHotkeys(): null {
             return;
         }
         const savePromise = saveGameToIndexDB().then((save) => {
-            queryClient.setQueryData([SAVES_USE_QUEY_KEY, save.id], save);
-            queryClient.setQueryData([LAST_SAVE_USE_QUEY_KEY], save);
+            queryClient.setQueryData([SAVES_USE_QUERY_KEY, save.id], save);
+            queryClient.setQueryData([LAST_SAVE_USE_QUERY_KEY], save);
         });
         toast.promise(savePromise, {
             loading: t("saving"),

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

@@ -1,4 +1,4 @@
-import { INTERFACE_DATA_USE_QUEY_KEY } from "@/lib/query/interface-query";
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
 import type { StepLabelProps } from "@drincs/pixi-vn";
 import { useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
@@ -18,7 +18,9 @@ export function useGameProps(): StepLabelProps {
         toast,
         invalidateInterfaceData: async (delay: number = 0) => {
             if (delay > 0) await new Promise((resolve) => setTimeout(resolve, delay));
-            return await queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
+            return await queryClient.invalidateQueries({
+                queryKey: [INTERFACE_DATA_USE_QUERY_KEY],
+            });
         },
     };
 }

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

@@ -2,7 +2,7 @@ import { SaveNameInput } from "@/components/menus/save-menu/save-forms";
 import { useAlertDialog } from "@/components/providers/alert-dialog-provider";
 import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
 import { useGameProps } from "@/lib/hooks/props-hooks";
-import { LAST_SAVE_USE_QUEY_KEY, SAVES_USE_QUEY_KEY } from "@/lib/query/save-query";
+import { LAST_SAVE_USE_QUERY_KEY, SAVES_USE_QUERY_KEY } from "@/lib/query/save-query";
 import {
     addRefreshSave,
     deleteSaveFromIndexDB,
@@ -62,8 +62,8 @@ export function useSaveActions() {
                 onConfirm: () =>
                     deleteSaveFromIndexDB(id)
                         .then(() => {
-                            queryClient.setQueryData([SAVES_USE_QUEY_KEY, id], null);
-                            queryClient.invalidateQueries({ queryKey: [LAST_SAVE_USE_QUEY_KEY] });
+                            queryClient.setQueryData([SAVES_USE_QUERY_KEY, id], null);
+                            queryClient.invalidateQueries({ queryKey: [LAST_SAVE_USE_QUERY_KEY] });
                             toast.success(t("success_delete"));
                             return true;
                         })
@@ -95,8 +95,8 @@ export function useSaveActions() {
                         id,
                         name: tempSaveNameRef.current,
                     }).then((save) => {
-                        queryClient.setQueryData([SAVES_USE_QUEY_KEY, save.id], save);
-                        queryClient.setQueryData([LAST_SAVE_USE_QUEY_KEY], save);
+                        queryClient.setQueryData([SAVES_USE_QUERY_KEY, save.id], save);
+                        queryClient.setQueryData([LAST_SAVE_USE_QUERY_KEY], save);
                     });
                     toast.promise(savePromise, {
                         loading: t("saving"),
@@ -138,8 +138,8 @@ export function useSaveActions() {
                         id,
                         name: tempSaveNameRef.current,
                     }).then((save) => {
-                        queryClient.setQueryData([SAVES_USE_QUEY_KEY, save.id], save);
-                        queryClient.setQueryData([LAST_SAVE_USE_QUEY_KEY], save);
+                        queryClient.setQueryData([SAVES_USE_QUERY_KEY, save.id], save);
+                        queryClient.setQueryData([LAST_SAVE_USE_QUERY_KEY], save);
                     });
                     toast.promise(savePromise, {
                         loading: t("saving"),

package/template-react-vite-muijoy-ink-tauri/src/lib/query/{interface-query.ts → narration-query.ts}

@@ -1,22 +1,21 @@
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
 import { type CharacterInterface, narration, stepHistory } from "@drincs/pixi-vn";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 
-export const INTERFACE_DATA_USE_QUEY_KEY = "interface_data_use_quey_key";
-
-const CAN_GO_BACK_USE_QUEY_KEY = "can_go_back_use_quey_key";
+const CAN_GO_BACK_USE_QUERY_KEY = "can_go_back_use_query_key";
 export function useQueryCanGoBack() {
     return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CAN_GO_BACK_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CAN_GO_BACK_USE_QUERY_KEY],
         queryFn: async () => stepHistory.canGoBack,
     });
 }
 
-const CHOICE_MENU_OPTIONS_USE_QUEY_KEY = "choice_menu_options_use_quey_key";
+const CHOICE_MENU_OPTIONS_USE_QUERY_KEY = "choice_menu_options_use_query_key";
 export function useQueryChoiceMenuOptions() {
     const { t } = useTranslation(["narration"]);
     return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CHOICE_MENU_OPTIONS_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CHOICE_MENU_OPTIONS_USE_QUERY_KEY],
         queryFn: async () =>
             narration.choices?.map((option) => ({
                 ...option,
@@ -28,10 +27,10 @@ export function useQueryChoiceMenuOptions() {
     });
 }
 
-const INPUT_VALUE_USE_QUEY_KEY = "input_value_use_quey_key";
+const INPUT_VALUE_USE_QUERY_KEY = "input_value_use_query_key";
 export function useQueryInputValue<T>() {
     return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, INPUT_VALUE_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, INPUT_VALUE_USE_QUERY_KEY],
         queryFn: async () => ({
             isRequired: narration.isRequiredInput,
             type: narration.inputType,
@@ -45,13 +44,13 @@ type DialogueModel = {
     text?: string;
     character?: CharacterInterface;
 };
-const DIALOGUE_USE_QUEY_KEY = "dialogue_use_quey_key";
+const DIALOGUE_USE_QUERY_KEY = "dialogue_use_query_key";
 export function useQueryDialogue() {
     const { t } = useTranslation(["narration"]);
     const queryClient = useQueryClient();
 
     return useQuery<DialogueModel>({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, DIALOGUE_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, DIALOGUE_USE_QUERY_KEY],
         queryFn: async ({ queryKey }) => {
             const dialogue = narration.dialogue;
             let text = dialogue?.text;
@@ -90,21 +89,21 @@ export function useQueryDialogue() {
     });
 }
 
-const CAN_GO_NEXT_USE_QUEY_KEY = "can_go_next_use_quey_key";
+const CAN_GO_NEXT_USE_QUERY_KEY = "can_go_next_use_query_key";
 export function useQueryCanGoNext() {
     return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CAN_GO_NEXT_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CAN_GO_NEXT_USE_QUERY_KEY],
         queryFn: async () => narration.canContinue && !narration.isRequiredInput,
     });
 }
 
-const NARRATIVE_HISTORY_USE_QUEY_KEY = "narrative_history_use_quey_key";
+const NARRATIVE_HISTORY_USE_QUERY_KEY = "narrative_history_use_query_key";
 export function useQueryNarrativeHistory({ searchString }: { searchString?: string }) {
     const { t } = useTranslation(["narration"]);
     const normalizedSearch = searchString?.toLowerCase().trim();
 
     return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, NARRATIVE_HISTORY_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, NARRATIVE_HISTORY_USE_QUERY_KEY],
         queryFn: async () => {
             const promises = stepHistory.narrativeHistory.map(async (step) => {
                 const character = step.dialogue?.character;

package/template-react-vite-muijoy-ink-tauri/src/lib/query/save-query.ts

@@ -1,18 +1,18 @@
 import { getLastSaveFromIndexDB, getSaveFromIndexDB } from "@/lib/utils/save-utility";
 import { useQuery } from "@tanstack/react-query";
 
-export const SAVES_USE_QUEY_KEY = "saves_use_quey_key";
+export const SAVES_USE_QUERY_KEY = "saves_use_query_key";
 export function useQuerySaves({ id }: { id: number }) {
     return useQuery({
-        queryKey: [SAVES_USE_QUEY_KEY, id],
+        queryKey: [SAVES_USE_QUERY_KEY, id],
         queryFn: async () => (await getSaveFromIndexDB(id)) || null,
     });
 }
 
-export const LAST_SAVE_USE_QUEY_KEY = "last_save_use_quey_key";
+export const LAST_SAVE_USE_QUERY_KEY = "last_save_use_query_key";
 export function useQueryLastSave() {
     return useQuery({
-        queryKey: [LAST_SAVE_USE_QUEY_KEY],
+        queryKey: [LAST_SAVE_USE_QUERY_KEY],
         queryFn: async () => (await getLastSaveFromIndexDB()) || null,
     });
 }

package/template-react-vite-muijoy-ink-tauri/src/lib/query/settings-query.ts

@@ -1,11 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 
-export const IS_FULL_SCREEN_MODE_USE_QUEY_KEY = "is_full_screen_mode_use_quey_key";
+export const IS_FULL_SCREEN_MODE_USE_QUERY_KEY = "is_full_screen_mode_use_query_key";
 
 export function useQueryIsFullModeScreen() {
     return useQuery({
-        queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY],
+        queryKey: [IS_FULL_SCREEN_MODE_USE_QUERY_KEY],
         queryFn: async () => {
             if (window.__TAURI__) {
                 return getCurrentWindow().isFullscreen();

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

@@ -2,11 +2,11 @@ import { PendingComponent } from "@/components/loading";
 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";
-import { INTERFACE_DATA_USE_QUEY_KEY } from "@/lib/query/interface-query";
 import { SearchParams } from "@/lib/stores/search-param-store";
 import { defineAssets } from "@/lib/utils/assets-utility";
 import { initializeIndexedDB } from "@/lib/utils/db-utility";
@@ -33,7 +33,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
             const isRefreshSaveExist = await loadRefreshSave();
             if (isRefreshSaveExist) {
                 await context.queryClient.invalidateQueries({
-                    queryKey: [INTERFACE_DATA_USE_QUEY_KEY],
+                    queryKey: [INTERFACE_DATA_USE_QUERY_KEY],
                 });
             }
         }

package/template-react-vite-muijoy-tauri/src/components/menus/choice-menus.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { useNarrationFunctions } from "@/lib/hooks/narration-hooks";
-import { useQueryChoiceMenuOptions } from "@/lib/query/interface-query";
+import { useQueryChoiceMenuOptions } from "@/lib/query/narration-query";
 import { GameStatus } from "@/lib/stores/game-status-store";
 import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
 import { useDebouncedValue } from "@tanstack/react-pacer";

package/template-react-vite-muijoy-tauri/src/components/menus/main-menu.tsx

@@ -3,11 +3,14 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { CANVAS_UI_LAYER_NAME, overlayTextShadowClass } from "@/constants";
+import {
+    CANVAS_UI_LAYER_NAME,
+    INTERFACE_DATA_USE_QUERY_KEY,
+    overlayTextShadowClass,
+} from "@/constants";
 import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
 import { useGameProps } from "@/lib/hooks/props-hooks";
 import { useQuit } from "@/lib/hooks/quit-hooks";
-import { INTERFACE_DATA_USE_QUEY_KEY as INTERFACE_DATA_USE_QUERY_KEY } from "@/lib/query/interface-query";
 import { useQueryLastSave } from "@/lib/query/save-query";
 import { InterfaceSettings } from "@/lib/stores/interface-settings-store";
 import { cn } from "@/lib/utils";

package/template-react-vite-muijoy-tauri/src/components/menus/settings/menus/history.tsx

@@ -11,7 +11,7 @@ import {
 import { Kbd } from "@/components/ui/kbd";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useImageSrc } from "@/lib/hooks/image-hooks";
-import { useQueryNarrativeHistory } from "@/lib/query/interface-query";
+import { useQueryNarrativeHistory } from "@/lib/query/narration-query";
 import { cn } from "@/lib/utils";
 import { useDebouncedValue } from "@tanstack/react-pacer";
 import { Check, Search } from "lucide-react";
@@ -42,10 +42,7 @@ export function HistoryList({ searchString }: { searchString?: string }) {
                     <Item key={key} variant="outline">
                         {item.character && (
                             <ItemMedia variant="image">
-                                <HistoryItemAvatar
-                                    icon={item.icon}
-                                    character={item.character}
-                                />
+                                <HistoryItemAvatar icon={item.icon} character={item.character} />
                             </ItemMedia>
                         )}
                         <ItemContent

package/template-react-vite-muijoy-tauri/src/components/menus/settings/system-controls.tsx

@@ -14,7 +14,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { useLanguageSettings } from "@/lib/hooks/language-settings-hooks";
 import { downloadResourceToTranslate } from "@/lib/i18n";
 import {
-    IS_FULL_SCREEN_MODE_USE_QUEY_KEY,
+    IS_FULL_SCREEN_MODE_USE_QUERY_KEY,
     useQueryIsFullModeScreen,
 } from "@/lib/query/settings-query";
 import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
@@ -172,7 +172,7 @@ export function FullScreenSettings() {
                     promise.finally(() => {
                         setLoading(false);
                         queryClient.invalidateQueries({
-                            queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY],
+                            queryKey: [IS_FULL_SCREEN_MODE_USE_QUERY_KEY],
                         });
                     });
                 }}

package/template-react-vite-muijoy-tauri/src/components/modals/input-request-dialogues.tsx

@@ -2,7 +2,7 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { useGameProps } from "@/lib/hooks/props-hooks";
-import { useQueryDialogue, useQueryInputValue } from "@/lib/query/interface-query";
+import { useQueryDialogue, useQueryInputValue } from "@/lib/query/narration-query";
 import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
 import { narration } from "@drincs/pixi-vn";
 import { useDebouncedValue } from "@tanstack/react-pacer";