// components.jsx — shared FocusDex UI components and the creature data model.
// ─── Creature data (subset — full 147 in docs; we feature 24 with details) ──
const CREATURES = [
{ num: 1, name: 'Codesprite', types: ['Code','Spirit'], rarity: 'Starter', sprite: 'Codesprite', stats: {HP:50,FP:70,STA:55,SPD:65}, move: 'Compile Strike', moveDesc: 'Hurls a packet of clean syntax. 25% chance to convert opponent bugs into features.', lore: ["Born the moment a programmer compiles their first working Hello World. Codesprites cling to active editors and feed on successful builds.","During a session, they perch on the corner of your screen and silently count your keystrokes.","Old programmers swear there is a single ur-Codesprite alive since BASIC. Sightings only on full moons."], spawn: 'Code editor, 9am–5pm', evo: [1,2,3] },
{ num: 2, name: 'Codecrawler', types: ['Code','Spirit'], rarity: 'Uncommon', sprite: 'Codecrawler', stats: {HP:75,FP:95,STA:75,SPD:75}, move: 'Stack Trace Lash', moveDesc: 'Whips a glowing call stack. Damage scales with opponent turns on field.', lore:[], evo:[1,2,3] },
{ num: 3, name: 'Codetitan', types: ['Code','Spirit'], rarity: 'Rare', sprite: 'Codetitan', stats: {HP:95,FP:115,STA:100,SPD:90}, move: 'Kernel Prayer', moveDesc: 'Reboots the battle. Removes all status effects, restores user FP to max.', lore:[], evo:[1,2,3] },
{ num: 4, name: 'Inkling', types: ['Doc','Art'], rarity: 'Starter', sprite: 'Inkling', stats: {HP:60,FP:60,STA:60,SPD:60}, move: 'Margin Note', moveDesc: 'Always crits if user hasn\'t been damaged this battle.', lore: ["Inklings hatch from puddles of ink that pool beneath unfinished drafts.","Bonded Inklings follow your sentences and leave tiny ink-paw prints in the margins.","An Inkling never tastes its own ink — the day it does, a true masterpiece is born."], spawn: 'Writing app, rainy day', evo:[4,5,6] },
{ num: 5, name: 'Inkwarden', types: ['Doc','Art'], rarity: 'Uncommon', sprite: 'Inkwarden', stats: {HP:80,FP:85,STA:85,SPD:70}, move: 'Inkflood', moveDesc: 'Lowers opponent SPD for 3 turns and reveals one hidden ability.', lore:[], evo:[4,5,6] },
{ num: 6, name: 'Inkdragoon', types: ['Doc','Art'], rarity: 'Rare', sprite: 'Inkdragoon', stats: {HP:100,FP:110,STA:100,SPD:90}, move: 'Final Draft', moveDesc: 'Locks opponent out of any move it has used this battle.', lore:[], evo:[4,5,6] },
{ num: 7, name: 'Pixibrush', types: ['Art','Pixel'], rarity: 'Starter', sprite: 'Pixibrush', stats: {HP:55,FP:65,STA:50,SPD:70}, move: 'Palette Swap', moveDesc: 'Randomly steals one of opponent\'s type affinities for 2 turns.', lore: ["Born when a designer commits to a brand color for the first time.","Bonded Pixibrushes hum in the hex code of the color you most recently picked.","Every Pixibrush carries one secret color no monitor can render."], spawn: 'Design app, golden hour', evo:[7,8,9] },
{ num: 8, name: 'Brushwing', types: ['Art','Pixel'], rarity: 'Uncommon', sprite: 'Brushwing', stats: {HP:75,FP:90,STA:70,SPD:90}, move: 'Gradient Dash', moveDesc: 'Hits up to 3 times; each hit raises user SPD.', lore:[], evo:[7,8,9] },
{ num: 9, name: 'Maestrix', types: ['Art','Pixel'], rarity: 'Rare', sprite: 'Maestrix', stats: {HP:90,FP:110,STA:95,SPD:105}, move: 'Magnum Opus', moveDesc: 'Heals fully, then deals damage equal to HP restored. Once per battle.', lore:[], evo:[7,8,9] },
{ num: 25, name: 'Bracketling', types: ['Code','Pixel'], rarity: 'Common', sprite: 'Bracketling', stats: {HP:55,FP:65,STA:60,SPD:60}, move: 'Scope Snap', moveDesc: 'Double damage vs opponents with Untested/Unsaved/Unread status.', lore: ["Bracketlings hatch from unclosed scope errors.","They love hanging out in indented code blocks, perfectly nested inside a for-loop.","Old engineers claim Bracketlings can taste tabs vs. spaces."], spawn: 'Xcode/VS Code, after 3 saves' },
{ num: 29, name: 'Stickynote', types: ['Doc','Pixel'], rarity: 'Common', sprite: 'Stickynote', stats: {HP:55,FP:60,STA:65,SPD:60}, move: 'Reminder Stick', moveDesc: 'Pastes a sticky onto opponent. They must skip their next move.', lore: ["Spawn in clusters and arrange into to-do lists across your desktop.","Finishing a task makes its Stickynote dance for ten seconds.","A trainer once caught one saying \"buy milk\". They never wrote those words."], spawn: 'Notion/Docs, new bullet list' },
{ num: 31, name: 'Wavelet', types: ['Sound','Pixel'],rarity: 'Common', sprite: 'Wavelet', stats: {HP:55,FP:65,STA:55,SPD:70}, move: 'Loop Trap', moveDesc: 'Opponent\'s last move auto-replays on their next turn.', lore: ["Born when a producer first nods their head to their own beat.","Live inside loop regions and pulse to whatever\'s playing.","Audio engineers swear they migrate toward unmastered tracks."], spawn: 'Logic/Ableton, 5+ loop plays' },
{ num: 39, name: 'Tickbug', types: ['Code','Spark'], rarity: 'Common', sprite: 'Tickbug', stats: {HP:55,FP:70,STA:55,SPD:80}, move: 'Green Pass', moveDesc: 'Heals self and guarantees next move hits. Stacks on consecutive use.', lore: ["Only emerge when a test suite goes green five-in-a-row.","Catching one feels weirdly emotional — many trainers report tearing up.","Two on the same screen click antennae together and double their pace."], spawn: 'Test suite, 5 passes in a row' },
{ num: 41, name: 'Sproutmit', types: ['Doc','Zen'], rarity: 'Common', sprite: 'Sproutmit', stats: {HP:60,FP:60,STA:70,SPD:55}, move: 'Commit Sapling', moveDesc: 'Plants a tree on the field. Each turn it stays, user gains +10 FP.', lore: ["Born when a real commit message is written — none of that \"asdf\" nonsense.","Feel safer in repos with at least one branch besides main.","A Sproutmit remembers every commit you\'ve ever made."], spawn: 'Git commit, message >20 chars' },
];
// silhouettes for the dex grid for not-yet-caught
const ALL_DEX_NUMS = Array.from({length: 60}, (_, i) => i + 1);
// ─── HP / Stat bars ─────────────────────────────────────────────────────────
function HPBar({ current, max, width = 220 }) {
const pct = Math.max(0, Math.min(100, (current / max) * 100));
return (
HP{current}/{max}
);
}
function StatRow({ label, value, color = '#2EE6A0', max = 120 }) {
const pct = Math.min(100, (value / max) * 100);
return (
{label}
{value}
);
}
// ─── Pokeball arsenal (inventory display) ───────────────────────────────────
function BallSlot({ Ball, count, label }) {
return (
);
}
// ─── Top status bar (live like a macOS menubar) ─────────────────────────────
function TopBar({ session, theme }) {
return (
FocusDexFileEditDexHelp
{session && (
{session}
)}
Wed 11:42
);
}
// ─── The notch (always-visible chrome) ──────────────────────────────────────
function Notch({ active, time, onClick, expanded, children }) {
return (