Sb/4a2b builder screen

CHANGELOG.md

@@ -71,6 +71,16 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Under the hood
 
+- **The system builder opens.** OPEN IN BUILDER in SYSTEMS.EXE, or CREATE for a new system, opens
+  the builder over the whole window. Its sidebar is an icon rail like the map's, which widens to
+  show the names when you point at it: EXIT TO MAP where the power button sits, MY SYSTEMS, the
+  pages (SETUP, WORDS, FEATURES, STATS & RULES, CHARACTER SHEET, NPCS, TRY IT, PROBLEMS), each
+  saying what it is for, and SAVE and PUBLISH at the foot. MY SYSTEMS lists every system with its
+  badges, and picking one opens it in the builder. PROBLEMS lists what stops a system from being
+  published, and PUBLISH opens it instead of publishing while there are any. The bar along the top
+  names the system and its version; a status line along the bottom says when the draft was last
+  saved. The other pages say what they will hold; they come in the next updates.
+
 - **How the builder will save.** Changes are saved by themselves about five seconds after you
   stop editing, and always when you leave; SAVE saves at once and PUBLISH makes the system what
   the game runs. Leaving the builder only warns you when a save failed. An edit made while a save

frontend/src/App.tsx

@@ -62,6 +62,8 @@ import { useEnemyVehicles } from './hooks/useEnemyVehicles';
 import { hasVehicles } from './sheets/vehicleSystems';
 import { NpcLibrary } from './components/NpcLibrary';
 import { SystemsWindow } from './components/SystemsWindow';
+import { BuilderScreen } from './components/BuilderScreen';
+import type { BuilderPage } from './sheets/builderSession';
 import { NpcSheetWindow } from './components/NpcSheetWindow';
 import { TvPortrait } from './components/TvPortrait';
 import { headshotsForShape } from './headshots';
@@ -300,6 +302,8 @@ function App() {
   const [isNpcLibraryOpen, setIsNpcLibraryOpen] = useState(false);
   const [npcLibraryPos, setNpcLibraryPos] = useState(() => ({ x: window.innerWidth / 2 - 150, y: window.innerHeight / 2 - 200 }));
   const [isSystemsOpen, setIsSystemsOpen] = useState(false);
+  /** The system the builder is open on, taking over the window (4a2b), and the page it opened at. */
+  const [builder, setBuilder] = useState<{ id: string; page: BuilderPage } | null>(null);
   const [systemsPos, setSystemsPos] = useState(() => ({ x: window.innerWidth / 2 - 310, y: window.innerHeight / 2 - 260 }));
   const [openNpcSheet, setOpenNpcSheet] = useState<{ id: number; npc_label: string; token_shape?: string; locationId?: number } | null>(null);
   // NPC sheet linked to the currently selected token (admin) - drives
@@ -2330,6 +2334,19 @@ function App() {
                 pos={systemsPos}
                 setPos={setSystemsPos}
                 onClose={() => setIsSystemsOpen(false)}
+                onOpenBuilder={(id, page) => { setIsSystemsOpen(false); setBuilder({ id, page }); }}
+              />
+            )}
+            {builder && token && isPrimaryAdmin && (
+              <BuilderScreen
+                key={builder.id}
+                token={token}
+                systemId={builder.id}
+                startPage={builder.page}
+                running={gameSystem}
+                onExit={() => setBuilder(null)}
+                onOpenSystem={(id) => setBuilder({ id, page: 'setup' })}
+                onManageSystems={() => { setBuilder(null); setIsSystemsOpen(true); }}
               />
             )}
             {openPlayerSheetUser && token && (