jaml-ui 0.24.16 → 0.24.18

package/dist/components/DeckSprite.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { resolveJamlAssetUrl } from '../assets.js';
+// eslint-disable-next-line react-refresh/only-export-components
 export const DECK_SPRITE_POS = {
     red: { x: 0, y: 0 },
     nebula: { x: 3, y: 0 },
@@ -20,6 +21,7 @@ export const DECK_SPRITE_POS = {
     anaglyph: { x: 2, y: 4 },
     zodiac: { x: 3, y: 4 },
 };
+// eslint-disable-next-line react-refresh/only-export-components
 export const STAKE_SPRITE_POS = {
     white: { x: 1, y: 0 },
     red: { x: 2, y: 0 },

package/dist/components/GameCard.js

@@ -153,6 +153,7 @@ function resolvePackedAnalyzerItem(item, scale) {
     }
     return { kind: "unknown", label: displayName };
 }
+// eslint-disable-next-line react-refresh/only-export-components
 export function resolveAnalyzerShopItem(item, scale = 1) {
     const displayName = String(item.name || "").trim();
     if (!displayName) {

package/dist/components/JamlAestheticSelector.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { JimboText } from "../ui/jimboText.js";
+import { JimboButton } from "../ui/panel.js";
 const AESTHETICS = [
     { id: "Palindrome", value: 0, label: "Palindrome", desc: "Seeds that read the same forwards and backwards" },
     { id: "Psychosis", value: 1, label: "Psychosis", desc: "Unsettling or eerie seed patterns" },
@@ -14,8 +15,8 @@ const AESTHETICS = [
  * All styling via jimbo.css `.j-aesthetic-selector` / `.j-aesthetic-pill` — zero inline styles.
  */
 export function JamlAestheticSelector({ value, onChange, className, style }) {
-    return (_jsxs("div", { className: `j-aesthetic-selector ${className ?? ""}`, style: style, children: [_jsx(JimboText, { size: "xs", tone: "grey", children: "Seed Aesthetics" }), _jsx("div", { className: "j-aesthetic-selector__list", children: AESTHETICS.map((a) => {
+    return (_jsxs("div", { className: `j-aesthetic-selector ${className ?? ""}`, style: style, children: [_jsx(JimboText, { size: "xs", tone: "grey", children: "Seed Aesthetics" }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 4 }, children: AESTHETICS.map((a) => {
                     const isActive = value === a.id;
-                    return (_jsx("button", { type: "button", className: "j-aesthetic-pill", "data-active": isActive, onClick: () => onChange(isActive ? null : a.id, a.value), title: a.desc, children: a.label }, a.id));
+                    return (_jsx(JimboButton, { tone: isActive ? "red" : "grey", size: "sm", onClick: () => onChange(isActive ? null : a.id, a.value), children: a.label }, a.id));
                 }) })] }));
 }

package/dist/components/JamlCurator.js

@@ -40,8 +40,9 @@ export function JamlCurator({ motely, motelyWasmUrl }) {
     };
     return (_jsx("div", { style: {
             width: "100%",
-            maxWidth: 320,
-            height: "100svh",
+            maxWidth: 375,
+            height: "100dvh",
+            maxHeight: 812,
             margin: "0 auto",
             position: "relative",
             background: C.DARKEST,

package/dist/components/JamlIde.d.ts

@@ -25,8 +25,9 @@ export interface JamlIdeProps {
     codePlaceholder?: string;
     onSearch?: () => void;
     isSearching?: boolean;
-    /** Hide the Balatro attribution footer. Default: false (always shown). */
-    hideFooter?: boolean;
+    onTestSeed?: (seed: string) => void;
+    jimbolateResult?: "idle" | "match" | "nomatch" | "running" | "error";
+    jimbolateError?: string | null;
     /**
      * Controlled visual filter. When provided alongside `onVisualFilterChange`, the Visual tab
      * is fully controlled by the parent. When absent, the Visual tab auto-derives from the text.
@@ -36,4 +37,4 @@ export interface JamlIdeProps {
 }
 export type { JamlVisualFilter } from "./JamlIdeVisual.js";
 export type { JamlVisualClause, JamlZone } from "./JamlIdeVisual.js";
-export declare function JamlIde({ jaml, defaultJaml, onChange, defaultMode, searchResults, className, style, title, subtitle, compactHeader, actions, codePlaceholder, onSearch, isSearching, hideFooter, visualFilter, onVisualFilterChange, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlIde({ jaml, defaultJaml, onChange, defaultMode, searchResults, className, style, title, subtitle, compactHeader, actions, codePlaceholder, onSearch, isSearching, onTestSeed, jimbolateResult, jimbolateError, visualFilter, onVisualFilterChange, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlIde.js

@@ -1,16 +1,15 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { JimboBalatroFooter } from "../ui/footer.js";
 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 { Jimbolate } from "./Jimbolate.js";
 import { JimboColorOption } from "../ui/tokens.js";
 import { JimboModal } from "../ui/panel.js";
 import { jamlTextToVisualFilter, visualFilterToJamlText } from "../utils/jamlVisualFilter.js";
-import { DeckSprite } from "./DeckSprite.js";
 const CATEGORY_CONFIG_MAP = {
     voucher: VOUCHER_PICKER_CONFIG,
     tag: TAG_PICKER_CONFIG,
@@ -90,34 +89,7 @@ function ResultsView({ results, jaml }) {
                                     })] })] })) : null] }, result.seed));
         }) }));
 }
-function readRootValue(jaml, key, fallback) {
-    const match = jaml.match(new RegExp(`^${key}:\\s*(.+)$`, "m"));
-    return match?.[1]?.trim() || fallback;
-}
-function setRootValue(jaml, key, value) {
-    const line = `${key}: ${value}`;
-    const pattern = new RegExp(`^${key}:\\s*.*$`, "m");
-    if (pattern.test(jaml)) {
-        return jaml.replace(pattern, line);
-    }
-    const trimmed = jaml.trimEnd();
-    return trimmed.length > 0 ? `${line}\n${trimmed}` : line;
-}
-import { RunConfigModal } from "./RunConfigModal.js";
-function DeckStakeSelector({ jaml, onChange, onSearch, }) {
-    const deck = readRootValue(jaml, "deck", "Red");
-    const stake = readRootValue(jaml, "stake", "White");
-    const [modalOpen, setModalOpen] = useState(false);
-    const handleApply = (nextDeck, nextStake) => {
-        let next = setRootValue(jaml, "deck", nextDeck);
-        next = setRootValue(next, "stake", nextStake);
-        onChange(next);
-        onSearch?.();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setModalOpen(true), className: "j-btn j-btn--red", style: { height: 32, padding: 0, borderRadius: 8, overflow: 'hidden' }, children: _jsxs("div", { className: "j-btn__face", style: { display: 'flex', alignItems: 'center', gap: 8, padding: '0 8px 0 4px', height: '100%' }, children: [_jsx(DeckSprite, { deck: deck, stake: stake, size: compactDeckSpriteSize }), _jsxs("span", { style: { fontFamily: "m6x11plus, monospace", fontSize: 14 }, children: [deck, " / ", stake] })] }) }), _jsx(RunConfigModal, { open: modalOpen, onClose: () => setModalOpen(false), deck: deck, stake: stake, onChange: handleApply })] }));
-}
-const compactDeckSpriteSize = 24;
-export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", searchResults = [], className = "", style, title = "JAML IDE", subtitle = "Jimbo's Ante Markup Language", compactHeader = false, actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, hideFooter = false, visualFilter, onVisualFilterChange, }) {
+export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", searchResults = [], className = "", style, title = "JAML IDE", subtitle = "Jimbo's Ante Markup Language", compactHeader = false, actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, onTestSeed, jimbolateResult = "idle", jimbolateError, visualFilter, onVisualFilterChange, }) {
     const [mode, setMode] = useState(defaultMode);
     const [internalText, setInternalText] = useState(jaml ?? defaultJaml ?? "");
     const [lastJamlProp, setLastJamlProp] = useState(jaml);
@@ -217,5 +189,5 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
                     padding: compactHeader ? "8px 10px" : "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 }), subtitle ? _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: subtitle }) : null] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }, children: [_jsx(DeckStakeSelector, { jaml: text, onChange: handleTextChange, onSearch: onSearch }), actions] })] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: mode === "map" ? "hidden" : "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] }), !hideFooter && _jsx(JimboBalatroFooter, {}), _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 }))) })] }));
+                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: "normal", fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), subtitle ? _jsx("div", { style: { fontSize: 11, color: "rgba(255,255,255,0.6)" }, children: subtitle }) : null] }), actions && (_jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }, children: actions }))] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: mode === "map" ? "hidden" : "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, mode === "jimbolate" ? (_jsx(Jimbolate, { jaml: text, onTest: (seed) => onTestSeed?.(seed), result: jimbolateResult, error: jimbolateError })) : 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 })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handlePickerSelect }))) })] }));
 }

package/dist/components/JamlIdeToolbar.d.ts

@@ -1,4 +1,4 @@
-export type JamlIdeMode = "visual" | "code" | "map" | "results";
+export type JamlIdeMode = "visual" | "code" | "map" | "results" | "jimbolate";
 export interface JamlIdeToolbarProps {
     mode: JamlIdeMode;
     onModeChange: (mode: JamlIdeMode) => void;

package/dist/components/JamlIdeToolbar.js

@@ -6,18 +6,18 @@ import { JimboColorOption } from "../ui/tokens.js";
 export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className = "", onSearch, isSearching = false }) {
     const tabs = [
         { id: "visual", label: "Visual" },
-        { id: "code", label: ".jaml" },
+        { id: "code", label: "JAML" },
         { id: "map", label: "Map" },
         { id: "results", label: resultCount > 0 ? `Results (${resultCount})` : "Results" },
+        { id: "jimbolate", label: "Jimbolate" },
     ];
     return (_jsxs("div", { className: className, style: {
-            display: "grid",
-            gridTemplateColumns: onSearch ? "1fr auto 1fr" : "1fr",
+            display: "flex",
             alignItems: "center",
             gap: 8,
-            minWidth: 0,
             padding: "10px 10px 6px",
             borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
             background: JimboColorOption.DARKEST,
-        }, children: [onSearch ? _jsx("div", {}) : null, _jsx("div", { style: { minWidth: 0, width: "100%", overflow: "visible", paddingBottom: 3 }, children: _jsx(JimboTabs, { tabs: tabs, activeTab: mode, onTabChange: (id) => onModeChange(id) }) }), onSearch ? (_jsx("div", { style: { justifySelf: "end" }, children: _jsx(JimboButton, { tone: isSearching ? "red" : "blue", size: "xs", onClick: onSearch, children: isSearching ? "Stop" : "Search" }) })) : null] }));
+            minWidth: 0,
+        }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, paddingBottom: 3 }, children: _jsx(JimboTabs, { tabs: tabs, activeTab: mode, onTabChange: (id) => onModeChange(id) }) }), onSearch && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(JimboButton, { tone: isSearching ? "red" : "orange", size: "sm", onClick: onSearch, children: isSearching ? "Stop" : "Search" }) }))] }));
 }

package/dist/components/JamlMapPreview.js

@@ -29,7 +29,7 @@ const GLOW_ANIMATION = `
   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 }) {
+function ClausePill({ item, glow, matchCount }) {
     const isHit = matchCount > 0;
     const hasData = matchCount !== undefined && matchCount >= 0;
     return (_jsxs("div", { style: {
@@ -42,6 +42,7 @@ function ClausePill({ item, color, glow, matchCount }) {
             padding: "3px 8px",
             position: "relative",
             opacity: isHit ? 1 : 0.6,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore -- CSS custom property
             "--glow-color": glow,
             animation: isHit ? "j-glow-pulse 1.6s ease-in-out infinite" : "none",
@@ -63,41 +64,6 @@ function ClausePill({ item, color, glow, matchCount }) {
                     boxShadow: `0 1px 0 ${C.BLACK}`,
                 }, children: matchCount > 1 ? `x${matchCount}` : "✓" }))] }));
 }
-function VisualChip({ item, matchCount, compact }) {
-    const isHit = matchCount > 0;
-    const hasData = matchCount !== undefined;
-    const glow = ZONES[item.section].glow;
-    return (_jsxs("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            gap: compact ? 3 : 6,
-            background: isHit ? `${glow}33` : C.DARKEST,
-            border: `2px solid ${isHit ? glow : C.PANEL_EDGE}`,
-            borderRadius: 4,
-            padding: compact ? "2px 4px" : "3px 8px",
-            position: "relative",
-            opacity: isHit ? 1 : 0.6,
-            // @ts-ignore
-            "--glow-color": glow,
-            animation: isHit ? "j-glow-pulse 1.6s ease-in-out infinite" : "none",
-        }, title: `${item.clauseKey}: ${item.value}${hasData ? ` (Found: ${matchCount})` : ""}`, children: [_jsx("style", { children: GLOW_ANIMATION }), _jsx("div", { style: { color: C.GREY, fontSize: 10, lineHeight: 1, padding: "0 2px" }, children: "\u22EE\u22EE" }), _jsx(JimboSprite, { name: item.value, sheet: SHEET_FOR_VISUAL[item.visualType], width: compact ? 20 : 26 }), _jsx("div", { style: {
-                    fontSize: compact ? 9 : 10,
-                    color: C.WHITE,
-                    letterSpacing: 0.5,
-                    textShadow: "1px 1px 0 rgba(0,0,0,.8)",
-                }, children: item.value }), isHit && (_jsx("div", { style: {
-                    position: "absolute",
-                    top: compact ? -4 : -6,
-                    right: compact ? -4 : -6,
-                    background: C.GREEN,
-                    color: C.WHITE,
-                    fontSize: 7,
-                    padding: "1px 3px",
-                    borderRadius: 3,
-                    border: `1px solid ${C.BLACK}`,
-                    boxShadow: `0 1px 0 ${C.BLACK}`,
-                }, children: matchCount > 1 ? `x${matchCount}` : "✓" }))] }));
-}
 function ZoneRail({ zone, items, matchMap, compact = false }) {
     const meta = ZONES[zone];
     return (_jsxs("div", { style: {
@@ -117,7 +83,7 @@ function ZoneRail({ zone, items, matchMap, compact = false }) {
                     // or "must: rareJoker: Blueprint". We try to match the item value and section.
                     const labelKey = `${item.section}: ${item.clauseKey}: ${item.value}`;
                     const count = matchMap[labelKey] ?? -1;
-                    return (_jsx(ClausePill, { item: item, color: meta.color, glow: meta.glow, matchCount: count }, item.id));
+                    return (_jsx(ClausePill, { item: item, glow: meta.glow, matchCount: count }, item.id));
                 })) })] }));
 }
 export function JamlMapPreview({ jaml, className = "", emptyMessage = "No visual JAML clauses found yet.", tallyColumns, tallyLabels, compact = false, }) {

package/dist/components/Jimbolate.d.ts

@@ -0,0 +1,7 @@
+export interface JimbolateProps {
+    jaml: string;
+    onTest: (seed: string) => void;
+    result: "idle" | "match" | "nomatch" | "running" | "error";
+    error?: string | null;
+}
+export declare function Jimbolate({ jaml, onTest, result, error }: JimbolateProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Jimbolate.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { JimboPanel, JimboButton } from "../ui/panel.js";
+import { JimboText } from "../ui/jimboText.js";
+import { JimboColorOption } from "../ui/tokens.js";
+export function Jimbolate({ jaml, onTest, result, error }) {
+    const [seed, setSeed] = useState("");
+    const inputRef = useRef(null);
+    const handleTest = () => {
+        const s = seed.trim().toUpperCase();
+        if (!s)
+            return;
+        onTest(s);
+    };
+    return (_jsxs("div", { style: { padding: 10, display: "flex", flexDirection: "column", gap: 8 }, children: [_jsx(JimboPanel, { children: _jsxs("div", { style: { display: "flex", gap: 6 }, children: [_jsx("input", { ref: inputRef, className: "j-seed-input__field", type: "text", placeholder: "Enter seed...", value: seed, maxLength: 12, onChange: (e) => setSeed(e.target.value.toUpperCase()), onKeyDown: (e) => e.key === "Enter" && handleTest(), style: { flex: 1, fontSize: 15, padding: "6px 10px", letterSpacing: "0.1em", textTransform: "uppercase" } }), _jsx(JimboButton, { tone: result === "running" ? "red" : "orange", size: "sm", onClick: handleTest, disabled: !seed.trim() || !jaml.trim(), children: result === "running" ? "..." : "Test" })] }) }), result === "match" && (_jsxs(JimboPanel, { style: { background: `${JimboColorOption.GREEN_TEXT}22`, textAlign: "center" }, children: [_jsx(JimboText, { size: "xl", tone: "gold", style: { letterSpacing: 3, display: "block", marginBottom: 4 }, children: seed }), _jsx(JimboText, { size: "md", tone: "green", children: "MATCH" })] })), result === "nomatch" && (_jsxs(JimboPanel, { style: { textAlign: "center" }, children: [_jsx(JimboText, { size: "xl", tone: "grey", style: { letterSpacing: 3, display: "block", marginBottom: 4 }, children: seed }), _jsx(JimboText, { size: "md", tone: "red", children: "no match" })] })), result === "error" && (_jsx(JimboPanel, { children: _jsx(JimboText, { size: "xs", tone: "red", style: { display: "block", textAlign: "center" }, children: error ?? "Error" }) })), result === "idle" && !jaml.trim() && (_jsx(JimboPanel, { children: _jsx(JimboText, { size: "xs", tone: "grey", style: { display: "block", textAlign: "center" }, children: "Write a JAML filter in the JAML tab first" }) }))] }));
+}

package/dist/components/PaginatedFilterBrowser.d.ts

@@ -0,0 +1,23 @@
+export interface FilterItem {
+    id: string;
+    name: string;
+    description: string;
+    authorText?: string;
+    dateText?: string;
+    statsText?: string;
+}
+export interface PaginatedFilterBrowserProps {
+    filters: FilterItem[];
+    itemsPerPage?: number;
+    onSelectFilter?: (filter: FilterItem) => void;
+    onMainAction?: (filter: FilterItem) => void;
+    onSecondaryAction?: (filter: FilterItem) => void;
+    onDeleteFilter?: (filter: FilterItem) => void;
+    mainActionText?: string;
+    secondaryActionText?: string;
+    showSecondary?: boolean;
+    showDelete?: boolean;
+    emptyText?: string;
+}
+export declare function PaginatedFilterBrowser({ filters, itemsPerPage, // matching Balatro challenges layout pages
+onSelectFilter, onMainAction, onSecondaryAction, onDeleteFilter, mainActionText, secondaryActionText, showSecondary, showDelete, emptyText, }: PaginatedFilterBrowserProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/PaginatedFilterBrowser.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { JimboButton, JimboPanel } from "../ui/panel.js";
+import { JimboText } from "../ui/jimboText.js";
+import { JimboFlankNav } from "../ui/jimboFlankNav.js";
+import { JimboColorOption } from "../ui/tokens.js";
+const C = JimboColorOption;
+export function PaginatedFilterBrowser({ filters, itemsPerPage = 120, // matching Balatro challenges layout pages
+onSelectFilter, onMainAction, onSecondaryAction, onDeleteFilter, mainActionText = "SELECT", secondaryActionText = "EDIT", showSecondary = false, showDelete = false, emptyText = "No items found.", }) {
+    const [currentPage, setCurrentPage] = useState(0);
+    const [selectedId, setSelectedId] = useState(null);
+    const totalPages = Math.max(1, Math.ceil(filters.length / itemsPerPage));
+    // Bound current page just in case filters array shrinks
+    const safePage = Math.min(currentPage, totalPages - 1);
+    const pageFilters = filters.slice(safePage * itemsPerPage, (safePage + 1) * itemsPerPage);
+    const selectedFilter = filters.find((f) => f.id === selectedId) || null;
+    const handlePrevPage = () => setCurrentPage((p) => Math.max(0, p - 1));
+    const handleNextPage = () => setCurrentPage((p) => Math.min(totalPages - 1, p + 1));
+    return (_jsxs("div", { className: "j-flex-col j-gap-md", style: {
+            width: "100%",
+            height: "100%",
+            boxSizing: "border-box",
+            overflow: "hidden",
+        }, children: [_jsxs(JimboPanel, { style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: [_jsxs("div", { style: { flex: 1, overflowY: "auto", position: "relative" }, className: "hide-scrollbar j-flex-col j-items-center j-gap-xs", children: [pageFilters.map((filter) => {
+                                const isSelected = selectedId === filter.id;
+                                return (_jsxs("div", { style: {
+                                        position: "relative",
+                                        width: "100%",
+                                        maxWidth: 240, // Matches filter-list-item MinWidth=210 approx
+                                        display: "flex",
+                                        justifyContent: "center",
+                                    }, children: [isSelected && (_jsx("div", { className: "j-animate-jimbo-bounce", style: {
+                                                position: "absolute",
+                                                left: -20, // push out to left
+                                                top: "50%",
+                                                transform: "translateY(-50%)",
+                                                width: 0,
+                                                height: 0,
+                                                borderTop: "8px solid transparent",
+                                                borderBottom: "8px solid transparent",
+                                                borderLeft: `12px solid ${C.GOLD}`, // Balatro usually uses gold/white for selection triangle
+                                                filter: `drop-shadow(2px 2px 2px rgba(0,0,0,0.5))`,
+                                            } })), _jsx("div", { style: { width: "100%" }, children: _jsx(JimboButton, { tone: isSelected ? "red" : "grey", size: "sm", style: { width: "100%" }, onClick: () => {
+                                                    setSelectedId(filter.id);
+                                                    onSelectFilter?.(filter);
+                                                }, children: filter.name }) })] }, filter.id));
+                            }), pageFilters.length === 0 && (_jsx("div", { className: "j-p-md", children: _jsx(JimboText, { size: "sm", tone: "grey", className: "j-text-center", children: emptyText }) }))] }), _jsx("div", { className: "j-flex j-justify-center j-mt-md", style: { flexShrink: 0 }, children: _jsx(JimboFlankNav, { canPrev: safePage > 0, canNext: safePage < totalPages - 1, onPrev: handlePrevPage, onNext: handleNextPage, children: _jsx("div", { style: {
+                                    background: C.RED,
+                                    padding: "8px 24px",
+                                    borderRadius: 8,
+                                    minWidth: 100,
+                                    boxShadow: `inset 0 2px 4px rgba(255,255,255,0.2), 0 4px 8px rgba(0,0,0,0.4)`,
+                                }, className: "j-flex j-justify-center j-items-center", children: _jsxs(JimboText, { size: "sm", tone: "white", className: "j-text-center", style: { textShadow: "1px 2px 2px rgba(0,0,0,0.5)" }, children: [safePage + 1, " / ", totalPages] }) }) }) })] }), _jsx(JimboPanel, { style: { flexShrink: 0, minHeight: 180, display: "flex", flexDirection: "column", justifyContent: "center" }, children: !selectedFilter ? (_jsx(JimboText, { size: "md", tone: "grey", className: "j-text-center", children: "Select an item to view details" })) : (_jsxs("div", { className: "j-flex-col j-gap-sm j-items-center", style: { width: "100%" }, children: [_jsx(JimboText, { size: "lg", tone: "gold", className: "j-text-center", children: selectedFilter.name }), _jsx(JimboText, { size: "sm", tone: "white", className: "j-text-center", children: selectedFilter.description }), _jsxs("div", { className: "j-flex-col j-gap-xs j-items-center j-mt-xs", style: { opacity: 0.7 }, children: [selectedFilter.authorText && _jsx(JimboText, { size: "xs", tone: "grey", children: selectedFilter.authorText }), selectedFilter.dateText && _jsx(JimboText, { size: "xs", tone: "grey", children: selectedFilter.dateText }), selectedFilter.statsText && _jsx(JimboText, { size: "xs", tone: "grey", children: selectedFilter.statsText })] }), _jsxs("div", { className: "j-flex j-gap-sm j-mt-md j-justify-center j-flex-wrap", children: [_jsx(JimboButton, { tone: "blue", size: "sm", onClick: () => onMainAction?.(selectedFilter), children: mainActionText }), showSecondary && onSecondaryAction && (_jsx(JimboButton, { tone: "orange", size: "sm", onClick: () => onSecondaryAction(selectedFilter), children: secondaryActionText })), showDelete && onDeleteFilter && (_jsx(JimboButton, { tone: "red", size: "sm", onClick: () => onDeleteFilter(selectedFilter), children: "DELETE" }))] })] })) })] }));
+}

package/dist/components/RunConfigModal.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from "react";
-import { JimboModal } from "../ui/panel.js";
+import { JimboModal, JimboButton } from "../ui/panel.js";
+import { JimboText } from "../ui/jimboText.js";
 import { DECK_OPTIONS, STAKE_OPTIONS } from "../lib/data/constants.js";
 import { DeckSprite } from "./DeckSprite.js";
 import { StakeSprite } from "../ui/sprites.js";
-import { JimboColorOption } from "../ui/tokens.js";
 const DECK_DESCRIPTIONS = {
     "Red": "+1 discard every round",
     "Blue": "+1 hand every round",
@@ -24,49 +24,21 @@ const DECK_DESCRIPTIONS = {
 };
 const STAKE_DESCRIPTIONS = {
     "White": "Base Difficulty",
-    "Red": "Small Blind gives\nno reward money\nApplies all previous Stakes",
-    "Green": "Required score scales\nfaster for each Ante\nApplies all previous Stakes",
-    "Black": "Shop can have Jokers\nwith Eternal\nApplies all previous Stakes",
-    "Blue": "-1 Discard\nApplies all previous Stakes",
-    "Purple": "Required score scales\nfaster for each Ante\nApplies all previous Stakes",
-    "Orange": "Shop can have Jokers\nwith Perishable\nApplies all previous Stakes",
-    "Gold": "-1 hand size\nShop can have Jokers\nwith Rental\nApplies all previous Stakes",
+    "Red": "Small Blind gives\nno reward money",
+    "Green": "Required score scales\nfaster for each Ante",
+    "Black": "Shop can have Jokers\nwith Eternal",
+    "Blue": "-1 Discard",
+    "Purple": "Required score scales\nfaster for each Ante",
+    "Orange": "Shop can have Jokers\nwith Perishable",
+    "Gold": "-1 hand size\nShop can have Jokers\nwith Rental",
 };
-function formatTextWithColors(text) {
-    // Hacky basic coloration for Balatro text
-    const parts = text.split(/(\d+|Spades|Hearts|Clubs|Diamonds|\$[\d]+|Eternal|Perishable|Rental|Chips|Mult)/g);
-    return parts.map((part, i) => {
-        let color = JimboColorOption.WHITE;
-        if (/^\d+$/.test(part))
-            color = JimboColorOption.RED;
-        else if (part === 'Spades')
-            color = JimboColorOption.BLUE; // Spades are typically blue in high contrast
-        else if (part === 'Hearts')
-            color = JimboColorOption.RED;
-        else if (part === 'Clubs')
-            color = JimboColorOption.GREEN_TEXT;
-        else if (part === 'Diamonds')
-            color = JimboColorOption.ORANGE_TEXT;
-        else if (part.startsWith('$'))
-            color = JimboColorOption.GOLD_TEXT;
-        else if (['Eternal', 'Perishable', 'Rental'].includes(part))
-            color = JimboColorOption.GOLD_TEXT; // Should be specific colours
-        else if (part === 'Chips')
-            color = JimboColorOption.BLUE;
-        else if (part === 'Mult')
-            color = JimboColorOption.RED;
-        if (color !== JimboColorOption.WHITE) {
-            return _jsx("span", { style: { color }, children: part }, i);
-        }
-        return _jsx("span", { children: part }, i);
-    });
-}
 export function RunConfigModal({ open, onClose, deck, stake, onChange, }) {
     const [activeDeck, setActiveDeck] = useState(deck);
     const [activeStake, setActiveStake] = useState(stake);
     // Sync state if props change when opened
     React.useEffect(() => {
         if (open) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setActiveDeck(deck);
             setActiveStake(stake);
         }
@@ -83,116 +55,5 @@ export function RunConfigModal({ open, onClose, deck, stake, onChange, }) {
         onChange(activeDeck, activeStake);
         onClose();
     };
-    const CarouselButton = ({ onClick, children }) => (_jsx("button", { onClick: onClick, style: {
-            width: 32,
-            height: "100%",
-            borderRadius: 8,
-            background: JimboColorOption.RED,
-            border: `2px solid ${JimboColorOption.WHITE}`, // Should be dark edge with inner shadow but let's use standard red btn style
-            color: JimboColorOption.WHITE,
-            fontSize: 24,
-            fontFamily: "m6x11plus, monospace",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            cursor: "pointer",
-            flexShrink: 0,
-        }, className: "j-btn j-btn--red" // piggyback on Jimbo button styles
-        , children: _jsx("div", { className: "j-btn__face", style: { padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: children }) }));
-    return (_jsx(JimboModal, { open: open, onClose: onClose, children: _jsxs("div", { style: {
-                width: 600,
-                maxWidth: "95vw",
-                background: JimboColorOption.TEAL_GREY, // A greenish-grey slate color
-                borderRadius: 16,
-                border: `3px solid ${JimboColorOption.BORDER_SILVER}`,
-                boxShadow: `inset 0 0 0 2px ${JimboColorOption.DARKEST}, 0 8px 16px rgba(0,0,0,0.5)`,
-                padding: "24px 20px",
-                display: "flex",
-                flexDirection: "column",
-                gap: 24,
-                position: "relative",
-            }, children: [_jsx("div", { style: {
-                        position: "absolute",
-                        top: -20,
-                        left: 0,
-                        right: 0,
-                        display: "flex",
-                        justifyContent: "center",
-                        gap: 8,
-                    }, children: _jsx("div", { className: "j-btn j-btn--red", style: { height: 36, pointerEvents: "none" }, children: _jsx("div", { className: "j-btn__face", style: { fontSize: 16, padding: "0 16px" }, children: "Seed Finder" }) }) }), _jsxs("div", { style: { display: "flex", height: 160, gap: 12 }, children: [_jsx(CarouselButton, { onClick: prevDeck, children: "<" }), _jsxs("div", { style: {
-                                flex: 1,
-                                background: JimboColorOption.DARK_GREY,
-                                borderRadius: 12,
-                                border: `2px solid ${JimboColorOption.PANEL_EDGE}`,
-                                display: "flex",
-                                alignItems: "center",
-                                padding: "16px",
-                                gap: 16,
-                            }, children: [_jsx(DeckSprite, { deck: activeDeck, size: 100, style: { flexShrink: 0 } }), _jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center" }, children: [_jsxs("h2", { style: {
-                                                fontFamily: "m6x11plus, monospace",
-                                                fontSize: 28,
-                                                color: JimboColorOption.WHITE,
-                                                margin: "0 0 8px 0",
-                                                textShadow: `1px 1px 0 ${JimboColorOption.DARKEST}`,
-                                            }, children: [activeDeck, " Deck"] }), _jsx("div", { style: {
-                                                background: JimboColorOption.WHITE,
-                                                borderRadius: 8,
-                                                padding: "12px",
-                                                width: "100%",
-                                                minHeight: 80,
-                                                display: "flex",
-                                                flexDirection: "column",
-                                                alignItems: "center",
-                                                justifyContent: "center",
-                                                boxShadow: `inset 0 -2px 0 0 ${JimboColorOption.PANEL_EDGE}`,
-                                            }, children: _jsx("div", { style: {
-                                                    fontFamily: "m6x11plus, monospace",
-                                                    fontSize: 16,
-                                                    color: JimboColorOption.DARKEST,
-                                                    textAlign: "center",
-                                                    whiteSpace: "pre-line",
-                                                    lineHeight: 1.2,
-                                                }, children: formatTextWithColors(DECK_DESCRIPTIONS[activeDeck] || "Standard 52 card deck") }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, paddingRight: 4 }, children: [_jsx("div", { style: { width: 8, height: 8, borderRadius: 4, background: JimboColorOption.GREY } }), _jsx("div", { style: { width: 8, height: 8, borderRadius: 4, background: JimboColorOption.GREY } }), _jsx("div", { style: { width: 8, height: 8, borderRadius: 4, background: JimboColorOption.GREEN } }), _jsx("div", { style: { width: 8, height: 8, borderRadius: 4, background: JimboColorOption.RED } }), _jsx("div", { style: { width: 8, height: 8, borderRadius: 4, background: JimboColorOption.WHITE } })] })] }), _jsx(CarouselButton, { onClick: nextDeck, children: ">" })] }), _jsxs("div", { style: { display: "flex", height: 120, gap: 12 }, children: [_jsx(CarouselButton, { onClick: prevStake, children: "<" }), _jsxs("div", { style: {
-                                flex: 1,
-                                background: JimboColorOption.DARK_GREY,
-                                borderRadius: 12,
-                                border: `2px solid ${JimboColorOption.PANEL_EDGE}`,
-                                display: "flex",
-                                alignItems: "center",
-                                padding: "12px 16px",
-                                gap: 16,
-                                position: "relative",
-                            }, children: [_jsx("div", { style: {
-                                        position: 'absolute',
-                                        left: -14, // Cut out effect text
-                                        top: '50%',
-                                        transform: 'translateY(-50%) rotate(-90deg)',
-                                        fontFamily: "m6x11plus, monospace",
-                                        fontSize: 16,
-                                        color: JimboColorOption.GREY,
-                                    }, children: "Stake" }), _jsx("div", { style: { paddingLeft: 20 }, children: _jsx(StakeSprite, { stake: activeStake, width: 64, style: { flexShrink: 0 } }) }), _jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center" }, children: [_jsxs("h2", { style: {
-                                                fontFamily: "m6x11plus, monospace",
-                                                fontSize: 22,
-                                                color: JimboColorOption.WHITE,
-                                                margin: "0 0 6px 0",
-                                                textShadow: `1px 1px 0 ${JimboColorOption.DARKEST}`,
-                                            }, children: [activeStake, " Stake"] }), _jsx("div", { style: {
-                                                background: JimboColorOption.WHITE,
-                                                borderRadius: 8,
-                                                padding: "8px 12px",
-                                                width: "100%",
-                                                minHeight: 60,
-                                                display: "flex",
-                                                flexDirection: "column",
-                                                alignItems: "center",
-                                                justifyContent: "center",
-                                                boxShadow: `inset 0 -2px 0 0 ${JimboColorOption.PANEL_EDGE}`,
-                                            }, children: _jsx("div", { style: {
-                                                    fontFamily: "m6x11plus, monospace",
-                                                    fontSize: 14,
-                                                    color: JimboColorOption.DARKEST,
-                                                    textAlign: "center",
-                                                    whiteSpace: "pre-line",
-                                                    lineHeight: 1.2,
-                                                }, children: formatTextWithColors(STAKE_DESCRIPTIONS[activeStake] || "Base Difficulty") }) })] })] }), _jsx(CarouselButton, { onClick: nextStake, children: ">" })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, marginTop: 8 }, children: [_jsx("button", { onClick: handleApply, className: "j-btn j-btn--blue j-btn--lg", style: { width: "80%", height: 50, fontSize: 24, padding: 0 }, children: _jsx("div", { className: "j-btn__face", style: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "APPLY" }) }), _jsx("button", { onClick: onClose, className: "j-btn j-btn--orange j-btn--md", style: { width: "100%", height: 40, fontSize: 18, padding: 0 }, children: _jsx("div", { className: "j-btn__face", style: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "Back" }) })] })] }) }));
+    return (_jsxs(JimboModal, { open: open, onClose: onClose, title: "Run Config", children: [_jsxs("div", { className: "j-flex j-items-center j-gap-sm", children: [_jsx(JimboButton, { tone: "red", size: "sm", onClick: prevDeck, children: "<" }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", style: { flex: 1 }, children: [_jsx(DeckSprite, { deck: activeDeck, size: 64 }), _jsxs(JimboText, { size: "md", tone: "white", children: [activeDeck, " Deck"] }), _jsx(JimboText, { size: "micro", tone: "grey", className: "j-text-center", style: { whiteSpace: "pre-line" }, children: DECK_DESCRIPTIONS[activeDeck] || "Standard 52 card deck" })] }), _jsx(JimboButton, { tone: "red", size: "sm", onClick: nextDeck, children: ">" })] }), _jsxs("div", { className: "j-flex j-items-center j-gap-sm", style: { marginTop: 8 }, children: [_jsx(JimboButton, { tone: "red", size: "sm", onClick: prevStake, children: "<" }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", style: { flex: 1 }, children: [_jsx(StakeSprite, { stake: activeStake, width: 48 }), _jsxs(JimboText, { size: "md", tone: "white", children: [activeStake, " Stake"] }), _jsx(JimboText, { size: "micro", tone: "grey", className: "j-text-center", style: { whiteSpace: "pre-line" }, children: STAKE_DESCRIPTIONS[activeStake] || "Base Difficulty" })] }), _jsx(JimboButton, { tone: "red", size: "sm", onClick: nextStake, children: ">" })] }), _jsxs("div", { className: "j-flex-col j-gap-sm", style: { marginTop: 8 }, children: [_jsx(JimboButton, { tone: "blue", size: "lg", fullWidth: true, onClick: handleApply, children: "Apply" }), _jsx(JimboButton, { tone: "orange", size: "lg", fullWidth: true, onClick: onClose, children: "Back" })] })] }));
 }

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

@@ -20,9 +20,8 @@ export interface CategoryPickerConfig {
 export interface CategoryPickerProps {
     config: CategoryPickerConfig;
     onSelect: (selection: SlotSelection) => void;
-    onCancel: () => void;
 }
-export declare function CategoryPicker({ config, onSelect, onCancel }: CategoryPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryPicker({ config, onSelect }: CategoryPickerProps): import("react/jsx-runtime").JSX.Element;
 export declare const VOUCHER_PICKER_CONFIG: CategoryPickerConfig;
 export declare const TAG_PICKER_CONFIG: CategoryPickerConfig;
 export declare const BOSS_PICKER_CONFIG: CategoryPickerConfig;

package/dist/components/jamlMap/CategoryPicker.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-refresh/only-export-components */
 import { useState, useCallback, useMemo } from "react";
 import { JimboSprite } from "../../ui/sprites.js";
 import { JimboColorOption } from "../../ui/tokens.js";
 import { JimboText } from "../../ui/jimboText.js";
 // ─── Component ───────────────────────────────────────────────────────────────
 const C = JimboColorOption;
-export function CategoryPicker({ config, onSelect, onCancel }) {
+export function CategoryPicker({ config, onSelect }) {
     const [search, setSearch] = useState("");
     const filtered = useMemo(() => {
         if (!search)