jaml-ui 0.14.3 → 0.16.0

package/DESIGN.md

@@ -0,0 +1,197 @@
+---
+name: Jimbo
+description: Balatro-inspired design system for JAML seed finder tools. Eyedropped from actual game shader output — not Lua hex values.
+colors:
+  red: "#ff4c40"
+  blue: "#0093ff"
+  green: "#429f79"
+  orange: "#ff9800"
+  gold: "#e4b643"
+  purple: "#9e74ce"
+  dark-red: "#a02721"
+  dark-blue: "#0057a1"
+  dark-orange: "#a05b00"
+  dark-green: "#215f46"
+  dark-purple: "#5e437e"
+  dark-grey: "#3a5055"
+  darkest: "#1e2b2d"
+  grey: "#708386"
+  teal-grey: "#404c4e"
+  panel-edge: "#1e2e32"
+  inner-border: "#334461"
+  border-silver: "#b9c2d2"
+  border-south: "#777e89"
+  gold-text: "#e4b643"
+  green-text: "#35bd86"
+  orange-text: "#ff8f00"
+  white: "#ffffff"
+  black: "#000000"
+  tarot-button: "#9e74ce"
+  planet-button: "#00a7ca"
+  spectral-button: "#2e76fd"
+typography:
+  display:
+    fontFamily: m6x11plus, monospace
+    fontSize: 26px
+    fontWeight: 400
+    lineHeight: 1
+    letterSpacing: 0.04em
+  heading:
+    fontFamily: m6x11plus, monospace
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.2
+    letterSpacing: 0.08em
+  body:
+    fontFamily: m6x11plus, monospace
+    fontSize: 11px
+    fontWeight: 400
+    lineHeight: 1.3
+    letterSpacing: 0.05em
+  label:
+    fontFamily: m6x11plus, monospace
+    fontSize: 9px
+    fontWeight: 400
+    lineHeight: 1
+    letterSpacing: 0.1em
+  micro:
+    fontFamily: m6x11plus, monospace
+    fontSize: 8px
+    fontWeight: 400
+    lineHeight: 1
+    letterSpacing: 0.08em
+rounded:
+  sm: 4px
+  md: 6px
+  lg: 8px
+  pill: 10px
+spacing:
+  xs: 2px
+  sm: 4px
+  md: 8px
+  lg: 12px
+  xl: 16px
+components:
+  panel:
+    backgroundColor: "{colors.dark-grey}"
+    rounded: "{rounded.md}"
+  panel-edge:
+    backgroundColor: "{colors.panel-edge}"
+  panel-darkest:
+    backgroundColor: "{colors.darkest}"
+    rounded: "{rounded.md}"
+  button-primary:
+    backgroundColor: "{colors.red}"
+    textColor: "{colors.white}"
+    rounded: "{rounded.md}"
+    padding: 8px
+  button-primary-hover:
+    backgroundColor: "{colors.dark-red}"
+  button-secondary:
+    backgroundColor: "{colors.blue}"
+    textColor: "{colors.white}"
+    rounded: "{rounded.md}"
+    padding: 8px
+  button-secondary-hover:
+    backgroundColor: "{colors.dark-blue}"
+  button-back:
+    backgroundColor: "{colors.orange}"
+    textColor: "{colors.white}"
+    rounded: "{rounded.md}"
+    padding: 8px
+  button-back-hover:
+    backgroundColor: "{colors.dark-orange}"
+  tab-active:
+    backgroundColor: "{colors.gold}"
+    textColor: "{colors.black}"
+    rounded: "{rounded.sm}"
+  tab-inactive:
+    backgroundColor: "transparent"
+    textColor: "{colors.grey}"
+  score-must:
+    backgroundColor: "{colors.blue}"
+    textColor: "{colors.white}"
+  score-should:
+    backgroundColor: "{colors.red}"
+    textColor: "{colors.white}"
+  glow-must:
+    backgroundColor: "{colors.gold}"
+  glow-should:
+    backgroundColor: "{colors.green-text}"
+---
+
+## Overview
+
+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 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
+
+All colors are eyedropped from Balatro's actual rendered shader output. Do NOT substitute with Lua source hex values — the game's shader pipeline transforms them.
+
+- **Red (#ff4c40):** Primary action, mult scoring, should-clause hits. The "play" color.
+- **Blue (#0093ff):** Secondary action, chips scoring, must-clause gates. The "requirement" color.
+- **Green (#429f79):** Success, positive state, money.
+- **Orange (#ff9800):** Back/return actions, warning.
+- **Gold (#e4b643):** Seed text, premium highlights, active tab. The "treasure" color.
+- **Purple (#9e74ce):** Joker rarity, tarot cards.
+- **Dark Grey (#3a5055):** Panel backgrounds — the primary surface.
+- **Darkest (#1e2b2d):** Deepest background, inset areas.
+- **Grey (#708386):** Disabled text, labels, inactive elements.
+- **Border Silver (#b9c2d2):** Panel top/side borders — the "silver frame."
+- **Border South (#777e89):** Panel bottom border — creates the 3D depth illusion.
+- **Panel Edge (#1e2e32):** Thin outer edge on panels.
+
+Must-clause items glow blue. Should-clause items glow gold/green. Non-matching items render at 40-60% opacity with slight grayscale.
+
+## Typography
+
+m6x11plus (m6x11plusplus.otf) is the ONLY font. It is a single-weight pixel font. NEVER apply font-weight bold, semibold, or any weight other than 400. Bold makes it look muddy. Use size and letter-spacing for hierarchy instead.
+
+All text is uppercase with generous letter-spacing (0.04em-0.1em) for labels and micro text. Seed codes use the display size (26px) in gold (#e4b643) with 0.04em tracking.
+
+## Layout
+
+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`.
+
+## Elevation & Depth
+
+Buttons have a colored "underside" via box-shadow (not blur). On press, translateY increases by 2-3px and the shadow collapses — the button physically sinks. On hover, translateY decreases by 2px (lifts) with a tiny brightness bump.
+
+Panels sit on a dark south-shadow (`0 3px 0 rgba(0,0,0,0.55)`). Translucent panels (for swirl-background contexts) use `rgba(15, 24, 26, 0.78)` with `backdrop-filter: blur(2px)`.
+
+JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]` with a 1.6s pulse animation. Must = blue glow, should = gold/green glow.
+
+## Components
+
+**Button:** Chunky 3D press. Colored underside via box-shadow. Hover lifts -2px + brightness. Press sinks +2-3px + shadow collapse. Variants: primary (red), secondary (blue), back (orange), ghost (transparent). Sizes via padding, not font-size. Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)`.
+
+**Panel:** Dark grey (#3a5055) background, 2px solid border (silver top/sides, south bottom), border-radius 6px. Inner highlight: `inset 0 0 0 1px rgba(255,255,255,0.04)`. Drop: `0 2px 0 #000`.
+
+**Tabs (JimboTabs):** Active tab = gold background + black text. Inactive = transparent + grey text. No bold. Small radius (4px). Tabs are the ONLY navigation — no hamburger menus, no sidebars on mobile.
+
+**ScoreCol:** Must-clauses show as blue-framed boxes with checkmark/cross badge. Should-clauses show as bare sprites with a red corner count badge (x2, x3...). Unlit = 40% opacity + grayscale.
+
+**ShopTape:** Horizontal grab-scrollable strip of item sprites. Edge fades (linear-gradient masks) on left/right. Hidden scrollbar. Cursor: grab/grabbing.
+
+**PackCell:** Tap to fan — cards explode out with springy stagger (40ms delay, juice easing). Tap again to collapse. Closed state = single pack sprite with type label.
+
+**GlowRing:** Pulsing outline around JAML-hit items. `0 0 0 2px [color], 0 0 10px [color]`. Animation: opacity 0.55 → 1.0 over 1.6s ease-in-out infinite.
+
+**SeedPagerHeader:** Three columns: [left stride arrow] [identity panel with seed + copy + deck/stake] [right stride arrow]. Stride arrows are tall red bars with dark-red inset shadow. Identity panel is translucent with counter pip.
+
+## Do's and Don'ts
+
+- DO use m6x11plus for everything. No fallback display fonts.
+- DO eyedrop colors from the game. Never guess or approximate.
+- 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.
+- DON'T use fat padding or margins. Balatro UI is dense and cozy.
+- DON'T add horizontal scroll. Vertical snap-scroll + horizontal swipe only.
+- DON'T use rounded corners larger than 10px. Balatro is chunky, not bubbly.
+- DON'T use blur-based shadows for depth. Use solid colored box-shadows.

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;