create-pixi-vn 2.0.1 → 2.0.2

package/package.json

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

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

@@ -25,6 +25,7 @@
         "@tanstack/react-store": "latest",
         "@tanstack/router-plugin": "latest",
         "@tanstack/store": "latest",
+        "@unpic/react": "^1.0.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.6.0",
@@ -6902,6 +6903,34 @@
       "integrity": "sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==",
       "license": "ISC"
     },
+    "node_modules/@unpic/core": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@unpic/core/-/core-1.0.3.tgz",
+      "integrity": "sha512-aum9YNVUGso7MjGLD0Rp/08kywCGLqZ03/q6VQBFFakDBOXWEc8D4kPGcZ8v5wEnGRex3lE+++bOuucBp3KJ/w==",
+      "license": "MIT",
+      "dependencies": {
+        "unpic": "^4.2.2"
+      }
+    },
+    "node_modules/@unpic/react": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@unpic/react/-/react-1.0.2.tgz",
+      "integrity": "sha512-5RmRfELwTF8w+4zjtQGqjpvX+RU2VLvis3xDCS1O2uWk0PZN2cvatL+3/KAR3mshAuRrkFGTX1XwyAezSXaoCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unpic/core": "^1.0.3"
+      },
+      "peerDependencies": {
+        "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "next": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vite-pwa/assets-generator": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@vite-pwa/assets-generator/-/assets-generator-1.0.2.tgz",
@@ -16982,6 +17011,12 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/unpic": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/unpic/-/unpic-4.2.2.tgz",
+      "integrity": "sha512-z6T2ScMgRV2y2H8MwwhY5xHZWXhUx/YxtOCGJwfURSl7ypVy4HpLIMWoIZKnnxQa/RKzM0kg8hUh0paIrpLfvw==",
+      "license": "MIT"
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

package/template-react-vite-muijoy/package.json

@@ -34,6 +34,7 @@
     "@tanstack/react-store": "latest",
     "@tanstack/router-plugin": "latest",
     "@tanstack/store": "latest",
+    "@unpic/react": "^1.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",

package/template-react-vite-muijoy/src/components/menus/save-menu/save-slots.tsx

@@ -1,5 +1,6 @@
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
+import { Image } from "@/components/ui/image";
 import { Skeleton } from "@/components/ui/skeleton";
 import { overlayTextShadowClass } from "@/constants";
 import { useSaveActions } from "@/lib/hooks/save-hooks";
@@ -49,7 +50,7 @@ export function SaveSlot({ saveId }: { saveId: number }) {
             className="m-2 overflow-hidden sm:m-4 md:m-2 lg:m-4 cursor-pointer"
             onClick={() => handleLoad({ ...saveData, id: saveId })}
         >
-            <img
+            <Image
                 src={saveData.image}
                 alt={saveData.name}
                 className="absolute inset-0 size-full object-contain rounded-lg"

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

@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/item";
 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 { cn } from "@/lib/utils";
 import { useDebouncedValue } from "@tanstack/react-pacer";
@@ -20,6 +21,16 @@ import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 
+function HistoryItemAvatar({ icon, character }: { icon?: string; character: string }) {
+    const resolvedSrc = useImageSrc(icon);
+    return (
+        <Avatar size="sm">
+            <AvatarImage src={resolvedSrc} loading="lazy" />
+            <AvatarFallback>{character.slice(0, 1).toUpperCase()}</AvatarFallback>
+        </Avatar>
+    );
+}
+
 export function HistoryList({ searchString }: { searchString?: string }) {
     const { data = [] } = useQueryNarrativeHistory({ searchString });
 
@@ -31,12 +42,10 @@ export function HistoryList({ searchString }: { searchString?: string }) {
                     <Item key={key} variant="outline">
                         {item.character && (
                             <ItemMedia variant="image">
-                                <Avatar size="sm">
-                                    <AvatarImage src={item.icon} />
-                                    <AvatarFallback>
-                                        {item.character?.slice(0, 1).toUpperCase() ?? "?"}
-                                    </AvatarFallback>
-                                </Avatar>
+                                <HistoryItemAvatar
+                                    icon={item.icon}
+                                    character={item.character}
+                                />
                             </ItemMedia>
                         )}
                         <ItemContent

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

@@ -1,5 +1,5 @@
 import { ChoiceMenu } from "@/components/menus/choice-menus";
-import { NarrationCards } from "@/components/menus/narration/narration-cards";
+import { NarrationCards } from "@/components/scrrens/narration/narration-cards";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { useQueryDialogue } from "@/lib/query/interface-query";
 

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

@@ -1,7 +1,8 @@
 import { AnimatedDots } from "@/components/loading";
-import { QuickTools } from "@/components/menus/quick-tools";
+import { QuickTools } from "@/components/quick-tools";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Card, CardContent } from "@/components/ui/card";
+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";
@@ -127,7 +128,7 @@ export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement
 export function CharacterIcon({ alt, icon }: { icon: string; alt: string }) {
     return (
         <AspectRatio ratio={16 / 9}>
-            <img src={icon} loading="lazy" alt={alt} className="h-full w-full object-cover" />
+            <Image src={icon} alt={alt} className="h-full w-full object-cover" />
         </AspectRatio>
     );
 }

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

@@ -0,0 +1,50 @@
+import { getPixiJSAsset } from "@/lib/utils/assets-utility";
+import { Image as UnpicImage } from "@unpic/react";
+import type * as React from "react";
+import { useMemo } from "react";
+
+export function Image({
+    src,
+    loading = "lazy",
+    width,
+    height,
+    ...props
+}: React.ComponentProps<"img">) {
+    const resolvedSrc = useMemo(() => {
+        if (!src) {
+            return undefined;
+        }
+        return getPixiJSAsset(src);
+    }, [src]);
+
+    if (!resolvedSrc) {
+        return null;
+    }
+
+    const parsedWidth =
+        typeof width === "number" ? width : width ? Number.parseFloat(width) : undefined;
+    const parsedHeight =
+        typeof height === "number" ? height : height ? Number.parseFloat(height) : undefined;
+
+    if (
+        parsedWidth !== undefined &&
+        parsedHeight !== undefined &&
+        Number.isFinite(parsedWidth) &&
+        Number.isFinite(parsedHeight) &&
+        parsedWidth > 0 &&
+        parsedHeight > 0
+    ) {
+        return (
+            <UnpicImage
+                src={resolvedSrc}
+                width={parsedWidth}
+                height={parsedHeight}
+                layout="constrained"
+                loading={loading}
+                {...props}
+            />
+        );
+    }
+
+    return <UnpicImage src={resolvedSrc} layout="fullWidth" loading={loading} {...props} />;
+}

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

@@ -0,0 +1,11 @@
+import { getPixiJSAsset } from "@/lib/utils/assets-utility";
+import { useMemo } from "react";
+
+export function useImageSrc(src?: string | null): string | undefined {
+    return useMemo(() => {
+        if (!src) {
+            return undefined;
+        }
+        return getPixiJSAsset(src);
+    }, [src]);
+}

package/template-react-vite-muijoy/src/routes/game/narration.tsx

@@ -1,5 +1,5 @@
-import { NarrationScreen } from "@/components/menus/narration";
-import { NarrationClickOverlay } from "@/components/menus/narration/click-overlay";
+import { NarrationScreen } from "@/components/scrrens/narration";
+import { NarrationClickOverlay } from "@/components/scrrens/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/src/routes/game.tsx

@@ -1,5 +1,5 @@
-import { QuickActionsWheel } from "@/components/menus/quick-actions-wheel";
 import { InputRequestDialog } from "@/components/modals/input-request-dialogues";
+import { QuickActionsWheel } from "@/components/modals/quick-actions-wheel";
 import { useGameHotkeys } from "@/lib/hooks/hotkeys-hooks";
 import { usePauseGameWhenMenuIsOpen } from "@/lib/hooks/pause-game-hooks";
 import { createFileRoute, Outlet } from "@tanstack/react-router";

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

@@ -26,6 +26,7 @@
         "@tanstack/react-store": "latest",
         "@tanstack/router-plugin": "latest",
         "@tanstack/store": "latest",
+        "@unpic/react": "^1.0.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.6.0",
@@ -7119,6 +7120,34 @@
       "integrity": "sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==",
       "license": "ISC"
     },
+    "node_modules/@unpic/core": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@unpic/core/-/core-1.0.3.tgz",
+      "integrity": "sha512-aum9YNVUGso7MjGLD0Rp/08kywCGLqZ03/q6VQBFFakDBOXWEc8D4kPGcZ8v5wEnGRex3lE+++bOuucBp3KJ/w==",
+      "license": "MIT",
+      "dependencies": {
+        "unpic": "^4.2.2"
+      }
+    },
+    "node_modules/@unpic/react": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@unpic/react/-/react-1.0.2.tgz",
+      "integrity": "sha512-5RmRfELwTF8w+4zjtQGqjpvX+RU2VLvis3xDCS1O2uWk0PZN2cvatL+3/KAR3mshAuRrkFGTX1XwyAezSXaoCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unpic/core": "^1.0.3"
+      },
+      "peerDependencies": {
+        "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "next": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vite-pwa/assets-generator": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@vite-pwa/assets-generator/-/assets-generator-1.0.2.tgz",
@@ -17208,6 +17237,12 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/unpic": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/unpic/-/unpic-4.2.2.tgz",
+      "integrity": "sha512-z6T2ScMgRV2y2H8MwwhY5xHZWXhUx/YxtOCGJwfURSl7ypVy4HpLIMWoIZKnnxQa/RKzM0kg8hUh0paIrpLfvw==",
+      "license": "MIT"
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

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

@@ -35,6 +35,7 @@
     "@tanstack/react-store": "latest",
     "@tanstack/router-plugin": "latest",
     "@tanstack/store": "latest",
+    "@unpic/react": "^1.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",

package/template-react-vite-muijoy-ink/src/components/menus/save-menu/save-slots.tsx

@@ -1,5 +1,6 @@
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
+import { Image } from "@/components/ui/image";
 import { Skeleton } from "@/components/ui/skeleton";
 import { overlayTextShadowClass } from "@/constants";
 import { useSaveActions } from "@/lib/hooks/save-hooks";
@@ -49,7 +50,7 @@ export function SaveSlot({ saveId }: { saveId: number }) {
             className="m-2 overflow-hidden sm:m-4 md:m-2 lg:m-4 cursor-pointer"
             onClick={() => handleLoad({ ...saveData, id: saveId })}
         >
-            <img
+            <Image
                 src={saveData.image}
                 alt={saveData.name}
                 className="absolute inset-0 size-full object-contain rounded-lg"

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

@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/item";
 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 { cn } from "@/lib/utils";
 import { useDebouncedValue } from "@tanstack/react-pacer";
@@ -20,6 +21,16 @@ import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 
+function HistoryItemAvatar({ icon, character }: { icon?: string; character: string }) {
+    const resolvedSrc = useImageSrc(icon);
+    return (
+        <Avatar size="sm">
+            <AvatarImage src={resolvedSrc} loading="lazy" />
+            <AvatarFallback>{character.slice(0, 1).toUpperCase()}</AvatarFallback>
+        </Avatar>
+    );
+}
+
 export function HistoryList({ searchString }: { searchString?: string }) {
     const { data = [] } = useQueryNarrativeHistory({ searchString });
 
@@ -31,12 +42,10 @@ export function HistoryList({ searchString }: { searchString?: string }) {
                     <Item key={key} variant="outline">
                         {item.character && (
                             <ItemMedia variant="image">
-                                <Avatar size="sm">
-                                    <AvatarImage src={item.icon} />
-                                    <AvatarFallback>
-                                        {item.character?.slice(0, 1).toUpperCase() ?? "?"}
-                                    </AvatarFallback>
-                                </Avatar>
+                                <HistoryItemAvatar
+                                    icon={item.icon}
+                                    character={item.character}
+                                />
                             </ItemMedia>
                         )}
                         <ItemContent

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

@@ -1,5 +1,5 @@
 import { ChoiceMenu } from "@/components/menus/choice-menus";
-import { NarrationCards } from "@/components/menus/narration/narration-cards";
+import { NarrationCards } from "@/components/scrrens/narration/narration-cards";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { useQueryDialogue } from "@/lib/query/interface-query";
 

package/template-react-vite-muijoy-ink/src/components/{menus → scrrens}/narration/narration-cards.tsx

@@ -1,7 +1,8 @@
 import { AnimatedDots } from "@/components/loading";
-import { QuickTools } from "@/components/menus/quick-tools";
+import { QuickTools } from "@/components/quick-tools";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Card, CardContent } from "@/components/ui/card";
+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";
@@ -127,7 +128,7 @@ export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement
 export function CharacterIcon({ alt, icon }: { icon: string; alt: string }) {
     return (
         <AspectRatio ratio={16 / 9}>
-            <img src={icon} loading="lazy" alt={alt} className="h-full w-full object-cover" />
+            <Image src={icon} alt={alt} className="h-full w-full object-cover" />
         </AspectRatio>
     );
 }

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

@@ -0,0 +1,50 @@
+import { getPixiJSAsset } from "@/lib/utils/assets-utility";
+import { Image as UnpicImage } from "@unpic/react";
+import type * as React from "react";
+import { useMemo } from "react";
+
+export function Image({
+    src,
+    loading = "lazy",
+    width,
+    height,
+    ...props
+}: React.ComponentProps<"img">) {
+    const resolvedSrc = useMemo(() => {
+        if (!src) {
+            return undefined;
+        }
+        return getPixiJSAsset(src);
+    }, [src]);
+
+    if (!resolvedSrc) {
+        return null;
+    }
+
+    const parsedWidth =
+        typeof width === "number" ? width : width ? Number.parseFloat(width) : undefined;
+    const parsedHeight =
+        typeof height === "number" ? height : height ? Number.parseFloat(height) : undefined;
+
+    if (
+        parsedWidth !== undefined &&
+        parsedHeight !== undefined &&
+        Number.isFinite(parsedWidth) &&
+        Number.isFinite(parsedHeight) &&
+        parsedWidth > 0 &&
+        parsedHeight > 0
+    ) {
+        return (
+            <UnpicImage
+                src={resolvedSrc}
+                width={parsedWidth}
+                height={parsedHeight}
+                layout="constrained"
+                loading={loading}
+                {...props}
+            />
+        );
+    }
+
+    return <UnpicImage src={resolvedSrc} layout="fullWidth" loading={loading} {...props} />;
+}

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

@@ -0,0 +1,11 @@
+import { getPixiJSAsset } from "@/lib/utils/assets-utility";
+import { useMemo } from "react";
+
+export function useImageSrc(src?: string | null): string | undefined {
+    return useMemo(() => {
+        if (!src) {
+            return undefined;
+        }
+        return getPixiJSAsset(src);
+    }, [src]);
+}

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

@@ -1,5 +1,5 @@
-import { NarrationScreen } from "@/components/menus/narration";
-import { NarrationClickOverlay } from "@/components/menus/narration/click-overlay";
+import { NarrationScreen } from "@/components/scrrens/narration";
+import { NarrationClickOverlay } from "@/components/scrrens/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/routes/game.tsx

@@ -1,5 +1,5 @@
-import { QuickActionsWheel } from "@/components/menus/quick-actions-wheel";
 import { InputRequestDialog } from "@/components/modals/input-request-dialogues";
+import { QuickActionsWheel } from "@/components/modals/quick-actions-wheel";
 import { useGameHotkeys } from "@/lib/hooks/hotkeys-hooks";
 import { usePauseGameWhenMenuIsOpen } from "@/lib/hooks/pause-game-hooks";
 import { createFileRoute, Outlet } from "@tanstack/react-router";

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

@@ -28,6 +28,7 @@
         "@tanstack/store": "latest",
         "@tauri-apps/api": "^2",
         "@tauri-apps/plugin-opener": "^2",
+        "@unpic/react": "^1.0.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.6.0",
@@ -7369,6 +7370,34 @@
       "integrity": "sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==",
       "license": "ISC"
     },
+    "node_modules/@unpic/core": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@unpic/core/-/core-1.0.3.tgz",
+      "integrity": "sha512-aum9YNVUGso7MjGLD0Rp/08kywCGLqZ03/q6VQBFFakDBOXWEc8D4kPGcZ8v5wEnGRex3lE+++bOuucBp3KJ/w==",
+      "license": "MIT",
+      "dependencies": {
+        "unpic": "^4.2.2"
+      }
+    },
+    "node_modules/@unpic/react": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@unpic/react/-/react-1.0.2.tgz",
+      "integrity": "sha512-5RmRfELwTF8w+4zjtQGqjpvX+RU2VLvis3xDCS1O2uWk0PZN2cvatL+3/KAR3mshAuRrkFGTX1XwyAezSXaoCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unpic/core": "^1.0.3"
+      },
+      "peerDependencies": {
+        "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "next": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vite-pwa/assets-generator": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@vite-pwa/assets-generator/-/assets-generator-1.0.2.tgz",
@@ -17458,6 +17487,12 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/unpic": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/unpic/-/unpic-4.2.2.tgz",
+      "integrity": "sha512-z6T2ScMgRV2y2H8MwwhY5xHZWXhUx/YxtOCGJwfURSl7ypVy4HpLIMWoIZKnnxQa/RKzM0kg8hUh0paIrpLfvw==",
+      "license": "MIT"
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

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

@@ -42,6 +42,7 @@
     "@tanstack/store": "latest",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",
+    "@unpic/react": "^1.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",

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

@@ -1,5 +1,6 @@
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
+import { Image } from "@/components/ui/image";
 import { Skeleton } from "@/components/ui/skeleton";
 import { overlayTextShadowClass } from "@/constants";
 import { useSaveActions } from "@/lib/hooks/save-hooks";
@@ -49,7 +50,7 @@ export function SaveSlot({ saveId }: { saveId: number }) {
             className="m-2 overflow-hidden sm:m-4 md:m-2 lg:m-4 cursor-pointer"
             onClick={() => handleLoad({ ...saveData, id: saveId })}
         >
-            <img
+            <Image
                 src={saveData.image}
                 alt={saveData.name}
                 className="absolute inset-0 size-full object-contain rounded-lg"

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

@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/item";
 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 { cn } from "@/lib/utils";
 import { useDebouncedValue } from "@tanstack/react-pacer";
@@ -20,6 +21,16 @@ import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 
+function HistoryItemAvatar({ icon, character }: { icon?: string; character: string }) {
+    const resolvedSrc = useImageSrc(icon);
+    return (
+        <Avatar size="sm">
+            <AvatarImage src={resolvedSrc} loading="lazy" />
+            <AvatarFallback>{character.slice(0, 1).toUpperCase()}</AvatarFallback>
+        </Avatar>
+    );
+}
+
 export function HistoryList({ searchString }: { searchString?: string }) {
     const { data = [] } = useQueryNarrativeHistory({ searchString });
 
@@ -31,12 +42,10 @@ export function HistoryList({ searchString }: { searchString?: string }) {
                     <Item key={key} variant="outline">
                         {item.character && (
                             <ItemMedia variant="image">
-                                <Avatar size="sm">
-                                    <AvatarImage src={item.icon} />
-                                    <AvatarFallback>
-                                        {item.character?.slice(0, 1).toUpperCase() ?? "?"}
-                                    </AvatarFallback>
-                                </Avatar>
+                                <HistoryItemAvatar
+                                    icon={item.icon}
+                                    character={item.character}
+                                />
                             </ItemMedia>
                         )}
                         <ItemContent

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

@@ -1,5 +1,5 @@
 import { ChoiceMenu } from "@/components/menus/choice-menus";
-import { NarrationCards } from "@/components/menus/narration/narration-cards";
+import { NarrationCards } from "@/components/scrrens/narration/narration-cards";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { useQueryDialogue } from "@/lib/query/interface-query";
 

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

@@ -1,7 +1,8 @@
 import { AnimatedDots } from "@/components/loading";
-import { QuickTools } from "@/components/menus/quick-tools";
+import { QuickTools } from "@/components/quick-tools";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Card, CardContent } from "@/components/ui/card";
+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";
@@ -127,7 +128,7 @@ export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement
 export function CharacterIcon({ alt, icon }: { icon: string; alt: string }) {
     return (
         <AspectRatio ratio={16 / 9}>
-            <img src={icon} loading="lazy" alt={alt} className="h-full w-full object-cover" />
+            <Image src={icon} alt={alt} className="h-full w-full object-cover" />
         </AspectRatio>
     );
 }

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

@@ -0,0 +1,50 @@
+import { getPixiJSAsset } from "@/lib/utils/assets-utility";
+import { Image as UnpicImage } from "@unpic/react";
+import type * as React from "react";
+import { useMemo } from "react";
+
+export function Image({
+    src,
+    loading = "lazy",
+    width,
+    height,
+    ...props
+}: React.ComponentProps<"img">) {
+    const resolvedSrc = useMemo(() => {
+        if (!src) {
+            return undefined;
+        }
+        return getPixiJSAsset(src);
+    }, [src]);
+
+    if (!resolvedSrc) {
+        return null;
+    }
+
+    const parsedWidth =
+        typeof width === "number" ? width : width ? Number.parseFloat(width) : undefined;
+    const parsedHeight =
+        typeof height === "number" ? height : height ? Number.parseFloat(height) : undefined;
+
+    if (
+        parsedWidth !== undefined &&
+        parsedHeight !== undefined &&
+        Number.isFinite(parsedWidth) &&
+        Number.isFinite(parsedHeight) &&
+        parsedWidth > 0 &&
+        parsedHeight > 0
+    ) {
+        return (
+            <UnpicImage
+                src={resolvedSrc}
+                width={parsedWidth}
+                height={parsedHeight}
+                layout="constrained"
+                loading={loading}
+                {...props}
+            />
+        );
+    }
+
+    return <UnpicImage src={resolvedSrc} layout="fullWidth" loading={loading} {...props} />;
+}

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

@@ -0,0 +1,11 @@
+import { getPixiJSAsset } from "@/lib/utils/assets-utility";
+import { useMemo } from "react";
+
+export function useImageSrc(src?: string | null): string | undefined {
+    return useMemo(() => {
+        if (!src) {
+            return undefined;
+        }
+        return getPixiJSAsset(src);
+    }, [src]);
+}

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

@@ -1,5 +1,5 @@
-import { NarrationScreen } from "@/components/menus/narration";
-import { NarrationClickOverlay } from "@/components/menus/narration/click-overlay";
+import { NarrationScreen } from "@/components/scrrens/narration";
+import { NarrationClickOverlay } from "@/components/scrrens/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/src/routes/game.tsx

@@ -1,5 +1,5 @@
-import { QuickActionsWheel } from "@/components/menus/quick-actions-wheel";
 import { InputRequestDialog } from "@/components/modals/input-request-dialogues";
+import { QuickActionsWheel } from "@/components/modals/quick-actions-wheel";
 import { useGameHotkeys } from "@/lib/hooks/hotkeys-hooks";
 import { usePauseGameWhenMenuIsOpen } from "@/lib/hooks/pause-game-hooks";
 import { createFileRoute, Outlet } from "@tanstack/react-router";

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

@@ -27,6 +27,7 @@
         "@tanstack/store": "latest",
         "@tauri-apps/api": "^2",
         "@tauri-apps/plugin-opener": "^2",
+        "@unpic/react": "^1.0.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.6.0",
@@ -7152,6 +7153,34 @@
       "integrity": "sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==",
       "license": "ISC"
     },
+    "node_modules/@unpic/core": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@unpic/core/-/core-1.0.3.tgz",
+      "integrity": "sha512-aum9YNVUGso7MjGLD0Rp/08kywCGLqZ03/q6VQBFFakDBOXWEc8D4kPGcZ8v5wEnGRex3lE+++bOuucBp3KJ/w==",
+      "license": "MIT",
+      "dependencies": {
+        "unpic": "^4.2.2"
+      }
+    },
+    "node_modules/@unpic/react": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@unpic/react/-/react-1.0.2.tgz",
+      "integrity": "sha512-5RmRfELwTF8w+4zjtQGqjpvX+RU2VLvis3xDCS1O2uWk0PZN2cvatL+3/KAR3mshAuRrkFGTX1XwyAezSXaoCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unpic/core": "^1.0.3"
+      },
+      "peerDependencies": {
+        "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "next": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vite-pwa/assets-generator": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@vite-pwa/assets-generator/-/assets-generator-1.0.2.tgz",
@@ -17232,6 +17261,12 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/unpic": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/unpic/-/unpic-4.2.2.tgz",
+      "integrity": "sha512-z6T2ScMgRV2y2H8MwwhY5xHZWXhUx/YxtOCGJwfURSl7ypVy4HpLIMWoIZKnnxQa/RKzM0kg8hUh0paIrpLfvw==",
+      "license": "MIT"
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

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

@@ -41,6 +41,7 @@
     "@tanstack/store": "latest",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",
+    "@unpic/react": "^1.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",

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

@@ -1,5 +1,6 @@
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
+import { Image } from "@/components/ui/image";
 import { Skeleton } from "@/components/ui/skeleton";
 import { overlayTextShadowClass } from "@/constants";
 import { useSaveActions } from "@/lib/hooks/save-hooks";
@@ -49,7 +50,7 @@ export function SaveSlot({ saveId }: { saveId: number }) {
             className="m-2 overflow-hidden sm:m-4 md:m-2 lg:m-4 cursor-pointer"
             onClick={() => handleLoad({ ...saveData, id: saveId })}
         >
-            <img
+            <Image
                 src={saveData.image}
                 alt={saveData.name}
                 className="absolute inset-0 size-full object-contain rounded-lg"

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

@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/item";
 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 { cn } from "@/lib/utils";
 import { useDebouncedValue } from "@tanstack/react-pacer";
@@ -20,6 +21,16 @@ import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 
+function HistoryItemAvatar({ icon, character }: { icon?: string; character: string }) {
+    const resolvedSrc = useImageSrc(icon);
+    return (
+        <Avatar size="sm">
+            <AvatarImage src={resolvedSrc} loading="lazy" />
+            <AvatarFallback>{character.slice(0, 1).toUpperCase()}</AvatarFallback>
+        </Avatar>
+    );
+}
+
 export function HistoryList({ searchString }: { searchString?: string }) {
     const { data = [] } = useQueryNarrativeHistory({ searchString });
 
@@ -31,12 +42,10 @@ export function HistoryList({ searchString }: { searchString?: string }) {
                     <Item key={key} variant="outline">
                         {item.character && (
                             <ItemMedia variant="image">
-                                <Avatar size="sm">
-                                    <AvatarImage src={item.icon} />
-                                    <AvatarFallback>
-                                        {item.character?.slice(0, 1).toUpperCase() ?? "?"}
-                                    </AvatarFallback>
-                                </Avatar>
+                                <HistoryItemAvatar
+                                    icon={item.icon}
+                                    character={item.character}
+                                />
                             </ItemMedia>
                         )}
                         <ItemContent

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

@@ -1,5 +1,5 @@
 import { ChoiceMenu } from "@/components/menus/choice-menus";
-import { NarrationCards } from "@/components/menus/narration/narration-cards";
+import { NarrationCards } from "@/components/scrrens/narration/narration-cards";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { useQueryDialogue } from "@/lib/query/interface-query";
 

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

@@ -1,7 +1,8 @@
 import { AnimatedDots } from "@/components/loading";
-import { QuickTools } from "@/components/menus/quick-tools";
+import { QuickTools } from "@/components/quick-tools";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Card, CardContent } from "@/components/ui/card";
+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";
@@ -127,7 +128,7 @@ export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement
 export function CharacterIcon({ alt, icon }: { icon: string; alt: string }) {
     return (
         <AspectRatio ratio={16 / 9}>
-            <img src={icon} loading="lazy" alt={alt} className="h-full w-full object-cover" />
+            <Image src={icon} alt={alt} className="h-full w-full object-cover" />
         </AspectRatio>
     );
 }

package/template-react-vite-muijoy-tauri/src/components/ui/image.tsx

@@ -0,0 +1,50 @@
+import { getPixiJSAsset } from "@/lib/utils/assets-utility";
+import { Image as UnpicImage } from "@unpic/react";
+import type * as React from "react";
+import { useMemo } from "react";
+
+export function Image({
+    src,
+    loading = "lazy",
+    width,
+    height,
+    ...props
+}: React.ComponentProps<"img">) {
+    const resolvedSrc = useMemo(() => {
+        if (!src) {
+            return undefined;
+        }
+        return getPixiJSAsset(src);
+    }, [src]);
+
+    if (!resolvedSrc) {
+        return null;
+    }
+
+    const parsedWidth =
+        typeof width === "number" ? width : width ? Number.parseFloat(width) : undefined;
+    const parsedHeight =
+        typeof height === "number" ? height : height ? Number.parseFloat(height) : undefined;
+
+    if (
+        parsedWidth !== undefined &&
+        parsedHeight !== undefined &&
+        Number.isFinite(parsedWidth) &&
+        Number.isFinite(parsedHeight) &&
+        parsedWidth > 0 &&
+        parsedHeight > 0
+    ) {
+        return (
+            <UnpicImage
+                src={resolvedSrc}
+                width={parsedWidth}
+                height={parsedHeight}
+                layout="constrained"
+                loading={loading}
+                {...props}
+            />
+        );
+    }
+
+    return <UnpicImage src={resolvedSrc} layout="fullWidth" loading={loading} {...props} />;
+}

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

@@ -0,0 +1,11 @@
+import { getPixiJSAsset } from "@/lib/utils/assets-utility";
+import { useMemo } from "react";
+
+export function useImageSrc(src?: string | null): string | undefined {
+    return useMemo(() => {
+        if (!src) {
+            return undefined;
+        }
+        return getPixiJSAsset(src);
+    }, [src]);
+}

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

@@ -1,5 +1,5 @@
-import { NarrationScreen } from "@/components/menus/narration";
-import { NarrationClickOverlay } from "@/components/menus/narration/click-overlay";
+import { NarrationScreen } from "@/components/scrrens/narration";
+import { NarrationClickOverlay } from "@/components/scrrens/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/routes/game.tsx

@@ -1,5 +1,5 @@
-import { QuickActionsWheel } from "@/components/menus/quick-actions-wheel";
 import { InputRequestDialog } from "@/components/modals/input-request-dialogues";
+import { QuickActionsWheel } from "@/components/modals/quick-actions-wheel";
 import { useGameHotkeys } from "@/lib/hooks/hotkeys-hooks";
 import { usePauseGameWhenMenuIsOpen } from "@/lib/hooks/pause-game-hooks";
 import { createFileRoute, Outlet } from "@tanstack/react-router";