create-pixi-vn 2.0.5 → 2.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-pixi-vn",
   "description": "Create a new Pixi’VN project",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "type": "module",
   "license": "GPL-3.0",
   "author": "DRincs-Productions",

package/template-react-vite-muijoy/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/src/components/menus/main-menu.tsx

@@ -3,10 +3,13 @@ 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 { 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/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/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/src/components/quick-tools.tsx

@@ -5,7 +5,7 @@ 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,

package/template-react-vite-muijoy/src/components/{scrrens → screens}/narration/index.tsx

@@ -1,7 +1,7 @@
 import { ChoiceMenu } from "@/components/menus/choice-menus";
-import { NarrationCards } from "@/components/scrrens/narration/narration-cards";
+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/src/components/{scrrens → 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/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/src/lib/hooks/hotkeys-hooks.ts

@@ -2,7 +2,7 @@ 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,

package/template-react-vite-muijoy/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/query/interface-query.ts → template-react-vite-muijoy/src/lib/query/narration-query.ts}

@@ -1,13 +1,12 @@
+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";
 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_QUEY_KEY],
         queryFn: async () => stepHistory.canGoBack,
     });
 }
@@ -16,7 +15,7 @@ const CHOICE_MENU_OPTIONS_USE_QUEY_KEY = "choice_menu_options_use_quey_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_QUEY_KEY],
         queryFn: async () =>
             narration.choices?.map((option) => ({
                 ...option,
@@ -31,7 +30,7 @@ export function useQueryChoiceMenuOptions() {
 const INPUT_VALUE_USE_QUEY_KEY = "input_value_use_quey_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_QUEY_KEY],
         queryFn: async () => ({
             isRequired: narration.isRequiredInput,
             type: narration.inputType,
@@ -51,7 +50,7 @@ export function useQueryDialogue() {
     const queryClient = useQueryClient();
 
     return useQuery<DialogueModel>({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, DIALOGUE_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, DIALOGUE_USE_QUEY_KEY],
         queryFn: async ({ queryKey }) => {
             const dialogue = narration.dialogue;
             let text = dialogue?.text;
@@ -93,7 +92,7 @@ export function useQueryDialogue() {
 const CAN_GO_NEXT_USE_QUEY_KEY = "can_go_next_use_quey_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_QUEY_KEY],
         queryFn: async () => narration.canContinue && !narration.isRequiredInput,
     });
 }
@@ -104,7 +103,7 @@ export function useQueryNarrativeHistory({ searchString }: { searchString?: stri
     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_QUEY_KEY],
         queryFn: async () => {
             const promises = stepHistory.narrativeHistory.map(async (step) => {
                 const character = step.dialogue?.character;

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

@@ -2,10 +2,10 @@ 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 { 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";
@@ -30,7 +30,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/src/routes/game/narration.tsx

@@ -1,5 +1,5 @@
-import { NarrationScreen } from "@/components/scrrens/narration";
-import { NarrationClickOverlay } from "@/components/scrrens/narration/click-overlay";
+import { NarrationScreen } from "@/components/screens/narration";
+import { NarrationClickOverlay } from "@/components/screens/narration/click-overlay";
 import { useNarrationHotkeys } from "@/lib/hooks/hotkeys-hooks";
 import { useSkipAutoDetector } from "@/lib/hooks/narration-hooks";
 import { createFileRoute } from "@tanstack/react-router";

package/template-react-vite-muijoy-ink/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/src/components/menus/main-menu.tsx

@@ -3,10 +3,13 @@ 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 { 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/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/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/src/components/quick-tools.tsx

@@ -5,7 +5,7 @@ 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,

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

@@ -1,7 +1,7 @@
 import { ChoiceMenu } from "@/components/menus/choice-menus";
-import { NarrationCards } from "@/components/scrrens/narration/narration-cards";
+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-tauri/src/components/scrrens → template-react-vite-muijoy-ink/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/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/src/lib/hooks/hotkeys-hooks.ts

@@ -2,7 +2,7 @@ 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,

package/template-react-vite-muijoy-ink/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/src/lib/query/{interface-query.ts → narration-query.ts}

@@ -1,13 +1,12 @@
+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";
 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_QUEY_KEY],
         queryFn: async () => stepHistory.canGoBack,
     });
 }
@@ -16,7 +15,7 @@ const CHOICE_MENU_OPTIONS_USE_QUEY_KEY = "choice_menu_options_use_quey_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_QUEY_KEY],
         queryFn: async () =>
             narration.choices?.map((option) => ({
                 ...option,
@@ -31,7 +30,7 @@ export function useQueryChoiceMenuOptions() {
 const INPUT_VALUE_USE_QUEY_KEY = "input_value_use_quey_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_QUEY_KEY],
         queryFn: async () => ({
             isRequired: narration.isRequiredInput,
             type: narration.inputType,
@@ -51,7 +50,7 @@ export function useQueryDialogue() {
     const queryClient = useQueryClient();
 
     return useQuery<DialogueModel>({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, DIALOGUE_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, DIALOGUE_USE_QUEY_KEY],
         queryFn: async ({ queryKey }) => {
             const dialogue = narration.dialogue;
             let text = dialogue?.text;
@@ -93,7 +92,7 @@ export function useQueryDialogue() {
 const CAN_GO_NEXT_USE_QUEY_KEY = "can_go_next_use_quey_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_QUEY_KEY],
         queryFn: async () => narration.canContinue && !narration.isRequiredInput,
     });
 }
@@ -104,7 +103,7 @@ export function useQueryNarrativeHistory({ searchString }: { searchString?: stri
     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_QUEY_KEY],
         queryFn: async () => {
             const promises = stepHistory.narrativeHistory.map(async (step) => {
                 const character = step.dialogue?.character;

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/src/routes/game/narration.tsx

@@ -1,5 +1,5 @@
-import { NarrationScreen } from "@/components/scrrens/narration";
-import { NarrationClickOverlay } from "@/components/scrrens/narration/click-overlay";
+import { NarrationScreen } from "@/components/screens/narration";
+import { NarrationClickOverlay } from "@/components/screens/narration/click-overlay";
 import { useNarrationHotkeys } from "@/lib/hooks/hotkeys-hooks";
 import { useSkipAutoDetector } from "@/lib/hooks/narration-hooks";
 import { createFileRoute } from "@tanstack/react-router";

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/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,7 +5,7 @@ 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,

package/{template-react-vite-muijoy-ink/src/components/scrrens → 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/scrrens/narration/narration-cards";
+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/src/components/scrrens → 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,7 +2,7 @@ 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,

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-tauri/src/lib/query/interface-query.ts → template-react-vite-muijoy-ink-tauri/src/lib/query/narration-query.ts}

@@ -1,13 +1,12 @@
+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";
 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_QUEY_KEY],
         queryFn: async () => stepHistory.canGoBack,
     });
 }
@@ -16,7 +15,7 @@ const CHOICE_MENU_OPTIONS_USE_QUEY_KEY = "choice_menu_options_use_quey_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_QUEY_KEY],
         queryFn: async () =>
             narration.choices?.map((option) => ({
                 ...option,
@@ -31,7 +30,7 @@ export function useQueryChoiceMenuOptions() {
 const INPUT_VALUE_USE_QUEY_KEY = "input_value_use_quey_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_QUEY_KEY],
         queryFn: async () => ({
             isRequired: narration.isRequiredInput,
             type: narration.inputType,
@@ -51,7 +50,7 @@ export function useQueryDialogue() {
     const queryClient = useQueryClient();
 
     return useQuery<DialogueModel>({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, DIALOGUE_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, DIALOGUE_USE_QUEY_KEY],
         queryFn: async ({ queryKey }) => {
             const dialogue = narration.dialogue;
             let text = dialogue?.text;
@@ -93,7 +92,7 @@ export function useQueryDialogue() {
 const CAN_GO_NEXT_USE_QUEY_KEY = "can_go_next_use_quey_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_QUEY_KEY],
         queryFn: async () => narration.canContinue && !narration.isRequiredInput,
     });
 }
@@ -104,7 +103,7 @@ export function useQueryNarrativeHistory({ searchString }: { searchString?: stri
     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_QUEY_KEY],
         queryFn: async () => {
             const promises = stepHistory.narrativeHistory.map(async (step) => {
                 const character = step.dialogue?.character;

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-ink-tauri/src/routes/game/narration.tsx

@@ -1,5 +1,5 @@
-import { NarrationScreen } from "@/components/scrrens/narration";
-import { NarrationClickOverlay } from "@/components/scrrens/narration/click-overlay";
+import { NarrationScreen } from "@/components/screens/narration";
+import { NarrationClickOverlay } from "@/components/screens/narration/click-overlay";
 import { useNarrationHotkeys } from "@/lib/hooks/hotkeys-hooks";
 import { useSkipAutoDetector } from "@/lib/hooks/narration-hooks";
 import { createFileRoute } from "@tanstack/react-router";

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/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-tauri/src/components/quick-tools.tsx

@@ -5,7 +5,7 @@ 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,

package/template-react-vite-muijoy-tauri/src/components/{scrrens → screens}/narration/index.tsx

@@ -1,7 +1,7 @@
 import { ChoiceMenu } from "@/components/menus/choice-menus";
-import { NarrationCards } from "@/components/scrrens/narration/narration-cards";
+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/scrrens → template-react-vite-muijoy-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-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-tauri/src/lib/hooks/hotkeys-hooks.ts

@@ -2,7 +2,7 @@ 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,

package/template-react-vite-muijoy-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/src/lib/query/interface-query.ts → template-react-vite-muijoy-tauri/src/lib/query/narration-query.ts}

@@ -1,13 +1,12 @@
+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";
 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_QUEY_KEY],
         queryFn: async () => stepHistory.canGoBack,
     });
 }
@@ -16,7 +15,7 @@ const CHOICE_MENU_OPTIONS_USE_QUEY_KEY = "choice_menu_options_use_quey_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_QUEY_KEY],
         queryFn: async () =>
             narration.choices?.map((option) => ({
                 ...option,
@@ -31,7 +30,7 @@ export function useQueryChoiceMenuOptions() {
 const INPUT_VALUE_USE_QUEY_KEY = "input_value_use_quey_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_QUEY_KEY],
         queryFn: async () => ({
             isRequired: narration.isRequiredInput,
             type: narration.inputType,
@@ -51,7 +50,7 @@ export function useQueryDialogue() {
     const queryClient = useQueryClient();
 
     return useQuery<DialogueModel>({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, DIALOGUE_USE_QUEY_KEY],
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, DIALOGUE_USE_QUEY_KEY],
         queryFn: async ({ queryKey }) => {
             const dialogue = narration.dialogue;
             let text = dialogue?.text;
@@ -93,7 +92,7 @@ export function useQueryDialogue() {
 const CAN_GO_NEXT_USE_QUEY_KEY = "can_go_next_use_quey_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_QUEY_KEY],
         queryFn: async () => narration.canContinue && !narration.isRequiredInput,
     });
 }
@@ -104,7 +103,7 @@ export function useQueryNarrativeHistory({ searchString }: { searchString?: stri
     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_QUEY_KEY],
         queryFn: async () => {
             const promises = stepHistory.narrativeHistory.map(async (step) => {
                 const character = step.dialogue?.character;

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

@@ -2,10 +2,10 @@ 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 { 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";
@@ -30,7 +30,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/routes/game/narration.tsx

@@ -1,5 +1,5 @@
-import { NarrationScreen } from "@/components/scrrens/narration";
-import { NarrationClickOverlay } from "@/components/scrrens/narration/click-overlay";
+import { NarrationScreen } from "@/components/screens/narration";
+import { NarrationClickOverlay } from "@/components/screens/narration/click-overlay";
 import { useNarrationHotkeys } from "@/lib/hooks/hotkeys-hooks";
 import { useSkipAutoDetector } from "@/lib/hooks/narration-hooks";
 import { createFileRoute } from "@tanstack/react-router";