jaml-ui 0.1.0

package/dist/components/PlayingCard.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveJamlAssetUrl } from '../assets.js';
+function cn(...classes) { return classes.filter(Boolean).join(" "); }
+const CARD_WIDTH = 71;
+const CARD_HEIGHT = 95;
+// 8BitDeck.png is 13 columns (A,2,3,4,5,6,7,8,9,10,J,Q,K) x 4 rows (Spades, Hearts, Clubs, Diamonds)
+const RANK_TO_COL = {
+    'Ace': 0, 'A': 0,
+    '2': 1, '3': 2, '4': 3, '5': 4, '6': 5, '7': 6, '8': 7, '9': 8,
+    '10': 9,
+    'Jack': 10, 'J': 10,
+    'Queen': 11, 'Q': 11,
+    'King': 12, 'K': 12,
+};
+const SUIT_TO_ROW = {
+    'Spades': 0, 'spades': 0,
+    'Hearts': 1, 'hearts': 1,
+    'Clubs': 2, 'clubs': 2,
+    'Diamonds': 3, 'diamonds': 3,
+};
+// Enhancers.png is 7 columns x 5 rows
+// Row 0: Base, Bonus, Mult, Wild, Glass, Steel, Stone
+// Row 1: Gold, Lucky, (seals start)
+const ENHANCEMENT_TO_POS = {
+    'bonus': { x: 1, y: 0 },
+    'mult': { x: 2, y: 0 },
+    'wild': { x: 3, y: 0 },
+    'glass': { x: 4, y: 0 },
+    'steel': { x: 5, y: 0 },
+    'stone': { x: 6, y: 0 },
+    'gold': { x: 0, y: 1 },
+    'lucky': { x: 1, y: 1 },
+};
+const SEAL_TO_POS = {
+    'gold': { x: 2, y: 1 },
+    'red': { x: 3, y: 1 },
+    'blue': { x: 4, y: 1 },
+    'purple': { x: 5, y: 1 },
+};
+const EDITION_TO_POS = {
+    'Foil': { x: 0, y: 0 },
+    'Holographic': { x: 1, y: 0 },
+    'Polychrome': { x: 2, y: 0 },
+    'Negative': { x: 3, y: 0 },
+};
+export function RealPlayingCard({ suit, rank, enhancement, seal, edition, className, size = 71, style }) {
+    const col = RANK_TO_COL[rank];
+    const row = SUIT_TO_ROW[suit];
+    if (col === undefined || row === undefined) {
+        console.warn(`Invalid card: ${rank} of ${suit}`);
+        return null;
+    }
+    const scale = size / CARD_WIDTH;
+    const finalH = size * (CARD_HEIGHT / CARD_WIDTH);
+    // Base card position
+    const bgX = -col * CARD_WIDTH;
+    const bgY = -row * CARD_HEIGHT;
+    // Enhancement background (if any)
+    const enhPos = enhancement ? ENHANCEMENT_TO_POS[enhancement] : { x: 0, y: 0 };
+    const enhBgX = -enhPos.x * CARD_WIDTH;
+    const enhBgY = -enhPos.y * CARD_HEIGHT;
+    // Seal overlay
+    const sealPos = seal ? SEAL_TO_POS[seal] : null;
+    const sealBgX = sealPos ? -sealPos.x * CARD_WIDTH : 0;
+    const sealBgY = sealPos ? -sealPos.y * CARD_HEIGHT : 0;
+    // Edition overlay
+    const editionPos = edition ? EDITION_TO_POS[edition] : null;
+    const editionBgX = editionPos ? -editionPos.x * CARD_WIDTH : 0;
+    const editionBgY = editionPos ? -editionPos.y * CARD_HEIGHT : 0;
+    const isNegative = edition === 'Negative';
+    const baseFilter = isNegative ? 'invert(0.94)' : 'none';
+    const enhancersUrl = resolveJamlAssetUrl('enhancers');
+    const deckUrl = resolveJamlAssetUrl('deck');
+    const editionsUrl = resolveJamlAssetUrl('editions');
+    return (_jsxs("div", { className: cn('relative overflow-hidden inline-block select-none', className), style: {
+            width: size,
+            height: finalH,
+            imageRendering: 'pixelated',
+            ...style
+        }, title: `${rank} of ${suit}${enhancement ? ` (${enhancement})` : ''}${seal ? ` [${seal} seal]` : ''}${edition ? ` {${edition}}` : ''}`, children: [_jsx("div", { className: "absolute inset-0", style: {
+                    backgroundImage: `url(${enhancersUrl})`,
+                    backgroundPosition: `${enhBgX}px ${enhBgY}px`,
+                    width: CARD_WIDTH,
+                    height: CARD_HEIGHT,
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'top left',
+                    backgroundRepeat: 'no-repeat',
+                } }), _jsx("div", { className: "absolute inset-0 z-[1]", style: {
+                    backgroundImage: `url(${deckUrl})`,
+                    backgroundPosition: `${bgX}px ${bgY}px`,
+                    width: CARD_WIDTH,
+                    height: CARD_HEIGHT,
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'top left',
+                    backgroundRepeat: 'no-repeat',
+                    filter: baseFilter
+                } }), edition && edition !== 'Negative' && (_jsx("div", { className: "absolute inset-0 z-[2] mix-blend-screen opacity-60", style: {
+                    backgroundImage: `url(${editionsUrl})`,
+                    backgroundPosition: `${editionBgX}px ${editionBgY}px`,
+                    width: CARD_WIDTH,
+                    height: CARD_HEIGHT,
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'top left',
+                    backgroundRepeat: 'no-repeat',
+                } })), seal && (_jsx("div", { className: "absolute inset-0 z-[3]", style: {
+                    backgroundImage: `url(${enhancersUrl})`,
+                    backgroundPosition: `${sealBgX}px ${sealBgY}px`,
+                    width: CARD_WIDTH,
+                    height: CARD_HEIGHT,
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'top left',
+                    backgroundRepeat: 'no-repeat',
+                } })), isNegative && (_jsx("div", { className: "absolute inset-0 z-[4] bg-red-500/10 pointer-events-none mix-blend-overlay" }))] }));
+}

package/dist/core.d.ts

@@ -0,0 +1,7 @@
+export { JAML_ASSET_FILES, clearJamlAssetBaseUrl, getDefaultJamlAssetUrlMap, resolveJamlAssetUrl, setJamlAssetBaseUrl, type JamlAssetFile, type JamlAssetKey, } from "./assets.js";
+export { Layer, type LayerOptions } from "./render/Layer.js";
+export { getSpriteData, type SpriteData, type SpriteSheetType } from "./sprites/spriteMapper.js";
+export { SPRITE_SHEETS, JOKERS, JOKER_FACES, TAROTS_AND_PLANETS, CONSUMABLE_FACES, VOUCHERS, BOSSES, TAGS, BOOSTER_PACKS, EDITION_MAP, STICKER_MAP, RANK_MAP, SUIT_MAP, ENHANCER_MAP, SEAL_MAP, type SpritePos, type SpriteEntry, type SpriteSheetInfo, } from "./sprites/spriteData.js";
+export { BalatroItemCategory, packedItemCategory, packedJokerRarity, packedItemIndex, isPackedItemValid, } from "./decode/packedBalatroItem.js";
+export { getItemDisplayName, getItemCategory, getSuitColor } from "./utils/itemUtils.js";
+export { getStandardCardPosition, getSealPosition, getEnhancerPosition } from "./utils/gameCardUtils.js";

package/dist/core.js

@@ -0,0 +1,7 @@
+export { JAML_ASSET_FILES, clearJamlAssetBaseUrl, getDefaultJamlAssetUrlMap, resolveJamlAssetUrl, setJamlAssetBaseUrl, } from "./assets.js";
+export { Layer } from "./render/Layer.js";
+export { getSpriteData } from "./sprites/spriteMapper.js";
+export { SPRITE_SHEETS, JOKERS, JOKER_FACES, TAROTS_AND_PLANETS, CONSUMABLE_FACES, VOUCHERS, BOSSES, TAGS, BOOSTER_PACKS, EDITION_MAP, STICKER_MAP, RANK_MAP, SUIT_MAP, ENHANCER_MAP, SEAL_MAP, } from "./sprites/spriteData.js";
+export { BalatroItemCategory, packedItemCategory, packedJokerRarity, packedItemIndex, isPackedItemValid, } from "./decode/packedBalatroItem.js";
+export { getItemDisplayName, getItemCategory, getSuitColor } from "./utils/itemUtils.js";
+export { getStandardCardPosition, getSealPosition, getEnhancerPosition } from "./utils/gameCardUtils.js";

package/dist/decode/motelyItemDecoder.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Motely item decoder.
+ *
+ * MotelyItem.Value is a packed integer. The MotelyItemType enum
+ * uses packed integers where the top nibble encodes category:
+ *   0x1000 = PlayingCard, 0x2000 = Spectral, 0x3000 = Tarot,
+ *   0x4000 = Planet, 0x5000 = Joker, 0xF000 = Invalid
+ */
+/** Get the enum key name for a MotelyItemType value. */
+export declare function motelyItemTypeName(itemType: number): string;
+/** Get the category string for a MotelyItemType value. */
+export declare function motelyItemCategory(itemType: number): string;
+/** Convert PascalCase enum key to display name. */
+export declare function motelyItemDisplayName(itemType: number): string;
+/**
+ * Decode a MotelyItemType integer to a display name for sprite lookup.
+ * Cached per value.
+ */
+export declare function decodeMotelyItemName(itemType: number): string | null;
+/** Warm the cache for a batch of item type values. */
+export declare function warmMotelyItemCache(itemTypes: readonly number[]): void;
+/** Number of unique items decoded so far. */
+export declare function motelyItemCacheSize(): number;

package/dist/decode/motelyItemDecoder.js

@@ -0,0 +1,71 @@
+/**
+ * Motely item decoder.
+ *
+ * MotelyItem.Value is a packed integer. The MotelyItemType enum
+ * uses packed integers where the top nibble encodes category:
+ *   0x1000 = PlayingCard, 0x2000 = Spectral, 0x3000 = Tarot,
+ *   0x4000 = Planet, 0x5000 = Joker, 0xF000 = Invalid
+ */
+import { Motely } from "motely-wasm";
+// ─── Category from MotelyItemType integer ────────────────────────────────────
+const CATEGORY_MASK = 0xf000;
+const CATEGORY_TO_TYPE = {
+    0x1000: "Playing Card",
+    0x2000: "Spectral",
+    0x3000: "Tarot",
+    0x4000: "Planet",
+    0x5000: "Joker",
+};
+// ─── Reverse lookup: MotelyItemType integer → string name ────────────────────
+const _itemTypeToName = new Map();
+function ensureItemTypeMap() {
+    if (_itemTypeToName.size > 0)
+        return;
+    const e = Motely.MotelyItemType;
+    for (const [key, val] of Object.entries(e)) {
+        if (typeof val === "number" && typeof key === "string" && !/^\d+$/.test(key)) {
+            _itemTypeToName.set(val, key);
+        }
+    }
+}
+/** Get the enum key name for a MotelyItemType value. */
+export function motelyItemTypeName(itemType) {
+    ensureItemTypeMap();
+    return _itemTypeToName.get(itemType) ?? "Unknown";
+}
+/** Get the category string for a MotelyItemType value. */
+export function motelyItemCategory(itemType) {
+    return CATEGORY_TO_TYPE[itemType & CATEGORY_MASK] ?? "Unknown";
+}
+/** Convert PascalCase enum key to display name. */
+export function motelyItemDisplayName(itemType) {
+    const name = motelyItemTypeName(itemType);
+    return name.replace(/([a-z])([A-Z])/g, "$1 $2");
+}
+// ─── Module-level cache ──────────────────────────────────────────────────────
+const _cache = new Map();
+/**
+ * Decode a MotelyItemType integer to a display name for sprite lookup.
+ * Cached per value.
+ */
+export function decodeMotelyItemName(itemType) {
+    if (_cache.has(itemType))
+        return _cache.get(itemType) ?? null;
+    const category = motelyItemCategory(itemType);
+    if (category === "Unknown") {
+        _cache.set(itemType, null);
+        return null;
+    }
+    const name = motelyItemDisplayName(itemType);
+    _cache.set(itemType, name);
+    return name;
+}
+/** Warm the cache for a batch of item type values. */
+export function warmMotelyItemCache(itemTypes) {
+    for (const t of itemTypes)
+        decodeMotelyItemName(t);
+}
+/** Number of unique items decoded so far. */
+export function motelyItemCacheSize() {
+    return _cache.size;
+}

package/dist/decode/packedBalatroItem.d.ts

@@ -0,0 +1,13 @@
+/** Bit-packed shop/card ids (Balatro item encoding). */
+export declare const BalatroItemCategory: {
+    readonly PlayingCard: 1;
+    readonly Spectral: 2;
+    readonly Tarot: 3;
+    readonly Planet: 4;
+    readonly Joker: 5;
+    readonly Invalid: 15;
+};
+export declare function packedItemCategory(packed: number): number;
+export declare function packedJokerRarity(packed: number): number;
+export declare function packedItemIndex(packed: number): number;
+export declare function isPackedItemValid(packed: number): boolean;

package/dist/decode/packedBalatroItem.js

@@ -0,0 +1,26 @@
+/** Bit-packed shop/card ids (Balatro item encoding). */
+export const BalatroItemCategory = {
+    PlayingCard: 1,
+    Spectral: 2,
+    Tarot: 3,
+    Planet: 4,
+    Joker: 5,
+    Invalid: 0xf,
+};
+const CATEGORY_OFFSET = 12;
+const CATEGORY_MASK = 0xf000;
+const RARITY_OFFSET = 10;
+const RARITY_MASK = 0x0c00;
+export function packedItemCategory(packed) {
+    return (packed & CATEGORY_MASK) >> CATEGORY_OFFSET;
+}
+export function packedJokerRarity(packed) {
+    return (packed & RARITY_MASK) >> RARITY_OFFSET;
+}
+export function packedItemIndex(packed) {
+    return packed & ~(CATEGORY_MASK | RARITY_MASK);
+}
+export function isPackedItemValid(packed) {
+    const category = packedItemCategory(packed);
+    return category >= BalatroItemCategory.PlayingCard && category <= BalatroItemCategory.Joker;
+}

package/dist/hooks/useShopStream.d.ts

@@ -0,0 +1,22 @@
+export interface StreamItem {
+    id: string;
+    name: string;
+    value?: number;
+}
+export interface StreamState {
+    items: StreamItem[];
+    ready: boolean;
+    loading: boolean;
+    loadingMore: boolean;
+    error: string | null;
+    pullMore: (count?: number) => void;
+}
+/**
+ * Generic stream hook for iterating any motely-wasm analyzer stream.
+ *
+ * @param initStream - called once to initialize the stream (e.g. analyzer.initShop(ante))
+ * @param nextItem - called to get the next item from the stream (e.g. analyzer.nextShopItem())
+ * @param deps - dependency array that triggers stream re-initialization
+ * @param initialItems - items already visible (cursor advances past them)
+ */
+export declare function useMotelyStream(initStream: (() => void) | null, nextItem: (() => StreamItem) | null, deps: unknown[], initialItems?: StreamItem[]): StreamState;

package/dist/hooks/useShopStream.js

@@ -0,0 +1,82 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+const DEFAULT_PULL = 12;
+/**
+ * Generic stream hook for iterating any motely-wasm analyzer stream.
+ *
+ * @param initStream - called once to initialize the stream (e.g. analyzer.initShop(ante))
+ * @param nextItem - called to get the next item from the stream (e.g. analyzer.nextShopItem())
+ * @param deps - dependency array that triggers stream re-initialization
+ * @param initialItems - items already visible (cursor advances past them)
+ */
+export function useMotelyStream(initStream, nextItem, deps, initialItems = []) {
+    const [items, setItems] = useState(() => initialItems.map(i => ({ ...i })));
+    const [error, setError] = useState(null);
+    const [ready, setReady] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const nextRef = useRef(nextItem);
+    nextRef.current = nextItem;
+    const busyRef = useRef(false);
+    const genRef = useRef(0);
+    useEffect(() => {
+        const gen = ++genRef.current;
+        const base = initialItems.map(i => ({ ...i }));
+        setItems(base);
+        setError(null);
+        setReady(false);
+        setLoading(true);
+        setLoadingMore(false);
+        if (!initStream || !nextItem) {
+            setLoading(false);
+            return;
+        }
+        try {
+            initStream();
+            // Advance past already-visible items
+            for (let i = 0; i < base.length; i++)
+                nextItem();
+            if (base.length === 0) {
+                const prefetch = [];
+                for (let i = 0; i < DEFAULT_PULL; i++)
+                    prefetch.push(nextItem());
+                if (gen !== genRef.current)
+                    return;
+                setItems(prefetch);
+            }
+            setReady(true);
+        }
+        catch (err) {
+            if (gen !== genRef.current)
+                return;
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            if (gen === genRef.current)
+                setLoading(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+    const pullMore = useCallback((count = DEFAULT_PULL) => {
+        const next = nextRef.current;
+        if (!next || count <= 0 || busyRef.current)
+            return;
+        busyRef.current = true;
+        setLoadingMore(true);
+        setError(null);
+        try {
+            const batch = [];
+            for (let i = 0; i < count; i++)
+                batch.push(next());
+            setItems(prev => [...prev, ...batch]);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            busyRef.current = false;
+            setLoadingMore(false);
+        }
+    }, []);
+    return { items, ready, loading, loadingMore, error, pullMore };
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { JAML_ASSET_FILES, clearJamlAssetBaseUrl, getDefaultJamlAssetUrlMap, resolveJamlAssetUrl, setJamlAssetBaseUrl, type JamlAssetFile, type JamlAssetKey, } from "./assets.js";
+export { Layer, type LayerOptions } from "./render/Layer.js";
+export { JamlCardRenderer, type JamlCardRendererProps } from "./render/CanvasRenderer.js";
+export { JamlGameCard, JamlVoucher, JamlTag, JamlBoss, resolveAnalyzerShopItem, type JamlGameCardProps, type AnalyzerShopItem, type AnalyzerResolvedItem, } from "./components/GameCard.js";
+export { CardList, type CardListProps } from "./components/CardList.js";
+export { useMotelyStream, type StreamItem, type StreamState } from "./hooks/useShopStream.js";

package/dist/index.js

@@ -0,0 +1,7 @@
+"use client";
+export { JAML_ASSET_FILES, clearJamlAssetBaseUrl, getDefaultJamlAssetUrlMap, resolveJamlAssetUrl, setJamlAssetBaseUrl, } from "./assets.js";
+export { Layer } from "./render/Layer.js";
+export { JamlCardRenderer } from "./render/CanvasRenderer.js";
+export { JamlGameCard, JamlVoucher, JamlTag, JamlBoss, resolveAnalyzerShopItem, } from "./components/GameCard.js";
+export { CardList } from "./components/CardList.js";
+export { useMotelyStream } from "./hooks/useShopStream.js";

package/dist/motely.d.ts

@@ -0,0 +1 @@
+export { motelyItemTypeName, motelyItemCategory, motelyItemDisplayName, decodeMotelyItemName, warmMotelyItemCache, motelyItemCacheSize, } from "./decode/motelyItemDecoder.js";

package/dist/motely.js

@@ -0,0 +1,2 @@
+"use client";
+export { motelyItemTypeName, motelyItemCategory, motelyItemDisplayName, decodeMotelyItemName, warmMotelyItemCache, motelyItemCacheSize, } from "./decode/motelyItemDecoder.js";

package/dist/render/CanvasRenderer.d.ts

@@ -0,0 +1,7 @@
+import { Layer } from "./Layer.js";
+export interface JamlCardRendererProps {
+    layers: Layer[];
+    invert?: boolean;
+    className?: string;
+}
+export declare function JamlCardRenderer({ layers, invert, className }: JamlCardRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/render/CanvasRenderer.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { SPRITE_SHEETS } from "../sprites/spriteData.js";
+function loadImage(url) {
+    return new Promise((resolve) => {
+        const image = new window.Image();
+        image.addEventListener("load", () => {
+            resolve(image);
+        });
+        image.addEventListener("error", () => {
+            resolve(null);
+        });
+        image.src = url;
+    });
+}
+function renderImage(canvas, context, image, layer, timestamp) {
+    if (!image || !layer || !layer?.pos)
+        return 0;
+    const cardWidth = image.width / layer.columns;
+    const cardHeight = image.height / layer.rows;
+    const canvasStyle = canvas.style;
+    if (layer.order === 0) {
+        canvas.width = cardWidth;
+        canvas.height = cardHeight;
+        canvasStyle.width = `${cardWidth}px`;
+        canvasStyle.height = `${cardHeight}px`;
+    }
+    canvasStyle.imageRendering = "pixelated";
+    context.imageSmoothingEnabled = true;
+    context.save();
+    if (layer.animated && timestamp) {
+        const elapsed = timestamp;
+        const yOffset = Math.sin(elapsed / 1000) * 3;
+        const xOffset = Math.sin(elapsed / 1500) * 1.5;
+        context.globalAlpha = 0.65 + (Math.sin(elapsed / 2000) + 1) * 0.075;
+        context.translate(xOffset, yOffset);
+    }
+    context.drawImage(image, layer.pos.x * cardWidth, layer.pos.y * cardHeight, cardWidth, cardHeight, 0, 0, canvas.width, canvas.height);
+    context.restore();
+    return cardWidth / cardHeight;
+}
+export function JamlCardRenderer({ layers, invert = false, className = "" }) {
+    const canvasRef = useRef(null);
+    const imageCacheRef = useRef(new Map());
+    const [ratio, setRatio] = useState(3 / 4);
+    const [, forceUpdate] = useState(0);
+    const animationFrameRef = useRef(null);
+    const [elapsed, setElapsed] = useState(0);
+    const hasAnimatedLayer = layers?.some((layer) => layer.animated);
+    useEffect(() => {
+        let cancelled = false;
+        const imageCache = imageCacheRef.current;
+        const preload = async () => {
+            const urls = Array.from(new Set(Object.values(SPRITE_SHEETS).map((sheet) => sheet.src)));
+            const images = await Promise.all(urls.map((url) => loadImage(url)));
+            if (cancelled)
+                return;
+            images.forEach((image, index) => {
+                if (image) {
+                    imageCache.set(urls[index], image);
+                }
+            });
+            forceUpdate((prev) => prev + 1);
+        };
+        preload().catch((err) => {
+            console.error("[JamlCardRenderer]", err);
+        });
+        return () => {
+            cancelled = true;
+            imageCache.clear();
+        };
+    }, []);
+    useEffect(() => {
+        if (!hasAnimatedLayer)
+            return;
+        let startTime;
+        const animate = (timestamp) => {
+            if (!startTime)
+                startTime = timestamp;
+            const now = timestamp - startTime;
+            if (!animationFrameRef.current || timestamp - 100 > animationFrameRef.current) {
+                animationFrameRef.current = timestamp;
+                setElapsed(now);
+            }
+            animationFrameRef.current = requestAnimationFrame(animate);
+        };
+        animationFrameRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [hasAnimatedLayer]);
+    useEffect(() => {
+        if (!canvasRef.current || !layers || layers.length === 0)
+            return;
+        const canvas = canvasRef.current;
+        const context = canvas.getContext("2d");
+        if (!context)
+            return;
+        let cancelled = false;
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        [...layers]
+            .sort((a, b) => a.order - b.order)
+            .forEach((layer) => {
+            if (imageCacheRef.current.has(layer.source)) {
+                const image = imageCacheRef.current.get(layer.source);
+                if (!image)
+                    return;
+                const imageRatio = renderImage(canvas, context, image, layer, hasAnimatedLayer ? elapsed : undefined);
+                if (layer.order === 0) {
+                    setRatio(imageRatio);
+                }
+                return;
+            }
+            loadImage(layer.source).then((img) => {
+                if (cancelled || !img)
+                    return;
+                const imageRatio = renderImage(canvas, context, img, layer, hasAnimatedLayer ? elapsed : undefined);
+                imageCacheRef.current.set(layer.source, img);
+                if (layer.order === 0) {
+                    setRatio(imageRatio);
+                }
+                forceUpdate((prev) => prev + 1);
+            });
+        });
+        if (invert) {
+            canvas.style.filter = "invert(0.94)";
+        }
+        else {
+            canvas.style.filter = "none";
+        }
+        return () => { cancelled = true; };
+    }, [layers, elapsed, invert, hasAnimatedLayer]);
+    const containerStyle = {
+        aspectRatio: String(ratio),
+        width: "100%",
+        display: "flex",
+    };
+    const canvasStyle = {
+        borderRadius: "6px",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+        imageRendering: "pixelated",
+    };
+    return (_jsx("div", { className: className, style: containerStyle, children: _jsx("canvas", { ref: canvasRef, style: canvasStyle }) }));
+}

package/dist/render/Layer.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Layer class for sprite-based card rendering.
+ * Encapsulates the source, position, and dimensions of a sprite layer.
+ */
+export interface LayerOptions {
+    pos: {
+        x: number;
+        y: number;
+    };
+    name: string;
+    order: number;
+    source: string;
+    rows: number;
+    columns: number;
+    animated?: boolean;
+}
+export declare class Layer {
+    pos: {
+        x: number;
+        y: number;
+    };
+    name: string;
+    order: number;
+    source: string;
+    rows: number;
+    columns: number;
+    animated: boolean;
+    constructor({ pos, name, order, source, rows, columns, animated }: LayerOptions);
+}

package/dist/render/Layer.js

@@ -0,0 +1,18 @@
+export class Layer {
+    pos;
+    name;
+    order;
+    source;
+    rows;
+    columns;
+    animated;
+    constructor({ pos, name, order, source, rows, columns, animated = false }) {
+        this.pos = pos;
+        this.name = name;
+        this.order = order;
+        this.source = source;
+        this.rows = rows;
+        this.columns = columns;
+        this.animated = animated;
+    }
+}

package/dist/sprites/spriteData.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Sprite sheet position data for all Balatro game elements.
+ * Extracted from Blueprint's const.ts — maps item names to {x, y} grid positions
+ * within their respective sprite sheets.
+ */
+import { type JamlAssetKey } from "../assets.js";
+export interface SpritePos {
+    x: number;
+    y: number;
+}
+export interface SpriteEntry {
+    name: string;
+    pos: SpritePos;
+    animated?: boolean;
+}
+export interface SpriteSheetInfo {
+    readonly asset: JamlAssetKey;
+    readonly fileName: string;
+    readonly columns: number;
+    readonly rows: number;
+    readonly src: string;
+}
+/** Sprite sheet grid dimensions */
+export declare const SPRITE_SHEETS: {
+    readonly jokers: SpriteSheetInfo;
+    readonly tarots: SpriteSheetInfo;
+    readonly deck: SpriteSheetInfo;
+    readonly enhancers: SpriteSheetInfo;
+    readonly editions: SpriteSheetInfo;
+    readonly stickers: SpriteSheetInfo;
+    readonly blinds: SpriteSheetInfo;
+    readonly vouchers: SpriteSheetInfo;
+    readonly tags: SpriteSheetInfo;
+    readonly boosters: SpriteSheetInfo;
+};
+export declare const JOKERS: SpriteEntry[];
+export declare const JOKER_FACES: SpriteEntry[];
+export declare const CONSUMABLE_FACES: SpriteEntry[];
+export declare const TAROTS_AND_PLANETS: SpriteEntry[];
+export declare const TAGS: SpriteEntry[];
+export declare const VOUCHERS: SpriteEntry[];
+export declare const BOSSES: SpriteEntry[];
+export declare const BOOSTER_PACKS: SpriteEntry[];
+export declare const EDITION_MAP: Record<string, number>;
+export declare const STICKER_MAP: Record<string, SpritePos>;
+export declare const RANK_MAP: Record<string, number>;
+export declare const SUIT_MAP: Record<string, number>;
+export declare const ENHANCER_MAP: Record<string, SpritePos>;
+export declare const SEAL_MAP: Record<string, SpritePos>;
+export declare function findJoker(name: string): SpriteEntry | undefined;
+export declare function findJokerFace(name: string): SpriteEntry | undefined;
+export declare function findConsumable(name: string): SpriteEntry | undefined;
+export declare function findConsumableFace(name: string): SpriteEntry | undefined;
+export declare function findTag(name: string): SpriteEntry | undefined;
+export declare function findVoucher(name: string): SpriteEntry | undefined;
+export declare function findBoss(name: string): SpriteEntry | undefined;
+export declare function findBooster(name: string): SpriteEntry | undefined;