jaml-ui 0.14.4 → 0.16.0

package/DESIGN.md

@@ -124,7 +124,7 @@ components:
 
 Jimbo is the design system for Balatro seed finder tools (JAML-UI, WeeJoker, Seed Finder). It recreates the cozy, tactile, chunky feel of LocalThunk's Balatro — dark panels with silver borders, 3D-press buttons, pixel typography, juice animations. Everything feels like a physical object you can poke.
 
-The system targets iPhone SE portrait (375x667) as the minimum viewport. No fat padding, no bloated margins — every pixel earns its place.
+The system is built **Mobile First**. The absolute minimum viewport width is **320px**. All components must be accessible and usable at 320px without breaking layouts or horizontal scrolling. No fat padding, no bloated margins — every pixel earns its place.
 
 ## Colors
 
@@ -153,7 +153,7 @@ All text is uppercase with generous letter-spacing (0.04em-0.1em) for labels and
 
 ## Layout
 
-Target: iPhone SE portrait (375x667). Components must fit without horizontal scroll. Vertical snap-scroll for ante pages. Horizontal swipe for seed navigation.
+Target: Minimum 320px portrait width. Components must scale gracefully using relative units and flexible layouts. Avoid fixed widths that break at 320px. Vertical snap-scroll for ante pages. Horizontal swipe for seed navigation.
 
 Panels use 2px solid borders with border-silver on top/sides and border-south on bottom, creating a subtle 3D card effect. Inner shadow: `inset 0 0 0 1px rgba(255,255,255,0.04)`. Outer shadow: `0 2px 0 #000`.
 
@@ -187,7 +187,7 @@ JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]`
 
 - DO use m6x11plus for everything. No fallback display fonts.
 - DO eyedrop colors from the game. Never guess or approximate.
-- DO design for iPhone SE portrait first. Desktop is a stretched phone.
+- DO design for 320px portrait first. Desktop is an expanded view of the mobile baseline.
 - DO use translateY + box-shadow for button depth. Not CSS 3D transforms.
 - DO dim non-matching items (opacity 0.4 + grayscale 0.6). They stay visible for context.
 - DON'T use font-weight bold. m6x11plus is single-weight. Bold = muddy.

package/dist/assets.d.ts

@@ -9,6 +9,7 @@ export declare const JAML_ASSET_FILES: {
     readonly vouchers: "Vouchers.png";
     readonly stickers: "stickers.png";
     readonly tags: "tags.png";
+    readonly stakes: "balatro-stake-chips.png";
 };
 export type JamlAssetKey = keyof typeof JAML_ASSET_FILES;
 export type JamlAssetFile = (typeof JAML_ASSET_FILES)[JamlAssetKey];

package/dist/assets.js

@@ -9,6 +9,7 @@ export const JAML_ASSET_FILES = {
     vouchers: "Vouchers.png",
     stickers: "stickers.png",
     tags: "tags.png",
+    stakes: "balatro-stake-chips.png",
 };
 const assetKeyByFileName = Object.fromEntries(Object.entries(JAML_ASSET_FILES).map(([key, fileName]) => [fileName, key]));
 const defaultAssetUrls = {
@@ -22,6 +23,7 @@ const defaultAssetUrls = {
     vouchers: new URL(`../assets/${JAML_ASSET_FILES.vouchers}`, import.meta.url).href,
     stickers: new URL(`../assets/${JAML_ASSET_FILES.stickers}`, import.meta.url).href,
     tags: new URL(`../assets/${JAML_ASSET_FILES.tags}`, import.meta.url).href,
+    stakes: new URL(`../assets/${JAML_ASSET_FILES.stakes}`, import.meta.url).href,
 };
 let customAssetBaseUrl = null;
 function normalizeBaseUrl(baseUrl) {

package/dist/decode/motelyItemDecoder.js

@@ -23,15 +23,39 @@ const CATEGORY_TO_TYPE = {
 };
 // ─── Reverse lookup: MotelyItemType integer → string name ────────────────────
 const _itemTypeToName = new Map();
+const MOTELY_ITEM_TYPES_STANDARD = [
+    "TwoOfClubs", "ThreeOfClubs", "FourOfClubs", "FiveOfClubs", "SixOfClubs", "SevenOfClubs", "EightOfClubs", "NineOfClubs", "TenOfClubs", "JackOfClubs", "QueenOfClubs", "KingOfClubs", "AceOfClubs",
+    "TwoOfDiamonds", "ThreeOfDiamonds", "FourOfDiamonds", "FiveOfDiamonds", "SixOfDiamonds", "SevenOfDiamonds", "EightOfDiamonds", "NineOfDiamonds", "TenOfDiamonds", "JackOfDiamonds", "QueenOfDiamonds", "KingOfDiamonds", "AceOfDiamonds",
+    "TwoOfHearts", "ThreeOfHearts", "FourOfHearts", "FiveOfHearts", "SixOfHearts", "SevenOfHearts", "EightOfHearts", "NineOfHearts", "TenOfHearts", "JackOfHearts", "QueenOfHearts", "KingOfHearts", "AceOfHearts",
+    "TwoOfSpades", "ThreeOfSpades", "FourOfSpades", "FiveOfSpades", "SixOfSpades", "SevenOfSpades", "EightOfSpades", "NineOfSpades", "TenOfSpades", "JackOfSpades", "QueenOfSpades", "KingOfSpades", "AceOfSpades"
+];
+const MOTELY_ITEM_TYPES_SPECTRAL = ["Familiar", "Grim", "Incantation", "Talisman", "Aura", "Wraith", "Sigil", "Ouija", "Ectoplasm", "Immolate", "Ankh", "DejaVu", "Hex", "Trance", "Medium", "Cryptid", "TheSoul", "BlackHole"];
+const MOTELY_ITEM_TYPES_TAROT = ["TheFool", "TheMagician", "TheHighPriestess", "TheEmpress", "TheEmperor", "TheHierophant", "TheLovers", "TheChariot", "Justice", "TheHermit", "TheWheelOfFortune", "Strength", "TheHangedMan", "Death", "Temperance", "TheDevil", "TheTower", "TheStar", "TheMoon", "TheSun", "Judgement", "TheWorld"];
+const MOTELY_ITEM_TYPES_PLANET = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune", "Pluto", "PlanetX", "Ceres", "Eris"];
+const MOTELY_ITEM_TYPES_JOKER = ["Joker", "GreedyJoker", "LustyJoker", "WrathfulJoker", "GluttonousJoker", "JollyJoker", "ZanyJoker", "MadJoker", "CrazyJoker", "DrollJoker", "SlyJoker", "WilyJoker", "CleverJoker", "DeviousJoker", "CraftyJoker", "HalfJoker", "CreditCard", "Banner", "MysticSummit", "EightBall", "Misprint", "RaisedFist", "ChaostheClown", "ScaryFace", "AbstractJoker", "DelayedGratification", "GrosMichel", "EvenSteven", "OddTodd", "Scholar", "BusinessCard", "Supernova", "RideTheBus", "Egg", "Runner", "IceCream", "Splash", "BlueJoker", "FacelessJoker", "GreenJoker", "Superposition", "ToDoList", "Cavendish", "RedCard", "SquareJoker", "RiffRaff", "Photograph", "ReservedParking", "MailInRebate", "Hallucination", "FortuneTeller", "Juggler", "Drunkard", "GoldenJoker", "Popcorn", "WalkieTalkie", "SmileyFace", "GoldenTicket", "Swashbuckler", "HangingChad", "ShootTheMoon", "JokerStencil", "FourFingers", "Mime", "CeremonialDagger", "MarbleJoker", "LoyaltyCard", "Dusk", "Fibonacci", "SteelJoker", "Hack", "Pareidolia", "SpaceJoker", "Burglar", "Blackboard", "SixthSense", "Constellation", "Hiker", "CardSharp", "Madness", "Seance", "Vampire", "Shortcut", "Hologram", "Cloud9", "Rocket", "MidasMask", "Luchador", "GiftCard", "TurtleBean", "Erosion", "ToTheMoon", "StoneJoker", "LuckyCat", "Bull", "DietCola", "TradingCard", "FlashCard", "SpareTrousers", "Ramen", "Seltzer", "Castle", "MrBones", "Acrobat", "SockAndBuskin", "Troubadour", "Certificate", "SmearedJoker", "Throwback", "RoughGem", "Bloodstone", "Arrowhead", "OnyxAgate", "GlassJoker", "Showman", "FlowerPot", "MerryAndy", "OopsAll6s", "TheIdol", "SeeingDouble", "Matador", "Satellite", "Cartomancer", "Astronomer", "Bootstraps", "DNA", "Vagabond", "Baron", "Obelisk", "BaseballCard", "AncientJoker", "Campfire", "Blueprint", "WeeJoker", "HitTheRoad", "TheDuo", "TheTrio", "TheFamily", "TheOrder", "TheTribe", "Stuntman", "InvisibleJoker", "Brainstorm", "DriversLicense", "BurntJoker", "Canio", "Triboulet", "Yorick", "Chicot", "Perkeo"];
+const MOTELY_ITEM_TYPES_INVALID = ["Invalid", "NotImplemented", "JokerExcludedByStream", "PlanetExcludedByStream", "TarotExcludedByStream", "SpectralExcludedByStream"];
 function ensureItemTypeMap() {
     if (_itemTypeToName.size > 0)
         return;
+    // Fallback to runtime enum if present (motely-wasm < 14)
     const e = Motely.MotelyItemType;
-    for (const [key, val] of Object.entries(e)) {
-        if (typeof val === "number" && typeof key === "string" && !/^\d+$/.test(key)) {
-            _itemTypeToName.set(val, key);
+    if (e && Object.keys(e).length > 0) {
+        for (const [key, val] of Object.entries(e)) {
+            if (typeof val === "number" && typeof key === "string" && !/^\d+$/.test(key)) {
+                _itemTypeToName.set(val, key);
+            }
         }
     }
+    else {
+        // Populate using hardcoded categories (motely-wasm 14+)
+        _itemTypeToName.set(0, "None"); // Handle 0
+        MOTELY_ITEM_TYPES_STANDARD.forEach((name, i) => _itemTypeToName.set(0x1000 + i, name));
+        MOTELY_ITEM_TYPES_SPECTRAL.forEach((name, i) => _itemTypeToName.set(0x2000 + i, name));
+        MOTELY_ITEM_TYPES_TAROT.forEach((name, i) => _itemTypeToName.set(0x3000 + i, name));
+        MOTELY_ITEM_TYPES_PLANET.forEach((name, i) => _itemTypeToName.set(0x4000 + i, name));
+        MOTELY_ITEM_TYPES_JOKER.forEach((name, i) => _itemTypeToName.set(0x5000 + i, name));
+        MOTELY_ITEM_TYPES_INVALID.forEach((name, i) => _itemTypeToName.set(0xf000 + i, name));
+    }
 }
 function asRuntimeItem(input) {
     return input !== null && typeof input === "object" ? input : null;

package/dist/decode/motelySprite.d.ts

@@ -0,0 +1,15 @@
+import { type MotelyRenderableCategory } from "./motelyItemDecoder.js";
+export interface MotelySpriteData {
+    atlasPath: string;
+    gridCol: number;
+    gridRow: number;
+    gridCols: number;
+    gridRows: number;
+    displayName: string;
+    category: MotelyRenderableCategory;
+}
+/**
+ * Given a raw motely-wasm item value (which may be a bitpacked integer or raw MotelyItemType),
+ * resolves it to a sprite atlas path and grid coordinates for rendering.
+ */
+export declare function motelyItemToSprite(rawValue: number): MotelySpriteData | null;

package/dist/decode/motelySprite.js

@@ -0,0 +1,27 @@
+import { decodeMotelyItem } from "./motelyItemDecoder.js";
+import { getSpriteData, SHEET_META } from "../sprites/spriteMapper.js";
+import { resolveJamlAssetUrl } from "../assets.js";
+/**
+ * Given a raw motely-wasm item value (which may be a bitpacked integer or raw MotelyItemType),
+ * resolves it to a sprite atlas path and grid coordinates for rendering.
+ */
+export function motelyItemToSprite(rawValue) {
+    const decoded = decodeMotelyItem(rawValue);
+    if (!decoded)
+        return null;
+    const sprite = getSpriteData(decoded.displayName);
+    if (!sprite)
+        return null;
+    const meta = SHEET_META[sprite.type];
+    if (!meta)
+        return null;
+    return {
+        atlasPath: resolveJamlAssetUrl(meta.assetKey),
+        gridCol: sprite.pos.x,
+        gridRow: sprite.pos.y,
+        gridCols: meta.cols,
+        gridRows: meta.rows,
+        displayName: decoded.displayName,
+        category: decoded.category
+    };
+}

package/dist/motely.d.ts

@@ -1,2 +1,3 @@
 export { decodeMotelyItem, decodeMotelyItemToJamlCard, motelyItemTypeName, motelyItemCategory, motelyItemDisplayName, motelyItemRenderCategory, motelyItemEditionName, motelyItemSealName, motelyItemEnhancementName, motelyStandardcardRankName, motelyStandardcardSuitName, decodeMotelyItemName, resolveMotelyItemType, warmMotelyItemCache, motelyItemCacheSize, type DecodedMotelyItem, type MotelyItemInput, type MotelyJamlCard, type MotelyRenderableCategory, type MotelyRuntimeItem, } from "./decode/motelyItemDecoder.js";
+export { motelyItemToSprite, type MotelySpriteData, } from "./decode/motelySprite.js";
 export { MOTELY_DISPLAY_SCHEMA, motelyBossDisplayName, motelyBossDisplayNameFromKey, motelyBossKeyFromDisplayName, motelyBoosterPackDisplayName, motelyBoosterPackDisplayNameFromKey, motelyBoosterPackKeyFromDisplayName, motelyItemDisplayNameFromKey, motelyItemDisplayNameFromValue, motelyTagDisplayName, motelyTagDisplayNameFromKey, motelyTagKeyFromDisplayName, motelyVoucherDisplayName, motelyVoucherDisplayNameFromKey, motelyVoucherKeyFromDisplayName, type MotelyBoosterPackKey, type MotelyBossKey, type MotelyDisplaySchema, type MotelyTagKey, type MotelyVoucherKey, } from "./motelyDisplay.js";

package/dist/motely.js

@@ -1,3 +1,4 @@
 "use client";
 export { decodeMotelyItem, decodeMotelyItemToJamlCard, motelyItemTypeName, motelyItemCategory, motelyItemDisplayName, motelyItemRenderCategory, motelyItemEditionName, motelyItemSealName, motelyItemEnhancementName, motelyStandardcardRankName, motelyStandardcardSuitName, decodeMotelyItemName, resolveMotelyItemType, warmMotelyItemCache, motelyItemCacheSize, } from "./decode/motelyItemDecoder.js";
+export { motelyItemToSprite, } from "./decode/motelySprite.js";
 export { MOTELY_DISPLAY_SCHEMA, motelyBossDisplayName, motelyBossDisplayNameFromKey, motelyBossKeyFromDisplayName, motelyBoosterPackDisplayName, motelyBoosterPackDisplayNameFromKey, motelyBoosterPackKeyFromDisplayName, motelyItemDisplayNameFromKey, motelyItemDisplayNameFromValue, motelyTagDisplayName, motelyTagDisplayNameFromKey, motelyTagKeyFromDisplayName, motelyVoucherDisplayName, motelyVoucherDisplayNameFromKey, motelyVoucherKeyFromDisplayName, } from "./motelyDisplay.js";

package/dist/r3f/Card3D.js

@@ -23,6 +23,8 @@ const SHEET_KEY_MAP = {
     Editions: 'editions',
     BlindChips: 'blinds',
     tags: 'tags',
+    Stakes: 'stakes',
+    Decks: 'deck',
 };
 const _textureCache = new Map();
 function useSpriteTexture(sprite) {

package/dist/r3f/JimboBillboard.d.ts

@@ -0,0 +1,10 @@
+import type { MotelySpriteData } from '../decode/motelySprite.js';
+export interface JimboBillboardProps {
+    sprite: MotelySpriteData | null;
+    label?: string;
+    width?: number;
+    height?: number;
+    yLockOnly?: boolean;
+    position?: [number, number, number];
+}
+export declare function JimboBillboard({ sprite, label, width, height, yLockOnly, position }: JimboBillboardProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/r3f/JimboBillboard.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Billboard } from '@react-three/drei';
+import { useLoader } from '@react-three/fiber';
+import * as THREE from 'three';
+export function JimboBillboard({ sprite, label, width = 3.4, height = 4.5, yLockOnly = false, position = [0, 0, 0] }) {
+    if (!sprite)
+        return null;
+    // Memoize texture to avoid per-render allocation
+    const texture = useLoader(THREE.TextureLoader, sprite.atlasPath);
+    const clonedTexture = useMemo(() => {
+        const tex = texture.clone();
+        tex.magFilter = THREE.NearestFilter;
+        tex.minFilter = THREE.NearestFilter;
+        // Set up sprite cropping
+        tex.repeat.set(1 / sprite.gridCols, 1 / sprite.gridRows);
+        tex.offset.set(sprite.gridCol / sprite.gridCols, 1 - ((sprite.gridRow + 1) / sprite.gridRows));
+        tex.needsUpdate = true;
+        return tex;
+    }, [texture, sprite.gridCol, sprite.gridRow, sprite.gridCols, sprite.gridRows]);
+    const material = useMemo(() => {
+        return new THREE.MeshBasicMaterial({
+            map: clonedTexture,
+            transparent: true,
+            alphaTest: 0.5
+        });
+    }, [clonedTexture]);
+    return (_jsx(Billboard, { lockY: yLockOnly, lockX: false, lockZ: false, position: position, children: _jsx("mesh", { material: material, children: _jsx("planeGeometry", { args: [width, height] }) }) }));
+}

package/dist/r3f/JimboText3D.d.ts

@@ -0,0 +1,9 @@
+export interface JimboText3DProps {
+    children: string;
+    color?: string;
+    outlineColor?: string;
+    outlineWidth?: number;
+    position?: [number, number, number];
+    fontSize?: number;
+}
+export declare function JimboText3D({ children, color, outlineColor, outlineWidth, position, fontSize }: JimboText3DProps): import("react/jsx-runtime").JSX.Element;

package/dist/r3f/JimboText3D.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '@react-three/drei';
+import { resolveJamlAssetUrl } from '../assets.js';
+export function JimboText3D({ children, color = '#ffffff', outlineColor = '#000000', outlineWidth = 0.05, position = [0, 0, 0], fontSize = 1 }) {
+    // We use the m6x11plus font from assets if possible, or fallback
+    return (_jsx(Text, { position: position, fontSize: fontSize, color: color, outlineColor: outlineColor, outlineWidth: outlineWidth, font: resolveJamlAssetUrl('fonts') /* TODO: ensure m6x11plus ttf is accessible */, anchorX: "center", anchorY: "middle", children: children }));
+}

package/dist/r3f.d.ts

@@ -1 +1,3 @@
 export * from './r3f/Card3D.js';
+export * from './r3f/JimboBillboard.js';
+export * from './r3f/JimboText3D.js';

package/dist/r3f.js

@@ -1 +1,3 @@
 export * from './r3f/Card3D.js';
+export * from './r3f/JimboBillboard.js';
+export * from './r3f/JimboText3D.js';

package/dist/sprites/spriteData.d.ts

@@ -32,6 +32,7 @@ export declare const SPRITE_SHEETS: {
     readonly vouchers: SpriteSheetInfo;
     readonly tags: SpriteSheetInfo;
     readonly boosters: SpriteSheetInfo;
+    readonly stakes: SpriteSheetInfo;
 };
 export declare const JOKERS: SpriteEntry[];
 export declare const JOKER_FACES: SpriteEntry[];

package/dist/sprites/spriteData.js

@@ -27,6 +27,7 @@ export const SPRITE_SHEETS = {
     vouchers: defineSpriteSheet("vouchers", 9, 4),
     tags: defineSpriteSheet("tags", 6, 5),
     boosters: defineSpriteSheet("boosters", 4, 9),
+    stakes: defineSpriteSheet("stakes", 5, 2),
 };
 export const JOKERS = [
     { name: "Joker", pos: { x: 0, y: 0 } }, { name: "Greedy Joker", pos: { x: 6, y: 1 } }, { name: "Lusty Joker", pos: { x: 7, y: 1 } }, { name: "Wrathful Joker", pos: { x: 8, y: 1 } }, { name: "Gluttonous Joker", pos: { x: 9, y: 1 } }, { name: "Jolly Joker", pos: { x: 2, y: 0 } }, { name: "Zany Joker", pos: { x: 3, y: 0 } }, { name: "Mad Joker", pos: { x: 4, y: 0 } }, { name: "Crazy Joker", pos: { x: 5, y: 0 } }, { name: "Droll Joker", pos: { x: 6, y: 0 } }, { name: "Sly Joker", pos: { x: 0, y: 14 } }, { name: "Wily Joker", pos: { x: 1, y: 14 } }, { name: "Clever Joker", pos: { x: 2, y: 14 } }, { name: "Devious Joker", pos: { x: 3, y: 14 } }, { name: "Crafty Joker", pos: { x: 4, y: 14 } }, { name: "Half Joker", pos: { x: 7, y: 0 } }, { name: "Joker Stencil", pos: { x: 2, y: 5 } }, { name: "Four Fingers", pos: { x: 6, y: 6 } }, { name: "Mime", pos: { x: 4, y: 1 } }, { name: "Credit Card", pos: { x: 5, y: 1 } }, { name: "Ceremonial Dagger", pos: { x: 5, y: 5 } }, { name: "Banner", pos: { x: 1, y: 2 } }, { name: "Mystic Summit", pos: { x: 2, y: 2 } }, { name: "Marble Joker", pos: { x: 3, y: 2 } }, { name: "Loyalty Card", pos: { x: 4, y: 2 } }, { name: "8 Ball", pos: { x: 0, y: 5 } }, { name: "Misprint", pos: { x: 6, y: 2 } }, { name: "Dusk", pos: { x: 4, y: 7 } }, { name: "Raised Fist", pos: { x: 8, y: 2 } }, { name: "Chaos the Clown", pos: { x: 1, y: 0 } }, { name: "Fibonacci", pos: { x: 1, y: 5 } }, { name: "Steel Joker", pos: { x: 7, y: 2 } }, { name: "Scary Face", pos: { x: 2, y: 3 } }, { name: "Abstract Joker", pos: { x: 3, y: 3 } }, { name: "Delayed Gratification", pos: { x: 4, y: 3 } }, { name: "Hack", pos: { x: 5, y: 2 } }, { name: "Pareidolia", pos: { x: 6, y: 3 } }, { name: "Gros Michel", pos: { x: 7, y: 6 } }, { name: "Even Steven", pos: { x: 8, y: 3 } }, { name: "Odd Todd", pos: { x: 9, y: 3 } }, { name: "Scholar", pos: { x: 3, y: 6 } }, { name: "Business Card", pos: { x: 1, y: 4 } }, { name: "Supernova", pos: { x: 2, y: 4 } }, { name: "Ride the Bus", pos: { x: 1, y: 6 } }, { name: "Space Joker", pos: { x: 3, y: 5 } }, { name: "Egg", pos: { x: 0, y: 10 } }, { name: "Burglar", pos: { x: 1, y: 10 } }, { name: "Blackboard", pos: { x: 2, y: 10 } }, { name: "Runner", pos: { x: 3, y: 10 } }, { name: "Ice Cream", pos: { x: 4, y: 10 } }, { name: "DNA", pos: { x: 5, y: 10 } }, { name: "Splash", pos: { x: 6, y: 10 } }, { name: "Blue Joker", pos: { x: 7, y: 10 } }, { name: "Sixth Sense", pos: { x: 8, y: 10 } }, { name: "Constellation", pos: { x: 9, y: 10 } }, { name: "Hiker", pos: { x: 0, y: 11 } }, { name: "Faceless Joker", pos: { x: 1, y: 11 } }, { name: "Green Joker", pos: { x: 2, y: 11 } }, { name: "Superposition", pos: { x: 3, y: 11 } }, { name: "To Do List", pos: { x: 4, y: 11 } }, { name: "Cavendish", pos: { x: 5, y: 11 } }, { name: "Card Sharp", pos: { x: 6, y: 11 } }, { name: "Red Card", pos: { x: 7, y: 11 } }, { name: "Madness", pos: { x: 8, y: 11 } }, { name: "Square Joker", pos: { x: 9, y: 11 } }, { name: "Seance", pos: { x: 0, y: 12 } }, { name: "Riff-raff", pos: { x: 1, y: 12 } }, { name: "Vampire", pos: { x: 2, y: 12 } }, { name: "Shortcut", pos: { x: 3, y: 12 } }, { name: "Hologram", pos: { x: 4, y: 12 } }, { name: "Vagabond", pos: { x: 5, y: 12 } }, { name: "Baron", pos: { x: 6, y: 12 } }, { name: "Cloud 9", pos: { x: 7, y: 12 } }, { name: "Rocket", pos: { x: 8, y: 12 } }, { name: "Obelisk", pos: { x: 9, y: 12 } }, { name: "Midas Mask", pos: { x: 0, y: 13 } }, { name: "Luchador", pos: { x: 1, y: 13 } }, { name: "Photograph", pos: { x: 2, y: 13 } }, { name: "Gift Card", pos: { x: 3, y: 13 } }, { name: "Turtle Bean", pos: { x: 4, y: 13 } }, { name: "Erosion", pos: { x: 5, y: 13 } }, { name: "Reserved Parking", pos: { x: 6, y: 13 } }, { name: "Mail In Rebate", pos: { x: 7, y: 13 } }, { name: "To the Moon", pos: { x: 8, y: 13 } }, { name: "Hallucination", pos: { x: 9, y: 13 } }, { name: "Fortune Teller", pos: { x: 7, y: 5 } }, { name: "Juggler", pos: { x: 0, y: 1 } }, { name: "Drunkard", pos: { x: 1, y: 1 } }, { name: "Stone Joker", pos: { x: 9, y: 0 } }, { name: "Golden Joker", pos: { x: 9, y: 2 } }, { name: "Lucky Cat", pos: { x: 5, y: 14 } }, { name: "Baseball Card", pos: { x: 6, y: 14 } }, { name: "Bull", pos: { x: 7, y: 14 } }, { name: "Diet Cola", pos: { x: 8, y: 14 } }, { name: "Trading Card", pos: { x: 9, y: 14 } }, { name: "Flash Card", pos: { x: 0, y: 15 } }, { name: "Popcorn", pos: { x: 1, y: 15 } }, { name: "Spare Trousers", pos: { x: 4, y: 15 } }, { name: "Ancient Joker", pos: { x: 7, y: 15 } }, { name: "Ramen", pos: { x: 2, y: 15 } }, { name: "Walkie Talkie", pos: { x: 8, y: 15 } }, { name: "Seltzer", pos: { x: 3, y: 15 } }, { name: "Castle", pos: { x: 9, y: 15 } }, { name: "Smiley Face", pos: { x: 6, y: 15 } }, { name: "Campfire", pos: { x: 5, y: 15 } }, { name: "Golden Ticket", pos: { x: 5, y: 3 } }, { name: "Mr. Bones", pos: { x: 3, y: 4 } }, { name: "Acrobat", pos: { x: 2, y: 1 } }, { name: "Sock and Buskin", pos: { x: 3, y: 1 } }, { name: "Swashbuckler", pos: { x: 9, y: 5 } }, { name: "Troubadour", pos: { x: 0, y: 2 } }, { name: "Certificate", pos: { x: 8, y: 8 } }, { name: "Smeared Joker", pos: { x: 4, y: 6 } }, { name: "Throwback", pos: { x: 5, y: 7 } }, { name: "Hanging Chad", pos: { x: 9, y: 6 } }, { name: "Rough Gem", pos: { x: 9, y: 7 } }, { name: "Bloodstone", pos: { x: 0, y: 8 } }, { name: "Arrowhead", pos: { x: 1, y: 8 } }, { name: "Onyx Agate", pos: { x: 2, y: 8 } }, { name: "Glass Joker", pos: { x: 1, y: 3 } }, { name: "Showman", pos: { x: 6, y: 5 } }, { name: "Flower Pot", pos: { x: 0, y: 6 } }, { name: "Blueprint", pos: { x: 0, y: 3 } }, { name: "Wee Joker", pos: { x: 0, y: 4 } }, { name: "Merry Andy", pos: { x: 8, y: 0 } }, { name: "Oops! All 6s", pos: { x: 5, y: 6 } }, { name: "The Idol", pos: { x: 6, y: 7 } }, { name: "Seeing Double", pos: { x: 4, y: 4 } }, { name: "Matador", pos: { x: 4, y: 5 } }, { name: "Hit the Road", pos: { x: 8, y: 5 } }, { name: "The Duo", pos: { x: 5, y: 4 } }, { name: "The Trio", pos: { x: 6, y: 4 } }, { name: "The Family", pos: { x: 7, y: 4 } }, { name: "The Order", pos: { x: 8, y: 4 } }, { name: "The Tribe", pos: { x: 9, y: 4 } }, { name: "Stuntman", pos: { x: 8, y: 6 } }, { name: "Invisible Joker", pos: { x: 1, y: 7 } }, { name: "Brainstorm", pos: { x: 7, y: 7 } }, { name: "Satellite", pos: { x: 8, y: 7 } }, { name: "Shoot the Moon", pos: { x: 2, y: 6 } }, { name: "Drivers License", pos: { x: 0, y: 7 } }, { name: "Cartomancer", pos: { x: 7, y: 3 } }, { name: "Astronomer", pos: { x: 2, y: 7 } }, { name: "Burnt Joker", pos: { x: 3, y: 7 } }, { name: "Bootstraps", pos: { x: 9, y: 8 } }, { name: "Canio", pos: { x: 3, y: 8 } }, { name: "Triboulet", pos: { x: 4, y: 8 } }, { name: "Yorick", pos: { x: 5, y: 8 } }, { name: "Chicot", pos: { x: 6, y: 8 } }, { name: "Perkeo", pos: { x: 7, y: 8 } },

package/dist/sprites/spriteMapper.d.ts

@@ -2,7 +2,13 @@ export interface SpritePos {
     x: number;
     y: number;
 }
-export type SpriteSheetType = "Jokers" | "Tarots" | "Vouchers" | "Boosters" | "Enhancers" | "Editions" | "BlindChips" | "tags";
+export type SpriteSheetType = "Jokers" | "Tarots" | "Vouchers" | "Boosters" | "Enhancers" | "Editions" | "BlindChips" | "tags" | "Stakes" | "Decks";
+import type { JamlAssetKey } from '../assets.js';
+export declare const SHEET_META: Record<SpriteSheetType, {
+    cols: number;
+    rows: number;
+    assetKey: JamlAssetKey;
+}>;
 export interface SpriteData {
     pos: SpritePos;
     type: SpriteSheetType;

package/dist/sprites/spriteMapper.js

@@ -1,4 +1,16 @@
 import { JOKERS, JOKER_FACES, TAROTS_AND_PLANETS, CONSUMABLE_FACES, VOUCHERS, BOSSES, TAGS, BOOSTER_PACKS, } from "./spriteData.js";
+export const SHEET_META = {
+    Jokers: { cols: 10, rows: 16, assetKey: 'jokers' },
+    Tarots: { cols: 10, rows: 6, assetKey: 'tarots' },
+    Vouchers: { cols: 9, rows: 4, assetKey: 'vouchers' },
+    Boosters: { cols: 4, rows: 9, assetKey: 'boosters' },
+    BlindChips: { cols: 21, rows: 31, assetKey: 'blinds' },
+    tags: { cols: 6, rows: 5, assetKey: 'tags' },
+    Enhancers: { cols: 7, rows: 5, assetKey: 'enhancers' },
+    Editions: { cols: 5, rows: 1, assetKey: 'editions' },
+    Stakes: { cols: 5, rows: 2, assetKey: 'stakes' },
+    Decks: { cols: 13, rows: 4, assetKey: 'deck' },
+};
 const normalize = (name) => name.toLowerCase().replace(/\s+/g, "");
 const stripPrefix = (name) => name.replace(/^(Joker|Tarot|Planet|Voucher|Pack|Edition|Tag) [|:] /i, "").trim();
 const ITEM_MAP = new Map();

package/dist/ui/JimboBadge.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface JimboBadgeProps {
+    size?: 'sm' | 'md';
+    tone?: 'dark' | 'blue' | 'red' | 'green' | 'gold' | 'grey';
+    children: React.ReactNode;
+}
+export declare function JimboBadge({ size, tone, children }: JimboBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/JimboBadge.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { JimboColorOption as C } from './tokens.js';
+export function JimboBadge({ size = 'sm', tone = 'dark', children }) {
+    const bgColors = {
+        dark: C.DARKEST,
+        blue: C.BLUE,
+        red: C.RED,
+        green: C.GREEN,
+        gold: C.GOLD,
+        grey: C.GREY
+    };
+    return (_jsx("span", { style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            padding: size === 'sm' ? '2px 6px' : '4px 8px',
+            fontSize: size === 'sm' ? 10 : 12,
+            background: bgColors[tone],
+            color: tone === 'dark' || tone === 'grey' ? C.WHITE : C.DARKEST,
+            border: `1px solid ${tone === 'dark' ? C.PANEL_EDGE : C.BLACK}`,
+            borderRadius: 4,
+            fontFamily: 'var(--font-sans, m6x11plus), monospace',
+            whiteSpace: 'nowrap'
+        }, children: children }));
+}

package/dist/ui/JimboFloating.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface JimboFloatingProps {
+    anchor?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+    offset?: number;
+    zIndex?: number;
+    children: React.ReactNode;
+}
+export declare function JimboFloating({ anchor, offset, zIndex, children }: JimboFloatingProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/JimboFloating.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function JimboFloating({ anchor = 'top-right', offset = 12, zIndex = 20, children }) {
+    const pos = { position: 'absolute', zIndex };
+    if (anchor.includes('top'))
+        pos.top = offset;
+    if (anchor.includes('bottom'))
+        pos.bottom = offset;
+    if (anchor.includes('left'))
+        pos.left = offset;
+    if (anchor.includes('right'))
+        pos.right = offset;
+    if (anchor.includes('center')) {
+        pos.left = '50%';
+        pos.transform = 'translateX(-50%)';
+    }
+    return (_jsx("div", { style: pos, children: children }));
+}

package/dist/ui/JimboToggleList.d.ts

@@ -0,0 +1,11 @@
+export interface ToggleItem {
+    id: string;
+    label: string;
+    on: boolean;
+}
+export interface JimboToggleListProps {
+    items: ToggleItem[];
+    onToggle: (id: string) => void;
+    title?: string;
+}
+export declare function JimboToggleList({ items, onToggle, title }: JimboToggleListProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/JimboToggleList.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JimboPanel, JimboButton } from './panel.js';
+export function JimboToggleList({ items, onToggle, title }) {
+    return (_jsx(JimboPanel, { children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [title && _jsx("div", { style: { fontSize: 12, color: 'var(--c-grey)', marginBottom: 4 }, children: title }), items.map(item => (_jsxs(JimboButton, { tone: "grey", size: "sm", onClick: () => onToggle(item.id), style: { justifyContent: 'flex-start', textAlign: 'left', display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("div", { style: {
+                                width: 10, height: 10, flexShrink: 0,
+                                background: item.on ? 'var(--c-orange)' : 'var(--c-darkest)',
+                                border: '1px solid var(--c-dark-grey)',
+                                boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.5)'
+                            } }), item.label] }, item.id)))] }) }));
+}

package/dist/ui/footer.js

@@ -9,7 +9,7 @@ const SUITS = [
 ];
 const CYCLE = '5s';
 export function JimboBalatroFooter({ hidden = false, className = '' }) {
-    return (_jsxs("div", { className: ['fixed right-0 bottom-0 left-0 w-screen min-w-full transition-opacity duration-200', hidden ? 'pointer-events-none opacity-0' : 'opacity-100', className].filter(Boolean).join(' '), children: [_jsx("div", { style: { width: '100%', borderTop: '1px solid rgba(255,255,255,0.1)', background: 'rgba(0,0,0,0.9)', padding: '0 1rem 3px', textAlign: 'center' }, children: _jsxs("p", { style: { fontFamily: 'm6x11plus, monospace', fontSize: 'clamp(11px, 0.8vw + 8px, 14px)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '0 0.5rem', color: 'white', margin: 0 }, children: [_jsx("span", { children: "Not affiliated with LocalThunk or PlayStack" }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }, children: ["Made with", ' ', _jsx("span", { style: { position: 'relative', display: 'inline-block', width: '1.5em', height: '1em', verticalAlign: 'middle' }, children: SUITS.map(({ char, kf }) => (_jsx("span", { style: { position: 'absolute', inset: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: 0, animationName: kf, animationDuration: CYCLE, animationDelay: '0s', animationIterationCount: 'infinite', animationTimingFunction: 'ease-out' }, children: char }, char))) }), ' ', "for the", ' ', _jsx("a", { href: "https://playbalatro.com", target: "_blank", rel: "noopener noreferrer", style: { color: JimboColorOption.GOLD, textDecoration: 'none' }, children: "Balatro" }), ' ', "community"] })] }) }), _jsx("style", { children: `
+    return (_jsxs("div", { className: ['w-full transition-opacity duration-200', hidden ? 'pointer-events-none opacity-0' : 'opacity-100', className].filter(Boolean).join(' '), children: [_jsx("div", { style: { width: '100%', borderTop: '1px solid rgba(255,255,255,0.1)', background: 'rgba(0,0,0,0.9)', padding: '0 1rem 3px', textAlign: 'center' }, children: _jsxs("p", { style: { fontFamily: 'm6x11plus, monospace', fontSize: 'clamp(11px, 0.8vw + 8px, 14px)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '0 0.5rem', color: 'white', margin: 0 }, children: [_jsx("span", { children: "Not affiliated with LocalThunk or PlayStack" }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }, children: ["Made with", ' ', _jsx("span", { style: { position: 'relative', display: 'inline-block', width: '1.5em', height: '1em', verticalAlign: 'middle' }, children: SUITS.map(({ char, kf }) => (_jsx("span", { style: { position: 'absolute', inset: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: 0, animationName: kf, animationDuration: CYCLE, animationDelay: '0s', animationIterationCount: 'infinite', animationTimingFunction: 'ease-out' }, children: char }, char))) }), ' ', "for the", ' ', _jsx("a", { href: "https://playbalatro.com", target: "_blank", rel: "noopener noreferrer", style: { color: JimboColorOption.GOLD, textDecoration: 'none' }, children: "Balatro" }), ' ', "community"] })] }) }), _jsx("style", { children: `
         @keyframes jaml-heart   { 0%{opacity:0;transform:scale(1)} 1%{opacity:1;transform:scale(1.45)} 3.5%{opacity:1;transform:scale(1)} 61.5%{opacity:1;transform:scale(1)} 62%{opacity:0} 100%{opacity:0} }
         @keyframes jaml-spade   { 0%,61.5%{opacity:0} 62%{opacity:1;transform:scale(1.45)} 64.5%{opacity:1;transform:scale(1)} 71.5%{opacity:1} 72%{opacity:0} 100%{opacity:0} }
         @keyframes jaml-diamond { 0%,71.5%{opacity:0} 72%{opacity:1;transform:scale(1.45)} 74.5%{opacity:1;transform:scale(1)} 81.5%{opacity:1} 82%{opacity:0} 100%{opacity:0} }

package/dist/ui/jimboFlankNav.js

@@ -25,16 +25,16 @@ function NavButton({ direction, onClick, disabled, 'aria-label': ariaLabel, }) {
             width: 48,
             border: 'none',
             borderRadius: 8,
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            opacity: disabled ? 0.35 : 1,
-            backgroundColor: JimboColorOption.RED,
+            cursor: disabled ? 'default' : 'pointer',
+            opacity: 1,
+            backgroundColor: disabled ? JimboColorOption.DARK_RED : JimboColorOption.RED,
             color: JimboColorOption.WHITE,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             transform: pressed ? `translateY(${JIMBO_ANIMATIONS.PRESS_TRANSLATE_Y}px)` : 'translateY(0)',
-            boxShadow: pressed ? 'none' : `0 ${JIMBO_ANIMATIONS.PRESS_TRANSLATE_Y}px 0 0 ${JimboColorOption.DARK_RED}`,
-            transition: `transform ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease, box-shadow ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease`,
+            boxShadow: pressed || disabled ? 'none' : `0 ${JIMBO_ANIMATIONS.PRESS_TRANSLATE_Y}px 0 0 ${JimboColorOption.DARK_RED}`,
+            transition: `transform ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease, box-shadow ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease, background-color ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease`,
         }, children: _jsx(ChevronSvg, { direction: direction }) }));
 }
 function ChevronSvg({ direction }) {

package/dist/ui/panel.d.ts

@@ -14,11 +14,12 @@ export interface JimboButtonProps {
     size?: 'xs' | 'sm' | 'md' | 'lg';
     fullWidth?: boolean;
     disabled?: boolean;
+    uppercase?: boolean;
     onClick?: () => void;
     style?: React.CSSProperties;
     children?: React.ReactNode;
 }
-export declare function JimboButton({ tone, size, fullWidth, disabled, onClick, style, children, }: JimboButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function JimboButton({ tone, size, fullWidth, disabled, uppercase, onClick, style, children, }: JimboButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare function JimboBackButton({ onClick }: {
     onClick?: () => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/panel.js

@@ -41,10 +41,10 @@ const JIMBO_TONE_PAIRS = {
     gold: [JimboColorOption.GOLD, '#8a6a1e'],
     grey: [JimboColorOption.DARK_GREY, JimboColorOption.DARKEST],
 };
-export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, disabled = false, onClick, style, children, }) {
+export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, disabled = false, uppercase = false, onClick, style, children, }) {
     const [pressed, setPressed] = useState(false);
     const [fg, sh] = JIMBO_TONE_PAIRS[tone] ?? JIMBO_TONE_PAIRS.orange;
-    const pad = size === 'xs' ? '2px 8px' : size === 'sm' ? '4px 10px' : size === 'lg' ? '14px 18px' : '9px 14px';
+    const pad = size === 'xs' ? '2px 8px' : size === 'sm' ? '4px 10px' : size === 'lg' ? '10px 18px' : '6px 14px';
     const textSize = size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md';
     return (_jsxs("div", { onMouseDown: () => { if (!disabled)
             setPressed(true); }, onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onTouchStart: () => { if (!disabled)
@@ -54,10 +54,10 @@ export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, d
                     transform: pressed ? 'translate(1px, 3px)' : 'translate(0,0)',
                     transition: 'transform 55ms linear',
                     textAlign: 'center',
-                }, children: _jsx(JimboText, { size: textSize, uppercase: true, children: children }) })] }));
+                }, children: _jsx(JimboText, { size: textSize, uppercase: uppercase, children: children }) })] }));
 }
 export function JimboBackButton({ onClick }) {
-    return (_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%', padding: '8px 10px 10px' }, children: _jsx(JimboButton, { tone: "orange", size: "md", onClick: onClick, style: { width: '66.666%' }, children: "Back" }) }));
+    return (_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%', padding: '4px 0' }, children: _jsx(JimboButton, { tone: "orange", size: "md", fullWidth: true, onClick: onClick, children: "Back" }) }));
 }
 export function JimboModal({ children, open, onClose, title, className }) {
     const [visible, setVisible] = useState(open);

package/dist/ui/sprites.d.ts

@@ -8,3 +8,17 @@ export interface JimboSpriteProps {
     style?: React.CSSProperties;
 }
 export declare function JimboSprite({ name, sheet, width, height, style }: JimboSpriteProps): import("react/jsx-runtime").JSX.Element | null;
+export interface StakeSpriteProps {
+    stake: string;
+    width?: number;
+    height?: number;
+    style?: React.CSSProperties;
+}
+export declare function StakeSprite({ stake, width, height, style }: StakeSpriteProps): import("react/jsx-runtime").JSX.Element;
+export interface DeckSpriteProps {
+    deck: string;
+    width?: number;
+    height?: number;
+    style?: React.CSSProperties;
+}
+export declare function DeckSprite({ deck, width, height, style }: DeckSpriteProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/sprites.js

@@ -1,23 +1,17 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { resolveJamlAssetUrl } from '../assets.js';
-import { getSpriteData } from '../sprites/spriteMapper.js';
-const SHEET_META = {
-    Jokers: { cols: 10, rows: 16, assetKey: 'jokers' },
-    Tarots: { cols: 10, rows: 6, assetKey: 'tarots' },
-    Vouchers: { cols: 9, rows: 4, assetKey: 'vouchers' },
-    Boosters: { cols: 4, rows: 9, assetKey: 'boosters' },
-    BlindChips: { cols: 21, rows: 31, assetKey: 'blinds' },
-    tags: { cols: 6, rows: 5, assetKey: 'tags' },
-    Enhancers: { cols: 7, rows: 5, assetKey: 'enhancers' },
-    Editions: { cols: 5, rows: 1, assetKey: 'editions' },
-};
+import { getSpriteData, SHEET_META } from '../sprites/spriteMapper.js';
 export function JimboSprite({ name, sheet, width = 40, height, style }) {
     const sprite = getSpriteData(name);
     const resolvedSheet = sheet ?? sprite?.type ?? 'Jokers';
     const meta = SHEET_META[resolvedSheet];
     const pos = sprite?.pos ?? { x: 0, y: 0 };
-    const h = height ?? width;
+    let defaultH = width;
+    if (["Jokers", "Tarots", "Vouchers", "Boosters", "Decks", "Enhancers", "Editions"].includes(resolvedSheet)) {
+        defaultH = Math.round((width * 95) / 71);
+    }
+    const h = height ?? defaultH;
     if (!meta)
         return null;
     const bgW = width * meta.cols;
@@ -34,3 +28,49 @@ export function JimboSprite({ name, sheet, width = 40, height, style }) {
             ...style,
         } }));
 }
+const STAKE_MAP = ["White", "Red", "Green", "Black", "Blue", "Purple", "Orange", "Gold"];
+export function StakeSprite({ stake, width = 29, height, style }) {
+    const index = STAKE_MAP.indexOf(stake.replace(" Stake", ""));
+    const idx = index >= 0 ? index : 0;
+    const x = idx % 5;
+    const y = Math.floor(idx / 5);
+    const h = height ?? width;
+    const bgW = width * 5;
+    const bgH = h * 2;
+    return (_jsx("div", { style: {
+            width, height: h, flexShrink: 0,
+            backgroundImage: `url(${resolveJamlAssetUrl('stakes')})`,
+            backgroundSize: `${bgW}px ${bgH}px`,
+            backgroundPosition: `-${x * width}px -${y * h}px`,
+            backgroundRepeat: 'no-repeat',
+            imageRendering: 'pixelated',
+            ...style,
+        } }));
+}
+const DECK_ROWS = {
+    Red: 0,
+    Blue: 1,
+    Yellow: 2,
+    Green: 3,
+    Black: 0,
+    Magic: 1,
+    Nebula: 2,
+    Ghost: 3,
+};
+export function DeckSprite({ deck, width = 71, height, style }) {
+    const baseDeck = deck.replace(" Deck", "");
+    const y = DECK_ROWS[baseDeck] ?? 0;
+    const x = 12;
+    const h = height ?? (width * 95 / 71);
+    const bgW = width * 13;
+    const bgH = h * 4;
+    return (_jsx("div", { style: {
+            width, height: h, flexShrink: 0,
+            backgroundImage: `url(${resolveJamlAssetUrl('deck')})`,
+            backgroundSize: `${bgW}px ${bgH}px`,
+            backgroundPosition: `-${x * width}px -${y * h}px`,
+            backgroundRepeat: 'no-repeat',
+            imageRendering: 'pixelated',
+            ...style,
+        } }));
+}

package/dist/ui.d.ts

@@ -2,6 +2,9 @@ export * from './ui/tokens.js';
 export * from './ui/jimboText.js';
 export * from './ui/panel.js';
 export * from './ui/jimboTabs.js';
+export * from './ui/JimboFloating.js';
+export * from './ui/JimboToggleList.js';
+export * from './ui/JimboBadge.js';
 export * from './ui/jimboFlankNav.js';
 export * from './ui/jimboFilterBar.js';
 export * from './ui/jimboBackground.js';

package/dist/ui.js

@@ -2,6 +2,9 @@ export * from './ui/tokens.js';
 export * from './ui/jimboText.js';
 export * from './ui/panel.js';
 export * from './ui/jimboTabs.js';
+export * from './ui/JimboFloating.js';
+export * from './ui/JimboToggleList.js';
+export * from './ui/JimboBadge.js';
 export * from './ui/jimboFlankNav.js';
 export * from './ui/jimboFilterBar.js';
 export * from './ui/jimboBackground.js';

package/package.json

@@ -1,122 +1,129 @@
-{
-  "name": "jaml-ui",
-  "version": "0.14.4",
-  "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./core": {
-      "types": "./dist/core.d.ts",
-      "import": "./dist/core.js"
-    },
-    "./motely": {
-      "types": "./dist/motely.d.ts",
-      "import": "./dist/motely.js"
-    },
-    "./ui": {
-      "types": "./dist/ui.d.ts",
-      "import": "./dist/ui.js"
-    },
-    "./r3f": {
-      "types": "./dist/r3f.d.ts",
-      "import": "./dist/r3f.js"
-    },
-    "./fonts.css": "./fonts.css",
-    "./package.json": "./package.json"
-  },
-  "sideEffects": [
-    "./fonts.css"
-  ],
-  "files": [
-    "dist",
-    "assets/*.png",
-    "assets/fonts",
-    "fonts.css",
-    "README.md",
-    "DESIGN.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "tsc --pretty false",
-    "dev": "tsc --watch",
-    "demo": "vite --config demo/vite.config.ts",
-    "typecheck": "tsc --noEmit --pretty false",
-    "prepack": "npm run build"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/OptimusPi/jaml-ui"
-  },
-  "homepage": "https://github.com/OptimusPi/jaml-ui#readme",
-  "bugs": {
-    "url": "https://github.com/OptimusPi/jaml-ui/issues"
-  },
-  "keywords": [
-    "balatro",
-    "jaml",
-    "motely",
-    "seed",
-    "card",
-    "sprite",
-    "ui"
-  ],
-  "author": "pifreak",
-  "license": "MIT",
-  "peerDependencies": {
-    "@monaco-editor/react": ">=4.0.0",
-    "@react-spring/three": ">=9.0.0",
-    "@react-three/fiber": ">=8.0.0",
-    "monaco-editor": ">=0.50.0",
-    "motely-wasm": "^10.2.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0",
-    "react-icons": ">=5.0.0",
-    "three": ">=0.150.0"
-  },
-  "peerDependenciesMeta": {
-    "@react-spring/three": {
-      "optional": true
-    },
-    "@react-three/fiber": {
-      "optional": true
-    },
-    "motely-wasm": {
-      "optional": true
-    },
-    "react-icons": {
-      "optional": true
-    },
-    "three": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@monaco-editor/react": "^4.7.0",
-    "@react-spring/three": "^10.0.3",
-    "@react-three/fiber": "^9.6.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@types/three": "^0.184.0",
-    "@vitejs/plugin-react": "^5.0.4",
-    "monaco-editor": "^0.55.1",
-    "motely-wasm": "^14.0.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-icons": "^5.6.0",
-    "three": "^0.184.0",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.9",
-    "@google/design.md": "^0.1.1"
-  }
-}
+{
+  "name": "jaml-ui",
+  "version": "0.16.0",
+  "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js"
+    },
+    "./motely": {
+      "types": "./dist/motely.d.ts",
+      "import": "./dist/motely.js"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./r3f": {
+      "types": "./dist/r3f.d.ts",
+      "import": "./dist/r3f.js"
+    },
+    "./fonts.css": "./fonts.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./fonts.css"
+  ],
+  "files": [
+    "dist",
+    "assets/*.png",
+    "assets/fonts",
+    "fonts.css",
+    "README.md",
+    "DESIGN.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc --pretty false",
+    "dev": "tsc --watch",
+    "demo": "vite --config demo/vite.config.ts",
+    "typecheck": "tsc --noEmit --pretty false",
+    "prepack": "npm run build"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OptimusPi/jaml-ui"
+  },
+  "homepage": "https://github.com/OptimusPi/jaml-ui#readme",
+  "bugs": {
+    "url": "https://github.com/OptimusPi/jaml-ui/issues"
+  },
+  "keywords": [
+    "balatro",
+    "jaml",
+    "motely",
+    "seed",
+    "card",
+    "sprite",
+    "ui"
+  ],
+  "author": "pifreak",
+  "license": "MIT",
+  "peerDependencies": {
+    "@monaco-editor/react": ">=4.0.0",
+    "@react-spring/three": ">=9.0.0",
+    "@react-three/fiber": ">=8.0.0",
+    "monaco-editor": ">=0.50.0",
+    "motely-wasm": "^10.2.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-icons": ">=5.0.0",
+    "three": ">=0.150.0",
+    "@react-three/drei": ">=9.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-spring/three": {
+      "optional": true
+    },
+    "@react-three/fiber": {
+      "optional": true
+    },
+    "motely-wasm": {
+      "optional": true
+    },
+    "react-icons": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
+    },
+    "@react-three/drei": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@google/design.md": "^0.1.1",
+    "@monaco-editor/react": "^4.7.0",
+    "@react-spring/three": "^10.0.3",
+    "@react-three/fiber": "^9.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.184.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "monaco-editor": "^0.55.1",
+    "motely-wasm": "^14.0.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-icons": "^5.6.0",
+    "three": "^0.184.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.9"
+  },
+  "dependencies": {
+    "@react-three/drei": "^10.7.7"
+  }
+}