@open-slot-ui/pixi 0.0.1 → 0.1.1

package/dist/index.d.cts

@@ -1,30 +1,6 @@
 import * as pixi_js from 'pixi.js';
 import { Container, Ticker, Texture, Application, TextStyleOptions, Graphics } from 'pixi.js';
-import { ScreenState, ReadoutControl, OpenUI, Control, BlockSpec, Theme, EventLog, SpinControl, ValueDisplay, ButtonControl, ToggleControl, TurboControl, AutoplayControl, SliderControl, PanelControl, SelectControl, StepperControl, Signal, NoticeAction, OpenUIEvents, Dispose, CurrencySpec, JurisdictionConfig, NoticeOptions, RgsErrorOptions, ControlSnapshot, HostHooks, UISpec, Transition } from '@open-slot-ui/core';
-
-type StatusBarSide = 'top' | 'bottom';
-/**
- * A thin, full-width black-and-white status strip pinned to the top or bottom edge,
- * holding the compliance readouts (net · RTP · session) as inline items — white
- * text on a dark bar, no theme accent. Only the jurisdiction-revealed readouts take
- * a slot, so it adapts from 0→3 items (and hides itself when empty). A full-screen
- * overlay (OpenUIPixi manages it + insets the HUD by {@link StatusBarView.heightFor}
- * so controls never sit under it).
- */
-declare class StatusBarView extends Container {
-    private readonly ui;
-    private readonly side;
-    private readonly bg;
-    private readonly items;
-    private screen;
-    private readonly disposers;
-    /** The strip's pixel height for the current screen (used for the HUD margin too). */
-    static heightFor(screen: ScreenState): number;
-    constructor(controls: ReadoutControl[], ui: OpenUI, ticker: Ticker, side: StatusBarSide);
-    applyLayout(screen: ScreenState): void;
-    private relayout;
-    dispose(): void;
-}
+import { Control, OpenUI, ScreenState, BlockSpec, Theme, EventLog, SpinControl, ValueDisplay, ButtonControl, ToggleControl, TurboControl, AutoplayControl, SliderControl, PanelControl, SelectControl, StepperControl, ReadoutControl, Signal, NoticeAction, OpenUIEvents, Dispose, CurrencySpec, JurisdictionConfig, NoticeOptions, RgsErrorOptions, ControlSnapshot, HostHooks, UISpec, Transition } from '@open-slot-ui/core';
 
 /**
  * Base view: a Pixi Container bound to a core Control. Owns layout placement and
@@ -146,11 +122,11 @@ interface OpenUIPixiOptions {
      */
     autoplayPicker?: 'drawer' | 'radial';
     /**
-     * Put the compliance readouts (net · RTP · session) in a thin status strip at the
-     * `'top'` or `'bottom'` edge instead of at screen corners. Each readout still only
-     * shows when its jurisdiction `display*` flag is set.
+     * Text colour for the top-corner compliance readouts (RTP / net / session). Defaults
+     * to the theme text colour; a light-background host can pass a dark colour so the
+     * Figma-style `Label: value` block stays legible.
      */
-    statusBar?: StatusBarSide;
+    readoutColor?: string;
     /**
      * How the interactive HUD appears on mount: `'shown'` (default), `'hidden'` (off
      * screen + non-interactive; reveal later with `showControls()`), or `'slide-in'`
@@ -231,9 +207,15 @@ declare class SpinView extends ControlView {
     private readonly fsFace;
     private readonly fsCount;
     private readonly fsLabel;
+    /** Autoplay STOP face — a "STOP" label over the remaining count (or ∞); shown while
+     *  autoplay is active. Tapping the spin button then STOPS autoplay. */
+    private readonly stopFace;
+    private readonly stopCount;
+    private readonly stopLabel;
     constructor(spin: SpinControl, ui: OpenUI, ticker: Ticker, skinOrOpts?: SpinSkinFactory | SpinViewOptions);
-    /** Swap the spin face: free-spins counter when `freeSpins > 0`, else the skin. */
-    private updateFreeSpins;
+    /** Pick the spin face: autoplay STOP-count (top priority) → free-spins counter →
+     *  the normal skin. */
+    private updateFaces;
     private readonly onOver;
     private readonly onOut;
     private readonly onDown;
@@ -262,6 +244,7 @@ declare class ValueDisplayView extends ControlView {
     private readonly fitGsap?;
     private counter;
     private caption;
+    private captionPill;
     constructor(vd: ValueDisplay, ui: OpenUI, ticker: Ticker, 
     /** Host `gsap` — when present, the counter auto-downscales wide values to fit
      *  (Charter B5: no hard gsap dep; the host passes it). */
@@ -289,16 +272,15 @@ interface ButtonViewOptions {
     /** Monochrome look — white circle, black ring, black glyph (matches the turbo
      *  button's b&w art). Only affects the drawn (no-texture) circle path. */
     mono?: boolean;
+    /** Inverted look — solid black circle with a white glyph, no ring (the Figma ☰
+     *  menu button). Only affects the drawn (no-texture) circle path. */
+    dark?: boolean;
 }
-/**
- * Generic button view. With `iconTexture` it renders the provided art as a Sprite
- * (swappable via `setIconTexture`, e.g. ☰ ↔ ✕); otherwise a neutral token placeholder.
- * Pointer input drives the control's state machine; entry transitions play on `art`.
- */
 declare class ButtonView extends ControlView {
     private readonly btn;
     private readonly art;
     private readonly bg;
+    private readonly glyphG;
     private sprite;
     private labelText;
     private readonly tween;
@@ -308,14 +290,13 @@ declare class ButtonView extends ControlView {
     private glyph;
     private readonly iconTarget;
     private readonly mono;
+    private readonly dark;
     constructor(btn: ButtonControl, ui: OpenUI, ticker: Ticker, opts?: ButtonViewOptions);
     /** Swap the displayed art (e.g. ☰ → ✕). */
     setIconTexture(tex: Texture): void;
     /** Swap the placeholder glyph (e.g. speaker ↔ speaker-mute, fullscreen ↔ exit). */
     setGlyph(glyph: ButtonGlyph): void;
     private fitSprite;
-    private readonly onOver;
-    private readonly onOut;
     private readonly onDown;
     private readonly onUp;
     private readonly onUpOutside;
@@ -731,6 +712,10 @@ interface ReadoutViewOptions {
     inline?: boolean;
     /** Force black-and-white text (white on a dark bar), ignoring the theme accent/text hue. */
     mono?: boolean;
+    /** Single left-aligned `Label: value` line (the Figma top-corner block). */
+    prefix?: boolean;
+    /** Explicit text colour (else the theme text colour). Lets a light-bg host darken it. */
+    fill?: string;
 }
 /**
  * A compact, non-interactive readout for the Stake Engine jurisdiction `display*`
@@ -746,6 +731,7 @@ declare class ReadoutView extends ControlView {
     private readonly caption?;
     private readonly valueText;
     private readonly tick?;
+    private readonly prefix;
     constructor(ro: ReadoutControl, ui: OpenUI, ticker: Ticker, opts?: ReadoutViewOptions);
     private render;
     dispose(): void;
@@ -779,6 +765,9 @@ declare class DialogView extends ControlView {
     private childViews;
     private screen;
     private readonly maxWidth;
+    /** `ui` proxy with a light theme — so the shared block renderer draws dark-on-white
+     *  content inside the white modal card (Figma "default" dialog look). */
+    private readonly lightUi;
     constructor(panel: PanelControl, blocks: Signal<BlockSpec[]>, actions: Signal<NoticeAction[]>, ui: OpenUI, ticker: Ticker, opts?: DialogViewOptions);
     private buildClose;
     applyLayout(screen: ScreenState): void;
@@ -930,4 +919,4 @@ declare class Tweener {
 /** Treat touch devices as non-desktop so we don't fire phantom hover states. */
 declare function isDesktop(): boolean;
 
-export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BlockColumn, type BlockColumnOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, ControlView, type ControlViewFactory, DialogView, type DialogViewOptions, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, type OpenUIIcons, OpenUIPixi, type OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, SelectView, type SelectViewOptions, SliderView, type SpinSkin, type SpinSkinFactory, SpinView, type SpinViewOptions, type StatusBarSide, StatusBarView, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BlockColumn, type BlockColumnOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, ControlView, type ControlViewFactory, DialogView, type DialogViewOptions, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, type OpenUIIcons, OpenUIPixi, type OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, SelectView, type SelectViewOptions, SliderView, type SpinSkin, type SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };

package/dist/index.d.ts

@@ -1,30 +1,6 @@
 import * as pixi_js from 'pixi.js';
 import { Container, Ticker, Texture, Application, TextStyleOptions, Graphics } from 'pixi.js';
-import { ScreenState, ReadoutControl, OpenUI, Control, BlockSpec, Theme, EventLog, SpinControl, ValueDisplay, ButtonControl, ToggleControl, TurboControl, AutoplayControl, SliderControl, PanelControl, SelectControl, StepperControl, Signal, NoticeAction, OpenUIEvents, Dispose, CurrencySpec, JurisdictionConfig, NoticeOptions, RgsErrorOptions, ControlSnapshot, HostHooks, UISpec, Transition } from '@open-slot-ui/core';
-
-type StatusBarSide = 'top' | 'bottom';
-/**
- * A thin, full-width black-and-white status strip pinned to the top or bottom edge,
- * holding the compliance readouts (net · RTP · session) as inline items — white
- * text on a dark bar, no theme accent. Only the jurisdiction-revealed readouts take
- * a slot, so it adapts from 0→3 items (and hides itself when empty). A full-screen
- * overlay (OpenUIPixi manages it + insets the HUD by {@link StatusBarView.heightFor}
- * so controls never sit under it).
- */
-declare class StatusBarView extends Container {
-    private readonly ui;
-    private readonly side;
-    private readonly bg;
-    private readonly items;
-    private screen;
-    private readonly disposers;
-    /** The strip's pixel height for the current screen (used for the HUD margin too). */
-    static heightFor(screen: ScreenState): number;
-    constructor(controls: ReadoutControl[], ui: OpenUI, ticker: Ticker, side: StatusBarSide);
-    applyLayout(screen: ScreenState): void;
-    private relayout;
-    dispose(): void;
-}
+import { Control, OpenUI, ScreenState, BlockSpec, Theme, EventLog, SpinControl, ValueDisplay, ButtonControl, ToggleControl, TurboControl, AutoplayControl, SliderControl, PanelControl, SelectControl, StepperControl, ReadoutControl, Signal, NoticeAction, OpenUIEvents, Dispose, CurrencySpec, JurisdictionConfig, NoticeOptions, RgsErrorOptions, ControlSnapshot, HostHooks, UISpec, Transition } from '@open-slot-ui/core';
 
 /**
  * Base view: a Pixi Container bound to a core Control. Owns layout placement and
@@ -146,11 +122,11 @@ interface OpenUIPixiOptions {
      */
     autoplayPicker?: 'drawer' | 'radial';
     /**
-     * Put the compliance readouts (net · RTP · session) in a thin status strip at the
-     * `'top'` or `'bottom'` edge instead of at screen corners. Each readout still only
-     * shows when its jurisdiction `display*` flag is set.
+     * Text colour for the top-corner compliance readouts (RTP / net / session). Defaults
+     * to the theme text colour; a light-background host can pass a dark colour so the
+     * Figma-style `Label: value` block stays legible.
      */
-    statusBar?: StatusBarSide;
+    readoutColor?: string;
     /**
      * How the interactive HUD appears on mount: `'shown'` (default), `'hidden'` (off
      * screen + non-interactive; reveal later with `showControls()`), or `'slide-in'`
@@ -231,9 +207,15 @@ declare class SpinView extends ControlView {
     private readonly fsFace;
     private readonly fsCount;
     private readonly fsLabel;
+    /** Autoplay STOP face — a "STOP" label over the remaining count (or ∞); shown while
+     *  autoplay is active. Tapping the spin button then STOPS autoplay. */
+    private readonly stopFace;
+    private readonly stopCount;
+    private readonly stopLabel;
     constructor(spin: SpinControl, ui: OpenUI, ticker: Ticker, skinOrOpts?: SpinSkinFactory | SpinViewOptions);
-    /** Swap the spin face: free-spins counter when `freeSpins > 0`, else the skin. */
-    private updateFreeSpins;
+    /** Pick the spin face: autoplay STOP-count (top priority) → free-spins counter →
+     *  the normal skin. */
+    private updateFaces;
     private readonly onOver;
     private readonly onOut;
     private readonly onDown;
@@ -262,6 +244,7 @@ declare class ValueDisplayView extends ControlView {
     private readonly fitGsap?;
     private counter;
     private caption;
+    private captionPill;
     constructor(vd: ValueDisplay, ui: OpenUI, ticker: Ticker, 
     /** Host `gsap` — when present, the counter auto-downscales wide values to fit
      *  (Charter B5: no hard gsap dep; the host passes it). */
@@ -289,16 +272,15 @@ interface ButtonViewOptions {
     /** Monochrome look — white circle, black ring, black glyph (matches the turbo
      *  button's b&w art). Only affects the drawn (no-texture) circle path. */
     mono?: boolean;
+    /** Inverted look — solid black circle with a white glyph, no ring (the Figma ☰
+     *  menu button). Only affects the drawn (no-texture) circle path. */
+    dark?: boolean;
 }
-/**
- * Generic button view. With `iconTexture` it renders the provided art as a Sprite
- * (swappable via `setIconTexture`, e.g. ☰ ↔ ✕); otherwise a neutral token placeholder.
- * Pointer input drives the control's state machine; entry transitions play on `art`.
- */
 declare class ButtonView extends ControlView {
     private readonly btn;
     private readonly art;
     private readonly bg;
+    private readonly glyphG;
     private sprite;
     private labelText;
     private readonly tween;
@@ -308,14 +290,13 @@ declare class ButtonView extends ControlView {
     private glyph;
     private readonly iconTarget;
     private readonly mono;
+    private readonly dark;
     constructor(btn: ButtonControl, ui: OpenUI, ticker: Ticker, opts?: ButtonViewOptions);
     /** Swap the displayed art (e.g. ☰ → ✕). */
     setIconTexture(tex: Texture): void;
     /** Swap the placeholder glyph (e.g. speaker ↔ speaker-mute, fullscreen ↔ exit). */
     setGlyph(glyph: ButtonGlyph): void;
     private fitSprite;
-    private readonly onOver;
-    private readonly onOut;
     private readonly onDown;
     private readonly onUp;
     private readonly onUpOutside;
@@ -731,6 +712,10 @@ interface ReadoutViewOptions {
     inline?: boolean;
     /** Force black-and-white text (white on a dark bar), ignoring the theme accent/text hue. */
     mono?: boolean;
+    /** Single left-aligned `Label: value` line (the Figma top-corner block). */
+    prefix?: boolean;
+    /** Explicit text colour (else the theme text colour). Lets a light-bg host darken it. */
+    fill?: string;
 }
 /**
  * A compact, non-interactive readout for the Stake Engine jurisdiction `display*`
@@ -746,6 +731,7 @@ declare class ReadoutView extends ControlView {
     private readonly caption?;
     private readonly valueText;
     private readonly tick?;
+    private readonly prefix;
     constructor(ro: ReadoutControl, ui: OpenUI, ticker: Ticker, opts?: ReadoutViewOptions);
     private render;
     dispose(): void;
@@ -779,6 +765,9 @@ declare class DialogView extends ControlView {
     private childViews;
     private screen;
     private readonly maxWidth;
+    /** `ui` proxy with a light theme — so the shared block renderer draws dark-on-white
+     *  content inside the white modal card (Figma "default" dialog look). */
+    private readonly lightUi;
     constructor(panel: PanelControl, blocks: Signal<BlockSpec[]>, actions: Signal<NoticeAction[]>, ui: OpenUI, ticker: Ticker, opts?: DialogViewOptions);
     private buildClose;
     applyLayout(screen: ScreenState): void;
@@ -930,4 +919,4 @@ declare class Tweener {
 /** Treat touch devices as non-desktop so we don't fire phantom hover states. */
 declare function isDesktop(): boolean;
 
-export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BlockColumn, type BlockColumnOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, ControlView, type ControlViewFactory, DialogView, type DialogViewOptions, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, type OpenUIIcons, OpenUIPixi, type OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, SelectView, type SelectViewOptions, SliderView, type SpinSkin, type SpinSkinFactory, SpinView, type SpinViewOptions, type StatusBarSide, StatusBarView, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BlockColumn, type BlockColumnOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, ControlView, type ControlViewFactory, DialogView, type DialogViewOptions, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, type OpenUIIcons, OpenUIPixi, type OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, SelectView, type SelectViewOptions, SliderView, type SpinSkin, type SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };