jaml-ui 0.14.4 → 0.17.0

package/dist/sprites/spriteMapper.d.ts

@@ -2,10 +2,87 @@ export interface SpritePos {
     x: number;
     y: number;
 }
-export type SpriteSheetType = "Jokers" | "Tarots" | "Vouchers" | "Boosters" | "Enhancers" | "Editions" | "BlindChips" | "tags";
+export type SpriteSheetType = "Jokers" | "Tarots" | "Vouchers" | "Boosters" | "Enhancers" | "Editions" | "BlindChips" | "tags" | "Stakes" | "Decks";
+import type { JamlAssetKey } from '../assets.js';
+export declare const SHEET_META: Record<SpriteSheetType, {
+    cols: number;
+    rows: number;
+    assetKey: JamlAssetKey;
+}>;
 export interface SpriteData {
     pos: SpritePos;
     type: SpriteSheetType;
 }
+/**
+ * Per-sheet mystery/back card positions for unknown items.
+ * Used as fallback when an item name can't be resolved.
+ */
+export declare const MYSTERY_SPRITES: Partial<Record<SpriteSheetType, SpritePos>>;
+/** Get the mystery/fallback sprite for a given sheet type. */
+export declare function getMysterySprite(sheet: SpriteSheetType): SpriteData;
 /** Look up sprite data by name. Accepts display names ("Icy Joker"), enum keys ("IcyJoker"), and "Joker | Name" prefixed forms. */
 export declare function getSpriteData(name: string): SpriteData | null;
+/**
+ * Wildcard "Any" sprites from the Enhancers sheet.
+ * Used in the JAML visual editor when a clause value is "Any" (e.g. `legendaryJoker: Any`).
+ */
+export declare const WILDCARD_SPRITES: {
+    /** Grey silhouette — Enhancers row 3 col 5. For generic "Any" items. */
+    readonly anySilhouette: {
+        readonly pos: {
+            readonly x: 5;
+            readonly y: 3;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** Grey ? circle — Enhancers row 3 col 6. For "boss: Any" etc. */
+    readonly anyMystery: {
+        readonly pos: {
+            readonly x: 6;
+            readonly y: 3;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** Red X debuff — Editions row 0 col 4. For mustNot zone indicator. */
+    readonly mustNotDebuff: {
+        readonly pos: {
+            readonly x: 4;
+            readonly y: 0;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** The Soul card — Tarots row 2 col 2. Base for "legendaryJoker: Any" (they spawn from Soul). */
+    readonly anyLegendary: {
+        readonly pos: {
+            readonly x: 2;
+            readonly y: 2;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** Blank spectral back — Tarots row 2 col 5. For "spectralCard: Any". */
+    readonly anySpectral: {
+        readonly pos: {
+            readonly x: 5;
+            readonly y: 2;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** Blank tarot back — Tarots row 2 col 6. For "tarotCard: Any". */
+    readonly anyTarot: {
+        readonly pos: {
+            readonly x: 6;
+            readonly y: 2;
+        };
+        readonly type: SpriteSheetType;
+    };
+    /** Blank planet back — Tarots row 2 col 7. For "planetCard: Any". */
+    readonly anyPlanet: {
+        readonly pos: {
+            readonly x: 7;
+            readonly y: 2;
+        };
+        readonly type: SpriteSheetType;
+    };
+};
+/** Look up sprite data by name, falling back to the mystery card for the given sheet if not found. */
+export declare function getSpriteDataOrMystery(name: string, fallbackSheet?: SpriteSheetType): SpriteData;

package/dist/sprites/spriteMapper.js

@@ -1,4 +1,16 @@
 import { JOKERS, JOKER_FACES, TAROTS_AND_PLANETS, CONSUMABLE_FACES, VOUCHERS, BOSSES, TAGS, BOOSTER_PACKS, } from "./spriteData.js";
+export 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' },
+    Stakes: { cols: 5, rows: 2, assetKey: 'stakes' },
+    Decks: { cols: 13, rows: 4, assetKey: 'deck' },
+};
 const normalize = (name) => name.toLowerCase().replace(/\s+/g, "");
 const stripPrefix = (name) => name.replace(/^(Joker|Tarot|Planet|Voucher|Pack|Edition|Tag) [|:] /i, "").trim();
 const ITEM_MAP = new Map();
@@ -17,7 +29,47 @@ registerAll(VOUCHERS, "Vouchers");
 registerAll(BOSSES, "BlindChips");
 registerAll(TAGS, "tags");
 registerAll(BOOSTER_PACKS ?? [], "Boosters");
+/**
+ * Per-sheet mystery/back card positions for unknown items.
+ * Used as fallback when an item name can't be resolved.
+ */
+export const MYSTERY_SPRITES = {
+    Jokers: { x: 9, y: 9 }, // grey card back (legendary face row)
+    Tarots: { x: 4, y: 2 }, // blank consumable
+    Vouchers: { x: 8, y: 2 }, // mystery voucher
+    Boosters: { x: 0, y: 5 }, // grey empty pack
+    tags: { x: 3, y: 4 }, // grey ? tag
+    BlindChips: { x: 0, y: 30 }, // grey ? blind
+};
+/** Get the mystery/fallback sprite for a given sheet type. */
+export function getMysterySprite(sheet) {
+    return { pos: MYSTERY_SPRITES[sheet] ?? { x: 0, y: 0 }, type: sheet };
+}
 /** Look up sprite data by name. Accepts display names ("Icy Joker"), enum keys ("IcyJoker"), and "Joker | Name" prefixed forms. */
 export function getSpriteData(name) {
     return ITEM_MAP.get(normalize(stripPrefix(name))) ?? ITEM_MAP.get(normalize(name)) ?? null;
 }
+/**
+ * Wildcard "Any" sprites from the Enhancers sheet.
+ * Used in the JAML visual editor when a clause value is "Any" (e.g. `legendaryJoker: Any`).
+ */
+export const WILDCARD_SPRITES = {
+    /** Grey silhouette — Enhancers row 3 col 5. For generic "Any" items. */
+    anySilhouette: { pos: { x: 5, y: 3 }, type: "Enhancers" },
+    /** Grey ? circle — Enhancers row 3 col 6. For "boss: Any" etc. */
+    anyMystery: { pos: { x: 6, y: 3 }, type: "Enhancers" },
+    /** Red X debuff — Editions row 0 col 4. For mustNot zone indicator. */
+    mustNotDebuff: { pos: { x: 4, y: 0 }, type: "Editions" },
+    /** The Soul card — Tarots row 2 col 2. Base for "legendaryJoker: Any" (they spawn from Soul). */
+    anyLegendary: { pos: { x: 2, y: 2 }, type: "Tarots" },
+    /** Blank spectral back — Tarots row 2 col 5. For "spectralCard: Any". */
+    anySpectral: { pos: { x: 5, y: 2 }, type: "Tarots" },
+    /** Blank tarot back — Tarots row 2 col 6. For "tarotCard: Any". */
+    anyTarot: { pos: { x: 6, y: 2 }, type: "Tarots" },
+    /** Blank planet back — Tarots row 2 col 7. For "planetCard: Any". */
+    anyPlanet: { pos: { x: 7, y: 2 }, type: "Tarots" },
+};
+/** Look up sprite data by name, falling back to the mystery card for the given sheet if not found. */
+export function getSpriteDataOrMystery(name, fallbackSheet = "Jokers") {
+    return getSpriteData(name) ?? getMysterySprite(fallbackSheet);
+}

package/dist/ui/JimboBadge.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type JimboBadgeTone = 'dark' | 'blue' | 'red' | 'green' | 'gold' | 'grey' | 'orange' | 'purple';
+export interface JimboBadgeProps {
+    size?: 'sm' | 'md';
+    tone?: JimboBadgeTone;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Small colored label pill. Matches Balatro's in-game tag/rarity badges.
+ * All styling via jimbo.css `.j-badge` classes.
+ */
+export declare function JimboBadge({ size, tone, className, children }: JimboBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/JimboBadge.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Small colored label pill. Matches Balatro's in-game tag/rarity badges.
+ * All styling via jimbo.css `.j-badge` classes.
+ */
+export function JimboBadge({ size = 'sm', tone = 'dark', className, children }) {
+    return (_jsx("span", { className: `j-badge j-badge--${size} j-badge--${tone} ${className ?? ''}`, children: children }));
+}

package/dist/ui/JimboFloating.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface JimboFloatingProps {
+    anchor?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+    offset?: number;
+    zIndex?: number;
+    children: React.ReactNode;
+}
+export declare function JimboFloating({ anchor, offset, zIndex, children }: JimboFloatingProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/JimboFloating.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function JimboFloating({ anchor = 'top-right', offset = 12, zIndex = 20, children }) {
+    const pos = { position: 'absolute', zIndex };
+    if (anchor.includes('top'))
+        pos.top = offset;
+    if (anchor.includes('bottom'))
+        pos.bottom = offset;
+    if (anchor.includes('left'))
+        pos.left = offset;
+    if (anchor.includes('right'))
+        pos.right = offset;
+    if (anchor.includes('center')) {
+        pos.left = '50%';
+        pos.transform = 'translateX(-50%)';
+    }
+    return (_jsx("div", { style: pos, children: children }));
+}

package/dist/ui/JimboToggleList.d.ts

@@ -0,0 +1,11 @@
+export interface ToggleItem {
+    id: string;
+    label: string;
+    on: boolean;
+}
+export interface JimboToggleListProps {
+    items: ToggleItem[];
+    onToggle: (id: string) => void;
+    title?: string;
+}
+export declare function JimboToggleList({ items, onToggle, title }: JimboToggleListProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/JimboToggleList.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JimboPanel } from './panel.js';
+export function JimboToggleList({ items, onToggle, title }) {
+    return (_jsx(JimboPanel, { children: _jsxs("div", { className: "j-toggle-list", children: [title && _jsx("div", { className: "j-toggle-list__title", children: title }), items.map(item => (_jsxs("button", { type: "button", className: "j-toggle-item", onClick: () => onToggle(item.id), children: [_jsx("div", { className: "j-toggle-check", "data-on": item.on }), item.label] }, item.id)))] }) }));
+}

package/dist/ui/codeBlock.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { JimboColorOption } from './tokens.js';
 export function JimboCodeBlock({ code, language, filename, className = '' }) {
     const [copied, setCopied] = useState(false);
     const copy = () => {
@@ -9,7 +8,7 @@ export function JimboCodeBlock({ code, language, filename, className = '' }) {
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     };
-    return (_jsxs("div", { className: 'rounded-xl overflow-hidden flex flex-col border-2 ' + className, style: { backgroundColor: JimboColorOption.DARKEST, borderColor: JimboColorOption.PANEL_EDGE, boxShadow: '0 3px 0 0 rgba(0,0,0,0.5)' }, children: [_jsxs("div", { style: { padding: '0.5rem 1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px solid ${JimboColorOption.INNER_BORDER}` }, children: [_jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [filename && _jsx("span", { style: { fontSize: 10, opacity: 0.6 }, children: filename }), language && _jsx("span", { style: { fontSize: 9, padding: '1px 6px', borderRadius: 3, background: 'rgba(0,0,0,0.4)', color: '#60a5fa' }, children: language })] }), _jsx("button", { onClick: copy, title: "Copy", style: { padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: copied ? '#4ade80' : 'rgba(255,255,255,0.5)', display: 'flex' }, children: copied
+    return (_jsxs("div", { className: `j-code-block ${className}`, children: [_jsxs("div", { className: "j-code-block__header", children: [_jsxs("div", { className: "j-code-block__meta", children: [filename && _jsx("span", { className: "j-code-block__filename", children: filename }), language && _jsx("span", { className: "j-code-block__lang", children: language })] }), _jsx("button", { onClick: copy, title: "Copy", className: "j-code-block__copy", "data-copied": copied, children: copied
                             ? _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })
-                            : _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }) })] }), _jsx("pre", { style: { padding: '1rem', overflowX: 'auto', fontFamily: 'monospace', fontSize: '0.875rem', lineHeight: 1.6, color: '#f6f0d5', margin: 0 }, children: _jsx("code", { children: code }) })] }));
+                            : _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }) })] }), _jsx("pre", { className: "j-code-block__pre", children: _jsx("code", { children: code }) })] }));
 }

package/dist/ui/footer.d.ts

@@ -2,4 +2,8 @@ export interface JimboBalatroFooterProps {
     hidden?: boolean;
     className?: string;
 }
+/**
+ * Attribution footer with animated suit cycle.
+ * All styling via jimbo.css `.j-footer` classes — zero inline styles.
+ */
 export declare function JimboBalatroFooter({ hidden, className }: JimboBalatroFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/footer.js

@@ -1,15 +1,17 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboColorOption } from './tokens.js';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const SUITS = [
     { char: '♥️', kf: 'jaml-heart' },
     { char: '♠️', kf: 'jaml-spade' },
     { char: '♦️', kf: 'jaml-diamond' },
     { char: '♣️', kf: 'jaml-club' },
 ];
-const CYCLE = '5s';
+/**
+ * Attribution footer with animated suit cycle.
+ * All styling via jimbo.css `.j-footer` classes — zero inline styles.
+ */
 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: `
+    return (_jsxs("div", { className: `j-footer ${hidden ? 'j-footer--hidden' : ''} ${className}`, children: [_jsx("div", { className: "j-footer__bar", children: _jsxs("p", { className: "j-footer__text", children: [_jsxs("span", { children: ["Not affiliated with LocalThunk or PlayStack \u2022", ' '] }), _jsx("a", { href: "https://store.steampowered.com/app/2379780/Balatro/", target: "_blank", rel: "noopener noreferrer", className: "j-footer__link", children: "BUY BALATRO" }), _jsxs("span", { children: [' ', "\u2022 Created with", ' '] }), _jsxs("span", { className: "j-footer__suits", children: [_jsx("span", { className: "j-footer__suit-stage", children: SUITS.map(({ char, kf }) => (_jsx("span", { className: "j-footer__suit-char", style: { animationName: kf }, children: char }, char))) }), ' ', "for the 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} }

package/dist/ui/hooks.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import { JamlVisualClause, JamlVisualFilter, JamlZone } from '../components/JamlIdeVisual.js';
+import { Layer } from '../render/Layer.js';
+/**
+ * Sway animation for Balatro-style UI elements.
+ */
+export declare function useSway(active: boolean): React.RefObject<HTMLDivElement | null>;
+/**
+ * Handles delayed visibility for transitions (e.g. modals).
+ */
+export declare function useDelayedVisibility(open: boolean, delay: number): {
+    visible: boolean;
+    opacity: number;
+};
+/**
+ * Hook for the Balatro hypnotic swirl background.
+ * Manages WebGL context, shader compilation, and animation loop.
+ */
+export declare function useBalatroBackground(): React.RefObject<HTMLCanvasElement | null>;
+export type JimboTooltipMode = 'snap' | 'mouse';
+export type JimboTooltipPlacement = 'top' | 'bottom' | 'auto';
+/**
+ * Hook for managing JimboTooltip state and positioning.
+ */
+export declare function useJimboTooltip({ mode, placement, delay, disabled, }: {
+    mode?: JimboTooltipMode;
+    placement?: JimboTooltipPlacement;
+    delay?: number;
+    disabled?: boolean;
+}): {
+    visible: boolean;
+    pos: {
+        left: number;
+        top: number;
+        align: "top" | "bottom";
+    } | null;
+    targetRef: React.RefObject<HTMLElement | null>;
+    tooltipRef: React.RefObject<HTMLDivElement | null>;
+    show: () => void;
+    hide: () => void;
+    handleMouseMove: (e: React.MouseEvent | React.PointerEvent) => void;
+};
+/**
+ * Hook for managing the JamlCardRenderer logic.
+ */
+export declare function useJamlCardRenderer({ layers, invert, hoverTilt, }: {
+    layers: Layer[];
+    invert?: boolean;
+    hoverTilt?: boolean;
+}): {
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    containerStyle: React.CSSProperties;
+    canvasStyle: React.CSSProperties;
+    handlers: {
+        onPointerEnter: ((event: React.PointerEvent) => void) | undefined;
+        onPointerLeave: (() => void) | undefined;
+        onPointerMove: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    };
+};
+/**
+ * Tracks which 'ante' section is currently most visible in a scrollable container.
+ * Used in JamlAnalyzerFullscreen and AnalyzerExplorer.
+ */
+export declare function useAnteTracker(antes: {
+    ante: number;
+}[], options?: {
+    threshold?: number[];
+}): {
+    currentAnte: number;
+    scrollRef: React.RefObject<HTMLDivElement | null>;
+    scrollToAnte: (ante: number) => void;
+    registerAnteRef: (ante: number, el: HTMLElement | null) => void;
+};
+export interface DragState {
+    clause: JamlVisualClause;
+    fromZone: JamlZone;
+    x: number;
+    y: number;
+    offX: number;
+    offY: number;
+}
+/**
+ * Manages drag-and-drop state for the Jaml IDE visual filter editor.
+ */
+export declare function useJamlIdeDrag(filter: JamlVisualFilter, onChange: (filter: JamlVisualFilter) => void, rootRef: React.RefObject<HTMLDivElement | null>): {
+    drag: DragState | null;
+    hoverZone: string | null;
+    onDragStart: (e: React.MouseEvent | React.TouchEvent, clause: JamlVisualClause, fromZone: JamlZone) => void;
+};