jaml-ui 0.6.1 → 0.7.0

package/README.md

@@ -1,15 +1,6 @@
 # jaml-ui
 
-React components and utilities for Balatro/JAML. Pair with **`motely-wasm`** when you need the engine (peer). Update both in consumers with normal **`pnpm update`** / semver like any other deps.
-
-## Package shape
-
-- `jaml-ui`
-  - React/client entry for rendered components and hooks
-- `jaml-ui/core`
-  - Pure asset helpers, sprite metadata, and decode utilities that do not depend on `motely-wasm`
-- `jaml-ui/motely`
-  - Optional plain `motely-wasm` helpers for decoding Motely item enums
+React components, UI tokens, sprites, and utilities for Balatro/JAML apps.
 
 ## Install
 
@@ -17,129 +8,128 @@ React components and utilities for Balatro/JAML. Pair with **`motely-wasm`** whe
 npm install jaml-ui react react-dom
 ```
 
-If you want the Motely-specific helpers too:
+## Package exports
 
-```bash
-npm install jaml-ui motely-wasm react react-dom
-```
+| Entry | Contents |
+|-------|----------|
+| `jaml-ui` | Game card components, JAML IDE, Analyzer Explorer, hooks |
+| `jaml-ui/ui` | Jimbo design system — JimboPanel, JimboButton, JimboModal, tokens |
+| `jaml-ui/core` | Pure asset helpers, sprite metadata, decode utilities (no React) |
+| `jaml-ui/motely` | motely-wasm decode helpers (requires `motely-wasm` peer) |
+| `jaml-ui/r3f` | 3D card component via React Three Fiber (requires r3f peers) |
 
 ## Quick start
 
 ```tsx
-"use client";
+import { JamlGameCard, AnalyzerExplorer, JamlIde } from "jaml-ui";
+import { JimboPanel, JimboButton } from "jaml-ui/ui";
+```
+
+### Game card
 
+```tsx
 import { JamlGameCard } from "jaml-ui";
 
-export function Example() {
-  return (
-    <JamlGameCard
-      type="joker"
-      card={{
-        name: "Blueprint",
-        edition: "Foil",
-        isEternal: true,
-        scale: 1.5,
-      }}
-    />
-  );
-}
+<JamlGameCard
+  type="joker"
+  card={{ name: "Blueprint", edition: "Foil", isEternal: true, scale: 1.5 }}
+/>
 ```
 
-## JAML preview
+### Jimbo UI (Balatro design system)
 
 ```tsx
-"use client";
-
-import { JamlMapPreview } from "jaml-ui";
+import { JimboPanel, JimboButton, JimboModal } from "jaml-ui/ui";
+import { JimboColorOption } from "jaml-ui/ui";
 
-export function PreviewExample({ jaml }: { jaml: string }) {
-  return <JamlMapPreview jaml={jaml} title="JAML Intent Preview" />;
-}
+<JimboPanel sway onBack={() => setOpen(false)}>
+  <JimboButton variant="primary" onClick={handleSearch}>Search</JimboButton>
+</JimboPanel>
 ```
 
-## Lightweight JAML IDE shell
+Available variants: `primary`, `secondary`, `danger`, `back`, `ghost`
 
-```tsx
-"use client";
+### JAML IDE
 
-import { useState } from "react";
+```tsx
 import { JamlIde } from "jaml-ui";
 
-export function IdeExample() {
-  const [jaml, setJaml] = useState("must:\n  joker: Blueprint");
-
-  return (
-    <JamlIde
-      jaml={jaml}
-      onChange={setJaml}
-      results={[]}
-    />
-  );
-}
+<JamlIde
+  jaml={jaml}
+  onChange={setJaml}
+  searchResults={results}
+  onSearch={handleSearch}
+  isSearching={isSearching}
+/>
 ```
 
-## Asset handling
+### Analyzer Explorer
 
-By default, `jaml-ui` resolves its packaged sprite assets from the package `assets/` directory using `import.meta.url`.
+```tsx
+import { AnalyzerExplorer } from "jaml-ui";
+
+// antes: AnalyzerAnteView[] — stream from motely-wasm createSearchContext
+<AnalyzerExplorer antes={antes} totalAntes={8} highlights={highlights} />
+```
 
-If you want to host the assets yourself, set a custom base URL once during app startup:
+### JAML Map Preview
 
 ```tsx
-"use client";
-
-import { setJamlAssetBaseUrl } from "jaml-ui";
+import { JamlMapPreview } from "jaml-ui";
 
-setJamlAssetBaseUrl("/vendor/jaml-ui/");
+<JamlMapPreview jaml={jaml} />
 ```
 
-Reset back to packaged assets with:
+## Asset handling
+
+By default sprites resolve from the package `assets/` directory via `import.meta.url`.
+
+Override at app startup:
 
 ```ts
-import { clearJamlAssetBaseUrl } from "jaml-ui";
+import { setJamlAssetBaseUrl, clearJamlAssetBaseUrl } from "jaml-ui";
 
-clearJamlAssetBaseUrl();
+setJamlAssetBaseUrl("/vendor/jaml-ui/");  // custom CDN
+clearJamlAssetBaseUrl();                   // back to default
 ```
 
 ## Core utilities
 
 ```ts
 import { SPRITE_SHEETS, getSpriteData, resolveJamlAssetUrl } from "jaml-ui/core";
-
-const jokerSheetUrl = SPRITE_SHEETS.jokers.src;
-const blueprintSprite = getSpriteData("Blueprint");
-const vouchersUrl = resolveJamlAssetUrl("vouchers");
 ```
 
-## Motely helpers
+## Motely decode helpers
 
 ```ts
-"use client";
-
 import { decodeMotelyItemName, motelyItemTypeName } from "jaml-ui/motely";
+```
+
+## 3D card (optional)
 
-const itemName = decodeMotelyItemName(0x5001);
-const enumKey = motelyItemTypeName(0x5001);
+```bash
+npm install three @react-three/fiber @react-three/drei @react-spring/three
 ```
 
-## Next.js notes
+```tsx
+import { Card3D } from "jaml-ui/r3f";
 
-- The root `jaml-ui` entry is client-oriented and preserves the `"use client"` boundary for component consumers.
-- Import pure helpers from `jaml-ui/core` when you want server-safe metadata and asset utilities.
-- If you are consuming `jaml-ui` from a local workspace package in a Next.js app, you may need:
+<Card3D itemName="Blueprint" />
+```
 
-```ts
-// next.config.ts
-import type { NextConfig } from "next";
+## Next.js
 
-const nextConfig: NextConfig = {
-  transpilePackages: ["jaml-ui"],
-};
+Import pure helpers from `jaml-ui/core` for server components. For local workspace installs add:
 
-export default nextConfig;
+```ts
+// next.config.ts
+const nextConfig = { transpilePackages: ["jaml-ui"] };
 ```
 
-## Browser-first runtime direction
-
-`jaml-ui` is designed for browser/React consumers. The optional `jaml-ui/motely` entry targets plain `motely-wasm` and does not assume threaded WASM, SAB, or COEP setup.
+## Peer dependencies
 
-The built-in `JamlIde` intentionally stays lightweight. Rich editor integrations like Monaco, custom language servers, or extension-host-specific tooling should live in app-level packages on top of `jaml-ui`, not in the base renderer package.
+| Peer | Required for |
+|------|-------------|
+| `react`, `react-dom` | All components |
+| `motely-wasm ^10 \|\| ^11 \|\| ^12` | `jaml-ui/motely`, `AnalyzerExplorer` data |
+| `three`, `@react-three/fiber`, `@react-three/drei`, `@react-spring/three` | `jaml-ui/r3f` only |

package/dist/assets.js

@@ -11,17 +11,20 @@ export const JAML_ASSET_FILES = {
     tags: "tags.png",
 };
 const assetKeyByFileName = Object.fromEntries(Object.entries(JAML_ASSET_FILES).map(([key, fileName]) => [fileName, key]));
+// Keep in lockstep with package.json version. Upload assets to this path when publishing.
+const JAML_UI_VERSION = "0.7.0";
+const CDN_BASE = `https://cdn.seedfinder.app/jaml-ui/${JAML_UI_VERSION}/assets/`;
 const defaultAssetUrls = {
-    deck: new URL("../assets/8BitDeck.png", import.meta.url).href,
-    blinds: new URL("../assets/BlindChips.png", import.meta.url).href,
-    boosters: new URL("../assets/Boosters.png", import.meta.url).href,
-    editions: new URL("../assets/Editions.png", import.meta.url).href,
-    enhancers: new URL("../assets/Enhancers.png", import.meta.url).href,
-    jokers: new URL("../assets/Jokers.png", import.meta.url).href,
-    tarots: new URL("../assets/Tarots.png", import.meta.url).href,
-    vouchers: new URL("../assets/Vouchers.png", import.meta.url).href,
-    stickers: new URL("../assets/stickers.png", import.meta.url).href,
-    tags: new URL("../assets/tags.png", import.meta.url).href,
+    deck: `${CDN_BASE}${JAML_ASSET_FILES.deck}`,
+    blinds: `${CDN_BASE}${JAML_ASSET_FILES.blinds}`,
+    boosters: `${CDN_BASE}${JAML_ASSET_FILES.boosters}`,
+    editions: `${CDN_BASE}${JAML_ASSET_FILES.editions}`,
+    enhancers: `${CDN_BASE}${JAML_ASSET_FILES.enhancers}`,
+    jokers: `${CDN_BASE}${JAML_ASSET_FILES.jokers}`,
+    tarots: `${CDN_BASE}${JAML_ASSET_FILES.tarots}`,
+    vouchers: `${CDN_BASE}${JAML_ASSET_FILES.vouchers}`,
+    stickers: `${CDN_BASE}${JAML_ASSET_FILES.stickers}`,
+    tags: `${CDN_BASE}${JAML_ASSET_FILES.tags}`,
 };
 let customAssetBaseUrl = null;
 function normalizeBaseUrl(baseUrl) {

package/dist/components/JamlIdeToolbar.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JimboButton } from "../ui/panel.js";
 import { JimboColorOption } from "../ui/tokens.js";
 const TABS = [
     { id: "visual", label: "Visual" },
@@ -16,40 +17,5 @@ export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className
             padding: "6px 10px",
             borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
             background: JimboColorOption.DARKEST,
-        }, children: [_jsx("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: TABS.map((tab) => {
-                    const selected = mode === tab.id;
-                    return (_jsxs("button", { type: "button", onClick: () => onModeChange(tab.id), style: {
-                            cursor: "pointer",
-                            borderRadius: 6,
-                            border: selected ? `1px solid ${JimboColorOption.GOLD}` : "1px solid transparent",
-                            background: selected ? `${JimboColorOption.GOLD}22` : "transparent",
-                            color: selected ? JimboColorOption.GOLD_TEXT : JimboColorOption.GREY,
-                            padding: "5px 10px",
-                            fontSize: 11,
-                            fontWeight: 700,
-                            fontFamily: "m6x11plus, monospace",
-                            transition: "background 120ms, color 120ms",
-                        }, children: [tab.label, tab.id === "results" && resultCount > 0 ? (_jsx("span", { style: {
-                                    marginLeft: 6,
-                                    borderRadius: 999,
-                                    background: `${JimboColorOption.GOLD}33`,
-                                    color: JimboColorOption.GOLD_TEXT,
-                                    padding: "1px 6px",
-                                    fontSize: 10,
-                                }, children: resultCount })) : null] }, tab.id));
-                }) }), onSearch ? (_jsx("button", { type: "button", onClick: onSearch, style: {
-                    cursor: "pointer",
-                    borderRadius: 6,
-                    border: isSearching
-                        ? `1px solid ${JimboColorOption.DARK_RED}`
-                        : `1px solid ${JimboColorOption.GREEN}`,
-                    background: isSearching
-                        ? `${JimboColorOption.RED}22`
-                        : `${JimboColorOption.GREEN}22`,
-                    color: isSearching ? JimboColorOption.RED : JimboColorOption.GREEN_TEXT,
-                    padding: "5px 14px",
-                    fontSize: 11,
-                    fontWeight: 700,
-                    fontFamily: "m6x11plus, monospace",
-                }, children: isSearching ? "Stop" : "Search" })) : null] }));
+        }, children: [_jsx("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: TABS.map((tab) => (_jsxs(JimboButton, { tone: mode === tab.id ? "gold" : "grey", size: "xs", onClick: () => onModeChange(tab.id), children: [tab.label, tab.id === "results" && resultCount > 0 ? (_jsx("span", { style: { marginLeft: 6, borderRadius: 999, background: "rgba(228,182,67,0.2)", color: JimboColorOption.GOLD_TEXT, padding: "1px 6px", fontSize: 10 }, children: resultCount })) : null] }, tab.id))) }), onSearch ? (_jsx(JimboButton, { tone: isSearching ? "red" : "blue", size: "xs", onClick: onSearch, children: isSearching ? "Stop" : "Search" })) : null] }));
 }

package/dist/components/JamlIdeVisual.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { JimboColorOption } from "../ui/tokens.js";
-import { BalSprite } from "../ui/sprites.js";
+import { JimboSprite } from "../ui/sprites.js";
 const ZONE_META = {
     must: { label: "MUST", color: JimboColorOption.BLUE },
     should: { label: "SHOULD", color: JimboColorOption.RED },
@@ -25,7 +25,7 @@ function ClauseSprite({ clause, size = 26 }) {
     const sheet = clauseSpriteSheet(clause.type);
     if (!sheet)
         return null;
-    return _jsx(BalSprite, { name: clause.value, sheet: sheet, width: size });
+    return _jsx(JimboSprite, { name: clause.value, sheet: sheet, width: size });
 }
 function DragClausePill({ clause, zone, onDragStart, }) {
     const z = ZONE_META[zone];

package/dist/hooks/loadMotelyWasm.d.ts

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

package/dist/hooks/loadMotelyWasm.js

@@ -0,0 +1,16 @@
+// 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/hooks/searchWorkerCode.d.ts

@@ -0,0 +1 @@
+export declare const SEARCH_WORKER_CODE = "\nlet MotelyWasm = null;\nlet MotelyWasmEvents = null;\nlet activeSearch = null;\n\nself.addEventListener('message', async function(e) {\n  const msg = e.data;\n\n  if (msg.type === 'init') {\n    try {\n      const mod = await import(msg.url);\n      await mod.default.boot();\n      MotelyWasm = mod.MotelyWasm;\n      MotelyWasmEvents = mod.MotelyWasmEvents;\n      self.postMessage({ type: 'ready' });\n    } catch (err) {\n      self.postMessage({ type: 'error', message: String(err) });\n    }\n    return;\n  }\n\n  if (msg.type === 'start') {\n    if (!MotelyWasm) { self.postMessage({ type: 'error', message: 'Not initialized' }); return; }\n    const validation = MotelyWasm.validateJaml(msg.jaml);\n    if (validation !== 'valid') { self.postMessage({ type: 'error', message: validation }); return; }\n\n    let rId, pId, cId;\n    function cleanup() {\n      MotelyWasmEvents.onResult.unsubscribeById(rId);\n      MotelyWasmEvents.onProgress.unsubscribeById(pId);\n      MotelyWasmEvents.onComplete.unsubscribeById(cId);\n      activeSearch = null;\n    }\n\n    rId = MotelyWasmEvents.onResult.subscribe(function(seed, score) {\n      self.postMessage({ type: 'result', seed, score });\n    });\n    pId = MotelyWasmEvents.onProgress.subscribe(function(searched, matching) {\n      self.postMessage({ type: 'progress', searched: searched.toString(), matching: matching.toString() });\n    });\n    cId = MotelyWasmEvents.onComplete.subscribe(function(status, searched, matched) {\n      cleanup();\n      self.postMessage({ type: 'complete', status, searched: searched.toString(), matched: matched.toString() });\n    });\n\n    try {\n      activeSearch = MotelyWasm.startRandomSearch(msg.jaml, msg.count);\n    } catch (err) {\n      cleanup();\n      self.postMessage({ type: 'error', message: String(err) });\n    }\n    return;\n  }\n\n  if (msg.type === 'stop') {\n    if (activeSearch) { activeSearch.cancel(); activeSearch = null; }\n    self.postMessage({ type: 'cancelled' });\n  }\n});\n";

package/dist/hooks/searchWorkerCode.js

@@ -0,0 +1,62 @@
+// Worker code as an inline string — created as a Blob URL at runtime.
+// This avoids bundler/import.meta.url issues when shipped as an npm package.
+export const SEARCH_WORKER_CODE = `
+let MotelyWasm = null;
+let MotelyWasmEvents = null;
+let activeSearch = null;
+
+self.addEventListener('message', async function(e) {
+  const msg = e.data;
+
+  if (msg.type === 'init') {
+    try {
+      const mod = await import(msg.url);
+      await mod.default.boot();
+      MotelyWasm = mod.MotelyWasm;
+      MotelyWasmEvents = mod.MotelyWasmEvents;
+      self.postMessage({ type: 'ready' });
+    } catch (err) {
+      self.postMessage({ type: 'error', message: String(err) });
+    }
+    return;
+  }
+
+  if (msg.type === 'start') {
+    if (!MotelyWasm) { self.postMessage({ type: 'error', message: 'Not initialized' }); return; }
+    const validation = MotelyWasm.validateJaml(msg.jaml);
+    if (validation !== 'valid') { self.postMessage({ type: 'error', message: validation }); return; }
+
+    let rId, pId, cId;
+    function cleanup() {
+      MotelyWasmEvents.onResult.unsubscribeById(rId);
+      MotelyWasmEvents.onProgress.unsubscribeById(pId);
+      MotelyWasmEvents.onComplete.unsubscribeById(cId);
+      activeSearch = null;
+    }
+
+    rId = MotelyWasmEvents.onResult.subscribe(function(seed, score) {
+      self.postMessage({ type: 'result', seed, score });
+    });
+    pId = MotelyWasmEvents.onProgress.subscribe(function(searched, matching) {
+      self.postMessage({ type: 'progress', searched: searched.toString(), matching: matching.toString() });
+    });
+    cId = MotelyWasmEvents.onComplete.subscribe(function(status, searched, matched) {
+      cleanup();
+      self.postMessage({ type: 'complete', status, searched: searched.toString(), matched: matched.toString() });
+    });
+
+    try {
+      activeSearch = MotelyWasm.startRandomSearch(msg.jaml, msg.count);
+    } catch (err) {
+      cleanup();
+      self.postMessage({ type: 'error', message: String(err) });
+    }
+    return;
+  }
+
+  if (msg.type === 'stop') {
+    if (activeSearch) { activeSearch.cancel(); activeSearch = null; }
+    self.postMessage({ type: 'cancelled' });
+  }
+});
+`;

package/dist/hooks/useAnalyzer.d.ts

@@ -0,0 +1,8 @@
+import type { AnalyzerAnteView } from "../components/AnalyzerExplorer.js";
+export type AnalyzerStatus = "idle" | "running" | "done" | "error";
+export declare function useAnalyzer(motelyWasmUrl: string): {
+    antes: AnalyzerAnteView[];
+    status: AnalyzerStatus;
+    error: string | null;
+    analyze: (seed: string, deck: string, stake: string, jaml?: string) => Promise<void>;
+};

package/dist/hooks/useAnalyzer.js

@@ -0,0 +1,72 @@
+"use client";
+import { useState, useCallback } from "react";
+import { loadMotelyWasm } from "./loadMotelyWasm.js";
+import { extractVisualJamlItems } from "../utils/jamlMapPreview.js";
+import { motelyItemDisplayNameFromValue } from "../motelyDisplay.js";
+export function useAnalyzer(motelyWasmUrl) {
+    const [antes, setAntes] = useState([]);
+    const [status, setStatus] = useState("idle");
+    const [error, setError] = useState(null);
+    const analyze = useCallback(async (seed, deck, stake, jaml) => {
+        setAntes([]);
+        setStatus("running");
+        setError(null);
+        try {
+            const { MotelyWasm, Motely } = await loadMotelyWasm(motelyWasmUrl);
+            const deckEnum = Motely.MotelyDeck[deck] ?? Motely.MotelyDeck.Red;
+            const stakeEnum = Motely.MotelyStake[stake] ?? Motely.MotelyStake.White;
+            const desiredNames = new Set();
+            if (jaml) {
+                const groups = extractVisualJamlItems(jaml);
+                for (const item of [...groups.must, ...groups.should]) {
+                    desiredNames.add(item.value.toLowerCase());
+                }
+            }
+            const ctx = MotelyWasm.createSearchContext(seed, deckEnum, stakeEnum);
+            const bossStream = ctx.createBossStream();
+            let runState = { voucherBitfield: 0, bossBitfield: 0 };
+            const results = [];
+            for (let ante = 1; ante <= 8; ante++) {
+                const bossResult = ctx.getNextBossForAnte(bossStream, ante, runState);
+                const bossName = Motely.MotelyBossBlind[bossResult.boss] ?? `Unknown(${bossResult.boss})`;
+                runState = bossResult.runState;
+                const voucherResult = ctx.getAnteFirstVoucher(ante, runState);
+                const voucherName = Motely.MotelyVoucher[voucherResult.voucher] ?? `Unknown(${voucherResult.voucher})`;
+                runState = voucherResult.runState;
+                const tagStream = ctx.createTagStream(ante);
+                const tag1 = ctx.getNextTag(tagStream);
+                const tag2 = ctx.getNextTag(tagStream);
+                const packStream = ctx.createBoosterPackStream(ante);
+                const packs = [];
+                for (let p = 0; p < 2; p++) {
+                    const packResult = ctx.getNextBoosterPack(packStream);
+                    packs.push(Motely.MotelyBoosterPack[packResult.pack] ?? `Unknown(${packResult.pack})`);
+                }
+                const shopStream = ctx.createShopItemStream(ante, runState, Motely.MotelyShopStreamFlags.Default, Motely.MotelyJokerStreamFlags.Default);
+                const shop = [];
+                for (let i = 0; i < 4; i++) {
+                    const itemResult = ctx.getNextShopItem(shopStream);
+                    const name = motelyItemDisplayNameFromValue(itemResult.item.value);
+                    const desired = desiredNames.size > 0 && desiredNames.has(name.toLowerCase());
+                    shop.push({ id: `${ante}-shop-${i}`, name, value: itemResult.item.value, desired });
+                }
+                results.push({
+                    ante,
+                    boss: bossName,
+                    voucher: voucherName,
+                    smallBlindTag: Motely.MotelyTag[tag1.tag] ?? `Unknown(${tag1.tag})`,
+                    bigBlindTag: Motely.MotelyTag[tag2.tag] ?? `Unknown(${tag2.tag})`,
+                    packs,
+                    shop,
+                });
+            }
+            setAntes(results);
+            setStatus("done");
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+            setStatus("error");
+        }
+    }, [motelyWasmUrl]);
+    return { antes, status, error, analyze };
+}

package/dist/hooks/useSearch.d.ts

@@ -0,0 +1,21 @@
+export interface SearchResult {
+    seed: string;
+    score: number;
+}
+export type SearchStatus = "idle" | "booting" | "running" | "completed" | "cancelled" | "error";
+export interface UseSearchState {
+    results: SearchResult[];
+    totalSearched: bigint;
+    matchingSeeds: bigint;
+    status: SearchStatus;
+    error: string | null;
+}
+export declare function useSearch(motelyWasmUrl: string): {
+    start: (jaml: string, count: number) => void;
+    cancel: () => void;
+    results: SearchResult[];
+    totalSearched: bigint;
+    matchingSeeds: bigint;
+    status: SearchStatus;
+    error: string | null;
+};

package/dist/hooks/useSearch.js

@@ -0,0 +1,76 @@
+"use client";
+import { useState, useCallback, useRef, useEffect } from "react";
+import { SEARCH_WORKER_CODE } from "./searchWorkerCode.js";
+function createWorker(motelyWasmUrl) {
+    const blob = new Blob([SEARCH_WORKER_CODE], { type: "text/javascript" });
+    const blobUrl = URL.createObjectURL(blob);
+    const worker = new Worker(blobUrl);
+    worker.postMessage({ type: "init", url: motelyWasmUrl });
+    return worker;
+}
+export function useSearch(motelyWasmUrl) {
+    const [state, setState] = useState({
+        results: [],
+        totalSearched: 0n,
+        matchingSeeds: 0n,
+        status: "idle",
+        error: null,
+    });
+    const workerRef = useRef(null);
+    const readyRef = useRef(false);
+    useEffect(() => {
+        setState((s) => ({ ...s, status: "booting" }));
+        const worker = createWorker(motelyWasmUrl);
+        workerRef.current = worker;
+        readyRef.current = false;
+        worker.onmessage = (e) => {
+            const msg = e.data;
+            if (msg.type === "ready") {
+                readyRef.current = true;
+                setState((s) => s.status === "booting" ? { ...s, status: "idle" } : s);
+            }
+            else if (msg.type === "result") {
+                setState((s) => ({ ...s, results: [...s.results, { seed: msg.seed, score: msg.score }] }));
+            }
+            else if (msg.type === "progress") {
+                setState((s) => ({ ...s, totalSearched: BigInt(msg.searched), matchingSeeds: BigInt(msg.matching) }));
+            }
+            else if (msg.type === "complete") {
+                setState((s) => ({ ...s, status: msg.status === "Completed" ? "completed" : "error", error: msg.status !== "Completed" ? msg.status : null, totalSearched: BigInt(msg.searched), matchingSeeds: BigInt(msg.matched) }));
+            }
+            else if (msg.type === "cancelled") {
+                setState((s) => ({ ...s, status: "cancelled" }));
+            }
+            else if (msg.type === "error") {
+                setState((s) => ({ ...s, status: "error", error: msg.message }));
+            }
+        };
+        return () => {
+            worker.terminate();
+            workerRef.current = null;
+        };
+    }, [motelyWasmUrl]);
+    const start = useCallback((jaml, count) => {
+        const worker = workerRef.current;
+        if (!worker)
+            return;
+        setState({ results: [], totalSearched: 0n, matchingSeeds: 0n, status: "running", error: null });
+        if (readyRef.current) {
+            worker.postMessage({ type: "start", jaml, count });
+        }
+        else {
+            const orig = worker.onmessage;
+            worker.onmessage = (e) => {
+                orig?.call(worker, e);
+                if (e.data.type === "ready") {
+                    worker.onmessage = orig;
+                    worker.postMessage({ type: "start", jaml, count });
+                }
+            };
+        }
+    }, []);
+    const cancel = useCallback(() => {
+        workerRef.current?.postMessage({ type: "stop" });
+    }, []);
+    return { ...state, start, cancel };
+}

package/dist/ui/panel.d.ts

@@ -1,36 +1,25 @@
 import React from 'react';
-import { type ButtonVariant } from './tokens.js';
 export interface JimboPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     sway?: boolean;
     onBack?: () => void;
-    backLabel?: string;
     hideBack?: boolean;
 }
-export declare const JimboPanel: React.MemoExoticComponent<({ children, className, sway, onBack, backLabel, hideBack, style, ...props }: JimboPanelProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const JimboPanel: React.MemoExoticComponent<({ children, className, sway, onBack, hideBack, style, ...props }: JimboPanelProps) => import("react/jsx-runtime").JSX.Element>;
 export interface JimboInnerPanelProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 export declare const JimboInnerPanel: React.MemoExoticComponent<({ children, className, style, ...props }: JimboInnerPanelProps) => import("react/jsx-runtime").JSX.Element>;
-export interface JimboButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: ButtonVariant;
+export type JimboTone = 'orange' | 'red' | 'blue' | 'green' | 'gold' | 'grey';
+export interface JimboButtonProps {
+    tone?: JimboTone;
     size?: 'xs' | 'sm' | 'md' | 'lg';
     fullWidth?: boolean;
-}
-export declare function JimboButton({ children, variant, size, fullWidth, className, style, disabled, ...props }: JimboButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare function JimboBackButton({ label, ...props }: Omit<JimboButtonProps, 'variant' | 'children'> & {
-    label?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export type BalTone = 'orange' | 'red' | 'blue' | 'green' | 'gold' | 'grey';
-export interface BalButtonProps {
-    tone?: BalTone;
-    size?: 'sm' | 'md' | 'lg';
-    fullWidth?: boolean;
     disabled?: boolean;
     onClick?: () => void;
     style?: React.CSSProperties;
     children?: React.ReactNode;
 }
-export declare function BalButton({ tone, size, fullWidth, disabled, onClick, style, children, }: BalButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare function BalBackButton({ onClick }: {
+export declare function JimboButton({ tone, size, fullWidth, disabled, onClick, style, children, }: JimboButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function JimboBackButton({ onClick }: {
     onClick?: () => void;
 }): import("react/jsx-runtime").JSX.Element;
 export interface JimboModalProps {

package/dist/ui/panel.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, memo } from 'react';
 import { JimboColorOption, JIMBO_ANIMATIONS } from './tokens.js';
-export const JimboPanel = memo(({ children, className = '', sway = false, onBack, backLabel = 'Back', hideBack = false, style, ...props }) => {
+export const JimboPanel = memo(({ children, className = '', sway = false, onBack, hideBack = false, style, ...props }) => {
     const panelRef = useRef(null);
     useEffect(() => {
         if (!sway || !panelRef.current)
@@ -23,51 +23,16 @@ export const JimboPanel = memo(({ children, className = '', sway = false, onBack
             border: `3px solid ${JimboColorOption.BORDER_SILVER}`,
             boxShadow: `0 3px 0 0 ${JimboColorOption.BORDER_SOUTH}`,
             ...style,
-        }, ...props, children: [_jsx("div", { className: "flex-1 overflow-auto", children: children }), onBack && !hideBack && (_jsx("div", { className: "mt-4 pt-2 shrink-0", children: _jsx(JimboBackButton, { onClick: onBack, label: backLabel }) }))] }));
+        }, ...props, children: [_jsx("div", { className: "flex-1 overflow-auto", children: children }), onBack && !hideBack && (_jsx("div", { className: "mt-4 pt-2 shrink-0", children: _jsx(JimboBackButton, { onClick: onBack }) }))] }));
 });
 JimboPanel.displayName = 'JimboPanel';
 export const JimboInnerPanel = memo(({ children, className = '', style, ...props }) => (_jsx("div", { className: 'rounded-lg p-3 ' + className, style: { backgroundColor: JimboColorOption.INNER_BORDER, border: `2px solid ${JimboColorOption.PANEL_EDGE}`, ...style }, ...props, children: children })));
 JimboInnerPanel.displayName = 'JimboInnerPanel';
-// ─── Button ──────────────────────────────────────────────────────────────────
-const VARIANT_COLORS = {
-    primary: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: '#fff' },
-    secondary: { bg: JimboColorOption.BLUE, hover: JimboColorOption.DARK_BLUE, text: '#fff' },
-    danger: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: '#fff' },
-    back: { bg: JimboColorOption.ORANGE, hover: JimboColorOption.DARK_ORANGE, text: '#fff' },
-    ghost: { bg: 'transparent', hover: 'rgba(255,255,255,0.1)', text: '#fff' },
-};
-export function JimboButton({ children, variant = 'primary', size = 'md', fullWidth = false, className = '', style, disabled, ...props }) {
-    const [hovered, setHovered] = useState(false);
-    const [pressed, setPressed] = useState(false);
-    const c = VARIANT_COLORS[variant];
-    const pad = { xs: '0.2rem 0.5rem', sm: '0.25rem 0.75rem', md: '0.375rem 1rem', lg: '0.5rem 1.5rem' }[size];
-    return (_jsx("button", { disabled: disabled, onMouseEnter: () => { if (!disabled)
-            setHovered(true); }, onMouseLeave: () => { setHovered(false); setPressed(false); }, onMouseDown: () => { if (!disabled)
-            setPressed(true); }, onMouseUp: () => setPressed(false), className: className, style: {
-            fontFamily: 'm6x11plus, monospace',
-            backgroundColor: hovered ? c.hover : c.bg,
-            color: c.text,
-            padding: pad,
-            borderRadius: '0.5rem',
-            border: 'none',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            width: fullWidth ? '100%' : undefined,
-            opacity: disabled ? 0.5 : 1,
-            transform: pressed ? 'translateY(3px)' : 'none',
-            boxShadow: pressed ? 'none' : '0 3px 0 0 rgba(0,0,0,0.5)',
-            textShadow: '1px 1px 0 rgba(0,0,0,0.8)',
-            userSelect: 'none',
-            ...style,
-        }, ...props, children: children }));
-}
-export function JimboBackButton({ label = 'Back', ...props }) {
-    return _jsx(JimboButton, { variant: "back", size: "sm", fullWidth: true, ...props, children: label });
-}
-// ─── BalButton ────────────────────────────────────────────────────────────────
-// Canonical Balatro-style flat 2D button.
+// ─── JimboButton ──────────────────────────────────────────────────────────────
+// Canonical flat 2D Balatro-style button.
 // Two-layer: separate shadow div (3px south + 1px east) that disappears on press.
 // Press translates the face onto the shadow. No gradients, no hover color change.
-const BAL_PAIRS = {
+const JIMBO_TONE_PAIRS = {
     orange: [JimboColorOption.ORANGE, JimboColorOption.DARK_ORANGE],
     red: [JimboColorOption.RED, JimboColorOption.DARK_RED],
     blue: [JimboColorOption.BLUE, JimboColorOption.DARK_BLUE],
@@ -75,11 +40,11 @@ const BAL_PAIRS = {
     gold: [JimboColorOption.GOLD, '#8a6a1e'],
     grey: [JimboColorOption.DARK_GREY, JimboColorOption.DARKEST],
 };
-export function BalButton({ tone = 'orange', size = 'md', fullWidth = false, disabled = false, onClick, style, children, }) {
+export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, disabled = false, onClick, style, children, }) {
     const [pressed, setPressed] = useState(false);
-    const [fg, sh] = BAL_PAIRS[tone] ?? BAL_PAIRS.orange;
-    const pad = size === 'sm' ? '4px 10px' : size === 'lg' ? '14px 18px' : '9px 14px';
-    const fs = size === 'sm' ? 12 : size === 'lg' ? 18 : 14;
+    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 fs = size === 'xs' ? 10 : size === 'sm' ? 12 : size === 'lg' ? 18 : 14;
     return (_jsxs("div", { onMouseDown: () => { if (!disabled)
             setPressed(true); }, onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onTouchStart: () => { if (!disabled)
             setPressed(true); }, onTouchEnd: () => setPressed(false), onClick: () => { if (!disabled)
@@ -93,8 +58,8 @@ export function BalButton({ tone = 'orange', size = 'md', fullWidth = false, dis
                     textTransform: 'uppercase', lineHeight: 1.1,
                 }, children: children })] }));
 }
-export function BalBackButton({ onClick }) {
-    return (_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%', padding: '8px 10px 10px' }, children: _jsx(BalButton, { tone: "orange", size: "md", onClick: onClick, style: { width: '66.666%' }, children: "Back" }) }));
+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" }) }));
 }
 export function JimboModal({ children, open, onClose, title, className }) {
     const [visible, setVisible] = useState(open);
@@ -112,5 +77,5 @@ export function JimboModal({ children, open, onClose, title, className }) {
     }, [open]);
     if (!visible)
         return null;
-    return (_jsx("div", { style: { position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem', background: 'rgba(0,0,0,0.7)', opacity, transition: `opacity ${JIMBO_ANIMATIONS.MENU_SINK_DURATION}ms ease` }, onClick: onClose, children: _jsxs(JimboPanel, { sway: true, onBack: onClose, backLabel: "Close", className: 'w-full flex flex-col max-h-[90vh] ' + (className ?? 'max-w-lg'), onClick: (e) => e.stopPropagation(), children: [title && _jsx("h2", { style: { fontFamily: 'm6x11plus, monospace', color: '#fff', textAlign: 'center', margin: '0 0 1rem', fontSize: '1.25rem' }, children: title }), children] }) }));
+    return (_jsx("div", { style: { position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem', background: 'rgba(0,0,0,0.7)', opacity, transition: `opacity ${JIMBO_ANIMATIONS.MENU_SINK_DURATION}ms ease` }, onClick: onClose, children: _jsxs(JimboPanel, { sway: true, onBack: onClose, className: 'w-full flex flex-col max-h-[90vh] ' + (className ?? 'max-w-lg'), onClick: (e) => e.stopPropagation(), children: [title && _jsx("h2", { style: { fontFamily: 'm6x11plus, monospace', color: '#fff', textAlign: 'center', margin: '0 0 1rem', fontSize: '1.25rem' }, children: title }), children] }) }));
 }

package/dist/ui/showcase.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { JimboColorOption } from './tokens.js';
-import { BalButton } from './panel.js';
-import { BalSprite } from './sprites.js';
+import { JimboButton } from './panel.js';
+import { JimboSprite } from './sprites.js';
 const TONE_COLOR = {
     blue: JimboColorOption.BLUE,
     red: JimboColorOption.RED,
@@ -34,7 +34,7 @@ export function Showcase({ hotFilters = [], recentFinds = [], stats = DEFAULT_ST
                                     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(BalSprite, { name: name, width: 28 }) }, j))) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
+                                }, 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',
@@ -50,5 +50,5 @@ export function Showcase({ hotFilters = [], recentFinds = [], stats = DEFAULT_ST
                         }, 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(BalButton, { tone: "green", fullWidth: true, size: "md", onClick: onNewSearch, children: "New Search" }), _jsx(BalButton, { tone: "blue", fullWidth: true, size: "md", onClick: onBrowseFilters, children: "Browse Filters" }), _jsx(BalButton, { tone: "orange", fullWidth: true, size: "md", onClick: onBack, children: "Back" })] })] }));
+                }, 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.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { type SpriteSheetType } from '../sprites/spriteMapper.js';
-export interface BalSpriteProps {
+export interface JimboSpriteProps {
     name: string;
     sheet?: SpriteSheetType;
     width?: number;
     height?: number;
     style?: React.CSSProperties;
 }
-export declare function BalSprite({ name, sheet, width, height, style }: BalSpriteProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function JimboSprite({ name, sheet, width, height, style }: JimboSpriteProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/sprites.js

@@ -12,7 +12,7 @@ const SHEET_META = {
     Enhancers: { cols: 7, rows: 5, assetKey: 'enhancers' },
     Editions: { cols: 5, rows: 1, assetKey: 'editions' },
 };
-export function BalSprite({ name, sheet, width = 40, height, style }) {
+export function JimboSprite({ name, sheet, width = 40, height, style }) {
     const sprite = getSpriteData(name);
     const resolvedSheet = sheet ?? sprite?.type ?? 'Jokers';
     const meta = SHEET_META[resolvedSheet];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,13 +26,11 @@
       "types": "./dist/r3f.d.ts",
       "import": "./dist/r3f.js"
     },
-    "./assets/*": "./assets/*",
     "./package.json": "./package.json"
   },
   "sideEffects": false,
   "files": [
     "dist",
-    "assets",
     "README.md",
     "LICENSE"
   ],