Character portrait

Crop-and-zoom picture editor on the Concept page, stored (re-encoded to a
256 px WebP data URL) inside the character; shown on the sheet header, in
the lobby player bar and as token icon on the map.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HJhXuLD2Z6hv3Wqeq9UL9K

frontend/src/Creator.jsx

@@ -1,3 +1,4 @@
+import PortraitEditor from './Portrait.jsx'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { applyPreset, applyProfession, compute, effectiveRules, emptyCharacter, kitItems, normalize, resetStep, setProfessionPicks } from './calc.js'
 import SheetPanel from './SheetPanel.jsx'
@@ -167,6 +168,7 @@ export default function Creator({ rules: baseRules, user, loadRequest, clearLoad
         })()}
         <p className="small">Create or edit presets on the <a href="#presets">Presets</a> page.</p>
       </div>
+      <div className="card portraitbox"><PortraitEditor value={ch.portrait} onChange={(p) => set({ portrait: p })} /></div>
       <div className="grid2">
         <label>Character name<input value={ch.name} onChange={(e) => set({ name: e.target.value })} /></label>
         <label>Player<input value={ch.player} onChange={(e) => set({ player: e.target.value })} /></label>