@energy8platform/shell 0.2.0

package/src/ui/pixi/components/Settings.ts

@@ -0,0 +1,117 @@
+import { Container, Text } from 'pixi.js';
+import type { PixiComponentContext, ShellLayer } from '../context';
+import { Overlay } from '../primitives/overlay';
+import { makeText } from '../text';
+import { makeIcon } from '../pixi-icon';
+import { FlexBox } from '../primitives/flex';
+import { Slider, Spacer } from '../primitives/controls';
+import { IconButton, attachHover } from '../primitives/widgets';
+
+/** Settings overlay — sound on/off, volume sliders, and a Game info link. */
+export function openSettings(host: PixiComponentContext): ShellLayer {
+  return new Overlay(host, {
+    tag: 'settings',
+    title: host.t('Settings'),
+    onClose: () => host.closeLayer(),
+    build: (w) => buildBody(host, w),
+  });
+}
+
+function buildBody(host: PixiComponentContext, width: number): Container {
+  const col = new FlexBox({ direction: 'column', align: 'stretch', gap: 10 });
+
+  // Sound on/off — backed by the shell's shared `soundOn` state so this toggle and the Shift+M
+  // hotkey stay in sync; `setSound` emits `settingChange({ key: 'sound' })` and refreshes the icon.
+  const soundOn0 = host.soundOn ?? true;
+  const speaker = new IconButton(soundOn0 ? 'soundOn' : 'soundOff', {
+    size: 36,
+    glyph: 24,
+    color: host.tokens.plaqueLabel,
+    hover: host.tokens.accent,
+    activeColor: '#ffffff',
+    active: soundOn0,
+    onTap: () => host.setSound?.(!(host.soundOn ?? true)),
+  });
+  // Live-update the speaker when sound changes from here OR via Shift+M (shell clears on close).
+  host.setSoundRefresh?.((on) => {
+    if (speaker.destroyed) return; // overlay torn down but refresher not yet cleared (push-over edge)
+    speaker.setIcon(on ? 'soundOn' : 'soundOff');
+    speaker.active = on;
+  });
+  col.add(glassRow(host, [textNode(host, host.t('Sound')), new Spacer(), speaker]));
+
+  // Volume sliders
+  col.add(sliderRow(host, width, 'master', host.t('Master volume')));
+  col.add(sliderRow(host, width, 'music', host.t('Music')));
+  col.add(sliderRow(host, width, 'sfx', host.t('SFX')));
+
+  // Game info link
+  const infoIcon = makeIcon('info', 22, '#ffffff');
+  const infoLabel = textNode(host, host.t('Game info'));
+  const chevron = makeIcon('chevronRight', 20, host.tokens.muted);
+  const infoRow = glassRow(host, [infoIcon, infoLabel, new Spacer(), chevron], { button: true, onTap: () => host.actions.openInfo() });
+  col.add(infoRow);
+
+  return col;
+}
+
+function textNode(host: PixiComponentContext, text: string): Container {
+  return makeText(text, { size: 14, weight: '600', color: '#ffffff' });
+}
+
+/** A full-width glass row holding the given children (label/controls), align-centred. */
+function glassRow(host: PixiComponentContext, children: Container[], opts: { button?: boolean; onTap?: () => void } = {}): FlexBox {
+  const row = new FlexBox({
+    direction: 'row',
+    align: 'center',
+    gap: 12,
+    // .ge-ov-row { padding: clamp(11px,2.2vh,15px) 16px } — 15 at desktop; minHeight matches the
+    // DOM row's effective height (driven by the tallest child's line box, not just the em box).
+    padding: { top: 15, bottom: 15, left: 16, right: 16 },
+    minHeight: 60,
+    background: { fill: host.tokens.plaqueGlass, radius: 16 },
+  });
+  for (const c of children) row.add(c, c instanceof Spacer ? { grow: 1 } : {});
+  if (opts.button) {
+    row.setInteractive(true); // full-box hit area — hover + tap across the whole row, not just the icon/label
+    if (opts.onTap) row.on('pointertap', opts.onTap);
+    // hover: brighter glass + accent text (DOM button.ge-ov-row:hover)
+    const texts = children.filter((c): c is Text => c instanceof Text);
+    const orig = texts.map((t) => t.style.fill);
+    attachHover(
+      row,
+      () => {
+        row.setBgFill(host.tokens.plaqueGlassHover);
+        texts.forEach((t) => (t.style.fill = host.tokens.accent));
+      },
+      () => {
+        row.setBgFill(host.tokens.plaqueGlass);
+        texts.forEach((t, i) => (t.style.fill = orig[i]));
+      },
+    );
+  }
+  return row;
+}
+
+/** A column row: head (label + live % value) over a draggable slider. */
+function sliderRow(host: PixiComponentContext, bodyWidth: number, key: string, label: string): FlexBox {
+  const row = new FlexBox({
+    direction: 'column',
+    align: 'stretch',
+    gap: 10,
+    padding: { top: 15, bottom: 15, left: 16, right: 16 },
+    background: { fill: host.tokens.plaqueGlass, radius: 16 },
+  });
+  const head = new FlexBox({ direction: 'row', align: 'center', justify: 'space-between' });
+  const valueText = makeText('100%', { size: 13, weight: '700', color: host.tokens.plaqueLabel });
+  head.add(makeText(label, { size: 14, weight: '600', color: '#ffffff' }));
+  head.add(new Spacer(), { grow: 1 });
+  head.add(valueText);
+  const slider = new Slider(host, 1, (v) => {
+    valueText.text = `${Math.round(v * 100)}%`;
+    host.emit('settingChange', { key, value: v });
+  });
+  row.add(head);
+  row.add(slider);
+  return row;
+}

package/src/ui/pixi/components/pickers.ts

@@ -0,0 +1,170 @@
+import type { PixiComponentContext, ShellLayer } from '../context';
+import { CardModal } from '../primitives/card';
+import { Chip } from '../primitives/controls';
+import { FlexBox } from '../primitives/flex';
+
+interface Choice {
+  id: string;
+  label: string;
+}
+
+interface SheetOpts {
+  tag: string;
+  title: string;
+  choices: Choice[];
+  selected: string;
+  /** Chips per row — a fixed number, or `{ wide, mobile }` that reflows with the layout. */
+  columns: number | { wide: number; mobile: number };
+  /** Max card width in em (the 6-wide bet picker needs 44em vs the 28em default). */
+  maxEm?: number;
+  confirmLabel: string;
+  onConfirm: (id: string) => void;
+}
+
+/** Extended CardModal that implements ShellLayer.onKey for keyboard navigation. */
+class PickerModal extends CardModal {
+  private _onKey: (e: KeyboardEvent) => boolean;
+
+  constructor(host: PixiComponentContext, opts: ConstructorParameters<typeof CardModal>[1], onKey: (e: KeyboardEvent) => boolean) {
+    super(host, opts);
+    this._onKey = onKey;
+  }
+
+  onKey(e: KeyboardEvent): boolean {
+    return this._onKey(e);
+  }
+}
+
+/** A centred picker (chips grid + accent Confirm) on the shared card modal. */
+function buildSheet(host: PixiComponentContext, opts: SheetOpts): ShellLayer {
+  const columns = typeof opts.columns === 'number'
+    ? opts.columns
+    : host.layout === 'mobile' ? opts.columns.mobile : opts.columns.wide;
+
+  let selected = opts.selected;
+  let focusIndex = opts.choices.findIndex((c) => c.id === selected);
+  if (focusIndex < 0) focusIndex = 0;
+  const chips: Chip[] = [];
+
+  /** Update chip visuals to reflect the current focused index. */
+  function setHighlight(newIndex: number): void {
+    focusIndex = newIndex;
+    selected = opts.choices[focusIndex].id;
+    for (let i = 0; i < chips.length; i++) {
+      chips[i].setSelected(i === focusIndex);
+    }
+  }
+
+  function doConfirm(): void {
+    opts.onConfirm(selected);
+    host.closeLayer();
+  }
+
+  function onKey(e: KeyboardEvent): boolean {
+    const last = opts.choices.length - 1;
+    switch (e.code) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+      case 'Equal':
+      case 'NumpadAdd':
+        if (focusIndex < last) setHighlight(focusIndex + 1);
+        return true;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+      case 'Minus':
+      case 'NumpadSubtract':
+        if (focusIndex > 0) setHighlight(focusIndex - 1);
+        return true;
+      case 'Enter':
+      case 'Space':
+        doConfirm();
+        return true;
+      case 'Escape':
+        host.closeLayer();
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  const modal = new PickerModal(host, { tag: opts.tag, title: opts.title, maxEm: opts.maxEm, onClose: () => host.closeLayer() }, onKey);
+  const em = modal.emSize;
+  const gap = 0.65 * em;
+  const innerW = modal.cardWidth - 2.4 * em;
+  const colW = (innerW - gap * (columns - 1)) / columns;
+
+  const grid = new FlexBox({ direction: 'column', align: 'start', gap });
+  for (let i = 0; i < opts.choices.length; i += columns) {
+    const rowChoices = opts.choices.slice(i, i + columns);
+    const row = new FlexBox({ direction: 'row', align: 'center', gap });
+    for (let j = 0; j < rowChoices.length; j++) {
+      const c = rowChoices[j];
+      const chipIndex = i + j;
+      const chip = new Chip(host, c.id, c.label, chipIndex === focusIndex, em, (id) => {
+        const idx = opts.choices.findIndex((ch) => ch.id === id);
+        if (idx >= 0) setHighlight(idx);
+      });
+      chip.setLayoutSize(colW, undefined);
+      chips.push(chip);
+      row.add(chip);
+    }
+    row.layout();
+    grid.add(row);
+  }
+  modal.body.add(grid);
+
+  modal.setActions([
+    {
+      label: opts.confirmLabel,
+      kind: 'accent',
+      onTap: doConfirm,
+    },
+  ]);
+  modal.build();
+  return modal;
+}
+
+/** Bet picker — all available bets as chips (6 per row, 3 on mobile), accent Confirm applies it. */
+export function openBetPicker(host: PixiComponentContext): ShellLayer {
+  return buildSheet(host, {
+    tag: 'bet-modal',
+    title: host.t('Bet'),
+    columns: { wide: 6, mobile: 3 },
+    maxEm: 44, // wider card to fit 6 chips/row
+    confirmLabel: host.t('Confirm'),
+    choices: host.state.availableBets.map((b) => ({ id: String(b), label: host.fmt(b) })),
+    selected: String(host.state.bet),
+    onConfirm: (id) => {
+      const v = Number(id);
+      host.actions.setBet(v);
+    },
+  });
+}
+
+const AUTOPLAY_COUNTS = [10, 25, 50, 100, 250, 500, 1000, 2000, Infinity];
+
+function autoplayCounts(maxCount?: number): number[] {
+  if (maxCount == null) return AUTOPLAY_COUNTS;
+  const capped = AUTOPLAY_COUNTS.filter((n) => Number.isFinite(n) && n <= maxCount);
+  if (!capped.includes(maxCount)) capped.push(maxCount);
+  return capped;
+}
+
+/** Autoplay picker — spin counts (incl. ∞ unless a maxCount caps them); Confirm starts autoplay. */
+export function openAutoplayPicker(host: PixiComponentContext): ShellLayer {
+  const maxCount = host.config.features.autoplay?.maxCount;
+  const counts = autoplayCounts(maxCount);
+  return buildSheet(host, {
+    tag: 'autoplay-modal',
+    title: host.t('Autoplay'),
+    columns: 3,
+    confirmLabel: host.t('Start'),
+    choices: counts.map((n) => ({ id: String(n), label: Number.isFinite(n) ? String(n) : '∞' })),
+    selected: String(host.state.autoplay.remaining || counts[0]),
+    onConfirm: (id) => {
+      let remaining = Number(id);
+      if (maxCount != null) remaining = Math.min(remaining, maxCount);
+      host.actions.startAutoplay(remaining);
+    },
+  });
+}

package/src/ui/pixi/context.ts

@@ -0,0 +1,52 @@
+import type { Container, Ticker } from 'pixi.js';
+import type { ShellHost } from '@/core/renderer';
+
+/** A pushed full-screen layer (overlay or centred modal). Optional hooks let the host re-fit it
+ *  on resize. */
+export interface ShellLayer extends Container {
+  /** Re-flow to a new screen size (overlays fill it; cards re-centre + fit-scale). */
+  resize?(w: number, h: number): void;
+  /** Re-run the card fit-scale backstop for short popouts. */
+  fit?(): void;
+  /** Called right before the layer is removed, so it can detach DOM listeners etc. */
+  onRemove?(): void;
+  /** Called by the shell keyboard controller while this layer is open.
+   *  Return true to consume the key (prevents bar actions + Escape close); false to pass through
+   *  (Escape → closeLayer). */
+  onKey?(e: KeyboardEvent): boolean;
+}
+
+export interface LayerHandle {
+  root: ShellLayer;
+  close(): void;
+}
+
+/** What pixi components read: the core brain (ShellHost) plus the Pixi-specific surface the
+ *  PixiRenderer provides (ticker, screen size, layer stack).
+ *
+ *  Members already on core ShellHost (state, config, tokens, layout, soundOn, t, emit, setSound,
+ *  setSoundRefresh, actions, formatCurrency, notifyResize) are NOT re-declared here.
+ *
+ *  fmt/fmtWin decision: pixi components in pixi-shell use `host.fmt(n)` / `host.fmtWin(n)`.
+ *  Rather than retargeting all components to `host.formatCurrency(n)` / `host.formatCurrency(n, true)`
+ *  in Task 12, we add `fmt` and `fmtWin` as convenience shorthands here. The PixiRenderer will
+ *  implement them as thin wrappers over `formatCurrency`. This avoids a wider refactor in Task 12
+ *  while keeping components portable. */
+export interface PixiComponentContext extends ShellHost {
+  readonly ticker: Ticker;
+  readonly canvas?: HTMLCanvasElement;
+  readonly screenW: number;
+  readonly screenH: number;
+  render(): void;
+  pushLayer(node: ShellLayer): LayerHandle;
+  closeLayer(): void;
+  fitModals(): void;
+  /** Swap the active language at runtime (rebuilds resolver, re-renders bar). Optional. */
+  setLanguage?(lang: string): void;
+  /** Format a money amount in the shell currency (fixed minDecimals — balance/bet/prices).
+   *  Convenience shorthand over formatCurrency(n). */
+  fmt(n: number): string;
+  /** Format a win / total-win amount (variable decimals — keeps small wins' significant digits).
+   *  Convenience shorthand over formatCurrency(n, true). */
+  fmtWin(n: number): string;
+}

package/src/ui/pixi/icons.ts

@@ -0,0 +1,45 @@
+// AUTO-GENERATED from ./icons-preview.svg by scripts/gen-icons.mjs — do not edit by hand.
+// Sharp monochrome icon set: each glyph is a 24×24 viewBox fragment using currentColor
+// (hollow shapes use fill-rule="evenodd"; the few stroked glyphs use stroke="currentColor").
+// Coordinates are baked into the 24×24 space (no <g transform>), so the same fragment renders
+// identically in the DOM <svg> and in Pixi's GraphicsContext.svg.
+// To change an icon: edit icons-preview.svg, then run `node scripts/gen-icons.mjs`.
+const SVGS: Record<string, string> = {
+  spin: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.72 4.86c-1.77 -0.89 -5.48 -2.51 -7.37 -3.08l1.4 1.96h0c-5.36 0.16 -8.6 5.47 -9.04 10.35l1.58 2.61l0.19 0.1l1.86 -1.68c-0.21 -0.42 -0.56 -1.87 -0.56 -1.87h0c-0.41 -4.55 3.28 -7.88 7.75 -7.37h0l2.33 0.75l1.86 -1.59v-0.18Z"/><path d="M6.29 19.38c1.79 0.86 5.54 2.39 7.43 2.92l-1.44 -1.93h0c5.36 -0.27 8.48 -5.65 8.81 -10.54l-1.64 -2.57l-0.19 -0.1l-1.82 1.72c0.22 0.42 0.6 1.86 0.6 1.86h0c0.51 4.54 -3.12 7.95 -7.59 7.53h0l-2.35 -0.7l-1.83 1.63v0.18Z"/></g>`,
+  turbo1: `<g fill="currentColor" fill-rule="evenodd"><path d="M11.77 2.71l-4.62 10.63h4.39c-2.08 3.86 -4.74 8.67 -4.74 8.67h0.23s11.95 -12.16 11.95 -12.16l-5.79 0.03l5.63 -8.67l-7.05 1.5Z"/></g>`,
+  autoplay: `<g fill="currentColor" fill-rule="evenodd"><path d="M9.61 8.97v6.44h0.1c0.82 -0.65 4.19 -2.6 5.15 -3.17v-0.1c-0.99 -0.55 -4.32 -2.68 -5.25 -3.17Z"/><path d="M20.32 8.33l-1.5 1.31v7.33l-2.08 1.69s-12.68 0 -12.68 0v0.1l4.36 3.76l-0.59 -2.18h10.1l2.48 -2.57h0l-0.09 -9.44Z"/><path d="M2.88 15.89l1.51 -1.3l0.05 -7.33l2.09 -1.67s12.68 0.08 12.68 0.08v-0.1s-4.34 -3.79 -4.34 -3.79l0.58 2.18h0l-10.1 -0.07l-2.5 2.55h0l0.03 9.44Z"/></g>`,
+  stop: `<g fill="currentColor" fill-rule="evenodd"><path d="M20.96 1.6h-17.58l-1.78 1.85v17.51l1.3 -1.84v-14.37l1.64 -1.64h14.58l1.84 -1.51Z"/><path d="M3.09 22.37l17.58 -0.04l1.78 -1.85l-0.04 -17.51l-1.3 1.84l0.03 14.37l-1.64 1.64l-14.58 0.03h0l-1.84 1.52Z"/></g>`,
+  menu: `<g fill="currentColor" fill-rule="evenodd"><path d="M1.6 13.52h18.01l2.79 -3.17h-18.01l-2.79 3.17h0Z"/><path d="M1.6 6.04h18.01l2.79 -3.17h-18.01l-2.79 3.17h0Z"/><path d="M1.64 21.02h18.01l2.79 -3.17h-18.01l-2.79 3.17h0Z"/></g>`,
+  minus: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.81 13.26l2.59 -2.44l-18.13 -0.08l-2.67 2.52"/></g>`,
+  plus: `<g fill="currentColor" fill-rule="evenodd"><path d="M13.16 1.6h0l-2.39 3.82v5.31l-0.08 0.07h-6.36l-2.54 2.4h8.9l0.08 0.07v9.13l2.39 -3.74h0v-5.39l0.07 -0.07h6.36l2.62 -2.4h-8.98l-0.07 -0.07v-9.13Z"/></g>`,
+  gift: `<rect x="4" y="9" width="16" height="11" rx="2" fill="currentColor"/><path d="M9 9c-1.35 -0.31 -2.18 -1.65 -1.87 -3s1.65 -2.18 3 -1.87c0.93 0.22 1.65 0.94 1.87 1.87c0.31 -1.35 1.65 -2.18 3 -1.87c1.35 0.31 2.18 1.65 1.87 3c-0.22 0.93 -0.94 1.65 -1.87 1.87h-6Z" fill="currentColor"/><rect x="11" y="9" width="2" height="11" fill="rgba(0,0,0,.35)"/>`,
+  info: `<g fill="currentColor" fill-rule="evenodd"><path d="M14.22 7.78l-3.09 0.08s-1.82 1.49 -1.96 1.43h0.98l-2.03 13.03h0l5.5 -4.37h-1.66"/><path d="M15.96 1.6h-3.02c-0.86 1.04 -2.06 2.98 -2.86 4.07l2.71 -0.08c0.84 -0.95 2.43 -2.96 3.17 -3.99Z"/></g>`,
+  soundOn: `<g fill="currentColor" fill-rule="evenodd"><path d="M18.88 10.12l-2.27 -3.44l0.55 1.72l0.24 1.57v3.91l-0.24 1.56l-0.55 1.72l2.27 -3.44"/><path d="M20.91 13.33c0.08 1.91 -0.87 4.39 -1.64 6.1c1.12 -1.38 2.35 -3.64 3.13 -5.24c0 0 0 -4.61 0 -4.61c-0.75 -1.65 -2 -3.83 -3.13 -5.24c0.85 1.78 1.69 4.08 1.64 6.1"/><path d="M13.17 1.76c-1.7 1.45 -5.26 4.82 -6.88 6.41l-4.69 0.08v7.35c0.14 0.14 4.37 0.65 4.69 0.7c1.67 1.52 5.13 4.54 6.88 5.94v-20.48Z"/><path d="M11.69 5.59l0.23 0.08v13.37l-0.23 0.08l-4.62 -4.3l-2.5 -0.32l-0.15 -0.15v-3.84l0.15 -0.15l2.5 -0.08l4.62 -4.69Z"/></g>`,
+  soundOff: `<g fill="currentColor" fill-rule="evenodd"><path d="M13.68 13.18l-1.15 1.22v4.04l-0.23 0.07l-1.9 -1.75l-1.07 1.07l3.51 3.05l0.91 0.68v-8.38h-0.07Z"/><path d="M17.71 8.69l-0.22 0.22l0.07 0.99s0.22 4.19 -0.53 5.49l1.75 -2.51v-2.59l-1.07 -1.6Z"/><path d="M19.47 6.63l1.06 3.5v2.9l-1.22 3.88l2.21 -3.73v-3.28l-2.05 -3.27Z"/><path d="M20.91 2.21c-1.64 1.63 -5.41 5.42 -6.93 7.09l-0.23 -0.08v-7.62c-1.67 1.43 -5.11 4.69 -6.7 6.25l-4.65 0.07l0.08 0.08v7.16l4.03 0.54l1.22 -1.38l-2.43 -0.3l-0.08 -0.08v-3.81l2.59 -0.23l4.49 -4.57l0.23 0.08v5.49c-3.03 3.13 -7.21 8.09 -9.98 11.5c6.55 -5.77 13.23 -13.13 18.36 -20.19Z"/></g>`,
+  close: `<g fill="currentColor" fill-rule="evenodd"><path d="M16.89 5.27l-4.77 5.02l-4.77 -4.9l-5.14 -3.3l3.67 5.14l4.53 4.77l-5.05 5.19l-3.52 5.21l5.39 -3.67l4.77 -5.02h0.12l4.9 5.02l5.14 3.43l-3.5 -4.99l-4.95 -5.05v-0.24l4.82 -5.08l3.63 -5.19"/></g>`,
+  back: `<path d="M15 6l-6 6l6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>`,
+  chevronRight: `<path d="M9 6l6 6l-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>`,
+  ticket: `<path d="M1.72 9.48L19.64 4.67L20.28 7.07C19.19 7.8 18.82 9 19.11 10.09C19.41 11.19 20.33 12.04 21.64 12.13L22.28 14.52L4.36 19.32L3.72 16.93C4.81 16.2 5.18 15 4.89 13.91C4.59 12.81 3.67 11.96 2.36 11.87L1.72 9.48Z" fill="none" stroke="currentColor" stroke-width="1.84" stroke-linejoin="miter"/><path d="M12.57 7.17L9.75 13.26L11.92 12.4L11.84 16.74L14.85 10.06L12.38 11.1Z" fill="currentColor"/>`,
+};
+
+export type IconName = keyof typeof SVGS;
+export const ICON_NAMES = Object.keys(SVGS) as IconName[];
+
+/** Inline SVG string for an icon, sized to 1em (scale via font-size/width). */
+export function icon(name: IconName): string {
+  return `<svg viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true">${SVGS[name]}</svg>`;
+}
+
+/** A standalone, parseable SVG document with `currentColor` resolved to `color`.
+ *  Used by the Pixi renderer to build vector geometry via GraphicsContext.svg(). */
+export function iconSVG(name: IconName, color = '#ffffff'): string {
+  return `<svg viewBox="0 0 24 24">${SVGS[name].split('currentColor').join(color)}</svg>`;
+}
+
+/** A standalone SVG with the glyph rendered as a stroke-only outline (fill:none).
+ *  Used to build the outer-ring effect in Pixi: draw this first (under), then iconSVG on top;
+ *  only the outer half of the stroke is visible — the paint-order:stroke CSS equivalent. */
+export function iconStrokeSVG(name: IconName, stroke: string, width = 4): string {
+  const frag = SVGS[name].split('fill="currentColor"').join(`fill="none" stroke="${stroke}" stroke-width="${width}" stroke-linejoin="round"`);
+  return `<svg viewBox="0 0 24 24">${frag}</svg>`;
+}

package/src/ui/pixi/index.ts

@@ -0,0 +1,56 @@
+import type { Application, Container } from 'pixi.js';
+import { createShell } from '@/core';
+import type { Shell, ShellSurface } from '@/core';
+import type { ShellConfig, BonusOption as CoreBonusOption, BonusCardContext, GameInfoSection as CoreGameInfoSection } from '@/core/types';
+import { PixiRenderer } from './PixiRenderer';
+
+/** Config for the Pixi shell: the renderer-agnostic ShellConfig plus the Pixi mount target.
+ *  `app` is the PixiJS Application; `parent` (defaults to `app.stage`) is where the shell root
+ *  attaches. */
+export interface PixiShellConfig extends ShellConfig {
+  app: Application;
+  parent?: Container;
+}
+
+/** A bonus-buy option whose `custom` card renderer returns a Pixi `Container` (vs core's `unknown`
+ *  / ui/html's `HTMLElement`). */
+export interface BonusOption extends CoreBonusOption {
+  custom?: (ctx: BonusCardContext) => Container;
+}
+
+/** A `custom` game-info section renders a game-supplied Pixi `Container` (`node`). The other section
+ *  kinds are unchanged from core. */
+export type GameInfoSection =
+  | Exclude<CoreGameInfoSection, { type: 'custom' }>
+  | { type: 'custom'; title?: string; order?: number; node?: Container; html?: string };
+
+/** The surface game scenes use to position themselves. Identical to the renderer-agnostic
+ *  `ShellSurface` (kept as a named alias for back-compat). */
+export type PixiShellSurface = ShellSurface;
+
+/** The Pixi shell handle: the renderer-agnostic controller + the surface game scenes use. */
+export type PixiGameShell = Shell;
+
+let active: PixiGameShell | null = null;
+
+/** Create the Pixi game shell. Like `createGameShell`, only one is active at a time. Returns the
+ *  existing instance if one is already active. The `ShellSurface` facade (safeArea/barHeight/
+ *  setVisible) is wired by `createShell`, delegating to the PixiRenderer. */
+export function createPixiShell(config: PixiShellConfig): PixiGameShell {
+  if (active) return active;
+  const renderer = new PixiRenderer({ app: config.app, parent: config.parent });
+  active = createShell({ ...config, renderer });
+  return active;
+}
+
+/** Tear down the active Pixi shell (fade out, detach listeners, remove its display objects).
+ *  Resolves when removed — mirrors `removePixiShell` in the legacy package. */
+export function removePixiShell(): Promise<void> {
+  if (!active) return Promise.resolve();
+  const shell = active;
+  active = null;
+  return shell.destroy();
+}
+
+export { PixiRenderer };
+export * from '@/core';

package/src/ui/pixi/motion-pixi.ts

@@ -0,0 +1,58 @@
+import type { Text, Ticker } from 'pixi.js';
+import { prefersReducedMotion, easeOutCubic } from '@/core/motion';
+import { setText } from './text';
+
+export interface TweenOpts {
+  duration: number;
+  ease?: (p: number) => number;
+  onUpdate: (v: number) => void;
+  onComplete?: () => void;
+}
+
+/** Tween 0→1 on the Pixi ticker. Returns a canceler. Skips to the end when motion is reduced. */
+export function tween(ticker: Ticker, opts: TweenOpts): () => void {
+  const ease = opts.ease ?? easeOutCubic;
+  if (prefersReducedMotion() || opts.duration <= 0) {
+    opts.onUpdate(1);
+    opts.onComplete?.();
+    return () => {};
+  }
+  let elapsed = 0;
+  let done = false;
+  const tick = (t: Ticker): void => {
+    if (done) return;
+    elapsed += t.deltaMS;
+    const p = Math.min(1, elapsed / opts.duration);
+    opts.onUpdate(ease(p));
+    if (p >= 1) {
+      done = true;
+      ticker.remove(tick);
+      opts.onComplete?.();
+    }
+  };
+  ticker.add(tick);
+  return () => {
+    if (done) return;
+    done = true;
+    ticker.remove(tick);
+  };
+}
+
+/** Count a Text's numeric value from→to via `fmt`. Returns a canceler — call it before the Text
+ *  is destroyed so the loop can't keep writing to a dead node. Mirrors the DOM shell's countUp
+ *  (easeOutCubic, 450ms default, jumps to final when motion is reduced). */
+export function countUpText(
+  ticker: Ticker,
+  text: Text,
+  from: number,
+  to: number,
+  fmt: (n: number) => string,
+  durationMs = 450,
+): () => void {
+  return tween(ticker, {
+    duration: durationMs,
+    ease: easeOutCubic,
+    onUpdate: (p) => setText(text, fmt(from + (to - from) * p)),
+    onComplete: () => setText(text, fmt(to)),
+  });
+}

package/src/ui/pixi/pixi-icon.ts

@@ -0,0 +1,119 @@
+import { Container, Graphics, GraphicsContext } from 'pixi.js';
+import { iconSVG, iconStrokeSVG, type IconName } from './icons';
+import type { Sizable } from './primitives/flex';
+
+// The DOM shell renders each icon as an inline <svg> sized to 1em and recoloured via
+// `currentColor`. The Pixi shell rebuilds the same 24×24 vector paths through Pixi's SVG
+// parser (GraphicsContext.svg) and scales them to the requested pixel size — same shapes,
+// crisp at any scale. Recolour rebuilds the geometry with the colour substituted for
+// `currentColor` (recolour happens only on hover/active, so this is cheap).
+
+const VIEWBOX = 24;
+
+// Cache parsed contexts by `name|fill|ring|width` — many icons repeat across the bar at the same colour.
+const cache = new Map<string, GraphicsContext>();
+
+function context(name: IconName, color: string, ring?: string, ringWidth = 4): GraphicsContext {
+  const key = `${name}|${color}|${ring ?? ''}|${ring ? ringWidth : 0}`;
+  let ctx = cache.get(key);
+  if (!ctx) {
+    if (ring) {
+      // Two-pass layering: stroke context first (under), then fill on top.
+      // Only the outer half of the stroke shows — the paint-order:stroke CSS equivalent.
+      ctx = new GraphicsContext()
+        .svg(iconStrokeSVG(name, ring, ringWidth))
+        .svg(iconSVG(name, color));
+    } else {
+      ctx = new GraphicsContext().svg(iconSVG(name, color));
+    }
+    cache.set(key, ctx);
+  }
+  return ctx;
+}
+
+/** A recolourable, scalable icon. Its content is centred on the local origin's box so the view's
+ *  bounds are `size × size` and `rotation` spins around the glyph centre (like CSS 50% 50%).
+ *
+ *  Optional `ring` and `ringWidth` enable the outer-ring treatment (fill-on-top-of-stroke): the
+ *  stroke is drawn first (underneath), then the fill path is drawn on top — only the outer half
+ *  of the stroke is visible, mirroring the DOM `paint-order:stroke` technique. */
+export class IconView extends Container implements Sizable {
+  private gfx: Graphics;
+  private _size: number;
+  private _color: string;
+  private _ring: string | undefined;
+  private _ringWidth: number;
+  readonly iconName: IconName;
+
+  constructor(name: IconName, size: number, color = '#ffffff', ring?: string, ringWidth = 4) {
+    super();
+    this.iconName = name;
+    this._size = size;
+    this._color = color;
+    this._ring = ring;
+    this._ringWidth = ringWidth;
+    this.gfx = new Graphics(context(name, color, ring, ringWidth));
+    this.addChild(this.gfx);
+    this.layout();
+  }
+
+  private layout(): void {
+    const s = this._size / VIEWBOX;
+    this.gfx.scale.set(s);
+    this.gfx.pivot.set(VIEWBOX / 2, VIEWBOX / 2);
+    this.gfx.position.set(this._size / 2, this._size / 2);
+  }
+
+  get size(): number {
+    return this._size;
+  }
+
+  setColor(color: string): void {
+    if (color === this._color && !this._ring) return;
+    this._color = color;
+    this._ring = undefined;
+    this.gfx.context = context(this.iconName, color);
+  }
+
+  /** Update fill colour and ring colour simultaneously (ring is preserved if provided). */
+  setColors(fill: string, ring?: string): void {
+    if (fill === this._color && ring === this._ring) return;
+    this._color = fill;
+    this._ring = ring;
+    this.gfx.context = context(this.iconName, fill, ring, this._ringWidth);
+  }
+
+  setSize(size: number): void {
+    if (size === this._size) return;
+    this._size = size;
+    this.layout();
+  }
+
+  // ── Sizable: a raw icon occupies a size×size em box (the DOM's 1em <span>), positioned by that
+  //    box so flex rows centre the EM box like CSS line-box centring — not the ink, which for
+  //    off-centre glyphs (chevron, info) sits asymmetrically and drifts vertically.
+  measureSize(): { w: number; h: number } {
+    return { w: this._size, h: this._size };
+  }
+  setLayoutSize(): void {
+    /* fixed-size glyph — no stretch */
+  }
+
+  /** Rotation around the glyph centre (radians) — used by the spinning SPIN disc. */
+  set spin(r: number) {
+    this.gfx.rotation = r;
+  }
+  get spin(): number {
+    return this.gfx.rotation;
+  }
+}
+
+export function makeIcon(name: IconName, size: number, color = '#ffffff'): IconView {
+  return new IconView(name, size, color);
+}
+
+/** Create a ringed icon — glyph filled with `fill`, outer ring coloured `ring` (width `ringWidth`).
+ *  Uses the two-pass stroke-under-fill technique to show only the outer half of the stroke. */
+export function makeRingedIcon(name: IconName, size: number, fill: string, ring: string, ringWidth = 4): IconView {
+  return new IconView(name, size, fill, ring, ringWidth);
+}