jaml-ui 0.16.0 → 0.17.1

package/dist/ui/showcase.js

@@ -9,46 +9,19 @@ const TONE_COLOR = {
     gold: JimboColorOption.GOLD,
     green: JimboColorOption.GREEN,
 };
-const DEFAULT_STATS = { searched: '15.6B', matches: '2,847', speed: '5.4M/s' };
+const DEFAULT_STATS = { searched: '0', matches: '0', speed: '0' };
+/**
+ * Landing/showcase screen for the seed curator.
+ * All styling via jimbo.css `.j-showcase` classes — zero inline styles.
+ */
 export function Showcase({ hotFilters = [], recentFinds = [], stats = DEFAULT_STATS, onNewSearch, onBrowseFilters, onBack, }) {
     const C = JimboColorOption;
-    return (_jsxs("div", { style: {
-            width: '100%', height: '100%', background: C.DARKEST,
-            display: 'flex', flexDirection: 'column',
-            fontFamily: 'm6x11plus, monospace', color: C.WHITE, overflow: 'hidden',
-        }, children: [_jsxs("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '18px 14px 10px' }, children: [_jsxs("div", { style: { textAlign: 'center', marginBottom: 18 }, children: [_jsx("div", { style: { fontSize: 32, letterSpacing: 3, lineHeight: 1, color: C.GOLD, textShadow: '2px 2px 0 rgba(0,0,0,.8)' }, children: "Balatro" }), _jsx("div", { style: { fontSize: 14, letterSpacing: 4, color: C.GREY, marginTop: 4, textShadow: '1px 1px 0 rgba(0,0,0,.8)' }, children: "Seed \u00B7 Curator" })] }), _jsx("div", { style: {
-                            background: C.DARK_GREY, borderRadius: 6, padding: 10,
-                            border: `2px solid ${C.PANEL_EDGE}`, boxShadow: `0 2px 0 ${C.BLACK}`,
-                            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, textAlign: 'center', marginBottom: 16,
-                        }, children: [
+    return (_jsxs("div", { className: "j-showcase", children: [_jsxs("div", { className: "j-showcase__scroll", children: [_jsxs("div", { className: "j-showcase__wordmark", children: [_jsx("div", { className: "j-showcase__wordmark-title", children: "Balatro" }), _jsx("div", { className: "j-showcase__wordmark-sub", children: "Seed \u00B7 Curator" })] }), _jsx("div", { className: "j-showcase__stats", children: [
                             [stats.searched, 'searched'],
                             [stats.matches, 'matches'],
                             [stats.speed, 'speed'],
-                        ].map(([n, l]) => (_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, color: C.GOLD, textShadow: '1px 1px 0 rgba(0,0,0,.8)' }, children: n }), _jsx("div", { style: { fontSize: 9, color: C.GREY, letterSpacing: 2, marginTop: 2 }, children: l })] }, l))) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }, children: [_jsx("div", { style: {
-                                    fontSize: 11, letterSpacing: 2, padding: '2px 8px',
-                                    background: C.BLUE, color: C.WHITE, borderRadius: 3,
-                                    textShadow: '1px 1px 0 rgba(0,0,0,.8)',
-                                }, children: "Hot Filters" }), _jsx("div", { style: { flex: 1, height: 2, background: `${C.BLUE}55`, borderRadius: 1 } })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }, children: hotFilters.map((f, i) => {
+                        ].map(([n, l]) => (_jsxs("div", { children: [_jsx("div", { className: "j-showcase__stat-value", children: n }), _jsx("div", { className: "j-showcase__stat-label", children: l })] }, l))) }), _jsxs("div", { className: "j-showcase__section-header", children: [_jsx("div", { className: "j-showcase__section-tag", style: { background: C.BLUE }, children: "Hot Filters" }), _jsx("div", { className: "j-showcase__section-rule", style: { background: `${C.BLUE}55` } })] }), _jsx("div", { className: "j-showcase__filter-list", children: hotFilters.map((f, i) => {
                             const tColor = TONE_COLOR[f.tone];
-                            return (_jsxs("div", { style: {
-                                    background: C.DARK_GREY, borderRadius: 6, padding: 10,
-                                    border: `2px solid ${tColor}`, boxShadow: `0 2px 0 ${C.BLACK}`,
-                                    display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
-                                }, children: [_jsx("div", { style: { display: 'flex', gap: 2 }, children: f.sample.map((name, j) => (_jsx("div", { style: { width: 30, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(JimboSprite, { name: name, width: 28 }) }, j))) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
-                                                    fontSize: 13, color: C.WHITE, letterSpacing: 1,
-                                                    textShadow: '1px 1px 0 rgba(0,0,0,.8)',
-                                                    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                                                }, children: f.name }), _jsxs("div", { style: { fontSize: 9, color: C.GOLD_TEXT, letterSpacing: 1, marginTop: 2 }, children: ["by ", f.author] })] }), _jsxs("div", { style: { textAlign: 'right' }, children: [_jsx("div", { style: { fontSize: 14, color: tColor, textShadow: '1px 1px 0 rgba(0,0,0,.8)' }, children: f.hits }), _jsx("div", { style: { fontSize: 8, color: C.GREY, letterSpacing: 1 }, children: "seeds" })] })] }, i));
-                        }) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }, children: [_jsx("div", { style: {
-                                    fontSize: 11, letterSpacing: 2, padding: '2px 8px',
-                                    background: C.GREEN, color: C.WHITE, borderRadius: 3,
-                                    textShadow: '1px 1px 0 rgba(0,0,0,.8)',
-                                }, children: "Recent Finds" }), _jsx("div", { style: { flex: 1, height: 2, background: `${C.GREEN}55`, borderRadius: 1 } })] }), _jsx("div", { style: {
-                            background: C.DARK_GREY, borderRadius: 6, padding: '8px 10px',
-                            border: `2px solid ${C.PANEL_EDGE}`, boxShadow: `0 2px 0 ${C.BLACK}`,
-                            fontSize: 11, color: C.GREY, letterSpacing: 1, lineHeight: 1.7,
-                        }, children: recentFinds.length === 0 ? (_jsx("div", { style: { color: C.GREY }, children: "No recent finds yet." })) : recentFinds.map((r, i) => (_jsxs("div", { children: [_jsx("span", { style: { color: C.GOLD_TEXT }, children: r.seed }), ' · ', r.filterName, r.score > 0 && _jsxs("span", { style: { color: C.GREEN_TEXT }, children: [" +", r.score] })] }, i))) }), _jsx("div", { style: { height: 16 } })] }), _jsxs("div", { style: {
-                    padding: '8px 10px 10px', borderTop: `2px solid ${C.BLACK}`, background: C.DARK_GREY,
-                    display: 'flex', flexDirection: 'column', gap: 6,
-                }, children: [_jsx(JimboButton, { tone: "green", fullWidth: true, size: "md", onClick: onNewSearch, children: "New Search" }), _jsx(JimboButton, { tone: "blue", fullWidth: true, size: "md", onClick: onBrowseFilters, children: "Browse Filters" }), _jsx(JimboButton, { tone: "orange", fullWidth: true, size: "md", onClick: onBack, children: "Back" })] })] }));
+                            return (_jsxs("div", { className: "j-showcase__filter-card", style: { border: `2px solid ${tColor}` }, children: [_jsx("div", { className: "j-showcase__filter-sprites", children: f.sample.map((name, j) => (_jsx("div", { className: "j-showcase__filter-sprite", children: _jsx(JimboSprite, { name: name, width: 28 }) }, j))) }), _jsxs("div", { className: "j-showcase__filter-info", children: [_jsx("div", { className: "j-showcase__filter-name", children: f.name }), _jsxs("div", { className: "j-showcase__filter-author", children: ["by ", f.author] })] }), _jsxs("div", { className: "j-showcase__filter-hits", children: [_jsx("div", { className: "j-showcase__filter-hits-value", style: { color: tColor }, children: f.hits }), _jsx("div", { className: "j-showcase__filter-hits-label", children: "seeds" })] })] }, i));
+                        }) }), _jsxs("div", { className: "j-showcase__section-header", children: [_jsx("div", { className: "j-showcase__section-tag", style: { background: C.GREEN }, children: "Recent Finds" }), _jsx("div", { className: "j-showcase__section-rule", style: { background: `${C.GREEN}55` } })] }), _jsx("div", { className: "j-showcase__recent", children: recentFinds.length === 0 ? (_jsx("div", { children: "No recent finds yet." })) : recentFinds.map((r, i) => (_jsxs("div", { children: [_jsx("span", { style: { color: C.GOLD_TEXT }, children: r.seed }), ' · ', r.filterName, r.score > 0 && _jsxs("span", { style: { color: C.GREEN_TEXT }, children: [" +", r.score] })] }, i))) }), _jsx("div", { style: { height: 16 } })] }), _jsxs("div", { className: "j-showcase__actions", children: [_jsx(JimboButton, { tone: "green", fullWidth: true, size: "md", onClick: onNewSearch, children: "New Search" }), _jsx(JimboButton, { tone: "blue", fullWidth: true, size: "md", onClick: onBrowseFilters, children: "Browse Filters" }), _jsx(JimboButton, { tone: "orange", fullWidth: true, size: "md", onClick: onBack, children: "Back" })] })] }));
 }

package/dist/ui/sprites.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { resolveJamlAssetUrl } from '../assets.js';
-import { getSpriteData, SHEET_META } from '../sprites/spriteMapper.js';
+import { getSpriteData, getMysterySprite, 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 mystery = getMysterySprite(resolvedSheet);
+    const pos = sprite?.pos ?? mystery.pos;
     let defaultH = width;
     if (["Jokers", "Tarots", "Vouchers", "Boosters", "Decks", "Enhancers", "Editions"].includes(resolvedSheet)) {
         defaultH = Math.round((width * 95) / 71);

package/dist/ui.d.ts

@@ -1,4 +1,5 @@
 export * from './ui/tokens.js';
+import './ui/jimbo.css';
 export * from './ui/jimboText.js';
 export * from './ui/panel.js';
 export * from './ui/jimboTabs.js';

package/dist/ui.js

@@ -1,4 +1,6 @@
 export * from './ui/tokens.js';
+// Side-effect: design system CSS custom properties + component classes
+import './ui/jimbo.css';
 export * from './ui/jimboText.js';
 export * from './ui/panel.js';
 export * from './ui/jimboTabs.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",
@@ -76,14 +76,14 @@
   "peerDependencies": {
     "@monaco-editor/react": ">=4.0.0",
     "@react-spring/three": ">=9.0.0",
+    "@react-three/drei": ">=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",
+    "motely-wasm": "^14.3.1",
     "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"
+    "three": ">=0.150.0"
   },
   "peerDependenciesMeta": {
     "@react-spring/three": {
@@ -110,12 +110,13 @@
     "@monaco-editor/react": "^4.7.0",
     "@react-spring/three": "^10.0.3",
     "@react-three/fiber": "^9.6.0",
+    "@types/node": "^25.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",
+    "motely-wasm": "^14.2.41",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-icons": "^5.6.0",
@@ -124,6 +125,6 @@
     "vite": "^8.0.9"
   },
   "dependencies": {
-    "@react-three/drei": "^10.7.7"
+    "@react-three/drei": ">=9.0.0"
   }
 }

package/dist/decode/packedBalatroItem.d.ts

@@ -1,13 +0,0 @@
-/** Bit-packed shop/card ids (Balatro item encoding). */
-export declare const BalatroItemCategory: {
-    readonly Standardcard: 1;
-    readonly Spectral: 2;
-    readonly Tarot: 3;
-    readonly Planet: 4;
-    readonly Joker: 5;
-    readonly Invalid: 15;
-};
-export declare function packedItemCategory(packed: number): number;
-export declare function packedJokerRarity(packed: number): number;
-export declare function packedItemIndex(packed: number): number;
-export declare function isPackedItemValid(packed: number): boolean;

package/dist/decode/packedBalatroItem.js

@@ -1,26 +0,0 @@
-/** Bit-packed shop/card ids (Balatro item encoding). */
-export const BalatroItemCategory = {
-    Standardcard: 1,
-    Spectral: 2,
-    Tarot: 3,
-    Planet: 4,
-    Joker: 5,
-    Invalid: 0xf,
-};
-const CATEGORY_OFFSET = 12;
-const CATEGORY_MASK = 0xf000;
-const RARITY_OFFSET = 10;
-const RARITY_MASK = 0x0c00;
-export function packedItemCategory(packed) {
-    return (packed & CATEGORY_MASK) >> CATEGORY_OFFSET;
-}
-export function packedJokerRarity(packed) {
-    return (packed & RARITY_MASK) >> RARITY_OFFSET;
-}
-export function packedItemIndex(packed) {
-    return packed & ~(CATEGORY_MASK | RARITY_MASK);
-}
-export function isPackedItemValid(packed) {
-    const category = packedItemCategory(packed);
-    return category >= BalatroItemCategory.Standardcard && category <= BalatroItemCategory.Joker;
-}

package/dist/hooks/loadMotelyWasm.d.ts

@@ -1,7 +0,0 @@
-interface MotelyModules {
-    MotelyWasm: any;
-    MotelyWasmEvents: any;
-    Motely: any;
-}
-export declare function loadMotelyWasm(url: string): Promise<MotelyModules>;
-export {};

package/dist/hooks/loadMotelyWasm.js

@@ -1,16 +0,0 @@
-// Module-level cache so multiple hooks share a single boot per URL.
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const cache = new Map();
-export function loadMotelyWasm(url) {
-    if (!cache.has(url)) {
-        cache.set(url, (async () => {
-            const mod = await import(/* @vite-ignore */ url);
-            await mod.default.boot();
-            return { MotelyWasm: mod.MotelyWasm, MotelyWasmEvents: mod.MotelyWasmEvents, Motely: mod.Motely };
-        })().catch((err) => {
-            cache.delete(url);
-            throw err;
-        }));
-    }
-    return cache.get(url);
-}

package/dist/utils/itemUtils.d.ts

@@ -1,11 +0,0 @@
-/** Map MotelyItemType enum names to display-friendly strings */
-export declare function getItemDisplayName(enumKey: string): string;
-export type CardCategory = "joker" | "tarot" | "planet" | "spectral" | "playing" | "unknown";
-export declare function getItemCategory(enumKey: string): CardCategory;
-export declare const CATEGORY_COLORS: Record<CardCategory, {
-    bg: string;
-    border: string;
-    text: string;
-}>;
-/** Suit color for standard cards */
-export declare function getSuitColor(enumKey: string): string;

package/dist/utils/itemUtils.js

@@ -1,71 +0,0 @@
-/** Map MotelyItemType enum names to display-friendly strings */
-export function getItemDisplayName(enumKey) {
-    // Convert PascalCase to spaced: "GreedyJoker" -> "Greedy Joker"
-    // Handle special cases first
-    const specials = {
-        ChaostheClown: "Chaos the Clown",
-        OopsAll6s: "Oops! All 6s",
-        EightBall: "8 Ball",
-        DNA: "DNA",
-        MrBones: "Mr. Bones",
-        ToDoList: "To Do List",
-        Cloud9: "Cloud 9",
-        SockAndBuskin: "Sock and Buskin",
-        TheSoul: "The Soul",
-        BlackHole: "Black Hole",
-        PlanetX: "Planet X",
-    };
-    if (specials[enumKey])
-        return specials[enumKey];
-    // Standard cards: C2 = 2 of Clubs, D10 = 10 of Diamonds, etc.
-    const suitMap = { C: "♣", D: "♦", H: "♥", S: "♠" };
-    const cardMatch = enumKey.match(/^([CDHS])([2-9JQKA]|10)$/);
-    if (cardMatch) {
-        const [, suit, rank] = cardMatch;
-        const rankName = { J: "Jack", Q: "Queen", K: "King", A: "Ace" }[rank] ?? rank;
-        return `${rankName} ${suitMap[suit]}`;
-    }
-    // General PascalCase split
-    return enumKey.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2");
-}
-const TAROT_NAMES = new Set([
-    "TheFool", "TheMagician", "TheHighPriestess", "TheEmpress", "TheEmperor",
-    "TheHierophant", "TheLovers", "TheChariot", "Justice", "TheHermit",
-    "TheWheelOfFortune", "Strength", "TheHangedMan", "Death", "Temperance",
-    "TheDevil", "TheTower", "TheStar", "TheMoon", "TheSun", "Judgement", "TheWorld",
-]);
-const PLANET_NAMES = new Set([
-    "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn",
-    "Uranus", "Neptune", "Pluto", "PlanetX", "Ceres", "Eris",
-]);
-const SPECTRAL_NAMES = new Set([
-    "Familiar", "Grim", "Incantation", "Talisman", "Aura", "Wraith",
-    "Sigil", "Ouija", "Ectoplasm", "Immolate", "Ankh", "DejaVu",
-    "Hex", "Trance", "Medium", "Cryptid", "TheSoul", "BlackHole",
-]);
-export function getItemCategory(enumKey) {
-    if (/^[CDHS]([2-9JQKA]|10)$/.test(enumKey))
-        return "playing";
-    if (TAROT_NAMES.has(enumKey))
-        return "tarot";
-    if (PLANET_NAMES.has(enumKey))
-        return "planet";
-    if (SPECTRAL_NAMES.has(enumKey))
-        return "spectral";
-    // Everything else between the standard cards and Invalid is a joker
-    return "joker";
-}
-export const CATEGORY_COLORS = {
-    joker: { bg: "bg-purple-900/30", border: "border-purple-500/50", text: "text-purple-200" },
-    tarot: { bg: "bg-blue-900/30", border: "border-blue-500/50", text: "text-blue-200" },
-    planet: { bg: "bg-amber-900/30", border: "border-amber-500/50", text: "text-amber-200" },
-    spectral: { bg: "bg-cyan-900/30", border: "border-cyan-500/50", text: "text-cyan-200" },
-    playing: { bg: "bg-neutral-100 dark:bg-neutral-800", border: "border-neutral-300 dark:border-neutral-600", text: "text-neutral-900 dark:text-neutral-100" },
-    unknown: { bg: "bg-neutral-900/30", border: "border-neutral-500/50", text: "text-neutral-300" },
-};
-/** Suit color for standard cards */
-export function getSuitColor(enumKey) {
-    if (enumKey.startsWith("H") || enumKey.startsWith("D"))
-        return "text-red-500";
-    return "text-neutral-900 dark:text-neutral-100";
-}