jaml-ui 0.8.0 → 0.10.0

package/dist/components/JamlIdeVisual.js

@@ -35,7 +35,7 @@ function DragClausePill({ clause, zone, onDragStart, }) {
             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] }))] }));
+        }, 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 ${JimboColorOption.BLACK}cc` }, 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];
@@ -47,7 +47,7 @@ function ZoneDropRail({ zone, clauses, onDragStart, highlight, }) {
         }, 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)",
+                            textShadow: `1px 1px 0 ${JimboColorOption.BLACK}cc`,
                         }, 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 }) {
@@ -103,11 +103,11 @@ export function JamlIdeVisual({ filter, onChange, onSave, onBack }) {
     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: {
+                }, 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 ${JimboColorOption.BLACK}cc` }, children: [filter.name || "Untitled", ".jaml"] }), filter.author && (_jsxs("div", { style: { fontSize: 9, color: JimboColorOption.GOLD_TEXT, marginTop: 2 }, children: ["by ", filter.author] }))] }), _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,
+                    filter: `drop-shadow(0 4px 6px ${JimboColorOption.BLACK}99)`, opacity: 0.92,
                 }, children: _jsx(DragClausePill, { clause: drag.clause, zone: drag.fromZone, onDragStart: () => { } }) }))] }));
 }

package/dist/components/MotelyVersionBadge.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export interface MotelyCapabilities {
+    version: string;
+    simd?: boolean;
+    threads?: boolean;
+}
+export interface MotelyVersionBadgeProps {
+    /**
+     * Runtime capabilities from `motely.getCapabilities()`. If omitted, the
+     * consumer can pass a static `version` (typically from motely-wasm's
+     * own package.json) and the component will render without the SIMD /
+     * threads indicators.
+     */
+    caps?: MotelyCapabilities | null;
+    /** Static fallback version when `caps` is null/undefined. */
+    version?: string;
+    /** Compact single-line badge instead of the labelled chip. Default false. */
+    minimal?: boolean;
+    /** Loading placeholder (shown while caps are being fetched). */
+    loading?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Badge showing the loaded motely-wasm version + optional SIMD / threads
+ * capability indicators. Ported from weejoker.app with no dependency on
+ * weejoker's lib/api — the consumer owns capability fetching and passes
+ * the result in.
+ */
+export declare function MotelyVersionBadge({ caps, version, minimal, loading, className, style, }: MotelyVersionBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MotelyVersionBadge.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JimboColorOption } from '../ui/tokens.js';
+import { JimboText } from '../ui/jimboText.js';
+/**
+ * Badge showing the loaded motely-wasm version + optional SIMD / threads
+ * capability indicators. Ported from weejoker.app with no dependency on
+ * weejoker's lib/api — the consumer owns capability fetching and passes
+ * the result in.
+ */
+export function MotelyVersionBadge({ caps, version, minimal = false, loading = false, className = '', style, }) {
+    if (loading) {
+        return (_jsx("span", { className: className, style: style, children: _jsx(JimboText, { size: "xs", tone: "grey", children: "Initializing\u2026" }) }));
+    }
+    const resolved = caps?.version ?? version ?? '?';
+    const simd = caps?.simd;
+    const threads = caps?.threads;
+    if (minimal) {
+        return (_jsxs("span", { className: className, style: { display: 'inline-flex', alignItems: 'center', gap: 6, ...style }, children: [_jsxs(JimboText, { size: "xs", tone: "grey", children: ["v", resolved] }), simd ? (_jsx(JimboText, { size: "xs", tone: "blue", title: "SIMD enabled", children: "\u26A1" })) : null, threads ? (_jsx(JimboText, { size: "xs", tone: "green", title: "Multi-threaded", children: "\uD83E\uDDF5" })) : null] }));
+    }
+    return (_jsxs("div", { className: className, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+            padding: '3px 8px',
+            borderRadius: 4,
+            background: JimboColorOption.DARKEST,
+            border: `1px solid ${JimboColorOption.PANEL_EDGE}`,
+            ...style,
+        }, children: [_jsxs(JimboText, { size: "xs", tone: "gold", uppercase: true, children: ["motely v", resolved] }), simd ? _jsx(JimboText, { size: "xs", tone: "blue", title: "SIMD enabled", children: "\u26A1" }) : null, threads ? _jsx(JimboText, { size: "xs", tone: "green", title: "Multi-threaded", children: "\uD83E\uDDF5" }) : null] }));
+}

package/dist/hooks/searchWorkerCode.js

@@ -1,62 +1,62 @@
 // Worker code as an inline string — created as a Blob URL at runtime.
 // This avoids bundler/import.meta.url issues when shipped as an npm package.
-export const SEARCH_WORKER_CODE = `
-let MotelyWasm = null;
-let MotelyWasmEvents = null;
-let activeSearch = null;
-
-self.addEventListener('message', async function(e) {
-  const msg = e.data;
-
-  if (msg.type === 'init') {
-    try {
-      const mod = await import(msg.url);
-      await mod.default.boot();
-      MotelyWasm = mod.MotelyWasm;
-      MotelyWasmEvents = mod.MotelyWasmEvents;
-      self.postMessage({ type: 'ready' });
-    } catch (err) {
-      self.postMessage({ type: 'error', message: String(err) });
-    }
-    return;
-  }
-
-  if (msg.type === 'start') {
-    if (!MotelyWasm) { self.postMessage({ type: 'error', message: 'Not initialized' }); return; }
-    const validation = MotelyWasm.validateJaml(msg.jaml);
-    if (validation !== 'valid') { self.postMessage({ type: 'error', message: validation }); return; }
-
-    let rId, pId, cId;
-    function cleanup() {
-      MotelyWasmEvents.onResult.unsubscribeById(rId);
-      MotelyWasmEvents.onProgress.unsubscribeById(pId);
-      MotelyWasmEvents.onComplete.unsubscribeById(cId);
-      activeSearch = null;
-    }
-
-    rId = MotelyWasmEvents.onResult.subscribe(function(seed, score) {
-      self.postMessage({ type: 'result', seed, score });
-    });
-    pId = MotelyWasmEvents.onProgress.subscribe(function(searched, matching) {
-      self.postMessage({ type: 'progress', searched: searched.toString(), matching: matching.toString() });
-    });
-    cId = MotelyWasmEvents.onComplete.subscribe(function(status, searched, matched) {
-      cleanup();
-      self.postMessage({ type: 'complete', status, searched: searched.toString(), matched: matched.toString() });
-    });
-
-    try {
-      activeSearch = MotelyWasm.startRandomSearch(msg.jaml, msg.count);
-    } catch (err) {
-      cleanup();
-      self.postMessage({ type: 'error', message: String(err) });
-    }
-    return;
-  }
-
-  if (msg.type === 'stop') {
-    if (activeSearch) { activeSearch.cancel(); activeSearch = null; }
-    self.postMessage({ type: 'cancelled' });
-  }
-});
+export const SEARCH_WORKER_CODE = `
+let MotelyWasm = null;
+let MotelyWasmEvents = null;
+let activeSearch = null;
+
+self.addEventListener('message', async function(e) {
+  const msg = e.data;
+
+  if (msg.type === 'init') {
+    try {
+      const mod = await import(msg.url);
+      await mod.default.boot();
+      MotelyWasm = mod.MotelyWasm;
+      MotelyWasmEvents = mod.MotelyWasmEvents;
+      self.postMessage({ type: 'ready' });
+    } catch (err) {
+      self.postMessage({ type: 'error', message: String(err) });
+    }
+    return;
+  }
+
+  if (msg.type === 'start') {
+    if (!MotelyWasm) { self.postMessage({ type: 'error', message: 'Not initialized' }); return; }
+    const validation = MotelyWasm.validateJaml(msg.jaml);
+    if (validation !== 'valid') { self.postMessage({ type: 'error', message: validation }); return; }
+
+    let rId, pId, cId;
+    function cleanup() {
+      MotelyWasmEvents.onResult.unsubscribeById(rId);
+      MotelyWasmEvents.onProgress.unsubscribeById(pId);
+      MotelyWasmEvents.onComplete.unsubscribeById(cId);
+      activeSearch = null;
+    }
+
+    rId = MotelyWasmEvents.onResult.subscribe(function(seed, score) {
+      self.postMessage({ type: 'result', seed, score });
+    });
+    pId = MotelyWasmEvents.onProgress.subscribe(function(searched, matching) {
+      self.postMessage({ type: 'progress', searched: searched.toString(), matching: matching.toString() });
+    });
+    cId = MotelyWasmEvents.onComplete.subscribe(function(status, searched, matched) {
+      cleanup();
+      self.postMessage({ type: 'complete', status, searched: searched.toString(), matched: matched.toString() });
+    });
+
+    try {
+      activeSearch = MotelyWasm.startRandomSearch(msg.jaml, msg.count);
+    } catch (err) {
+      cleanup();
+      self.postMessage({ type: 'error', message: String(err) });
+    }
+    return;
+  }
+
+  if (msg.type === 'stop') {
+    if (activeSearch) { activeSearch.cancel(); activeSearch = null; }
+    self.postMessage({ type: 'cancelled' });
+  }
+});
 `;

package/dist/index.d.ts

@@ -6,7 +6,18 @@ export { AnalyzerExplorer, type AnalyzerAnteView, type AnalyzerBadge, type Analy
 export { JamlMapPreview, type JamlMapPreviewProps } from "./components/JamlMapPreview.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 { JamlCodeEditor, type JamlCodeEditorProps, } from "./components/JamlCodeEditor.js";
+export { JimboText, type JimboTextProps, type JimboTextTone, type JimboTextSize, } from "./ui/jimboText.js";
+export { JimboTabs, JimboVerticalTabs, type JimboTabItem, type JimboTabsProps, } from "./ui/jimboTabs.js";
+export { JimboFlankNav, type JimboFlankNavProps, } from "./ui/jimboFlankNav.js";
+export { JimboFilterBar, type JimboFilterBarProps, type JimboFilterSortOption, } from "./ui/jimboFilterBar.js";
+export { JimboBackground } from "./ui/jimboBackground.js";
+export { JimboTooltip, type JimboTooltipProps, type JimboTooltipMode, type JimboTooltipPlacement, } from "./ui/jimboTooltip.js";
 export { JamlIdeToolbar, type JamlIdeMode, type JamlIdeToolbarProps, } from "./components/JamlIdeToolbar.js";
 export { CardList, type CardListProps } from "./components/CardList.js";
+export { CardFan, type CardFanProps } from "./components/CardFan.js";
+export { DeckSprite, DECK_SPRITE_POS, STAKE_SPRITE_POS, type DeckSpriteProps, } from "./components/DeckSprite.js";
+export { MotelyVersionBadge, type MotelyVersionBadgeProps, type MotelyCapabilities, } from "./components/MotelyVersionBadge.js";
 export { extractVisualJamlItems, type JamlPreviewGroups, type JamlPreviewItem, type JamlPreviewSection, type JamlPreviewVisualType, } from "./utils/jamlMapPreview.js";
 export { useMotelyStream, type StreamItem, type StreamState } from "./hooks/useShopStream.js";
+export { useSearch, type SearchResult, type SearchStatus, type UseSearchState, } from "./hooks/useSearch.js";

package/dist/index.js

@@ -7,7 +7,18 @@ 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 { JamlCodeEditor, } from "./components/JamlCodeEditor.js";
+export { JimboText, } from "./ui/jimboText.js";
+export { JimboTabs, JimboVerticalTabs, } from "./ui/jimboTabs.js";
+export { JimboFlankNav, } from "./ui/jimboFlankNav.js";
+export { JimboFilterBar, } from "./ui/jimboFilterBar.js";
+export { JimboBackground } from "./ui/jimboBackground.js";
+export { JimboTooltip, } from "./ui/jimboTooltip.js";
 export { JamlIdeToolbar, } from "./components/JamlIdeToolbar.js";
 export { CardList } from "./components/CardList.js";
+export { CardFan } from "./components/CardFan.js";
+export { DeckSprite, DECK_SPRITE_POS, STAKE_SPRITE_POS, } from "./components/DeckSprite.js";
+export { MotelyVersionBadge, } from "./components/MotelyVersionBadge.js";
 export { extractVisualJamlItems, } from "./utils/jamlMapPreview.js";
 export { useMotelyStream } from "./hooks/useShopStream.js";
+export { useSearch, } from "./hooks/useSearch.js";

package/dist/ui/footer.js

@@ -9,10 +9,10 @@ const SUITS = [
 ];
 const CYCLE = '5s';
 export function JimboBalatroFooter({ hidden = false, className = '' }) {
-    return (_jsxs("div", { className: ['fixed right-0 bottom-0 left-0 w-screen min-w-full transition-opacity duration-200', hidden ? 'pointer-events-none opacity-0' : 'opacity-100', className].filter(Boolean).join(' '), children: [_jsx("div", { style: { width: '100%', borderTop: '1px solid rgba(255,255,255,0.1)', background: 'rgba(0,0,0,0.9)', padding: '0 1rem 3px', textAlign: 'center' }, children: _jsxs("p", { style: { fontFamily: 'm6x11plus, monospace', fontSize: 'clamp(11px, 0.8vw + 8px, 14px)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '0 0.5rem', color: 'white', margin: 0 }, children: [_jsx("span", { children: "Not affiliated with LocalThunk or PlayStack" }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }, children: ["Made with", ' ', _jsx("span", { style: { position: 'relative', display: 'inline-block', width: '1.5em', height: '1em', verticalAlign: 'middle' }, children: SUITS.map(({ char, kf }) => (_jsx("span", { style: { position: 'absolute', inset: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: 0, animationName: kf, animationDuration: CYCLE, animationDelay: '0s', animationIterationCount: 'infinite', animationTimingFunction: 'ease-out' }, children: char }, char))) }), ' ', "for the", ' ', _jsx("a", { href: "https://playbalatro.com", target: "_blank", rel: "noopener noreferrer", style: { color: JimboColorOption.GOLD, textDecoration: 'none' }, children: "Balatro" }), ' ', "community"] })] }) }), _jsx("style", { children: `
-        @keyframes jaml-heart   { 0%{opacity:0;transform:scale(1)} 1%{opacity:1;transform:scale(1.45)} 3.5%{opacity:1;transform:scale(1)} 61.5%{opacity:1;transform:scale(1)} 62%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-spade   { 0%,61.5%{opacity:0} 62%{opacity:1;transform:scale(1.45)} 64.5%{opacity:1;transform:scale(1)} 71.5%{opacity:1} 72%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-diamond { 0%,71.5%{opacity:0} 72%{opacity:1;transform:scale(1.45)} 74.5%{opacity:1;transform:scale(1)} 81.5%{opacity:1} 82%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-club    { 0%,81.5%{opacity:0} 82%{opacity:1;transform:scale(1.45)} 84.5%{opacity:1;transform:scale(1)} 95%{opacity:1}  96%{opacity:0} 100%{opacity:0} }
+    return (_jsxs("div", { className: ['fixed right-0 bottom-0 left-0 w-screen min-w-full transition-opacity duration-200', hidden ? 'pointer-events-none opacity-0' : 'opacity-100', className].filter(Boolean).join(' '), children: [_jsx("div", { style: { width: '100%', borderTop: '1px solid rgba(255,255,255,0.1)', background: 'rgba(0,0,0,0.9)', padding: '0 1rem 3px', textAlign: 'center' }, children: _jsxs("p", { style: { fontFamily: 'm6x11plus, monospace', fontSize: 'clamp(11px, 0.8vw + 8px, 14px)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '0 0.5rem', color: 'white', margin: 0 }, children: [_jsx("span", { children: "Not affiliated with LocalThunk or PlayStack" }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }, children: ["Made with", ' ', _jsx("span", { style: { position: 'relative', display: 'inline-block', width: '1.5em', height: '1em', verticalAlign: 'middle' }, children: SUITS.map(({ char, kf }) => (_jsx("span", { style: { position: 'absolute', inset: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: 0, animationName: kf, animationDuration: CYCLE, animationDelay: '0s', animationIterationCount: 'infinite', animationTimingFunction: 'ease-out' }, children: char }, char))) }), ' ', "for the", ' ', _jsx("a", { href: "https://playbalatro.com", target: "_blank", rel: "noopener noreferrer", style: { color: JimboColorOption.GOLD, textDecoration: 'none' }, children: "Balatro" }), ' ', "community"] })] }) }), _jsx("style", { children: `
+        @keyframes jaml-heart   { 0%{opacity:0;transform:scale(1)} 1%{opacity:1;transform:scale(1.45)} 3.5%{opacity:1;transform:scale(1)} 61.5%{opacity:1;transform:scale(1)} 62%{opacity:0} 100%{opacity:0} }
+        @keyframes jaml-spade   { 0%,61.5%{opacity:0} 62%{opacity:1;transform:scale(1.45)} 64.5%{opacity:1;transform:scale(1)} 71.5%{opacity:1} 72%{opacity:0} 100%{opacity:0} }
+        @keyframes jaml-diamond { 0%,71.5%{opacity:0} 72%{opacity:1;transform:scale(1.45)} 74.5%{opacity:1;transform:scale(1)} 81.5%{opacity:1} 82%{opacity:0} 100%{opacity:0} }
+        @keyframes jaml-club    { 0%,81.5%{opacity:0} 82%{opacity:1;transform:scale(1.45)} 84.5%{opacity:1;transform:scale(1)} 95%{opacity:1}  96%{opacity:0} 100%{opacity:0} }
       ` })] }));
 }

package/dist/ui/jimboBackground.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Fullscreen WebGL CRT/spin background — the authentic Balatro hypnotic
+ * swirl, pixelated and animated. Ported from weejoker.app's
+ * BackgroundShader.tsx; no config required.
+ *
+ * Renders a fixed-position canvas at z-index: -10 that fills the viewport
+ * and ignores pointer events. Drop it once at the root of your page:
+ *
+ *     <JimboBackground />
+ *     <YourAppContent />
+ *
+ * Resizes automatically. Disposes the animation frame + shader on unmount.
+ */
+export declare function JimboBackground(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboBackground.js

@@ -0,0 +1,155 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+/**
+ * Fullscreen WebGL CRT/spin background — the authentic Balatro hypnotic
+ * swirl, pixelated and animated. Ported from weejoker.app's
+ * BackgroundShader.tsx; no config required.
+ *
+ * Renders a fixed-position canvas at z-index: -10 that fills the viewport
+ * and ignores pointer events. Drop it once at the root of your page:
+ *
+ *     <JimboBackground />
+ *     <YourAppContent />
+ *
+ * Resizes automatically. Disposes the animation frame + shader on unmount.
+ */
+export function JimboBackground() {
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const gl = canvas.getContext('webgl');
+        if (!gl)
+            return;
+        const vsSource = `
+      attribute vec2 position;
+      void main() {
+        gl_Position = vec4(position, 0.0, 1.0);
+      }
+    `;
+        const fsSource = `
+      precision mediump float;
+
+      uniform float u_time;
+      uniform vec2 u_resolution;
+
+      const float SPIN_ROTATION = -2.0;
+      const float SPIN_SPEED = 4.5;
+      const vec4 COLOUR_1 = vec4(1.0, 0.2, 0.2, 1.0);
+      const vec4 COLOUR_2 = vec4(0.0, 0.5, 1.0, 1.0);
+      const vec4 COLOUR_3 = vec4(0.05, 0.08, 0.1, 1.0);
+      const float CONTRAST = 4.5;
+      const float LIGTHING = 0.5;
+      const float SPIN_AMOUNT = 0.35;
+      const float PIXEL_FILTER = 1024.0;
+      const float PI = 3.14159265359;
+
+      void main() {
+        vec2 screenSize = u_resolution;
+        float pixel_size = length(screenSize.xy) / PIXEL_FILTER;
+        vec2 uv = (floor(gl_FragCoord.xy*(1.0/pixel_size))*pixel_size - 0.5*screenSize.xy)/length(screenSize.xy);
+        float uv_len = length(uv);
+
+        float speed = (SPIN_ROTATION * 0.2) + 302.2;
+        float new_pixel_angle = atan(uv.y, uv.x) + speed - 20.0*(1.0*SPIN_AMOUNT*uv_len + (1.0 - 1.0*SPIN_AMOUNT));
+
+        vec2 mid = (screenSize.xy/length(screenSize.xy))/2.0;
+        uv = (vec2((uv_len * cos(new_pixel_angle) + mid.x), (uv_len * sin(new_pixel_angle) + mid.y)) - mid);
+
+        uv *= 30.0;
+        speed = u_time * SPIN_SPEED;
+        vec2 uv2 = vec2(uv.x, uv.y);
+
+        for(int i=0; i < 5; i++) {
+          uv2 += sin(max(uv.x, uv.y)) + uv;
+          uv  += 0.5*vec2(cos(5.1123314 + 0.353*uv2.y + speed*0.131121), sin(uv2.x - 0.113*speed));
+          uv  -= 1.0*cos(uv.x + uv.y) - 1.0*sin(uv.x*0.711 - uv.y);
+        }
+
+        float contrast_mod = (0.25*CONTRAST + 0.5*SPIN_AMOUNT + 1.2);
+        float paint_res = min(2.0, max(0.0, length(uv)*(0.035)*contrast_mod));
+        float c1p = max(0.0, 1.0 - contrast_mod*abs(1.0 - paint_res));
+        float c2p = max(0.0, 1.0 - contrast_mod*abs(paint_res));
+        float c3p = 1.0 - min(1.0, c1p + c2p);
+        float light = (LIGTHING - 0.2)*max(c1p*5.0 - 4.0, 0.0) + LIGTHING*max(c2p*5.0 - 4.0, 0.0);
+
+        vec4 finalCol = (0.3/CONTRAST)*COLOUR_1 + (1.0 - 0.3/CONTRAST)*(COLOUR_1*c1p + COLOUR_2*c2p + vec4(c3p*COLOUR_3.rgb, c3p*COLOUR_1.a)) + light;
+
+        gl_FragColor = finalCol;
+      }
+    `;
+        const createShader = (type, source) => {
+            const shader = gl.createShader(type);
+            if (!shader)
+                return null;
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                console.error('[JimboBackground] shader compile error:', gl.getShaderInfoLog(shader));
+                gl.deleteShader(shader);
+                return null;
+            }
+            return shader;
+        };
+        const vertexShader = createShader(gl.VERTEX_SHADER, vsSource);
+        const fragmentShader = createShader(gl.FRAGMENT_SHADER, fsSource);
+        if (!vertexShader || !fragmentShader)
+            return;
+        const program = gl.createProgram();
+        if (!program)
+            return;
+        gl.attachShader(program, vertexShader);
+        gl.attachShader(program, fragmentShader);
+        gl.linkProgram(program);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            console.error('[JimboBackground] program link error:', gl.getProgramInfoLog(program));
+            return;
+        }
+        gl.useProgram(program);
+        const positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+            -1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
+            -1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
+        ]), gl.STATIC_DRAW);
+        const positionLocation = gl.getAttribLocation(program, 'position');
+        gl.enableVertexAttribArray(positionLocation);
+        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+        const timeLocation = gl.getUniformLocation(program, 'u_time');
+        const resolutionLocation = gl.getUniformLocation(program, 'u_resolution');
+        const startTime = Date.now();
+        let animationFrameId;
+        const render = () => {
+            const displayWidth = canvas.clientWidth;
+            const displayHeight = canvas.clientHeight;
+            if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
+                canvas.width = displayWidth;
+                canvas.height = displayHeight;
+                gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+            }
+            const currentTime = (Date.now() - startTime) / 1000.0;
+            gl.uniform1f(timeLocation, currentTime);
+            gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            animationFrameId = requestAnimationFrame(render);
+        };
+        render();
+        return () => {
+            cancelAnimationFrame(animationFrameId);
+            gl.deleteProgram(program);
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(fragmentShader);
+            gl.deleteBuffer(positionBuffer);
+        };
+    }, []);
+    return (_jsx("canvas", { ref: canvasRef, "aria-hidden": true, style: {
+            position: 'fixed',
+            inset: 0,
+            width: '100%',
+            height: '100%',
+            zIndex: -10,
+            pointerEvents: 'none',
+        } }));
+}

package/dist/ui/jimboFilterBar.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface JimboFilterSortOption {
+    value: string;
+    label: string;
+}
+export interface JimboFilterBarProps {
+    search?: string;
+    onSearchChange?: (query: string) => void;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    sort?: string;
+    onSortChange?: (value: string) => void;
+    sortLabel?: string;
+    sortOptions?: JimboFilterSortOption[];
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Generic Balatro-styled filter row: search input with floating pill label
+ * + optional sort dropdown with floating pill label. Adapted from
+ * weejoker's FilterBar — no hardcoded sort options, no lucide dep.
+ *
+ * Pass `sortOptions` to show the sort side; omit to show search only.
+ */
+export declare function JimboFilterBar({ search, onSearchChange, searchPlaceholder, searchLabel, sort, onSortChange, sortLabel, sortOptions, className, style, }: JimboFilterBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboFilterBar.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JimboColorOption } from './tokens.js';
+import { JimboText } from './jimboText.js';
+/**
+ * Generic Balatro-styled filter row: search input with floating pill label
+ * + optional sort dropdown with floating pill label. Adapted from
+ * weejoker's FilterBar — no hardcoded sort options, no lucide dep.
+ *
+ * Pass `sortOptions` to show the sort side; omit to show search only.
+ */
+export function JimboFilterBar({ search, onSearchChange, searchPlaceholder = 'SEARCH...', searchLabel = 'Search', sort, onSortChange, sortLabel = 'Sort By', sortOptions, className = '', style, }) {
+    return (_jsxs("div", { className: className, style: {
+            display: 'flex',
+            gap: 24,
+            padding: 16,
+            backgroundColor: JimboColorOption.DARK_GREY,
+            border: `4px solid ${JimboColorOption.BORDER_SILVER}`,
+            boxShadow: `0 3px 0 0 ${JimboColorOption.BORDER_SOUTH}`,
+            borderRadius: 12,
+            position: 'relative',
+            flexWrap: 'wrap',
+            ...style,
+        }, children: [onSearchChange ? (_jsx(FloatingLabelField, { label: searchLabel, children: _jsxs("div", { style: { position: 'relative' }, children: [_jsx("div", { style: { position: 'absolute', left: 0, top: 0, bottom: 0, width: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none', color: JimboColorOption.BLUE, zIndex: 1 }, children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "text", value: search ?? '', onChange: (e) => onSearchChange(e.target.value), placeholder: searchPlaceholder, style: {
+                                width: '100%',
+                                paddingLeft: 48,
+                                paddingRight: 16,
+                                paddingTop: 14,
+                                paddingBottom: 14,
+                                backgroundColor: JimboColorOption.DARKEST,
+                                border: 'none',
+                                borderBottom: `4px solid ${JimboColorOption.PANEL_EDGE}`,
+                                borderRadius: 8,
+                                color: JimboColorOption.WHITE,
+                                fontFamily: "'m6x11plus', 'Courier New', monospace",
+                                fontSize: 20,
+                                letterSpacing: 2,
+                                textTransform: 'uppercase',
+                                outline: 'none',
+                            } })] }) })) : null, sortOptions && onSortChange ? (_jsx(FloatingLabelField, { label: sortLabel, children: _jsxs("div", { style: { position: 'relative' }, children: [_jsx("select", { value: sort ?? sortOptions[0]?.value, onChange: (e) => onSortChange(e.target.value), style: {
+                                appearance: 'none',
+                                WebkitAppearance: 'none',
+                                MozAppearance: 'none',
+                                backgroundColor: JimboColorOption.ORANGE,
+                                color: JimboColorOption.WHITE,
+                                border: 'none',
+                                borderBottom: `4px solid ${JimboColorOption.DARK_ORANGE}`,
+                                borderRadius: 8,
+                                cursor: 'pointer',
+                                fontFamily: "'m6x11plus', 'Courier New', monospace",
+                                fontSize: 18,
+                                letterSpacing: 2,
+                                textTransform: 'uppercase',
+                                padding: '14px 48px 14px 24px',
+                                minWidth: 200,
+                                textAlign: 'center',
+                                outline: 'none',
+                            }, children: sortOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) }), _jsx("div", { style: { position: 'absolute', right: 16, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', color: JimboColorOption.WHITE, opacity: 0.85 }, children: _jsx(SortIcon, {}) })] }) })) : null] }));
+}
+function FloatingLabelField({ label, children }) {
+    return (_jsxs("div", { style: { flex: 1, minWidth: 200, position: 'relative', marginTop: 10 }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    top: -14,
+                    left: 16,
+                    backgroundColor: JimboColorOption.RED,
+                    border: `2px solid ${JimboColorOption.DARK_RED}`,
+                    borderRadius: 6,
+                    padding: '4px 12px',
+                    zIndex: 2,
+                }, children: _jsx(JimboText, { size: "xs", uppercase: true, children: label }) }), children] }));
+}
+function SearchIcon() {
+    return (_jsxs("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("circle", { cx: 11, cy: 11, r: 8 }), _jsx("line", { x1: 21, y1: 21, x2: 16.65, y2: 16.65 })] }));
+}
+function SortIcon() {
+    return (_jsxs("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("polyline", { points: "7 4 7 20" }), _jsx("polyline", { points: "3 8 7 4 11 8" }), _jsx("polyline", { points: "17 20 17 4" }), _jsx("polyline", { points: "21 16 17 20 13 16" })] }));
+}

package/dist/ui/jimboFlankNav.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface JimboFlankNavProps {
+    onPrev: () => void;
+    onNext: () => void;
+    canPrev?: boolean;
+    canNext?: boolean;
+    prevLabel?: string;
+    nextLabel?: string;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Prev/next navigation with flanking buttons around a central stage.
+ * Generic adaptation of weejoker's DayNavigation — no hardcoded "Day"
+ * labels, no lucide dep (inline chevron SVGs).
+ */
+export declare function JimboFlankNav({ onPrev, onNext, canPrev, canNext, prevLabel, nextLabel, children, className, style, }: JimboFlankNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboFlankNav.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { JimboColorOption, JIMBO_ANIMATIONS } from './tokens.js';
+/**
+ * Prev/next navigation with flanking buttons around a central stage.
+ * Generic adaptation of weejoker's DayNavigation — no hardcoded "Day"
+ * labels, no lucide dep (inline chevron SVGs).
+ */
+export function JimboFlankNav({ onPrev, onNext, canPrev = true, canNext = true, prevLabel = 'Previous', nextLabel = 'Next', children, className = '', style, }) {
+    return (_jsxs("div", { className: className, style: {
+            display: 'flex',
+            alignItems: 'stretch',
+            justifyContent: 'center',
+            gap: 8,
+            width: '100%',
+            position: 'relative',
+            ...style,
+        }, children: [_jsx(NavButton, { direction: "left", onClick: onPrev, disabled: !canPrev, "aria-label": prevLabel }), _jsx("div", { style: { position: 'relative', flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }, children: children }), _jsx(NavButton, { direction: "right", onClick: onNext, disabled: !canNext, "aria-label": nextLabel })] }));
+}
+function NavButton({ direction, onClick, disabled, 'aria-label': ariaLabel, }) {
+    const [pressed, setPressed] = React.useState(false);
+    return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, "aria-label": ariaLabel, title: ariaLabel, onMouseDown: () => !disabled && setPressed(true), onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onTouchStart: () => !disabled && setPressed(true), onTouchEnd: () => setPressed(false), style: {
+            flexShrink: 0,
+            width: 48,
+            border: 'none',
+            borderRadius: 8,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.35 : 1,
+            backgroundColor: JimboColorOption.RED,
+            color: JimboColorOption.WHITE,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: pressed ? `translateY(${JIMBO_ANIMATIONS.PRESS_TRANSLATE_Y}px)` : 'translateY(0)',
+            boxShadow: pressed ? 'none' : `0 ${JIMBO_ANIMATIONS.PRESS_TRANSLATE_Y}px 0 0 ${JimboColorOption.DARK_RED}`,
+            transition: `transform ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease, box-shadow ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease`,
+        }, children: _jsx(ChevronSvg, { direction: direction }) }));
+}
+function ChevronSvg({ direction }) {
+    const points = direction === 'left' ? '20,4 8,16 20,28' : '12,4 24,16 12,28';
+    return (_jsx("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("polyline", { points: points }) }));
+}