jaml-ui 0.24.2 → 0.24.4

package/README.md

@@ -1,147 +1,145 @@
-# jaml-ui
-
-React components, UI tokens, sprites, and utilities for Balatro/JAML apps.
-
-## Install
-
-```bash
-npm install jaml-ui react react-dom
-```
-
-## Package exports
-
-| 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
-import { JamlGameCard, AnalyzerExplorer, JamlIde } from "jaml-ui";
-import { JimboPanel, JimboButton } from "jaml-ui/ui";
-```
-
-### Game card
-
-```tsx
-import { JamlGameCard } from "jaml-ui";
-
-<JamlGameCard
-  type="joker"
-  card={{ name: "Blueprint", edition: "Foil", isEternal: true, scale: 1.5 }}
-/>
-```
-
-### Jimbo UI (Balatro design system)
-
-```tsx
-import { JimboPanel, JimboButton, JimboModal } from "jaml-ui/ui";
-import { JimboColorOption } from "jaml-ui/ui";
-
-<JimboPanel sway onBack={() => setOpen(false)}>
-  <JimboButton variant="primary" onClick={handleSearch}>Search</JimboButton>
-</JimboPanel>
-```
-
-Available variants: `primary`, `secondary`, `danger`, `back`, `ghost`
-
-### JAML IDE
-
-```tsx
-import { JamlIde } from "jaml-ui";
-
-<JamlIde
-  jaml={jaml}
-  onChange={setJaml}
-  searchResults={results}
-  onSearch={handleSearch}
-  isSearching={isSearching}
-/>
-```
-
-### Analyzer Explorer
-
-```tsx
-import { AnalyzerExplorer } from "jaml-ui";
-
-// antes: AnalyzerAnteView[] — stream from motely-wasm createSearchContext
-<AnalyzerExplorer antes={antes} totalAntes={8} highlights={highlights} />
-```
-
-### JAML Map Preview
-
-```tsx
-import { JamlMapPreview } from "jaml-ui";
-
-<JamlMapPreview jaml={jaml} />
-```
-
-## Asset handling
-
-By default sprites resolve from the package `assets/` directory via `import.meta.url`.
-
-Override at app startup:
-
-```ts
-import { setJamlAssetBaseUrl, clearJamlAssetBaseUrl } from "jaml-ui";
-
-setJamlAssetBaseUrl("/vendor/jaml-ui/");  // custom CDN
-clearJamlAssetBaseUrl();                   // back to default
-```
-
-## Core utilities
-
-```ts
-import { SPRITE_SHEETS, getSpriteData, resolveJamlAssetUrl } from "jaml-ui/core";
-```
-
-## Motely decode helpers
-
-```ts
-import { decodeMotelyItemName, motelyItemTypeName } from "jaml-ui/motely";
-```
-
-## 3D card (optional)
-
-```bash
-npm install three @react-three/fiber @react-three/drei @react-spring/three
-```
-
-```tsx
-import { Card3D } from "jaml-ui/r3f";
-
-<Card3D itemName="Blueprint" />
-```
-
-## Next.js
-
-Import pure helpers from `jaml-ui/core` for server components. For local workspace installs add:
-
-```ts
-// next.config.ts
-const nextConfig = { transpilePackages: ["jaml-ui"] };
-```
-
-## Search Worker Architecture
-
-The library provides `useAnalyzer` to interact with `motely-wasm`'s search context natively.
-**Important:** As of `motely-wasm@14.3.3`, the search worker utilizes Vite's `?worker&inline` pattern. You no longer need to pass `motelyWasmUrl`.
-
-Ensure `motely-wasm` is imported and booted at the module level in your application:
-
-```tsx
-import { boot } from "motely-wasm";
-boot(); // Call early in your application lifecycle
-```
-
-## Peer dependencies
-
-| Peer | Required for |
-|------|-------------|
-| `react`, `react-dom` | All components |
-| `motely-wasm ^14.3.3` | `jaml-ui/motely`, `AnalyzerExplorer`, `useAnalyzer` data |
-| `three`, `@react-three/fiber`, `@react-three/drei`, `@react-spring/three` | `jaml-ui/r3f` only |
+# jaml-ui
+
+React components, UI tokens, sprites, and utilities for Balatro/JAML apps.
+
+## Install
+
+```bash
+npm install jaml-ui react react-dom
+```
+
+## Package exports
+
+| 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
+import { JamlGameCard, AnalyzerExplorer, JamlIde } from "jaml-ui";
+import { JimboPanel, JimboButton } from "jaml-ui/ui";
+```
+
+### Game card
+
+```tsx
+import { JamlGameCard } from "jaml-ui";
+
+<JamlGameCard
+  type="joker"
+  card={{ name: "Blueprint", edition: "Foil", isEternal: true, scale: 1.5 }}
+/>
+```
+
+### Jimbo UI (Balatro design system)
+
+```tsx
+import { JimboPanel, JimboButton, JimboModal } from "jaml-ui/ui";
+import { JimboColorOption } from "jaml-ui/ui";
+
+<JimboPanel sway onBack={() => setOpen(false)}>
+  <JimboButton variant="primary" onClick={handleSearch}>Search</JimboButton>
+</JimboPanel>
+```
+
+Available variants: `primary`, `secondary`, `danger`, `back`, `ghost`
+
+### JAML IDE
+
+```tsx
+import { JamlIde } from "jaml-ui";
+
+<JamlIde
+  jaml={jaml}
+  onChange={setJaml}
+  searchResults={results}
+  onSearch={handleSearch}
+  isSearching={isSearching}
+/>
+```
+
+### Analyzer Explorer
+
+```tsx
+import { AnalyzerExplorer } from "jaml-ui";
+
+// antes: AnalyzerAnteView[] — stream from motely-wasm createSearchContext
+<AnalyzerExplorer antes={antes} totalAntes={8} highlights={highlights} />
+```
+
+### JAML Map Preview
+
+```tsx
+import { JamlMapPreview } from "jaml-ui";
+
+<JamlMapPreview jaml={jaml} />
+```
+
+## Asset handling
+
+By default sprites resolve from the package `assets/` directory via `import.meta.url`.
+
+Override at app startup:
+
+```ts
+import { setJamlAssetBaseUrl, clearJamlAssetBaseUrl } from "jaml-ui";
+
+setJamlAssetBaseUrl("/vendor/jaml-ui/");
+clearJamlAssetBaseUrl();                   // back to default
+```
+
+## Core utilities
+
+```ts
+import { SPRITE_SHEETS, getSpriteData, resolveJamlAssetUrl } from "jaml-ui/core";
+```
+
+## Motely decode helpers
+
+```ts
+import { decodeMotelyItemName, motelyItemTypeName } from "jaml-ui/motely";
+```
+
+## 3D card (optional)
+
+```bash
+npm install three @react-three/fiber @react-three/drei @react-spring/three
+```
+
+```tsx
+import { Card3D } from "jaml-ui/r3f";
+
+<Card3D itemName="Blueprint" />
+```
+
+## Next.js
+
+Import pure helpers from `jaml-ui/core` for server components. For local workspace installs add:
+
+```ts
+// next.config.ts
+const nextConfig = { transpilePackages: ["jaml-ui"] };
+```
+
+## Search Worker Architecture
+
+The library provides `useAnalyzer` to interact with `motely-wasm`'s search context natively.
+Ensure `motely-wasm` is imported and booted at the module level in your application:
+
+```tsx
+import { boot } from "motely-wasm";
+boot(); // Call early in your application lifecycle
+```
+
+## Peer dependencies
+
+| Peer | Required for |
+|------|-------------|
+| `react`, `react-dom` | All components |
+| `motely-wasm ^14.3.3` | `jaml-ui/motely`, `AnalyzerExplorer`, `useAnalyzer` data |
+| `three`, `@react-three/fiber`, `@react-three/drei`, `@react-spring/three` | `jaml-ui/r3f` only |

package/dist/components/DeckSprite.d.ts

@@ -21,6 +21,6 @@ export interface DeckSpriteProps {
  * Balatro deck box sprite — optionally overlaid with a stake sticker.
  * Draws from the Enhancers.png atlas (deck thumbnails live in the bottom
  * two rows) and stickers.png for the stake band. Uses jaml-ui's
- * `resolveJamlAssetUrl` so consumers can override the CDN base.
+ * `resolveJamlAssetUrl` so consumers can override the asset base URL.
  */
 export declare function DeckSprite({ deck, stake, size, className, style }: DeckSpriteProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DeckSprite.js

@@ -40,7 +40,7 @@ const STICKER_ROWS = 3;
  * Balatro deck box sprite — optionally overlaid with a stake sticker.
  * Draws from the Enhancers.png atlas (deck thumbnails live in the bottom
  * two rows) and stickers.png for the stake band. Uses jaml-ui's
- * `resolveJamlAssetUrl` so consumers can override the CDN base.
+ * `resolveJamlAssetUrl` so consumers can override the asset base URL.
  */
 export function DeckSprite({ deck, stake, size = 50, className = '', style }) {
     const deckKey = (deck || 'erratic').toLowerCase().replace(/\s*deck$/, '').trim();

package/dist/components/JamlCurator.d.ts

@@ -1,5 +1,6 @@
 import { type Motely } from "motely-wasm";
 export interface JamlCuratorProps {
     motely: typeof Motely | null;
+    motelyWasmUrl: string;
 }
-export declare function JamlCurator({ motely }: JamlCuratorProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlCurator({ motely, motelyWasmUrl }: JamlCuratorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlCurator.js

@@ -11,10 +11,10 @@ import { useSearch } from "../hooks/useSearch.js";
 import { useAnalyzer } from "../hooks/useAnalyzer.js";
 import { JamlSpeedometer } from "./JamlSpeedometer.js";
 const C = JimboColorOption;
-export function JamlCurator({ motely }) {
+export function JamlCurator({ motely, motelyWasmUrl }) {
     // Use map editor by default to generate JAML
     const [jamlText, setJamlText] = useState("");
-    const search = useSearch();
+    const search = useSearch(motelyWasmUrl);
     const analyzer = useAnalyzer(motely);
     // Search results pagination
     const [resultIndex, setResultIndex] = useState(0);

package/dist/components/JamlIde.js

@@ -2,11 +2,22 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { JamlMapPreview } from "./JamlMapPreview.js";
+import { JamlMapEditor, CategoryMenu, JokerPicker, CategoryPicker, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./jamlMap/index.js";
 import { JamlIdeToolbar } from "./JamlIdeToolbar.js";
 import { JamlIdeVisual } from "./JamlIdeVisual.js";
 import { JamlCodeEditor } from "./JamlCodeEditor.js";
 import { JimboColorOption } from "../ui/tokens.js";
+import { JimboModal } from "../ui/panel.js";
 import { jamlTextToVisualFilter, visualFilterToJamlText } from "../utils/jamlVisualFilter.js";
+const CATEGORY_CONFIG_MAP = {
+    voucher: VOUCHER_PICKER_CONFIG,
+    tag: TAG_PICKER_CONFIG,
+    boss: BOSS_PICKER_CONFIG,
+    tarot: TAROT_PICKER_CONFIG,
+    planet: PLANET_PICKER_CONFIG,
+    spectral: SPECTRAL_PICKER_CONFIG,
+    pack: PACK_PICKER_CONFIG,
+};
 function TallyBar({ value, max }) {
     const pct = max > 0 ? Math.min(1, value / max) : 0;
     return (_jsx("div", { style: { flex: 1, height: 4, borderRadius: 999, background: `${JimboColorOption.DARK_GREY}88`, overflow: "hidden" }, children: _jsx("div", { style: {
@@ -127,6 +138,33 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
         }
     };
     const results = useMemo(() => searchResults, [searchResults]);
+    // ── Add-clause picker state ──────────────────────────────────────────────
+    const [addZone, setAddZone] = useState(null);
+    const [pickerFlow, setPickerFlow] = useState("category");
+    const handleAddClause = (zone) => {
+        setAddZone(zone);
+        setPickerFlow("category");
+    };
+    const handlePickerSelect = (sel) => {
+        if (!addZone)
+            return;
+        const clause = {
+            id: `${Date.now()}-${Math.random()}`,
+            type: sel.clauseKey,
+            value: sel.value,
+            label: sel.value,
+        };
+        handleVisualFilterChange({ ...activeFilter, [addZone]: [...activeFilter[addZone], clause] });
+        setAddZone(null);
+    };
+    const handlePickerClose = () => {
+        if (pickerFlow !== "category") {
+            setPickerFlow("category");
+        }
+        else {
+            setAddZone(null);
+        }
+    };
     return (_jsxs("div", { className: className, style: {
             display: "flex",
             flexDirection: "column",
@@ -147,5 +185,5 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
                     padding: "10px 14px",
                     borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
                     background: JimboColorOption.TEAL_GREY,
-                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: "normal", fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: "Jimbo's Ante Markup Language" })] }), actions ? _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: actions }) : null] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: "auto", background: JimboColorOption.DARKEST }, children: [mode === "visual" ? (_jsx(JamlIdeVisual, { filter: activeFilter, onChange: handleVisualFilterChange })) : null, mode === "code" ? (_jsx(JamlCodeEditor, { value: text, onChange: handleTextChange, placeholder: codePlaceholder })) : null, mode === "map" ? _jsx(JamlMapPreview, { jaml: text }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results, jaml: text }) })) : null] })] }));
+                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: "normal", fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: "Jimbo's Ante Markup Language" })] }), actions ? _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: actions }) : null] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: "auto", background: JimboColorOption.DARKEST }, children: [mode === "visual" ? (_jsx(JamlIdeVisual, { filter: activeFilter, onChange: handleVisualFilterChange, onAddClause: handleAddClause })) : null, mode === "code" ? (_jsx(JamlCodeEditor, { value: text, onChange: handleTextChange, placeholder: codePlaceholder })) : null, mode === "map" ? _jsx(JamlMapEditor, { onChange: handleTextChange }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results, jaml: text }) })) : null] }), _jsx(JimboModal, { open: addZone !== null, onClose: handlePickerClose, children: addZone !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: (cat) => setPickerFlow(cat) })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handlePickerSelect, onCancel: handlePickerClose })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handlePickerSelect, onCancel: handlePickerClose }))) })] }));
 }

package/dist/components/JamlMapPreview.js

@@ -6,9 +6,9 @@ import { JimboColorOption } from "../ui/tokens.js";
 import { extractVisualJamlItems, } from "../utils/jamlMapPreview.js";
 const C = JimboColorOption;
 const ZONES = {
-    must: { label: "MUST", color: C.BLUE, glow: C.BLUE },
-    should: { label: "SHOULD", color: C.RED, glow: C.GOLD },
-    mustNot: { label: "MUST NOT", color: C.ORANGE, glow: C.ORANGE },
+    must: { label: "Must", color: C.BLUE, glow: C.BLUE },
+    should: { label: "Should", color: C.RED, glow: C.GOLD },
+    mustNot: { label: "Must Not", color: C.ORANGE, glow: C.ORANGE },
 };
 const SECTION_ORDER = ["must", "should", "mustNot"];
 const SHEET_FOR_VISUAL = {
@@ -22,12 +22,12 @@ const SHEET_FOR_VISUAL = {
  * Pulsing glow animation for hits.
  * Design ref: assets/...DesignsV2/src/v2/GlowRing.css
  */
-const GLOW_ANIMATION = `
-@keyframes j-glow-pulse {
-  0% { box-shadow: 0 0 0 1px var(--glow-color), 0 0 4px var(--glow-color); opacity: 0.8; }
-  50% { box-shadow: 0 0 0 2px var(--glow-color), 0 0 12px var(--glow-color); opacity: 1; }
-  100% { box-shadow: 0 0 0 1px var(--glow-color), 0 0 4px var(--glow-color); opacity: 0.8; }
-}
+const GLOW_ANIMATION = `
+@keyframes j-glow-pulse {
+  0% { box-shadow: 0 0 0 1px var(--glow-color), 0 0 4px var(--glow-color); opacity: 0.8; }
+  50% { box-shadow: 0 0 0 2px var(--glow-color), 0 0 12px var(--glow-color); opacity: 1; }
+  100% { box-shadow: 0 0 0 1px var(--glow-color), 0 0 4px var(--glow-color); opacity: 0.8; }
+}
 `;
 function ClausePill({ item, color, glow, matchCount }) {
     const isHit = matchCount > 0;

package/dist/components/JamlSpeedometer.js

@@ -20,6 +20,51 @@ function formatSpeed(value) {
  */
 export function JamlSpeedometer({ seedsPerSecond, totalSearched, matchingSeeds, status, className = "", style, }) {
     const active = status === "running" || status === "booting";
-    const statusTone = status === "error" ? "red" : active ? "green" : "grey";
-    return (_jsxs("div", { className: `j-stat-grid ${className}`, style: style, children: [_jsxs("div", { children: [_jsx("div", { className: "j-stat-grid__value", children: _jsx(JimboText, { size: "md", tone: active ? "gold" : "grey", children: formatSpeed(seedsPerSecond) }) }), _jsx("div", { className: "j-stat-grid__label", children: "speed" })] }), _jsxs("div", { children: [_jsx("div", { className: "j-stat-grid__value", children: _jsx(JimboText, { size: "md", tone: "white", children: formatCount(totalSearched) }) }), _jsx("div", { className: "j-stat-grid__label", children: "searched" })] }), _jsxs("div", { children: [_jsx("div", { className: "j-stat-grid__value", children: _jsx(JimboText, { size: "md", tone: Number(matchingSeeds) > 0 ? "green" : "grey", children: formatCount(matchingSeeds) }) }), _jsx("div", { className: "j-stat-grid__label", children: "matches" })] })] }));
+    const statusTone = status === "error"
+        ? "red"
+        : status === "completed"
+            ? "green"
+            : status === "cancelled"
+                ? "orange"
+                : active
+                    ? "gold"
+                    : "grey";
+    const statusLabel = status === "booting"
+        ? "booting"
+        : status === "running"
+            ? "searching"
+            : status === "completed"
+                ? "done"
+                : status === "cancelled"
+                    ? "cancelled"
+                    : status === "error"
+                        ? "error"
+                        : "idle";
+    const rootStyle = {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 8,
+        padding: "8px 10px",
+        borderRadius: 12,
+        border: "1px solid var(--j-panel-edge, rgba(255,255,255,0.12))",
+        background: "rgba(0,0,0,0.28)",
+        ...style,
+    };
+    const dotStyle = {
+        width: 8,
+        height: 8,
+        borderRadius: 999,
+        background: status === "error"
+            ? "var(--j-red, #ff4c40)"
+            : status === "completed"
+                ? "var(--j-green, #429f79)"
+                : status === "cancelled"
+                    ? "var(--j-orange, #ff9800)"
+                    : active
+                        ? "var(--j-gold, #e4b643)"
+                        : "var(--j-grey, #8b8b8b)",
+        flexShrink: 0,
+    };
+    return (_jsxs("div", { className: className, style: rootStyle, children: [_jsx("span", { style: dotStyle, "aria-hidden": "true" }), _jsx(JimboText, { size: "sm", tone: statusTone, children: statusLabel }), _jsx(JimboText, { size: "sm", tone: active ? "gold" : "grey", children: formatSpeed(seedsPerSecond) }), _jsxs(JimboText, { size: "sm", tone: "white", children: [formatCount(totalSearched), " searched"] }), _jsxs(JimboText, { size: "sm", tone: Number(matchingSeeds) > 0 ? "green" : "grey", children: [formatCount(matchingSeeds), " matches"] })] }));
 }

package/dist/components/jamlMap/JamlMapEditor.d.ts

@@ -1,4 +1,4 @@
-import { type SlotSelection, type JamlZone } from "./MysterySlot.js";
+import { type SlotSelection, type JamlZone, type SlotCategory } from "./MysterySlot.js";
 export interface JamlMapEditorProps {
     /** Initial zone for the demo. */
     zone?: JamlZone;
@@ -9,3 +9,6 @@ export interface MapSlotSelection extends SlotSelection {
     zone: JamlZone;
 }
 export declare function JamlMapEditor({ zone: initialZone, onChange, }: JamlMapEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryMenu({ onSelect, }: {
+    onSelect: (cat: SlotCategory) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/jamlMap/JamlMapEditor.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useMemo, useEffect } from "react";
+import { useState, useCallback, useMemo, useRef } from "react";
 import { MysterySlot } from "./MysterySlot.js";
 import { JokerPicker } from "./JokerPicker.js";
 import { CategoryPicker, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./CategoryPicker.js";
@@ -42,6 +42,8 @@ const CATEGORY_CONFIG_MAP = {
 };
 // ─── Component ───────────────────────────────────────────────────────────────
 export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
     const [currentZone, setCurrentZone] = useState(initialZone);
     const [ante, setAnte] = useState(1);
     const [antesState, setAntesState] = useState({});
@@ -60,6 +62,7 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
             const nextAnte = { ...next[anteIndex] };
             delete nextAnte[id];
             next[anteIndex] = nextAnte;
+            onChangeRef.current?.(buildJamlText(next));
             return next;
         });
     }, []);
@@ -74,6 +77,7 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
             const nextAnte = { ...(next[activeSlot.ante] || {}) };
             nextAnte[activeSlot.id] = { ...selection, zone: currentZone };
             next[activeSlot.ante] = nextAnte;
+            onChangeRef.current?.(buildJamlText(next));
             return next;
         });
         setActiveSlot(null);
@@ -93,19 +97,23 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
         setActiveSlot(null);
     }, []);
     const jamlText = useMemo(() => buildJamlText(antesState), [antesState]);
-    useEffect(() => {
-        onChange?.(jamlText);
-    }, [jamlText, onChange]);
+    const handleScrollAttach = useCallback((node) => {
+        if (!node)
+            return;
+        const firstChild = node.children[1];
+        if (firstChild)
+            node.scrollTop = firstChild.offsetTop;
+    }, []);
     const renderSlot = (anteIndex, id, width, sheetType, forceCategory) => {
         const sel = (antesState[anteIndex] || {})[id];
         return (_jsx(MysterySlot, { zone: sel ? sel.zone : currentZone, sheetType: sheetType, selection: sel, width: width, onTap: () => handleSlotTap(anteIndex, id, forceCategory), onClear: sel ? () => handleSlotClear(anteIndex, id) : undefined, style: { flexShrink: 0 } }, id));
     };
-    return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: [_jsxs("div", { style: { position: "sticky", top: 0, zIndex: 10, background: C.DARKEST, padding: "max(32px, env(safe-area-inset-top, 32px)) 0 8px 0", borderBottom: `2px solid ${C.PANEL_EDGE}` }, children: [_jsx(JimboText, { size: "md", tone: "white", style: { textAlign: "center", marginBottom: 12 }, children: "JAML VISUAL BUILDER" }), _jsx("div", { className: "j-flex j-gap-sm", style: { justifyContent: "center" }, children: ["must", "should", "mustnot"].map((z) => (_jsx(JimboButton, { tone: currentZone === z ? ZONE_TONE[z] : "blue", size: "sm", onClick: () => setCurrentZone(z), style: { opacity: currentZone === z ? 1 : 0.4 }, children: ZONE_LABEL[z] }, z))) })] }), _jsx("div", { className: "hide-scrollbar", style: {
+    return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: [_jsxs("div", { style: { position: "sticky", top: 0, zIndex: 10, background: C.DARKEST, padding: "max(32px, env(safe-area-inset-top, 32px)) 0 8px 0", borderBottom: `2px solid ${C.PANEL_EDGE}` }, children: [_jsx(JimboText, { size: "md", tone: "white", style: { textAlign: "center", marginBottom: 12 }, children: "Jaml Visual Builder" }), _jsx("div", { className: "j-flex j-gap-sm", style: { justifyContent: "center" }, children: ["must", "should", "mustnot"].map((z) => (_jsx(JimboButton, { tone: currentZone === z ? ZONE_TONE[z] : "blue", size: "sm", onClick: () => setCurrentZone(z), style: { opacity: currentZone === z ? 1 : 0.4 }, children: ZONE_LABEL[z] }, z))) })] }), _jsx("div", { ref: handleScrollAttach, className: "hide-scrollbar", style: {
                     flex: 1,
                     overflowY: "auto",
                     scrollSnapType: "y mandatory",
                     scrollBehavior: "smooth"
-                }, children: [1, 2, 3, 4, 5, 6, 7, 8].map((a) => (_jsxs("div", { style: {
+                }, children: Array.from({ length: 40 }, (_, i) => i).map((a) => (_jsxs("div", { style: {
                         scrollSnapAlign: "start",
                         padding: "24px 8px 64px 8px",
                         minHeight: "100%", // ensuring each ante takes at least full viewport height to snap cleanly
@@ -113,10 +121,10 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
                         flexDirection: "column",
                         gap: 24,
                         borderBottom: `2px solid ${C.DARK_GREY}`
-                    }, children: [_jsxs(JimboText, { size: "md", tone: "white", style: { textAlign: "center", marginBottom: 8 }, children: ["ANTE ", a] }), _jsxs("div", { className: "j-flex j-justify-between j-items-end", children: [_jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "VOUCHER" }), renderSlot(a, `ante_${a}_voucher`, 42, "Vouchers", "voucher")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "SMALL" }), renderSlot(a, `ante_${a}_tag_small`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BIG" }), renderSlot(a, `ante_${a}_tag_big`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BOSS" }), renderSlot(a, `ante_${a}_boss`, 42, "BlindChips", "boss")] })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "SHOP ITEMS" }), _jsx("div", { className: "j-flex hide-scrollbar j-gap-sm", style: { overflowX: "auto", paddingBottom: 8 }, children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => renderSlot(a, `ante_${a}_shop_${i}`, 52, "Jokers")) })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "PACKS" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [1, 2, 3, 4, 5, 6].map(i => renderSlot(a, `ante_${a}_pack_${i}`, 64, "Boosters", "pack")) })] })] }, a))) }), _jsx(JimboModal, { open: activeSlot !== null, onClose: handlePickerCancel, title: pickerFlow === "category" ? "Select Category" : undefined, className: "j-picker-modal", children: activeSlot !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel }))) })] }));
+                    }, children: [_jsxs(JimboText, { size: "md", tone: "white", style: { textAlign: "center", marginBottom: 8 }, children: ["Ante ", a] }), _jsxs("div", { className: "j-flex j-justify-between j-items-end", children: [_jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Voucher" }), renderSlot(a, `ante_${a}_voucher`, 42, "Vouchers", "voucher")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Small" }), renderSlot(a, `ante_${a}_tag_small`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Big" }), renderSlot(a, `ante_${a}_tag_big`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Boss" }), renderSlot(a, `ante_${a}_boss`, 42, "BlindChips", "boss")] })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "Shop Items" }), _jsx("div", { className: "j-flex hide-scrollbar j-gap-sm", style: { overflowX: "auto", paddingBottom: 8 }, children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => renderSlot(a, `ante_${a}_shop_${i}`, 52, "Jokers")) })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "Packs" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [1, 2, 3, 4, 5, 6].map(i => renderSlot(a, `ante_${a}_pack_${i}`, 64, "Boosters", "pack")) })] })] }, a))) }), _jsx(JimboModal, { open: activeSlot !== null, onClose: handlePickerCancel, title: pickerFlow === "category" ? "Select Category" : undefined, className: "j-picker-modal", children: activeSlot !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel }))) })] }));
 }
 // ─── Category Selection Menu ─────────────────────────────────────────────────
-function CategoryMenu({ onSelect, }) {
+export function CategoryMenu({ onSelect, }) {
     return (_jsx("div", { className: "hide-scrollbar", style: {
             display: "flex",
             flexDirection: "column",

package/dist/components/jamlMap/index.d.ts

@@ -1,4 +1,4 @@
 export { MysterySlot, type MysterySlotProps, type SlotSelection, type SlotCategory, type JamlZone } from "./MysterySlot.js";
 export { JokerPicker, type JokerPickerProps, type JokerRarity } from "./JokerPicker.js";
-export { JamlMapEditor, type JamlMapEditorProps } from "./JamlMapEditor.js";
+export { JamlMapEditor, CategoryMenu, type JamlMapEditorProps } from "./JamlMapEditor.js";
 export { CategoryPicker, type CategoryPickerConfig, type CategoryPickerProps, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./CategoryPicker.js";

package/dist/components/jamlMap/index.js

@@ -1,4 +1,4 @@
 export { MysterySlot } from "./MysterySlot.js";
 export { JokerPicker } from "./JokerPicker.js";
-export { JamlMapEditor } from "./JamlMapEditor.js";
+export { JamlMapEditor, CategoryMenu } from "./JamlMapEditor.js";
 export { CategoryPicker, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./CategoryPicker.js";