create-pixi-vn 2.0.2 → 2.0.3

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.3",
   "type": "module",
   "license": "GPL-3.0",
   "author": "DRincs-Productions",

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-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-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-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>
     );
 }

package/template-react-vite-muijoy-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)} />;
 }