ui: LOCAL SYSTEM list staggers moons under their parent planet (v0.2.2)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.2.2 — 2026-09-28 21:02
+- LOCAL SYSTEM tab: explorable-worlds list now staggers moons under their parent planet (indented rows) — ASHFALL attached under BRIMSTONE, new PALEMOON moon under AURELLE; badges unchanged.
+
+## v0.2.1 — 2026-09-28 20:22
+- LOCAL SYSTEM tab: removed the system node graph (star/planets/moons) — the tab now shows only the explorable-worlds list at full panel width. WORLD MAP keeps its node graph; `components/ui/node-graph.tsx` unchanged and still in use there.
+
 ## v0.2.0 — 2026-09-28 19:19
 - Game interface template (visual only, zero game logic): the operations panel in `components/mission-control.tsx` is now seven tabs — WORLD MAP (NodeGraph of 10 placeholder solar systems linked by jump routes), LOCAL SYSTEM (NodeGraph of star + planets/moons plus an explorable-worlds list), CREW (crew cards with name/role and good/bad trait placeholders), SHIP SYSTEMS (system cards with inert EXPAND / UPGRADE / BUILD NEW affordances), SKILL TREE (tech cards unlocking new system builds/upgrades), MISSIONS (previous NEXT MISSION content), EVENT LOG (ship log terminal). All data is local placeholder constants.
 - Left column: VESSEL METRICS progress rings replaced with scificn Progress bracket bars; SHIP SYSTEMS status panel, header stat cards and right column unchanged.

components/mission-control.tsx

@@ -70,32 +70,18 @@ const worldMapEdges: NodeGraphEdge[] = [
   { from: 'mire', to: 'cinder' },
 ]
 
-// LOCAL SYSTEM — the current system (regenerated per save after each jump, later).
-const localSystemNodes: NodeGraphNode[] = [
-  { id: 'star', label: 'Kepler-442', x: 50, y: 50, status: 'ACTIVE', sublabel: 'G2 STAR' },
-  { id: 'aurelle', label: 'Aurelle', x: 18, y: 30, status: 'ACTIVE', sublabel: 'TERRESTRIAL' },
-  { id: 'brimstone', label: 'Brimstone', x: 76, y: 24, status: 'NEUTRAL', sublabel: 'GAS GIANT' },
-  { id: 'ashfall', label: 'Ashfall', x: 90, y: 52, status: 'WARNING', sublabel: 'MOON' },
-  { id: 'cinderrock', label: 'Cinderrock', x: 74, y: 80, status: 'NEUTRAL', sublabel: 'ROCKY' },
-  { id: 'driftband', label: 'Driftband', x: 30, y: 78, status: 'WARNING', sublabel: 'ASTEROID RING' },
-  { id: 'palemoon', label: 'Palemoon', x: 8, y: 54, status: 'NEUTRAL', sublabel: 'MOON' },
-]
-
-const localSystemEdges: NodeGraphEdge[] = [
-  { from: 'star', to: 'aurelle' },
-  { from: 'star', to: 'brimstone' },
-  { from: 'brimstone', to: 'ashfall', label: 'MOON' },
-  { from: 'star', to: 'cinderrock' },
-  { from: 'star', to: 'driftband' },
-  { from: 'aurelle', to: 'palemoon', label: 'MOON' },
-]
-
+// LOCAL SYSTEM — explorable worlds of the current system (regenerated per save after each jump, later).
 const explorablePlanets = [
-  { name: 'AURELLE', type: 'TERRESTRIAL // OCEAN CONTINENTS', state: 'UNEXPLORED' as const },
-  { name: 'BRIMSTONE', type: 'GAS GIANT // CLOUD DECKS', state: 'SCANNED' as const },
-  { name: 'ASHFALL (MOON)', type: 'VOLCANIC MOON // SULFUR VEINS', state: 'UNEXPLORED' as const },
-  { name: 'CINDERROCK', type: 'ROCKY // IRON RICH', state: 'UNEXPLORED' as const },
-  { name: 'DRIFTBAND', type: 'ASTEROID FIELD // HAZARD', state: 'HAZARD' as const },
+  {
+    name: 'AURELLE', type: 'TERRESTRIAL // OCEAN CONTINENTS', state: 'UNEXPLORED' as const,
+    moons: [{ name: 'PALEMOON', type: 'ICE MOON // FROST PLAINS', state: 'UNEXPLORED' as const }],
+  },
+  {
+    name: 'BRIMSTONE', type: 'GAS GIANT // CLOUD DECKS', state: 'SCANNED' as const,
+    moons: [{ name: 'ASHFALL', type: 'VOLCANIC MOON // SULFUR VEINS', state: 'UNEXPLORED' as const }],
+  },
+  { name: 'CINDERROCK', type: 'ROCKY // IRON RICH', state: 'UNEXPLORED' as const, moons: [] },
+  { name: 'DRIFTBAND', type: 'ASTEROID FIELD // HAZARD', state: 'HAZARD' as const, moons: [] },
 ]
 
 const crew = [
@@ -388,17 +374,7 @@ export function MissionControl() {
 
                   {/* LOCAL SYSTEM TAB */}
                   <TabsContent value="local-system" style={{ margin: 0, padding: '1rem' }}>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-                      <NodeGraph
-                        nodes={localSystemNodes}
-                        edges={localSystemEdges}
-                        variant="ACTIVE"
-                        title="KEPLER DRIFT // LOCAL SYSTEM (PLACEHOLDER)"
-                        height={280}
-                        style={{ width: '100%' }}
-                      />
-
-                      <div
+                    <div
                         style={{
                           border: '1px solid var(--border)',
                           background: 'var(--surface)',
@@ -418,31 +394,39 @@ export function MissionControl() {
                         >
                           EXPLORABLE WORLDS // FIND THINGS HERE (PLACEHOLDER)
                         </div>
-                        {explorablePlanets.map((planet, i) => (
+                        {explorablePlanets.flatMap((planet) => [
+                          { name: planet.name, type: planet.type, state: planet.state, depth: 0 },
+                          ...planet.moons.map((moon) => ({
+                            name: moon.name,
+                            type: moon.type,
+                            state: moon.state,
+                            depth: 1,
+                          })),
+                        ]).map((row, i, rows) => (
                           <div
-                            key={planet.name}
+                            key={row.name}
                             style={{
                               display: 'flex',
                               justifyContent: 'space-between',
                               alignItems: 'center',
                               gap: '0.5rem',
-                              padding: '0.6rem 0.75rem',
+                              padding: row.depth
+                                ? '0.6rem 0.75rem 0.6rem 1.75rem'
+                                : '0.6rem 0.75rem',
                               borderBottom:
-                                i < explorablePlanets.length - 1
-                                  ? '1px solid var(--border)'
-                                  : 'none',
+                                i < rows.length - 1 ? '1px solid var(--border)' : 'none',
                             }}
                           >
                             <div style={{ overflow: 'hidden' }}>
                               <div
                                 style={{
                                   fontSize: '0.68rem',
-                                  color: 'var(--text-secondary)',
+                                  color: row.depth ? 'var(--text-muted)' : 'var(--text-secondary)',
                                   letterSpacing: '0.04em',
                                   textTransform: 'uppercase',
                                 }}
                               >
-                                {planet.name}
+                                {row.name}
                               </div>
                               <div
                                 style={{
@@ -452,24 +436,23 @@ export function MissionControl() {
                                   marginTop: '2px',
                                 }}
                               >
-                                {planet.type}
+                                {row.type}
                               </div>
                             </div>
                             <Badge
                               variant={
-                                planet.state === 'UNEXPLORED'
+                                row.state === 'UNEXPLORED'
                                   ? 'SCANNING'
-                                  : planet.state === 'HAZARD'
+                                  : row.state === 'HAZARD'
                                     ? 'WARNING'
                                     : 'ACTIVE'
                               }
                             >
-                              {planet.state}
+                              {row.state}
                             </Badge>
                           </div>
                         ))}
                       </div>
-                    </div>
                   </TabsContent>
 
                   {/* CREW TAB */}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "space-wanderer",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",