Add initial character creation screen

Created the first version of the character creation feature, including the base layout and starting UI elements for customizing a character.

components/character/character-color-presets.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ColorPreset } from "@/lib/character/presets";
+
+type CharacterColorPresetsProps = {
+  presets: ColorPreset[];
+  activeId?: string;
+  onSelect: (preset: ColorPreset) => void;
+};
+
+export function CharacterColorPresets({
+  presets,
+  activeId,
+  onSelect,
+}: CharacterColorPresetsProps) {
+  return (
+    <div className="grid grid-cols-9 gap-2">
+      {presets.map((preset) => (
+        <button
+          key={preset.id}
+          type="button"
+          title={preset.name}
+          aria-label={preset.name}
+          aria-pressed={activeId === preset.id}
+          onClick={() => onSelect(preset)}
+          className={cn(
+            "aspect-square size-full max-h-9 max-w-9 rounded-md border transition-colors",
+            activeId === preset.id
+              ? "border-foreground ring-1 ring-foreground/40 ring-offset-1 ring-offset-background"
+              : "border-border/60 hover:border-border",
+          )}
+          style={{ backgroundColor: preset.hex }}
+        />
+      ))}
+    </div>
+  );
+}