Merge branch 'staging' of https://github.com/RecentRunner/cursor-hackathon into mason

components/avatar/avatar-page-content.tsx

@@ -50,7 +50,16 @@ export function AvatarPageContent() {
   return (
     <div className="flex w-full flex-col">
       <div className="bit-home-pet-stage">
-        <PetHabitat customization={customization} fillViewport />
+        <PetHabitat
+          customization={customization}
+          fillViewport
+          nameEditable
+          onNameChange={(name) =>
+            setCustomization((current) =>
+              current ? { ...current, name } : current,
+            )
+          }
+        />
       </div>
 
       <section className="grid w-full gap-6 pt-6 lg:grid-cols-2 lg:items-start">

components/pet/animated-pet-sprite.tsx

@@ -109,9 +109,9 @@ export function AnimatedPetSprite({
       )}
       style={{
         left: `${position.x}%`,
-        top: `${position.y}%`,
+        bottom: `${position.y}%`,
-        transform: "translate(-50%, -100%)",
+        transform: "translateX(-50%)",
-        transition: "left 1.8s steps(10), top 1.8s steps(10)",
+        transition: "left 1.8s steps(10), bottom 1.8s steps(10)",
       }}
       role={interactive ? "button" : undefined}
       tabIndex={interactive ? 0 : undefined}

components/pet/editable-pet-name.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import { Pencil } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Input } from "@/components/ui/input";
+import {
+  DEFAULT_AVATAR_NAME,
+  saveAvatarName,
+} from "@/lib/avatar-customization-storage";
+import { cn } from "@/lib/utils";
+
+type EditablePetNameProps = {
+  name: string;
+  moodLabel?: string;
+  editable?: boolean;
+  onNameChange?: (name: string) => void;
+  /** Frame header above LCD, or floating badge inside the LCD viewport. */
+  variant?: "frame" | "overlay";
+  size?: "default" | "landing";
+  className?: string;
+};
+
+export function EditablePetName({
+  name,
+  moodLabel,
+  editable = true,
+  onNameChange,
+  variant = "frame",
+  size = "default",
+  className,
+}: EditablePetNameProps) {
+  const [displayName, setDisplayName] = useState(name);
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState(name);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isOverlay = variant === "overlay";
+
+  useEffect(() => {
+    setDisplayName(name);
+    if (!isEditing) {
+      setDraft(name);
+    }
+  }, [name, isEditing]);
+
+  useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [isEditing]);
+
+  const beginEdit = () => {
+    if (!editable || isSaving) {
+      return;
+    }
+
+    setDraft(displayName);
+    setError(null);
+    setIsEditing(true);
+  };
+
+  const cancelEdit = () => {
+    setDraft(displayName);
+    setError(null);
+    setIsEditing(false);
+  };
+
+  const saveName = async () => {
+    const trimmed = draft.trim() || DEFAULT_AVATAR_NAME;
+
+    if (trimmed === displayName) {
+      setIsEditing(false);
+      return;
+    }
+
+    setIsSaving(true);
+    setError(null);
+
+    try {
+      const saved = await saveAvatarName(trimmed);
+      setDisplayName(saved);
+      onNameChange?.(saved);
+      setIsEditing(false);
+    } catch (saveError) {
+      setError(
+        saveError instanceof Error
+          ? saveError.message
+          : "Could not save bit name.",
+      );
+      setDraft(displayName);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const overlayNameClass =
+    size === "landing"
+      ? "lcd-readable-name lcd-readable-name-landing"
+      : cn(
+          "lcd-readable-name text-sm sm:text-base md:text-lg",
+        );
+
+  const editInput = (
+    <div className={cn(isOverlay ? "space-y-1" : "space-y-2")}>
+      <Input
+        ref={inputRef}
+        value={draft}
+        maxLength={32}
+        disabled={isSaving}
+        aria-label="Bit name"
+        className={cn(
+          "font-pixel",
+          isOverlay
+            ? cn("h-8 min-w-[6rem] px-2 py-1 text-sm", overlayNameClass)
+            : "h-9 text-base",
+        )}
+        onChange={(event) => setDraft(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            void saveName();
+          }
+
+          if (event.key === "Escape") {
+            event.preventDefault();
+            cancelEdit();
+          }
+        }}
+        onBlur={() => {
+          void saveName();
+        }}
+        onClick={(event) => event.stopPropagation()}
+      />
+      {error ? (
+        <p
+          className={cn(
+            "text-red-500",
+            isOverlay ? "text-[10px]" : "text-xs",
+          )}
+        >
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+
+  const displayRow = editable ? (
+    <div
+      className={cn(
+        "flex items-center gap-1",
+        isOverlay && cn("max-w-full", overlayNameClass),
+        !isOverlay &&
+          "group min-w-0 flex-1 items-center gap-2 border-2 border-border bg-card/80 px-3 py-2 shadow-[var(--retro-shadow-sm)]",
+      )}
+    >
+      {isOverlay ? (
+        <span className="min-w-0 truncate font-pixel leading-snug">
+          {displayName}
+        </span>
+      ) : (
+        <button
+          type="button"
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            beginEdit();
+          }}
+          className={cn(
+            "group flex min-w-0 flex-1 items-center gap-2 text-left transition-colors",
+            "hover:border-primary/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+          aria-label={`Edit name: ${displayName}`}
+        >
+          <span className="min-w-0 flex-1 truncate font-pixel text-base leading-snug text-foreground">
+            {displayName}
+          </span>
+          <Pencil
+            aria-hidden="true"
+            className="size-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground"
+            strokeWidth={2.5}
+          />
+        </button>
+      )}
+      {isOverlay ? (
+        <button
+          type="button"
+          aria-label="Edit bit name"
+          title="Edit bit name"
+          disabled={isSaving}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            beginEdit();
+          }}
+          className="flex shrink-0 items-center justify-center p-0.5 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <Pencil aria-hidden="true" className="size-3" strokeWidth={2.5} />
+        </button>
+      ) : null}
+    </div>
+  ) : (
+    <p
+      className={cn(
+        "min-w-0 truncate font-pixel leading-snug text-foreground",
+        !isOverlay && "flex-1 text-base",
+        isOverlay && overlayNameClass,
+      )}
+    >
+      {displayName}
+    </p>
+  );
+
+  return (
+    <div
+      className={cn(
+        isOverlay
+          ? "absolute right-2 top-2 z-20 max-w-[58%]"
+          : "mb-3 shrink-0 border-b-2 border-border/60 pb-3",
+        className,
+      )}
+      onClick={(event) => {
+        if (isEditing) {
+          event.stopPropagation();
+        }
+      }}
+    >
+      {isEditing ? editInput : displayRow}
+
+      {!isOverlay && moodLabel ? (
+        <p className="mt-1.5 text-xs uppercase tracking-[0.2em] text-secondary">
+          {moodLabel}
+        </p>
+      ) : null}
+    </div>
+  );
+}

components/pet/parallax-room-background.tsx

@@ -26,7 +26,7 @@ export function ParallaxRoomBackground({
         src={room.sceneImage}
         alt=""
         aria-hidden
-        className="absolute inset-0 size-full object-cover image-pixelated"
+        className="absolute inset-0 size-full object-cover object-bottom image-pixelated"
       />
     </div>
   );

components/pet/pet-ground-zone.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { PET_GROUND_ZONE_HEIGHT_RATIO } from "@/lib/pet-wander-bounds";
+import { cn } from "@/lib/utils";
+
+type PetGroundZoneProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function PetGroundZone({ children, className }: PetGroundZoneProps) {
+  return (
+    <div
+      className={cn("absolute inset-x-0 bottom-0 z-10", className)}
+      style={{ height: `${PET_GROUND_ZONE_HEIGHT_RATIO * 100}%` }}
+    >
+      {children}
+    </div>
+  );
+}

components/pet/pet-habitat.tsx

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { AnimatedPetSprite } from "@/components/pet/animated-pet-sprite";
+import { EditablePetName } from "@/components/pet/editable-pet-name";
+import { PetGroundZone } from "@/components/pet/pet-ground-zone";
 import { PetEmotionCaption } from "@/components/pet/pet-emotion-caption";
 import { ParallaxRoomBackground } from "@/components/pet/parallax-room-background";
 import { PixelGauge } from "@/components/pet/pixel-gauge";
@@ -26,6 +28,8 @@ type PetHabitatProps = {
   fillViewport?: boolean;
   /** Bit name in the LCD top-right (landing preview). */
   nameInLcd?: boolean;
+  nameEditable?: boolean;
+  onNameChange?: (name: string) => void;
   petScale?: number;
   lcdClassName?: string;
   lcdRef?: React.Ref<HTMLDivElement>;
@@ -36,6 +40,8 @@ export function PetHabitat({
   className,
   fillViewport = false,
   nameInLcd = false,
+  nameEditable = false,
+  onNameChange,
   petScale,
   lcdClassName: lcdClassNameOverride,
   lcdRef,
@@ -104,8 +110,10 @@ export function PetHabitat({
   );
 
   const gaugeOverlaySize = fillViewport ? "responsive" : "md";
-  const showNameAboveShell = !fillViewport && !nameInLcd;
+  const showStaticNameAboveShell = !nameEditable && !fillViewport && !nameInLcd;
-  const showNameInLcdOverlay = fillViewport || nameInLcd;
+  const showFloatingEditableName = nameEditable && (fillViewport || !nameInLcd);
+  const showReadOnlyLcdName =
+    !nameEditable && (fillViewport || nameInLcd);
 
   if (!isReady) {
     return (
@@ -119,7 +127,7 @@ export function PetHabitat({
 
   return (
     <div className={shellClassName}>
-      {showNameAboveShell ? (
+      {showStaticNameAboveShell ? (
         <div className="mb-3 shrink-0 border-b-2 border-border/60 pb-3">
           <p className="text-sm text-foreground">{customization.name}</p>
         </div>
@@ -127,6 +135,7 @@ export function PetHabitat({
 
       <div ref={lcdRef} className={lcdClassName}>
         <ParallaxRoomBackground roomId={roomId as RoomBackgroundId} />
+        <PetGroundZone>
           <AnimatedPetSprite
             customization={customization}
             petScale={petScale}
@@ -135,6 +144,7 @@ export function PetHabitat({
             mood={condition.mood}
             onInteract={showEmotionBriefly}
           />
+        </PetGroundZone>
         <PetEmotionCaption mood={condition.mood} visible={emotionVisible} />
         <div className="pointer-events-none absolute left-2 top-2 z-20 grid gap-1 sm:gap-1.5">
           <PixelGauge
@@ -150,7 +160,15 @@ export function PetHabitat({
             overlaySize={gaugeOverlaySize}
           />
         </div>
-        {showNameInLcdOverlay ? (
+        {showFloatingEditableName ? (
+          <EditablePetName
+            name={customization.name}
+            onNameChange={onNameChange}
+            variant="overlay"
+            size={fillViewport ? "default" : "landing"}
+          />
+        ) : null}
+        {showReadOnlyLcdName ? (
           <p
             className={cn(
               "pointer-events-none absolute right-2 top-2 z-20 max-w-[52%] truncate text-right lcd-readable-name",

components/profile/profile-preferences-form.tsx

@@ -24,8 +24,11 @@ import {
   requestNotificationPermission,
 } from "@/lib/daily-reminders";
 import { getDailyReminderStatus } from "@/lib/daily-reminder-status";
-import { getTodayDateKey } from "@/lib/habits-storage";
+import { adjustCoins } from "@/lib/avatar-progression-storage";
+import { notifyHabitPetDataUpdated } from "@/lib/app-events";
+import { DEMO_COINS_GRANT } from "@/lib/coins";
 import { resetTodaysDailyQuiz } from "@/lib/daily-quiz-storage";
+import { getTodayDateKey } from "@/lib/habits-storage";
 import {
   reminderDeliveryOptions,
   usesSystemReminders,
@@ -59,6 +62,8 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
   );
   const [quizResetMessage, setQuizResetMessage] = useState<string | null>(null);
   const [isResettingQuiz, setIsResettingQuiz] = useState(false);
+  const [coinsGrantMessage, setCoinsGrantMessage] = useState<string | null>(null);
+  const [isGrantingCoins, setIsGrantingCoins] = useState(false);
 
   useEffect(() => {
     setNotificationPermission(getNotificationPermissionState());
@@ -212,6 +217,28 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
     );
   };
 
+  const handleGrantDemoCoins = async () => {
+    setCoinsGrantMessage(null);
+    setError(null);
+    setIsGrantingCoins(true);
+
+    try {
+      const nextBalance = await adjustCoins(DEMO_COINS_GRANT);
+      notifyHabitPetDataUpdated();
+      setCoinsGrantMessage(
+        `Added ${DEMO_COINS_GRANT} points. Your balance is now ${nextBalance}.`,
+      );
+    } catch (grantError) {
+      setError(
+        grantError instanceof Error
+          ? grantError.message
+          : "Could not add demo points.",
+      );
+    } finally {
+      setIsGrantingCoins(false);
+    }
+  };
+
   const handleResetDailyQuiz = async () => {
     setQuizResetMessage(null);
     setError(null);
@@ -399,8 +426,22 @@ export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
         <CardContent className="space-y-4">
           <p className="text-xs text-muted-foreground">
             Reset clears today&apos;s wellness quiz entry so you can complete it
-            again immediately.
+            again immediately. Demo points are for testing the shop only.
           </p>
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full"
+            disabled={isSaving || isGrantingCoins}
+            onClick={() => void handleGrantDemoCoins()}
+          >
+            {isGrantingCoins
+              ? "Adding points..."
+              : `Add ${DEMO_COINS_GRANT} free points`}
+          </Button>
+          {coinsGrantMessage ? (
+            <p className="text-xs text-emerald-600">{coinsGrantMessage}</p>
+          ) : null}
           <Button
             type="button"
             variant="outline"

components/shop/shop-content.tsx

@@ -8,10 +8,11 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { useToast } from "@/components/ui/toast-provider";
 import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
-import { getAvatarCustomization } from "@/lib/avatar-customization-storage";
+import {
-import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
+  defaultAvatarCustomization,
-import { defaultAvatarCustomization } from "@/lib/avatar-customization-storage";
+  getAvatarCustomization,
-import { DEFAULT_GRAY_COLOR } from "@/lib/character/presets";
+  type AvatarCustomization,
+} from "@/lib/avatar-customization-storage";
 import { getRoomBackground, normalizeRoomBackgroundId } from "@/lib/room-backgrounds";
 import {
   equipShopItem,
@@ -25,6 +26,7 @@ import {
   type ShopLayerId,
 } from "@/lib/shop-catalog";
 import { ShopItemPreviewModal } from "@/components/shop/shop-item-preview-modal";
+import { getShopItemThumbnailColors } from "@/lib/shop-preview";
 import { cn } from "@/lib/utils";
 
 function ShopItemPriceBadge({
@@ -80,6 +82,7 @@ function ShopItemCard({
   equipped,
   canAfford,
   isPending,
+  characterColors,
   onPurchase,
   onEquipToggle,
   onPreview,
@@ -89,11 +92,16 @@ function ShopItemCard({
   equipped: boolean;
   canAfford: boolean;
   isPending: boolean;
+  characterColors: AvatarCustomization["colors"];
   onPurchase: () => void;
   onEquipToggle: () => void;
   onPreview: () => void;
 }) {
   const room = item.type === "room" ? getRoomBackground(item.id) : null;
+  const thumbnailColors =
+    item.type === "room"
+      ? null
+      : getShopItemThumbnailColors(item, characterColors);
 
   const actionLabel = (() => {
     if (isPending) {
@@ -123,13 +131,14 @@ function ShopItemCard({
                 alt=""
                 className="size-full object-cover image-pixelated"
               />
-            ) : (
+            ) : thumbnailColors ? (
               <TintedSpriteIcon
                 src={item.image_path}
-                color={DEFAULT_GRAY_COLOR.hsl}
+                color={thumbnailColors.color}
+                skinColor={thumbnailColors.skinColor}
                 size={32}
               />
-            )}
+            ) : null}
           </div>
 
           <div className="flex min-w-0 flex-1 items-start justify-between gap-2">
@@ -355,6 +364,7 @@ export function ShopContent() {
                   equipped={equippedRoomBackground === item.id}
                   canAfford={coins !== null && coins >= item.price}
                   isPending={pendingItemId === item.id}
+                  characterColors={baseCustomization.colors}
                   onPurchase={() => void handlePurchase(item.id)}
                   onEquipToggle={() => void handleEquipToggle(item)}
                   onPreview={() => setPreviewItem(item)}
@@ -378,6 +388,7 @@ export function ShopContent() {
                   equipped={equippedItems.includes(item.id)}
                   canAfford={coins !== null && coins >= item.price}
                   isPending={pendingItemId === item.id}
+                  characterColors={baseCustomization.colors}
                   onPurchase={() => void handlePurchase(item.id)}
                   onEquipToggle={() => void handleEquipToggle(item)}
                   onPreview={() => setPreviewItem(item)}

lib/coins.ts

@@ -1,5 +1,8 @@
 export const DEFAULT_STARTING_COINS = 100;
 
+/** Demo grant amount from Profile → Demo tools. */
+export const DEMO_COINS_GRANT = 100;
+
 export const COINS_PER_TASK_COMPLETE = 50;
 export const COINS_PER_TASK_UNCHECK = -50;
 

lib/pet-wander-bounds.ts

@@ -1,14 +1,17 @@
-/** Percentage bounds for pet wander within the LCD viewport. */
+/** Ground band height as a fraction of the LCD — matches room PNG floor (~bottom 22%). */
+export const PET_GROUND_ZONE_HEIGHT_RATIO = 0.22;
+
+/** Wander bounds inside the ground zone (not the full LCD). */
 export const PET_WANDER_BOUNDS = {
   /** Horizontal inset — keep pet off side walls */
   minX: 15,
   maxX: 85,
-  /** Lower third of LCD — ground where hills/grass/floor render */
+  /** Vertical offset from floor, as % of ground zone height (0 = feet on floor) */
-  minY: 66,
+  minY: 0,
-  maxY: 90,
+  maxY: 65,
 } as const;
 
 export const PET_WANDER_START = {
   x: 50,
-  y: 78,
+  y: 12,
 } as const;

lib/shop-preview.ts

@@ -1,5 +1,12 @@
 import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
-import { parseVariantId, parseShopStyleItem, type ShopItemRecord } from "@/lib/shop-catalog";
+import type { HSL } from "@/lib/character/color-utils";
+import type { LayerColorState } from "@/lib/character/types";
+import {
+  isShopLayerId,
+  parseVariantId,
+  parseShopStyleItem,
+  type ShopItemRecord,
+} from "@/lib/shop-catalog";
 import {
   normalizeRoomBackgroundId,
   type RoomBackgroundId,
@@ -17,6 +24,21 @@ export function getShopPreviewRoomId(
   return normalizeRoomBackgroundId(base.roomBackground);
 }
 
+/** Tint colors for shop grid thumbnails — match the user's current layer colors. */
+export function getShopItemThumbnailColors(
+  item: ShopItemRecord,
+  colors: LayerColorState,
+): { color: HSL; skinColor?: HSL } {
+  if (!isShopLayerId(item.type)) {
+    return { color: colors.torso };
+  }
+
+  return {
+    color: colors[item.type],
+    skinColor: item.type === "eyes" ? colors.skin : undefined,
+  };
+}
+
 /** Build a non-persisted avatar state showing how a shop item would look. */
 export function buildShopItemPreviewCustomization(
   base: AvatarCustomization,