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

components/character/tinted-sprite-icon.tsx

@@ -37,35 +37,39 @@ export function TintedSpriteIcon({
       const ctx = canvas.getContext("2d", { willReadFrequently: true });
       if (!ctx) return;
 
-      const image = await getCachedImage(src);
-      if (cancelled) return;
+      try {
+        const image = await getCachedImage(src);
+        if (cancelled) return;
 
-      canvas.width = image.width;
-      canvas.height = image.height;
-      ctx.clearRect(0, 0, image.width, image.height);
+        canvas.width = image.width;
+        canvas.height = image.height;
+        ctx.clearRect(0, 0, image.width, image.height);
 
-      const rgb = hslToRgb(color.h, color.s, color.l);
-      const isEyesLayer = src.includes("/character/eyes/");
+        const rgb = hslToRgb(color.h, color.s, color.l);
+        const isEyesLayer = src.includes("/character/eyes/");
 
-      drawTintedSprite(
-        ctx,
-        image,
-        rgb,
-        isEyesLayer && skinColor
-          ? {
-              mode: "eyes",
-              skinColor: hslToRgb(skinColor.h, skinColor.s, skinColor.l),
-            }
-          : undefined,
-      );
+        drawTintedSprite(
+          ctx,
+          image,
+          rgb,
+          isEyesLayer && skinColor
+            ? {
+                mode: "eyes",
+                skinColor: hslToRgb(skinColor.h, skinColor.s, skinColor.l),
+              }
+            : undefined,
+        );
+      } catch {
+        // Ignore missing or broken sprite assets so the UI stays responsive.
+      }
     }
 
-    render();
+    void render();
 
     return () => {
       cancelled = true;
     };
-  }, [src, color, skinColor]);
+  }, [src, color.h, color.s, color.l, skinColor?.h, skinColor?.s, skinColor?.l]);
 
   return (
     <canvas

components/onboarding/onboarding-quiz-form.tsx

@@ -3,7 +3,6 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-import { CharacterLayerPreview } from "@/components/character/character-layer-preview";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -13,7 +12,6 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import { defaultAvatarCustomization } from "@/lib/avatar-customization-storage";
 import {
   focusTopicOptions,
   saveOnboardingPreferences,
@@ -52,25 +50,16 @@ export function OnboardingQuizForm() {
   return (
     <div className="min-h-svh bg-background">
       <main className="mx-auto flex min-h-svh max-w-lg flex-col justify-center px-5 py-10">
-        <div className="mb-8 flex flex-col items-center gap-4 text-center">
-          <CharacterLayerPreview
-            colors={defaultAvatarCustomization.colors}
-            variants={defaultAvatarCustomization.variants}
-            scale={6}
-            compact
-            className="max-w-[12rem]"
-          />
-          <div>
-            <p className="text-sm uppercase tracking-[0.2em] text-muted-foreground">
-              Step 1 of 2
-            </p>
-            <h1 className="mt-2 text-2xl font-semibold tracking-tight">
-              Welcome to Habit Pet
-            </h1>
-            <p className="mt-2 text-sm text-muted-foreground">
-              Choose a focus area, then design your pet in the next step.
-            </p>
-          </div>
+        <div className="mb-8 text-center">
+          <p className="text-sm uppercase tracking-[0.2em] text-muted-foreground">
+            Step 1 of 2
+          </p>
+          <h1 className="mt-2 text-2xl font-semibold tracking-tight">
+            Welcome to Habit Pet
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Choose a focus area, then design your pet in the next step.
+          </p>
         </div>
 
         <Card>