sindicate 0.11.0 → 0.13.0

package/src/ui/cartograph.js

@@ -26,7 +26,11 @@ let heightAt = () => 0, roadDistance = () => 1e9, fbm = () => 0;
 let ROADS = [], RIVERS = [], LAKES = [], TOWN = null, RAIL_PATHS = [];
 let OUTPOSTS = [], CAMPFIRE_SPOTS = [], COACH_STOP = null, STOPS = [], DUSTWATER = [];
 export let WORLD_SIZE = 4320;
+// Registration order must NOT be load-bearing: every setter invalidates the derived
+// memos (shopSpots/allPOIs/allBuildings), so data landing after a first read still lands.
+function invalidateChart() { _shops = _pois = _blds = null; }
 export function setChartWorld(w = {}) {
+  invalidateChart();
   if (w.heightAt) heightAt = w.heightAt;
   if (w.roadDistance) roadDistance = w.roadDistance;
   if (w.fbm) fbm = w.fbm;
@@ -47,6 +51,7 @@ export function setChartWorld(w = {}) {
 let AREAS = [], RAILWAY_AREAS = [], COUNTY_DEFS = [];
 let shopIdFor = () => null, SHOPS = {}, isMerchant = () => false;
 export function setChartGazetteer(g = {}) {
+  invalidateChart();
   if (g.areas) AREAS = g.areas;
   if (g.railwayAreas) RAILWAY_AREAS = g.railwayAreas;
   if (g.countyDefs) COUNTY_DEFS = g.countyDefs;
@@ -59,6 +64,7 @@ export function setChartGazetteer(g = {}) {
 // worked only game-side; an engine file cannot glob a game's data directory).
 let SETTLEMENTS = [], SETTLEMENT_AREAS = {};
 export function setChartSettlements(s = {}) {
+  invalidateChart();
   if (s.settlements) SETTLEMENTS = s.settlements;
   if (s.settlementAreas) SETTLEMENT_AREAS = s.settlementAreas;
 }

package/src/ui/deathScreen.js

@@ -57,7 +57,7 @@ export function showDeathScreen(opts = {}) {
       } catch (e) { /* tainted — leave as drawn */ }
     };
     img.onerror = () => { emblem.style.display = 'none'; };
-    img.src = `${UI}/banner.png`;
+    img.src = opts.emblem ?? `${UI}/banner.png`;
   }
   band.appendChild(emblem);
 
@@ -67,7 +67,7 @@ export function showDeathScreen(opts = {}) {
 
   content.appendChild(el('div',
     'color:#ddd7cc;font-size:min(8vw,76px);letter-spacing:min(1.4vw,10px);font-weight:700;line-height:1;'
-    + 'text-shadow:0 1px 0 rgba(255,255,255,0.28),0 2px 0 #5a1712,0 3px 3px rgba(0,0,0,0.6),0 0 30px rgba(0,0,0,0.45);', 'YOU DIED'));
+    + 'text-shadow:0 1px 0 rgba(255,255,255,0.28),0 2px 0 #5a1712,0 3px 3px rgba(0,0,0,0.6),0 0 30px rgba(0,0,0,0.45);', opts.title ?? 'YOU DIED'));
   const dv = el('div', 'margin:14px 0 15px;line-height:0;'); dv.innerHTML = DIVIDER_SVG; content.appendChild(dv);
 
   // options — small, tight, centred: [icon] label
@@ -89,7 +89,7 @@ export function showDeathScreen(opts = {}) {
     rows.push({ btn, fn, el: row, badge });
   };
   if (opts.hasSave) addRow('LOAD LAST SAVE', 'cross', opts.onLoad);
-  addRow('WAKE AT THE WELL', opts.hasSave ? 'square' : 'cross', opts.onRevive);
+  addRow(opts.reviveLabel ?? 'WAKE AT THE WELL', opts.hasSave ? 'square' : 'cross', opts.onRevive);
   addRow('QUIT TO TITLE', 'circle', opts.onQuit);
 
   let raf = 0, closed = false, first = true, prev = {}, lastMode = false;

package/src/ui/dialogue.js

@@ -27,8 +27,22 @@
 // back for free, without an integrator edit.
 // dialogue trees are GAME data: setDialogueTrees(treeForFn) — (npc) => tree
 let treeFor = () => null;
+let topicInjector = null;
+export function setDialogueTopicInjector(fn) { topicInjector = fn; }
 export function setDialogueTrees(fn) { treeFor = fn ?? (() => null); }
+// NODE-GRAPH MODE (fable-shaped trees): a tree with { nodes, start(game) } renders per-node
+// instead of per-topic. The option side-effect VOCABULARY is game data:
+//   setDialogueOptionHandler((opt, ctx) => bool) — ctx = { npc, game, dialogue, goto(id),
+//     close(), render(line, [{label,onPick}], byeLabel) }; return true = handled, false =
+//     the engine falls through to opt.next (null → close)
+//   setDialogueNodeHook((npc, id, {text,options}, game) => {text,options}|null) — flavour a
+//     node before it renders (mood lines, romance extras)
+let optionHandler = null;
+let nodeHook = null;
+export function setDialogueOptionHandler(fn) { optionHandler = fn; }
+export function setDialogueNodeHook(fn) { nodeHook = fn; }
 import { padMode, buttonCanvas } from './menuHints.js';
+import { THEME } from './theme.js';
 
 // ── the two-shot, in numbers ────────────────────────────────────────────────────────────────────
 // The lens stands in FRONT of the NPC (he has already turned to face the player, so his front faces
@@ -102,19 +116,18 @@ export class Dialogue {
 
   open(npc) {
     if (!npc) return;
-    if (this.ui.dialogueOpen && this.npc === npc) { this._render(pick(this.tree.openers)); return; }
-    this.npc = npc;
-    this.tree = treeFor(npc);
-    // A HOUSED GUNHAND (COPPERHEAD crew at the Halloway place) always offers the ride-along toggle,
-    // appended non-destructively over WHATEVER tree he's using — the merchant counter, a mission
-    // stage, his own lines — so taking August along never costs you his shop.
-    if (npc._atHouse && npc.def?.gunhand) {
-      const g = this.ui.game;
-      this.tree = { ...this.tree, topics: [...(this.tree.topics ?? []), npc._follow
-        ? { q: `Head on home.`, a: [`Holler when it turns interesting again.`], action: (n) => g._toggleRideAlong?.(n) }
-        : { q: `Ride with me.`, a: [`(A check of the load, a tug of the hat, and he falls in.)`], action: (n) => g._toggleRideAlong?.(n) },
-      ] };
+    if (this.ui.dialogueOpen && this.npc === npc) {
+      if (this.tree?.nodes) this._renderNode(this.tree.start?.(this.game) ?? 'hello');
+      else this._render(pick(this.tree.openers));
+      return;
     }
+    const tree = treeFor(npc);
+    if (!tree) return;                // an NPC with nothing to say opens nothing
+    this.npc = npc;
+    this.tree = tree;
+    // game hook: append/modify topics per-NPC at open time (campaign specials — a ride-along
+    // toggle, a mission-gated ask) without the game forking treeFor for one conversation
+    if (topicInjector) this.tree = topicInjector(npc, this.tree, this.ui.game) ?? this.tree;
     this._asked = new Set();          // topics already put to him THIS conversation — they drop off the
                                       // list once answered, so a chat PROGRESSES toward "So long"
                                       // instead of handing back the same three buttons forever.
@@ -129,7 +142,8 @@ export class Dialogue {
     this._mx = input?.mouse?.x ?? 0; this._my = input?.mouse?.y ?? 0;
     this._engaged = false;
     this.el.root.style.display = 'block';
-    this._render(pick(this.tree.openers));
+    if (this.tree.nodes) this._renderNode(this.tree.start?.(this.game) ?? 'hello');
+    else this._render(pick(this.tree.openers));
     this.game.audio?.play?.('ui');
   }
 
@@ -156,7 +170,9 @@ export class Dialogue {
   // Called once per frame by the integrator while this panel is the active one. Mouse works without
   // it (native :hover + onclick); this drives keys/pad and consumes Escape.
   handleKey(input) {
-    if (!this.ui.dialogueOpen || !input) return;
+    // !npc: the flag is up but the conversation isn't OURS (a game-scripted panel set
+    // ui.dialogueOpen itself) — its own nav drives it; consuming its Escape strands it
+    if (!this.ui.dialogueOpen || !input || !this.npc) return;
     const fresh = this._navFresh; this._navFresh = false;
     this._paintByeKey();   // swap the way-out keycap live if a pad was (un)plugged
 
@@ -289,6 +305,62 @@ export class Dialogue {
     this._tt.x = chosen.tx; this._tt.y = chosen.ty; this._tt.z = chosen.tz;
   }
 
+  // ── node-graph mode ───────────────────────────────────────────────────────────────────────────
+  _renderNode(id) {
+    if (!id) return this.close();
+    const node = this.tree?.nodes?.[id];
+    if (!node) return this.close();
+    this._nodeId = id;
+    let text = node.text, options = [...(node.options ?? [])];
+    if (nodeHook) {
+      const out = nodeHook(this.npc, id, { text, options }, this.game);
+      if (out) { text = out.text ?? text; options = out.options ?? options; }
+    }
+    this._renderCustom(text, options.map((o) => ({ label: o.label, onPick: () => this._pickNode(o) })), node.bye ?? this.tree.bye);
+  }
+
+  _pickNode(opt) {
+    const ctx = {
+      npc: this.npc, game: this.game, dialogue: this,
+      goto: (nid) => this._renderNode(nid),
+      close: () => this.close(),
+      render: (line, options, byeLabel) => this._renderCustom(line, options, byeLabel),
+    };
+    if (optionHandler?.(opt, ctx)) return;
+    if (opt.next !== undefined) { if (opt.next === null) return this.close(); return this._renderNode(opt.next); }
+    this.close();
+  }
+
+  // an explicit line + option list (node mode and game-driven sub-screens like boast offers)
+  _renderCustom(line, options, byeLabel) {
+    const opts = this.el.opts;
+    this.el.name.textContent = this.npc?.name || 'Stranger';
+    this.el.say.textContent = line || '';
+    opts.innerHTML = '';
+    let k = 0;
+    const add = (label, fn, cls) => {
+      const b = document.createElement('button');
+      b.className = 'dlg-opt' + (cls ? ' ' + cls : '');
+      b.textContent = label;
+      b.onmouseenter = () => { this._engaged = false; };
+      b.onclick = () => { this.game.audio?.play?.('ui'); fn(); };
+      opts.appendChild(b);
+      return b;
+    };
+    for (const o of options ?? []) {
+      k++;
+      const b = add(`${k}. ${o.label}`, () => o.onPick?.());
+      b.dataset.num = String(k);
+    }
+    const bye = add(byeLabel ?? 'So long.', () => this.close(), 'dlg-bye');
+    this._byeKey = document.createElement('span'); this._byeKey.className = 'dlg-byekey';
+    bye.insertBefore(this._byeKey, bye.firstChild);
+    this._byeMode = undefined; this._paintByeKey();
+    this._navFresh = true;
+    this._idx = 0;
+    [...opts.children].forEach((b) => b.classList.remove('navsel'));
+  }
+
   // ── rendering ─────────────────────────────────────────────────────────────────────────────────
   _opts() { return [...this.el.opts.querySelectorAll('button')].filter((b) => !b.disabled); }
 
@@ -428,7 +500,7 @@ export class Dialogue {
       #dlg .dlg-byekey { display:inline-flex; align-items:center; vertical-align:middle; margin-right:9px; }
       #dlg .dlg-byekey.kbd { width:18px; height:18px; justify-content:center; line-height:17px; font-size:12px;
         font-weight:700; color:#f4e3b0; border:1px solid #8a6a3a; border-radius:4px; background:rgba(40,28,14,0.92); }
-    `;
+    ` + (THEME.dialogueCss || '');
     document.head.appendChild(css);
   }
 }

package/src/ui/intro.js

@@ -14,7 +14,7 @@ const FADE = 1300;   // ms crossfade between beats
 
 // The prologue. Each beat is one image + one line. Sets up the county, the crime, the lawless
 // vacuum, and drops the player in — straight into Deputy Toomey's first job.
-// The prologue script is GAME data: registerIntroBeats([{ img, line }, ...])
+// The prologue script is GAME data: registerIntroBeats([{ img, text }, ...])
 let BEATS = [];
 export function registerIntroBeats(beats) { BEATS = beats ?? []; }
 

package/src/ui/pauseMenu.js

@@ -6,11 +6,22 @@
 import { getQualityName, setQualityName, PRESETS } from '../core/quality.js';
 import { renderHints, refreshHints, padMode } from './menuHints.js';
 import { showSaveLoad } from './saveLoadScreen.js';
+import { THEME } from './theme.js';
 
-const GOLD = '#e8c87a';
-const TXT = '#ecdfc2';
-const MUT = '#b6a577';
-const FONT = "Copperplate,'Copperplate Gothic Bold','Palatino','Book Antiqua',Georgia,serif";
+// PAUSE CONTENT is GAME data (setPauseContent in engineSetup):
+//   extraItems(game, {resume,close}) → [{label, action}] — game pages (CHARACTER/JOURNAL…)
+//     listed after RESUME; typically resume() then open the game's own screen
+//   settingsRows({game, slider, toggleRow}) → rows appended to the Settings panel
+//   onQualityChange(name, game) — live-apply hook (default: takes effect next load)
+//   saves — adapter replacing the game.missions default: { hasSave, list, saveSlots,
+//     loadSlots, moneyLabel, defaultTitle, onSave/onLoad/onDelete(slot, game) }
+let PAUSE = { saves: null, extraItems: null, settingsRows: null, onQualityChange: null };
+export function setPauseContent(c = {}) { PAUSE = { ...PAUSE, ...c }; }
+
+const GOLD = THEME.gold;
+const TXT = THEME.text;
+const MUT = THEME.mut;
+const FONT = THEME.font;
 const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
 const CORNER_SVG = `<svg viewBox="0 0 44 44" width="30" height="30" fill="none" stroke="${GOLD}" stroke-linecap="round"><path d="M3 24 V3 H24" stroke-width="2"/><path d="M9 19 V9 H19" stroke-width="1" opacity="0.6"/><path d="M3 3 h9 l-9 9 z" fill="${GOLD}" stroke="none"/></svg>`;
 const DIVIDER_SVG = `<svg viewBox="0 0 220 14" width="200" height="12" fill="none" stroke="${GOLD}" stroke-width="1.4" stroke-linecap="round"><line x1="8" y1="7" x2="94" y2="7"/><line x1="126" y1="7" x2="212" y2="7"/><circle cx="8" cy="7" r="1.6" fill="${GOLD}"/><circle cx="212" cy="7" r="1.6" fill="${GOLD}"/><path d="M110 1 l7 6 l-7 6 l-7 -6 z" fill="${GOLD}"/></svg>`;
@@ -22,11 +33,15 @@ function el(tag, css, text) {
   return e;
 }
 function framedPanel(w = 420) {
-  const p = el('div', `position:relative;width:${w}px;max-width:90vw;padding:28px 36px 24px;color:${TXT};border:1px solid rgba(232,200,122,0.55);border-radius:3px;`
-    + 'background:linear-gradient(157deg,#241b11 0%,#160f09 58%,#0d0805 100%);box-shadow:0 26px 74px rgba(0,0,0,0.86);');
-  p.appendChild(el('div', 'position:absolute;inset:6px;border:1px solid rgba(232,200,122,0.26);border-radius:2px;pointer-events:none;'));
-  const c = (pos, rot) => { const d = el('div', `position:absolute;${pos}width:30px;height:30px;pointer-events:none;transform:rotate(${rot}deg);`); d.innerHTML = CORNER_SVG; p.appendChild(d); };
-  c('left:3px;top:3px;', 0); c('right:3px;top:3px;', 90); c('right:3px;bottom:3px;', 180); c('left:3px;bottom:3px;', 270);
+  const ground = THEME.panelCss
+    ?? `color:${TXT};border:1px solid rgba(232,200,122,0.55);border-radius:3px;`
+    + 'background:linear-gradient(157deg,#241b11 0%,#160f09 58%,#0d0805 100%);box-shadow:0 26px 74px rgba(0,0,0,0.86);';
+  const p = el('div', `position:relative;width:${w}px;max-width:90vw;padding:28px 36px 24px;${ground}`);
+  if (THEME.filigree) {
+    p.appendChild(el('div', 'position:absolute;inset:6px;border:1px solid rgba(232,200,122,0.26);border-radius:2px;pointer-events:none;'));
+    const c = (pos, rot) => { const d = el('div', `position:absolute;${pos}width:30px;height:30px;pointer-events:none;transform:rotate(${rot}deg);`); d.innerHTML = CORNER_SVG; p.appendChild(d); };
+    c('left:3px;top:3px;', 0); c('right:3px;top:3px;', 90); c('right:3px;bottom:3px;', 180); c('left:3px;bottom:3px;', 270);
+  }
   return p;
 }
 
@@ -45,8 +60,10 @@ export function showPauseMenu(game, opts = {}) {
   const close = () => { if (closed) return; closed = true; cancelAnimationFrame(raf); window.removeEventListener('keydown', onKey); root.remove(); };
   const resume = () => { close(); opts.onResume?.(); };
 
-  const hl = (b, on) => { b.style.background = on ? GOLD : 'rgba(232,200,122,0.06)'; b.style.color = on ? '#1a1207' : TXT; b.style.borderColor = on ? GOLD : 'rgba(232,200,122,0.45)'; };
-  const BTN = `padding:9px 20px;border:1px solid rgba(232,200,122,0.45);border-radius:5px;cursor:pointer;font-family:inherit;letter-spacing:2px;font-size:15px;background:rgba(232,200,122,0.06);color:${TXT};transition:background .12s,color .12s;`;
+  const ACT = THEME.btnActive ?? { bg: GOLD, color: '#1a1207', border: GOLD };
+  const OFF = THEME.btnCss ? { bg: '', color: '', border: '' } : { bg: 'rgba(232,200,122,0.06)', color: TXT, border: 'rgba(232,200,122,0.45)' };
+  const hl = (b, on) => { b.style.background = on ? ACT.bg : OFF.bg; b.style.color = on ? ACT.color : OFF.color; b.style.borderColor = on ? ACT.border : OFF.border; };
+  const BTN = THEME.btnCss ?? `padding:9px 20px;border:1px solid rgba(232,200,122,0.45);border-radius:5px;cursor:pointer;font-family:inherit;letter-spacing:2px;font-size:15px;background:rgba(232,200,122,0.06);color:${TXT};transition:background .12s,color .12s;`;
   const rowWrap = () => el('div', 'display:flex;align-items:center;gap:14px;margin:12px 0;padding:5px 6px;border-radius:5px;');
   const rowLabel = (t) => el('div', `width:110px;text-align:right;color:${MUT};font-size:14px;letter-spacing:1px;text-transform:uppercase;`, t);
 
@@ -66,9 +83,9 @@ export function showPauseMenu(game, opts = {}) {
     const wrap = rowWrap(); wrap.appendChild(rowLabel('Graphics'));
     const btns = el('div', 'display:flex;gap:8px;flex:1;'); const names = ['low', 'medium', 'high'];
     const paintQ = () => [...btns.children].forEach((b, i) => hl(b, getQualityName() === names[i]));
-    names.forEach((nm) => { const b = el('button', `flex:1;${BTN}text-align:center;`, PRESETS[nm].label); b.onclick = () => { setQualityName(nm); paintQ(); }; btns.appendChild(b); });
+    names.forEach((nm) => { const b = el('button', `flex:1;${BTN}text-align:center;`, PRESETS[nm].label); b.onclick = () => { setQualityName(nm); PAUSE.onQualityChange?.(nm, game); paintQ(); }; btns.appendChild(b); });
     paintQ(); wrap.appendChild(btns);
-    const step = (d) => { const i = clamp(names.indexOf(getQualityName()) + d, 0, 2); setQualityName(names[i]); paintQ(); };
+    const step = (d) => { const i = clamp(names.indexOf(getQualityName()) + d, 0, 2); setQualityName(names[i]); PAUSE.onQualityChange?.(names[i], game); paintQ(); };
     return { el: wrap, focus: () => (wrap.style.background = 'rgba(232,200,122,0.1)'), blur: () => (wrap.style.background = 'none'), left: () => step(-1), right: () => step(1) };
   };
   const slider = (label, get, set) => {
@@ -100,13 +117,14 @@ export function showPauseMenu(game, opts = {}) {
     const p = framedPanel(500); titleBar(p, 'SETTINGS');
     const rows = [
       gfxRow(),
-      slider('Music', () => +(localStorage.getItem('av_volMusic') ?? 0.55), (v) => game.music?.setMusicVolume?.(v)),
+      slider('Music', () => +(localStorage.getItem('av_volMusic') ?? 0.55), (v) => { try { localStorage.setItem('av_volMusic', v); } catch (e) {} game.music?.setMusicVolume?.(v); }),
       slider('Ambience', () => +(localStorage.getItem('av_volAmb') ?? 0.6), (v) => { try { localStorage.setItem('av_volAmb', v); } catch (e) {} game.ambience?.setVolume?.(v); }),
       slider('Effects', () => +(localStorage.getItem('av_volSfx') ?? 0.85), (v) => game.audio?.setSfxVolume?.(v)),
       slider('Look Speed', () => clamp((game.player.camSensitivity - 0.25) / 2.75, 0, 1), (v) => { game.player.camSensitivity = +(0.25 + v * 2.75).toFixed(2); try { localStorage.setItem('av_camSens', game.player.camSensitivity); } catch (e) {} }),
       toggleRow('Invert Y', () => !!game.player.invertY, (on) => { game.player.invertY = on; try { localStorage.setItem('av_invertY', on ? '1' : '0'); } catch (e) {} }),
       toggleRow('Fullscreen', () => !!document.fullscreenElement, (on) => { try { if (on && !document.fullscreenElement) document.documentElement.requestFullscreen?.(); else if (!on && document.fullscreenElement) document.exitFullscreen?.(); } catch (e) {} }),
     ];
+    rows.push(...(PAUSE.settingsRows?.({ game, slider, toggleRow }) ?? []));
     rows.forEach((r) => p.appendChild(r.el));
     p.appendChild(el('div', `font-size:12px;color:${MUT};opacity:0.7;margin-top:10px;text-align:center;`, 'Graphics takes full effect on the next load.'));
     const f = footer(p);
@@ -119,6 +137,14 @@ export function showPauseMenu(game, opts = {}) {
   // while it's up so the two don't both drive the pad.
   let sub = false;
   const doSave = () => {
+    if (PAUSE.saves) {
+      const S = PAUSE.saves;
+      sub = true;
+      showSaveLoad({ mode: 'save', slots: S.saveSlots, moneyLabel: S.moneyLabel, defaultTitle: S.defaultTitle,
+        list: S.list, onSave: (slot) => S.onSave?.(slot, game), onDelete: (slot) => S.onDelete?.(slot, game),
+        onClose: () => { sub = false; } });
+      return;
+    }
     if (!game.missions) { toast('Nothing to save yet.'); return; }
     sub = true;
     showSaveLoad({ mode: 'save', list: () => game.missions.listSaves(),
@@ -127,6 +153,15 @@ export function showPauseMenu(game, opts = {}) {
       onClose: () => { sub = false; } });
   };
   const doLoad = () => {
+    if (PAUSE.saves) {
+      const S = PAUSE.saves;
+      if (S.hasSave && !S.hasSave()) { toast('No saved game found.'); return; }
+      sub = true;
+      showSaveLoad({ mode: 'load', slots: S.loadSlots ?? S.saveSlots, moneyLabel: S.moneyLabel, defaultTitle: S.defaultTitle,
+        list: S.list, onLoad: (slot) => { sub = false; resume(); S.onLoad?.(slot, game); },
+        onDelete: (slot) => S.onDelete?.(slot, game), onClose: () => { sub = false; } });
+      return;
+    }
     if (!game.missions?.hasSave?.()) { toast('No saved game found.'); return; }
     sub = true;
     showSaveLoad({ mode: 'load', list: () => game.missions.listSaves(),
@@ -139,6 +174,7 @@ export function showPauseMenu(game, opts = {}) {
   titleBar(mainPanel, 'PAUSED');
   const items = [
     menuItem('RESUME', resume),
+    ...(PAUSE.extraItems?.(game, { resume, close }) ?? []).map((x) => menuItem(x.label, x.action)),
     menuItem('SAVE GAME', () => { doSave(); }),
     menuItem('LOAD GAME', () => { doLoad(); }),
     menuItem('SETTINGS', openSettings),

package/src/ui/saveLoadScreen.js

@@ -7,12 +7,13 @@
 // opts: { mode:'load'|'save', slots:[…ids], list:()=>saves, onLoad(slot), onSave(slot,name),
 //         onDelete(slot), onClose() }. Returns { close }.
 import { renderHints, refreshHints, padMode } from './menuHints.js';
+import { THEME } from './theme.js';
 
 const UI = '/assets/ui/menu';
-const GOLD = '#e8c87a';
-const TXT = '#ecdfc2';
-const MUT = '#b6a577';
-const FONT = "Copperplate,'Copperplate Gothic Bold','Palatino','Book Antiqua',Georgia,serif";
+const GOLD = THEME.gold;
+const TXT = THEME.text;
+const MUT = THEME.mut;
+const FONT = THEME.font;
 
 function el(tag, css, text) {
   const e = document.createElement(tag);
@@ -27,7 +28,7 @@ export function showSaveLoad(opts = {}) {
   const save = opts.mode === 'save';
   const slotIds = opts.slots || ['1', '2', '3', '4', '5', '6'];
 
-  const root = el('div', `position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;font-family:${FONT};background:#0a0705;`);
+  const root = el('div', `position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;font-family:${FONT};background:${THEME.screenBg};`);
   root.appendChild(el('div', `position:absolute;inset:0;background:#000 url(${UI}/title_bg.jpg) center/cover;opacity:0.08;`));
   root.appendChild(el('div', 'position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,5,0.86),rgba(10,7,5,0.96));'));
   const head = el('div', 'position:relative;padding:44px 60px 16px;border-bottom:1px solid rgba(232,200,122,0.22);flex:none;');
@@ -49,17 +50,20 @@ export function showSaveLoad(opts = {}) {
 
   const showDetail = (rec) => {
     if (!rec) { detail.innerHTML = `<div style="flex:1;display:flex;align-items:center;justify-content:center;color:${MUT};letter-spacing:2px">${save ? 'NEW SAVE' : 'EMPTY'}</div>`; return; }
-    const img = rec.thumb ? `<img src="${rec.thumb}" style="width:100%;height:100%;object-fit:cover">`
-      : `<div style="flex:1;display:flex;align-items:center;justify-content:center;color:${MUT};font-size:12px;letter-spacing:3px">NO PREVIEW</div>`;
-    detail.innerHTML = `<div style="flex:1;min-height:190px;background:linear-gradient(135deg,#1a130b,#0d0906);display:flex;overflow:hidden">${img}</div>`
-      + `<div style="padding:20px 24px"><div style="color:${GOLD};font-size:22px;letter-spacing:2px;font-weight:700">${rec.name || rec.title || 'Dustwater'}</div>`
-      + `<div style="color:${MUT};font-size:13px;margin-top:8px;line-height:1.9">${rec.auto ? 'Autosave · ' : ''}${fmtDate(rec.savedAt)}<br>Played ${fmtTime(rec.playtime)} &nbsp;·&nbsp; Purse $${rec.money ?? 0}${rec.objective ? '<br>' + rec.objective : ''}</div></div>`;
+    const img = rec.thumb ? `<img src="${rec.thumb}" style="width:100%;height:100%;object-fit:cover;display:block">`
+      : `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:${MUT};font-size:12px;letter-spacing:3px">NO PREVIEW</div>`;
+    // a FRAMED 16:9 plate, not a full-pane stretch — a small thumb blown to the pane reads as mush
+    detail.innerHTML = `<div style="padding:22px 24px 0"><div style="aspect-ratio:16/9;max-height:340px;margin:0 auto;`
+      + `background:linear-gradient(135deg,#1a130b,#0d0906);border:1px solid rgba(232,200,122,0.28);border-radius:3px;`
+      + `box-shadow:0 10px 30px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.35);overflow:hidden">${img}</div></div>`
+      + `<div style="padding:20px 24px"><div style="color:${GOLD};font-size:22px;letter-spacing:2px;font-weight:700">${rec.name || rec.title || opts.defaultTitle || 'Saved game'}</div>`
+      + `<div style="color:${MUT};font-size:13px;margin-top:8px;line-height:1.9">${rec.auto ? 'Autosave · ' : ''}${fmtDate(rec.savedAt)}<br>Played ${fmtTime(rec.playtime)} &nbsp;·&nbsp; ${opts.moneyLabel ?? 'Purse $'}${rec.money ?? 0}${rec.objective ? '<br>' + rec.objective : ''}</div></div>`;
   };
 
   const rebuild = () => {
     const saves = opts.list ? opts.list() : [];
     const bySlot = {}; saves.forEach((s) => { bySlot[String(s.slot)] = s; });
-    const ids = save ? slotIds : ['auto', ...slotIds].filter((id) => bySlot[id]);   // load: only filled; save: all manual slots
+    const ids = save ? slotIds : [...new Set(['auto', ...slotIds])].filter((id) => bySlot[id]);   // load: only filled (auto deduped — a game may list it in its own slots); save: all manual slots
     listEl.innerHTML = ''; items = [];
     if (!ids.length) { listEl.appendChild(el('div', `color:${MUT};opacity:0.8;padding:12px;`, 'No saved games yet.')); showDetail(null); return; }
     ids.forEach((id) => {
@@ -67,7 +71,7 @@ export function showSaveLoad(opts = {}) {
       const card = el('button', `display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border:1px solid rgba(232,200,122,0.3);border-radius:6px;background:rgba(232,200,122,0.05);cursor:pointer;font-family:inherit;color:${TXT};transition:background .12s;`);
       const thumb = rec && rec.thumb ? `<img src="${rec.thumb}" style="width:74px;height:44px;object-fit:cover;border-radius:3px;flex:none">`
         : `<div style="width:74px;height:44px;border-radius:3px;background:rgba(232,200,122,0.08);flex:none"></div>`;
-      const title = rec ? (rec.name || rec.title || 'Dustwater') : (save ? 'New Save' : 'Empty');
+      const title = rec ? (rec.name || rec.title || opts.defaultTitle || 'Saved game') : (save ? 'New Save' : 'Empty');
       const subtitle = rec ? `${rec.auto ? 'AUTO' : 'SLOT ' + id} &nbsp;·&nbsp; ${fmtDate(rec.savedAt)}` : (save ? 'Empty slot' : '');
       card.innerHTML = `${thumb}<div style="min-width:0"><div style="font-size:15px;letter-spacing:1px;font-weight:700;color:${GOLD};white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${title}</div><div style="font-size:11px;color:${MUT};margin-top:3px">${subtitle}</div></div>`;
       const ctrl = {

package/src/ui/theme.js

@@ -0,0 +1,34 @@
+// THE UI THEME — the rule, codified after the fable title-menu incident: the ENGINE owns
+// the FUNCTIONALITY of a screen; the GAME owns its LOOK. Every value here is declarative
+// (a game ships them as src/game/uiTheme.json and registers it in engineSetup with
+// setUiTheme(theme)), so a re-dress never touches engine code.
+//
+// The defaults are the neutral dark leather-and-gold dress the engine screens shipped with
+// (Dustwater's palette — western's own uiTheme.json restates it explicitly). The engine UI
+// modules are lazily imported AFTER engineSetup runs, so module-load reads of THEME see the
+// game's registration.
+//
+//   font        — the screens' font stack
+//   gold/text/mut — accent, body text, muted labels
+//   panelCss    — the framed panel's ground (popup confirms, the pause panel). Replaces the
+//                 default gradient+border block; the engine still positions and sizes it.
+//   filigree    — draw the gold corner flourishes + inner rule on panels (default true; a
+//                 parchment skin usually wants them off)
+//   btnCss      — the standard button plate (settings rows, confirms, save-slot actions)
+//   btnActive   — { bg, color, border } for the highlighted/selected state
+//   screenBg    — full-screen browser background (save/load screen ground)
+//   dialogueCss — appended after the dialogue panel's own CSS; override any #dlg selector
+export const THEME = {
+  font: "Copperplate,'Copperplate Gothic Bold','Palatino','Book Antiqua',Georgia,serif",
+  gold: '#e8c87a',
+  text: '#ecdfc2',
+  mut: '#b6a577',
+  panelCss: null,       // null = the engine's dark leather gradient
+  filigree: true,
+  btnCss: null,         // null = the engine's gold-outline plate
+  btnActive: null,      // null = { bg: gold, color: '#1a1207', border: gold }
+  screenBg: '#0a0705',
+  dialogueCss: '',
+};
+
+export function setUiTheme(t = {}) { Object.assign(THEME, t); }

package/src/ui/titleScreen.js

@@ -14,7 +14,20 @@ import { getQualityName, setQualityName, PRESETS } from '../core/quality.js';
 import { renderHints, refreshHints, padMode } from './menuHints.js';
 import { showSaveLoad } from './saveLoadScreen.js';
 
-const UI = '/assets/ui/menu';
+// TITLE CONTENT is GAME data — brand, credits, difficulty roster, and the save-browser
+// adapter all register here (setTitleContent in the game's engineSetup). The engine ships
+// neutral defaults; difficulties: null skips the picker (NEW resolves { choice:'new',
+// difficulty:null }); saves.list/remove adapt whatever save model the game uses.
+let TITLE = {
+  brand: 'SINDICATE', subtitle: '', version: '',
+  assetDir: '/assets/ui/menu', bg: 'title_bg.jpg', difficultyArtDir: '/assets/ui/difficulty',
+  credits: [],
+  difficulties: null,
+  newGameConfirm: 'Start a new game? Your autosave is replaced — your manual saves are kept.',
+  moneyLabel: undefined, slotIds: undefined,
+  saves: { list: () => [], remove: null },
+};
+export function setTitleContent(c = {}) { TITLE = { ...TITLE, ...c, saves: { ...TITLE.saves, ...(c.saves ?? {}) } }; }
 const GOLD = '#e8c87a';
 const TXT = '#ecdfc2';     // light body text on the dark panels
 const MUT = '#b6a577';     // muted labels / captions
@@ -38,16 +51,7 @@ function el(tag, css, text) {
 }
 
 function readSaves() {
-  const out = [];
-  try {
-    for (let i = 0; i < localStorage.length; i++) {
-      const k = localStorage.key(i);
-      if (!k || !k.startsWith('dustwater_save_')) continue;
-      const s = JSON.parse(localStorage.getItem(k));
-      if (s && s.active !== undefined) out.push({ key: k, id: k.slice('dustwater_save_'.length), ...s, slot: s.slot ?? k.slice('dustwater_save_'.length) });
-    }
-  } catch (e) { /* private mode / bad json */ }
-  return out.sort((a, b) => (b.savedAt ?? 0) - (a.savedAt ?? 0));
+  try { return TITLE.saves.list() ?? []; } catch (e) { return []; }
 }
 const fmtDate = (ts) => { try { return ts ? new Date(ts).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : '—'; } catch (e) { return '—'; } };
 
@@ -82,7 +86,7 @@ function framedPanel(w = 560) {
 // (framedPanel) are kept ONLY for the little confirms, which should be modal.
 function fullView(titleText) {
   const root = el('div', 'position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;background:#0a0705;');
-  root.appendChild(el('div', `position:absolute;inset:0;background:#000 url(${UI}/title_bg.jpg) center/cover;opacity:0.09;`));
+  root.appendChild(el('div', `position:absolute;inset:0;background:#000 url(${TITLE.assetDir}/${TITLE.bg}) center/cover;opacity:0.09;`));
   root.appendChild(el('div', 'position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,5,0.84),rgba(10,7,5,0.96));'));
   const head = el('div', 'position:relative;padding:46px 64px 18px;border-bottom:1px solid rgba(232,200,122,0.22);flex:none;');
   head.appendChild(el('div', `color:${GOLD};font-size:34px;letter-spacing:9px;font-weight:700;text-shadow:0 3px 12px rgba(0,0,0,0.7);`, titleText));
@@ -109,15 +113,15 @@ export function showTitleMenu(host, { music } = {}) {
     const top = el('div', 'text-align:center;margin-top:6vh;z-index:2;');
     top.appendChild(el('div',
       `color:${GOLD};font-size:min(9vw,88px);letter-spacing:min(2.2vw,18px);font-weight:700;line-height:1;`
-      + 'text-shadow:0 0 44px rgba(232,200,122,0.34),0 4px 14px rgba(0,0,0,0.95);', 'DUSTWATER'));
+      + 'text-shadow:0 0 44px rgba(232,200,122,0.34),0 4px 14px rgba(0,0,0,0.95);', TITLE.brand));
     top.appendChild(el('div',
       'color:#9a8558;font-style:italic;font-size:15px;letter-spacing:7px;margin-top:8px;'
-      + 'text-shadow:0 2px 6px rgba(0,0,0,0.9);', 'A WESTERN TALE'));
+      + 'text-shadow:0 2px 6px rgba(0,0,0,0.9);', TITLE.subtitle));
     root.appendChild(top);
 
     // ── letterboxed vista band (middle)
     const band = el('div',
-      `position:relative;width:100%;height:38vh;background:#000 url(${UI}/title_bg.jpg) center 44%/cover no-repeat;`);
+      `position:relative;width:100%;height:38vh;background:#000 url(${TITLE.assetDir}/${TITLE.bg}) center 44%/cover no-repeat;`);
     band.appendChild(el('div',
       'position:absolute;inset:0;background:linear-gradient(to bottom,#080604 0%,rgba(8,6,4,0) 24%,rgba(8,6,4,0) 72%,#080604 100%);'));
     root.appendChild(band);
@@ -223,15 +227,7 @@ export function showTitleMenu(host, { music } = {}) {
     const openCredits = () => {
       const view = fullView('CREDITS');
       const body = el('div', `flex:1;min-height:0;overflow:auto;max-width:640px;margin:0 auto;text-align:center;color:${TXT};line-height:1.8;font-size:16px;letter-spacing:1px;`);
-      body.innerHTML = [
-        ['DUSTWATER', 'A Western Tale'],
-        ['Design · Code · Direction', 'Nick Thompson'],
-        ['Built with', 'three.js · WebGPU'],
-        ['Characters & World', 'Synty Studios (POLYGON)'],
-        ['Music', 'Original score — the Dustwater cuts'],
-        ['Assistance', 'Claude Code'],
-        ['', 'Thanks for riding out.'],
-      ].map(([h, s]) => `<div style="margin:18px 0"><div style="color:${GOLD};font-size:12px;letter-spacing:3px;text-transform:uppercase;opacity:.9">${h}</div><div>${s}</div></div>`).join('');
+      body.innerHTML = TITLE.credits.map(([h, s]) => `<div style="margin:18px 0"><div style="color:${GOLD};font-size:12px;letter-spacing:3px;text-transform:uppercase;opacity:.9">${h}</div><div>${s}</div></div>`).join('');
       view.body.appendChild(body);
       renderHints(view.foot, [['scroll', 'Scroll'], ['back', 'Back']]);
       root.appendChild(view.root);
@@ -242,9 +238,10 @@ export function showTitleMenu(host, { music } = {}) {
       subOpen = true;   // hand input to the shared Save/Load screen while it's up
       showSaveLoad({
         mode: 'load',
+        slots: TITLE.slotIds, moneyLabel: TITLE.moneyLabel, defaultTitle: TITLE.brand,
         list: () => readSaves(),
         onLoad: (slot) => done({ choice: 'load', slot }),   // boot() applies it once the world builds
-        onDelete: (slot) => { try { localStorage.removeItem('dustwater_save_' + slot); } catch (e) {} },
+        onDelete: (slot) => { try { TITLE.saves.remove?.(slot); } catch (e) {} },
         onClose: () => { subOpen = false; },
       });
     };
@@ -264,16 +261,12 @@ export function showTitleMenu(host, { music } = {}) {
     const openDifficulty = () => {
       const view = fullView('SELECT DIFFICULTY');
       const row = el('div', 'flex:1;min-height:0;display:flex;gap:24px;justify-content:center;align-items:center;');
-      const DIFFS = [
-        { id: 'easy', name: 'GREENHORN', tag: 'EASY', desc: 'For the story and the scenery. Lead finds you slowly and lands soft.' },
-        { id: 'normal', name: 'GUNSLINGER', tag: 'NORMAL', desc: 'The county as it was meant to be rode — a fair fight, and a fatal one.' },
-        { id: 'hard', name: 'DEAD MAN WALKING', tag: 'HARD', desc: 'The desert wants you buried. Every round bites, and the law rides hard.' },
-      ];
+      const DIFFS = TITLE.difficulties;
       const openT = performance.now();   // settle window — the click that OPENED this must not fall through onto a card
       const items = DIFFS.map((d) => {
         const card = el('button', 'width:300px;max-width:30vw;height:392px;padding:24px 26px;border:1px solid rgba(232,200,122,0.32);border-radius:8px;'
           + 'background:rgba(232,200,122,0.05);cursor:pointer;font-family:inherit;color:' + TXT + ';display:flex;flex-direction:column;align-items:center;text-align:center;transition:background .12s,border-color .12s,transform .12s;');
-        card.innerHTML = `<img src="/assets/ui/difficulty/${d.id}.png" style="width:132px;height:132px;object-fit:contain;mix-blend-mode:screen;pointer-events:none" onerror="this.style.display='none'">`
+        card.innerHTML = `<img src="${TITLE.difficultyArtDir}/${d.id}.png" style="width:132px;height:132px;object-fit:contain;mix-blend-mode:screen;pointer-events:none" onerror="this.style.display='none'">`
           + `<div style="color:${MUT};font-size:12px;letter-spacing:4px;margin-top:6px">${d.tag}</div>`
           + `<div style="color:${GOLD};font-size:23px;letter-spacing:2px;font-weight:700;margin:12px 0 15px">${d.name}</div>`
           + `<div style="color:${TXT};opacity:0.85;font-size:15px;line-height:1.6;font-family:'Book Antiqua',Georgia,serif">${d.desc}</div>`;
@@ -290,7 +283,8 @@ export function showTitleMenu(host, { music } = {}) {
       pushScreen({ items, sel: 1, horizontal: true, foot: view.foot, onPop: () => view.root.remove() });
     };
 
-    const newGame = () => { readSaves().length ? confirm('NEW GAME', 'Start a new game? Your autosave is replaced — your manual saves are kept.', openDifficulty) : openDifficulty(); };
+    const startNew = () => (TITLE.difficulties ? openDifficulty() : done({ choice: 'new', difficulty: null }));
+    const newGame = () => { readSaves().length && TITLE.newGameConfirm ? confirm('NEW GAME', TITLE.newGameConfirm, startNew) : startNew(); };
 
     // ── the main menu: a HORIZONTAL row (RDR2-style). Continue/Load only when a save exists. ───────
     const hasSave = readSaves().length > 0;
@@ -299,11 +293,11 @@ export function showTitleMenu(host, { music } = {}) {
     mainItems.push(item('NEW GAME', newGame));
     if (hasSave) mainItems.push(item('LOAD', openLoad));
     mainItems.push(item('SETTINGS', openSettings));
-    mainItems.push(item('CREDITS', openCredits));
+    if (TITLE.credits.length) mainItems.push(item('CREDITS', openCredits));
     const rowEl = el('div', 'display:flex;gap:34px;justify-content:center;align-items:center;flex-wrap:wrap;');
     mainItems.forEach((it) => rowEl.appendChild(it.el));
     col.appendChild(rowEl);
-    col.appendChild(el('div', 'color:#6a5a3a;font-size:11px;letter-spacing:3px;margin-top:22px;', 'v0.1'));
+    if (TITLE.version) col.appendChild(el('div', 'color:#6a5a3a;font-size:11px;letter-spacing:3px;margin-top:22px;', TITLE.version));
     pushScreen({ items: mainItems, sel: 0, horizontal: true });
 
     // ── input: pad + keyboard over the whole stack ────────────────────────────────────────────────