jaml-ui 0.10.0 → 0.11.0

package/dist/r3f/jokerRegistry.js

@@ -0,0 +1,40 @@
+import jokersPayload from "../data/balatro-jokers.json";
+import { resolveJamlAssetUrl } from "../assets.js";
+const payload = jokersPayload;
+export const BALATRO_JOKER_ATLAS_META = payload.atlas;
+export const BALATRO_JOKERS = payload.jokers;
+/** Prefer bundled asset resolver so hosts can override base URL. */
+export function getJokerAtlasImageUrl() {
+    return resolveJamlAssetUrl("jokers");
+}
+export function getJokerAtlasGridSize() {
+    let mx = 0;
+    let my = 0;
+    for (const j of BALATRO_JOKERS) {
+        mx = Math.max(mx, j.pos.x);
+        my = Math.max(my, j.pos.y);
+        if (j.soulPos) {
+            mx = Math.max(mx, j.soulPos.x);
+            my = Math.max(my, j.soulPos.y);
+        }
+    }
+    return { cols: mx + 1, rows: my + 1 };
+}
+const NAME_ALIASES = {
+    canio: "Caino",
+    séance: "Seance",
+    seance: "Seance",
+};
+function normalizeLookup(name) {
+    const t = name.trim();
+    const alias = NAME_ALIASES[t.toLowerCase()];
+    return alias ?? t;
+}
+export function findJokerByDisplayName(displayName) {
+    const needle = normalizeLookup(displayName).toLowerCase();
+    return BALATRO_JOKERS.find((j) => j.name.toLowerCase() === needle);
+}
+export function findJokerByKey(key) {
+    const k = key.trim().toLowerCase();
+    return BALATRO_JOKERS.find((j) => j.key.toLowerCase() === k);
+}

package/dist/r3f/jokerTilt.d.ts

@@ -0,0 +1,8 @@
+import * as THREE from "three";
+import type { MagneticTarget } from "./magneticTilt.js";
+export declare const JOKER_TILT_LERP_IN = 20;
+export declare const JOKER_TILT_LERP_OUT = 11;
+export declare function stableIdFraction(s: string): number;
+export declare function applyJokerTiltFromNormalized(nx: number, ny: number, amtScale: number, target: MagneticTarget): void;
+export declare function jokerPointerTiltFromUv(uv: THREE.Vector2, target: MagneticTarget): void;
+export declare function jokerAmbientTiltAtTime(t: number, idFrac: number, target: MagneticTarget): void;

package/dist/r3f/jokerTilt.js

@@ -0,0 +1,41 @@
+import * as THREE from "three";
+const AMBIENT_TILT = 0.2;
+const TILT_FACTOR = 0.3;
+const MAGNET_MAX_RX = 0.34;
+const MAGNET_MAX_RY = 0.4;
+const MAGNET_MAX_SHIFT = 0.05;
+const MAGNET_TWIST_Z = 0.1;
+export const JOKER_TILT_LERP_IN = 20;
+export const JOKER_TILT_LERP_OUT = 11;
+export function stableIdFraction(s) {
+    let h = 2166136261;
+    for (let i = 0; i < s.length; i++) {
+        h ^= s.charCodeAt(i);
+        h = Math.imul(h, 16777619);
+    }
+    return ((h >>> 0) % 100000) / 100000;
+}
+export function applyJokerTiltFromNormalized(nx, ny, amtScale, target) {
+    const clampedX = THREE.MathUtils.clamp(nx, -1, 1);
+    const clampedY = THREE.MathUtils.clamp(ny, -1, 1);
+    target.ry = -clampedX * MAGNET_MAX_RY * amtScale;
+    target.rx = clampedY * MAGNET_MAX_RX * amtScale;
+    target.rz = -clampedX * clampedY * MAGNET_TWIST_Z * amtScale;
+    target.ox = clampedX * MAGNET_MAX_SHIFT * amtScale;
+    target.oy = -clampedY * MAGNET_MAX_SHIFT * 0.65 * amtScale;
+}
+export function jokerPointerTiltFromUv(uv, target) {
+    const nx = (uv.x - 0.5) * 2;
+    const ny = (uv.y - 0.5) * 2;
+    const amt = Math.abs(ny + nx - 1) * TILT_FACTOR;
+    applyJokerTiltFromNormalized(nx, ny, THREE.MathUtils.clamp(amt * 1.15, 0.35, 1.25), target);
+}
+export function jokerAmbientTiltAtTime(t, idFrac, target) {
+    const tiltAngle = t * (1.56 + ((idFrac / 1.14212) % 1)) + idFrac / 1.35122;
+    const nu = 0.5 + 0.5 * AMBIENT_TILT * Math.cos(tiltAngle);
+    const nv = 0.5 + 0.5 * AMBIENT_TILT * Math.sin(tiltAngle);
+    const nx = (nu - 0.5) * 2;
+    const ny = (nv - 0.5) * 2;
+    const amt = AMBIENT_TILT * (0.5 + Math.cos(tiltAngle)) * TILT_FACTOR;
+    applyJokerTiltFromNormalized(nx, ny, THREE.MathUtils.clamp(amt * 2.2, 0.2, 1), target);
+}

package/dist/r3f/magneticTilt.d.ts

@@ -0,0 +1,18 @@
+import * as THREE from "three";
+export type MagneticTarget = {
+    rx: number;
+    ry: number;
+    rz: number;
+    ox: number;
+    oy: number;
+};
+export declare function createZeroMagneticTarget(): MagneticTarget;
+/** Map pointer UV on card face to rotation + in-plane shift (Balatro-style). */
+export declare function magneticTargetFromUvPlayingCard(uv: THREE.Vector2, magnet: {
+    MAX_TILT_X: number;
+    MAX_TILT_Y: number;
+    MAX_SHIFT: number;
+    TWIST_Z: number;
+}): MagneticTarget;
+export declare function resetMagneticTarget(t: MagneticTarget): void;
+export declare function lerpMagneticGroup(group: THREE.Group, target: MagneticTarget, dt: number, lerpIn: number, lerpOut: number, hovered: boolean, extraRz: number): void;

package/dist/r3f/magneticTilt.js

@@ -0,0 +1,34 @@
+import * as THREE from "three";
+export function createZeroMagneticTarget() {
+    return { rx: 0, ry: 0, rz: 0, ox: 0, oy: 0 };
+}
+/** Map pointer UV on card face to rotation + in-plane shift (Balatro-style). */
+export function magneticTargetFromUvPlayingCard(uv, magnet) {
+    const nx = (uv.x - 0.5) * 2;
+    const ny = (uv.y - 0.5) * 2;
+    const clampedX = THREE.MathUtils.clamp(nx, -1, 1);
+    const clampedY = THREE.MathUtils.clamp(ny, -1, 1);
+    return {
+        ry: -clampedX * magnet.MAX_TILT_Y,
+        rx: clampedY * magnet.MAX_TILT_X,
+        rz: -clampedX * clampedY * magnet.TWIST_Z,
+        ox: clampedX * magnet.MAX_SHIFT,
+        oy: -clampedY * magnet.MAX_SHIFT * 0.65,
+    };
+}
+export function resetMagneticTarget(t) {
+    t.rx = 0;
+    t.ry = 0;
+    t.rz = 0;
+    t.ox = 0;
+    t.oy = 0;
+}
+export function lerpMagneticGroup(group, target, dt, lerpIn, lerpOut, hovered, extraRz) {
+    const rate = hovered ? lerpIn : lerpOut;
+    const a = 1 - Math.exp(-rate * dt);
+    group.rotation.x = THREE.MathUtils.lerp(group.rotation.x, target.rx, a);
+    group.rotation.y = THREE.MathUtils.lerp(group.rotation.y, target.ry, a);
+    group.rotation.z = THREE.MathUtils.lerp(group.rotation.z, target.rz + extraRz, a);
+    group.position.x = THREE.MathUtils.lerp(group.position.x, target.ox, a);
+    group.position.y = THREE.MathUtils.lerp(group.position.y, target.oy, a);
+}

package/dist/r3f/playingCardTypes.d.ts

@@ -0,0 +1,24 @@
+export type PlayingCardSuit = "hearts" | "diamonds" | "clubs" | "spades";
+export type PlayingCardRank = "A" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "J" | "Q" | "K";
+export type PlayingCardEnhancement = "bonus" | "mult" | "wild" | "glass" | "steel" | "stone" | "gold" | "lucky";
+export type PlayingCardSeal = "gold" | "red" | "blue" | "purple";
+export type PlayingCardEdition = "foil" | "holographic" | "polychrome" | "negative";
+/** Minimal card model for 3D mesh (game-specific id/chips optional). */
+export interface PlayingCard3DModel {
+    suit: PlayingCardSuit;
+    rank: PlayingCardRank;
+    enhancement?: PlayingCardEnhancement;
+    seal?: PlayingCardSeal;
+    edition?: PlayingCardEdition;
+}
+export declare const PLAYING_CARD_ATLAS: {
+    readonly columns: 13;
+    readonly rows: 4;
+    readonly cellPx: {
+        readonly x: 71;
+        readonly y: 95;
+    };
+};
+export declare const SUIT_ROW: Record<PlayingCardSuit, number>;
+export declare const RANK_COLUMN: Record<PlayingCardRank, number>;
+export declare const SUIT_COLORS: Record<PlayingCardSuit, string>;

package/dist/r3f/playingCardTypes.js

@@ -0,0 +1,32 @@
+export const PLAYING_CARD_ATLAS = {
+    columns: 13,
+    rows: 4,
+    cellPx: { x: 71, y: 95 },
+};
+export const SUIT_ROW = {
+    hearts: 0,
+    clubs: 1,
+    diamonds: 2,
+    spades: 3,
+};
+export const RANK_COLUMN = {
+    "2": 0,
+    "3": 1,
+    "4": 2,
+    "5": 3,
+    "6": 4,
+    "7": 5,
+    "8": 6,
+    "9": 7,
+    "10": 8,
+    J: 9,
+    Q: 10,
+    K: 11,
+    A: 12,
+};
+export const SUIT_COLORS = {
+    hearts: "#e74c3c",
+    diamonds: "#3498db",
+    clubs: "#27ae60",
+    spades: "#2c3e50",
+};

package/dist/r3f/playingCardVisuals.d.ts

@@ -0,0 +1,7 @@
+import type { PlayingCard3DModel } from "./playingCardTypes.js";
+export declare function editionMaterialProps(edition: PlayingCard3DModel["edition"]): {
+    metalness: number;
+    roughness: number;
+};
+export declare function enhancementGlowHex(card: PlayingCard3DModel, highlighted: boolean): string;
+export declare function sealColorHex(seal: PlayingCard3DModel["seal"]): string;

package/dist/r3f/playingCardVisuals.js

@@ -0,0 +1,45 @@
+import { SUIT_COLORS } from "./playingCardTypes.js";
+export function editionMaterialProps(edition) {
+    switch (edition) {
+        case "foil":
+            return { metalness: 0.9, roughness: 0.1 };
+        case "holographic":
+            return { metalness: 0.7, roughness: 0.2 };
+        case "polychrome":
+            return { metalness: 0.8, roughness: 0.15 };
+        default:
+            return { metalness: 0.1, roughness: 0.8 };
+    }
+}
+export function enhancementGlowHex(card, highlighted) {
+    switch (card.enhancement) {
+        case "bonus":
+            return "#3498db";
+        case "mult":
+            return "#e74c3c";
+        case "wild":
+            return "#9b59b6";
+        case "glass":
+            return "#1abc9c";
+        case "steel":
+            return "#95a5a6";
+        case "gold":
+            return "#f1c40f";
+        case "lucky":
+            return "#2ecc71";
+        default:
+            return highlighted ? SUIT_COLORS[card.suit] : "#ffffff";
+    }
+}
+export function sealColorHex(seal) {
+    switch (seal) {
+        case "gold":
+            return "#f1c40f";
+        case "red":
+            return "#e74c3c";
+        case "blue":
+            return "#3498db";
+        default:
+            return "#9b59b6";
+    }
+}

package/dist/r3f/usePlayingCardTexture.d.ts

@@ -0,0 +1,7 @@
+import * as THREE from "three";
+import { type PlayingCardRank, type PlayingCardSuit } from "./playingCardTypes.js";
+export declare function usePlayingCardFaceTexture(suit: PlayingCardSuit, rank: PlayingCardRank, options?: {
+    deckUrl?: string;
+    enhancersUrl?: string;
+}): THREE.Texture | null;
+export declare function useCardBackTexture(): THREE.Texture;

package/dist/r3f/usePlayingCardTexture.js

@@ -0,0 +1,92 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { resolveJamlAssetUrl } from "../assets.js";
+import { applyBalatroGridUV } from "./gridUV.js";
+import { loadCompositedPlayingAtlas } from "./compositedAtlas.js";
+import { PLAYING_CARD_ATLAS, RANK_COLUMN, SUIT_ROW, } from "./playingCardTypes.js";
+const textureCache = new Map();
+function magnetKey(suit, rank, deckUrl, enhancersUrl) {
+    return `${deckUrl}|${enhancersUrl}|${suit}|${rank}`;
+}
+export function usePlayingCardFaceTexture(suit, rank, options) {
+    const [texture, setTexture] = useState(null);
+    const loadSerial = useRef(0);
+    const deckUrl = options?.deckUrl ?? resolveJamlAssetUrl("deck");
+    const enhancersUrl = options?.enhancersUrl ?? resolveJamlAssetUrl("enhancers");
+    useEffect(() => {
+        const serial = ++loadSerial.current;
+        let cancelled = false;
+        const key = magnetKey(suit, rank, deckUrl, enhancersUrl);
+        const cached = textureCache.get(key);
+        if (cached) {
+            setTexture(cached);
+            return;
+        }
+        loadCompositedPlayingAtlas(deckUrl, PLAYING_CARD_ATLAS.columns, PLAYING_CARD_ATLAS.rows, enhancersUrl)
+            .then((canvas) => {
+            if (cancelled || serial !== loadSerial.current)
+                return;
+            const tex = new THREE.CanvasTexture(canvas);
+            tex.colorSpace = THREE.SRGBColorSpace;
+            tex.magFilter = THREE.NearestFilter;
+            tex.minFilter = THREE.NearestFilter;
+            const tw = canvas.width;
+            const th = canvas.height;
+            const cellW = tw / PLAYING_CARD_ATLAS.columns;
+            const cellH = th / PLAYING_CARD_ATLAS.rows;
+            applyBalatroGridUV(tex, { x: RANK_COLUMN[rank], y: SUIT_ROW[suit] }, {
+                cellW,
+                cellH,
+                textureWidth: tw,
+                textureHeight: th,
+            });
+            textureCache.set(key, tex);
+            setTexture(tex);
+        })
+            .catch((err) => {
+            console.error("[jaml-ui/r3f] playing card atlas failed:", err);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [suit, rank, deckUrl, enhancersUrl]);
+    return texture;
+}
+export function useCardBackTexture() {
+    const [tex] = useState(() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = PLAYING_CARD_ATLAS.cellPx.x;
+        canvas.height = PLAYING_CARD_ATLAS.cellPx.y;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            throw new Error("2d context unavailable");
+        ctx.fillStyle = "#1a1a2e";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.strokeStyle = "#c9a227";
+        ctx.lineWidth = 2;
+        ctx.strokeRect(2, 2, canvas.width - 4, canvas.height - 4);
+        ctx.fillStyle = "#16213e";
+        for (let y = 8; y < canvas.height - 8; y += 10) {
+            for (let x = 8; x < canvas.width - 8; x += 10) {
+                ctx.fillRect(x, y, 5, 5);
+            }
+        }
+        ctx.fillStyle = "#c9a227";
+        const cx = canvas.width / 2;
+        const cy = canvas.height / 2;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - 17);
+        ctx.lineTo(cx + 14, cy);
+        ctx.lineTo(cx, cy + 17);
+        ctx.lineTo(cx - 14, cy);
+        ctx.closePath();
+        ctx.fill();
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.magFilter = THREE.NearestFilter;
+        texture.minFilter = THREE.NearestFilter;
+        texture.colorSpace = THREE.SRGBColorSpace;
+        return texture;
+    });
+    return tex;
+}

package/dist/sprites/spriteMapper.d.ts

@@ -7,5 +7,5 @@ export interface SpriteData {
     pos: SpritePos;
     type: SpriteSheetType;
 }
-/** O(1) sprite lookup by name. Tries multiple normalizations. */
+/** 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;

package/dist/sprites/spriteMapper.js

@@ -1,42 +1,23 @@
 import { JOKERS, JOKER_FACES, TAROTS_AND_PLANETS, CONSUMABLE_FACES, VOUCHERS, BOSSES, TAGS, BOOSTER_PACKS, } from "./spriteData.js";
+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();
-function addToMap(items, type) {
+function registerAll(items, type) {
     for (const item of items) {
         if (!item.name || !item.pos)
             continue;
-        const data = { pos: item.pos, type };
-        ITEM_MAP.set(item.name, data);
-        ITEM_MAP.set(item.name.toLowerCase(), data);
-        ITEM_MAP.set(item.name.replace(/ /g, ""), data);
-        ITEM_MAP.set(item.name.replace(/ /g, "").toLowerCase(), data);
+        ITEM_MAP.set(normalize(item.name), { pos: item.pos, type });
     }
 }
-addToMap(JOKERS, "Jokers");
-addToMap(JOKER_FACES, "Jokers");
-addToMap(TAROTS_AND_PLANETS, "Tarots");
-addToMap(CONSUMABLE_FACES ?? [], "Tarots");
-addToMap(VOUCHERS, "Vouchers");
-addToMap(BOSSES, "BlindChips");
-addToMap(TAGS, "tags");
-addToMap(BOOSTER_PACKS ?? [], "Boosters");
-/** O(1) sprite lookup by name. Tries multiple normalizations. */
+registerAll(JOKERS, "Jokers");
+registerAll(JOKER_FACES, "Jokers");
+registerAll(TAROTS_AND_PLANETS, "Tarots");
+registerAll(CONSUMABLE_FACES ?? [], "Tarots");
+registerAll(VOUCHERS, "Vouchers");
+registerAll(BOSSES, "BlindChips");
+registerAll(TAGS, "tags");
+registerAll(BOOSTER_PACKS ?? [], "Boosters");
+/** Look up sprite data by name. Accepts display names ("Icy Joker"), enum keys ("IcyJoker"), and "Joker | Name" prefixed forms. */
 export function getSpriteData(name) {
-    const cleaned = name.replace(/^(Joker|Tarot|Planet|Voucher|Pack|Edition|Tag) [|:] /i, "").trim();
-    if (ITEM_MAP.has(cleaned))
-        return ITEM_MAP.get(cleaned);
-    if (ITEM_MAP.has(name))
-        return ITEM_MAP.get(name);
-    const variants = [
-        cleaned.toLowerCase(),
-        cleaned.replace(/ /g, ""),
-        cleaned.replace(/ /g, "").toLowerCase(),
-        name.toLowerCase(),
-        name.replace(/ /g, ""),
-        name.replace(/ /g, "").toLowerCase(),
-    ];
-    for (const v of variants) {
-        if (ITEM_MAP.has(v))
-            return ITEM_MAP.get(v);
-    }
-    return null;
+    return ITEM_MAP.get(normalize(stripPrefix(name))) ?? ITEM_MAP.get(normalize(name)) ?? null;
 }

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.js

@@ -23,62 +23,62 @@ export function JimboBackground() {
         const gl = canvas.getContext('webgl');
         if (!gl)
             return;
-        const vsSource = `
-      attribute vec2 position;
-      void main() {
-        gl_Position = vec4(position, 0.0, 1.0);
-      }
+        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 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);

package/dist/ui/jimboCopyRow.d.ts

@@ -0,0 +1,5 @@
+export interface JimboCopyRowProps {
+    value: string;
+    label?: string;
+}
+export declare function JimboCopyRow({ value, label }: JimboCopyRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboCopyRow.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { JimboColorOption } from './tokens.js';
+import { JimboText } from './jimboText.js';
+export function JimboCopyRow({ value, label }) {
+    const [copied, setCopied] = useState(false);
+    const C = JimboColorOption;
+    function copy() {
+        navigator.clipboard.writeText(value).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        });
+    }
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [label && (_jsx(JimboText, { size: "xs", tone: "grey", uppercase: true, style: { letterSpacing: 2 }, children: label })), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: {
+                            flex: 1,
+                            padding: '6px 10px',
+                            background: C.DARKEST,
+                            border: `2px solid ${C.PANEL_EDGE}`,
+                            borderRadius: 4,
+                            wordBreak: 'break-all',
+                        }, children: _jsx(JimboText, { size: "sm", children: value }) }), _jsx("button", { type: "button", onClick: copy, style: {
+                            fontFamily: "'m6x11plus', 'Courier New', monospace",
+                            fontSize: 11,
+                            letterSpacing: 2,
+                            color: copied ? C.GREEN_TEXT : C.GOLD_TEXT,
+                            background: copied ? 'rgba(53,189,134,0.12)' : 'rgba(228,182,67,0.12)',
+                            border: `1px solid ${copied ? C.GREEN_TEXT : C.GOLD_TEXT}`,
+                            borderRadius: 4,
+                            padding: '4px 12px',
+                            cursor: 'pointer',
+                            flexShrink: 0,
+                            transition: 'color 0.15s, background 0.15s, border-color 0.15s',
+                            textTransform: 'uppercase',
+                        }, children: copied ? 'Copied' : 'Copy' })] })] }));
+}

package/dist/ui/jimboTabs.js

@@ -11,11 +11,11 @@ import { JimboText } from './jimboText.js';
 export function JimboTabs({ tabs, activeTab, onTabChange, className = '', style }) {
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: className, style: { display: 'flex', gap: 8, alignItems: 'flex-end', ...style }, children: tabs.map((tab) => (_jsx(TabButton, { label: tab.label, active: activeTab === tab.id, onClick: () => onTabChange(tab.id) }, tab.id))) }), _jsx("style", { children: JIMBO_BOUNCE_KEYFRAMES })] }));
 }
-const JIMBO_BOUNCE_KEYFRAMES = `
-  @keyframes jimbo-bounce {
-    0%, 100% { transform: translateY(0); }
-    50%      { transform: translateY(-3px); }
-  }
+const JIMBO_BOUNCE_KEYFRAMES = `
+  @keyframes jimbo-bounce {
+    0%, 100% { transform: translateY(0); }
+    50%      { transform: translateY(-3px); }
+  }
 `;
 function TabButton({ label, active, onClick }) {
     const [pressed, setPressed] = useState(false);

package/dist/ui.d.ts

@@ -10,3 +10,4 @@ export * from './ui/codeBlock.js';
 export * from './ui/footer.js';
 export * from './ui/sprites.js';
 export * from './ui/showcase.js';
+export * from './ui/jimboCopyRow.js';

package/dist/ui.js

@@ -10,3 +10,4 @@ export * from './ui/codeBlock.js';
 export * from './ui/footer.js';
 export * from './ui/sprites.js';
 export * from './ui/showcase.js';
+export * from './ui/jimboCopyRow.js';