/* ============================================================
Trade Machine — INTEGRATED into CapMVP V2 (single IIFE)
------------------------------------------------------------
Assembled from the claude.ai/design handoff prototype files
(tm-data.jsx + tm-components.jsx + tm-app.jsx). Wrapped in one
IIFE so every component/helper name stays LOCAL — zero collision
with the site globals (we already own App, CAP_2026, fmt$,
evaluateTeamSide, LOGO_BY_CODE, ...). The only thing exported is
window.TradeMachineView.
Real data is fed in via props (tradeData / allTeams / state /
derived / teams) and built into the ROSTERS/PICKS/FREE_AGENTS/...
tables by buildTradeTables(). The prototype CBA helpers are kept
verbatim and local (a superset of trade-engine.jsx, same shape).
============================================================ */
(function () {
/* ============================================================
Trade Machine — sample data + helpers
- Mirrors CapMVP V2 data shapes (players, picks, TPEs)
- 6 detailed team rosters; 30-team logo registry
- Pure utilities exposed via window: fmt$, evaluateTeamSide,
cycleDestination, cashLimit
============================================================ */
const CAP_2026 = {
cap: 165_000_000,
taxLine: 200_474_000,
apron1: 209_063_000,
apron2: 221_737_000,
vetMin: 1_300_000,
mle: 15_048_000,
tpmle: 6_065_000,
bae: 5_478_000,
roomMle: 9_369_000,
cashYear: 7_500_000, // CBA per-team per-season cash in or out
};
/* logo registry — all 30 teams */
const LOGO_BY_CODE = {
ATL: "atlanta_hawks_1610612737", BOS: "boston_celtics_1610612738",
BKN: "brooklyn_nets_1610612751", CHA: "charlotte_hornets_1610612766",
CHI: "chicago_bulls_1610612741", CLE: "cleveland_cavaliers_1610612739",
DAL: "dallas_mavericks_1610612742", DEN: "denver_nuggets_1610612743",
DET: "detroit_pistons_1610612765", GSW: "golden_state_warriors_1610612744",
HOU: "houston_rockets_1610612745", IND: "indiana_pacers_1610612754",
LAC: "la_clippers_1610612746", LAL: "los_angeles_lakers_1610612747",
MEM: "memphis_grizzlies_1610612763", MIA: "miami_heat_1610612748",
MIL: "milwaukee_bucks_1610612749", MIN: "minnesota_timberwolves_1610612750",
NOP: "new_orleans_pelicans_1610612740", NYK: "new_york_knicks_1610612752",
OKC: "oklahoma_city_thunder_1610612760", ORL: "orlando_magic_1610612753",
PHI: "philadelphia_76ers_1610612755", PHX: "phoenix_suns_1610612756",
POR: "portland_trail_blazers_1610612757", SAC: "sacramento_kings_1610612758",
SAS: "san_antonio_spurs_1610612759", TOR: "toronto_raptors_1610612761",
UTA: "utah_jazz_1610612762", WAS: "washington_wizards_1610612764",
};
/* team metadata used for the picker + accent strip */
const TEAMS_INDEX = [
["ATL","Hawks","Atlanta Hawks","E","#E03A3E","#C1D32F"],
["BOS","Celtics","Boston Celtics","E","#007A33","#BA9653"],
["BKN","Nets","Brooklyn Nets","E","#FFFFFF","#000000"],
["CHA","Hornets","Charlotte Hornets","E","#1D1160","#00788C"],
["CHI","Bulls","Chicago Bulls","E","#CE1141","#000000"],
["CLE","Cavaliers","Cleveland Cavaliers","E","#860038","#FDBB30"],
["DAL","Mavericks","Dallas Mavericks","W","#00538C","#B8C4CA"],
["DEN","Nuggets","Denver Nuggets","W","#0E2240","#FEC524"],
["DET","Pistons","Detroit Pistons","E","#C8102E","#1D42BA"],
["GSW","Warriors","Golden State Warriors","W","#1D428A","#FFC72C"],
["HOU","Rockets","Houston Rockets","W","#CE1141","#000000"],
["IND","Pacers","Indiana Pacers","E","#002D62","#FDBB30"],
["LAC","Clippers","Los Angeles Clippers","W","#C8102E","#1D428A"],
["LAL","Lakers","Los Angeles Lakers","W","#552583","#FDB927"],
["MEM","Grizzlies","Memphis Grizzlies","W","#5D76A9","#12173F"],
["MIA","Heat","Miami Heat","E","#98002E","#F9A01B"],
["MIL","Bucks","Milwaukee Bucks","E","#00471B","#EEE1C6"],
["MIN","Timberwolves","Minnesota Timberwolves","W","#0C2340","#236192"],
["NOP","Pelicans","New Orleans Pelicans","W","#0C2340","#C8102E"],
["NYK","Knicks","New York Knicks","E","#006BB6","#F58426"],
["OKC","Thunder","Oklahoma City Thunder","W","#007AC1","#EF3B24"],
["ORL","Magic","Orlando Magic","E","#0077C0","#C4CED4"],
["PHI","76ers","Philadelphia 76ers","E","#006BB6","#ED174C"],
["PHX","Suns","Phoenix Suns","W","#1D1160","#E56020"],
["POR","Trail Blazers","Portland Trail Blazers","W","#E03A3E","#000000"],
["SAC","Kings","Sacramento Kings","W","#5A2D81","#63727A"],
["SAS","Spurs","San Antonio Spurs","W","#C4CED4","#000000"],
["TOR","Raptors","Toronto Raptors","E","#CE1141","#000000"],
["UTA","Jazz","Utah Jazz","W","#002B5C","#00471B"],
["WAS","Wizards","Washington Wizards","E","#002B5C","#E31837"],
].map(([code,name,fullName,conf,primary,secondary]) => ({
code, name, fullName, conf, primary, secondary,
logo: `assets/logos/${LOGO_BY_CODE[code]}.svg`,
}));
const TEAM_BY_CODE = Object.fromEntries(TEAMS_INDEX.map(t => [t.code, t]));
/* ============================================================
Roster shape note
------------------------------------------------------------
`salary` current-year cap hit
`years` array of remaining yearly salaries
(years[0] === salary by convention)
`tradeBonus` trade kicker % (CBA Art VII §3) — display only
`guaranteeYrs` index after which only partial/non-guarantee
(0 = year-1 fully guaranteed, 1 = thru year-2, ...)
`partial` { yearIdx, amount } partial guarantee
`status` guaranteed | team_option | player_option | non_guaranteed | two_way
`noTrade` full no-trade clause (must consent in writing)
`bird` full | early | non | n/a (FAs only)
============================================================ */
/* R14 dead-code trim: the prototype's sample ROSTERS/PICKS/FREE_AGENTS/TPES/
CASH_LEDGER/PRE_SALARY constants (~210 lines of mock data) are removed.
The real values are populated by buildTradeTables() on every render via
the data-adapter pipeline (teams-trade-data.json + all-teams-detail.json
+ state overlay). These let bindings are kept so child components can
reassign — they start empty and are filled each render. */
let ROSTERS = {};
let PICKS = {};
let FREE_AGENTS = {};
let TPES = {};
let EXC = {}; // per-team trade-acquisition exceptions (MLE family), parallel to TPES
let CASH_LEDGER = {};
let PRE_SALARY = {};
let PRE_APRON = {}; // holds-FREE apron base (Apron Team Salary excludes the FA cap hold) — parallel to PRE_SALARY (cap, holds-inclusive)
let HARDCAPS = {}; // 4d: per-team STRICTEST stored hard cap ("firstApron"|"secondApron"|null) from the active scenario — gates later trades
/* ===== Formatting + parsing ===== */
function fmt$(n) {
if (n == null) return "—";
const abs = Math.abs(n);
if (abs >= 1_000_000) {
let s = (n / 1_000_000).toFixed(abs >= 10_000_000 ? 1 : 2);
if (s.includes(".")) s = s.replace(/0+$/, "").replace(/\.$/, "");
return "$" + s + "M";
}
if (abs >= 1_000) return "$" + Math.round(n / 1000) + "K";
return "$" + n;
}
function fmt$Full(n) {
if (n == null) return "—";
return "$" + n.toLocaleString("en-US");
}
function parseCashInput(s) {
if (!s) return 0;
s = s.toString().trim().toLowerCase().replace(/[$,_\s]/g, "");
let mult = 1;
if (s.endsWith("m")) { mult = 1_000_000; s = s.slice(0, -1); }
else if (s.endsWith("k")) { mult = 1_000; s = s.slice(0, -1); }
const n = parseFloat(s);
return isNaN(n) ? 0 : Math.round(n * mult);
}
function cycleDestination(current, codes, exclude) {
const targets = (codes || []).filter(c => c && c !== exclude);
if (!targets.length) return null;
return targets[(targets.indexOf(current) + 1) % targets.length];
}
/* ===== CBA-light trade evaluator (per-side) ===== */
const CAP_2023_24 = 136_021_000;
function tradeMaxIncoming(O, allowance) {
const C75 = 7_500_000 * (CAP_2026.cap / CAP_2023_24);
return Math.max(
Math.min(2.0 * O + allowance, 1.0 * O + C75),
1.25 * O + allowance
);
}
/* side: { code, out:[{name,salary,noTrade}], in:[...], preSalary,
cashOut, cashIn, tpeUsed } */
function evaluateTeamSide(side) {
const O = side.out.reduce((a, p) => a + (p.salary || 0), 0);
const I = side.in.reduce((a, p) => a + (p.salary || 0), 0);
const post = side.preSalary - O + I + (side.cashOut || 0) - (side.cashIn || 0);
const cap = CAP_2026.cap, ap1 = CAP_2026.apron1, ap2 = CAP_2026.apron2;
const allowance = post > ap1 ? 0 : 250_000;
const r = { code: side.code, legal: true, reasons: [], flags: [], O, I, post };
if (O === 0 && I === 0 && !(side.cashOut > 0 || side.cashIn > 0)) {
r.legal = false; r.reasons.push(`No assets selected for ${side.code}.`);
return r;
}
for (const p of [...side.out, ...side.in]) {
if (p.noTrade) {
r.legal = false;
r.reasons.push(`${p.name} has a no-trade clause — must consent in writing.`);
}
}
if (side.preSalary > ap2 && side.out.length > 1) {
r.legal = false;
r.reasons.push(`${side.code} is above the 2nd apron — cannot aggregate ${side.out.length} outgoing salaries.`);
}
const tpe = side.tpeUsed || 0;
const roomMax = side.preSalary < cap ? (cap - side.preSalary) + allowance : null;
const tpeMax = tradeMaxIncoming(O, allowance) + tpe;
let maxIn, basis;
if (roomMax !== null && roomMax >= tpeMax) {
maxIn = roomMax;
basis = `cap room ${fmt$(cap - side.preSalary)} + ${fmt$(allowance)} (Room TPE)`;
} else {
maxIn = tpeMax;
basis = `Expanded TPE on ${fmt$(O)} outgoing` +
(tpe ? ` + ${fmt$(tpe)} traded-player exception` : "") +
(allowance === 0 ? " ($250k→$0 above 1st apron)" : "");
}
maxIn = Math.round(maxIn);
if (I > maxIn) {
r.legal = false;
r.reasons.push(`${side.code} takes ${fmt$(I)} but max is ${fmt$(maxIn)} — ${basis}.`);
} else if (I > 0 || O > 0) {
r.reasons.push(`Salary match OK: ${fmt$(I)} ≤ ${fmt$(maxIn)} — ${basis}.`);
}
/* hard-cap flags */
const usedExpanded = side.preSalary >= cap;
if (usedExpanded && side.out.length > 1)
r.flags.push(`Aggregating outgoing salaries → hard-capped at the 2nd apron (${fmt$(ap2)}).`);
if (usedExpanded && I > O)
r.flags.push(`Takes back more than it sends → hard-capped at the 1st apron (${fmt$(ap1)}).`);
if (post > ap2) r.flags.push(`Post-trade ${fmt$(post)} is ABOVE the 2nd apron.`);
else if (post > ap1) r.flags.push(`Post-trade ${fmt$(post)} is between the aprons.`);
return r;
}
function capStatus(salary) {
const { cap, apron1, apron2, taxLine } = CAP_2026;
// [B] 5 distinct tiers (over-cap & over-tax were both amber): green room → grey
// over-cap (no penalty) → yellow tax → orange between aprons → red over 2nd apron.
if (salary > apron2) return { key:"ap2", label:"Above 2nd apron", color:"var(--danger)" };
if (salary > apron1) return { key:"ap1", label:"Between aprons", color:"var(--orange)" };
if (salary > taxLine)return { key:"tax", label:"Over tax", color:"var(--warn)" };
if (salary > cap) return { key:"cap", label:"Over cap", color:"var(--neutral)" };
return { key:"room", label:"Under cap", color:"var(--pos-text)" };
}
/* Compact tiles describing space to nearest cap lines */
function capTiles(salary) {
const { cap, taxLine, apron1, apron2 } = CAP_2026;
const overCap = salary > cap;
const t = (lab, diff) => ({ lab, val: diff, pos: diff >= 0 });
return overCap
? [ t("Tax", taxLine - salary), t("A1", apron1 - salary), t("A2", apron2 - salary) ]
: [ t("Cap", cap - salary), t("Tax", taxLine - salary), t("A1", apron1 - salary) ];
}
// #5B: team nickname (no city); abbreviate the long ones to fit the header.
const NAME_ABBR = { "Timberwolves": "T. Wolves", "Trail Blazers": "T. Blazers" };
function abbrevName(name) { return NAME_ABBR[name] || name; }
function statusTag(s) {
switch (s) {
case "team_option": return "team opt";
case "player_option": return "player opt";
case "partially_guaranteed": return "non-guar";
case "non_guaranteed": return "non-guar";
case "two_way": return "two-way";
default: return null;
}
}
function contractSummary(p) {
if (!p.years || p.years.length === 0)
return { yrs: 1, total: p.salary || 0 };
return {
yrs: p.years.length,
total: p.years.reduce((a, b) => a + (b || 0), 0),
};
}
function birdLabel(b) {
switch (b) {
// [#5] Neutral, NOT blue — bird rights are reference info, ranked by brightness
// (Full = brightest) instead of colour. Blue stays for actions.
case "full": return { txt: "Full Bird", color: "var(--text)" };
case "early": return { txt: "Early Bird", color: "var(--text-dim)" };
case "non": return { txt: "Non-Bird", color: "var(--text-faint)" };
default: return { txt: "—", color: "var(--text-faint)" };
}
}
/* ============================================================
Trade Machine — components (v2)
- PlayerRow with in-place selection (no tray jump)
- FreeAgentRow with S&T toggle
- PlayerDrawer (full edit options)
- Compact dest pill + popover
============================================================ */
const { useState, useEffect, useRef, useMemo, useLayoutEffect } = React;
const TmIcon = {
Trade: (p) => ,
Plus: (p) => ,
X: (p) => ,
Check: (p) => ,
Caret: (p) => ,
Bolt: (p) => ,
Cash: (p) => ,
Pick: (p) => ,
Roster: (p) => ,
FA: (p) => ,
TPE: (p) => ,
Back: (p) => ,
Trash: (p) => ,
Save: (p) => ,
Reset: (p) => ,
Slider: (p) => ,
Phone: (p) => ,
Lock: (p) => ,
Info: (p) => ,
More: (p) => ,
Edit: (p) => ,
};
function TeamLogo({ code, size = 22, alt = "" }) {
const team = TEAM_BY_CODE[code];
if (!team) return ;
return (
);
}
function PlayerAvatar({ player, size = 32 }) {
const [bad, setBad] = useState(false);
const initials = (player.name || "?").split(" ").map(s => s[0]).slice(0, 2).join("");
if (!player.nbaId || bad) {
return (
{initials}
);
}
return (
setBad(true)} />
);
}
/* --- Destination pill (small, in-row) --- */
function DestPill({ destCode, locked, onClick, mini = false, big = false, sm = false, noCaret = false, fullh = false, tentative = false, dataKey }) {
const team = TEAM_BY_CODE[destCode];
// #1c: show the destination team's LOGO (not a colour dot + code) to keep the
// chip short; the dropdown (DestPopover) still lists logo + full name.
// noCaret → omit the chevron (clean badge, still clickable). fullh → full-height logo (stack 11).
// tentative → dashed/amber ring until the user confirms the auto-defaulted destination.
const size = fullh ? 30 : big ? 28 : sm ? 18 : mini ? 22 : 24;
return (
);
}
/* --- Destination popover --- */
function DestPopover({ anchor, codes, ownCode, current, onPick, onClose, onUndo }) {
const ref = useRef(null);
const [style, setStyle] = useState({ left: -9999, top: -9999, position:"fixed" });
useLayoutEffect(() => {
if (!anchor || !ref.current) return;
const r = anchor.getBoundingClientRect();
const my = ref.current.getBoundingClientRect();
let left = r.left + r.width/2 - my.width/2;
let top = r.bottom + 6;
left = Math.max(8, Math.min(window.innerWidth - my.width - 8, left));
if (top + my.height + 8 > window.innerHeight) top = r.top - my.height - 6;
setStyle({ left, top, position:"fixed" });
}, [anchor]);
useEffect(() => {
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
document.addEventListener("mousedown", h);
return () => document.removeEventListener("mousedown", h);
}, [onClose]);
/* Portal to so the popover escapes the `.tm-shell` container-query
subtree — on iOS Safari a `position:fixed` element near a `container-type`
ancestor can be painted under in-flow siblings (the outgoing chips). At the
body level it sits in the root stacking context, above `.tm-fullscreen`. */
return ReactDOM.createPortal(
{selected && }
{player.name}
{/* Re-signed (signed) player: greyed + not directly tradable. The "Signed"
chip flips it to Sign & Trade (the legal way to move a just-signed player). */}
{player._resigned && (
)}
{/* Re-use guard (B): a player acquired in an applied trade can't be re-traded. */}
{player._tradeLocked && (
In a trade
)}
{tag && !player._resigned && !player._tradeLocked && (
)}
{player.noTrade && NTC}
{player.tradeBonus > 0 && {(player.tradeBonus*100)|0}% kick}
{/* destination pill sits under the name when selected in a multi-team deal */}
{selected && multi && (
onDest(player, e.currentTarget)} mini />
)}
{fmt$(player.salary)}{c.yrs}y left
{selected && !multi && (
)}
{locked && }
{inlineEditing && }
);
}
/* ============================================================
INCOMING ROW — Fanspo-style: appears inline in roster list
showing player coming TO this team from another
============================================================ */
function IncomingRow({ item, onOpenDrawer, onJumpTo, onDest }) {
const fromTeam = TEAM_BY_CODE[item._from];
const c = item._kind === "player" ? contractSummary(item)
: item._kind === "fa" ? { yrs: item.sntYears, total: item.sntAsk * item.sntYears }
: { yrs: 0, total: 0 };
return (
onDest && onDest(item, e.currentTarget)}
title={`From ${fromTeam?.fullName || item._from} — tap to re-route or undo`}>
{/* [#5] incoming-player checkmark removed — the bg + from-team logo + jersey are cue enough. */}
{item.name}
{item._kind === "fa" && S&T}
{item.noTrade && NTC}
{selected && multi && (
onDest(pk, e.currentTarget)} mini />
)}
);
}
/* ============================================================
OUTGOING STRIP — collapsible chip strip above the list
(Fanspo-inspired: outgoing summary, incoming lives in roster)
============================================================ */
function OutgoingStrip({ outgoing, multi, cashOut, cashDest, slot, chipLayout, inSalary = 0, net = 0, onRemove, onDest, onCashDest, defaultOpen = true }) {
const [open, setOpen] = useState(defaultOpen);
const totalSal = outgoing.reduce((a, p) => a + (p.salary || 0), 0) + (cashOut || 0);
const players = outgoing.filter(o => o._kind === "player" || o._kind === "fa");
const picks = outgoing.filter(o => o._kind === "pick");
const isEmpty = outgoing.length === 0 && !(cashOut > 0);
/* #2: auto-open when a player is sent out so the menu never floats over a
collapsed bar. Picks/cash alone don't force it open; manual collapse sticks
until the next player is added. */
const prevPlayers = useRef(players.length);
useEffect(() => {
if (players.length > prevPlayers.current) setOpen(true);
prevPlayers.current = players.length;
}, [players.length]);
const idle = isEmpty && (inSalary || 0) <= 0; // nothing in OR out → show the hint
return (
!isEmpty && setOpen(o => !o)}>
OUTGOING
{/* Round 10 #0.5c / #10: dropped the redundant OUT · IN · NET (the header now
carries net) and the "N to route" badge (auto-confirm made it always read 1
and it added noise). Keep just the OUT total for at-a-glance context. */}
{idle
? tap a player to add
: OUT{fmt$(totalSal)}}
{!isEmpty && }
) : null}
) : null}
{!res.injected && (() => {
// Destination selector INLINE, left of a reduced-width Add button (owner):
// always shown when there's ≥1 partner. STATIC (one partner) or a tap-to-
// cycle CHANGER (multi) — no pop-up menu. Pick the dest THEN hit Add; the
// chosen team is applied on add and editable after.
const cand = (codes || []).filter(c => c !== slot.code);
const liveDest = selected ? ((cardSel && cardSel.dest) || cand[0]) : (pendingDest || cand[0]);
const changer = cand.length > 1;
const cycle = () => {
if (!changer) return;
const next = cand[(cand.indexOf(liveDest) + 1) % cand.length];
if (selected) { if (onSetDest) onSetDest(pk, next); } else setPendingDest(next);
};
const add = () => {
if (selected) { onToggle(pk); return; }
onToggle(pk);
if (cand.length && liveDest && onSetDest) onSetDest(pk, liveDest);
};
return (
{cand.length ? (
) : null}
);
})()}
{(() => {
// ----- Trade mechanics: BUILD a protection / swap on this pick -----
// Our validation layer (pick-rules.js); picks are $0 so the salary engine
// never sees it. Legacy obligations (from our data) are locked read-only.
const cand = (codes || []).filter(c => c !== slot.code);
// Any ticket this team controls can carry trade mechanics. That includes
// acquired/incoming picks already in the data, not just native own picks.
const heldTicket = H0 && H0.tm === slot.code;
const PR = (typeof window !== "undefined" && window.PickRules) || null;
if (res.injected) {
return
Incoming — mirrors {res.mirrorFrom}'s protection
;
}
if (res.mirror) {
return
Subject to {res.mirrorFrom}'s swap — mirrors their build
;
}
if (!heldTicket && !built) return null;
const meta = { builder: slot.code, pickId: pk.id, year: pk.year, round: pk.round };
const clearBuilt = () => { delete TM_OBLIG[oblKey]; setProtErr(null); setSwapErr(null); setBuilder(null); tmObligChanged(); };
const builtSwapDest = built && built.swap && built.swap.rightOwner !== slot.code ? built.swap.rightOwner : null;
const liveProtDest = builtSwapDest || protDest || (selected && cardSel && cardSel.dest) || cand[0] || null;
const setProt = (K) => {
const prot = { keepRange: [1, K], dest: liveProtDest };
const v = PR ? PR.validateProtection(prot, { isNew: true, year: pk.year, round: pk.round }) : { ok: true };
if (!v.ok) { setProtErr(v.msg); return; }
setProtErr(null);
TM_OBLIG[oblKey] = Object.assign({}, TM_OBLIG[oblKey], meta, { protection: prot });
setBuilder(null); tmObligChanged();
};
const swapBundle = (typeof window !== "undefined" && window.__PICKS_BUNDLE) || {};
const movedFor = (team) => movedPickIdsByTeam && movedPickIdsByTeam[team];
const movedHas = (team, id) => {
const set = movedFor(team);
return !!(set && typeof set.has === "function" && set.has(id));
};
const addTarget = (arr, seen, id, H, team, pendingFrom) => {
if (!id || !H || team == null) return;
const m = String(id).match(/-(\d{4})-(\d)-/);
const yr = m ? +m[1] : pk.year;
const rnd = m ? +m[2] : pk.round;
if (yr !== pk.year || rnd !== pk.round) return;
if (id === pk.id && team === slot.code) return;
const key = team + ":" + id;
if (seen.has(key)) return;
seen.add(key);
arr.push({
key, id, team, year: yr, round: rnd,
logo: H.logo || team,
label: H.lbl || (yr + " " + (rnd === 2 ? "2nd" : "1st")),
hint: H.hint || H.badge || "",
pendingFrom: pendingFrom || null,
});
};
const seenTargets = new Set();
const swapTargets = [];
if (swapBundle.hold) {
for (const hid in swapBundle.hold) {
const Ht = swapBundle.hold[hid];
const tm = Ht && Ht.tm;
if (!tm || !(codes || []).includes(tm)) continue;
if (movedHas(tm, hid)) continue;
addTarget(swapTargets, seenTargets, hid, Ht, tm, null);
}
}
if (pendingPicksByTeam) {
for (const tm of (codes || [])) {
((pendingPicksByTeam[tm] || [])).forEach(item => addTarget(swapTargets, seenTargets, item.id, item._hold, tm, item._from));
}
}
const setSwap = (target) => {
if (!target) return;
const counterTeam = target.team;
const counterKey = target.id;
// #4: a pick can't be the subject of two swaps — block if it's already a target.
const dealt = Object.keys(TM_OBLIG).some(k => { const o = TM_OBLIG[k]; return o && o.swap && k !== oblKey && o.swap.swapWith === counterKey; });
// On your own page you're sending away, so you GIVE the right: the partner holds it
// (your pick = subject, worse). Swapping with your OWN other pick → you hold the right.
const rightOwner = (counterTeam === slot.code) ? slot.code : counterTeam;
const sw = { rightOwner, counterTeam, side: "better", swapWith: counterKey, counterLogo: target.logo, counterLabel: target.label, counterHint: target.hint };
const v = PR ? PR.validateSwap(sw, { isNew: true, ownsBase: true, ownsCounter: true, sameYear: true, rightAlreadyDealt: dealt }) : { ok: true };
if (!v.ok) { setSwapErr(v.msg); return; }
setSwapErr(null);
TM_OBLIG[oblKey] = Object.assign({}, TM_OBLIG[oblKey], meta, { swap: sw });
setBuilder(null); tmObligChanged();
};
return (
Trade mechanics
{isLegacyObl ?
Existing obligation kept — you can still stack a swap or protection on top.
{slot.code} keeps top-{protN}{liveProtDest || "the other team"} {isSwapProtect ? "can swap" : "gets"} {convey}
setProtN(snapN(+e.target.value))} />
top-112–15 ✕top-30
{protErr ?
{protErr}
: null}
);
})() : null}
{builder === "swap" ? (
) : null}
);
})()}
);
return (typeof document !== "undefined" && ReactDOM.createPortal)
? ReactDOM.createPortal(node, document.body) : node;
}
/* Swap builder: choose the concrete counter-ticket, who holds the right, and
whether they take the better/worse. Encodes our swap{} model. */
function TmSwapBuilder({ targets, holder, year, round, fmtTeam, onConfirm, err }) {
const opts = (targets || []); // tickets held by teams in this trade; THIS pick excluded upstream
const [counter, setCounter] = useState((opts[0] && opts[0].key) || "");
const active = opts.find(t => t.key === counter) || opts[0] || null;
const rndWord = round === 2 ? "2nd" : "1st";
if (!opts.length) return
No other {year} {rndWord} ticket in this trade to swap with.
;
const ownPick = active && active.team === holder; // swapping two of YOUR OWN held tickets vs giving it away
return (
Swap this {year} {rndWord} with
{active ? (
{active.logo || active.team}
{active.hint ? ({active.hint}) : null}
{active.pendingFrom ? "pending to " : "held by "}{active.team}
) : null}
{ownPick
? "Both tickets are yours — you hold the right and take the better, then trade one afterward."
: ("Gives " + (fmtTeam(active && active.team) || (active && active.team)) + " the swap right — your pick becomes the subject, theirs the counter-ticket.")}
{err ?
{err}
: null}
);
}
/* The picks panel — our year-rail timeline (replaces the PicksGrid matrix). */
function TmPicksPanel({ slot, picks, incomingPicks, pendingPicksByTeam, movedPickIdsByTeam, multi, codes, onToggle, onDest, onSetDest }) {
const [openId, setOpenId] = useState(null);
const [, setOblVer] = useState(0); // re-render when ANY column builds/clears an obligation
useEffect(() => {
const fn = () => setOblVer(v => v + 1);
TM_OBLIG_SUBS.add(fn);
return () => { TM_OBLIG_SUBS.delete(fn); };
}, []);
const bundle = (typeof window !== "undefined" && window.__PICKS_BUNDLE) || null;
const vars = (bundle && bundle.vars) || {};
const teamreg = (bundle && bundle.teamreg) || {};
const MIRR = tmMirrors()[slot.code] || { injected: [], annot: {} }; // cross-team mirror effects on THIS team
// Render ONLY the CapMVP truth-machine holdings (pk._hold). This deliberately
// excludes V4's 2026 draft_pick rows (parsePick), which still carry raw
// "(via X)" routing — the owner's no-raw / no-cross-reference rule. Our data
// is the resolved-2026-forward future-pick model anyway, so 2026 is omitted.
const seenIds = new Set();
const basePicks = picks.filter(p => p._hold).map(p => { seenIds.add(p.id); return p; });
const pendingIn = (incomingPicks || [])
.filter(p => p && p._hold && !seenIds.has(p.id))
.map(p => {
seenIds.add(p.id);
return Object.assign({}, p, { _hold: Object.assign({}, p._hold, { tm: slot.code }), _pendingIn: true, _src: p._from || p._src });
});
const ours = basePicks.concat(pendingIn, MIRR.injected); // base holdings + trade-pending/mirrored incoming picks
if (!ours.length) return
No tradable picks.
;
const years = [];
for (let y = 2027; y <= 2032; y++) years.push(y);
const openPk = openId ? ours.find(p => p.id === openId) : null;
// Stepien advisory (#3): warn if AFTER the outgoing picks the team would be without a
// first in two consecutive future years. No before/after guard — no team is bare today,
// so any violation is created by this trade. Window capped to our data range (2027-2032).
let stepienWarn = null;
const _PR = (typeof window !== "undefined" && window.PickRules) || null;
if (_PR) {
const keptF = {};
ours.forEach(p => { if (p.round === 1 && !slot.picks.has(p.id)) keptF[p.year] = true; });
const sv = _PR.validatePickTrade({ firstsByYear: keptF, leagueRules: { forwardYears: 6 } });
if (!sv.ok) stepienWarn = sv.msg;
}
const renderToken = (pk) => {
const r = tmResolve(slot.code, pk, MIRR, vars);
const H = r.H;
const logo = H ? H.logo : slot.code;
let hint = H ? H.hint : "";
let badge = H ? H.badge : (pk.sub && pk.sub !== "Own" ? pk.sub : "");
// Drop redundant "Top-N protected" trade-speak (owner): the (range) hint + the
// dashed Partial token already convey the protection; that phrasing is for the
// ACQUIRING team's view post-trade, not the holder's own page.
if (badge && /protected/i.test(badge)) badge = "";
const sk = H && H.swap ? H.swap.kind : "none";
if (H && H.swap && !badge) badge = sk === "right" ? "+ Swap" : "− Swap"; // built/mirrored swaps carry no base badge
const condTok = pk._partial || !!(H && H.cond);
const bcls = sk === "right" ? "b-pos" : sk === "subject" ? "b-neg" : "b-neu";
const sel = slot.picks.has(pk.id);
const poolLogos = (!logo && H && H.swap && H.swap.pool) ? H.swap.pool : [];
const flagged = r.built || r.injected || r.mirror || pk._pendingIn;
return (
);
};
const renderSection = (title, rnd) => {
const mine = ours.filter(p => p.round === rnd);
return (
{title}{mine.length} held
Full
Partial
{years.map((y, i) => {
const full = mine.filter(p => p.year === y && !p._partial);
const part = mine.filter(p => p.year === y && p._partial);
return (
);
}
function PicksGrid({ slot, picks, multi, onToggle, onDest }) {
// R14 (user item #2): tapping a cell no longer toggles directly — it opens
// a bottom-anchored slide-up CARD with the full RealGM ledger, a destination
// pill (multi-team trades), and an explicit "Add to trade" / "Remove" button.
// The cell click sets `cardFor`; the card portals into the column footer area.
const [cardFor, setCardFor] = useState(null);
if (!picks.length) return
No tradable picks.
;
const YEARS = [2026, 2027, 2028, 2029, 2030, 2031, 2032];
const byCell = new Map();
for (const pk of picks) {
const k = `${pk.year}-${pk.round}`;
if (!byCell.has(k)) byCell.set(k, []);
byCell.get(k).push(pk);
}
function Cell({ year, round }) {
const cellPicks = byCell.get(`${year}-${round}`) || [];
if (cellPicks.length === 0) {
return
to
{multi
? onDest("cash", e.currentTarget)} />
: }
)}
CBA Art. VII §6 — teams may send up to {fmt$(limit)} in cash and receive up to {fmt$(limit)} per season. Gross, not net.
{ledger.sent > 0 && <> Already sent earlier this season: {fmt$(ledger.sent)}.}
{ledger.received > 0 && <> Already received: {fmt$(ledger.received)}.}
);
}
/* ============================================================
CASH TABLE — R14 rebuild: vertical (more rows / less columns) so the
important numbers + the input + the dest pill don't fight for width on
phone. Fixes two reported bugs:
• Input couldn't accept M-as-millions (was parseCashInput, which treats
bare "2.5" as $2.50 — now uses parseSalaryFromMField like the rest of
the salary inputs in the app, so "2.5" in an M field = $2.5M).
• Local `txt` state for the input so React's controlled-value loop stops
stripping characters mid-type. Quick-amount buttons sync the txt via
useEffect when cashOut changes externally.
• Dest pill always visible (was gated on cashOut > 0 — meant in multi-
team trades users couldn't pre-pick the receiving team).
============================================================ */
function CashTable({ slot, codes, ownCode, ledger, multi, cashIn, onSet, onDest }) {
const limit = CAP_2026.cashYear;
const cashOut = slot.cash?.out || 0;
const dest = slot.cash?.dest;
const prevSent = ledger.sent || 0;
const prevRecv = ledger.received || 0;
const totalSent = prevSent + cashOut;
const totalRecv = prevRecv + (cashIn || 0);
const overSent = totalSent > limit;
const overRecv = totalRecv > limit;
// Local input text — survives mid-type characters that don't yet parse.
const fmtM = (n) => n ? String(+((n / 1_000_000).toFixed(3))).replace(/\.?0+$/, "") : "";
const [txt, setTxt] = useState(fmtM(cashOut));
// Sync from external changes (quick buttons / clear / undo).
useEffect(() => {
const parsed = (typeof window.parseSalaryFromMField === "function")
? window.parseSalaryFromMField(txt) : null;
if (parsed !== cashOut) setTxt(fmtM(cashOut));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [cashOut]);
function commit(s) {
setTxt(s);
const n = (typeof window.parseSalaryFromMField === "function")
? window.parseSalaryFromMField(s) : parseFloat(s) * 1_000_000;
onSet({ out: Math.max(0, n || 0) });
}
function setOut(v) { onSet({ out: Math.max(0, v|0) }); }
const sentPct = Math.min(100, (totalSent / limit) * 100);
const recvPct = Math.min(100, (totalRecv / limit) * 100);
// j (backlog): explicit per-season room left after this trade.
const sendLeft = Math.max(0, limit - totalSent);
const recvLeft = Math.max(0, limit - totalRecv);
return (
{/* OUTGOING (send) — I: external heading; meter on top, presets, then the
input + destination, breakdown, and the running "Sending cash" total last. */}
Send to
{multi
? onDest("cash", e.currentTarget)} />
: }
{cashOut > 0 && multi && !dest && ⚠ Pick a destination}
Limit{fmt$(limit)}
Prior{fmt$(prevSent)}
Proposing{cashOut ? fmt$(cashOut) : "—"}
Left{fmt$(sendLeft)}
Sending cash
{fmt$(totalSent)} / {fmt$(limit)}
{/* INCOMING (receive) — computed, no presets: meter on top, value, breakdown, total. */}
Incoming Cash
This trade{cashIn ? fmt$(cashIn) : "—"}
Limit{fmt$(limit)}
Prior{fmt$(prevRecv)}
Incoming{cashIn ? fmt$(cashIn) : "—"}
Left{fmt$(recvLeft)}
Receiving cash
{fmt$(totalRecv)} / {fmt$(limit)}
CBA Art. VII §6 — each team may both send and receive up to {fmt$(limit)} in cash per season (gross, not net).
Prior counts only trades applied in this tool — real prior-season cash moves aren't in our data yet, so a team's true room may be lower.
);
}
/* TpePanel was REPLACED by OptionsPanel in R13.B (TPEs grouped with MLEs +
cap room under one Options tab). Removed in R14 dead-code trim. */
/* ============================================================
OPTIONS PANEL — R13.B: TPEs + MLEs + cap room + cap-hold mgmt
under one "Options" tab. MLE eligibility is derived from the team's
committed payroll vs cap/apron lines (CBA rules):
• Cap-space (post < cap) → Room MLE
• Over-cap, under 1st apron → Non-tax MLE + BAE
• Over 1st apron, under 2nd → Tax-payer MLE
• Over 2nd apron → no MLE
============================================================ */
function OptionsPanel({ slot, tpes, ev, onToggleTpe }) {
const { cap, apron1, apron2, mle, tpmle, bae, roomMle } = CAP_2026;
const post = (ev && typeof ev.post === "number") ? ev.post : 0;
const isCapSpace = post < cap;
const isOverA1 = post >= apron1;
const isOverA2 = post >= apron2;
const capRoom = Math.max(0, cap - post);
// Available exceptions for this team
const mles = [];
if (isOverA2) {
// None (above 2nd apron → all standard exceptions barred)
} else if (isOverA1) {
mles.push({ id: "tpmle", name: "Tax-payer MLE", amount: tpmle, desc: "Above 1st apron — limited to taxpayer MLE only" });
} else if (isCapSpace) {
mles.push({ id: "roomMle", name: "Room MLE", amount: roomMle, desc: "Cap-space teams only — pairs with using cap room" });
} else {
mles.push({ id: "mle", name: "Non-taxpayer MLE", amount: mle, desc: "Over-cap, under 1st apron" });
mles.push({ id: "bae", name: "Bi-annual exception", amount: bae, desc: "Available every other season" });
}
return (
Trades
{/* 3-state FILLED pill (V3): GREY Available (idle / routing in progress) · GREEN
Apply (legal) · oxblood Blocked. toRoute stays in the logic — routing folds
into the grey "Available" state rather than surfacing an "N to route" count. */}
{!tweaks.scenariosEnabled && (
)}
{/* Transactions — icon button mirroring the header opener (icon-btn +
th-badge, no text): opens the trade-undo/history window via the same
window event the header opener + per-player undo use. */}
{(state?.appliedTrades?.length > 0) && (
)}
{derived.anyActivity && (
)}
{/* R12.B — named scenario chip (visible only when scenariosEnabled).
Click → menu with list/rename/duplicate/delete + "New from current". */}
{tweaks.scenariosEnabled && state?.scenarios && (
)}
{window.SettingsMenu && (
setTweak("editLayout", v)} />
)}
{/* R12.B — Scenario switcher menu. localStorage-backed list of scenarios. */}
{tweaks.scenariosEnabled && scenarioMenuOpen && state?.scenarios && (
e.stopPropagation()}>
Scenarios
{Object.entries(state.scenarios).map(([id, sc]) => {
const active = id === state.activeScenario;
const label = sc.name || (id === "default" ? "Default" : id);
const tradesN = (sc.appliedTrades || []).length;
return (
{slots.map((s, i) => {
if (s.hidden) return null; // #3: soft-removed → not in the strip (data preserved)
const ev = derived.evals[i];
const status = capStatus(ev.post);
return (
);
})}
{/* Destination popover (fixed-positioned, outside shell) */}
{destPop && (
setDest(destPop.slotIdx, destPop.kind, destPop.key, c)}
onUndo={() => {
const i = destPop.slotIdx, k = destPop.key;
if (destPop.kind === "player") togglePlayer(i, { name: k });
else if (destPop.kind === "fa") toggleFa(i, { name: k });
else if (destPop.kind === "pick") togglePick(i, { id: k });
else if (destPop.kind === "cash") setCash(i, { out: 0 });
}}
onClose={() => closeDestPop()}
/>
)}
{/* Tweaks panel */}
{/* TM tweaks panel removed — the gear is now the shared main-site SettingsMenu
(Theme · Palette · Header · Density · Team skin · Multi-year · Edit layout · Reset). */}
{/* Player editing is now INLINE in the row (InlineEditor) — no full-page drawer. */}
{/* Toast */}
{toast && (
{toast}
)}
);
}
/* ============================================================
TeamColumn
============================================================ */
function TeamColumn({
slot, idx, pinned, codes, multi, active, ownCode, tab, tweaks,
outgoing, incoming, ev, pendingPicksByTeam, movedPickIdsByTeam,
onSetTab, onTogglePlayer, onTogglePick, onPickSetDest, onToggleFa, onSetCash, onToggleTpe,
onSelect, onRemoveTeam, onDest, onCashDest, onJumpTo, onIncomingDest, onOpenDrawer, onRemoveAsset,
drawer, onDrawerChange, onDrawerApply, onDrawerClose,
rowOrder, onReorder,
}) {
// Which row in THIS column is being edited inline (#5/#6)?
const editHere = drawer && drawer.slotIdx === idx ? drawer : null;
const editPlayer = editHere && editHere.kind === "player" ? editHere.player.name : null;
const editFa = editHere && editHere.kind === "fa" ? editHere.player.name : null;
const editLayout = tweaks?.editLayout || "inline-v2";
const editProps = {
editCtx: editHere, onEditChange: onDrawerChange,
onEditApply: onDrawerApply, onEditClose: onDrawerClose,
editLayout,
slotEv: ev,
// Renounce/Hold are offered only on the MANAGED team's own slot (own FA holds),
// never opponents — see InlineEditor/ColumnDrawer.
ownTeam: slot.code === ownCode,
};
const team = TEAM_BY_CODE[slot.code] || {};
const status = capStatus(ev.post);
const tiles = capTiles(ev.post);
const accentVars = { "--team-primary": team.primary, "--team-secondary": team.secondary };
// R14.A: roster display ordering. Apply the user's drag-saved order first
// (names in rowOrder render in that sequence); fall through to the default
// salary-desc sort for any roster members not yet ranked.
const baseRoster = ROSTERS[slot.code] || [];
const roster = useMemo(() => {
if (!Array.isArray(rowOrder) || rowOrder.length === 0) return baseRoster;
const ix = new Map(rowOrder.map((n, i) => [n, i]));
return [...baseRoster].sort((a, b) => {
const ai = ix.has(a.name) ? ix.get(a.name) : Infinity;
const bi = ix.has(b.name) ? ix.get(b.name) : Infinity;
if (ai !== bi) return ai - bi;
return (b.salary || 0) - (a.salary || 0);
});
}, [baseRoster, rowOrder]);
// R14.A: Sortable.js drag-to-reorder. Initializes on the roster list when
// the Roster tab is active; tears down on tab change. Long-press starts
// drag on touch (delay 200ms); a quick tap still fires the row's onClick
// (toggle into trade). Editing rows are filtered out (can't drag mid-edit).
const listRef = useRef(null);
useEffect(() => {
if (tab !== "players") return;
const el = listRef.current;
const Sortable = (typeof window !== "undefined") ? window.Sortable : null;
if (!el || !Sortable || typeof onReorder !== "function") return;
const inst = Sortable.create(el, {
draggable: "[data-name]", // only roster rows; incoming rows ignored
filter: ".tm-row.editing, .tm-row.locked", // don't drag mid-edit / locked
preventOnFilter: false,
delay: 200, delayOnTouchOnly: true, touchStartThreshold: 5,
animation: 160,
ghostClass: "sort-ghost",
chosenClass: "sort-chosen",
dragClass: "sort-drag",
onEnd() {
const order = [...el.querySelectorAll("[data-name]")]
.map(n => n.getAttribute("data-name"));
onReorder(order);
},
});
return () => inst.destroy();
}, [tab, onReorder]);
const picks = PICKS[slot.code] || [];
const tpes = TPES[slot.code] || [];
const fas = FREE_AGENTS[slot.code] || [];
const activeFas = fas.filter(f => !f._renounced);
const renouncedFas = fas.filter(f => f._renounced);
const ledger = CASH_LEDGER[slot.code] || { sent: 0, received: 0 };
const counts = {
players: slot.players.size + slot.fas.size,
picks: slot.picks.size,
cash: (slot.cash?.out || 0) > 0 ? 1 : 0,
tpes: (slot.tpes?.size || 0),
};
const outSalary = outgoing.reduce((a, p) => a + (p.salary || 0), 0)
+ (slot.cash?.out || 0);
const inSalary = incoming.reduce((a, p) => a + (p.salary || 0), 0);
const net = inSalary - outSalary;
const incomingPlayers = incoming.filter(x => x._kind === "player" || x._kind === "fa");
const incomingPicks = incoming.filter(x => x._kind === "pick");
const incomingCash = incoming.find(x => x._kind === "cash");
// Header: ONE style only — the main-site mobile salary strip (`mobilebar`).
// (Stacked / lean / payroll header variants + their cap/tax/apron/payroll-bar
// geometry removed per the Roster Colours trade-machine handoff. Only `idle`
// and `netStr` survive — the mobile-bar block uses them for the NET label.)
const hs = "mobilebar";
const idle = outgoing.length === 0 && incoming.length === 0 && !(slot.cash?.out > 0);
const netStr = (net > 0 ? "+" : net < 0 ? "−" : "") + fmt$(Math.abs(net));
return (
{/* The column header IS the main-site mobile salary strip: team-colour
top meter, smooth green→red bottom meter, white CBA ticks. The
committed total slides by its position vs the aprons; the "Payroll"
label is replaced by the trade NET. */}
{(() => {
const M = (typeof window !== "undefined") ? window : {};
const skin = (M.TEAM_SKINS && M.TEAM_SKINS[slot.code]) || null;
const topFill = skin ? `linear-gradient(90deg, ${skin[0]}, ${skin[1]})` : undefined;
const netLabel = idle ? "No change" : `${netStr} net`;
// 4d: draw the binding apron ceiling on this slot's bar (committed = ev.post,
// the holds-free apron post-trade). Strictest of the team's STORED hard cap
// (HARDCAPS — from earlier applied trades/signings) and any cap THIS pending
// trade would itself trigger (ev.hardCaps). firstApron (lower $) is stricter.
const _hcSrc = [HARDCAPS[slot.code]].concat(Array.isArray(ev.hardCaps) ? ev.hardCaps : []);
const _slotHardCap = _hcSrc.includes("firstApron") ? "apron1"
: _hcSrc.includes("secondApron") ? "apron2" : null;
return (
onDest(item, anchor)}
onCashDest={(anchor) => onCashDest(anchor)} />
{/* #6: tabs + panels share ONE scroll region so the tabs scroll away with the
list; only the cap header + outgoing strip above stay pinned. */}
{tab === "players" && (
{incomingPlayers.map(item => (
))}
{/* Incoming PICKS moved out of the player rows; they render in the Picks tab. */}
{incomingCash && (
)}
{/* #10: incoming + roster share one list (no "Current roster" divider).
selected players move UP into the outgoing strip — hide them here,
except the one currently being edited inline (keep its row to expand) */}
{roster.filter(p => !slot.players.has(p.name) || p.name === editPlayer).map(p => (
onTogglePlayer(p)}
onDest={(player, anchor) => onDest({ _kind:"player", _key:p.name }, anchor)}
onOpenDrawer={(player) => onOpenDrawer(player, "player")} />
))}
{(() => {
// One renderer shared by the active + renounced FA groups so the
// greyed list reuses the exact same FreeAgentRow markup.
const renderFa = fa => {
const sel = slot.fas.get(fa.name);
return (
sel ? onToggleFa(fa) : onOpenDrawer(fa, "fa")}
onDest={(player, anchor) => onDest({ _kind:"fa", _key:fa.name }, anchor)}
onOpenDrawer={(p) => onOpenDrawer(p, "fa")} />
);
};
return (
<>
{activeFas.length > 0 && (
<>
Can take back up to ~{fmt$(ev.maxIncoming)}
{ev.legal && absorbedVia(ev) ? <> · via {absorbedVia(ev)} : null}
)}
{!dormant && ev.reasons.map((r, k) => (
{ev.legal ? "✓" : "✗"} {r}
))}
{!dormant && ev.flags.map((f, k) => (
⚠ {f}
))}
{dormant &&
Nothing in or out yet.
}
);
})}
{derived.anyActivity && }
);
}
/* DrawerHost was the wrapper for PlayerDrawer (centered modal pattern).
Removed in R14 dead-code trim alongside PlayerDrawer. Replaced by
ColumnDrawer (R11.C drawer layout, anchored to column bottom). */
/* ---- export the root view (App was renamed to TradeMachineView) ---- */
Object.assign(window, { TradeMachineView });
})();
setBad(true)} />