Removed the auto generated sprites

components/character/character-layer-preview.tsx

@@ -15,6 +15,8 @@ import {
 import type { LayerColorState, LayerVariantState } from "@/lib/character/types";
 import { cn } from "@/lib/utils";
 
+const EMPTY_EQUIPPED_ITEMS: string[] = [];
+
 type CharacterLayerPreviewProps = {
   colors: LayerColorState;
   variants: LayerVariantState;
@@ -27,16 +29,21 @@ type CharacterLayerPreviewProps = {
 export function CharacterLayerPreview({
   colors,
   variants,
-  equippedItems = [],
+  equippedItems,
   scale = 10,
   className,
   compact = false,
 }: CharacterLayerPreviewProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [displaySize, setDisplaySize] = useState({ width: 0, height: 0 });
+  const resolvedEquippedItems = equippedItems ?? EMPTY_EQUIPPED_ITEMS;
+  const equippedKey = resolvedEquippedItems.join("\0");
+  const equippedItemsRef = useRef(resolvedEquippedItems);
+  equippedItemsRef.current = resolvedEquippedItems;
 
   useEffect(() => {
     let cancelled = false;
+    const items = equippedItemsRef.current;
 
     async function render() {
       const canvas = canvasRef.current;
@@ -45,62 +52,74 @@ export function CharacterLayerPreview({
       const ctx = canvas.getContext("2d", { willReadFrequently: true });
       if (!ctx) return;
 
-      const displayVariants = applyEquippedItemsToVariants(
-        variants,
-        equippedItems,
-      );
-
-      const activeLayers = CHARACTER_LAYERS.flatMap((layer) => {
-        const selected = getSelectedVariant(layer.id, displayVariants[layer.id]);
-        if (!selected) return [];
-        return [{ layer, variant: selected }];
-      });
-
-      const images = await Promise.all(
-        activeLayers.map(async ({ layer, variant }) => ({
-          layer,
-          image: await getCachedImage(variant.src),
-        })),
-      );
-
-      if (cancelled || images.length === 0) return;
-
-      const width = images[0]?.image.width ?? 0;
-      const height = images[0]?.image.height ?? 0;
-
-      canvas.width = width;
-      canvas.height = height;
-      setDisplaySize({ width: width * scale, height: height * scale });
-      ctx.clearRect(0, 0, width, height);
-
-      for (const { layer, image } of images) {
-        const layerColor = colors[layer.id];
-        const rgb = hslToRgb(layerColor.h, layerColor.s, layerColor.l);
-
-        drawTintedSprite(
-          ctx,
-          image,
-          rgb,
-          layer.id === "eyes"
-            ? {
-                mode: "eyes",
-                skinColor: hslToRgb(
-                  colors.skin.h,
-                  colors.skin.s,
-                  colors.skin.l,
-                ),
-              }
-            : undefined,
+      try {
+        const displayVariants = applyEquippedItemsToVariants(
+          variants,
+          items,
         );
+
+        const activeLayers = CHARACTER_LAYERS.flatMap((layer) => {
+          const selected = getSelectedVariant(layer.id, displayVariants[layer.id]);
+          if (!selected) return [];
+          return [{ layer, variant: selected }];
+        });
+
+        const images = await Promise.all(
+          activeLayers.map(async ({ layer, variant }) => ({
+            layer,
+            image: await getCachedImage(variant.src),
+          })),
+        );
+
+        if (cancelled || images.length === 0) return;
+
+        const width = images[0]?.image.width ?? 0;
+        const height = images[0]?.image.height ?? 0;
+
+        canvas.width = width;
+        canvas.height = height;
+
+        const nextWidth = width * scale;
+        const nextHeight = height * scale;
+        setDisplaySize((current) =>
+          current.width === nextWidth && current.height === nextHeight
+            ? current
+            : { width: nextWidth, height: nextHeight },
+        );
+
+        ctx.clearRect(0, 0, width, height);
+
+        for (const { layer, image } of images) {
+          const layerColor = colors[layer.id];
+          const rgb = hslToRgb(layerColor.h, layerColor.s, layerColor.l);
+
+          drawTintedSprite(
+            ctx,
+            image,
+            rgb,
+            layer.id === "eyes"
+              ? {
+                  mode: "eyes",
+                  skinColor: hslToRgb(
+                    colors.skin.h,
+                    colors.skin.s,
+                    colors.skin.l,
+                  ),
+                }
+              : undefined,
+          );
+        }
+      } catch {
+        // Ignore missing or broken sprite assets so the UI stays responsive.
       }
     }
 
-    render();
+    void render();
 
     return () => {
       cancelled = true;
     };
-  }, [colors, variants, equippedItems, scale]);
+  }, [colors, variants, equippedKey, scale]);
 
   return (
     <div