jaml-ui 0.24.16 → 0.24.18

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, useRef } from "react";
+import { useState, useCallback, useRef, useEffect } 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";
@@ -31,7 +31,6 @@ const ZONE_LABEL = {
     mustnot: "Avoid",
 };
 const CATEGORY_CONFIG_MAP = {
-    joker: VOUCHER_PICKER_CONFIG,
     voucher: VOUCHER_PICKER_CONFIG,
     tag: TAG_PICKER_CONFIG,
     boss: BOSS_PICKER_CONFIG,
@@ -43,15 +42,15 @@ const CATEGORY_CONFIG_MAP = {
 // ─── Component ───────────────────────────────────────────────────────────────
 export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
     const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    });
     const [currentZone, setCurrentZone] = useState(initialZone);
-    const [ante, setAnte] = useState(1);
     const [antesState, setAntesState] = useState({});
     const [activeSlot, setActiveSlot] = useState(null);
     const [activePackDetail, setActivePackDetail] = useState(null);
     const [pickerFlow, setPickerFlow] = useState("category");
     const [activePackSelection, setActivePackSelection] = useState(null);
-    const currentAnteSelections = antesState[ante] || {};
     const handleSlotTap = useCallback((anteIndex, id, forceCategory) => {
         const existing = (antesState[anteIndex] || {})[id];
         if (forceCategory === "pack" && existing?.packName) {
@@ -131,7 +130,6 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
         setActiveSlot(null);
         setActivePackDetail(null);
     }, []);
-    const jamlText = useMemo(() => buildJamlText(antesState), [antesState]);
     const activePackDetailSelection = activePackDetail
         ? (antesState[activePackDetail.ante] || {})[activePackDetail.id]
         : undefined;
@@ -154,7 +152,7 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
                     scrollBehavior: "smooth",
                     WebkitOverflowScrolling: "touch",
                     overscrollBehaviorY: "contain",
-                }, children: Array.from({ length: 40 }, (_, i) => i).map((a) => (_jsxs("div", { style: {
+                }, children: Array.from({ length: 8 }, (_, i) => i + 1).map((a) => (_jsxs("div", { style: {
                         scrollSnapAlign: "start",
                         scrollSnapStop: "always",
                         padding: "24px 8px 64px 8px",
@@ -164,10 +162,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-col j-gap-sm", children: getPackRows(a).map((row, rowIndex) => (_jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "nowrap" }, children: row.map(i => renderSlot(a, `ante_${a}_pack_${i}`, 64, "Boosters", "pack")) }, rowIndex))) })] })] }, a))) }), _jsx(JimboModal, { open: activeSlot !== null, onClose: handlePickerCancel, title: pickerFlow === "category" ? "Select Category" : undefined, className: "j-picker-modal", children: activeSlot !== null && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsxs("div", { className: "j-inner-panel", style: { padding: "8px 10px", marginBottom: 2 }, children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { display: "block", marginBottom: 6 }, children: "This pick will be added as" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: ["must", "should", "mustnot"].map((z) => (_jsx(JimboButton, { tone: currentZone === z ? ZONE_TONE[z] : "grey", size: "xs", onClick: () => setCurrentZone(z), children: ZONE_LABEL[z] }, z))) })] }), pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : pickerFlow === "packUnsupported" ? (_jsxs("div", { className: "j-flex-col j-gap-sm", style: { padding: 10, maxWidth: 360 }, children: [_jsxs("div", { className: "j-inner-panel", style: { padding: "10px 12px" }, children: [_jsx(JimboText, { size: "sm", tone: "orange", children: "Standard Packs need a dedicated playing-card picker." }), _jsx(JimboText, { size: "xs", tone: "grey", style: { display: "block", marginTop: 6 }, children: "Arcana, Celestial, Spectral, and Buffoon pack flows are wired. Standard Pack support can come next without faking the JAML shape." })] }), _jsx(JimboButton, { tone: "orange", size: "sm", fullWidth: true, onClick: () => {
+                    }, 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-col j-gap-sm", children: getPackRows(a).map((row, rowIndex) => (_jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "nowrap" }, children: row.map(i => renderSlot(a, `ante_${a}_pack_${i}`, 64, "Boosters", "pack")) }, rowIndex))) })] })] }, a))) }), _jsx(JimboModal, { open: activeSlot !== null, onClose: handlePickerCancel, title: pickerFlow === "category" ? "Select Category" : undefined, className: "j-picker-modal", children: activeSlot !== null && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsxs("div", { className: "j-inner-panel", style: { padding: "8px 10px", marginBottom: 2 }, children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { display: "block", marginBottom: 6 }, children: "This pick will be added as" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: ["must", "should", "mustnot"].map((z) => (_jsx(JimboButton, { tone: currentZone === z ? ZONE_TONE[z] : "grey", size: "xs", onClick: () => setCurrentZone(z), children: ZONE_LABEL[z] }, z))) })] }), pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect })) : pickerFlow === "packUnsupported" ? (_jsxs("div", { className: "j-flex-col j-gap-sm", style: { padding: 10, maxWidth: 360 }, children: [_jsxs("div", { className: "j-inner-panel", style: { padding: "10px 12px" }, children: [_jsx(JimboText, { size: "sm", tone: "orange", children: "Standard Packs need a dedicated playing-card picker." }), _jsx(JimboText, { size: "xs", tone: "grey", style: { display: "block", marginTop: 6 }, children: "Arcana, Celestial, Spectral, and Buffoon pack flows are wired. Standard Pack support can come next without faking the JAML shape." })] }), _jsx(JimboButton, { tone: "orange", size: "sm", fullWidth: true, onClick: () => {
                                         setActivePackSelection(null);
                                         setPickerFlow("pack");
-                                    }, children: "Back to Packs" })] })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel }))] })) }), _jsx(JimboModal, { open: activePackDetail !== null && !!activePackDetailSelection?.packName, onClose: handleOverlayClose, title: activePackDetailSelection?.packName ?? "Pack", className: "j-picker-modal", children: activePackDetail !== null && activePackDetailSelection?.packName && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10, maxWidth: 360 }, children: [_jsx("div", { className: "j-inner-panel", style: { padding: "10px 12px", background: withAlpha(C.DARKEST, 0.84) }, children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [_jsx(JimboSprite, { name: activePackDetailSelection.packName, sheet: "Boosters", width: 56 }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs(JimboText, { size: "sm", tone: "white", children: ["Ante ", activePackDetail.ante, " pack ", ((activePackDetailSelection.boosterPacks?.[0] ?? 0) + 1)] }), _jsx(JimboText, { size: "xs", tone: "grey", children: getPackHelperText(activePackDetailSelection.packName) })] })] }) }), _jsxs("div", { className: "j-inner-panel", style: { padding: "10px 12px" }, children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { display: "block", marginBottom: 8 }, children: "Peek" }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }, children: [_jsx(JimboSprite, { name: activePackDetailSelection.packName, sheet: "Boosters", width: 44 }), _jsx(JimboText, { size: "sm", tone: "grey", children: "\u2192" }), _jsx(JimboSprite, { name: activePackDetailSelection.value, sheet: categoryToPreviewSheet(activePackDetailSelection.category), width: 48 }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 3 }, children: [_jsx(JimboText, { size: "sm", tone: "white", children: activePackDetailSelection.value }), _jsxs(JimboText, { size: "xs", tone: "grey", children: [getSelectionCategoryLabel(activePackDetailSelection.category), " from ", activePackDetailSelection.packName] })] })] }), _jsxs("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [_jsxs("div", { className: "j-inner-panel", style: { padding: "6px 8px", minWidth: 96 }, children: [_jsx(JimboText, { size: "micro", tone: "grey", style: { display: "block", marginBottom: 2 }, children: "Zone" }), _jsx(JimboText, { size: "xs", tone: getZoneTextTone(activePackDetailSelection.zone), children: ZONE_LABEL[activePackDetailSelection.zone] })] }), _jsxs("div", { className: "j-inner-panel", style: { padding: "6px 8px", minWidth: 120 }, children: [_jsx(JimboText, { size: "micro", tone: "grey", style: { display: "block", marginBottom: 2 }, children: "Clause" }), _jsx(JimboText, { size: "xs", tone: "white", children: activePackDetailSelection.clauseKey })] }), _jsxs("div", { className: "j-inner-panel", style: { padding: "6px 8px", minWidth: 96 }, children: [_jsx(JimboText, { size: "micro", tone: "grey", style: { display: "block", marginBottom: 2 }, children: "Source" }), _jsxs(JimboText, { size: "xs", tone: "white", children: ["boosterPacks: [", activePackDetailSelection.boosterPacks?.join(", ") ?? "", "]"] })] })] })] }), _jsxs("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [_jsx(JimboButton, { tone: "blue", size: "sm", fullWidth: true, onClick: handlePackChange, children: "Re-pick Contents" }), _jsx(JimboButton, { tone: "red", size: "sm", fullWidth: true, onClick: () => handleSlotClear(activePackDetail.ante, activePackDetail.id), children: "Clear This Pack" })] })] })) })] }));
+                                    }, children: "Back to Packs" })] })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect }))] })) }), _jsx(JimboModal, { open: activePackDetail !== null && !!activePackDetailSelection?.packName, onClose: handleOverlayClose, title: activePackDetailSelection?.packName ?? "Pack", className: "j-picker-modal", children: activePackDetail !== null && activePackDetailSelection?.packName && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10, maxWidth: 360 }, children: [_jsx("div", { className: "j-inner-panel", style: { padding: "10px 12px", background: withAlpha(C.DARKEST, 0.84) }, children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [_jsx(JimboSprite, { name: activePackDetailSelection.packName, sheet: "Boosters", width: 56 }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs(JimboText, { size: "sm", tone: "white", children: ["Ante ", activePackDetail.ante, " pack ", ((activePackDetailSelection.boosterPacks?.[0] ?? 0) + 1)] }), _jsx(JimboText, { size: "xs", tone: "grey", children: getPackHelperText(activePackDetailSelection.packName) })] })] }) }), _jsxs("div", { className: "j-inner-panel", style: { padding: "10px 12px" }, children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { display: "block", marginBottom: 8 }, children: "Peek" }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }, children: [_jsx(JimboSprite, { name: activePackDetailSelection.packName, sheet: "Boosters", width: 44 }), _jsx(JimboText, { size: "sm", tone: "grey", children: "\u2192" }), _jsx(JimboSprite, { name: activePackDetailSelection.value, sheet: categoryToPreviewSheet(activePackDetailSelection.category), width: 48 }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 3 }, children: [_jsx(JimboText, { size: "sm", tone: "white", children: activePackDetailSelection.value }), _jsxs(JimboText, { size: "xs", tone: "grey", children: [getSelectionCategoryLabel(activePackDetailSelection.category), " from ", activePackDetailSelection.packName] })] })] }), _jsxs("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [_jsxs("div", { className: "j-inner-panel", style: { padding: "6px 8px", minWidth: 96 }, children: [_jsx(JimboText, { size: "micro", tone: "grey", style: { display: "block", marginBottom: 2 }, children: "Zone" }), _jsx(JimboText, { size: "xs", tone: getZoneTextTone(activePackDetailSelection.zone), children: ZONE_LABEL[activePackDetailSelection.zone] })] }), _jsxs("div", { className: "j-inner-panel", style: { padding: "6px 8px", minWidth: 120 }, children: [_jsx(JimboText, { size: "micro", tone: "grey", style: { display: "block", marginBottom: 2 }, children: "Clause" }), _jsx(JimboText, { size: "xs", tone: "white", children: activePackDetailSelection.clauseKey })] }), _jsxs("div", { className: "j-inner-panel", style: { padding: "6px 8px", minWidth: 96 }, children: [_jsx(JimboText, { size: "micro", tone: "grey", style: { display: "block", marginBottom: 2 }, children: "Source" }), _jsxs(JimboText, { size: "xs", tone: "white", children: ["boosterPacks: [", activePackDetailSelection.boosterPacks?.join(", ") ?? "", "]"] })] })] })] }), _jsxs("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [_jsx(JimboButton, { tone: "blue", size: "sm", fullWidth: true, onClick: handlePackChange, children: "Re-pick Contents" }), _jsx(JimboButton, { tone: "red", size: "sm", fullWidth: true, onClick: () => handleSlotClear(activePackDetail.ante, activePackDetail.id), children: "Clear This Pack" })] })] })) })] }));
 }
 // ─── Category Selection Menu ─────────────────────────────────────────────────
 export function CategoryMenu({ onSelect, }) {
@@ -277,7 +275,7 @@ function buildJamlText(antes) {
             }
         }
     }
-    let lines = [];
+    const lines = [];
     lines.push("name: My Custom Seed Map");
     lines.push("author: JamlBuilder");
     lines.push("description: Auto-generated from the visual editor.");

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

@@ -2,6 +2,5 @@ import type { SlotSelection } from "./MysterySlot.js";
 export type JokerRarity = "common" | "uncommon" | "rare" | "legendary";
 export interface JokerPickerProps {
     onSelect: (selection: SlotSelection) => void;
-    onCancel: () => void;
 }
-export declare function JokerPicker({ onSelect, onCancel }: JokerPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function JokerPicker({ onSelect }: JokerPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/jamlMap/JokerPicker.js

@@ -62,7 +62,7 @@ const RARITY_META = {
     rare: { label: "Rare", tone: "red", hint: "Found in shops and Buffoon Packs" },
     legendary: { label: "Legendary", tone: "tarot", hint: "Spawns from The Soul only!" },
 };
-export function JokerPicker({ onSelect, onCancel }) {
+export function JokerPicker({ onSelect }) {
     const [step, setStep] = useState("rarity");
     const [selectedRarity, setSelectedRarity] = useState(null);
     const [search, setSearch] = useState("");
@@ -96,11 +96,7 @@ export function JokerPicker({ onSelect, onCancel }) {
     return (_jsxs("div", { style: { padding: 0, display: "flex", flexDirection: "column" }, children: [step === "rarity" && (_jsx("div", { className: "j-flex-col j-gap-sm", style: { padding: 10 }, children: ["common", "uncommon", "rare", "legendary"].map((rarity) => {
                     const meta = RARITY_META[rarity];
                     return (_jsx(JimboButton, { tone: meta.tone, size: "md", fullWidth: true, onClick: () => handleRaritySelect(rarity), children: _jsxs("span", { style: { display: "flex", flexDirection: "column", gap: 2, textAlign: "left", width: "100%" }, children: [_jsx("span", { children: meta.label }), _jsx("span", { style: { fontSize: 9, opacity: 0.7 }, children: meta.hint })] }) }, rarity));
-                }) })), step === "specific" && selectedRarity && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "j-flex j-items-center", style: {
-                            justifyContent: "space-between",
-                            padding: "8px 10px",
-                            borderBottom: `2px solid ${C.PANEL_EDGE}`,
-                        }, children: [_jsx(JimboButton, { tone: "orange", size: "xs", onClick: () => setStep("rarity"), children: "\u2190 Back" }), _jsxs(JimboText, { size: "md", children: [RARITY_META[selectedRarity].label, " Jokers"] }), _jsx("div", { style: { width: 44 } })] }), _jsx("div", { className: "j-flex j-gap-sm", style: { padding: "8px 10px 4px" }, children: _jsx("input", { className: "j-seed-input__field", type: "text", placeholder: "Search jokers...", value: search, onChange: (e) => setSearch(e.target.value), style: { fontSize: 13, padding: "6px 10px", textTransform: "none", letterSpacing: "0.04em" } }) }), selectedRarity === "legendary" && (_jsx("div", { className: "j-inner-panel", style: { margin: "4px 10px 6px", padding: "6px 10px" }, children: _jsx(JimboText, { size: "xs", tone: "purple", children: "Legendary jokers spawn from The Soul. Find it in Arcana Pack, Spectral Pack, Charm Tag, or Ethereal Tag only!" }) })), _jsxs("div", { style: {
+                }) })), step === "specific" && selectedRarity && (_jsxs(_Fragment, { children: [_jsx("div", { className: "j-flex j-items-center j-justify-center", style: { padding: "8px 10px 4px" }, children: _jsxs(JimboText, { size: "md", children: [RARITY_META[selectedRarity].label, " Jokers"] }) }), _jsx("div", { className: "j-flex j-gap-sm", style: { padding: "4px 10px 4px" }, children: _jsx("input", { className: "j-seed-input__field", type: "text", placeholder: "Search jokers...", value: search, onChange: (e) => setSearch(e.target.value), style: { fontSize: 13, padding: "6px 10px", textTransform: "none", letterSpacing: "0.04em" } }) }), selectedRarity === "legendary" && (_jsx("div", { className: "j-inner-panel", style: { margin: "4px 10px 6px", padding: "6px 10px" }, children: _jsx(JimboText, { size: "xs", tone: "purple", children: "Legendary jokers spawn from The Soul. Find it in Arcana Pack, Spectral Pack, Charm Tag, or Ethereal Tag only!" }) })), _jsxs("div", { style: {
                             display: "grid",
                             gridTemplateColumns: "repeat(auto-fill, minmax(64px, 1fr))",
                             gap: 6,
@@ -113,5 +109,5 @@ export function JokerPicker({ onSelect, onCancel }) {
                                     padding: 4,
                                     borderRadius: 4,
                                     cursor: "pointer",
-                                }, children: [_jsx(JimboSprite, { name: joker.name, sheet: "Jokers", width: 48 }), _jsx(JimboText, { size: "micro", tone: "grey", style: { maxWidth: 60, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: joker.name })] }, joker.name))), filteredJokers.length === 0 && (_jsx("div", { style: { gridColumn: "1 / -1", padding: 20, textAlign: "center" }, children: _jsxs(JimboText, { size: "sm", tone: "grey", children: ["No jokers match \"", search, "\""] }) }))] })] }))] }));
+                                }, children: [_jsx(JimboSprite, { name: joker.name, sheet: "Jokers", width: 48 }), _jsx(JimboText, { size: "micro", tone: "grey", style: { maxWidth: 60, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: joker.name })] }, joker.name))), filteredJokers.length === 0 && (_jsx("div", { style: { gridColumn: "1 / -1", padding: 20, textAlign: "center" }, children: _jsxs(JimboText, { size: "sm", tone: "grey", children: ["No jokers match \"", search, "\""] }) }))] }), _jsx("div", { style: { padding: "4px 10px 10px" }, children: _jsx(JimboButton, { tone: "orange", size: "md", fullWidth: true, onClick: () => setStep("rarity"), children: "Back" }) })] }))] }));
 }

package/dist/components/jamlMap/MysterySlot.js

@@ -11,21 +11,6 @@ const ZONE_BORDER = {
     mustnot: C.ORANGE,
 };
 // ─── Sheet → "Any" wildcard mapping ─────────────────────────────────────────
-function getWildcardName(category) {
-    if (!category)
-        return null;
-    switch (category) {
-        case "joker": return null; // uses generic mystery
-        case "voucher": return null;
-        case "tag": return null;
-        case "boss": return null;
-        case "tarot": return null;
-        case "spectral": return null;
-        case "planet": return null;
-        case "pack": return null;
-        default: return null;
-    }
-}
 // ─── Component ───────────────────────────────────────────────────────────────
 export function MysterySlot({ zone, sheetType, selection, width = 56, onTap, onClear, style, }) {
     const [hover, setHover] = useState(false);

package/dist/hooks/searchWorker.d.ts

@@ -1,29 +1 @@
-declare let MotelyWasm: any;
-declare let MotelyWasmEvents: any;
-declare let activeSearch: {
-    cancel(): void;
-} | null;
-declare let activeSearchRunId: number;
-type WorkerMessage = {
-    type: "init";
-    url: string;
-} | {
-    type: "start";
-    jaml: string;
-    mode?: string;
-    count?: number;
-    aesthetic?: number;
-    seeds?: string[];
-    keywords?: string;
-    padding?: string;
-    batchCharCount?: number;
-    startBatch?: string;
-    endBatch?: string;
-} | {
-    type: "stop";
-} | {
-    type: "get_tally_labels";
-    jaml: string;
-};
-declare function post(message: Record<string, unknown>): void;
-declare function resetEventHandlers(): void;
+export {};

package/dist/hooks/searchWorker.js

@@ -1,4 +1,3 @@
-"use strict";
 let MotelyWasm = null;
 let MotelyWasmEvents = null;
 let activeSearch = null;
@@ -46,6 +45,8 @@ self.addEventListener("message", async (e) => {
                 activeSearch = null;
             }
         }
+        if (!MotelyWasmEvents)
+            return;
         MotelyWasmEvents.notifyResult = (seed, score, tallyColumns) => {
             if (runId !== activeSearchRunId)
                 return;
@@ -65,19 +66,19 @@ self.addEventListener("message", async (e) => {
         try {
             const mode = msg.mode || "random";
             if (mode === "random") {
-                activeSearch = MotelyWasm.startRandomSearch(msg.jaml, msg.count);
+                activeSearch = MotelyWasm.startRandomSearch(msg.jaml, msg.count || 1);
             }
             else if (mode === "aesthetic") {
-                activeSearch = MotelyWasm.startAestheticSearch(msg.jaml, msg.aesthetic);
+                activeSearch = MotelyWasm.startAestheticSearch(msg.jaml, msg.aesthetic || 0);
             }
             else if (mode === "seedList") {
-                activeSearch = MotelyWasm.startSeedListSearch(msg.jaml, msg.seeds);
+                activeSearch = MotelyWasm.startSeedListSearch(msg.jaml, msg.seeds || []);
             }
             else if (mode === "keyword") {
-                activeSearch = MotelyWasm.startKeywordSearch(msg.jaml, msg.keywords, msg.padding || "");
+                activeSearch = MotelyWasm.startKeywordSearch(msg.jaml, msg.keywords || "", msg.padding || "");
             }
             else if (mode === "sequential") {
-                activeSearch = MotelyWasm.startSequentialSearch(msg.jaml, msg.batchCharCount, BigInt(msg.startBatch || "0"), BigInt(msg.endBatch || "0"));
+                activeSearch = MotelyWasm.startSequentialSearch(msg.jaml, msg.batchCharCount || 1, BigInt(msg.startBatch || "0"), BigInt(msg.endBatch || "0"));
             }
             else {
                 post({ type: "error", message: `Unknown search mode: ${mode}` });
@@ -115,3 +116,4 @@ self.addEventListener("message", async (e) => {
         }
     }
 });
+export {};

package/dist/hooks/useIntersectionObserver.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useLayoutEffect, useRef, useState, useCallback } from "react";
 /**
  * Encapsulates IntersectionObserver logic.
  */
@@ -26,7 +26,7 @@ export function useIntersectionObserver(options = {}) {
             if (observer.current)
                 observer.current.disconnect();
         };
-    }, [node, options.root, options.rootMargin, options.threshold, options.freezeOnceVisible]);
+    }, [node, options, options.root, options.rootMargin, options.threshold, options.freezeOnceVisible]);
     return { ref, entry };
 }
 /**
@@ -34,7 +34,9 @@ export function useIntersectionObserver(options = {}) {
  */
 export function useInfiniteScroll(onVisible, options = {}, active = true) {
     const onVisibleRef = useRef(onVisible);
-    onVisibleRef.current = onVisible;
+    useLayoutEffect(() => {
+        onVisibleRef.current = onVisible;
+    });
     const { ref, entry } = useIntersectionObserver({
         ...options,
         threshold: options.threshold ?? 0.1,

package/dist/hooks/useSearch.js

@@ -17,8 +17,12 @@ export function useSearch(motelyWasmUrl) {
     const workerRef = useRef(null);
     const readyRef = useRef(false); // Worker is NOT implicitly ready, must wait for 'ready' message
     const speedRef = useRef({ lastSearched: 0n, lastTime: 0, ema: 0 });
-    useEffect(() => {
+    const [prevUrl, setPrevUrl] = useState(motelyWasmUrl);
+    if (motelyWasmUrl !== prevUrl) {
+        setPrevUrl(motelyWasmUrl);
         setState((s) => ({ ...s, status: "idle" }));
+    }
+    useEffect(() => {
         const worker = createWorker();
         workerRef.current = worker;
         if (motelyWasmUrl) {

package/dist/hooks/useShopStream.js

@@ -1,5 +1,5 @@
 "use client";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useState, useEffect, useRef, useCallback, useLayoutEffect } from "react";
 const DEFAULT_PULL = 12;
 /**
  * Generic stream hook for iterating any motely-wasm analyzer stream.
@@ -16,12 +16,15 @@ export function useMotelyStream(initStream, nextItem, deps, initialItems = []) {
     const [loading, setLoading] = useState(true);
     const [loadingMore, setLoadingMore] = useState(false);
     const nextRef = useRef(nextItem);
-    nextRef.current = nextItem;
+    useLayoutEffect(() => {
+        nextRef.current = nextItem;
+    });
     const busyRef = useRef(false);
     const genRef = useRef(0);
     useEffect(() => {
         const gen = ++genRef.current;
         const base = initialItems.map(i => ({ ...i }));
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setItems(base);
         setError(null);
         setReady(false);

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export { useSearch, type SearchResult, type SearchStatus, type UseSearchState, }
 export { useAnalyzer, type AnalyzerStatus, type AnalyzerLive, type MotelyJsRunState, } from "./hooks/useAnalyzer.js";
 export { setMotelyEnums as setMotelyDisplayEnums } from "./motelyDisplay.js";
 export { setMotelyEnums as setMotelyDecoderEnums } from "./decode/motelyItemDecoder.js";
+export { PaginatedFilterBrowser, type PaginatedFilterBrowserProps, type FilterItem, } from "./components/PaginatedFilterBrowser.js";
 export { JamlAestheticSelector, type JamlAestheticSelectorProps, type JamlAestheticOption, } from "./components/JamlAestheticSelector.js";
 export { JamlSeedInput, type JamlSeedInputProps, } from "./components/JamlSeedInput.js";
 export { JamlMapEditor, JokerPicker, MysterySlot, CategoryPicker, type JamlMapEditorProps, type JokerPickerProps, type JokerRarity, type MysterySlotProps, type SlotCategory, type SlotSelection, 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 "./components/jamlMap/index.js";

package/dist/index.js

@@ -29,6 +29,7 @@ export { useAnalyzer, } from "./hooks/useAnalyzer.js";
 // can resolve enum keys without statically importing motely-wasm.
 export { setMotelyEnums as setMotelyDisplayEnums } from "./motelyDisplay.js";
 export { setMotelyEnums as setMotelyDecoderEnums } from "./decode/motelyItemDecoder.js";
+export { PaginatedFilterBrowser, } from "./components/PaginatedFilterBrowser.js";
 export { JamlAestheticSelector, } from "./components/JamlAestheticSelector.js";
 export { JamlSeedInput, } from "./components/JamlSeedInput.js";
 export { JamlMapEditor, JokerPicker, MysterySlot, CategoryPicker, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./components/jamlMap/index.js";

package/dist/lib/cardParser.d.ts

@@ -5,4 +5,4 @@ export interface ParsedCard {
     seal: string | null;
     edition: string | null;
 }
-export declare function parseCardToken(item: any): ParsedCard | null;
+export declare function parseCardToken(item: unknown): ParsedCard | null;

package/dist/lib/cardParser.js

@@ -1,8 +1,6 @@
 const ENHANCEMENTS = ["Bonus", "Mult", "Wild", "Lucky", "Glass", "Steel", "Stone", "Gold"];
 const SEALS = ["Gold", "Purple", "Red", "Blue"];
 const EDITIONS = ["Foil", "Holographic", "Polychrome", "Negative"];
-const RANKS = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"];
-const SUITS = ["Hearts", "Clubs", "Diamonds", "Spades"];
 // Internal Balatro short codes
 const RANK_MAP = {
     "2": "2", "3": "3", "4": "4", "5": "5", "6": "6", "7": "7", "8": "8", "9": "9", "10": "10",
@@ -15,21 +13,25 @@ export function parseCardToken(item) {
     if (!item)
         return null;
     // 1. If it's already an object with rank/suit
-    if (typeof item === 'object' && (item.rank || item.base)) {
-        let rank = item.rank || item.base?.[2] || item.base?.[0]; // Handle different analyzer versions
-        let suit = item.suit || item.base?.[0];
-        // Normalize
-        rank = RANK_MAP[rank] || rank;
-        suit = SUIT_MAP[suit] || suit;
-        if (suit && !suit.endsWith('s'))
-            suit += 's';
-        return {
-            rank: rank || "Ace",
-            suit: suit || "Spades",
-            enhancement: item.enhancement || item.modifier || null,
-            seal: item.seal || null,
-            edition: item.edition || null
-        };
+    if (typeof item === 'object') {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const obj = item;
+        if (obj.rank || obj.base) {
+            let rank = obj.rank || obj.base?.[2] || obj.base?.[0]; // Handle different analyzer versions
+            let suit = obj.suit || obj.base?.[0];
+            // Normalize
+            rank = RANK_MAP[rank] || rank;
+            suit = SUIT_MAP[suit] || suit;
+            if (suit && !suit.endsWith('s'))
+                suit += 's';
+            return {
+                rank: rank || "Ace",
+                suit: suit || "Spades",
+                enhancement: obj.enhancement || obj.modifier || null,
+                seal: obj.seal || null,
+                edition: obj.edition || null
+            };
+        }
     }
     // 2. If it's a string token
     if (typeof item === 'string') {

package/dist/lib/classes/BuyMetaData.d.ts

@@ -5,7 +5,7 @@ export interface BuyMetaData {
     card?: {
         type?: string;
         base?: string | string[];
-        [key: string]: any;
+        [key: string]: unknown;
     };
-    [key: string]: any;
+    [key: string]: unknown;
 }

package/dist/lib/const.d.ts

@@ -1,17 +1,26 @@
 import type { ReactNode } from "react";
 import type { BuyMetaData } from "./classes/BuyMetaData.ts";
-export declare const jokers: any;
-export declare const jokerFaces: any;
-export declare const consumablesFaces: any;
-export declare const boosterPacks: any;
-export declare const tarotsAndPlanets: any;
-export declare const tags: any;
-export declare const vouchers: any;
-export declare const bosses: any;
-export declare const editionMap: any;
-export declare const stickerMap: any;
-export declare const options: any;
-export declare const blinds: any;
+export interface Pos {
+    x: number;
+    y: number;
+}
+export interface Entity {
+    name: string;
+    pos: Pos;
+    animated?: boolean;
+}
+export declare const jokers: Entity[];
+export declare const jokerFaces: Entity[];
+export declare const consumablesFaces: Entity[];
+export declare const boosterPacks: Entity[];
+export declare const tarotsAndPlanets: Entity[];
+export declare const tags: Entity[];
+export declare const vouchers: Entity[];
+export declare const bosses: Entity[];
+export declare const editionMap: Record<string, number>;
+export declare const stickerMap: Record<string, Pos>;
+export declare const options: string[];
+export declare const blinds: string[];
 export declare const blindsCamelCase: string[];
 export declare const SeedsWithLegendary: Array<string>;
 export declare const popularSeeds: Array<string>;
@@ -24,7 +33,7 @@ export interface AnalyzeOptions {
         [key: string]: BuyMetaData;
     };
     updates: Array<{
-        [key: string]: any;
+        [key: string]: unknown;
     }>;
     unlocks: Array<string>;
     events: Array<Event>;

package/dist/lib/data/constants.js

@@ -1,13 +1,14 @@
-import { CLAUSE_TYPE_KEYS, DECK_VALUES, EDITION_VALUES, ENHANCEMENT_VALUES, RANK_VALUES, SEAL_VALUES, SOURCE_KEYS, STAKE_VALUES, SUIT_VALUES, } from '../jaml/jamlSchema.js';
-// UI options derived from the shipped JAML schema wherever possible.
-export const DECK_OPTIONS = [...DECK_VALUES];
-export const STAKE_OPTIONS = [...STAKE_VALUES];
+import { Motely } from 'motely-wasm';
+import { CLAUSE_TYPE_KEYS, SOURCE_KEYS, } from '../jaml/jamlSchema.js';
+// UI options derived from motely-wasm directly
+export const DECK_OPTIONS = Object.keys(Motely.MotelyDeck).filter(k => isNaN(Number(k)));
+export const STAKE_OPTIONS = Object.keys(Motely.MotelyStake).filter(k => isNaN(Number(k)));
 export const ANTE_OPTIONS = [1, 2, 3, 4, 5, 6, 7, 8];
 export const SLOT_OPTIONS = [1, 2, 3, 4, 5];
-export const RANK_OPTIONS = [...RANK_VALUES];
-export const SUIT_OPTIONS = [...SUIT_VALUES];
-export const ENHANCEMENT_OPTIONS = [...ENHANCEMENT_VALUES];
-export const EDITION_OPTIONS = [...EDITION_VALUES];
-export const SEAL_OPTIONS = [...SEAL_VALUES];
+export const RANK_OPTIONS = Object.keys(Motely.MotelyStandardcardRank).filter(k => isNaN(Number(k)));
+export const SUIT_OPTIONS = Object.keys(Motely.MotelyStandardcardSuit).filter(k => isNaN(Number(k)));
+export const ENHANCEMENT_OPTIONS = Object.keys(Motely.MotelyItemEnhancement).filter(k => isNaN(Number(k)) && k !== "None");
+export const EDITION_OPTIONS = Object.keys(Motely.MotelyItemEdition).filter(k => isNaN(Number(k)) && k !== "None");
+export const SEAL_OPTIONS = Object.keys(Motely.MotelyItemSeal).filter(k => isNaN(Number(k)) && k !== "None");
 export const CLAUSE_TYPES = [...CLAUSE_TYPE_KEYS];
 export const SOURCE_OPTIONS = [...SOURCE_KEYS];

package/dist/lib/hooks/useJamlFilter.js

@@ -84,7 +84,7 @@ function parseJamlToFilter(text) {
             // 2. Detect Root Properties (indent 0)
             const rootMatch = line.match(/^(\w+):\s*(.+)$/);
             if (rootMatch && !line.startsWith(' ') && !line.startsWith('-')) {
-                const [_, key, val] = rootMatch;
+                const [, key, val] = rootMatch;
                 if (['name', 'deck', 'stake', 'description', 'author'].includes(key)) {
                     filter[key] = val.trim();
                 }
@@ -95,7 +95,7 @@ function parseJamlToFilter(text) {
                 if (currentSection === 'defaults') {
                     const propMatch = trimmed.match(/^(\w+):\s*(.+)$/);
                     if (propMatch) {
-                        const [_, key, val] = propMatch;
+                        const [, key, val] = propMatch;
                         if (key === 'antes')
                             filter.defaults.antes = parseNumArray(val);
                         if (key === 'packSlots')
@@ -118,7 +118,7 @@ function parseJamlToFilter(text) {
                     if (currentClause) {
                         const propMatch = trimmed.match(/^(\w+):\s*(.+)$/);
                         if (propMatch) {
-                            const [_, key, val] = propMatch;
+                            const [, key, val] = propMatch;
                             if (key === 'antes')
                                 currentClause.antes = parseNumArray(val);
                             else if (key === 'sources')
@@ -140,10 +140,10 @@ function parseJamlToFilter(text) {
     }
 }
 function parseNumArray(str) {
-    return str.replace(/[\[\]]/g, '').split(',').map(s => parseInt(s.trim())).filter(n => !isNaN(n));
+    return str.replace(/[[\]]/g, '').split(',').map(s => parseInt(s.trim())).filter(n => !isNaN(n));
 }
 function parseStringArray(str) {
-    return str.replace(/[\[\]]/g, '').split(',').map(s => s.trim()).filter(s => !!s);
+    return str.replace(/[[\]]/g, '').split(',').map(s => s.trim()).filter(s => !!s);
 }
 function filterToJaml(filter) {
     const lines = [];

package/dist/lib/hooks/useSeedAnalyzer.js

@@ -4,9 +4,15 @@ export function useSeedAnalyzer(motely, seed) {
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
-    useEffect(() => {
+    const [prevInputs, setPrevInputs] = useState({ seed, motely });
+    if (seed !== prevInputs.seed || motely !== prevInputs.motely) {
+        setPrevInputs({ seed, motely });
         if (!seed || seed === "LOCKED" || !motely) {
             setData(null);
+        }
+    }
+    useEffect(() => {
+        if (!seed || seed === "LOCKED" || !motely) {
             return;
         }
         const abortController = new AbortController();

package/dist/lib/jaml/jamlSchema.d.ts

@@ -4,9 +4,23 @@
  * Derives all JAML schema constants from motely-wasm/jaml.schema.json.
  * All JAML-aware files import from here — single swap point if the API changes.
  */
+type SchemaNode = {
+    enum?: string[];
+    items?: {
+        enum?: string[];
+    };
+    properties?: Record<string, SchemaNode>;
+};
+interface JamlSchema {
+    version?: string;
+    definitions?: {
+        clause?: SchemaNode;
+    };
+    properties?: Record<string, SchemaNode>;
+}
 export declare const JAML_SCHEMA_VERSION: string;
 /** The raw JSON schema object. */
-export declare const jamlSchema: any;
+export declare const jamlSchema: JamlSchema;
 /** Root-level metadata keys (name, author, deck, etc.) */
 export declare const METADATA_KEYS: readonly string[];
 /** Section keys that contain clause arrays. */
@@ -26,12 +40,12 @@ export declare function getValidValuesForKey(key: string): readonly string[] | n
  * Get the available properties for a given clause type.
  * Returns all clause property keys (the type system doesn't restrict per-type in JSON schema v7).
  */
-export declare function getAvailablePropsForType(_clauseType: string): readonly string[];
+export declare function getAvailablePropsForType(): readonly string[];
 /**
  * Check if a property is invalid for a clause type.
  * In the v7 schema, all properties are available on all clause types.
  */
-export declare function isInvalidPropForType(_prop: string, _clauseType: string): boolean;
+export declare function isInvalidPropForType(): boolean;
 /**
  * Check if a value is invalid for a property.
  */
@@ -52,3 +66,4 @@ export declare const STICKER_VALUES: readonly string[];
  * All JAML keywords — sections, metadata keys, clause types, and property keys.
  */
 export declare const ALL_JAML_KEYWORDS: string[];
+export {};

package/dist/lib/jaml/jamlSchema.js

@@ -51,14 +51,14 @@ export function getValidValuesForKey(key) {
  * Get the available properties for a given clause type.
  * Returns all clause property keys (the type system doesn't restrict per-type in JSON schema v7).
  */
-export function getAvailablePropsForType(_clauseType) {
+export function getAvailablePropsForType( /* _clauseType */) {
     return PROPERTY_KEYS;
 }
 /**
  * Check if a property is invalid for a clause type.
  * In the v7 schema, all properties are available on all clause types.
  */
-export function isInvalidPropForType(_prop, _clauseType) {
+export function isInvalidPropForType( /* _prop, _clauseType */) {
     return false;
 }
 /**

package/dist/lib/parseDailyRitual.d.ts

@@ -34,7 +34,7 @@ export interface ParsedSeed {
  *   ]
  * }
  */
-export declare function parseDailyRitualSeed(raw: any): ParsedSeed;
+export declare function parseDailyRitualSeed(raw: Record<string, unknown>): ParsedSeed;
 /**
  * Group items by type for rendering
  */

package/dist/lib/parseDailyRitual.js

@@ -36,12 +36,13 @@ export function parseDailyRitualSeed(raw) {
     const items = [];
     // Parse each field looking for pattern: letters + number (e.g., "wj2", "hc1")
     Object.keys(raw).forEach(key => {
+        if (key === 'id' || key === 't' || key === 's' || key === 'w')
+            return;
         const match = key.match(/^([a-z]+)(\d+)$/);
         if (match) {
             const [, code, ante] = match;
             const itemData = ITEM_MAP[code];
             if (itemData) {
-                const count = raw[key]; // Could be used for duplicates
                 items.push({
                     ...itemData,
                     ante: Number(ante)