@energy8platform/shell 0.6.6 → 0.7.0

package/src/ui/pixi/PixiRenderer.ts

@@ -15,7 +15,7 @@ import type { PixiComponentContext, ShellLayer, LayerHandle } from './context';
 import { installShellFont, whenFontReady } from './text';
 import { countUpText, tween } from './motion-pixi';
 import { BottomBar } from './components/BottomBar';
-import { openSettings } from './components/Settings';
+import { openMenu } from './components/Menu';
 import { openGameInfo } from './components/GameInfo';
 import { openBuyBonus } from './components/BuyBonus';
 import { openBetPicker, openAutoplayPicker } from './components/pickers';
@@ -96,6 +96,15 @@ export class PixiRenderer implements ShellRenderer {
     this.bar = new BottomBar(this.ctx);
     this.barLayer.addChild(this.bar);
     this.bar.applyFit();
+    // renderBar() runs on every resize AND on ~20 other state changes (bet/win/turbo/mode/…), any of
+    // which can change the bar's own fitScale()/menuPlate() (e.g. a WIN pill appearing mid-autoplay
+    // retriggers the wide layout's overflow-tightening branch). Only onResize used to reposition the
+    // open layer, so a live bar-content change while the menu was open left it at the stale
+    // scale/position until the next resize. Every ShellLayer's resize() only re-reads current
+    // geometry and re-fits/re-centres itself — none of them call back into renderBar() (verified:
+    // Popover, CardModal, Overlay, BuyBonusOverlay) — so this cannot recurse; `currentLayer` is
+    // `null` whenever nothing is open, so this cannot throw either.
+    this.currentLayer?.resize?.(this.screenW, this.screenH);
   }
 
   setLayout(): void {
@@ -132,8 +141,18 @@ export class PixiRenderer implements ShellRenderer {
   openOverlay(req: OverlayRequest): OverlayHandle | void {
     let layer: ShellLayer | null = null;
     switch (req.kind) {
-      case 'settings':
-        layer = openSettings(this.ctx);
+      case 'menu':
+        // Getters, not `this.bar` by value: renderBar() destroys/rebuilds the bar on every resize
+        // and ~20 other state changes, in the same resize handler that then repositions this popover
+        // — see Menu.ts's openMenu doc comment for why this must stay lazy. menuAnchor (the burger)
+        // is the arrow's pointer; menuPlate (the plaque) drives placement; fitScale is the same
+        // factor BottomBar applies to its own content via `inner.scale`.
+        layer = openMenu(
+          this.ctx,
+          () => this.bar?.menuAnchor() ?? null,
+          () => this.bar?.menuPlate() ?? null,
+          () => this.bar?.fitScale() ?? 1,
+        );
         break;
       case 'gameInfo':
         layer = openGameInfo(this.ctx);
@@ -155,7 +174,7 @@ export class PixiRenderer implements ShellRenderer {
         break;
     }
     if (!layer) return;
-    this.pushLayer(layer);
+    this.pushLayer(layer, { backdrop: req.kind !== 'menu' });
     const built = layer;
     return {
       onKey: built.onKey ? built.onKey.bind(built) : undefined,
@@ -167,11 +186,6 @@ export class PixiRenderer implements ShellRenderer {
     this.closeLayer();
   }
 
-  refreshSoundIcon(_on: boolean): void {
-    // No-op: the open Settings overlay registers its icon updater via host.setSoundRefresh, which
-    // the controller's setSound path drives. The renderer has nothing extra to refresh.
-  }
-
   /** Fade out (≈250ms, like GameShell's REMOVE_FADE_MS) then tear down; resolves when removed. */
   destroy(): Promise<void> {
     if (this.destroyed) return Promise.resolve();
@@ -195,9 +209,11 @@ export class PixiRenderer implements ShellRenderer {
   }
 
   // ── layer stack ────────────────────────────────────────────────────────────
-  pushLayer(node: ShellLayer): LayerHandle {
+  pushLayer(node: ShellLayer, opts?: { backdrop?: boolean }): LayerHandle {
     this.clearLayer();
-    this.makeBackdrop(); // frosted snapshot of the scene behind (the DOM's backdrop-filter:blur)
+    // Light-dismiss layers (the menu popover) opt out with `{ backdrop: false }` — no frosted
+    // snapshot, the game stays visible behind them. Every other caller is unaffected (defaults on).
+    if (opts?.backdrop !== false) this.makeBackdrop(); // frosted snapshot (the DOM's backdrop-filter:blur)
     this.currentLayer = node;
     this.modalLayer.addChild(node);
     this.fitModals();
@@ -324,6 +340,7 @@ export class PixiRenderer implements ShellRenderer {
       get tokens() { return host.tokens; },
       get layout() { return host.layout; },
       get soundOn() { return host.soundOn; },
+      get menu() { return host.menu; },
       get actions() { return host.actions; },
       openReplay: (opts) => host.openReplay(opts),
       t: (s) => host.t(s),
@@ -331,17 +348,18 @@ export class PixiRenderer implements ShellRenderer {
       emit: host.emit.bind(host),
       notifyResize: (w, h) => host.notifyResize(w, h),
       setSound: (on) => host.setSound(on),
-      setSoundRefresh: (fn) => host.setSoundRefresh(fn),
       getVolume: (key) => host.getVolume(key),
       setVolume: (key, v) => host.setVolume(key, v),
-      setVolumeRefresh: (fn) => host.setVolumeRefresh(fn),
+      getMenuValue: (id) => host.getMenuValue(id),
+      setMenuValue: (id, v) => host.setMenuValue(id, v),
+      setMenuRefresh: (fn) => host.setMenuRefresh(fn),
       // — Pixi-specific surface —
       get ticker() { return self.app.ticker; },
       get canvas() { return self.app.canvas as HTMLCanvasElement | undefined; },
       get screenW() { return self.app.screen.width; },
       get screenH() { return self.app.screen.height; },
       render: () => self.renderBar(),
-      pushLayer: (node) => self.pushLayer(node),
+      pushLayer: (node, opts) => self.pushLayer(node, opts),
       // Route component-initiated closes through the controller (not straight to self.closeLayer) so
       // it clears its OverlayHandle. Otherwise the handle goes stale: hasOpenLayer() stays true and
       // keydowns keep routing to onKey on a destroyed overlay → write to a torn-down ScrollBox.

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

@@ -1,5 +1,6 @@
 import { Container, Graphics, Text } from 'pixi.js';
 import type { PixiComponentContext } from '../context';
+import type { Rect } from '@/core/popover';
 import { effectiveAccent } from '@/core/colors';
 import { BUY_BONUS_ART, BUY_BONUS_SOCIAL_ART, BUY_BONUS_DISABLED_ART } from '../../buy-bonus-art';
 import { FlexBox } from '../primitives/flex';
@@ -118,6 +119,11 @@ export class BottomBar extends Container {
   private spin?: SpinDisc;
   private autoBtn?: IconButton;
   private turboBtn?: IconButton;
+  private menuBtn?: IconButton;
+  /** The menu's PLATE, in LOCAL coordinates relative to `inner` — the continuous dark panel (wide)
+   *  or the controls row (mobile). Set at the point `applyFit()`/`applyFitMobile()` compute it;
+   *  `menuPlate()` converts it to screen space lazily (see that method's doc comment for why). */
+  private plateRect: Rect | null = null;
 
   constructor(host: PixiComponentContext) {
     super();
@@ -127,6 +133,57 @@ export class BottomBar extends Container {
     else this.buildWide();
   }
 
+  /** Screen-space rect of the burger — the menu popover's POINTER (the arrow's target only; see
+   *  `menuPlate` for what drives placement). `measureSize()` (the button's own nominal box, e.g.
+   *  36×36) rather than the built-in `getSize()` (the glyph's ink bounds only) so a burger whose icon
+   *  doesn't fill its box still reports its true hit-box size; multiplied by `inner.scale` — `getSize`
+   *  /`measureSize` only reflect the node's OWN scale (always 1 here), not the ancestor `inner.scale`
+   *  the bar's whole fit-scale lives on, so the UNMULTIPLIED width/height would silently overstate the
+   *  burger's true on-screen footprint on a scaled-down bar and skew the arrow off-centre. */
+  menuAnchor(): Rect | null {
+    if (!this.menuBtn || this.menuBtn.destroyed) return null;
+    const p = this.menuBtn.getGlobalPosition();
+    const s = this.inner.scale.x;
+    const size = this.menuBtn.measureSize();
+    return { x: p.x, y: p.y, w: size.w * s, h: size.h * s };
+  }
+
+  /** Screen-space rect of the menu's PLATE — the continuous dark panel (wide) or the controls row
+   *  (mobile), NOT the burger itself and NOT (mobile) the info pill below it. Drives the popover's
+   *  x/y/maxH/below; the burger (`menuAnchor`) drives only the arrow. Resolved lazily on every call,
+   *  like `menuAnchor` — `PixiRenderer.renderBar()` destroys and rebuilds this BottomBar on every
+   *  resize and ~20 other state changes, so a value captured once would go stale. `plateRect` is
+   *  local to `inner`; `getGlobalPosition` + `inner.scale` convert it to screen space (`outer*` on the
+   *  mobile FlexBox and the wide panel's own drawn rect are both LOCAL sizes, unaffected by `inner`'s
+   *  ancestor scale, same reasoning as `menuAnchor` above). */
+  menuPlate(): Rect | null {
+    // Pixi v8's Container.destroy() nulls `_position`/`_scale`, so `inner.scale.x` /
+    // `inner.getGlobalPosition()` on a destroyed bar throws — guard for symmetry with menuAnchor()
+    // above, which already returns null once its button is destroyed. Not reachable today
+    // (PixiRenderer.renderBar() destroys and reassigns `this.bar` synchronously, in the same call),
+    // but the asymmetry is a trap for a future caller that holds a reference across a render.
+    if (this.destroyed) return null;
+    if (!this.plateRect) return null;
+    const s = this.inner.scale.x;
+    const origin = this.inner.getGlobalPosition();
+    return {
+      x: origin.x + this.plateRect.x * s,
+      y: origin.y + this.plateRect.y * s,
+      w: this.plateRect.w * s,
+      h: this.plateRect.h * s,
+    };
+  }
+
+  /** The scale factor the bar currently applies to itself (`inner.scale`) — shared with the menu
+   *  popover so its typography/padding/row-heights scale in lockstep with the bar's own chrome,
+   *  instead of ignoring the viewport like a fixed-local-size card would. */
+  fitScale(): number {
+    // Same destroyed guard as menuPlate()/menuAnchor() above, and the same neutral fallback a
+    // scale factor should have (1 = no scaling) rather than throwing.
+    if (this.destroyed) return 1;
+    return this.inner.scale.x;
+  }
+
   // ── wide / landscape ──────────────────────────────────────────────────────
   private buildWide(): void {
     const { state, tokens } = this.host;
@@ -139,15 +196,14 @@ export class BottomBar extends Container {
 
     // LEFT info group: menu · balance · (Total win) · (Win)
     const left = new FlexBox({ direction: 'row', align: 'center', gap: ZONE_GAP });
-    left.add(
-      new IconButton('menu', {
-        size: 36,
-        glyph: 30,
-        color: '#ffffff',
-        hover: tokens.accent,
-        onTap: () => this.host.actions.openMenu(),
-      }),
-    );
+    this.menuBtn = new IconButton('menu', {
+      size: 36,
+      glyph: 30,
+      color: '#ffffff',
+      hover: tokens.accent,
+      onTap: () => this.host.actions.openMenu(),
+    });
+    left.add(this.menuBtn);
     if (!state.replay) {
       const bal = readout(this.host, 'Balance', this.host.fmt(state.balance));
       this.balanceValue = bal.valueText;
@@ -340,6 +396,7 @@ export class BottomBar extends Container {
       hover: tokens.accent,
       onTap: () => this.host.actions.openMenu(),
     });
+    this.menuBtn = menu;
     // autoplay is a base-mode control only — hidden in free spins / replay (matches the DOM bar)
     if (isBase && config.features.autoplay) {
       this.autoBtn = new IconButton('autoplay', {
@@ -574,6 +631,8 @@ export class BottomBar extends Container {
     this.panelBg.clear();
     roundedPath(this.panelBg, panelX, SPIN_POP, panelRight - panelX, BAR_H, [12, 12, 12, 12]);
     this.panelBg.fill(tokens.bar);
+    // The menu's plate — the whole continuous dark panel, local to `inner` (see menuPlate()).
+    this.plateRect = { x: panelX, y: SPIN_POP, w: panelRight - panelX, h: BAR_H };
 
     if (this.buy) this.buy.position.set(OUTER_PAD, panelCenterY - BUY_W / 2);
     left.position.set(panelX + PANEL_PAD, panelCenterY - left.outerHeight / 2);
@@ -613,6 +672,18 @@ export class BottomBar extends Container {
     // SPIN hero), inflating the controls row so it overlaps the info row below it.
     controls.setLayoutSize(rowW, M_CTRL_H);
     info.setLayoutSize(rowW, M_INFO_H);
+    // The menu's plate — the controls row (NOT the info pill below it), local to `inner`. Read from
+    // `controls.outerWidth/outerHeight` (its own nominal box), NOT the FlexBox's own bounds (which
+    // would include the SPIN/FS hero popping out both above AND below it — see menuPlate()'s doc
+    // comment) — but the TOP edge is deliberately extended upward by `pop`, the same hero pop-out
+    // amount reserved as `topPad` above, so the plate the popover math sees is the row's true visual
+    // extent on the side that matters: without this, the card's bottom (only `gap` above the plate's
+    // top) can clip the top ~(pop-gap)px of the hero's arc, since 62px M_CTRL_H is 11px shorter than
+    // the 84px hero. The BOTTOM edge is left alone — the hero's symmetric under-pop is a separate,
+    // unrelated concern (the info pill sits right below with its own small gap) and extending it too
+    // would perturb the `below`-placement branch (spaceBelow) for no benefit. A no-op when `pop` is 0
+    // (no hero shown — e.g. replay without free spins).
+    this.plateRect = { x: 0, y: topPad - pop, w: controls.outerWidth, h: controls.outerHeight + pop };
     const s = rowW > 0 ? Math.max(0.4, Math.min(1, avail / rowW)) : 1;
 
     this.inner.scale.set(s);

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

@@ -29,7 +29,7 @@ export function openGameInfo(host: PixiComponentContext): ShellLayer {
     onClose: () => host.closeLayer(),
     onBack: () => {
       host.closeLayer();
-      host.actions.openSettings();
+      host.actions.openMenu();
     },
     build: (w) => buildBody(host, w),
   });

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

@@ -0,0 +1,167 @@
+import { Container, Graphics, Text } from 'pixi.js';
+import { resolveMenu, type MenuRow } from '@/core/menu';
+import type { Rect } from '@/core/popover';
+import type { PixiComponentContext, ShellLayer } from '../context';
+import { Popover } from '../primitives/popover';
+import { FlexBox } from '../primitives/flex';
+import { Slider, Spacer, Toggle } from '../primitives/controls';
+import { makeText } from '../text';
+import { makeIcon } from '../pixi-icon';
+import { attachHover } from '../primitives/widgets';
+
+/** The bar menu as a Pixi popover. Same rows, same order as the DOM — both come from resolveMenu.
+ *
+ *  `getAnchor` (the burger — the arrow's POINTER), `getPlate` (the bar's plaque — drives placement)
+ *  and `getScale` (the bar's own fit-scale) are all FUNCTIONS, resolved lazily on every reposition —
+ *  never a captured `BottomBar` instance. `PixiRenderer.renderBar()` destroys and rebuilds the
+ *  BottomBar on every resize AND on ~20 other state changes, in the SAME resize handler that then
+ *  repositions this popover. A captured instance would already be destroyed by the time `resize()`
+ *  next runs, so `menuAnchor()`/`menuPlate()` on it would return `null` and the card would silently
+ *  recentre with its arrow hidden — the exact bug the DOM renderer shipped and fixed the same way
+ *  (see `html/Menu.ts`'s plate/pointer callbacks). Passing getters means every call reads whichever
+ *  bar is CURRENT. `getPlate`/`getScale` are optional so every pre-existing caller (which only ever
+ *  passed `getAnchor`) keeps behaving exactly as it did before the plate/pointer/scale split. */
+export function openMenu(
+  host: PixiComponentContext,
+  getAnchor?: () => Rect | null,
+  getPlate?: () => Rect | null,
+  getScale?: () => number,
+): ShellLayer {
+  const updaters: Record<string, (v: boolean | number) => void> = {};
+  const layer = new Popover(host, {
+    tag: 'menu',
+    plate: () => getPlate?.() ?? null,
+    pointer: () => getAnchor?.() ?? null,
+    scale: () => getScale?.() ?? 1,
+    onClose: () => host.closeLayer(),
+    build: (width) => {
+      const col = new FlexBox({ direction: 'column', align: 'stretch', gap: 6 });
+      for (const row of resolveMenu(host)) col.add(buildRow(host, row, width, updaters));
+      return col;
+    },
+  });
+  host.setMenuRefresh((id, v) => updaters[id]?.(v));
+  return layer;
+}
+
+function label(text: string): Text {
+  return makeText(text, { size: 13, weight: '600', color: '#ffffff' }) as Text;
+}
+
+function rowBox(host: PixiComponentContext, name: string, column = false): FlexBox {
+  const box = new FlexBox({
+    direction: column ? 'column' : 'row',
+    align: column ? 'stretch' : 'center',
+    gap: column ? 8 : 10,
+    padding: { top: 10, bottom: 10, left: 12, right: 12 },
+    minHeight: column ? undefined : 44,
+    background: { fill: host.tokens.plaqueGlass, radius: 14 },
+  });
+  box.label = name;
+  return box;
+}
+
+function buildRow(
+  host: PixiComponentContext,
+  row: MenuRow,
+  width: number,
+  updaters: Record<string, (v: boolean | number) => void>,
+): Container {
+  if (row.kind === 'separator') {
+    const sep = new Container();
+    sep.label = 'menu-sep';
+    const line = new Graphics().rect(4, 6, width - 8, 1).fill(host.tokens.plaqueLine);
+    line.alpha = 0.5;
+    sep.addChild(line);
+    return sep;
+  }
+  if (row.kind === 'button') {
+    const box = rowBox(host, `menu-row-${row.id}`);
+    if (row.icon) box.add(makeIcon(row.icon, 20, '#ffffff'));
+    const text = label(row.label);
+    box.add(text);
+    box.add(new Spacer(), { grow: 1 });
+    if (row.chevron) box.add(makeIcon('chevronRight', 16, host.tokens.muted));
+    if (!row.disabled) {
+      box.setInteractive(true);
+      box.on('pointertap', () => {
+        host.closeLayer();
+        row.select();
+      });
+      attachHover(
+        box,
+        () => { box.setBgFill(host.tokens.plaqueGlassHover); text.style.fill = host.tokens.accent; },
+        () => { box.setBgFill(host.tokens.plaqueGlass); text.style.fill = '#ffffff'; },
+      );
+    } else {
+      box.alpha = 0.5;
+    }
+    return box;
+  }
+  if (row.kind === 'toggle') {
+    const box = rowBox(host, `menu-row-${row.id}`);
+    const glyph = row.icon(row.get());
+    const iconNode = glyph ? makeIcon(glyph, 20, '#ffffff') : null;
+    if (iconNode) box.add(iconNode);
+    box.add(label(row.label));
+    box.add(new Spacer(), { grow: 1 });
+    // Disabled: neutralise the write-through at the source (a no-op onChange) rather than relying
+    // solely on eventMode — Toggle wires its own pointertap listener unconditionally in its
+    // constructor, so a stray direct emit must still be harmless, not just unreachable by real hits.
+    const toggle = new Toggle(
+      row.get(),
+      row.disabled ? () => {} : (v) => row.set(v),
+      host.tokens.accent,
+      host.tokens.plaqueLine,
+    );
+    box.add(toggle);
+    updaters[row.id] = (v) => {
+      const on = v === true;
+      toggle.setValue(on);
+      const next = row.icon(on);
+      if (iconNode && next) iconNode.setIcon(next);
+    };
+    if (row.disabled) {
+      box.alpha = 0.5;
+      toggle.eventMode = 'none'; // dimmed + inert — mirrors the button branch's disabled treatment
+    }
+    return box;
+  }
+  const box = rowBox(host, `menu-row-${row.id}`, true);
+  const head = new FlexBox({ direction: 'row', align: 'center' });
+  const value = makeText(row.format(row.get()), { size: 12, weight: '700', color: host.tokens.plaqueLabel });
+  head.add(label(row.label));
+  head.add(new Spacer(), { grow: 1 });
+  head.add(value);
+  // Slider works in 0..1; map to the row's declared bounds, snapping to the MIN-anchored lattice
+  // (min + k·step). Snapping to a bare multiple of step instead (Math.round(raw/step)*step) drifts
+  // off `min` whenever min isn't itself a multiple of step — the common case, since the default step
+  // is (max-min)/20: e.g. min:1,max:10 gives step 0.45, and the bare-multiple formula would emit 0.9
+  // at the far left, BELOW the declared min. Clamp guards any float overshoot past either end.
+  const toUnit = (v: number): number => (row.max === row.min ? 0 : (v - row.min) / (row.max - row.min));
+  const fromUnit = (u: number): number => {
+    const raw = row.min + u * (row.max - row.min);
+    const snapped = row.min + Math.round((raw - row.min) / row.step) * row.step;
+    return Math.max(row.min, Math.min(row.max, snapped));
+  };
+  // Disabled: same reasoning as the toggle branch above — a no-op onInput, not just eventMode.
+  const slider = new Slider(host, toUnit(row.get()), row.disabled ? () => {} : (u) => {
+    const v = fromUnit(u);
+    value.text = row.format(v);
+    head.layout(); // the readout's text just changed width (e.g. "5%" → "100%") — reposition it
+    row.set(v);
+  });
+  updaters[row.id] = (v) => {
+    const n = Number(v);
+    value.text = row.format(n);
+    head.layout();
+    slider.setValue(toUnit(n));
+  };
+  box.add(head);
+  box.add(slider);
+  if (row.disabled) {
+    box.alpha = 0.5;
+    slider.eventMode = 'none';
+  }
+  return box;
+}

package/src/ui/pixi/context.ts

@@ -25,7 +25,8 @@ export interface LayerHandle {
  *  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.
+ *  getVolume, setVolume, menu, getMenuValue, setMenuValue, setMenuRefresh, 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)`
@@ -38,7 +39,7 @@ export interface PixiComponentContext extends ShellHost {
   readonly screenW: number;
   readonly screenH: number;
   render(): void;
-  pushLayer(node: ShellLayer): LayerHandle;
+  pushLayer(node: ShellLayer, opts?: { backdrop?: boolean }): LayerHandle;
   closeLayer(): void;
   fitModals(): void;
   /** Swap the active language at runtime (rebuilds resolver, re-renders bar). Optional. */

package/src/ui/pixi/icons.ts

@@ -5,29 +5,30 @@
 // GraphicsContext.svg. To change an icon: edit icons.svg, then run
 // `node scripts/gen-icons-from-svg.mjs`.
 const SVGS: Record<string, string> = {
-  spin: `<g fill="currentColor" fill-rule="evenodd"><path d="M13.57 8.41C13.3 8.31 13.51 7.09 13.59 6.65C13.61 6.56 13.55 6.48 13.46 6.48C12.32 6.45 5.74 6.61 4.16 14.85C4.15 14.9 4 15.16 3.8 14.91C3.27 14.23 2.43 12.08 3.46 9.16C6.01 1.92 13 3.07 13.79 3.23C13.83 3.23 13.86 3.2 13.86 3.17C13.85 2.86 13.82 1.68 14.17 1.64C14.51 1.6 19.04 5.61 18.96 5.95C18.86 6.36 13.83 8.51 13.57 8.41Z"/><path d="M10.43 15.59C10.7 15.69 10.49 16.91 10.41 17.35C10.39 17.44 10.45 17.52 10.54 17.52C11.68 17.55 18.26 17.39 19.84 9.15C19.85 9.1 20 8.84 20.2 9.09C20.73 9.77 21.57 11.92 20.54 14.85C17.99 22.08 11 20.93 10.21 20.77C10.17 20.77 10.13 20.8 10.14 20.83C10.15 21.14 10.18 22.32 9.83 22.36C9.49 22.4 4.96 18.39 5.04 18.05C5.14 17.64 10.17 15.49 10.43 15.59Z"/></g>`,
-  turbo1: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.81 2.62L14.41 8.21C14.15 8.64 14.46 9.2 14.97 9.2L18.84 9.21C19.42 9.21 19.72 9.9 19.32 10.31L8.02 22.19C7.89 22.33 7.72 22.4 7.53 22.4L7.53 22.4C7.08 22.39 6.77 21.93 6.93 21.5L9.91 13.91C10.08 13.48 9.76 13.01 9.29 13.01L5.11 13.06C4.61 13.06 4.28 12.53 4.53 12.09L10.07 1.94C10.19 1.73 10.41 1.6 10.65 1.6L17.26 1.62C17.77 1.62 18.08 2.18 17.81 2.62Z"/></g>`,
-  autoplay: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.97 12.41C20.22 11.94 20.95 11.88 20.97 12.47C21.14 16.4 18.71 19.92 14.44 20.97C8.59 22.4 5.29 18.55 5.28 18.52C5.2 18.33 4.41 19.77 4.19 19.59C3.81 19.28 3.78 14.9 3.9 14.78C4.01 14.67 8.39 14.95 8.48 15.31C8.58 15.64 7.2 16.1 7.4 16.38C9.14 18.67 15.82 20.29 19.97 12.41Z"/><path d="M9.3 15.36L9.3 8.67C9.3 8.32 9.97 7.74 10.58 8.14C15.83 11.56 16 11.46 16.01 12.04C16.02 12.61 15.12 12.98 10.63 15.91C10.32 16.11 9.29 15.72 9.29 15.36Z"/><path d="M4.03 11.59C3.78 12.06 3.05 12.12 3.03 11.53C2.86 7.6 5.29 4.08 9.56 3.03C15.41 1.6 18.71 5.45 18.72 5.48C18.8 5.67 19.59 4.23 19.81 4.41C20.19 4.72 20.22 9.1 20.1 9.22C19.99 9.33 15.61 9.05 15.52 8.69C15.42 8.36 16.8 7.9 16.6 7.62C14.86 5.33 8.18 3.71 4.03 11.59Z"/></g>`,
+  spin: `<g fill="currentColor" fill-rule="evenodd"><path d="M13.57 8.41C13.3 8.31 13.51 7.09 13.59 6.65C13.61 6.56 13.55 6.48 13.46 6.48C12.32 6.45 5.74 6.61 4.16 14.85C4.15 14.9 4 15.16 3.8 14.91C3.27 14.23 2.43 12.08 3.46 9.16C6.01 1.92 13 3.07 13.79 3.23C13.83 3.23 13.86 3.2 13.86 3.17C13.85 2.86 13.82 1.68 14.17 1.64C14.51 1.6 19.04 5.61 18.96 5.95C18.86 6.36 13.83 8.51 13.57 8.41L13.57 8.41Z"/><path d="M10.43 15.59C10.7 15.69 10.49 16.91 10.41 17.35C10.39 17.44 10.45 17.52 10.54 17.52C11.68 17.55 18.26 17.39 19.84 9.15C19.85 9.1 20 8.84 20.2 9.09C20.73 9.77 21.57 11.92 20.54 14.85C17.99 22.08 11 20.93 10.21 20.77C10.17 20.77 10.13 20.8 10.14 20.83C10.15 21.14 10.18 22.32 9.83 22.36C9.49 22.4 4.96 18.39 5.04 18.05C5.14 17.64 10.17 15.49 10.43 15.59L10.43 15.59L10.43 15.59Z"/></g>`,
+  turbo1: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.81 2.62L14.41 8.21C14.15 8.64 14.46 9.2 14.97 9.2L18.84 9.21C19.42 9.21 19.72 9.9 19.32 10.31L8.02 22.19C7.89 22.33 7.72 22.4 7.53 22.4L7.53 22.4C7.08 22.39 6.77 21.93 6.93 21.5L9.91 13.91C10.08 13.48 9.76 13.01 9.29 13.01L5.11 13.06C4.61 13.06 4.28 12.53 4.53 12.09L10.07 1.94C10.19 1.73 10.41 1.6 10.65 1.6L17.26 1.62C17.77 1.62 18.08 2.18 17.81 2.62L17.81 2.62Z"/></g>`,
+  autoplay: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.97 12.41C20.22 11.94 20.95 11.88 20.97 12.47C21.14 16.4 18.71 19.92 14.44 20.97C8.59 22.4 5.29 18.55 5.28 18.52C5.2 18.33 4.41 19.77 4.19 19.59C3.81 19.28 3.78 14.9 3.9 14.78C4.01 14.67 8.39 14.95 8.48 15.31C8.58 15.64 7.2 16.1 7.4 16.38C9.14 18.67 15.82 20.29 19.97 12.41L19.97 12.41Z"/><path d="M9.3 15.36L9.3 8.67C9.3 8.32 9.97 7.74 10.58 8.14C15.83 11.56 16 11.46 16.01 12.04C16.02 12.61 15.12 12.98 10.63 15.91C10.32 16.11 9.29 15.72 9.29 15.36L9.3 15.36Z"/><path d="M4.03 11.59C3.78 12.06 3.05 12.12 3.03 11.53C2.86 7.6 5.29 4.08 9.56 3.03C15.41 1.6 18.71 5.45 18.72 5.48C18.8 5.67 19.59 4.23 19.81 4.41C20.19 4.72 20.22 9.1 20.1 9.22C19.99 9.33 15.61 9.05 15.52 8.69C15.42 8.36 16.8 7.9 16.6 7.62C14.86 5.33 8.18 3.71 4.03 11.59L4.03 11.59Z"/></g>`,
   stop: `<g fill="currentColor" fill-rule="evenodd"><rect x="1.6" y="1.6" width="20.8" height="20.8" rx="2.9"/></g>`,
   menu: `<g fill="currentColor" fill-rule="evenodd"><rect x="1.61" y="3.81" width="20.79" height="4.47" rx="2.23"/><rect x="1.6" y="9.77" width="20.79" height="4.46" rx="2.23"/><rect x="1.6" y="15.72" width="20.79" height="4.47" rx="2.23"/></g>`,
   minus: `<g fill="currentColor" fill-rule="evenodd"><rect x="1.6" y="9.86" width="20.8" height="4.28" rx="2.11"/></g>`,
-  plus: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.72 14.37L13.84 14.37L13.84 20.33C13.84 21.48 12.89 22.4 11.74 22.36C10.61 22.36 9.7 21.45 9.7 20.33L9.7 14.37L3.67 14.37C2.52 14.37 1.6 13.42 1.63 12.27C1.63 11.15 2.55 10.23 3.67 10.23L9.7 10.23L9.7 4.28C9.71 1.61 13.83 1.6 13.84 4.28L13.84 10.23L19.72 10.23C22.39 10.24 22.4 14.36 19.72 14.37Z"/></g>`,
+  plus: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.72 14.37L13.84 14.37L13.84 20.33C13.84 21.48 12.89 22.4 11.74 22.36C10.61 22.36 9.7 21.45 9.7 20.33L9.7 14.37L3.67 14.37C2.52 14.37 1.6 13.42 1.63 12.27C1.63 11.15 2.55 10.23 3.67 10.23L9.7 10.23L9.7 4.28C9.71 1.61 13.83 1.6 13.84 4.28L13.84 10.23L19.72 10.23C22.39 10.24 22.4 14.36 19.72 14.37L19.72 14.37Z"/></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"><circle cx="11.98" cy="4.27" r="2.67"/><path d="M16.05 21.09L16.05 21.54C16.05 22.02 15.67 22.4 15.19 22.4L8.89 22.4C8.42 22.4 8.04 22.02 8.04 21.54L8.04 20.98C8.04 20.5 8.42 20.12 8.89 20.12L8.89 20.12C9.13 20.12 9.32 19.93 9.32 19.7L9.32 11.59C9.32 11.29 9.08 11.05 8.8 11.05C8.33 11.05 7.95 10.67 7.95 10.19L7.95 9.18C7.95 8.7 8.33 8.32 8.8 8.32L9.32 8.32C9.32 8.32 13.8 8.32 13.8 8.32C14.27 8.32 14.65 8.71 14.65 9.18L14.65 19.7C14.65 19.93 14.84 20.12 15.07 20.12L15.07 20.12C15.61 20.12 16.05 20.56 16.05 21.09Z"/></g>`,
-  soundOn: `<g fill="currentColor" fill-rule="evenodd"><path d="M1.6 15.04L1.6 9.18C1.6 8.75 1.95 8.4 2.38 8.4L5.03 8.4C5.21 8.4 5.39 8.36 5.56 8.28L11.6 5.26C12.12 5 12.73 5.38 12.73 5.96L12.73 18.27C12.73 18.85 12.12 19.22 11.6 18.96L5.56 15.94C5.39 15.86 5.22 15.82 5.03 15.82L2.38 15.82C1.95 15.82 1.6 15.47 1.6 15.04Z"/><path d="M16.01 12.11C16.04 12.36 15.67 14.7 14.7 15.23C13.92 15.42 13.54 14.77 13.86 14.1C14.89 12.56 14.88 11.66 13.86 10.13C13.54 9.46 13.92 8.8 14.7 8.99C15.67 9.53 16.06 11.81 16.01 12.11Z"/><path d="M19.15 12.12C19.2 12.51 18.6 16.4 17.3 17.05C16.32 17.54 15.99 16.87 16.42 15.81C17.8 13.4 17.59 9.93 16.42 8.41C15.73 7.5 16.34 6.58 17.26 7.18C18.74 8.15 19.21 11.64 19.15 12.12Z"/><path d="M22.4 12.16C22.16 15.18 21 17.95 19.71 18.82C18.73 19.48 18.22 18.42 18.93 17.32C20.96 14.17 21.92 9.95 18.9 6.29C18.13 5.35 19.35 4.52 20.11 5.48C21.43 7.14 22.33 9.14 22.4 12.16Z"/></g>`,
+  info: `<g fill="currentColor" fill-rule="evenodd"><circle cx="11.98" cy="4.27" r="2.67"/><path d="M16.05 21.09L16.05 21.54C16.05 22.02 15.67 22.4 15.19 22.4L8.89 22.4C8.42 22.4 8.04 22.02 8.04 21.54L8.04 20.98C8.04 20.5 8.42 20.12 8.89 20.12L8.89 20.12C9.13 20.12 9.32 19.93 9.32 19.7L9.32 11.59C9.32 11.29 9.08 11.05 8.8 11.05C8.33 11.05 7.95 10.67 7.95 10.19L7.95 9.18C7.95 8.7 8.33 8.32 8.8 8.32L13.8 8.32C14.27 8.32 14.65 8.71 14.65 9.18L14.65 19.7C14.65 19.93 14.84 20.12 15.07 20.12L15.07 20.12C15.61 20.12 16.05 20.56 16.05 21.09L16.05 21.09Z"/></g>`,
+  soundOn: `<g fill="currentColor" fill-rule="evenodd"><path d="M1.6 15.04L1.6 9.18C1.6 8.75 1.95 8.4 2.38 8.4L5.03 8.4C5.21 8.4 5.39 8.36 5.56 8.28L11.6 5.26C12.12 5 12.73 5.38 12.73 5.96L12.73 18.27C12.73 18.85 12.12 19.22 11.6 18.96L5.56 15.94C5.39 15.86 5.22 15.82 5.03 15.82L2.38 15.82C1.95 15.82 1.6 15.47 1.6 15.04L1.6 15.04Z"/><path d="M16.01 12.11C16.04 12.36 15.67 14.7 14.7 15.23C13.92 15.42 13.54 14.77 13.86 14.1C14.89 12.56 14.88 11.66 13.86 10.13C13.54 9.46 13.92 8.8 14.7 8.99C15.67 9.53 16.06 11.81 16.01 12.11Z"/><path d="M19.15 12.12C19.2 12.51 18.6 16.4 17.3 17.05C16.32 17.54 15.99 16.87 16.42 15.81C17.8 13.4 17.59 9.93 16.42 8.41C15.73 7.5 16.34 6.58 17.26 7.18C18.74 8.15 19.21 11.64 19.15 12.12L19.15 12.12Z"/><path d="M22.4 12.16C22.16 15.18 21 17.95 19.71 18.82C18.73 19.48 18.22 18.42 18.93 17.32C20.96 14.17 21.92 9.95 18.9 6.29C18.13 5.35 19.35 4.52 20.11 5.48C21.43 7.14 22.33 9.14 22.4 12.16L22.4 12.16Z"/></g>`,
   soundOff: `<g fill="currentColor" fill-rule="evenodd"><path d="M1.6 14.77L1.6 9.23C1.6 8.82 1.93 8.49 2.34 8.49L4.85 8.49C5.02 8.49 5.19 8.45 5.34 8.38L11.06 5.52C11.55 5.27 12.12 5.63 12.12 6.18L12.12 17.82C12.12 18.37 11.55 18.73 11.06 18.48L5.34 15.62C5.19 15.55 5.02 15.51 4.85 15.51L2.34 15.51C1.93 15.51 1.6 15.18 1.6 14.77Z"/><path d="M21.95 16.53C21.5 16.98 20.78 16.98 20.33 16.53L17.79 13.99L15.25 16.54C14.8 16.99 14.07 16.99 13.62 16.54C13.17 16.09 13.17 15.36 13.62 14.92L16.17 12.37L13.63 9.83C13.18 9.38 13.18 8.65 13.63 8.21C13.85 7.98 14.14 7.87 14.44 7.87C14.73 7.87 15.02 7.98 15.25 8.21L17.79 10.75L20.33 8.21C20.77 7.76 21.5 7.76 21.95 8.21C22.17 8.44 22.28 8.73 22.28 9.02C22.28 9.32 22.17 9.61 21.95 9.83L19.41 12.37L21.95 14.91C22.4 15.36 22.4 16.08 21.95 16.53Z"/></g>`,
-  close: `<g fill="currentColor" fill-rule="evenodd"><path d="M21.39 21.37C20.38 22.38 18.74 22.38 17.73 21.37L12.01 15.64L6.27 21.38C5.26 22.39 3.62 22.39 2.61 21.38C1.6 20.38 1.6 18.74 2.61 17.73L8.35 11.99L2.62 6.25C1.61 5.24 1.61 3.61 2.62 2.6C3.12 2.09 3.79 1.84 4.45 1.84C5.11 1.84 5.77 2.09 6.28 2.6L12.01 8.33L17.72 2.62C18.73 1.61 20.37 1.61 21.38 2.62C21.89 3.12 22.14 3.78 22.14 4.44C22.14 5.11 21.89 5.77 21.38 6.27L15.67 11.99L21.39 17.71C22.4 18.72 22.4 20.36 21.39 21.37Z"/></g>`,
-  back: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.49 2.32L17.49 2.32C18.2 3.03 18.2 4.19 17.49 4.9L11.68 10.71C10.97 11.42 10.97 12.58 11.68 13.29L17.49 19.1C18.21 19.81 18.21 20.97 17.49 21.69L17.49 21.69C16.78 22.4 15.62 22.4 14.91 21.69L7.8 14.58L7.8 14.58C7.8 14.58 6.51 13.29 6.51 13.29C5.79 12.58 5.79 11.42 6.51 10.71L14.9 2.31C15.62 1.6 16.77 1.6 17.49 2.31Z"/></g>`,
-  chevronRight: `<g fill="currentColor" fill-rule="evenodd"><path d="M6.51 21.68L6.51 21.68C5.8 20.97 5.8 19.81 6.51 19.1L12.32 13.29C13.03 12.58 13.03 11.42 12.32 10.71L6.51 4.9C5.79 4.19 5.79 3.03 6.51 2.31L6.51 2.31C7.22 1.6 8.38 1.6 9.09 2.31L16.2 9.42L16.2 9.42C16.2 9.42 17.49 10.71 17.49 10.71C18.21 11.42 18.21 12.58 17.49 13.29L9.1 21.69C8.38 22.4 7.23 22.4 6.51 21.69Z"/></g>`,
+  close: `<g fill="currentColor" fill-rule="evenodd"><path d="M21.39 21.37C20.38 22.38 18.74 22.38 17.73 21.37L12.01 15.64L6.27 21.38C5.26 22.39 3.62 22.39 2.61 21.38C1.6 20.38 1.6 18.74 2.61 17.73L8.35 11.99L2.62 6.25C1.61 5.24 1.61 3.61 2.62 2.6C3.12 2.09 3.79 1.84 4.45 1.84C5.11 1.84 5.77 2.09 6.28 2.6L12.01 8.33L17.72 2.62C18.73 1.61 20.37 1.61 21.38 2.62C21.89 3.12 22.14 3.78 22.14 4.44C22.14 5.11 21.89 5.77 21.38 6.27L15.67 11.99L21.39 17.71C22.4 18.72 22.4 20.36 21.39 21.37L21.39 21.37Z"/></g>`,
+  back: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.49 2.32L17.49 2.32C18.2 3.03 18.2 4.19 17.49 4.9L11.68 10.71C10.97 11.42 10.97 12.58 11.68 13.29L17.49 19.1C18.21 19.81 18.21 20.97 17.49 21.69L17.49 21.69C16.78 22.4 15.62 22.4 14.91 21.69L7.8 14.58L7.8 14.58L6.51 13.29C5.79 12.58 5.79 11.42 6.51 10.71L14.9 2.31C15.62 1.6 16.77 1.6 17.49 2.31L17.49 2.31Z"/></g>`,
+  chevronRight: `<g fill="currentColor" fill-rule="evenodd"><path d="M6.51 21.68L6.51 21.68C5.8 20.97 5.8 19.81 6.51 19.1L12.32 13.29C13.03 12.58 13.03 11.42 12.32 10.71L6.51 4.9C5.79 4.19 5.79 3.03 6.51 2.31L6.51 2.31C7.22 1.6 8.38 1.6 9.09 2.31L16.2 9.42L16.2 9.42L17.49 10.71C18.21 11.42 18.21 12.58 17.49 13.29L9.1 21.69C8.38 22.4 7.23 22.4 6.51 21.69L6.51 21.69Z"/></g>`,
   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"/>`,
-  turbo2: `<g fill="currentColor" fill-rule="evenodd"><path d="M8.24 8.81L3.92 7.68C3.88 7.67 3.88 7.61 3.92 7.61L9.66 6.45C9.8 6.43 9.89 6.56 9.83 6.68L8.86 8.35C8.67 8.73 8.33 8.83 8.24 8.81Z"/><path d="M20.58 3.04L17.34 8.38C17.09 8.8 17.39 9.33 17.87 9.33L21.57 9.33C22.12 9.33 22.4 9.99 22.02 10.39L11.24 21.73C11.12 21.86 10.95 21.93 10.77 21.92L10.77 21.92C10.34 21.92 10.04 21.47 10.2 21.07L13.04 13.82C13.21 13.41 12.9 12.96 12.45 12.97L8.46 13.01C7.98 13.01 7.67 12.5 7.9 12.08L13.2 2.4C13.31 2.2 13.52 2.07 13.75 2.07L20.05 2.09C20.54 2.1 20.84 2.63 20.58 3.04Z"/><path d="M5.96 12.68L1.64 11.54C1.6 11.54 1.6 11.47 1.64 11.47L7.38 10.31C7.52 10.3 7.61 10.42 7.55 10.55L6.58 12.22C6.39 12.59 6.05 12.69 5.96 12.68Z"/><path d="M9.67 16.66L5.35 15.53C5.31 15.52 5.31 15.46 5.35 15.46L11.09 14.3C11.22 14.28 11.32 14.41 11.26 14.53L10.29 16.2C10.1 16.58 9.76 16.68 9.67 16.66Z"/></g>`,
-  turboOff: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.81 2.62L14.41 8.21C14.15 8.64 14.46 9.2 14.97 9.2L18.84 9.21C19.42 9.21 19.72 9.9 19.32 10.31L8.02 22.19C7.89 22.33 7.72 22.4 7.53 22.4L7.53 22.4C7.08 22.39 6.77 21.93 6.93 21.5L9.91 13.91C10.08 13.48 9.76 13.01 9.29 13.01L5.11 13.06C4.61 13.06 4.28 12.53 4.53 12.09L10.07 1.94C10.19 1.73 10.41 1.6 10.65 1.6L17.26 1.62C17.77 1.62 18.08 2.18 17.81 2.62Z"/></g>`,
-  chevronUp: `<g fill="currentColor" fill-rule="evenodd"><path d="M21.68 17.49L21.68 17.49C20.97 18.2 19.81 18.2 19.1 17.49L13.29 11.68C12.58 10.97 11.42 10.97 10.71 11.68L4.9 17.49C4.19 18.21 3.03 18.21 2.31 17.49L2.31 17.49C1.6 16.78 1.6 15.62 2.31 14.91L9.42 7.8L9.42 7.8C9.42 7.8 10.71 6.51 10.71 6.51C11.42 5.79 12.58 5.79 13.29 6.51L21.69 14.9C22.4 15.62 22.4 16.77 21.69 17.49Z"/></g>`,
-  chevronDown: `<g fill="currentColor" fill-rule="evenodd"><path d="M2.32 6.51L2.32 6.51C3.03 5.8 4.19 5.8 4.9 6.51L10.71 12.32C11.42 13.03 12.58 13.03 13.29 12.32L19.1 6.51C19.82 5.79 20.97 5.79 21.69 6.51L21.69 6.51C22.4 7.22 22.4 8.38 21.69 9.09L14.58 16.19L14.58 16.2C14.58 16.2 13.29 17.49 13.29 17.49C12.58 18.21 11.42 18.21 10.71 17.49L2.31 9.1C1.6 8.38 1.6 7.23 2.31 6.51Z"/></g>`,
+  turbo2: `<g fill="currentColor" fill-rule="evenodd"><path d="M8.24 8.81L3.92 7.68C3.88 7.67 3.88 7.61 3.92 7.61L9.66 6.45C9.8 6.43 9.89 6.56 9.83 6.68L8.86 8.35C8.67 8.73 8.33 8.83 8.24 8.81L8.24 8.81Z"/><path d="M20.58 3.04L17.34 8.38C17.09 8.8 17.39 9.33 17.87 9.33L21.57 9.33C22.12 9.33 22.4 9.99 22.02 10.39L11.24 21.73C11.12 21.86 10.95 21.93 10.77 21.92L10.77 21.92C10.34 21.92 10.04 21.47 10.2 21.07L13.04 13.82C13.21 13.41 12.9 12.96 12.45 12.97L8.46 13.01C7.98 13.01 7.67 12.5 7.9 12.08L13.2 2.4C13.31 2.2 13.52 2.07 13.75 2.07L20.05 2.09C20.54 2.1 20.84 2.63 20.58 3.04L20.58 3.04Z"/><path d="M5.96 12.68L1.64 11.54C1.6 11.54 1.6 11.47 1.64 11.47L7.38 10.31C7.51 10.3 7.61 10.42 7.55 10.55L6.58 12.22C6.39 12.59 6.05 12.69 5.96 12.68L5.96 12.68Z"/><path d="M9.67 16.66L5.35 15.53C5.31 15.52 5.31 15.46 5.35 15.46L11.09 14.3C11.22 14.28 11.32 14.41 11.26 14.53L10.29 16.2C10.1 16.58 9.76 16.68 9.67 16.66L9.67 16.66Z"/></g>`,
+  turboOff: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.81 2.62L14.41 8.21C14.15 8.64 14.46 9.2 14.97 9.2L18.84 9.21C19.42 9.21 19.72 9.9 19.32 10.31L8.02 22.19C7.89 22.33 7.72 22.4 7.53 22.4L7.53 22.4C7.08 22.39 6.77 21.93 6.93 21.5L9.91 13.91C10.08 13.48 9.76 13.01 9.29 13.01L5.11 13.06C4.61 13.06 4.28 12.53 4.53 12.09L10.07 1.94C10.19 1.73 10.41 1.6 10.65 1.6L17.26 1.62C17.77 1.62 18.08 2.18 17.81 2.62L17.81 2.62Z"/></g>`,
+  chevronUp: `<g fill="currentColor" fill-rule="evenodd"><path d="M21.68 17.49L21.68 17.49C20.97 18.2 19.81 18.2 19.1 17.49L13.29 11.68C12.58 10.97 11.42 10.97 10.71 11.68L4.9 17.49C4.19 18.21 3.03 18.21 2.31 17.49L2.31 17.49C1.6 16.78 1.6 15.62 2.31 14.91L9.42 7.8L9.42 7.8L10.71 6.51C11.42 5.79 12.58 5.79 13.29 6.51L21.69 14.9C22.4 15.62 22.4 16.77 21.69 17.49L21.69 17.49Z"/></g>`,
+  chevronDown: `<g fill="currentColor" fill-rule="evenodd"><path d="M2.32 6.51L2.32 6.51C3.03 5.8 4.19 5.8 4.9 6.51L10.71 12.32C11.42 13.03 12.58 13.03 13.29 12.32L19.1 6.51C19.82 5.79 20.97 5.79 21.69 6.51L21.69 6.51C22.4 7.22 22.4 8.38 21.69 9.09L14.58 16.19L14.58 16.2L13.29 17.49C12.58 18.21 11.42 18.21 10.71 17.49L2.31 9.1C1.6 8.38 1.6 7.23 2.31 6.51L2.32 6.51L2.32 6.51Z"/></g>`,
 };
 
-export type IconName = keyof typeof SVGS;
-export const ICON_NAMES = Object.keys(SVGS) as IconName[];
+export type { IconName } from '@/core/icon-names';
+import type { IconName } from '@/core/icon-names';
+export { ICON_NAMES } from '@/core/icon-names';
 
 /** Inline SVG string for an icon, sized to 1em (scale via font-size/width). */
 export function icon(name: IconName): string {

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

@@ -35,11 +35,11 @@ export class IconView extends Container implements Sizable {
   private gfx: Graphics;
   private _size: number;
   private _color: string;
-  readonly iconName: IconName;
+  private _iconName: IconName;
 
   constructor(name: IconName, size: number, color = '#ffffff') {
     super();
-    this.iconName = name;
+    this._iconName = name;
     this._size = size;
     this._color = color;
     this.gfx = new Graphics(context(name, color));
@@ -58,10 +58,22 @@ export class IconView extends Container implements Sizable {
     return this._size;
   }
 
+  get iconName(): IconName {
+    return this._iconName;
+  }
+
   setColor(color: string): void {
     if (color === this._color) return;
     this._color = color;
-    this.gfx.context = context(this.iconName, color);
+    this.gfx.context = context(this._iconName, color);
+  }
+
+  /** Swap the glyph in place (e.g. the menu's sound row flips soundOn/soundOff on toggle) — same
+   *  cached-context rebuild as setColor, keyed on the new name instead of a new colour. */
+  setIcon(name: IconName): void {
+    if (name === this._iconName) return;
+    this._iconName = name;
+    this.gfx.context = context(name, this._color);
   }
 
   setSize(size: number): void {

package/src/ui/pixi/primitives/controls.ts

@@ -198,6 +198,52 @@ export class Slider extends Container implements Sizable {
   }
 }
 
+/** Pill switch — the Pixi twin of the DOM `.ge-toggle`. 42×24, knob 20, accent when on. */
+export class Toggle extends Container {
+  private track = new Graphics();
+  private knob = new Graphics();
+  private _value: boolean;
+  private onChange: (v: boolean) => void;
+  private accent: string;
+  private offFill: string;
+
+  constructor(value: boolean, onChange: (v: boolean) => void, accent = '#8b5cf6', off = 'rgba(255,255,255,.22)') {
+    super();
+    this._value = value;
+    this.onChange = onChange;
+    this.accent = accent;
+    this.offFill = off;
+    this.addChild(this.track, this.knob);
+    this.eventMode = 'static';
+    this.cursor = 'pointer';
+    this.hitArea = new Rectangle(0, 0, 42, 24);
+    this.on('pointertap', () => this.onChange(!this._value));
+    this.paint();
+  }
+
+  get value(): boolean {
+    return this._value;
+  }
+  setValue(v: boolean): void {
+    this._value = v;
+    this.paint();
+  }
+  private paint(): void {
+    this.track.clear();
+    this.track.roundRect(0, 0, 42, 24, 12);
+    this.track.fill(this._value ? this.accent : this.offFill);
+    this.knob.clear();
+    this.knob.circle(this._value ? 30 : 12, 12, 10);
+    this.knob.fill('#ffffff');
+  }
+  measureSize(): { w: number; h: number } {
+    return { w: 42, h: 24 };
+  }
+  setLayoutSize(): void {
+    /* fixed size */
+  }
+}
+
 /** Picker chip — `.ge-chip`. Selected = accent bg + accent border. */
 export class Chip extends Container implements Sizable {
   readonly id: string;