create-pixi-vn 2.0.2 → 2.0.4

package/index.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-import './dist/index.mjs'
+import "./dist/index.mjs";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-pixi-vn",
   "description": "Create a new Pixi’VN project",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "type": "module",
   "license": "GPL-3.0",
   "author": "DRincs-Productions",
@@ -15,7 +15,6 @@
     "template-react-vite-muijoy",
     "template-react-vite-muijoy-ink",
     "template-react-vite-muijoy-ink-tauri",
-    "template-react-vite-muijoy-electron",
     "template-react-vite-muijoy-tauri",
     "template-story-react-vite-muijoy",
     "template-story-react-vite-muijoy-ink",
@@ -33,7 +32,8 @@
     "dev": "unbuild --stub",
     "build": "unbuild",
     "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "format": "biome format --write"
   },
   "engines": {
     "node": "^18.0.0 || >=20.0.0"
@@ -45,9 +45,10 @@
   "bugs": {
     "url": "https://github.com/DRincs-Productions/pixi-vn/issues"
   },
-  "homepage": "https://pixi-vn.web.app/",
+  "homepage": "https://pixi-vn.com/",
   "funding": "https://github.com/DRincs-Productions/pixi-vn?sponsor=1",
   "devDependencies": {
+    "@biomejs/biome": "latest",
     "@clack/prompts": "^1.0.0",
     "@types/minimist": "^1.2.5",
     "@types/node": "^25.9.1",

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

@@ -10,7 +10,7 @@
       "license": "GPL-3.0",
       "dependencies": {
         "@base-ui/react": "^1.5.0",
-        "@drincs/pixi-vn": "^1.8.11",
+        "@drincs/pixi-vn": "^1.8.12",
         "@drincs/pixi-vn-spine": "^0.2.1",
         "@tailwindcss/vite": "^4.3.0",
         "@tanstack/react-devtools": "^0.10.5",
@@ -2113,9 +2113,9 @@
       }
     },
     "node_modules/@drincs/pixi-vn": {
-      "version": "1.8.11",
-      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.11.tgz",
-      "integrity": "sha512-T7FuV/v8qevXq+edFdSLQKyJnQrRhDN4PUzlqw5qe0tDIXycTbr/MMnBNEYRuBMEYUMtoYZb0tmKHY/5Xh8q0Q==",
+      "version": "1.8.12",
+      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.12.tgz",
+      "integrity": "sha512-1Ff8mZ+hYQzpA2F/LAH37f6cfEewJcYtE4hjLcJRQCv2ql+ti12JAAzCUItopUt8VWEKFGY43J8XILAc66wfjA==",
       "license": "LGPL-2.1",
       "workspaces": [
         "sandbox"

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

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
-    "@drincs/pixi-vn": "^1.8.11",
+    "@drincs/pixi-vn": "^1.8.13",
     "@drincs/pixi-vn-spine": "^0.2.1",
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/react-devtools": "^0.10.5",

package/template-react-vite-muijoy/src/assets/ink-manifest.gen.json

@@ -0,0 +1 @@
+[]

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

@@ -4,7 +4,6 @@ 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 { startLabel } from "@/content/labels/start.label";
 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";
@@ -144,7 +143,7 @@ export function MainMenu() {
                         onClick={async () => {
                             setLoading(true);
                             await navigate({ to: "/game/narration" });
-                            Game.start(startLabel, gameProps)
+                            Game.start("start", gameProps)
                                 .then(() =>
                                     queryClient.invalidateQueries({
                                         queryKey: [INTERFACE_DATA_USE_QUERY_KEY],

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

@@ -52,9 +52,9 @@ export function SaveSlot({ saveId }: { saveId: number }) {
         >
             <Image
                 src={saveData.image}
+                layout="fullWidth"
                 alt={saveData.name}
-                className="absolute inset-0 size-full object-contain rounded-lg"
-                style={{ pointerEvents: "none", userSelect: "none" }}
+                className="absolute inset-0 size-full object-contain rounded-lg pointer-events-none select-none"
             />
             {/* top-left metadata */}
             <div className="absolute top-2.5 left-2.5 flex flex-col gap-0.5 pointer-events-none">

package/template-react-vite-muijoy/src/components/scrrens/narration/narration-cards.tsx

@@ -128,7 +128,7 @@ export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement
 export function CharacterIcon({ alt, icon }: { icon: string; alt: string }) {
     return (
         <AspectRatio ratio={16 / 9}>
-            <Image src={icon} alt={alt} className="h-full w-full object-cover" />
+            <Image src={icon} layout="fullWidth" alt={alt} className="h-full w-full object-cover" />
         </AspectRatio>
     );
 }

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

@@ -1,50 +1,19 @@
-import { getPixiJSAsset } from "@/lib/utils/assets-utility";
-import { Image as UnpicImage } from "@unpic/react";
-import type * as React from "react";
-import { useMemo } from "react";
+import { useImageSrc } from "@/lib/hooks/image-hooks";
+import { Image as UnpicImage, type ImageProps } from "@unpic/react";
+import { ImageOff } from "lucide-react";
 
 export function Image({
     src,
     loading = "lazy",
-    width,
-    height,
     ...props
-}: React.ComponentProps<"img">) {
-    const resolvedSrc = useMemo(() => {
-        if (!src) {
-            return undefined;
-        }
-        return getPixiJSAsset(src);
-    }, [src]);
+}: Omit<ImageProps, "src"> & { src?: ImageProps["src"] | null }) {
+    const resolvedSrc = useImageSrc(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}
-            />
+            <ImageOff aria-label={props.alt ?? "Image unavailable"} className={props.className} />
         );
     }
 
-    return <UnpicImage src={resolvedSrc} layout="fullWidth" loading={loading} {...props} />;
+    return <UnpicImage {...({ src: resolvedSrc, loading, ...props } as ImageProps)} />;
 }

package/template-react-vite-muijoy/src/content/labels/start.label.ts

@@ -1,7 +1,5 @@
 import { BGM_CHANNEL_NAME } from "@/constants";
 import { james, mc, sly, steph, steph_fullname } from "@/content/characters";
-import { animation01 } from "@/content/labels/animations.label";
-import { secondPart } from "@/content/labels/second.label";
 import {
     Assets,
     moveIn,
@@ -489,7 +487,7 @@ export const startLabel = newLabel(
             narration.dialogGlue = true;
             narration.dialogue = `and returns with a HUGE tinfoil-covered platter.`;
             await sound.play("sfx_whoosh", { delay: 0.1 });
-            await narration.call(animation01, props);
+            await narration.call("animation_01", props);
         },
         async () => {
             await showImageContainer("james", [
@@ -555,7 +553,7 @@ export const startLabel = newLabel(
             moveOut("steph", { direction: "left", ease: "easeInOut", duration: 0.5, delay: 0.1 });
             narration.dialogue = `You want continue to the next part?`;
             narration.choices = [
-                newChoiceOption("Yes, I want to continue", secondPart, {}, { type: "jump" }),
+                newChoiceOption("Yes, I want to continue", "second_part", {}, { type: "jump" }),
                 newCloseChoiceOption("No, I want to stop here"),
             ];
         },

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

@@ -0,0 +1,20 @@
+// @ts-nocheck
+/* eslint-disable */
+// noinspection JSUnusedGlobalSymbols
+// This file is auto-generated by @drincs/pixi-vn vite plugin. Do not edit manually.
+declare module "@drincs/pixi-vn/characters" {
+    interface PixivnCharacterIds {
+        "mc": never;
+        "james": never;
+        "steph": never;
+        "sly": never;
+    }
+}
+declare module "@drincs/pixi-vn/narration" {
+    interface PixivnLabelIds {
+        "animation_01": never;
+        "second_part": never;
+        "start": never;
+    }
+}
+export {};

package/template-react-vite-muijoy/vite.config.ts

@@ -35,6 +35,7 @@ export default defineConfig({
             content: "./src/content/index.ts",
             characters: "./src/content/characters.ts",
             labels: "./src/content/labels/*.label.ts",
+            typeFilePath: "./src/pixi-vn-keys.gen.d.ts",
         }),
         VitePWA({
             // generate icons with: npm run icon

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

@@ -2115,9 +2115,9 @@
       }
     },
     "node_modules/@drincs/pixi-vn": {
-      "version": "1.8.11",
-      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.11.tgz",
-      "integrity": "sha512-T7FuV/v8qevXq+edFdSLQKyJnQrRhDN4PUzlqw5qe0tDIXycTbr/MMnBNEYRuBMEYUMtoYZb0tmKHY/5Xh8q0Q==",
+      "version": "1.8.12",
+      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.12.tgz",
+      "integrity": "sha512-1Ff8mZ+hYQzpA2F/LAH37f6cfEewJcYtE4hjLcJRQCv2ql+ti12JAAzCUItopUt8VWEKFGY43J8XILAc66wfjA==",
       "license": "LGPL-2.1",
       "workspaces": [
         "sandbox"

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

@@ -19,8 +19,8 @@
   },
   "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",

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

@@ -52,9 +52,9 @@ export function SaveSlot({ saveId }: { saveId: number }) {
         >
             <Image
                 src={saveData.image}
+                layout="fullWidth"
                 alt={saveData.name}
-                className="absolute inset-0 size-full object-contain rounded-lg"
-                style={{ pointerEvents: "none", userSelect: "none" }}
+                className="absolute inset-0 size-full object-contain rounded-lg pointer-events-none select-none"
             />
             {/* top-left metadata */}
             <div className="absolute top-2.5 left-2.5 flex flex-col gap-0.5 pointer-events-none">

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

@@ -128,7 +128,7 @@ export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement
 export function CharacterIcon({ alt, icon }: { icon: string; alt: string }) {
     return (
         <AspectRatio ratio={16 / 9}>
-            <Image src={icon} alt={alt} className="h-full w-full object-cover" />
+            <Image src={icon} layout="fullWidth" alt={alt} className="h-full w-full object-cover" />
         </AspectRatio>
     );
 }

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

@@ -1,50 +1,19 @@
-import { getPixiJSAsset } from "@/lib/utils/assets-utility";
-import { Image as UnpicImage } from "@unpic/react";
-import type * as React from "react";
-import { useMemo } from "react";
+import { useImageSrc } from "@/lib/hooks/image-hooks";
+import { Image as UnpicImage, type ImageProps } from "@unpic/react";
+import { ImageOff } from "lucide-react";
 
 export function Image({
     src,
     loading = "lazy",
-    width,
-    height,
     ...props
-}: React.ComponentProps<"img">) {
-    const resolvedSrc = useMemo(() => {
-        if (!src) {
-            return undefined;
-        }
-        return getPixiJSAsset(src);
-    }, [src]);
+}: Omit<ImageProps, "src"> & { src?: ImageProps["src"] | null }) {
+    const resolvedSrc = useImageSrc(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}
-            />
+            <ImageOff aria-label={props.alt ?? "Image unavailable"} className={props.className} />
         );
     }
 
-    return <UnpicImage src={resolvedSrc} layout="fullWidth" loading={loading} {...props} />;
+    return <UnpicImage {...({ src: resolvedSrc, loading, ...props } as ImageProps)} />;
 }

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

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

package/template-react-vite-muijoy-ink/vite.config.ts

@@ -36,6 +36,7 @@ export default defineConfig({
             content: "./src/content/index.ts",
             characters: "./src/content/characters.ts",
             labels: "./src/content/labels/*.label.ts",
+            typeFilePath: "./src/pixi-vn-keys.gen.d.ts",
         }),
         vitePluginInk({
             inkGlob: "./ink/**/*.ink",

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

@@ -2119,9 +2119,9 @@
       }
     },
     "node_modules/@drincs/pixi-vn": {
-      "version": "1.8.11",
-      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.11.tgz",
-      "integrity": "sha512-T7FuV/v8qevXq+edFdSLQKyJnQrRhDN4PUzlqw5qe0tDIXycTbr/MMnBNEYRuBMEYUMtoYZb0tmKHY/5Xh8q0Q==",
+      "version": "1.8.12",
+      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.12.tgz",
+      "integrity": "sha512-1Ff8mZ+hYQzpA2F/LAH37f6cfEewJcYtE4hjLcJRQCv2ql+ti12JAAzCUItopUt8VWEKFGY43J8XILAc66wfjA==",
       "license": "LGPL-2.1",
       "workspaces": [
         "sandbox"

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

@@ -24,8 +24,8 @@
   },
   "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",

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

@@ -52,9 +52,9 @@ export function SaveSlot({ saveId }: { saveId: number }) {
         >
             <Image
                 src={saveData.image}
+                layout="fullWidth"
                 alt={saveData.name}
-                className="absolute inset-0 size-full object-contain rounded-lg"
-                style={{ pointerEvents: "none", userSelect: "none" }}
+                className="absolute inset-0 size-full object-contain rounded-lg pointer-events-none select-none"
             />
             {/* top-left metadata */}
             <div className="absolute top-2.5 left-2.5 flex flex-col gap-0.5 pointer-events-none">

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

@@ -128,7 +128,7 @@ export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement
 export function CharacterIcon({ alt, icon }: { icon: string; alt: string }) {
     return (
         <AspectRatio ratio={16 / 9}>
-            <Image src={icon} alt={alt} className="h-full w-full object-cover" />
+            <Image src={icon} layout="fullWidth" alt={alt} className="h-full w-full object-cover" />
         </AspectRatio>
     );
 }

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

@@ -1,50 +1,19 @@
-import { getPixiJSAsset } from "@/lib/utils/assets-utility";
-import { Image as UnpicImage } from "@unpic/react";
-import type * as React from "react";
-import { useMemo } from "react";
+import { useImageSrc } from "@/lib/hooks/image-hooks";
+import { Image as UnpicImage, type ImageProps } from "@unpic/react";
+import { ImageOff } from "lucide-react";
 
 export function Image({
     src,
     loading = "lazy",
-    width,
-    height,
     ...props
-}: React.ComponentProps<"img">) {
-    const resolvedSrc = useMemo(() => {
-        if (!src) {
-            return undefined;
-        }
-        return getPixiJSAsset(src);
-    }, [src]);
+}: Omit<ImageProps, "src"> & { src?: ImageProps["src"] | null }) {
+    const resolvedSrc = useImageSrc(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}
-            />
+            <ImageOff aria-label={props.alt ?? "Image unavailable"} className={props.className} />
         );
     }
 
-    return <UnpicImage src={resolvedSrc} layout="fullWidth" loading={loading} {...props} />;
+    return <UnpicImage {...({ src: resolvedSrc, loading, ...props } as ImageProps)} />;
 }

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

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

package/template-react-vite-muijoy-ink-tauri/vite.config.ts

@@ -38,6 +38,7 @@ export default defineConfig({
             content: "./src/content/index.ts",
             characters: "./src/content/characters.ts",
             labels: "./src/content/labels/*.label.ts",
+            typeFilePath: "./src/pixi-vn-keys.gen.d.ts",
         }),
         vitePluginInk({
             inkGlob: "./ink/**/*.ink",

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

@@ -10,7 +10,7 @@
       "license": "GPL-3.0",
       "dependencies": {
         "@base-ui/react": "^1.5.0",
-        "@drincs/pixi-vn": "^1.8.11",
+        "@drincs/pixi-vn": "^1.8.12",
         "@drincs/pixi-vn-spine": "^0.2.1",
         "@tailwindcss/vite": "^4.3.0",
         "@tanstack/react-devtools": "^0.10.5",
@@ -2117,9 +2117,9 @@
       }
     },
     "node_modules/@drincs/pixi-vn": {
-      "version": "1.8.11",
-      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.11.tgz",
-      "integrity": "sha512-T7FuV/v8qevXq+edFdSLQKyJnQrRhDN4PUzlqw5qe0tDIXycTbr/MMnBNEYRuBMEYUMtoYZb0tmKHY/5Xh8q0Q==",
+      "version": "1.8.12",
+      "resolved": "https://registry.npmjs.org/@drincs/pixi-vn/-/pixi-vn-1.8.12.tgz",
+      "integrity": "sha512-1Ff8mZ+hYQzpA2F/LAH37f6cfEewJcYtE4hjLcJRQCv2ql+ti12JAAzCUItopUt8VWEKFGY43J8XILAc66wfjA==",
       "license": "LGPL-2.1",
       "workspaces": [
         "sandbox"

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

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
-    "@drincs/pixi-vn": "^1.8.11",
+    "@drincs/pixi-vn": "^1.8.13",
     "@drincs/pixi-vn-spine": "^0.2.1",
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/react-devtools": "^0.10.5",

package/template-react-vite-muijoy-tauri/src/assets/ink-manifest.gen.json

@@ -0,0 +1 @@
+[]

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

@@ -4,7 +4,6 @@ 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 { startLabel } from "@/content/labels/start.label";
 import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
 import { useGameProps } from "@/lib/hooks/props-hooks";
 import { useQuit } from "@/lib/hooks/quit-hooks";
@@ -146,7 +145,7 @@ export function MainMenu() {
                         onClick={async () => {
                             setLoading(true);
                             await navigate({ to: "/game/narration" });
-                            Game.start(startLabel, gameProps)
+                            Game.start("start", gameProps)
                                 .then(() =>
                                     queryClient.invalidateQueries({
                                         queryKey: [INTERFACE_DATA_USE_QUERY_KEY],

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

@@ -52,9 +52,9 @@ export function SaveSlot({ saveId }: { saveId: number }) {
         >
             <Image
                 src={saveData.image}
+                layout="fullWidth"
                 alt={saveData.name}
-                className="absolute inset-0 size-full object-contain rounded-lg"
-                style={{ pointerEvents: "none", userSelect: "none" }}
+                className="absolute inset-0 size-full object-contain rounded-lg pointer-events-none select-none"
             />
             {/* top-left metadata */}
             <div className="absolute top-2.5 left-2.5 flex flex-col gap-0.5 pointer-events-none">

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

@@ -128,7 +128,7 @@ export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement
 export function CharacterIcon({ alt, icon }: { icon: string; alt: string }) {
     return (
         <AspectRatio ratio={16 / 9}>
-            <Image src={icon} alt={alt} className="h-full w-full object-cover" />
+            <Image src={icon} layout="fullWidth" alt={alt} className="h-full w-full object-cover" />
         </AspectRatio>
     );
 }