jaml-ui 0.4.0 → 0.5.0

package/dist/r3f/Card3D.d.ts

@@ -0,0 +1,25 @@
+import type { SpriteData } from '../sprites/spriteMapper.js';
+export declare const CARD_DIMENSIONS: {
+    readonly WIDTH: 0.7;
+    readonly HEIGHT: 0.95;
+    readonly DEPTH: 0.02;
+};
+export declare const CARD_MAGNET: {
+    readonly MAX_TILT_X: 0.36;
+    readonly MAX_TILT_Y: 0.42;
+    readonly MAX_SHIFT: 0.038;
+    readonly TWIST_Z: 0.11;
+    readonly LERP_IN: 18;
+    readonly LERP_OUT: 10;
+};
+export interface Card3DProps {
+    sprite: SpriteData;
+    position?: [number, number, number];
+    rotation?: [number, number, number];
+    selected?: boolean;
+    highlighted?: boolean;
+    onClick?: () => void;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+}
+export declare const Card3D: import("react").NamedExoticComponent<Card3DProps>;

package/dist/r3f/Card3D.js

@@ -0,0 +1,103 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useMemo, useState, useEffect, memo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { useSpring, animated } from '@react-spring/three';
+import * as THREE from 'three';
+import { SPRITE_SHEETS } from '../sprites/spriteData.js';
+export const CARD_DIMENSIONS = { WIDTH: 0.7, HEIGHT: 0.95, DEPTH: 0.02 };
+export const CARD_MAGNET = {
+    MAX_TILT_X: 0.36,
+    MAX_TILT_Y: 0.42,
+    MAX_SHIFT: 0.038,
+    TWIST_Z: 0.11,
+    LERP_IN: 18,
+    LERP_OUT: 10,
+};
+const SHEET_KEY_MAP = {
+    Jokers: 'jokers',
+    Tarots: 'tarots',
+    Vouchers: 'vouchers',
+    Boosters: 'boosters',
+    Enhancers: 'enhancers',
+    Editions: 'editions',
+    BlindChips: 'blinds',
+    tags: 'tags',
+};
+const _textureCache = new Map();
+function useSpriteTexture(sprite) {
+    const [texture, setTexture] = useState(null);
+    const serial = useRef(0);
+    useEffect(() => {
+        const id = ++serial.current;
+        const sheet = SPRITE_SHEETS[SHEET_KEY_MAP[sprite.type]];
+        const url = sheet.src;
+        const cols = sheet.columns;
+        const rows = sheet.rows;
+        const { x, y } = sprite.pos;
+        const applySlice = (base) => {
+            const t = base.clone();
+            t.repeat.set(1 / cols, 1 / rows);
+            t.offset.set(x / cols, (rows - y - 1) / rows);
+            t.needsUpdate = true;
+            return t;
+        };
+        if (_textureCache.has(url)) {
+            setTexture(applySlice(_textureCache.get(url)));
+            return;
+        }
+        const loader = new THREE.TextureLoader();
+        loader.load(url, (loaded) => {
+            if (id !== serial.current)
+                return;
+            loaded.colorSpace = THREE.SRGBColorSpace;
+            loaded.magFilter = THREE.NearestFilter;
+            loaded.minFilter = THREE.NearestFilter;
+            _textureCache.set(url, loaded);
+            setTexture(applySlice(loaded));
+        }, undefined, (err) => console.error('[Card3D] texture load failed:', url, err));
+    }, [sprite.type, sprite.pos.x, sprite.pos.y]);
+    return texture;
+}
+export const Card3D = memo(function Card3D({ sprite, position = [0, 0, 0], rotation = [0, 0, 0], selected = false, highlighted = false, onClick, onPointerEnter, onPointerLeave, }) {
+    const tiltRef = useRef(null);
+    const target = useRef({ rx: 0, ry: 0, rz: 0, ox: 0, oy: 0 });
+    const [hovered, setHovered] = useState(false);
+    const texture = useSpriteTexture(sprite);
+    const { posY, scale } = useSpring({
+        posY: selected ? 0.3 : hovered ? 0.15 : 0,
+        scale: hovered ? 1.08 : selected ? 1.05 : 1,
+        config: { tension: 300, friction: 20 },
+    });
+    useFrame((_state, dt) => {
+        const g = tiltRef.current;
+        if (!g)
+            return;
+        const t = target.current;
+        const rate = hovered ? CARD_MAGNET.LERP_IN : CARD_MAGNET.LERP_OUT;
+        const a = 1 - Math.exp(-rate * dt);
+        g.rotation.x = THREE.MathUtils.lerp(g.rotation.x, t.rx, a);
+        g.rotation.y = THREE.MathUtils.lerp(g.rotation.y, t.ry, a);
+        g.rotation.z = THREE.MathUtils.lerp(g.rotation.z, t.rz, a);
+        g.position.x = THREE.MathUtils.lerp(g.position.x, t.ox, a);
+        g.position.y = THREE.MathUtils.lerp(g.position.y, t.oy, a);
+    });
+    const glowColor = useMemo(() => highlighted ? '#e4b643' : '#ffffff', [highlighted]);
+    const onMove = (e) => {
+        e.stopPropagation();
+        const uv = e.uv;
+        if (!uv)
+            return;
+        const nx = THREE.MathUtils.clamp((uv.x - 0.5) * 2, -1, 1);
+        const ny = THREE.MathUtils.clamp((uv.y - 0.5) * 2, -1, 1);
+        target.current.ry = -nx * CARD_MAGNET.MAX_TILT_Y;
+        target.current.rx = ny * CARD_MAGNET.MAX_TILT_X;
+        target.current.rz = -nx * ny * CARD_MAGNET.TWIST_Z;
+        target.current.ox = nx * CARD_MAGNET.MAX_SHIFT;
+        target.current.oy = -ny * CARD_MAGNET.MAX_SHIFT * 0.65;
+    };
+    const reset = () => { target.current = { rx: 0, ry: 0, rz: 0, ox: 0, oy: 0 }; };
+    if (!texture)
+        return null;
+    return (_jsx(animated.group, { "position-x": position[0], "position-y": posY.to((y) => position[1] + y), "position-z": position[2], "rotation-x": rotation[0], "rotation-y": rotation[1], "rotation-z": rotation[2], scale: scale, children: _jsxs("group", { ref: tiltRef, children: [highlighted && (_jsx("pointLight", { color: glowColor, intensity: 1.5, distance: 1, position: [0, 0, 0.1] })), _jsxs("mesh", { onClick: (e) => { e.stopPropagation(); onClick?.(); }, onPointerMove: onMove, onPointerEnter: (e) => { e.stopPropagation(); setHovered(true); onPointerEnter?.(); document.body.style.cursor = 'pointer'; }, onPointerLeave: (e) => { e.stopPropagation(); setHovered(false); reset(); onPointerLeave?.(); document.body.style.cursor = 'auto'; }, castShadow: true, receiveShadow: true, children: [_jsx("boxGeometry", { args: [CARD_DIMENSIONS.WIDTH, CARD_DIMENSIONS.HEIGHT, CARD_DIMENSIONS.DEPTH] }), _jsx("meshBasicMaterial", { attach: "material-4", map: texture, toneMapped: false }), _jsx("meshStandardMaterial", { attach: "material-5", color: "#1a1a2e", metalness: 0.2, roughness: 0.8 }), _jsx("meshStandardMaterial", { attach: "material-0", color: "#f5f5dc" }), _jsx("meshStandardMaterial", { attach: "material-1", color: "#f5f5dc" }), _jsx("meshStandardMaterial", { attach: "material-2", color: "#f5f5dc" }), _jsx("meshStandardMaterial", { attach: "material-3", color: "#f5f5dc" })] }), selected && (_jsxs("mesh", { position: [0, 0, -CARD_DIMENSIONS.DEPTH], children: [_jsx("ringGeometry", { args: [0.45, 0.5, 32] }), _jsx("meshBasicMaterial", { color: "#e4b643", transparent: true, opacity: 0.8 })] }))] }) }));
+});

package/dist/r3f.d.ts

@@ -0,0 +1 @@
+export * from './r3f/Card3D.js';

package/dist/r3f.js

@@ -0,0 +1 @@
+export * from './r3f/Card3D.js';

package/dist/ui/codeBlock.d.ts

@@ -0,0 +1,7 @@
+export interface JimboCodeBlockProps {
+    code: string;
+    language?: string;
+    filename?: string;
+    className?: string;
+}
+export declare function JimboCodeBlock({ code, language, filename, className }: JimboCodeBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/codeBlock.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FiCopy, FiCheck } from 'react-icons/fi';
+import { JimboColorOption } from './tokens.js';
+export function JimboCodeBlock({ code, language, filename, className = '' }) {
+    const [copied, setCopied] = useState(false);
+    const copy = () => {
+        void navigator.clipboard.writeText(code);
+        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, textTransform: 'uppercase', 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', textTransform: 'uppercase' }, 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 ? _jsx(FiCheck, { size: 14 }) : _jsx(FiCopy, { size: 14 }) })] }), _jsx("pre", { style: { padding: '1rem', overflowX: 'auto', fontFamily: 'monospace', fontSize: '0.875rem', lineHeight: 1.6, color: '#f6f0d5', margin: 0 }, children: _jsx("code", { children: code }) })] }));
+}

package/dist/ui/footer.d.ts

@@ -0,0 +1,5 @@
+export interface JimboBalatroFooterProps {
+    hidden?: boolean;
+    className?: string;
+}
+export declare function JimboBalatroFooter({ hidden, className }: JimboBalatroFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/footer.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JimboColorOption } from './tokens.js';
+const SUITS = [
+    { char: '♥️', kf: 'jaml-heart' },
+    { char: '♠️', kf: 'jaml-spade' },
+    { char: '♦️', kf: 'jaml-diamond' },
+    { char: '♣️', kf: 'jaml-club' },
+];
+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} }
+      ` })] }));
+}

package/dist/ui/panel.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { type ButtonVariant } from './tokens.js';
+export interface JimboPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    sway?: boolean;
+    onBack?: () => void;
+    backLabel?: string;
+    hideBack?: boolean;
+}
+export declare const JimboPanel: React.MemoExoticComponent<({ children, className, sway, onBack, backLabel, hideBack, style, ...props }: JimboPanelProps) => import("react/jsx-runtime").JSX.Element>;
+export interface JimboInnerPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const JimboInnerPanel: React.MemoExoticComponent<({ children, className, style, ...props }: JimboInnerPanelProps) => import("react/jsx-runtime").JSX.Element>;
+export interface JimboButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+}
+export declare function JimboButton({ children, variant, size, fullWidth, className, style, disabled, ...props }: JimboButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function JimboBackButton({ label, ...props }: Omit<JimboButtonProps, 'variant' | 'children'> & {
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface JimboModalProps {
+    children: React.ReactNode;
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    className?: string;
+}
+export declare function JimboModal({ children, open, onClose, title, className }: JimboModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/panel.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, memo } from 'react';
+import { JimboColorOption, JIMBO_ANIMATIONS } from './tokens.js';
+export const JimboPanel = memo(({ children, className = '', sway = false, onBack, backLabel = 'Back', hideBack = false, style, ...props }) => {
+    const panelRef = useRef(null);
+    useEffect(() => {
+        if (!sway || !panelRef.current)
+            return;
+        let frame;
+        const start = Date.now();
+        const el = panelRef.current;
+        const tick = () => {
+            const t = ((Date.now() - start) % JIMBO_ANIMATIONS.SWAY_DURATION) / JIMBO_ANIMATIONS.SWAY_DURATION * Math.PI * 2;
+            el.style.transform = `translate(${Math.sin(t) * JIMBO_ANIMATIONS.SWAY_AMOUNT * 0.3}px, ${Math.sin(t * 0.8) * JIMBO_ANIMATIONS.SWAY_AMOUNT}px)`;
+            frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+        return () => { cancelAnimationFrame(frame); el.style.transform = ''; };
+    }, [sway]);
+    return (_jsxs("div", { ref: panelRef, className: 'rounded-xl p-4 flex flex-col items-stretch overflow-hidden ' + className, style: {
+            backgroundColor: JimboColorOption.DARK_GREY,
+            border: `3px solid ${JimboColorOption.BORDER_SILVER}`,
+            boxShadow: `0 3px 0 0 ${JimboColorOption.BORDER_SOUTH}`,
+            ...style,
+        }, ...props, children: [_jsx("div", { className: "flex-1 overflow-auto", children: children }), onBack && !hideBack && (_jsx("div", { className: "mt-4 pt-2 shrink-0", children: _jsx(JimboBackButton, { onClick: onBack, label: backLabel }) }))] }));
+});
+JimboPanel.displayName = 'JimboPanel';
+export const JimboInnerPanel = memo(({ children, className = '', style, ...props }) => (_jsx("div", { className: 'rounded-lg p-3 ' + className, style: { backgroundColor: JimboColorOption.INNER_BORDER, border: `2px solid ${JimboColorOption.PANEL_EDGE}`, ...style }, ...props, children: children })));
+JimboInnerPanel.displayName = 'JimboInnerPanel';
+// ─── Button ──────────────────────────────────────────────────────────────────
+const VARIANT_COLORS = {
+    primary: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: '#fff' },
+    secondary: { bg: JimboColorOption.BLUE, hover: JimboColorOption.DARK_BLUE, text: '#fff' },
+    danger: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: '#fff' },
+    back: { bg: JimboColorOption.ORANGE, hover: JimboColorOption.DARK_ORANGE, text: '#fff' },
+    ghost: { bg: 'transparent', hover: 'rgba(255,255,255,0.1)', text: '#fff' },
+};
+export function JimboButton({ children, variant = 'primary', size = 'md', fullWidth = false, className = '', style, disabled, ...props }) {
+    const [hovered, setHovered] = useState(false);
+    const [pressed, setPressed] = useState(false);
+    const c = VARIANT_COLORS[variant];
+    const pad = { xs: '0.2rem 0.5rem', sm: '0.25rem 0.75rem', md: '0.375rem 1rem', lg: '0.5rem 1.5rem' }[size];
+    return (_jsx("button", { disabled: disabled, onMouseEnter: () => { if (!disabled)
+            setHovered(true); }, onMouseLeave: () => { setHovered(false); setPressed(false); }, onMouseDown: () => { if (!disabled)
+            setPressed(true); }, onMouseUp: () => setPressed(false), className: className, style: {
+            fontFamily: 'm6x11plus, monospace',
+            backgroundColor: hovered ? c.hover : c.bg,
+            color: c.text,
+            padding: pad,
+            borderRadius: '0.5rem',
+            border: 'none',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            width: fullWidth ? '100%' : undefined,
+            opacity: disabled ? 0.5 : 1,
+            transform: pressed ? 'translateY(3px)' : 'none',
+            boxShadow: pressed ? 'none' : '0 3px 0 0 rgba(0,0,0,0.5)',
+            textShadow: '1px 1px 0 rgba(0,0,0,0.8)',
+            userSelect: 'none',
+            ...style,
+        }, ...props, children: children }));
+}
+export function JimboBackButton({ label = 'Back', ...props }) {
+    return _jsx(JimboButton, { variant: "back", size: "sm", fullWidth: true, ...props, children: label });
+}
+export function JimboModal({ children, open, onClose, title, className }) {
+    const [visible, setVisible] = useState(open);
+    const [opacity, setOpacity] = useState(open ? 1 : 0);
+    useEffect(() => {
+        if (open) {
+            setVisible(true);
+            requestAnimationFrame(() => setOpacity(1));
+        }
+        else {
+            setOpacity(0);
+            const t = setTimeout(() => setVisible(false), JIMBO_ANIMATIONS.MENU_SINK_DURATION);
+            return () => clearTimeout(t);
+        }
+    }, [open]);
+    if (!visible)
+        return null;
+    return (_jsx("div", { style: { position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem', background: 'rgba(0,0,0,0.7)', opacity, transition: `opacity ${JIMBO_ANIMATIONS.MENU_SINK_DURATION}ms ease` }, onClick: onClose, children: _jsxs(JimboPanel, { sway: true, onBack: onClose, backLabel: "Close", className: 'w-full flex flex-col max-h-[90vh] ' + (className ?? 'max-w-lg'), onClick: (e) => e.stopPropagation(), children: [title && _jsx("h2", { style: { fontFamily: 'm6x11plus, monospace', color: '#fff', textAlign: 'center', margin: '0 0 1rem', fontSize: '1.25rem' }, children: title }), children] }) }));
+}

package/dist/ui/tokens.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Balatro design tokens — colors eyedropped from actual game pixels.
+ * Do NOT replace with Lua HEX values; the game's shader pipeline transforms them.
+ */
+export declare const JimboColorOption: {
+    readonly RED: "#ff4c40";
+    readonly BLUE: "#0093ff";
+    readonly GREEN: "#429f79";
+    readonly ORANGE: "#ff9800";
+    readonly GOLD: "#e4b643";
+    readonly PURPLE: "#9e74ce";
+    readonly DARK_RED: "#a02721";
+    readonly DARK_BLUE: "#0057a1";
+    readonly DARK_ORANGE: "#a05b00";
+    readonly DARK_GREEN: "#215f46";
+    readonly DARK_PURPLE: "#5e437e";
+    readonly DARK_GREY: "#3a5055";
+    readonly DARKEST: "#1e2b2d";
+    readonly GREY: "#708386";
+    readonly TEAL_GREY: "#404c4e";
+    readonly PANEL_EDGE: "#1e2e32";
+    readonly INNER_BORDER: "#334461";
+    readonly BORDER_SILVER: "#b9c2d2";
+    readonly BORDER_SOUTH: "#777e89";
+    readonly GOLD_TEXT: "#e4b643";
+    readonly GREEN_TEXT: "#35bd86";
+    readonly ORANGE_TEXT: "#ff8f00";
+    readonly WHITE: "#ffffff";
+    readonly BLACK: "#000000";
+    readonly TAROT_BUTTON: "#9e74ce";
+    readonly PLANET_BUTTON: "#00a7ca";
+    readonly SPECTRAL_BUTTON: "#2e76fd";
+    readonly TAROT_BUTTON_DARK: "#5e437e";
+    readonly PLANET_BUTTON_DARK: "#00657c";
+    readonly SPECTRAL_BUTTON_DARK: "#14449e";
+};
+export declare const JAML_COLORS: {
+    readonly RED: "#ff4c40";
+    readonly BLUE: "#0093ff";
+    readonly GREEN: "#429f79";
+    readonly ORANGE: "#ff9800";
+    readonly PURPLE: "#9e74ce";
+    readonly WHITE: "#ffffff";
+    readonly DARK_RED: "#a02721";
+    readonly DARK_BLUE: "#0057a1";
+    readonly DARK_ORANGE: "#a05b00";
+    readonly DARK_GREEN: "#215f46";
+    readonly DARK_PURPLE: "#5e437e";
+};
+export type JimboPaletteColor = keyof typeof JimboColorOption;
+export declare function withAlpha(hex: string, alpha: number): string;
+export declare const JIMBO_ANIMATIONS: {
+    readonly JUICE_UP_SCALE: 1.05;
+    readonly JUICE_DOWN_SCALE: 1;
+    readonly JUICE_DURATION: 150;
+    readonly JUICE_EASING: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    readonly SWAY_AMOUNT: 1.5;
+    readonly SWAY_DURATION: 4000;
+    readonly PRESS_TRANSLATE_Y: 2;
+    readonly PRESS_DURATION: 50;
+    readonly CARD_TILT_MAX: 6;
+    readonly MENU_SINK_DURATION: 200;
+    readonly MENU_RISE_DURATION: 300;
+    readonly LETTER_POP_RATE: 3;
+    readonly LETTER_BUMP_RATE: 2.666;
+};
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'back' | 'ghost';
+export declare const BUTTON_COLORS: Record<ButtonVariant, {
+    bg: string;
+    hover: string;
+    text: string;
+}>;

package/dist/ui/tokens.js

@@ -0,0 +1,78 @@
+/**
+ * Balatro design tokens — colors eyedropped from actual game pixels.
+ * Do NOT replace with Lua HEX values; the game's shader pipeline transforms them.
+ */
+export const JimboColorOption = {
+    RED: '#ff4c40',
+    BLUE: '#0093ff',
+    GREEN: '#429f79',
+    ORANGE: '#ff9800',
+    GOLD: '#e4b643',
+    PURPLE: '#9e74ce',
+    DARK_RED: '#a02721',
+    DARK_BLUE: '#0057a1',
+    DARK_ORANGE: '#a05b00',
+    DARK_GREEN: '#215f46',
+    DARK_PURPLE: '#5e437e',
+    DARK_GREY: '#3a5055',
+    DARKEST: '#1e2b2d',
+    GREY: '#708386',
+    TEAL_GREY: '#404c4e',
+    PANEL_EDGE: '#1e2e32',
+    INNER_BORDER: '#334461',
+    BORDER_SILVER: '#b9c2d2',
+    BORDER_SOUTH: '#777e89',
+    GOLD_TEXT: '#e4b643',
+    GREEN_TEXT: '#35bd86',
+    ORANGE_TEXT: '#ff8f00',
+    WHITE: '#ffffff',
+    BLACK: '#000000',
+    TAROT_BUTTON: '#9e74ce',
+    PLANET_BUTTON: '#00a7ca',
+    SPECTRAL_BUTTON: '#2e76fd',
+    TAROT_BUTTON_DARK: '#5e437e',
+    PLANET_BUTTON_DARK: '#00657c',
+    SPECTRAL_BUTTON_DARK: '#14449e',
+};
+export const JAML_COLORS = {
+    RED: JimboColorOption.RED,
+    BLUE: JimboColorOption.BLUE,
+    GREEN: JimboColorOption.GREEN,
+    ORANGE: JimboColorOption.ORANGE,
+    PURPLE: JimboColorOption.PURPLE,
+    WHITE: JimboColorOption.WHITE,
+    DARK_RED: JimboColorOption.DARK_RED,
+    DARK_BLUE: JimboColorOption.DARK_BLUE,
+    DARK_ORANGE: JimboColorOption.DARK_ORANGE,
+    DARK_GREEN: JimboColorOption.DARK_GREEN,
+    DARK_PURPLE: JimboColorOption.DARK_PURPLE,
+};
+export function withAlpha(hex, alpha) {
+    const clean = hex.replace('#', '');
+    const r = parseInt(clean.slice(0, 2), 16);
+    const g = parseInt(clean.slice(2, 4), 16);
+    const b = parseInt(clean.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+export const JIMBO_ANIMATIONS = {
+    JUICE_UP_SCALE: 1.05,
+    JUICE_DOWN_SCALE: 1.0,
+    JUICE_DURATION: 150,
+    JUICE_EASING: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+    SWAY_AMOUNT: 1.5,
+    SWAY_DURATION: 4000,
+    PRESS_TRANSLATE_Y: 2,
+    PRESS_DURATION: 50,
+    CARD_TILT_MAX: 6,
+    MENU_SINK_DURATION: 200,
+    MENU_RISE_DURATION: 300,
+    LETTER_POP_RATE: 3,
+    LETTER_BUMP_RATE: 2.666,
+};
+export const BUTTON_COLORS = {
+    primary: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: JimboColorOption.WHITE },
+    secondary: { bg: JimboColorOption.BLUE, hover: JimboColorOption.DARK_BLUE, text: JimboColorOption.WHITE },
+    danger: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: JimboColorOption.WHITE },
+    back: { bg: JimboColorOption.ORANGE, hover: JimboColorOption.DARK_ORANGE, text: JimboColorOption.WHITE },
+    ghost: { bg: 'transparent', hover: 'rgba(255,255,255,0.1)', text: JimboColorOption.WHITE },
+};

package/dist/ui.d.ts

@@ -0,0 +1,4 @@
+export * from './ui/tokens.js';
+export * from './ui/panel.js';
+export * from './ui/codeBlock.js';
+export * from './ui/footer.js';

package/dist/ui.js

@@ -0,0 +1,4 @@
+export * from './ui/tokens.js';
+export * from './ui/panel.js';
+export * from './ui/codeBlock.js';
+export * from './ui/footer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,6 +18,14 @@
       "types": "./dist/motely.d.ts",
       "import": "./dist/motely.js"
     },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./r3f": {
+      "types": "./dist/r3f.d.ts",
+      "import": "./dist/r3f.js"
+    },
     "./assets/*": "./assets/*",
     "./package.json": "./package.json"
   },
@@ -28,12 +36,6 @@
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "build": "tsc --pretty false",
-    "dev": "tsc --watch",
-    "typecheck": "tsc --noEmit --pretty false",
-    "prepack": "npm run build"
-  },
   "engines": {
     "node": ">=18"
   },
@@ -60,21 +62,47 @@
   "author": "pifreak",
   "license": "MIT",
   "peerDependencies": {
-    "motely-wasm": "^10.2.0 || ^11.0.0",
+    "@react-spring/three": ">=9.0.0",
+    "@react-three/fiber": ">=8.0.0",
+    "motely-wasm": "^10.2.0 || ^11.0.0 || ^12.0.0",
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-icons": ">=5.0.0",
+    "three": ">=0.150.0"
   },
   "peerDependenciesMeta": {
+    "@react-spring/three": {
+      "optional": true
+    },
+    "@react-three/fiber": {
+      "optional": true
+    },
     "motely-wasm": {
       "optional": true
+    },
+    "react-icons": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@react-spring/three": "^10.0.3",
+    "@react-three/fiber": "^9.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "motely-wasm": "^11.3.2",
+    "@types/three": "^0.184.0",
+    "motely-wasm": "^12.0.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-icons": "^5.6.0",
+    "three": "^0.184.0",
     "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsc --pretty false",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit --pretty false"
   }
 }