Give NPCs their own editor section and unify the world-state boxes

NPCs are still part of stat_schema, but editing them inside the World State
panel meant a nested dashed sub-box among four flat stat lists. They now get
a top-level "Cast & NPCs" section: one card per NPC (avatar, name, npc.<id>
address, triggers, description, its own stats) in a responsive grid, saved
through the same schema path via the new NpcEditor/addNpc exports.

The panel's real inconsistency was CSS, not layout: the global field rule
keys off input[type="..."], which never matches the editor's typeless key and
description inputs, so those rendered with browser defaults beside properly
styled number boxes. One scoped base rule now covers the whole editor and
every entry is the same tile with a caption over each control.

Two bugs fell out of that: .se-band-n (0,1,0) always lost to
input[type="number"] (0,1,1), so band bounds rendered full-width; and the
exclusion has to be :not(:where([type="checkbox"])) because a plain :not()
inherits its argument's specificity and swallows every override.

In Play, NPCs group under a single "Cast" heading as compact plates instead
of each becoming another top-level group in the rail.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UeQVy5bEjLhfgWNc27Efet
This commit is contained in:
parththakkar106
2026-08-02 19:46:32 +05:30
co-authored by Claude Opus 5
parent d66fd1d6a2
commit be6dbb0f24
5 changed files with 361 additions and 109 deletions
+12
View File
@@ -68,6 +68,18 @@ function monogram(title) {
return letters.join('').toUpperCase()
}
/** Initials for an NPC's avatar disc — "Bandit Leader" → BL, "gwen" → GW.
*
* Deliberately not `monogram`: that one drops short words, which is right for
* scenario titles and wrong for names, and it has no id to fall back on.
*/
export function npcInitials(name, id) {
const src = String(name || id || '?').trim() || '?'
const words = src.split(/[\s_-]+/).filter(Boolean)
const letters = words.length > 1 ? words[0][0] + words[1][0] : src.slice(0, 2)
return letters.toUpperCase()
}
/** A scenario's plate: uploaded picture, else emoji, else generated art.
*
* `large` is for the Continue cards, where the plate carries more weight. The