Complete character creation screen

Finished the character creation screen with the final layout, UI elements, and customization flow ready for integration.

components/character/character-creator.tsx

@@ -15,7 +15,7 @@ import { clampHsl } from "@/lib/character/color-utils";
 import {
   CHARACTER_LAYERS,
   COLOR_PRESETS,
-  DEFAULT_SKIN_COLOR,
+  DEFAULT_GRAY_COLOR,
   LAYER_DEFAULT_COLORS,
   buildDefaultVariants,
   getLayerById,
@@ -41,7 +41,7 @@ export function CharacterCreator() {
     buildDefaultVariants,
   );
   const [activePresetId, setActivePresetId] = useState<string>(
-    DEFAULT_SKIN_COLOR.id,
+    DEFAULT_GRAY_COLOR.id,
   );
   const [activeLayerId, setActiveLayerId] = useState<
     (typeof CHARACTER_LAYERS)[number]["id"]
@@ -69,7 +69,14 @@ export function CharacterCreator() {
 
   const handleLayerChange = (layerId: (typeof CHARACTER_LAYERS)[number]["id"]) => {
     setActiveLayerId(layerId);
-    setActivePresetId("");
+    const layerColor = colors[layerId];
+    const matchingPreset = COLOR_PRESETS.find(
+      (preset) =>
+        preset.hsl.h === layerColor.h &&
+        preset.hsl.s === layerColor.s &&
+        preset.hsl.l === layerColor.l,
+    );
+    setActivePresetId(matchingPreset?.id ?? "");
   };
 
   const handleVariantChange = (variantId: string) => {
@@ -107,6 +114,7 @@ export function CharacterCreator() {
                   variants={pieceVariants}
                   activeId={variants[activeLayerId]}
                   color={activeColor}
+                  skinColor={colors.skin}
                   onSelect={handleVariantChange}
                 />
               </div>

components/character/character-layer-preview.tsx

@@ -65,10 +65,22 @@ export function CharacterLayerPreview({
 
       for (const { layer, image } of images) {
         const layerColor = colors[layer.id];
+        const rgb = hslToRgb(layerColor.h, layerColor.s, layerColor.l);
+
         drawTintedSprite(
           ctx,
           image,
-          hslToRgb(layerColor.h, layerColor.s, layerColor.l),
+          rgb,
+          layer.id === "eyes"
+            ? {
+                mode: "eyes",
+                skinColor: hslToRgb(
+                  colors.skin.h,
+                  colors.skin.s,
+                  colors.skin.l,
+                ),
+              }
+            : undefined,
         );
       }
     }

components/character/character-piece-selector.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { CircleSlash } from "lucide-react";
+
 import type { HSL } from "@/lib/character/color-utils";
-import { PIECE_SLOT_COUNT } from "@/lib/character/presets";
+import { NONE_VARIANT_ID, PIECE_SLOT_COUNT } from "@/lib/character/presets";
 import { cn } from "@/lib/utils";
 import type { LayerVariant } from "@/lib/character/presets";
 
@@ -11,6 +13,7 @@ type CharacterPieceSelectorProps = {
   variants: LayerVariant[];
   activeId: string;
   color: HSL;
+  skinColor?: HSL;
   onSelect: (variantId: string) => void;
 };
 
@@ -18,6 +21,7 @@ export function CharacterPieceSelector({
   variants,
   activeId,
   color,
+  skinColor,
   onSelect,
 }: CharacterPieceSelectorProps) {
   const slots = Array.from({ length: PIECE_SLOT_COUNT }, (_, index) =>
@@ -37,6 +41,31 @@ export function CharacterPieceSelector({
           );
         }
 
+        if (variant.id === NONE_VARIANT_ID) {
+          return (
+            <button
+              key={variant.id}
+              type="button"
+              title={variant.label}
+              aria-label={variant.label}
+              aria-pressed={activeId === variant.id}
+              onClick={() => onSelect(variant.id)}
+              className={cn(
+                "flex size-14 items-center justify-center rounded-lg border bg-muted/20 transition-colors",
+                activeId === variant.id
+                  ? "border-foreground bg-muted/35 shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
+                  : "border-border/60 hover:border-border hover:bg-muted/30",
+              )}
+            >
+              <CircleSlash
+                className="size-6 text-muted-foreground"
+                strokeWidth={1.75}
+                aria-hidden
+              />
+            </button>
+          );
+        }
+
         return (
           <button
             key={variant.id}
@@ -52,7 +81,12 @@ export function CharacterPieceSelector({
                 : "border-border/60 hover:border-border hover:bg-zinc-900/60",
             )}
           >
-            <TintedSpriteIcon src={variant.src} color={color} size={36} />
+            <TintedSpriteIcon
+              src={variant.src}
+              color={color}
+              skinColor={skinColor}
+              size={36}
+            />
           </button>
         );
       })}

components/character/tinted-sprite-icon.tsx

@@ -13,6 +13,7 @@ import { cn } from "@/lib/utils";
 type TintedSpriteIconProps = {
   src: string;
   color: HSL;
+  skinColor?: HSL;
   size?: number;
   className?: string;
 };
@@ -20,6 +21,7 @@ type TintedSpriteIconProps = {
 export function TintedSpriteIcon({
   src,
   color,
+  skinColor,
   size = 40,
   className,
 }: TintedSpriteIconProps) {
@@ -41,7 +43,21 @@ export function TintedSpriteIcon({
       canvas.width = image.width;
       canvas.height = image.height;
       ctx.clearRect(0, 0, image.width, image.height);
-      drawTintedSprite(ctx, image, hslToRgb(color.h, color.s, color.l));
+
+      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,
+      );
     }
 
     render();
@@ -49,7 +65,7 @@ export function TintedSpriteIcon({
     return () => {
       cancelled = true;
     };
-  }, [src, color]);
+  }, [src, color, skinColor]);
 
   return (
     <canvas