jaml-ui 0.16.0 → 0.17.1

package/dist/motelyDisplay.js

@@ -1,189 +1,50 @@
 import { Motely } from "motely-wasm";
-import { getItemDisplayName } from "./utils/itemUtils.js";
-const BOSS_ENTRIES = [
-    { key: "AmberAcorn", label: "Amber Acorn" },
-    { key: "CeruleanBell", label: "Cerulean Bell" },
-    { key: "CrimsonHeart", label: "Crimson Heart" },
-    { key: "VerdantLeaf", label: "Verdant Leaf" },
-    { key: "VioletVessel", label: "Violet Vessel" },
-    { key: "TheArm", label: "The Arm" },
-    { key: "TheClub", label: "The Club" },
-    { key: "TheEye", label: "The Eye" },
-    { key: "TheFish", label: "The Fish" },
-    { key: "TheFlint", label: "The Flint" },
-    { key: "TheGoad", label: "The Goad" },
-    { key: "TheHead", label: "The Head" },
-    { key: "TheHook", label: "The Hook" },
-    { key: "TheHouse", label: "The House" },
-    { key: "TheManacle", label: "The Manacle" },
-    { key: "TheMark", label: "The Mark" },
-    { key: "TheMouth", label: "The Mouth" },
-    { key: "TheNeedle", label: "The Needle" },
-    { key: "TheOx", label: "The Ox" },
-    { key: "ThePillar", label: "The Pillar" },
-    { key: "ThePlant", label: "The Plant" },
-    { key: "ThePsychic", label: "The Psychic" },
-    { key: "TheSerpent", label: "The Serpent" },
-    { key: "TheTooth", label: "The Tooth" },
-    { key: "TheWall", label: "The Wall" },
-    { key: "TheWater", label: "The Water" },
-    { key: "TheWheel", label: "The Wheel" },
-    { key: "TheWindow", label: "The Window" },
-];
-const VOUCHER_ENTRIES = [
-    { key: "Overstock", label: "Overstock" },
-    { key: "OverstockPlus", label: "Overstock Plus" },
-    { key: "ClearanceSale", label: "Clearance Sale" },
-    { key: "Liquidation", label: "Liquidation" },
-    { key: "Hone", label: "Hone" },
-    { key: "GlowUp", label: "Glow Up" },
-    { key: "RerollSurplus", label: "Reroll Surplus" },
-    { key: "RerollGlut", label: "Reroll Glut" },
-    { key: "CrystalBall", label: "Crystal Ball" },
-    { key: "OmenGlobe", label: "Omen Globe" },
-    { key: "Telescope", label: "Telescope" },
-    { key: "Observatory", label: "Observatory" },
-    { key: "Grabber", label: "Grabber" },
-    { key: "NachoTong", label: "Nacho Tong" },
-    { key: "Wasteful", label: "Wasteful" },
-    { key: "Recyclomancy", label: "Recyclomancy" },
-    { key: "TarotMerchant", label: "Tarot Merchant" },
-    { key: "TarotTycoon", label: "Tarot Tycoon" },
-    { key: "PlanetMerchant", label: "Planet Merchant" },
-    { key: "PlanetTycoon", label: "Planet Tycoon" },
-    { key: "SeedMoney", label: "Seed Money" },
-    { key: "MoneyTree", label: "Money Tree" },
-    { key: "Blank", label: "Blank" },
-    { key: "Antimatter", label: "Antimatter" },
-    { key: "MagicTrick", label: "Magic Trick" },
-    { key: "Illusion", label: "Illusion" },
-    { key: "Hieroglyph", label: "Hieroglyph" },
-    { key: "Petroglyph", label: "Petroglyph" },
-    { key: "DirectorsCut", label: "Director's Cut" },
-    { key: "Retcon", label: "Retcon" },
-    { key: "PaintBrush", label: "Paint Brush" },
-    { key: "Palette", label: "Palette" },
-];
-const TAG_ENTRIES = [
-    { key: "UncommonTag", label: "Uncommon Tag" },
-    { key: "RareTag", label: "Rare Tag" },
-    { key: "NegativeTag", label: "Negative Tag" },
-    { key: "FoilTag", label: "Foil Tag" },
-    { key: "HolographicTag", label: "Holographic Tag" },
-    { key: "PolychromeTag", label: "Polychrome Tag" },
-    { key: "InvestmentTag", label: "Investment Tag" },
-    { key: "VoucherTag", label: "Voucher Tag" },
-    { key: "BossTag", label: "Boss Tag" },
-    { key: "StandardTag", label: "Standard Tag" },
-    { key: "CharmTag", label: "Charm Tag" },
-    { key: "MeteorTag", label: "Meteor Tag" },
-    { key: "BuffoonTag", label: "Buffoon Tag" },
-    { key: "HandyTag", label: "Handy Tag" },
-    { key: "GarbageTag", label: "Garbage Tag" },
-    { key: "EtherealTag", label: "Ethereal Tag" },
-    { key: "CouponTag", label: "Coupon Tag" },
-    { key: "DoubleTag", label: "Double Tag" },
-    { key: "JuggleTag", label: "Juggle Tag" },
-    { key: "D6Tag", label: "D6 Tag" },
-    { key: "TopupTag", label: "Top-up Tag" },
-    { key: "SpeedTag", label: "Speed Tag" },
-    { key: "OrbitalTag", label: "Orbital Tag" },
-    { key: "EconomyTag", label: "Economy Tag" },
-];
-const BOOSTER_PACK_ENTRIES = [
-    { key: "Arcana", label: "Arcana Pack" },
-    { key: "JumboArcana", label: "Jumbo Arcana Pack" },
-    { key: "MegaArcana", label: "Mega Arcana Pack" },
-    { key: "Celestial", label: "Celestial Pack" },
-    { key: "JumboCelestial", label: "Jumbo Celestial Pack" },
-    { key: "MegaCelestial", label: "Mega Celestial Pack" },
-    { key: "Standard", label: "Standard Pack" },
-    { key: "JumboStandard", label: "Jumbo Standard Pack" },
-    { key: "MegaStandard", label: "Mega Standard Pack" },
-    { key: "Buffoon", label: "Buffoon Pack" },
-    { key: "JumboBuffoon", label: "Jumbo Buffoon Pack" },
-    { key: "MegaBuffoon", label: "Mega Buffoon Pack" },
-    { key: "Spectral", label: "Spectral Pack" },
-    { key: "JumboSpectral", label: "Jumbo Spectral Pack" },
-    { key: "MegaSpectral", label: "Mega Spectral Pack" },
-];
-const BOSS_VALUE_MASK = 0xff;
-const ITEM_VALUE_MASK = 0xffff;
-export const MOTELY_DISPLAY_SCHEMA = {
-    bosses: BOSS_ENTRIES,
-    vouchers: VOUCHER_ENTRIES,
-    tags: TAG_ENTRIES,
-    boosterPacks: BOOSTER_PACK_ENTRIES,
-};
-function createLabelLookup(entries) {
-    return {
-        keyToLabel: new Map(entries.map((entry) => [entry.key, entry.label])),
-        labelToKey: new Map(entries.map((entry) => [entry.label, entry.key])),
-    };
-}
-const bossLookup = createLabelLookup(BOSS_ENTRIES);
-const voucherLookup = createLabelLookup(VOUCHER_ENTRIES);
-const tagLookup = createLabelLookup(TAG_ENTRIES);
-const boosterPackLookup = createLabelLookup(BOOSTER_PACK_ENTRIES);
+/**
+ * Display-name utilities — thin wrappers over motely-wasm runtime enums.
+ * No hand-maintained lookup tables. The enum IS the source of truth.
+ */
 function spaceSplit(value) {
     return value.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2");
 }
-function displayNameFromKey(lookup, key, fallback) {
-    return lookup.keyToLabel.get(key) ?? fallback;
-}
-function keyFromDisplayName(lookup, label) {
-    return lookup.labelToKey.get(label) ?? null;
-}
 function runtimeEnumKey(enumObject, value) {
     if (!enumObject || typeof enumObject !== "object")
         return null;
     const key = enumObject[String(value)];
     return typeof key === "string" && key.length > 0 ? key : null;
 }
-export function motelyBossDisplayNameFromKey(key) {
-    return displayNameFromKey(bossLookup, key, spaceSplit(key));
-}
-export function motelyVoucherDisplayNameFromKey(key) {
-    return displayNameFromKey(voucherLookup, key, spaceSplit(key));
-}
-export function motelyTagDisplayNameFromKey(key) {
-    return displayNameFromKey(tagLookup, key, spaceSplit(key));
-}
-export function motelyBoosterPackDisplayNameFromKey(key) {
-    return displayNameFromKey(boosterPackLookup, key, `${spaceSplit(key)} Pack`);
-}
-export function motelyItemDisplayNameFromKey(key) {
-    return getItemDisplayName(key);
-}
+// ─── Public API (same signatures as before, zero hand-rolled tables) ────────
 export function motelyBossDisplayName(value) {
-    const key = runtimeEnumKey(Motely.MotelyBossBlind, value & BOSS_VALUE_MASK);
-    return key === null ? `boss#${value}` : motelyBossDisplayNameFromKey(key);
+    const key = runtimeEnumKey(Motely.MotelyBossBlind, value & 0xff);
+    return key === null ? `boss#${value}` : spaceSplit(key);
+}
+export function motelyBossDisplayNameFromKey(key) {
+    return spaceSplit(key);
 }
 export function motelyVoucherDisplayName(value) {
     const key = runtimeEnumKey(Motely.MotelyVoucher, value);
-    return key === null ? `voucher#${value}` : motelyVoucherDisplayNameFromKey(key);
+    return key === null ? `voucher#${value}` : spaceSplit(key);
+}
+export function motelyVoucherDisplayNameFromKey(key) {
+    return spaceSplit(key);
 }
 export function motelyTagDisplayName(value) {
     const key = runtimeEnumKey(Motely.MotelyTag, value);
-    return key === null ? `tag#${value}` : motelyTagDisplayNameFromKey(key);
+    return key === null ? `tag#${value}` : spaceSplit(key);
+}
+export function motelyTagDisplayNameFromKey(key) {
+    return spaceSplit(key);
 }
 export function motelyBoosterPackDisplayName(value) {
     const key = runtimeEnumKey(Motely.MotelyBoosterPack, value);
-    return key === null ? `pack#${value}` : motelyBoosterPackDisplayNameFromKey(key);
+    return key === null ? `pack#${value}` : spaceSplit(key);
 }
-export function motelyItemDisplayNameFromValue(value) {
-    const key = runtimeEnumKey(Motely.MotelyItemType, value & ITEM_VALUE_MASK);
-    return key === null ? `item#${value}` : motelyItemDisplayNameFromKey(key);
-}
-export function motelyBossKeyFromDisplayName(label) {
-    return keyFromDisplayName(bossLookup, label);
-}
-export function motelyVoucherKeyFromDisplayName(label) {
-    return keyFromDisplayName(voucherLookup, label);
+export function motelyBoosterPackDisplayNameFromKey(key) {
+    return `${spaceSplit(key)} Pack`;
 }
-export function motelyTagKeyFromDisplayName(label) {
-    return keyFromDisplayName(tagLookup, label);
+export function motelyItemDisplayNameFromKey(key) {
+    return spaceSplit(key);
 }
-export function motelyBoosterPackKeyFromDisplayName(label) {
-    return keyFromDisplayName(boosterPackLookup, label);
+export function motelyItemDisplayNameFromValue(value) {
+    const key = runtimeEnumKey(Motely.MotelyItemType, value & 0xffff);
+    return key === null ? `item#${value}` : spaceSplit(key);
 }

package/dist/r3f/Card3D.d.ts

@@ -1,4 +1,4 @@
-import type { SpriteData } from '../sprites/spriteMapper.js';
+import type { MotelySpriteData } from '../decode/motelySprite.js';
 export declare const CARD_DIMENSIONS: {
     readonly WIDTH: 0.7;
     readonly HEIGHT: 0.95;
@@ -13,7 +13,7 @@ export declare const CARD_MAGNET: {
     readonly LERP_OUT: 10;
 };
 export interface Card3DProps {
-    sprite: SpriteData;
+    sprite: MotelySpriteData;
     position?: [number, number, number];
     rotation?: [number, number, number];
     selected?: boolean;

package/dist/r3f/Card3D.js

@@ -1,10 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useMemo, useState, useEffect, memo } from 'react';
-import { useFrame } from '@react-three/fiber';
+import { useRef, useMemo, useState, memo } from 'react';
+import { useFrame, useLoader } from '@react-three/fiber';
 import { useSpring, animated } from '@react-spring/three';
 import * as THREE from 'three';
-import { SPRITE_SHEETS } from '../sprites/spriteData.js';
 export const CARD_DIMENSIONS = { WIDTH: 0.7, HEIGHT: 0.95, DEPTH: 0.02 };
 export const CARD_MAGNET = {
     MAX_TILT_X: 0.36,
@@ -14,52 +13,18 @@ export const CARD_MAGNET = {
     LERP_IN: 18,
     LERP_OUT: 10,
 };
-const SHEET_KEY_MAP = {
-    Jokers: 'jokers',
-    Tarots: 'tarots',
-    Vouchers: 'vouchers',
-    Boosters: 'boosters',
-    Enhancers: 'enhancers',
-    Editions: 'editions',
-    BlindChips: 'blinds',
-    tags: 'tags',
-    Stakes: 'stakes',
-    Decks: 'deck',
-};
-const _textureCache = new Map();
 function useSpriteTexture(sprite) {
-    const [texture, setTexture] = useState(null);
-    const serial = useRef(0);
-    useEffect(() => {
-        const id = ++serial.current;
-        const sheet = SPRITE_SHEETS[SHEET_KEY_MAP[sprite.type]];
-        const url = sheet.src;
-        const cols = sheet.columns;
-        const rows = sheet.rows;
-        const { x, y } = sprite.pos;
-        const applySlice = (base) => {
-            const t = base.clone();
-            t.repeat.set(1 / cols, 1 / rows);
-            t.offset.set(x / cols, (rows - y - 1) / rows);
-            t.needsUpdate = true;
-            return t;
-        };
-        if (_textureCache.has(url)) {
-            setTexture(applySlice(_textureCache.get(url)));
-            return;
-        }
-        const loader = new THREE.TextureLoader();
-        loader.load(url, (loaded) => {
-            if (id !== serial.current)
-                return;
-            loaded.colorSpace = THREE.SRGBColorSpace;
-            loaded.magFilter = THREE.NearestFilter;
-            loaded.minFilter = THREE.NearestFilter;
-            _textureCache.set(url, loaded);
-            setTexture(applySlice(loaded));
-        }, undefined, (err) => console.error('[Card3D] texture load failed:', url, err));
-    }, [sprite.type, sprite.pos.x, sprite.pos.y]);
-    return texture;
+    const texture = useLoader(THREE.TextureLoader, sprite.atlasPath);
+    return useMemo(() => {
+        const t = texture.clone();
+        t.colorSpace = THREE.SRGBColorSpace;
+        t.magFilter = THREE.NearestFilter;
+        t.minFilter = THREE.NearestFilter;
+        t.repeat.set(1 / sprite.gridCols, 1 / sprite.gridRows);
+        t.offset.set(sprite.gridCol / sprite.gridCols, 1 - ((sprite.gridRow + 1) / sprite.gridRows));
+        t.needsUpdate = true;
+        return t;
+    }, [texture, sprite.gridCol, sprite.gridRow, sprite.gridCols, sprite.gridRows]);
 }
 export const Card3D = memo(function Card3D({ sprite, position = [0, 0, 0], rotation = [0, 0, 0], selected = false, highlighted = false, onClick, onPointerEnter, onPointerLeave, }) {
     const tiltRef = useRef(null);

package/dist/r3f/JimboText3D.js

@@ -1,7 +1,8 @@
 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 }) {
+import { JimboColorOption } from '../ui/tokens.js';
+export function JimboText3D({ children, color = JimboColorOption.WHITE, outlineColor = JimboColorOption.BLACK, 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 }));
+    return (_jsx(Text, { position: position, fontSize: fontSize, color: color, outlineColor: outlineColor, outlineWidth: outlineWidth, font: resolveJamlAssetUrl('font'), anchorX: "center", anchorY: "middle", children: children }));
 }

package/dist/render/CanvasRenderer.js

@@ -1,175 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { SPRITE_SHEETS } from "../sprites/spriteData.js";
-function loadImage(url) {
-    return new Promise((resolve) => {
-        const image = new window.Image();
-        image.addEventListener("load", () => {
-            resolve(image);
-        });
-        image.addEventListener("error", () => {
-            resolve(null);
-        });
-        image.src = url;
-    });
-}
-function renderImage(canvas, context, image, layer, timestamp) {
-    if (!image || !layer || !layer?.pos)
-        return 0;
-    const cardWidth = image.width / layer.columns;
-    const cardHeight = image.height / layer.rows;
-    const canvasStyle = canvas.style;
-    if (layer.order === 0) {
-        canvas.width = cardWidth;
-        canvas.height = cardHeight;
-        canvasStyle.width = `${cardWidth}px`;
-        canvasStyle.height = `${cardHeight}px`;
-    }
-    canvasStyle.imageRendering = "pixelated";
-    context.imageSmoothingEnabled = true;
-    context.save();
-    if (layer.animated && timestamp) {
-        const elapsed = timestamp;
-        const yOffset = Math.sin(elapsed / 1000) * 3;
-        const xOffset = Math.sin(elapsed / 1500) * 1.5;
-        context.globalAlpha = 0.65 + (Math.sin(elapsed / 2000) + 1) * 0.075;
-        context.translate(xOffset, yOffset);
-    }
-    context.drawImage(image, layer.pos.x * cardWidth, layer.pos.y * cardHeight, cardWidth, cardHeight, 0, 0, canvas.width, canvas.height);
-    context.restore();
-    return cardWidth / cardHeight;
-}
+import { useJamlCardRenderer } from "../ui/hooks.js";
 export function JamlCardRenderer({ layers, invert = false, className = "", hoverTilt = false }) {
-    const canvasRef = useRef(null);
-    const imageCacheRef = useRef(new Map());
-    const [ratio, setRatio] = useState(3 / 4);
-    const [, forceUpdate] = useState(0);
-    const animationFrameRef = useRef(null);
-    const [elapsed, setElapsed] = useState(0);
-    const [isHovered, setIsHovered] = useState(false);
-    const [transform, setTransform] = useState("none");
-    const hasAnimatedLayer = layers?.some((layer) => layer.animated);
-    useEffect(() => {
-        let cancelled = false;
-        const imageCache = imageCacheRef.current;
-        const preload = async () => {
-            const urls = Array.from(new Set(Object.values(SPRITE_SHEETS).map((sheet) => sheet.src)));
-            const images = await Promise.all(urls.map((url) => loadImage(url)));
-            if (cancelled)
-                return;
-            images.forEach((image, index) => {
-                if (image) {
-                    imageCache.set(urls[index], image);
-                }
-            });
-            forceUpdate((prev) => prev + 1);
-        };
-        preload().catch((err) => {
-            console.error("[JamlCardRenderer]", err);
-        });
-        return () => {
-            cancelled = true;
-            imageCache.clear();
-        };
-    }, []);
-    useEffect(() => {
-        if (!hasAnimatedLayer)
-            return;
-        let startTime;
-        const animate = (timestamp) => {
-            if (!startTime)
-                startTime = timestamp;
-            const now = timestamp - startTime;
-            if (!animationFrameRef.current || timestamp - 100 > animationFrameRef.current) {
-                animationFrameRef.current = timestamp;
-                setElapsed(now);
-            }
-            animationFrameRef.current = requestAnimationFrame(animate);
-        };
-        animationFrameRef.current = requestAnimationFrame(animate);
-        return () => {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-        };
-    }, [hasAnimatedLayer]);
-    useEffect(() => {
-        if (!canvasRef.current || !layers || layers.length === 0)
-            return;
-        const canvas = canvasRef.current;
-        const context = canvas.getContext("2d");
-        if (!context)
-            return;
-        let cancelled = false;
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        [...layers]
-            .sort((a, b) => a.order - b.order)
-            .forEach((layer) => {
-            if (imageCacheRef.current.has(layer.source)) {
-                const image = imageCacheRef.current.get(layer.source);
-                if (!image)
-                    return;
-                const imageRatio = renderImage(canvas, context, image, layer, hasAnimatedLayer ? elapsed : undefined);
-                if (layer.order === 0) {
-                    setRatio(imageRatio);
-                }
-                return;
-            }
-            loadImage(layer.source).then((img) => {
-                if (cancelled || !img)
-                    return;
-                const imageRatio = renderImage(canvas, context, img, layer, hasAnimatedLayer ? elapsed : undefined);
-                imageCacheRef.current.set(layer.source, img);
-                if (layer.order === 0) {
-                    setRatio(imageRatio);
-                }
-                forceUpdate((prev) => prev + 1);
-            });
-        });
-        if (invert) {
-            canvas.style.filter = "invert(0.94)";
-        }
-        else {
-            canvas.style.filter = "none";
-        }
-        return () => { cancelled = true; };
-    }, [layers, elapsed, invert, hasAnimatedLayer]);
-    const handlePointerEnter = (event) => {
-        if (!hoverTilt || event.pointerType === "touch")
-            return;
-        setIsHovered(true);
-    };
-    const handlePointerLeave = () => {
-        if (!hoverTilt)
-            return;
-        setIsHovered(false);
-        setTransform("none");
-    };
-    const handlePointerMove = (event) => {
-        if (!hoverTilt || event.pointerType === "touch")
-            return;
-        const rect = event.currentTarget.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-        const rotateY = (x / rect.width) * 12 - 6;
-        const rotateX = (y / rect.height) * -16 + 8;
-        setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`);
-    };
-    const containerStyle = {
-        aspectRatio: String(ratio),
-        width: "100%",
-        display: "flex",
-        transition: hoverTilt && !isHovered ? "transform 0.4s ease" : undefined,
-        transform: hoverTilt ? (isHovered ? transform : "none") : undefined,
-        transformStyle: hoverTilt ? "preserve-3d" : undefined,
-        transformOrigin: hoverTilt ? "center center" : undefined,
-    };
-    const canvasStyle = {
-        borderRadius: "6px",
-        boxShadow: hoverTilt && isHovered ? "0 2px 12px rgba(0,0,0,0.3)" : "0 2px 8px rgba(0,0,0,0.2)",
-        imageRendering: "pixelated",
-        transition: hoverTilt && !isHovered ? "box-shadow 0.4s ease-out" : undefined,
-    };
-    return (_jsx("div", { className: className, style: containerStyle, onPointerEnter: hoverTilt ? handlePointerEnter : undefined, onPointerLeave: hoverTilt ? handlePointerLeave : undefined, onPointerMove: hoverTilt ? handlePointerMove : undefined, children: _jsx("canvas", { ref: canvasRef, style: canvasStyle }) }));
+    const { canvasRef, containerStyle, canvasStyle, handlers } = useJamlCardRenderer({
+        layers,
+        invert,
+        hoverTilt
+    });
+    return (_jsx("div", { className: className, style: containerStyle, ...handlers, children: _jsx("canvas", { ref: canvasRef, style: canvasStyle }) }));
 }

package/dist/sprites/spriteMapper.d.ts

@@ -13,5 +13,76 @@ export interface SpriteData {
     pos: SpritePos;
     type: SpriteSheetType;
 }
+/**
+ * Per-sheet mystery/back card positions for unknown items.
+ * Used as fallback when an item name can't be resolved.
+ */
+export declare const MYSTERY_SPRITES: Partial<Record<SpriteSheetType, SpritePos>>;
+/** Get the mystery/fallback sprite for a given sheet type. */
+export declare function getMysterySprite(sheet: SpriteSheetType): SpriteData;
 /** Look up sprite data by name. Accepts display names ("Icy Joker"), enum keys ("IcyJoker"), and "Joker | Name" prefixed forms. */
 export declare function getSpriteData(name: string): SpriteData | null;
+/**
+ * Wildcard "Any" sprites from the Enhancers sheet.
+ * Used in the JAML visual editor when a clause value is "Any" (e.g. `legendaryJoker: Any`).
+ */
+export declare const WILDCARD_SPRITES: {
+    /** Grey silhouette — Enhancers row 3 col 5. For generic "Any" items. */
+    readonly anySilhouette: {
+        readonly pos: {
+            readonly x: 5;
+            readonly y: 3;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** Grey ? circle — Enhancers row 3 col 6. For "boss: Any" etc. */
+    readonly anyMystery: {
+        readonly pos: {
+            readonly x: 6;
+            readonly y: 3;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** Red X debuff — Editions row 0 col 4. For mustNot zone indicator. */
+    readonly mustNotDebuff: {
+        readonly pos: {
+            readonly x: 4;
+            readonly y: 0;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** The Soul card — Tarots row 2 col 2. Base for "legendaryJoker: Any" (they spawn from Soul). */
+    readonly anyLegendary: {
+        readonly pos: {
+            readonly x: 2;
+            readonly y: 2;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** Blank spectral back — Tarots row 2 col 5. For "spectralCard: Any". */
+    readonly anySpectral: {
+        readonly pos: {
+            readonly x: 5;
+            readonly y: 2;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** Blank tarot back — Tarots row 2 col 6. For "tarotCard: Any". */
+    readonly anyTarot: {
+        readonly pos: {
+            readonly x: 6;
+            readonly y: 2;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** Blank planet back — Tarots row 2 col 7. For "planetCard: Any". */
+    readonly anyPlanet: {
+        readonly pos: {
+            readonly x: 7;
+            readonly y: 2;
+        };
+        readonly type: SpriteSheetType;
+    };
+};
+/** Look up sprite data by name, falling back to the mystery card for the given sheet if not found. */
+export declare function getSpriteDataOrMystery(name: string, fallbackSheet?: SpriteSheetType): SpriteData;

package/dist/sprites/spriteMapper.js

@@ -29,7 +29,47 @@ registerAll(VOUCHERS, "Vouchers");
 registerAll(BOSSES, "BlindChips");
 registerAll(TAGS, "tags");
 registerAll(BOOSTER_PACKS ?? [], "Boosters");
+/**
+ * Per-sheet mystery/back card positions for unknown items.
+ * Used as fallback when an item name can't be resolved.
+ */
+export const MYSTERY_SPRITES = {
+    Jokers: { x: 9, y: 9 }, // grey card back (legendary face row)
+    Tarots: { x: 4, y: 2 }, // blank consumable
+    Vouchers: { x: 8, y: 2 }, // mystery voucher
+    Boosters: { x: 0, y: 5 }, // grey empty pack
+    tags: { x: 3, y: 4 }, // grey ? tag
+    BlindChips: { x: 0, y: 30 }, // grey ? blind
+};
+/** Get the mystery/fallback sprite for a given sheet type. */
+export function getMysterySprite(sheet) {
+    return { pos: MYSTERY_SPRITES[sheet] ?? { x: 0, y: 0 }, type: sheet };
+}
 /** Look up sprite data by name. Accepts display names ("Icy Joker"), enum keys ("IcyJoker"), and "Joker | Name" prefixed forms. */
 export function getSpriteData(name) {
     return ITEM_MAP.get(normalize(stripPrefix(name))) ?? ITEM_MAP.get(normalize(name)) ?? null;
 }
+/**
+ * Wildcard "Any" sprites from the Enhancers sheet.
+ * Used in the JAML visual editor when a clause value is "Any" (e.g. `legendaryJoker: Any`).
+ */
+export const WILDCARD_SPRITES = {
+    /** Grey silhouette — Enhancers row 3 col 5. For generic "Any" items. */
+    anySilhouette: { pos: { x: 5, y: 3 }, type: "Enhancers" },
+    /** Grey ? circle — Enhancers row 3 col 6. For "boss: Any" etc. */
+    anyMystery: { pos: { x: 6, y: 3 }, type: "Enhancers" },
+    /** Red X debuff — Editions row 0 col 4. For mustNot zone indicator. */
+    mustNotDebuff: { pos: { x: 4, y: 0 }, type: "Editions" },
+    /** The Soul card — Tarots row 2 col 2. Base for "legendaryJoker: Any" (they spawn from Soul). */
+    anyLegendary: { pos: { x: 2, y: 2 }, type: "Tarots" },
+    /** Blank spectral back — Tarots row 2 col 5. For "spectralCard: Any". */
+    anySpectral: { pos: { x: 5, y: 2 }, type: "Tarots" },
+    /** Blank tarot back — Tarots row 2 col 6. For "tarotCard: Any". */
+    anyTarot: { pos: { x: 6, y: 2 }, type: "Tarots" },
+    /** Blank planet back — Tarots row 2 col 7. For "planetCard: Any". */
+    anyPlanet: { pos: { x: 7, y: 2 }, type: "Tarots" },
+};
+/** Look up sprite data by name, falling back to the mystery card for the given sheet if not found. */
+export function getSpriteDataOrMystery(name, fallbackSheet = "Jokers") {
+    return getSpriteData(name) ?? getMysterySprite(fallbackSheet);
+}

package/dist/ui/JimboBadge.d.ts

@@ -1,7 +1,13 @@
 import React from 'react';
+export type JimboBadgeTone = 'dark' | 'blue' | 'red' | 'green' | 'gold' | 'grey' | 'orange' | 'purple';
 export interface JimboBadgeProps {
     size?: 'sm' | 'md';
-    tone?: 'dark' | 'blue' | 'red' | 'green' | 'gold' | 'grey';
+    tone?: JimboBadgeTone;
     children: React.ReactNode;
+    className?: string;
 }
-export declare function JimboBadge({ size, tone, children }: JimboBadgeProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Small colored label pill. Matches Balatro's in-game tag/rarity badges.
+ * All styling via jimbo.css `.j-badge` classes.
+ */
+export declare function JimboBadge({ size, tone, className, children }: JimboBadgeProps): import("react/jsx-runtime").JSX.Element;