jaml-ui 0.5.2 → 0.6.0

package/dist/components/JamlIde.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { type JamlIdeMode } from "./JamlIdeToolbar.js";
+import { type JamlVisualFilter } from "./JamlIdeVisual.js";
 export interface JamlIdeSearchResult {
     seed: string;
     score?: number;
@@ -17,5 +18,9 @@ export interface JamlIdeProps {
     codePlaceholder?: string;
     onSearch?: () => void;
     isSearching?: boolean;
+    visualFilter?: JamlVisualFilter;
+    onVisualFilterChange?: (filter: JamlVisualFilter) => void;
 }
-export declare function JamlIde({ jaml, onChange, defaultMode, searchResults, className, title, actions, codePlaceholder, onSearch, isSearching, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;
+export type { JamlVisualFilter } from "./JamlIdeVisual.js";
+export type { JamlVisualClause, JamlZone } from "./JamlIdeVisual.js";
+export declare function JamlIde({ jaml, onChange, defaultMode, searchResults, className, title, actions, codePlaceholder, onSearch, isSearching, visualFilter, onVisualFilterChange, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlIde.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useMemo, useState } from "react";
 import { JamlMapPreview } from "./JamlMapPreview.js";
 import { JamlIdeToolbar } from "./JamlIdeToolbar.js";
+import { JamlIdeVisual } from "./JamlIdeVisual.js";
 import { JimboColorOption } from "../ui/tokens.js";
 function TallyBar({ value, max }) {
     const pct = max > 0 ? Math.min(1, value / max) : 0;
@@ -88,7 +89,7 @@ function ResultsView({ results }) {
                         }) })) : null] }, result.seed));
         }) }));
 }
-export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults = [], className = "", title = "JAML IDE", actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, }) {
+export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults = [], className = "", title = "JAML IDE", actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, visualFilter, onVisualFilterChange, }) {
     const [mode, setMode] = useState(defaultMode);
     const results = useMemo(() => searchResults, [searchResults]);
     return (_jsxs("div", { className: className, style: {
@@ -109,7 +110,7 @@ export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults =
                     padding: "10px 14px",
                     borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
                     background: JimboColorOption.TEAL_GREY,
-                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 14, fontWeight: 800, 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 === "code" ? (_jsx("textarea", { title: "JAML IDE Editor", value: jaml, onChange: (event) => onChange(event.target.value), placeholder: codePlaceholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", style: {
+                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 14, fontWeight: 800, 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" && visualFilter && onVisualFilterChange ? (_jsx(JamlIdeVisual, { filter: visualFilter, onChange: onVisualFilterChange })) : mode === "visual" ? (_jsxs("div", { style: { padding: 16, color: JimboColorOption.GREY, fontSize: 12, textAlign: "center" }, children: ["Pass ", _jsx("code", { children: "visualFilter" }), " and ", _jsx("code", { children: "onVisualFilterChange" }), " props to enable the visual editor."] })) : null, mode === "code" ? (_jsx("textarea", { title: "JAML IDE Editor", value: jaml, onChange: (event) => onChange(event.target.value), placeholder: codePlaceholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", style: {
                             width: "100%",
                             minHeight: 320,
                             resize: "vertical",

package/dist/components/JamlIdeToolbar.d.ts

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

package/dist/components/JamlIdeToolbar.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { JimboColorOption } from "../ui/tokens.js";
 const TABS = [
+    { id: "visual", label: "Visual" },
     { id: "code", label: "Code" },
     { id: "map", label: "Map" },
     { id: "results", label: "Results" },

package/dist/components/JamlIdeVisual.d.ts

@@ -0,0 +1,27 @@
+export type JamlZone = "must" | "should" | "mustnot";
+export interface JamlVisualClause {
+    id: string;
+    type: string;
+    value: string;
+    label?: string;
+    antes?: number[];
+    score?: number;
+    edition?: string;
+}
+export interface JamlVisualFilter {
+    name?: string;
+    author?: string;
+    description?: string;
+    deck?: string;
+    stake?: string;
+    must: JamlVisualClause[];
+    should: JamlVisualClause[];
+    mustnot: JamlVisualClause[];
+}
+export interface JamlIdeVisualProps {
+    filter: JamlVisualFilter;
+    onChange: (filter: JamlVisualFilter) => void;
+    onSave?: () => void;
+    onBack?: () => void;
+}
+export declare function JamlIdeVisual({ filter, onChange, onSave, onBack }: JamlIdeVisualProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlIdeVisual.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { JimboColorOption } from "../ui/tokens.js";
+import { BalSprite } from "../ui/sprites.js";
+const ZONE_META = {
+    must: { label: "MUST", color: JimboColorOption.BLUE },
+    should: { label: "SHOULD", color: JimboColorOption.RED },
+    mustnot: { label: "MUST NOT", color: JimboColorOption.ORANGE },
+};
+function clauseSpriteSheet(type) {
+    if (type === "joker" || type === "souljoker" || type === "rareJoker" || type === "commonJoker" || type === "uncommonJoker" || type === "legendaryJoker" || type === "mixedJoker")
+        return "Jokers";
+    if (type === "voucher")
+        return "Vouchers";
+    if (type === "smallblindtag" || type === "bigblindtag" || type === "tag")
+        return "tags";
+    if (type === "boss")
+        return "BlindChips";
+    if (type === "tarot" || type === "spectral")
+        return "Tarots";
+    return undefined;
+}
+function ClauseSprite({ clause, size = 26 }) {
+    const sheet = clauseSpriteSheet(clause.type);
+    if (!sheet)
+        return null;
+    return _jsx(BalSprite, { name: clause.value, sheet: sheet, width: size });
+}
+function DragClausePill({ clause, zone, onDragStart, }) {
+    const z = ZONE_META[zone];
+    return (_jsxs("div", { onMouseDown: (e) => onDragStart(e, clause, zone), onTouchStart: (e) => onDragStart(e, clause, zone), style: {
+            display: "flex", alignItems: "center", gap: 6,
+            background: JimboColorOption.DARK_GREY, border: `2px solid ${z.color}`,
+            borderRadius: 6, padding: "5px 8px 5px 4px",
+            boxShadow: `0 2px 0 ${JimboColorOption.BLACK}`,
+            cursor: "grab", userSelect: "none", touchAction: "none",
+        }, children: [_jsx("div", { style: { color: JimboColorOption.GREY, fontSize: 12, lineHeight: 1, padding: "0 2px" }, children: "\u22EE\u22EE" }), _jsx(ClauseSprite, { clause: clause, size: 26 }), _jsx("div", { style: { fontSize: 10, color: JimboColorOption.WHITE, letterSpacing: 1, textShadow: "1px 1px 0 rgba(0,0,0,.8)" }, children: clause.label || clause.value }), clause.antes && clause.antes.length > 0 && (_jsxs("div", { style: { display: "flex", gap: 2 }, children: [clause.antes.slice(0, 3).map((a) => (_jsx("div", { style: { fontSize: 8, padding: "0 3px", background: JimboColorOption.DARKEST, color: z.color, borderRadius: 2 }, children: a }, a))), clause.antes.length > 3 && _jsxs("div", { style: { fontSize: 8, color: JimboColorOption.GREY }, children: ["+", clause.antes.length - 3] })] })), clause.score != null && (_jsxs("div", { style: { fontSize: 9, padding: "0 4px", background: JimboColorOption.RED, color: JimboColorOption.WHITE, borderRadius: 2 }, children: ["+", clause.score] }))] }));
+}
+function ZoneDropRail({ zone, clauses, onDragStart, highlight, }) {
+    const z = ZONE_META[zone];
+    return (_jsxs("div", { "data-zone": zone, style: {
+            border: `2px dashed ${highlight ? z.color : `${z.color}55`}`,
+            background: highlight ? `${z.color}22` : "transparent",
+            borderRadius: 6, padding: 8,
+            transition: "background 100ms, border-color 100ms",
+        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [_jsx("div", { style: {
+                            fontSize: 10, letterSpacing: 2, padding: "2px 8px",
+                            background: z.color, color: JimboColorOption.WHITE, borderRadius: 3,
+                            textShadow: "1px 1px 0 rgba(0,0,0,.8)",
+                        }, children: z.label }), _jsx("div", { style: { flex: 1, height: 1, background: `${z.color}44` } }), _jsx("div", { style: { fontSize: 8, color: JimboColorOption.GREY }, children: clauses.length })] }), _jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [clauses.map((c) => (_jsx(DragClausePill, { clause: c, zone: zone, onDragStart: onDragStart }, c.id))), clauses.length === 0 && (_jsx("div", { style: { fontSize: 10, color: JimboColorOption.GREY, padding: 10, fontStyle: "italic" }, children: "drop clauses here" }))] })] }));
+}
+export function JamlIdeVisual({ filter, onChange, onSave, onBack }) {
+    const [drag, setDrag] = useState(null);
+    const [hoverZone, setHoverZone] = useState(null);
+    const rootRef = useRef(null);
+    const onDragStart = (e, clause, fromZone) => {
+        e.preventDefault();
+        const t = "touches" in e ? e.touches[0] : e;
+        const rect = e.currentTarget.getBoundingClientRect();
+        setDrag({ clause, fromZone, x: t.clientX, y: t.clientY, offX: t.clientX - rect.left, offY: t.clientY - rect.top, w: rect.width, h: rect.height });
+    };
+    useEffect(() => {
+        if (!drag)
+            return;
+        const move = (e) => {
+            const t = "touches" in e ? e.touches[0] : e;
+            setDrag((d) => d && { ...d, x: t.clientX, y: t.clientY });
+            const rails = rootRef.current?.querySelectorAll("[data-zone]") ?? [];
+            let found = null;
+            for (const r of rails) {
+                const rc = r.getBoundingClientRect();
+                if (t.clientX >= rc.left && t.clientX <= rc.right && t.clientY >= rc.top && t.clientY <= rc.bottom) {
+                    found = r.getAttribute("data-zone");
+                    break;
+                }
+            }
+            setHoverZone(found);
+        };
+        const up = () => {
+            if (hoverZone && hoverZone !== drag.fromZone) {
+                const from = hoverZone;
+                onChange({
+                    ...filter,
+                    [drag.fromZone]: filter[drag.fromZone].filter((c) => c.id !== drag.clause.id),
+                    [from]: [...filter[from], { ...drag.clause }],
+                });
+            }
+            setDrag(null);
+            setHoverZone(null);
+        };
+        window.addEventListener("mousemove", move);
+        window.addEventListener("mouseup", up);
+        window.addEventListener("touchmove", move, { passive: false });
+        window.addEventListener("touchend", up);
+        return () => {
+            window.removeEventListener("mousemove", move);
+            window.removeEventListener("mouseup", up);
+            window.removeEventListener("touchmove", move);
+            window.removeEventListener("touchend", up);
+        };
+    }, [drag, hoverZone, filter, onChange]);
+    return (_jsxs("div", { ref: rootRef, style: { display: "flex", flexDirection: "column", gap: 10, padding: 10 }, children: [_jsxs("div", { style: {
+                    background: JimboColorOption.DARK_GREY, border: `2px solid ${JimboColorOption.PANEL_EDGE}`,
+                    borderRadius: 6, padding: 8, boxShadow: `0 2px 0 ${JimboColorOption.BLACK}`,
+                }, children: [_jsx("div", { style: { fontSize: 9, color: JimboColorOption.GREY, letterSpacing: 2 }, children: "FILE" }), _jsxs("div", { style: { fontSize: 14, color: JimboColorOption.WHITE, textShadow: "1px 1px 0 rgba(0,0,0,.8)" }, children: [filter.name || "Untitled", ".jaml"] }), filter.author && (_jsxs("div", { style: { fontSize: 9, color: JimboColorOption.GOLD_TEXT, marginTop: 2 }, children: ["by ", filter.author] }))] }), _jsx("div", { style: { fontSize: 9, color: JimboColorOption.GREY, letterSpacing: 1, textAlign: "center" }, children: "\u22EE\u22EE drag clauses between zones \u00B7 tap to edit" }), _jsx(ZoneDropRail, { zone: "must", clauses: filter.must, onDragStart: onDragStart, highlight: hoverZone === "must" }), _jsx(ZoneDropRail, { zone: "should", clauses: filter.should, onDragStart: onDragStart, highlight: hoverZone === "should" }), _jsx(ZoneDropRail, { zone: "mustnot", clauses: filter.mustnot, onDragStart: onDragStart, highlight: hoverZone === "mustnot" }), drag && (_jsx("div", { style: {
+                    position: "fixed",
+                    left: drag.x - drag.offX, top: drag.y - drag.offY,
+                    pointerEvents: "none", zIndex: 999,
+                    transform: "rotate(-2deg) scale(1.05)",
+                    filter: "drop-shadow(0 4px 6px rgba(0,0,0,.6))", opacity: 0.92,
+                }, children: _jsx(DragClausePill, { clause: drag.clause, zone: drag.fromZone, onDragStart: () => { } }) }))] }));
+}

package/dist/index.d.ts

@@ -4,7 +4,8 @@ export { JamlCardRenderer, type JamlCardRendererProps } from "./render/CanvasRen
 export { JamlGameCard, JamlVoucher, JamlTag, JamlBoss, resolveAnalyzerShopItem, type JamlGameCardProps, type AnalyzerShopItem, type AnalyzerResolvedItem, } from "./components/GameCard.js";
 export { AnalyzerExplorer, type AnalyzerAnteView, type AnalyzerBadge, type AnalyzerExplorerProps, type AnalyzerFact, type AnalyzerHighlight, type AnalyzerItem, } from "./components/AnalyzerExplorer.js";
 export { JamlMapPreview, type JamlMapPreviewProps } from "./components/JamlMapPreview.js";
-export { JamlIde, type JamlIdeProps, type JamlIdeSearchResult, } from "./components/JamlIde.js";
+export { JamlIde, type JamlIdeProps, type JamlIdeSearchResult, type JamlVisualFilter, type JamlVisualClause, type JamlZone, } from "./components/JamlIde.js";
+export { JamlIdeVisual, type JamlIdeVisualProps, } from "./components/JamlIdeVisual.js";
 export { JamlIdeToolbar, type JamlIdeMode, type JamlIdeToolbarProps, } from "./components/JamlIdeToolbar.js";
 export { CardList, type CardListProps } from "./components/CardList.js";
 export { extractVisualJamlItems, type JamlPreviewGroups, type JamlPreviewItem, type JamlPreviewSection, type JamlPreviewVisualType, } from "./utils/jamlMapPreview.js";

package/dist/index.js

@@ -6,6 +6,7 @@ export { JamlGameCard, JamlVoucher, JamlTag, JamlBoss, resolveAnalyzerShopItem,
 export { AnalyzerExplorer, } from "./components/AnalyzerExplorer.js";
 export { JamlMapPreview } from "./components/JamlMapPreview.js";
 export { JamlIde, } from "./components/JamlIde.js";
+export { JamlIdeVisual, } from "./components/JamlIdeVisual.js";
 export { JamlIdeToolbar, } from "./components/JamlIdeToolbar.js";
 export { CardList } from "./components/CardList.js";
 export { extractVisualJamlItems, } from "./utils/jamlMapPreview.js";

package/dist/ui/panel.d.ts

@@ -19,6 +19,20 @@ export declare function JimboButton({ children, variant, size, fullWidth, classN
 export declare function JimboBackButton({ label, ...props }: Omit<JimboButtonProps, 'variant' | 'children'> & {
     label?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export type BalTone = 'orange' | 'red' | 'blue' | 'green' | 'gold' | 'grey';
+export interface BalButtonProps {
+    tone?: BalTone;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare function BalButton({ tone, size, fullWidth, disabled, onClick, style, children, }: BalButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BalBackButton({ onClick }: {
+    onClick?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
 export interface JimboModalProps {
     children: React.ReactNode;
     open: boolean;

package/dist/ui/panel.js

@@ -63,6 +63,39 @@ export function JimboButton({ children, variant = 'primary', size = 'md', fullWi
 export function JimboBackButton({ label = 'Back', ...props }) {
     return _jsx(JimboButton, { variant: "back", size: "sm", fullWidth: true, ...props, children: label });
 }
+// ─── BalButton ────────────────────────────────────────────────────────────────
+// Canonical Balatro-style flat 2D button.
+// Two-layer: separate shadow div (3px south + 1px east) that disappears on press.
+// Press translates the face onto the shadow. No gradients, no hover color change.
+const BAL_PAIRS = {
+    orange: [JimboColorOption.ORANGE, JimboColorOption.DARK_ORANGE],
+    red: [JimboColorOption.RED, JimboColorOption.DARK_RED],
+    blue: [JimboColorOption.BLUE, JimboColorOption.DARK_BLUE],
+    green: [JimboColorOption.GREEN, JimboColorOption.DARK_GREEN],
+    gold: [JimboColorOption.GOLD, '#8a6a1e'],
+    grey: [JimboColorOption.DARK_GREY, JimboColorOption.DARKEST],
+};
+export function BalButton({ tone = 'orange', size = 'md', fullWidth = false, disabled = false, onClick, style, children, }) {
+    const [pressed, setPressed] = useState(false);
+    const [fg, sh] = BAL_PAIRS[tone] ?? BAL_PAIRS.orange;
+    const pad = size === 'sm' ? '4px 10px' : size === 'lg' ? '14px 18px' : '9px 14px';
+    const fs = size === 'sm' ? 12 : size === 'lg' ? 18 : 14;
+    return (_jsxs("div", { onMouseDown: () => { if (!disabled)
+            setPressed(true); }, onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onTouchStart: () => { if (!disabled)
+            setPressed(true); }, onTouchEnd: () => setPressed(false), onClick: () => { if (!disabled)
+            onClick?.(); }, style: { display: 'inline-block', width: fullWidth ? '100%' : undefined, position: 'relative', cursor: disabled ? 'not-allowed' : 'pointer', userSelect: 'none', opacity: disabled ? 0.55 : 1, ...style }, children: [_jsx("div", { style: { position: 'absolute', left: 1, top: 3, right: -1, bottom: -3, background: sh, borderRadius: 6, opacity: pressed ? 0 : 1 } }), _jsx("div", { style: {
+                    position: 'relative', background: fg, borderRadius: 6, padding: pad,
+                    transform: pressed ? 'translate(1px, 3px)' : 'translate(0,0)',
+                    transition: 'transform 55ms linear',
+                    textAlign: 'center',
+                    fontFamily: 'm6x11plus, monospace', fontSize: fs, letterSpacing: 2,
+                    color: '#fff', textShadow: '1px 1px 0 rgba(0,0,0,0.8)',
+                    textTransform: 'uppercase', lineHeight: 1.1,
+                }, children: children })] }));
+}
+export function BalBackButton({ onClick }) {
+    return (_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%', padding: '8px 10px 10px' }, children: _jsx(BalButton, { tone: "orange", size: "md", onClick: onClick, style: { width: '66.666%' }, children: "Back" }) }));
+}
 export function JimboModal({ children, open, onClose, title, className }) {
     const [visible, setVisible] = useState(open);
     const [opacity, setOpacity] = useState(open ? 1 : 0);

package/dist/ui/showcase.d.ts

@@ -0,0 +1,26 @@
+export interface ShowcaseFilter {
+    name: string;
+    author: string;
+    hits: string;
+    tone: 'blue' | 'red' | 'gold' | 'green';
+    sample: string[];
+}
+export interface ShowcaseRecentFind {
+    seed: string;
+    filterName: string;
+    score: number;
+}
+export interface ShowcaseLiveStats {
+    searched: string;
+    matches: string;
+    speed: string;
+}
+export interface ShowcaseProps {
+    hotFilters?: ShowcaseFilter[];
+    recentFinds?: ShowcaseRecentFind[];
+    stats?: ShowcaseLiveStats;
+    onNewSearch?: () => void;
+    onBrowseFilters?: () => void;
+    onBack?: () => void;
+}
+export declare function Showcase({ hotFilters, recentFinds, stats, onNewSearch, onBrowseFilters, onBack, }: ShowcaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/showcase.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JimboColorOption } from './tokens.js';
+import { BalButton } from './panel.js';
+import { BalSprite } from './sprites.js';
+const TONE_COLOR = {
+    blue: JimboColorOption.BLUE,
+    red: JimboColorOption.RED,
+    gold: JimboColorOption.GOLD,
+    green: JimboColorOption.GREEN,
+};
+const DEFAULT_STATS = { searched: '15.6B', matches: '2,847', speed: '5.4M/s' };
+export function Showcase({ hotFilters = [], recentFinds = [], stats = DEFAULT_STATS, onNewSearch, onBrowseFilters, onBack, }) {
+    const C = JimboColorOption;
+    return (_jsxs("div", { style: {
+            width: '100%', height: '100%', background: C.DARKEST,
+            display: 'flex', flexDirection: 'column',
+            fontFamily: 'm6x11plus, monospace', color: C.WHITE, overflow: 'hidden',
+        }, children: [_jsxs("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '18px 14px 10px' }, children: [_jsxs("div", { style: { textAlign: 'center', marginBottom: 18 }, children: [_jsx("div", { style: { fontSize: 32, letterSpacing: 3, lineHeight: 1, color: C.GOLD, textShadow: '2px 2px 0 rgba(0,0,0,.8)' }, children: "Balatro" }), _jsx("div", { style: { fontSize: 14, letterSpacing: 4, color: C.GREY, marginTop: 4, textShadow: '1px 1px 0 rgba(0,0,0,.8)' }, children: "SEED \u00B7 CURATOR" })] }), _jsx("div", { style: {
+                            background: C.DARK_GREY, borderRadius: 6, padding: 10,
+                            border: `2px solid ${C.PANEL_EDGE}`, boxShadow: `0 2px 0 ${C.BLACK}`,
+                            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, textAlign: 'center', marginBottom: 16,
+                        }, children: [
+                            [stats.searched, 'searched'],
+                            [stats.matches, 'matches'],
+                            [stats.speed, 'speed'],
+                        ].map(([n, l]) => (_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, color: C.GOLD, textShadow: '1px 1px 0 rgba(0,0,0,.8)' }, children: n }), _jsx("div", { style: { fontSize: 9, color: C.GREY, letterSpacing: 2, marginTop: 2 }, children: l.toUpperCase() })] }, l))) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }, children: [_jsx("div", { style: {
+                                    fontSize: 11, letterSpacing: 2, padding: '2px 8px',
+                                    background: C.BLUE, color: C.WHITE, borderRadius: 3,
+                                    textShadow: '1px 1px 0 rgba(0,0,0,.8)',
+                                }, children: "HOT FILTERS" }), _jsx("div", { style: { flex: 1, height: 2, background: `${C.BLUE}55`, borderRadius: 1 } })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }, children: hotFilters.map((f, i) => {
+                            const tColor = TONE_COLOR[f.tone];
+                            return (_jsxs("div", { style: {
+                                    background: C.DARK_GREY, borderRadius: 6, padding: 10,
+                                    border: `2px solid ${tColor}`, boxShadow: `0 2px 0 ${C.BLACK}`,
+                                    display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
+                                }, children: [_jsx("div", { style: { display: 'flex', gap: 2 }, children: f.sample.map((name, j) => (_jsx("div", { style: { width: 30, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(BalSprite, { name: name, width: 28 }) }, j))) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
+                                                    fontSize: 13, color: C.WHITE, letterSpacing: 1,
+                                                    textShadow: '1px 1px 0 rgba(0,0,0,.8)',
+                                                    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                                                }, children: f.name }), _jsxs("div", { style: { fontSize: 9, color: C.GOLD_TEXT, letterSpacing: 1, marginTop: 2 }, children: ["by ", f.author] })] }), _jsxs("div", { style: { textAlign: 'right' }, children: [_jsx("div", { style: { fontSize: 14, color: tColor, textShadow: '1px 1px 0 rgba(0,0,0,.8)' }, children: f.hits }), _jsx("div", { style: { fontSize: 8, color: C.GREY, letterSpacing: 1 }, children: "seeds" })] })] }, i));
+                        }) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }, children: [_jsx("div", { style: {
+                                    fontSize: 11, letterSpacing: 2, padding: '2px 8px',
+                                    background: C.GREEN, color: C.WHITE, borderRadius: 3,
+                                    textShadow: '1px 1px 0 rgba(0,0,0,.8)',
+                                }, children: "RECENT FINDS" }), _jsx("div", { style: { flex: 1, height: 2, background: `${C.GREEN}55`, borderRadius: 1 } })] }), _jsx("div", { style: {
+                            background: C.DARK_GREY, borderRadius: 6, padding: '8px 10px',
+                            border: `2px solid ${C.PANEL_EDGE}`, boxShadow: `0 2px 0 ${C.BLACK}`,
+                            fontSize: 11, color: C.GREY, letterSpacing: 1, lineHeight: 1.7,
+                        }, children: recentFinds.length === 0 ? (_jsx("div", { style: { color: C.GREY }, children: "No recent finds yet." })) : recentFinds.map((r, i) => (_jsxs("div", { children: [_jsx("span", { style: { color: C.GOLD_TEXT }, children: r.seed }), ' · ', r.filterName, r.score > 0 && _jsxs("span", { style: { color: C.GREEN_TEXT }, children: [" +", r.score] })] }, i))) }), _jsx("div", { style: { height: 16 } })] }), _jsxs("div", { style: {
+                    padding: '8px 10px 10px', borderTop: `2px solid ${C.BLACK}`, background: C.DARK_GREY,
+                    display: 'flex', flexDirection: 'column', gap: 6,
+                }, children: [_jsx(BalButton, { tone: "green", fullWidth: true, size: "md", onClick: onNewSearch, children: "New Search" }), _jsx(BalButton, { tone: "blue", fullWidth: true, size: "md", onClick: onBrowseFilters, children: "Browse Filters" }), _jsx(BalButton, { tone: "orange", fullWidth: true, size: "md", onClick: onBack, children: "Back" })] })] }));
+}

package/dist/ui/sprites.d.ts

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

package/dist/ui/sprites.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveJamlAssetUrl } from '../assets.js';
+import { getSpriteData } from '../sprites/spriteMapper.js';
+const SHEET_META = {
+    Jokers: { cols: 10, rows: 16, assetKey: 'jokers' },
+    Tarots: { cols: 10, rows: 6, assetKey: 'tarots' },
+    Vouchers: { cols: 9, rows: 4, assetKey: 'vouchers' },
+    Boosters: { cols: 4, rows: 9, assetKey: 'boosters' },
+    BlindChips: { cols: 21, rows: 31, assetKey: 'blinds' },
+    tags: { cols: 6, rows: 5, assetKey: 'tags' },
+    Enhancers: { cols: 7, rows: 5, assetKey: 'enhancers' },
+    Editions: { cols: 5, rows: 1, assetKey: 'editions' },
+};
+export function BalSprite({ name, sheet, width = 40, height, style }) {
+    const sprite = getSpriteData(name);
+    const resolvedSheet = sheet ?? sprite?.type ?? 'Jokers';
+    const meta = SHEET_META[resolvedSheet];
+    const pos = sprite?.pos ?? { x: 0, y: 0 };
+    const h = height ?? width;
+    if (!meta)
+        return null;
+    const bgW = width * meta.cols;
+    const bgH = h * meta.rows;
+    const bgX = -(pos.x * width);
+    const bgY = -(pos.y * h);
+    return (_jsx("div", { style: {
+            width, height: h, flexShrink: 0,
+            backgroundImage: `url(${resolveJamlAssetUrl(meta.assetKey)})`,
+            backgroundSize: `${bgW}px ${bgH}px`,
+            backgroundPosition: `${bgX}px ${bgY}px`,
+            backgroundRepeat: 'no-repeat',
+            imageRendering: 'pixelated',
+            ...style,
+        } }));
+}

package/dist/ui.d.ts

@@ -2,3 +2,5 @@ export * from './ui/tokens.js';
 export * from './ui/panel.js';
 export * from './ui/codeBlock.js';
 export * from './ui/footer.js';
+export * from './ui/sprites.js';
+export * from './ui/showcase.js';

package/dist/ui.js

@@ -2,3 +2,5 @@ export * from './ui/tokens.js';
 export * from './ui/panel.js';
 export * from './ui/codeBlock.js';
 export * from './ui/footer.js';
+export * from './ui/sprites.js';
+export * from './ui/showcase.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",