jaml-ui 0.14.2 → 0.14.4

package/assets/Balatro Seed Curator (DesignsV2)/src/sprites.jsx

@@ -1,259 +0,0 @@
-// <Sprite> — positions a slice of a sprite sheet via background-image.
-// Works with any sheet registered in window.SHEETS and any name map loaded
-// via loadSpriteMap(). Sizes are in display-px; pixel-art is preserved via
-// image-rendering: pixelated.
-
-const { useState, useEffect, useRef } = React;
-
-// ─── Name maps, loaded async from JSON. Keys are normalized (lowercase, no
-//     spaces, no punctuation) to tolerate both "Blueprint" and "blueprint"
-//     inputs.
-const SPRITE_MAPS = {};
-
-function normalizeName(s) {
-  return String(s || '').toLowerCase().replace(/[^a-z0-9]/g, '');
-}
-
-async function loadSpriteMap(sheet, url, { field = 'pos' } = {}) {
-  const r = await fetch(url);
-  const data = await r.json();
-  const out = {};
-  if (Array.isArray(data)) {
-    for (const e of data) out[normalizeName(e.name)] = e[field];
-  } else if (data.sprites) {
-    // blinds_metadata shape
-    const walk = (obj) => {
-      for (const [k, v] of Object.entries(obj)) {
-        if (v && typeof v === 'object' && 'x' in v && 'y' in v) {
-          out[normalizeName(k)] = { x: v.x, y: v.y };
-        } else if (v && typeof v === 'object') {
-          walk(v);
-        }
-      }
-    };
-    walk(data.sprites);
-  }
-  SPRITE_MAPS[sheet] = { ...(SPRITE_MAPS[sheet] || {}), ...out };
-  return out;
-}
-
-function getSpritePos(sheet, name) {
-  const m = SPRITE_MAPS[sheet];
-  if (!m) return null;
-  return m[normalizeName(name)] || null;
-}
-
-// Hook: re-render when any sprite map loads. Used by Sprite to pick up
-// positions that arrive after first render.
-const mapListeners = new Set();
-function useSpriteMapTick() {
-  const [, set] = useState(0);
-  useEffect(() => {
-    const fn = () => set((n) => n + 1);
-    mapListeners.add(fn);
-    return () => mapListeners.delete(fn);
-  }, []);
-}
-const _origLoadSpriteMap = loadSpriteMap;
-window.loadSpriteMap = async (...args) => {
-  const r = await _origLoadSpriteMap(...args);
-  for (const fn of mapListeners) fn();
-  return r;
-};
-
-// ─── <Sprite> — pos is {x,y} grid index. width/height in display px.
-function Sprite({ sheet, name, pos: posOverride, width, height, className = '', style = {}, children }) {
-  useSpriteMapTick();
-  const sheetInfo = window.SHEETS[sheet];
-  if (!sheetInfo) return null;
-  const pos = posOverride || getSpritePos(sheet, name);
-
-  // Native sprite aspect (before display sizing). Pull from the sheet image
-  // if already cached, else assume 71:95 joker ratio as a safe default.
-  const aspect = SHEET_ASPECTS[sheet] || (95 / 71);
-  const w = width || 71;
-  const h = height || Math.round(w * aspect);
-
-  if (!pos) {
-    return (
-      <div className={className} style={{ width: w, height: h, background: 'rgba(255,0,0,0.08)', border: '1px dashed rgba(255,0,0,0.3)', boxSizing: 'border-box', ...style }} title={`missing: ${sheet}/${name}`}>
-        {children}
-      </div>
-    );
-  }
-
-  const bgW = w * sheetInfo.cols;
-  const bgH = h * sheetInfo.rows;
-
-  return (
-    <div
-      className={className}
-      style={{
-        width: w,
-        height: h,
-        backgroundImage: `url(${sheetInfo.src})`,
-        backgroundSize: `${bgW}px ${bgH}px`,
-        backgroundPosition: `-${pos.x * w}px -${pos.y * h}px`,
-        backgroundRepeat: 'no-repeat',
-        imageRendering: 'pixelated',
-        flexShrink: 0,
-        position: 'relative',
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-// Aspect ratios per sheet (h/w), so Sprite can size correctly from just a
-// width. Derived from image-metadata; fallback is joker-like.
-const SHEET_ASPECTS = {
-  jokers:    95 / 71,   // 710/10 = 71, 1520/16 = 95
-  tarots:    95 / 71,
-  vouchers:  95 / 71,
-  tags:      34 / 34,   // tags are square-ish
-  boosters:  190 / 142, // 568/4 = 142, 1710/9 = 190
-  blinds:    1,         // 68×68 square
-  editions:  95 / 71,
-  enhancers: 95 / 71,
-  stickers:  95 / 71,
-  deck:      95 / 71,
-  stakes:    1,
-};
-
-// ─── <HitStamp> — small corner badge: green check for should-hit, gold
-//     star for must-hit. Positioned absolutely, so parent must be relative.
-function HitStamp({ kind }) {
-  if (!kind) return null;
-  const palette = kind === 'must'
-    ? { bg: window.JimboColor.GOLD, border: '#8a6a1f', glyph: '★', color: '#1e2b2d' }
-    : { bg: window.JimboColor.GREEN_TEXT, border: '#1f7a55', glyph: '✓', color: '#fff' };
-
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        top: -4,
-        right: -4,
-        width: 16,
-        height: 16,
-        borderRadius: 8,
-        background: palette.bg,
-        border: `1.5px solid ${palette.border}`,
-        color: palette.color,
-        fontSize: 11,
-        lineHeight: '13px',
-        textAlign: 'center',
-        fontFamily: 'm6x11plus, monospace',
-        boxShadow: '0 1px 2px rgba(0,0,0,0.35)',
-        zIndex: 2,
-        pointerEvents: 'none',
-      }}
-    >
-      {palette.glyph}
-    </div>
-  );
-}
-
-// ─── <JokerMini>, <TarotMini>, etc. — pre-sized wrappers with optional hit.
-function JokerMini({ name, hit, size = 64, edition, onClick }) {
-  const w = size;
-  const h = Math.round(size * 95 / 71);
-  return (
-    <div
-      onClick={onClick}
-      style={{
-        position: 'relative',
-        width: w,
-        height: h,
-        cursor: onClick ? 'pointer' : 'default',
-        filter: hit ? 'none' : 'brightness(0.78) saturate(0.85)',
-        transition: 'filter 180ms',
-      }}
-    >
-      <Sprite sheet="jokers" name={name} width={w} height={h} />
-      {edition && <Sprite sheet="editions" pos={EDITION_POS[edition] || { x: 0, y: 0 }} width={w} height={h} style={{ position: 'absolute', inset: 0, mixBlendMode: 'screen', opacity: 0.85 }} />}
-      <HitStamp kind={hit} />
-    </div>
-  );
-}
-
-const EDITION_POS = { Foil: { x: 0, y: 0 }, Holographic: { x: 1, y: 0 }, Polychrome: { x: 2, y: 0 }, Negative: { x: 3, y: 0 } };
-
-function TarotMini({ name, hit, size = 64, onClick }) {
-  const w = size;
-  const h = Math.round(size * 95 / 71);
-  return (
-    <div onClick={onClick} style={{ position: 'relative', width: w, height: h, cursor: onClick ? 'pointer' : 'default', filter: hit ? 'none' : 'brightness(0.78) saturate(0.85)', transition: 'filter 180ms' }}>
-      <Sprite sheet="tarots" name={name} width={w} height={h} />
-      <HitStamp kind={hit} />
-    </div>
-  );
-}
-
-function VoucherMini({ name, hit, size = 64, onClick }) {
-  const w = size;
-  const h = Math.round(size * 95 / 71);
-  return (
-    <div onClick={onClick} style={{ position: 'relative', width: w, height: h, cursor: onClick ? 'pointer' : 'default', filter: hit ? 'none' : 'brightness(0.85) saturate(0.9)', transition: 'filter 180ms' }}>
-      <Sprite sheet="vouchers" name={name} width={w} height={h} />
-      <HitStamp kind={hit} />
-    </div>
-  );
-}
-
-function TagChip({ name, hit, size = 28, onClick }) {
-  return (
-    <div onClick={onClick} style={{ position: 'relative', cursor: onClick ? 'pointer' : 'default', filter: hit ? 'none' : 'none' }}>
-      <Sprite sheet="tags" name={name} width={size} height={size} />
-      <HitStamp kind={hit} />
-    </div>
-  );
-}
-
-function BossChip({ name, hit, size = 48, onClick }) {
-  // BlindChips.png is an animation strip (21 frames per row). Show frame 0
-  // by overriding pos.y to the row for this boss and pos.x = 0.
-  const basePos = getSpritePos('blinds', name);
-  if (!basePos) return <Sprite sheet="blinds" name={name} width={size} height={size} />;
-  return (
-    <div onClick={onClick} style={{ position: 'relative', cursor: onClick ? 'pointer' : 'default' }}>
-      <Sprite sheet="blinds" pos={{ x: 0, y: basePos.y }} width={size} height={size} />
-      <HitStamp kind={hit} />
-    </div>
-  );
-}
-
-function PackSprite({ kind, size = 56, onClick, open, hit }) {
-  // kind: 'arcana' | 'celestial' | 'spectral' | 'buffoon' | 'standard' + 'jumbo' / 'mega' variants
-  const w = size;
-  const h = Math.round(size * 190 / 142);
-  return (
-    <div
-      onClick={onClick}
-      style={{
-        position: 'relative',
-        width: w,
-        height: h,
-        cursor: onClick ? 'pointer' : 'default',
-        transform: open ? 'translateY(-4px) rotate(-2deg)' : 'none',
-        transition: 'transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
-      }}
-    >
-      <Sprite sheet="boosters" name={kind} width={w} height={h} />
-      <HitStamp kind={hit} />
-    </div>
-  );
-}
-
-window.Sprite = Sprite;
-window.HitStamp = HitStamp;
-window.JokerMini = JokerMini;
-window.TarotMini = TarotMini;
-window.VoucherMini = VoucherMini;
-window.TagChip = TagChip;
-window.BossChip = BossChip;
-window.PackSprite = PackSprite;
-window.normalizeName = normalizeName;
-window.getSpritePos = getSpritePos;

package/assets/Balatro Seed Curator (DesignsV2)/src/tokens.js

@@ -1,49 +0,0 @@
-// Balatro design tokens — from jaml-ui/src/ui/tokens.ts
-// DO NOT substitute with Lua HEX values; these are shader-output eyedropped.
-
-window.JimboColor = {
-  RED: '#ff4c40',
-  BLUE: '#0093ff',
-  GREEN: '#429f79',
-  ORANGE: '#ff9800',
-  GOLD: '#e4b643',
-  PURPLE: '#9e74ce',
-
-  DARK_RED: '#a02721',
-  DARK_BLUE: '#0057a1',
-  DARK_ORANGE: '#a05b00',
-  DARK_GREEN: '#215f46',
-  DARK_PURPLE: '#5e437e',
-
-  DARK_GREY: '#3a5055',
-  DARKEST: '#1e2b2d',
-  GREY: '#708386',
-  TEAL_GREY: '#404c4e',
-
-  PANEL_EDGE: '#1e2e32',
-  INNER_BORDER: '#334461',
-
-  BORDER_SILVER: '#b9c2d2',
-  BORDER_SOUTH: '#777e89',
-
-  GOLD_TEXT: '#e4b643',
-  GREEN_TEXT: '#35bd86',
-  ORANGE_TEXT: '#ff8f00',
-  WHITE: '#ffffff',
-  BLACK: '#000000',
-};
-
-// Sprite sheet grid dimensions (from jaml-ui/src/sprites/spriteData.ts)
-window.SHEETS = {
-  jokers:    { src: 'assets/Jokers.png',    cols: 10, rows: 16 },
-  tarots:    { src: 'assets/Tarots.png',    cols: 10, rows: 6  },
-  vouchers:  { src: 'assets/Vouchers.png',  cols: 9,  rows: 4  },
-  tags:      { src: 'assets/tags.png',      cols: 6,  rows: 5  },
-  boosters:  { src: 'assets/Boosters.png',  cols: 4,  rows: 9  },
-  blinds:    { src: 'assets/BlindChips.png',cols: 21, rows: 31 },
-  editions:  { src: 'assets/Editions.png',  cols: 5,  rows: 1  },
-  enhancers: { src: 'assets/Enhancers.png', cols: 7,  rows: 5  },
-  stickers:  { src: 'assets/stickers.png',  cols: 5,  rows: 3  },
-  deck:      { src: 'assets/8BitDeck.png',  cols: 13, rows: 4  },
-  stakes:    { src: 'assets/stakes.png',    cols: 4,  rows: 2  },
-};

package/assets/Balatro Seed Curator (DesignsV2)/src/v2/AntePageV2.jsx

@@ -1,290 +0,0 @@
-// AntePageV2 — per the reorg:
-//
-//   ANTE n                  smTag  bgTag  BOSS       ← header row, tags+boss right
-//   ┌────┬──────────────────────────────────────┐
-//   │ V  │   pack0  pack2  pack4                │    ← voucher column (left), packs grid (2 rows × N cols)
-//   │    │   pack1  pack3  pack5                │
-//   ├────┴──────────────────────────────────────┤
-//   │ SHOP ▸  [joker][joker][tarot]…  (tape)    │    ← infinite horizontal tape, edge fades
-//   └───────────────────────────────────────────┘
-//
-// Ante 1 special: two shop tapes stacked, labeled "Round 1" / "Round 2" (since ante 1 starts at
-// Small Blind — you haven't earned a shop yet — so only 4 booster packs, but shop refreshes twice).
-
-const { useState: aUS, useRef: aUR, useEffect: aUE } = React;
-
-const C = window.JimboColor;
-
-// ── bestHit / hitColor ──
-const bestHit = (hits) => {
-  if (!hits || !hits.length) return null;
-  if (hits.some(h => h.kind === 'must')) return 'must';
-  return 'should';
-};
-const hitColor = (k) => k === 'must' ? C.BLUE : k === 'should' ? C.RED : null;
-
-// ── Panel ─
-function Panel({ children, style, bg = C.DARK_GREY, edge = C.PANEL_EDGE }) {
-  return (
-    <div style={{
-      background: bg,
-      border: `2px solid ${edge}`,
-      borderRadius: 6,
-      boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.04), 0 2px 0 ${C.BLACK}`,
-      ...style,
-    }}>{children}</div>
-  );
-}
-
-// ── GlowRing ──
-function GlowRing({ kind, children }) {
-  if (!kind) return children;
-  const color = hitColor(kind);
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <div style={{
-        position: 'absolute', inset: -3, borderRadius: 6,
-        boxShadow: `0 0 0 2px ${color}, 0 0 10px ${color}`,
-        opacity: 0.8,
-        animation: 'pulseGlow 1.6s ease-in-out infinite',
-        pointerEvents: 'none',
-        zIndex: 1,
-      }} />
-      <div style={{ position: 'relative', zIndex: 2 }}>{children}</div>
-    </div>
-  );
-}
-
-// Inject keyframes once
-(function injectKeyframes(){
-  if (document.getElementById('v2-kf')) return;
-  const s = document.createElement('style');
-  s.id = 'v2-kf';
-  s.textContent = `
-    @keyframes pulseGlow { 0%,100% { opacity:.55;} 50% { opacity:1;} }
-    .v2-shop-scroll::-webkit-scrollbar { display: none; }
-  `;
-  document.head.appendChild(s);
-})();
-
-// ── Tag chip small ──
-function MiniChip({ children, tight, color = C.WHITE }) {
-  return (
-    <div style={{
-      fontFamily: 'm6x11plus, monospace', fontSize: 9, color,
-      letterSpacing: 1, textTransform: 'uppercase',
-      padding: tight ? '1px 3px' : '2px 4px',
-      lineHeight: 1,
-    }}>{children}</div>
-  );
-}
-
-// ── HeaderTile — compact tag/boss tile for top-right row ──
-function HeaderTile({ kind, value, hit, label }) {
-  const sz = 32;
-  const inner =
-    kind === 'boss' ? <BossChip name={value} size={sz} /> :
-    <TagChip name={value} size={sz} />;
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
-      <div style={{ width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <GlowRing kind={hit}>{inner}</GlowRing>
-      </div>
-      <MiniChip color={hit ? hitColor(hit) : C.GREY}>{label}</MiniChip>
-    </div>
-  );
-}
-
-// ── VoucherSquare — tall left column tile ──
-function VoucherSquare({ name, hit }) {
-  return (
-    <div style={{
-      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4,
-      background: C.DARKEST, border: `2px solid ${C.PANEL_EDGE}`, borderRadius: 6,
-      padding: '8px 6px', minWidth: 68,
-    }}>
-      <MiniChip color={hit ? hitColor(hit) : C.GREY}>V</MiniChip>
-      {name ? <GlowRing kind={hit}><VoucherMini name={name} size={42} /></GlowRing>
-            : <div style={{ width: 42, height: 42, opacity: 0.25, border: `1px dashed ${C.GREY}`, borderRadius: 4 }} />}
-      <div style={{
-        fontFamily: 'm6x11plus, monospace', fontSize: 9, color: C.WHITE,
-        maxWidth: 70, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
-        textAlign: 'center', letterSpacing: 0.5,
-      }}>{name || '—'}</div>
-    </div>
-  );
-}
-
-// ── PackCell — tap to fan ──
-function PackCell({ pack, idx }) {
-  const [open, setOpen] = aUS(false);
-  const anyHit = pack.itemHits?.some(h => h.length) ? bestHit(pack.itemHits.flat()) : null;
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 0, position: 'relative' }}>
-      <GlowRing kind={anyHit}>
-        <PackSprite kind={pack.type.replace('pack','')} size={44} open={open} onClick={() => setOpen(o => !o)} />
-      </GlowRing>
-      <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 8, color: anyHit ? hitColor(anyHit) : C.GREY, letterSpacing: 1, marginTop: 2 }}>
-        P{idx + 1}
-      </div>
-      {open && (
-        <div style={{
-          position: 'absolute', top: 50, left: '50%', transform: 'translateX(-50%)',
-          display: 'flex', gap: 4, padding: '6px 8px',
-          background: C.DARKEST, border: `2px solid ${C.PANEL_EDGE}`, borderRadius: 5,
-          zIndex: 10, whiteSpace: 'nowrap',
-        }}>
-          {pack.items.map((it, i) => {
-            const itemHit = bestHit(pack.itemHits?.[i]);
-            return <GlowRing key={i} kind={itemHit}><JokerMini name={it} size={30} /></GlowRing>;
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── PackGrid — 2 rows × ceil(n/2) cols ──
-function PackGrid({ packs }) {
-  const cols = Math.max(1, Math.ceil(packs.length / 2));
-  return (
-    <div style={{
-      display: 'grid',
-      gridTemplateColumns: `repeat(${cols}, auto)`,
-      gridTemplateRows: 'repeat(2, auto)',
-      gridAutoFlow: 'column',
-      gap: '10px 12px',
-      alignItems: 'start', justifyItems: 'center',
-    }}>
-      {packs.map((p, i) => <PackCell key={i} pack={p} idx={i} />)}
-    </div>
-  );
-}
-
-// ── ShopTape — horizontal grab-scroll with edge fades ──
-function ShopTape({ items, label = 'SHOP' }) {
-  const ref = aUR(null);
-  const drag = aUR({ down: false, x0: 0, sl0: 0 });
-
-  const onDown = (e) => {
-    const el = ref.current; if (!el) return;
-    const x = e.touches ? e.touches[0].clientX : e.clientX;
-    drag.current = { down: true, x0: x, sl0: el.scrollLeft };
-    el.style.cursor = 'grabbing';
-  };
-  const onMove = (e) => {
-    if (!drag.current.down) return;
-    const el = ref.current; if (!el) return;
-    const x = e.touches ? e.touches[0].clientX : e.clientX;
-    el.scrollLeft = drag.current.sl0 - (x - drag.current.x0);
-  };
-  const onUp = () => { const el = ref.current; if (el) el.style.cursor = 'grab'; drag.current.down = false; };
-
-  return (
-    <div>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
-        <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 10, color: C.GREY, letterSpacing: 2 }}>{label} ▸</div>
-        <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 10, color: C.GREY }}>{items.length}</div>
-      </div>
-      <Panel style={{ padding: '8px 0', position: 'relative' }}>
-        <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width: 24, background: `linear-gradient(90deg, ${C.DARK_GREY}, transparent)`, pointerEvents: 'none', zIndex: 2 }} />
-        <div style={{ position: 'absolute', top: 0, bottom: 0, right: 0, width: 24, background: `linear-gradient(-90deg, ${C.DARK_GREY}, transparent)`, pointerEvents: 'none', zIndex: 2 }} />
-        <div
-          ref={ref}
-          className="v2-shop-scroll"
-          onMouseDown={onDown} onMouseMove={onMove} onMouseUp={onUp} onMouseLeave={onUp}
-          onTouchStart={onDown} onTouchMove={onMove} onTouchEnd={onUp}
-          style={{
-            overflowX: 'auto', overflowY: 'hidden',
-            display: 'flex', gap: 8, padding: '2px 18px',
-            cursor: 'grab', userSelect: 'none', scrollbarWidth: 'none',
-          }}
-        >
-          {items.map((item, i) => {
-            const hit = bestHit(item.hits);
-            return (
-              <div key={i} style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                <GlowRing kind={hit}>
-                  <JokerMini name={item.value} size={50} edition={item.edition} />
-                </GlowRing>
-                <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 8, color: hit ? hitColor(hit) : C.GREY, letterSpacing: 1, marginTop: 2 }}>
-                  #{i + 1}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </Panel>
-    </div>
-  );
-}
-
-// ── AntePageV2 ───────
-function AntePageV2({ ante }) {
-  const voucherHit = bestHit(ante._voucherHits);
-  const smallHit   = bestHit(ante._smallTagHits);
-  const bigHit     = bestHit(ante._bigTagHits);
-  const bossHit    = bestHit(ante._bossHits);
-  const soulHit    = bestHit(ante._soulHits);
-
-  // Ante 1 quirk: split shopQueue into two rounds for display
-  const isAnte1 = ante.ante === 1;
-  const shopRounds = isAnte1
-    ? [
-        { label: 'SHOP · ROUND 1', items: ante.shopQueue.slice(0, Math.ceil(ante.shopQueue.length / 2)) },
-        { label: 'SHOP · ROUND 2', items: ante.shopQueue.slice(Math.ceil(ante.shopQueue.length / 2)) },
-      ]
-    : [{ label: 'SHOP', items: ante.shopQueue }];
-
-  return (
-    <div style={{ padding: '12px 10px 32px', display: 'flex', flexDirection: 'column', gap: 10 }}>
-      {/* Header row: ANTE n   smTag bgTag Boss */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
-          <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 10, color: C.GREY, letterSpacing: 2 }}>ANTE</div>
-          <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 26, color: C.WHITE, lineHeight: 1 }}>{ante.ante}</div>
-        </div>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <HeaderTile kind="smalltag" value={ante.smallBlindTag} hit={smallHit} label="SMALL" />
-          <HeaderTile kind="bigtag"   value={ante.bigBlindTag}   hit={bigHit}   label="BIG" />
-          <HeaderTile kind="boss"     value={ante.boss}          hit={bossHit}  label="BOSS" />
-        </div>
-      </div>
-
-      {/* Voucher + Packs row */}
-      <Panel style={{ padding: 10 }}>
-        <div style={{ display: 'flex', gap: 10, alignItems: 'stretch' }}>
-          <VoucherSquare name={ante.voucher} hit={voucherHit} />
-          <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-            {ante.boosterPacks?.length > 0
-              ? <PackGrid packs={ante.boosterPacks} />
-              : <div style={{ color: C.GREY, fontSize: 10, fontFamily: 'm6x11plus, monospace' }}>NO PACKS</div>}
-          </div>
-        </div>
-      </Panel>
-
-      {/* Shop tape(s) */}
-      {shopRounds.map((r, i) => (
-        <ShopTape key={i} items={r.items} label={r.label} />
-      ))}
-
-      {/* Soul joker callout */}
-      {ante.soulJoker && (
-        <Panel style={{ padding: 8, borderColor: soulHit === 'must' ? C.GOLD : C.DARK_PURPLE }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <GlowRing kind={soulHit}><JokerMini name={ante.soulJoker.value} size={44} edition={ante.soulJoker.edition} /></GlowRing>
-            <div>
-              <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 9, color: C.GOLD_TEXT, letterSpacing: 2 }}>SOUL JOKER</div>
-              <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 14, color: C.WHITE }}>{ante.soulJoker.value}</div>
-            </div>
-          </div>
-        </Panel>
-      )}
-    </div>
-  );
-}
-
-window.AntePageV2 = AntePageV2;
-window.GlowRing = GlowRing;
-window.bestHit = bestHit;
-window.hitColor = hitColor;