Add shop preview modal to try items on your pet before buying.

Preview overlays the item or room background on the current avatar without equipping.

lib/shop-preview.ts

@@ -0,0 +1,34 @@
+import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
+import { parseVariantId, parseShopStyleItem, type ShopItemRecord } from "@/lib/shop-catalog";
+import { normalizeRoomBackgroundId } from "@/lib/room-backgrounds";
+
+/** Build a non-persisted avatar state showing how a shop item would look. */
+export function buildShopItemPreviewCustomization(
+  base: AvatarCustomization,
+  item: ShopItemRecord,
+): AvatarCustomization {
+  if (item.type === "room") {
+    return {
+      ...base,
+      roomBackground: normalizeRoomBackgroundId(item.id),
+    };
+  }
+
+  const style = parseShopStyleItem(item.id, item.type);
+  if (!style) {
+    return base;
+  }
+
+  const nextEquipped = [
+    ...base.equippedItems.filter((equippedId) => {
+      const equippedStyle = parseVariantId(equippedId);
+      return equippedStyle?.layerId !== style.layerId;
+    }),
+    item.id,
+  ];
+
+  return {
+    ...base,
+    equippedItems: nextEquipped,
+  };
+}