jaml-ui 0.9.0 → 0.10.0

package/dist/assets.js

@@ -12,7 +12,7 @@ export const JAML_ASSET_FILES = {
 };
 const assetKeyByFileName = Object.fromEntries(Object.entries(JAML_ASSET_FILES).map(([key, fileName]) => [fileName, key]));
 // Keep in lockstep with package.json version. Upload assets to this path when publishing.
-const JAML_UI_VERSION = "0.8.0";
+const JAML_UI_VERSION = "0.10.0";
 const CDN_BASE = `https://cdn.seedfinder.app/jaml-ui/${JAML_UI_VERSION}/assets/`;
 const defaultAssetUrls = {
     deck: `${CDN_BASE}${JAML_ASSET_FILES.deck}`,

package/dist/components/CardFan.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface CardFanProps {
+    /** Total number of cards to render (used when `cards` is not provided). */
+    count?: number;
+    /** Array of cards as "rank_suit" strings (e.g. ["2_C", "10_H", "A_S"]). Takes priority over `count`. */
+    cards?: string[];
+    /** Optional label below the fan. */
+    label?: string;
+    showLabel?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Parabolic card fan with rotation + arc overlap. Ported from weejoker's
+ * CardFan.tsx. Uses mathematical transforms (inline style, not Tailwind)
+ * to produce the authentic Balatro spread: cards overlap toward the
+ * center, tilt outward, sit higher at the edges.
+ *
+ * Sizing, overlap, and max rotation auto-scale with card count so full
+ * 52-card decks render cleanly and tiny 3-card hands look deliberate.
+ */
+export declare function CardFan({ count, cards, className, style, label, showLabel }: CardFanProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CardFan.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RealPlayingCard } from './PlayingCard.js';
+import { JimboColorOption } from '../ui/tokens.js';
+import { JimboText } from '../ui/jimboText.js';
+const RANK_MAP = {
+    '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9', '10': '10',
+    J: 'Jack', Q: 'Queen', K: 'King', A: 'Ace',
+};
+const SUIT_MAP = {
+    H: 'Hearts', C: 'Clubs', D: 'Diamonds', S: 'Spades',
+};
+function parseJamlCard(input) {
+    const [r, s] = input.split('_');
+    return {
+        rank: RANK_MAP[r] ?? '2',
+        suit: SUIT_MAP[s] ?? 'Clubs',
+    };
+}
+/**
+ * Parabolic card fan with rotation + arc overlap. Ported from weejoker's
+ * CardFan.tsx. Uses mathematical transforms (inline style, not Tailwind)
+ * to produce the authentic Balatro spread: cards overlap toward the
+ * center, tilt outward, sit higher at the edges.
+ *
+ * Sizing, overlap, and max rotation auto-scale with card count so full
+ * 52-card decks render cleanly and tiny 3-card hands look deliberate.
+ */
+export function CardFan({ count = 0, cards, className = '', style, label, showLabel = true }) {
+    const displayCount = cards ? cards.length : count;
+    const cardSize = displayCount > 40 ? 46
+        : displayCount > 30 ? 32
+            : displayCount > 12 ? 36
+                : displayCount > 8 ? 42
+                    : displayCount > 5 ? 48
+                        : 54;
+    const overlap = displayCount > 40 ? 0.88
+        : displayCount > 30 ? 0.85
+            : displayCount > 15 ? 0.75
+                : displayCount > 6 ? 0.60
+                    : 0.45;
+    const cardSpacing = cardSize * (1 - overlap);
+    const maxRotation = displayCount > 40 ? 40
+        : displayCount > 20 ? 30
+            : displayCount > 10 ? 15
+                : 25;
+    const cardsHeight = 120;
+    return (_jsxs("div", { className: className, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 4,
+            ...style,
+        }, children: [_jsx("div", { style: { position: 'relative', width: '100%', height: cardsHeight }, children: displayCount > 0 ? (Array.from({ length: displayCount }).map((_, i) => {
+                    const centerIndex = (displayCount - 1) / 2;
+                    const offset = i - centerIndex;
+                    const xPos = offset * cardSpacing;
+                    // Parabolic lift — outer cards sit higher than center (bowed upward)
+                    const yOffset = Math.pow(Math.abs(offset / (centerIndex || 1)), 2) * (displayCount > 20 ? 20 : 10);
+                    const rotation = (offset / (centerIndex || 1)) * maxRotation;
+                    const parsed = cards ? parseJamlCard(cards[i]) : { rank: '2', suit: 'Clubs' };
+                    return (_jsx("div", { style: {
+                            position: 'absolute',
+                            left: '50%',
+                            bottom: 0,
+                            transform: `translateX(calc(-50% + ${xPos}px)) translateY(${yOffset}px) rotate(${rotation}deg)`,
+                            transformOrigin: 'bottom center',
+                            zIndex: i,
+                        }, children: _jsx(RealPlayingCard, { rank: parsed.rank, suit: parsed.suit, size: cardSize, style: { filter: `drop-shadow(0 2px 3px ${JimboColorOption.BLACK}66)` } }) }, i));
+                })) : (_jsx("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '100%',
+                        height: '100%',
+                        background: `${JimboColorOption.WHITE}0d`,
+                        border: `1px solid ${JimboColorOption.WHITE}0d`,
+                        borderRadius: 8,
+                    }, children: _jsx(JimboText, { size: "xs", uppercase: true, tone: "grey", children: "Deck Empty" }) })) }), label && showLabel ? _jsx(JimboText, { size: "xs", uppercase: true, tone: "grey", children: label }) : null] }));
+}

package/dist/components/DeckSprite.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare const DECK_SPRITE_POS: Record<string, {
+    x: number;
+    y: number;
+}>;
+export declare const STAKE_SPRITE_POS: Record<string, {
+    x: number;
+    y: number;
+}>;
+export interface DeckSpriteProps {
+    /** Deck name — case-insensitive, "Deck" suffix tolerated (e.g. "Erratic Deck" → "erratic"). */
+    deck: string;
+    /** Optional stake name to overlay its sticker on the deck. */
+    stake?: string;
+    /** Rendered width in pixels. Height is scaled proportionally from the 142x190 sprite. */
+    size?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Balatro deck box sprite — optionally overlaid with a stake sticker.
+ * Draws from the Enhancers.png atlas (deck thumbnails live in the bottom
+ * two rows) and stickers.png for the stake band. Uses jaml-ui's
+ * `resolveJamlAssetUrl` so consumers can override the CDN base.
+ */
+export declare function DeckSprite({ deck, stake, size, className, style }: DeckSpriteProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DeckSprite.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveJamlAssetUrl } from '../assets.js';
+export const DECK_SPRITE_POS = {
+    red: { x: 0, y: 0 },
+    nebula: { x: 3, y: 0 },
+    locked: { x: 4, y: 0 },
+    blue: { x: 0, y: 2 },
+    yellow: { x: 1, y: 2 },
+    green: { x: 2, y: 2 },
+    black: { x: 3, y: 2 },
+    plasma: { x: 4, y: 2 },
+    ghost: { x: 6, y: 2 },
+    magic: { x: 0, y: 3 },
+    checkered: { x: 1, y: 3 },
+    erratic: { x: 2, y: 3 },
+    abandoned: { x: 3, y: 3 },
+    painted: { x: 4, y: 3 },
+    challenge: { x: 0, y: 4 },
+    anaglyph: { x: 2, y: 4 },
+    zodiac: { x: 3, y: 4 },
+};
+export const STAKE_SPRITE_POS = {
+    white: { x: 1, y: 0 },
+    red: { x: 2, y: 0 },
+    green: { x: 3, y: 0 },
+    blue: { x: 4, y: 0 },
+    black: { x: 0, y: 1 },
+    purple: { x: 1, y: 1 },
+    orange: { x: 2, y: 1 },
+    gold: { x: 3, y: 1 },
+};
+const SPRITE_WIDTH = 142;
+const SPRITE_HEIGHT = 190;
+const DECK_COLS = 7;
+const DECK_ROWS = 5;
+const STICKER_COLS = 5;
+const STICKER_ROWS = 3;
+/**
+ * Balatro deck box sprite — optionally overlaid with a stake sticker.
+ * Draws from the Enhancers.png atlas (deck thumbnails live in the bottom
+ * two rows) and stickers.png for the stake band. Uses jaml-ui's
+ * `resolveJamlAssetUrl` so consumers can override the CDN base.
+ */
+export function DeckSprite({ deck, stake, size = 50, className = '', style }) {
+    const deckKey = (deck || 'erratic').toLowerCase().replace(/\s*deck$/, '').trim();
+    const deckPos = DECK_SPRITE_POS[deckKey] ?? DECK_SPRITE_POS.erratic;
+    const stakePos = stake ? STAKE_SPRITE_POS[stake.toLowerCase().replace(/\s*stake$/, '').trim()] : null;
+    const scale = size / SPRITE_WIDTH;
+    const displayHeight = SPRITE_HEIGHT * scale;
+    return (_jsxs("div", { className: className, style: {
+            position: 'relative',
+            width: size,
+            height: displayHeight,
+            ...style,
+        }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    backgroundImage: `url(${resolveJamlAssetUrl('enhancers')})`,
+                    backgroundSize: `${DECK_COLS * 100}% ${DECK_ROWS * 100}%`,
+                    backgroundPosition: `${(deckPos.x / (DECK_COLS - 1)) * 100}% ${(deckPos.y / (DECK_ROWS - 1)) * 100}%`,
+                    backgroundRepeat: 'no-repeat',
+                    imageRendering: 'pixelated',
+                } }), stakePos ? (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    backgroundImage: `url(${resolveJamlAssetUrl('stickers')})`,
+                    backgroundSize: `${STICKER_COLS * 100}% ${STICKER_ROWS * 100}%`,
+                    backgroundPosition: `${(stakePos.x / (STICKER_COLS - 1)) * 100}% ${(stakePos.y / (STICKER_ROWS - 1)) * 100}%`,
+                    backgroundRepeat: 'no-repeat',
+                    imageRendering: 'pixelated',
+                } })) : null] }));
+}

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/index.d.ts

@@ -7,7 +7,17 @@ export { JamlMapPreview, type JamlMapPreviewProps } from "./components/JamlMapPr
 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

@@ -8,7 +8,17 @@ 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/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 }) }));
+}