jaml-ui 2.5.1 → 3.0.2

package/README.md

@@ -1,8 +1,12 @@
 # jaml-ui
 
-React components, UI tokens, sprites, and utilities for Balatro/JAML seed-finder apps.
+Zero-dependency JSON-to-React engine (`json-render`) + Balatro card sprite rendering for MCP Apps.
 
-Wraps [motely-wasm](https://www.npmjs.com/package/motely-wasm) — the Bootsharp-built WebAssembly port of the C# Motely seed engine — and ships a Balatro-styled design system called **Jimbo**.
+## What's inside
+
+- **`json-render`** — a tiny, zero-dep JSON-to-React engine in `src/json-render`. A JsonNode tree + a registry = rendered UI. Ships with a Balatro catalog (`Panel`, `Stack`, `Grid`, `SeedCard`, `SearchStats`, `JamlGameCard`, ...).
+- **Balatro card sprites** — canvas-based `JamlGameCard`, `StandardCard`, `DeckSprite`, plus sprite metadata.
+- **MCP App example** — `examples/mcp-seed-finder` is a single-file MCP App that talks to an MCP server and renders search results with `json-render`.
 
 ## Install
 
@@ -10,252 +14,61 @@ Wraps [motely-wasm](https://www.npmjs.com/package/motely-wasm) — the Bootsharp
 npm install jaml-ui motely-wasm react react-dom
 ```
 
-The CSS is loaded automatically as a side-effect import. No PostCSS, no Tailwind, no config.
-
-## Boot motely-wasm before rendering
-
-`motely-wasm` is a Bootsharp module. Boot it once at app startup, before React mounts. Two requirements:
-
-1. Top-level `await bootsharp.boot(<bin path>)` in your entry point.
-2. The `motely-wasm/bin/*` files must be served at that path. Copy them into your `public/` (Vite) or wire a static route (Next.js).
-
-```ts
-// src/main.tsx
-import "jaml-ui/jimbo.css"; // already side-effect-imported by jaml-ui; safe either way
-import { createRoot } from "react-dom/client";
-import bootsharp from "motely-wasm";
-import App from "./App";
-
-await bootsharp.boot("/motely-wasm/bin");
-createRoot(document.getElementById("root")!).render(<App />);
-```
-
-Vite serves `/motely-wasm/bin` if you copy `node_modules/motely-wasm/bin` into `public/motely-wasm/bin/`. See `examples/seed-finder` for a working setup.
+`motely-wasm` is a peer dependency — boot it once before rendering.
 
-> If you can't use top-level await (legacy Webpack, server components), the hooks (`useSearch`, `useAnalyzer`, `useJamlLibrary`) inline a Standby-guard and will boot lazily on first call. The top-level pattern is still preferred — it removes the boot wait from the first interaction.
-
-## Quick start — a real seed finder in ~30 lines
+## Quick start — render JSON UI
 
 ```tsx
-import { useState } from "react";
-import { JamlIde, useSearch, type JamlIdeSearchResult } from "jaml-ui";
+import { render, balatroRegistry } from "jaml-ui";
 
-const STARTER_JAML = `must:\n  - joker: Blueprint\n    antes: [1,2,3,4,5,6,7,8]\ndeck: Red\nstake: White\n`;
+const spec = {
+  type: "Panel",
+  props: { title: "Hello" },
+  children: [
+    { type: "Text", props: { body: "Seed: ALEEB", variant: "title" } },
+    { type: "JamlGameCard", props: { type: "joker", card: { name: "Blueprint" } } },
+  ],
+};
 
 export default function App() {
-  const [jaml, setJaml] = useState(STARTER_JAML);
-  const search = useSearch();
-
-  const results: JamlIdeSearchResult[] = search.results.map((r) => ({
-    seed: r.seed,
-    score: r.score,
-    tallyColumns: r.tallyColumns,
-  }));
-
-  return (
-    <JamlIde
-      jaml={jaml}
-      onChange={setJaml}
-      searchResults={results}
-      isSearching={search.status === "running"}
-      onSearch={() => search.startAesthetic(jaml, /* aesthetic */ 0)}
-    />
-  );
+  return <div>{render(spec, balatroRegistry)}</div>;
 }
 ```
 
-That's the whole integration. `useSearch` handles boot guarding, search lifecycle, progress events, and result accumulation; `JamlIde` renders the editor, visual filter, results column, and toolbar.
-
-## Package exports
-
-Four subpath entries, each a barrel. The public API is exactly what they re-export.
-
-| Entry | What's in it | When you import it |
-| ----- | ------------ | ------------------ |
-| `jaml-ui` | Game cards, JAML IDE, search hooks | The default surface — most apps only need this |
-| `jaml-ui/ui` | Jimbo design system (JimboPanel, JimboButton, JimboModal, tokens) | Building custom Balatro-styled UI |
-| `jaml-ui/core` | Sprite metadata, asset URLs, canvas `Layer` — pure, **no React, no motely-wasm** | Next.js server components, server-side rendering |
-| `jaml-ui/motely` | Re-exports `bootsharp` + `Motely` from motely-wasm, plus item-decode helpers and `useJamlLibrary` | Direct motely-wasm access, file-system mount |
+## Boot motely-wasm
 
 ```tsx
-import { JamlGameCard, useSearch } from "jaml-ui";
-import { JimboPanel, JimboButton, JimboColorOption } from "jaml-ui/ui";
-import { resolveJamlAssetUrl, SPRITE_SHEETS } from "jaml-ui/core";
-import { Motely, decodeMotelyItemName } from "jaml-ui/motely";
-```
+import bootsharp from "motely-wasm";
 
-## Examples
+await bootsharp.boot("/motely-wasm/bin");
+```
 
-| Path | What it shows |
-| ---- | ------------- |
-| `examples/seed-finder` | End-to-end Vite app: boots motely-wasm, renders `JamlIde`, runs real searches. Copy it, point it at your published `jaml-ui`, ship. |
+## MCP App example
 
 ```bash
-cd examples/seed-finder
+cd examples/mcp-seed-finder
 pnpm install
 pnpm dev
 ```
 
-## Core components
-
-### Game card
-
-```tsx
-import { JamlGameCard } from "jaml-ui";
-
-<JamlGameCard
-  type="joker"
-  card={{ name: "Blueprint", edition: "Foil", isEternal: true, scale: 1.5 }}
-/>
-```
-
-### JAML IDE
-
-The full editor — code view, visual filter, results column, toolbar — in one component:
-
-```tsx
-import { JamlIde } from "jaml-ui";
-
-<JamlIde
-  jaml={jaml}
-  onChange={setJaml}
-  searchResults={results}
-  onSearch={handleSearch}
-  isSearching={isSearching}
-/>
-```
-
-### Standalone code editor
-
-```tsx
-import { JamlCodeEditor } from "jaml-ui";
-
-<JamlCodeEditor value={jaml} onChange={setJaml} />
-```
-
-### JAML map preview
-
-```tsx
-import { JamlMapPreview } from "jaml-ui";
-
-<JamlMapPreview jaml={jaml} />
-```
-
-### Jimbo UI primitives
-
-```tsx
-import { JimboPanel, JimboButton, JimboModal } from "jaml-ui/ui";
-
-<JimboPanel sway onBack={() => setOpen(false)}>
-  <JimboButton variant="primary" onClick={handleSearch}>Search</JimboButton>
-</JimboPanel>
-```
-
-Button variants: `primary`, `secondary`, `danger`, `back`, `ghost`.
-
-## Hooks
-
-All hooks lazily boot motely-wasm on first call if you skipped the top-level `bootsharp.boot()`.
-
-### `useSearch()` — run JAML filter searches
-
-```ts
-import { useSearch } from "jaml-ui";
-
-const {
-  results,           // SearchResult[]
-  status,            // "idle" | "running" | "completed" | "cancelled" | "error"
-  totalSearched,     // bigint
-  matchingSeeds,     // bigint
-  seedsPerSecond,    // number
-  error,             // string | null
-  startAesthetic,    // (jaml, aesthetic) => Promise<void>
-  startSeedList,     // (jaml, seeds[]) => Promise<void>
-  startRandom,       // (jaml, count) => Promise<void>
-  cancel,
-  reset,
-  clearError,
-} = useSearch();
-```
-
-### `useAnalyzer()` — analyze a known seed
-
-```ts
-import { useAnalyzer } from "jaml-ui";
-const { status, result, error, analyze } = useAnalyzer();
-await analyze(jaml, "ALEEB");
-```
-
-### `useSearchPool()` — multi-worker parallel search
-
-For long searches, spreads work across a pool of web workers.
-
-### `useJamlLibrary()` — browser file picker for `.jaml` files
-
-```tsx
-import { useJamlLibrary } from "jaml-ui/motely";
-
-const library = useJamlLibrary();
-await library.mount();                              // prompts user to pick a folder
-const source = await library.loadFile(library.files[0]);
-await library.saveFile("filters/example.jaml", source);
-```
-
-Requires `@rewaffle/bootsharp-file-system` (optional peer). When absent, `status === "unsupported"`.
-
-## Core utilities (no React)
-
-```ts
-import { SPRITE_SHEETS, getSpriteData, resolveJamlAssetUrl, Layer } from "jaml-ui/core";
-```
+## Package exports
 
-`resolveJamlAssetUrl(key)` returns a bundled asset URL — Vite imports the PNGs at build time, so consumers don't have to wire any base URL.
+| Entry | What's in it |
+| ----- | ------------ |
+| `jaml-ui` | json-render engine, Balatro registry/catalog, card components |
+| `jaml-ui/ui` | Jimbo CSS tokens only |
+| `jaml-ui/core` | Sprite metadata, asset URLs, canvas `Layer` — no React, no motely-wasm |
+| `jaml-ui/motely` | `bootsharp` + `Motely` re-exports, item decoders |
 
-## Motely decode helpers
+## Scripts
 
-```ts
-import {
-  decodeMotelyItem,
-  decodeMotelyItemName,
-  motelyItemDisplayName,
-  motelyItemTypeName,
-} from "jaml-ui/motely";
+```bash
+pnpm build      # Vite library build → dist/
+pnpm dev        # vite build --watch
+pnpm typecheck  # tsc --noEmit
+pnpm lint       # ESLint
 ```
 
-## Next.js
-
-- Use `jaml-ui/core` from server components — it has no React and no motely-wasm imports.
-- Use `jaml-ui` / `jaml-ui/motely` only from client components (mark the file with `"use client"`).
-- Serve `motely-wasm/bin` at `/motely-wasm/bin` via a public folder or a catch-all route, then call `await bootsharp.boot("/motely-wasm/bin")` from a client component or your client entry script.
-- If you're consuming this as a workspace package:
-
-  ```ts
-  // next.config.ts
-  const nextConfig = { transpilePackages: ["jaml-ui"] };
-  ```
-
-## Peer dependencies
-
-| Peer | Required for | Optional? |
-| ---- | ------------ | --------- |
-| `react`, `react-dom` | All components | No |
-| `motely-wasm` | All search/analyzer/decode functionality | No (direct dep) |
-| `react-icons` | Components that render icons | Yes |
-| `@rewaffle/bootsharp-file-system` | `useJamlLibrary` folder mount | Yes |
-
-## Troubleshooting
-
-- **"Motely is not initialized"** — you didn't call `bootsharp.boot()` before rendering, and the lazy guard hasn't fired yet. Add `await bootsharp.boot("/motely-wasm/bin")` to your entry point.
-- **`404 /motely-wasm/bin/...`** — copy `node_modules/motely-wasm/bin/` into `public/motely-wasm/bin/` (Vite) or add a static route (Next.js).
-- **CSS not applied** — make sure you imported from `jaml-ui` or `jaml-ui/ui` at least once. Both pull in `jimbo.css` as a side effect. If your bundler strips side-effect imports, add `import "jaml-ui/jimbo.css"`.
-- **Storybook hangs on boot** — Storybook's `staticDirs` already serves `motely-wasm/bin`; see `.storybook/main.ts` for the pattern.
-
-## Fonts
-
-Jimbo UI uses **m6x11** and **m6x11plus** (`.ttf` in `assets/fonts/`). Fonts by [Daniel Linssen](https://managore.itch.io/) — free to use with attribution. If you ship an app that shows this UI, include that credit in your README or notices.
-
-Code blocks use **JetBrains Mono** / system monospace via `--j-font-code`, not the pixel fonts.
-
 ## License
 
-MIT — see [LICENSE](LICENSE). Font files are separate third-party assets; attribution to Daniel Linssen is required when redistributing or displaying the pixel fonts.
+MIT — see [LICENSE](LICENSE). Font files in `assets/fonts/` are third-party assets by Daniel Linssen; attribution required when redistributing or displaying the pixel fonts.

package/dist/chunks/Layer-B5y9UIAt.js

@@ -0,0 +1,19 @@
+var n = Object.defineProperty;
+var m = (r, s, t) => s in r ? n(r, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[s] = t;
+var o = (r, s, t) => m(r, typeof s != "symbol" ? s + "" : s, t);
+class d {
+  constructor({ pos: s, name: t, order: e, source: a, rows: i, columns: c, animated: h = !1 }) {
+    o(this, "pos");
+    o(this, "name");
+    o(this, "order");
+    o(this, "source");
+    o(this, "rows");
+    o(this, "columns");
+    o(this, "animated");
+    this.pos = s, this.name = t, this.order = e, this.source = a, this.rows = i, this.columns = c, this.animated = h;
+  }
+}
+export {
+  d as L
+};
+//# sourceMappingURL=Layer-B5y9UIAt.js.map

package/dist/chunks/Layer-B5y9UIAt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layer-B5y9UIAt.js","sources":["../../src/render/Layer.ts"],"sourcesContent":["/**\n * Layer class for sprite-based card rendering.\n * Encapsulates the source, position, and dimensions of a sprite layer.\n */\nexport interface LayerOptions {\n    pos: { x: number; y: number };\n    name: string;\n    order: number;\n    source: string;\n    rows: number;\n    columns: number;\n    animated?: boolean;\n}\n\nexport class Layer {\n    pos: { x: number; y: number };\n    name: string;\n    order: number;\n    source: string;\n    rows: number;\n    columns: number;\n    animated: boolean;\n\n    constructor({ pos, name, order, source, rows, columns, animated = false }: LayerOptions) {\n        this.pos = pos;\n        this.name = name;\n        this.order = order;\n        this.source = source;\n        this.rows = rows;\n        this.columns = columns;\n        this.animated = animated;\n    }\n}\n"],"names":["Layer","pos","name","order","source","rows","columns","animated","__publicField"],"mappings":";;;AAcO,MAAMA,EAAM;AAAA,EASf,YAAY,EAAE,KAAAC,GAAK,MAAAC,GAAM,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,GAAS,UAAAC,IAAW,MAAuB;AARzF,IAAAC,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AAGI,SAAK,MAAMP,GACX,KAAK,OAAOC,GACZ,KAAK,QAAQC,GACb,KAAK,SAASC,GACd,KAAK,OAAOC,GACZ,KAAK,UAAUC,GACf,KAAK,WAAWC;AAAA,EACpB;AACJ;"}