jaml-ui 0.4.1 → 0.5.1

package/dist/components/JamlIde.d.ts

@@ -3,6 +3,8 @@ import { type JamlIdeMode } from "./JamlIdeToolbar.js";
 export interface JamlIdeSearchResult {
     seed: string;
     score?: number;
+    tallyColumns?: number[];
+    tallyLabels?: string[];
 }
 export interface JamlIdeProps {
     jaml: string;

package/dist/components/JamlIde.js

@@ -1,29 +1,92 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { JamlMapPreview } from "./JamlMapPreview.js";
 import { JamlIdeToolbar } from "./JamlIdeToolbar.js";
+import { JimboColorOption } from "../ui/tokens.js";
+function TallyBar({ value, max }) {
+    const pct = max > 0 ? Math.min(1, value / max) : 0;
+    return (_jsx("div", { style: { flex: 1, height: 4, borderRadius: 999, background: `${JimboColorOption.DARK_GREY}88`, overflow: "hidden" }, children: _jsx("div", { style: {
+                height: "100%",
+                width: `${pct * 100}%`,
+                borderRadius: 999,
+                background: value > 0 ? JimboColorOption.GREEN : JimboColorOption.GREY,
+                transition: "width 200ms ease",
+            } }) }));
+}
 function ResultsView({ results }) {
+    const [expanded, setExpanded] = useState(null);
     if (results.length === 0) {
         return (_jsx("div", { style: {
-                border: "1px dashed rgba(255,255,255,0.18)",
-                borderRadius: 12,
-                padding: 14,
+                border: `1px dashed ${JimboColorOption.DARK_GREY}`,
+                borderRadius: 10,
+                padding: 16,
                 fontSize: 12,
-                opacity: 0.72,
-                background: "rgba(255,255,255,0.03)",
-            }, children: "No results yet." }));
+                color: JimboColorOption.GREY,
+                background: `${JimboColorOption.DARKEST}88`,
+                textAlign: "center",
+            }, children: "No results yet. Run a search to find seeds." }));
     }
-    return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: results.map((result, index) => (_jsxs("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                gap: 12,
-                borderRadius: 12,
-                border: "1px solid rgba(255,255,255,0.08)",
-                background: "rgba(255,255,255,0.03)",
-                padding: "10px 12px",
-            }, children: [_jsx("div", { style: { fontWeight: 700, letterSpacing: 0.4 }, children: result.seed }), _jsx("div", { style: { fontSize: 12, opacity: 0.7 }, children: result.score !== undefined ? result.score : "-" })] }, `${result.seed}-${index}`))) }));
+    const labels = results[0]?.tallyLabels ?? [];
+    const maxScore = Math.max(...results.map((r) => r.score ?? 0));
+    return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: results.map((result) => {
+            const isOpen = expanded === result.seed;
+            const hasTally = result.tallyColumns && result.tallyColumns.length > 0 && labels.length > 0;
+            return (_jsxs("div", { style: {
+                    borderRadius: 10,
+                    border: `1px solid ${isOpen ? JimboColorOption.GOLD + "55" : JimboColorOption.PANEL_EDGE}`,
+                    background: isOpen ? `${JimboColorOption.GOLD}0a` : `${JimboColorOption.DARKEST}cc`,
+                    overflow: "hidden",
+                    transition: "border-color 120ms",
+                }, children: [_jsxs("button", { type: "button", onClick: () => hasTally && setExpanded(isOpen ? null : result.seed), style: {
+                            width: "100%",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 10,
+                            padding: "9px 12px",
+                            background: "none",
+                            border: "none",
+                            cursor: hasTally ? "pointer" : "default",
+                            color: "inherit",
+                            textAlign: "left",
+                        }, children: [_jsx("span", { style: {
+                                    fontFamily: "m6x11plus, monospace",
+                                    fontWeight: 700,
+                                    fontSize: 14,
+                                    letterSpacing: 1,
+                                    color: JimboColorOption.GOLD_TEXT,
+                                    minWidth: 80,
+                                }, children: result.seed }), result.score !== undefined ? (_jsxs(_Fragment, { children: [_jsx(TallyBar, { value: result.score, max: maxScore }), _jsx("span", { style: {
+                                            fontSize: 12,
+                                            fontWeight: 700,
+                                            color: result.score > 0 ? JimboColorOption.GREEN_TEXT : JimboColorOption.GREY,
+                                            minWidth: 36,
+                                            textAlign: "right",
+                                        }, children: result.score })] })) : null, hasTally ? (_jsx("span", { style: { fontSize: 10, color: JimboColorOption.GREY, marginLeft: 2 }, children: isOpen ? "▲" : "▼" })) : null] }), isOpen && hasTally ? (_jsx("div", { style: {
+                            borderTop: `1px solid ${JimboColorOption.PANEL_EDGE}`,
+                            padding: "8px 12px 10px",
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: 5,
+                        }, children: labels.map((label, i) => {
+                            const val = result.tallyColumns[i] ?? 0;
+                            const maxVal = Math.max(...results.map((r) => r.tallyColumns?.[i] ?? 0));
+                            return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: {
+                                            fontSize: 11,
+                                            color: val > 0 ? JimboColorOption.WHITE : JimboColorOption.GREY,
+                                            minWidth: 140,
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                            whiteSpace: "nowrap",
+                                        }, children: label }), _jsx(TallyBar, { value: val, max: maxVal }), _jsx("span", { style: {
+                                            fontSize: 11,
+                                            fontWeight: 700,
+                                            color: val > 0 ? JimboColorOption.GREEN_TEXT : JimboColorOption.DARK_GREY,
+                                            minWidth: 24,
+                                            textAlign: "right",
+                                        }, children: val })] }, label));
+                        }) })) : null] }, result.seed));
+        }) }));
 }
 export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults = [], className = "", title = "JAML IDE", actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, }) {
     const [mode, setMode] = useState(defaultMode);
@@ -32,20 +95,21 @@ export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults =
             display: "flex",
             flexDirection: "column",
             minHeight: 420,
-            borderRadius: 16,
+            borderRadius: 12,
             overflow: "hidden",
-            border: "1px solid rgba(255,255,255,0.08)",
-            background: "#17181c",
-            color: "#f5f5f5",
+            border: `2px solid ${JimboColorOption.BORDER_SILVER}`,
+            boxShadow: `0 3px 0 0 ${JimboColorOption.BORDER_SOUTH}`,
+            background: JimboColorOption.DARK_GREY,
+            color: JimboColorOption.WHITE,
         }, children: [_jsxs("div", { style: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
                     gap: 12,
-                    padding: "12px 14px",
-                    borderBottom: "1px solid rgba(255,255,255,0.08)",
-                    background: "rgba(255,255,255,0.03)",
-                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: 800 }, children: title }), _jsx("div", { style: { fontSize: 11, opacity: 0.66 }, children: "Reusable JAML authoring and preview surface." })] }), actions ? _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: actions }) : null] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: [mode === "code" ? (_jsx("textarea", { title: "JAML IDE Editor", value: jaml, onChange: (event) => onChange(event.target.value), placeholder: codePlaceholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", style: {
+                    padding: "10px 14px",
+                    borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
+                    background: JimboColorOption.TEAL_GREY,
+                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 14, fontWeight: 800, fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: "Jimbo's Ante Markup Language" })] }), actions ? _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: actions }) : null] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: "auto", background: JimboColorOption.DARKEST }, children: [mode === "code" ? (_jsx("textarea", { title: "JAML IDE Editor", value: jaml, onChange: (event) => onChange(event.target.value), placeholder: codePlaceholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", style: {
                             width: "100%",
                             minHeight: 320,
                             resize: "vertical",
@@ -53,9 +117,9 @@ export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults =
                             outline: 0,
                             padding: 16,
                             background: "transparent",
-                            color: "inherit",
+                            color: JimboColorOption.WHITE,
                             fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
                             fontSize: 13,
                             lineHeight: 1.7,
-                        } })) : null, mode === "map" ? _jsx(JamlMapPreview, { jaml: jaml }) : null, mode === "results" ? _jsx("div", { style: { padding: 16 }, children: _jsx(ResultsView, { results: results }) }) : null] })] }));
+                        } })) : null, mode === "map" ? _jsx(JamlMapPreview, { jaml: jaml }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results }) })) : null] })] }));
 }

package/dist/components/JamlIdeToolbar.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JimboColorOption } from "../ui/tokens.js";
 const TABS = [
     { id: "code", label: "Code" },
     { id: "map", label: "Map" },
@@ -11,35 +12,43 @@ export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className
             alignItems: "center",
             justifyContent: "space-between",
             gap: 8,
-            padding: "8px 10px",
-            borderBottom: "1px solid rgba(255,255,255,0.08)",
-            background: "rgba(255,255,255,0.04)",
-        }, children: [_jsx("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: TABS.map((tab) => {
+            padding: "6px 10px",
+            borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
+            background: JimboColorOption.DARKEST,
+        }, children: [_jsx("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: TABS.map((tab) => {
                     const selected = mode === tab.id;
                     return (_jsxs("button", { type: "button", onClick: () => onModeChange(tab.id), style: {
                             cursor: "pointer",
-                            borderRadius: 8,
-                            border: selected ? "1px solid rgba(247,185,85,0.55)" : "1px solid transparent",
-                            background: selected ? "rgba(247,185,85,0.16)" : "transparent",
-                            color: selected ? "#f7b955" : "rgba(255,255,255,0.58)",
-                            padding: "6px 10px",
+                            borderRadius: 6,
+                            border: selected ? `1px solid ${JimboColorOption.GOLD}` : "1px solid transparent",
+                            background: selected ? `${JimboColorOption.GOLD}22` : "transparent",
+                            color: selected ? JimboColorOption.GOLD_TEXT : JimboColorOption.GREY,
+                            padding: "5px 10px",
                             fontSize: 11,
-                            fontWeight: 600,
+                            fontWeight: 700,
+                            fontFamily: "m6x11plus, monospace",
+                            transition: "background 120ms, color 120ms",
                         }, children: [tab.label, tab.id === "results" && resultCount > 0 ? (_jsx("span", { style: {
                                     marginLeft: 6,
                                     borderRadius: 999,
-                                    background: "rgba(0,0,0,0.25)",
+                                    background: `${JimboColorOption.GOLD}33`,
+                                    color: JimboColorOption.GOLD_TEXT,
                                     padding: "1px 6px",
                                     fontSize: 10,
                                 }, children: resultCount })) : null] }, tab.id));
-                }) }), onSearch ? (_jsx("button", { type: "button", onClick: onSearch, disabled: isSearching, style: {
-                    cursor: isSearching ? "not-allowed" : "pointer",
-                    borderRadius: 8,
-                    border: "1px solid rgba(74,222,128,0.4)",
-                    background: isSearching ? "rgba(239,68,68,0.2)" : "rgba(74,222,128,0.15)",
-                    color: isSearching ? "#ef4444" : "#4ade80",
-                    padding: "6px 14px",
+                }) }), onSearch ? (_jsx("button", { type: "button", onClick: onSearch, style: {
+                    cursor: "pointer",
+                    borderRadius: 6,
+                    border: isSearching
+                        ? `1px solid ${JimboColorOption.DARK_RED}`
+                        : `1px solid ${JimboColorOption.GREEN}`,
+                    background: isSearching
+                        ? `${JimboColorOption.RED}22`
+                        : `${JimboColorOption.GREEN}22`,
+                    color: isSearching ? JimboColorOption.RED : JimboColorOption.GREEN_TEXT,
+                    padding: "5px 14px",
                     fontSize: 11,
                     fontWeight: 700,
+                    fontFamily: "m6x11plus, monospace",
                 }, children: isSearching ? "Stop" : "Search" })) : null] }));
 }

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,80 +1,109 @@
-{
-  "name": "jaml-ui",
-  "version": "0.4.1",
-  "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./core": {
-      "types": "./dist/core.d.ts",
-      "import": "./dist/core.js"
-    },
-    "./motely": {
-      "types": "./dist/motely.d.ts",
-      "import": "./dist/motely.js"
-    },
-    "./assets/*": "./assets/*",
-    "./package.json": "./package.json"
-  },
-  "sideEffects": false,
-  "files": [
-    "dist",
-    "assets",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "tsc --pretty false",
-    "dev": "tsc --watch",
-    "typecheck": "tsc --noEmit --pretty false",
-    "prepack": "npm run build"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/OptimusPi/jaml-ui"
-  },
-  "homepage": "https://github.com/OptimusPi/jaml-ui#readme",
-  "bugs": {
-    "url": "https://github.com/OptimusPi/jaml-ui/issues"
-  },
-  "keywords": [
-    "balatro",
-    "jaml",
-    "motely",
-    "seed",
-    "card",
-    "sprite",
-    "ui"
-  ],
-  "author": "pifreak",
-  "license": "MIT",
-  "peerDependencies": {
-    "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"
-  },
-  "peerDependenciesMeta": {
-    "motely-wasm": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "motely-wasm": "^12.0.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "typescript": "^5.9.3"
-  }
-}
+{
+  "name": "jaml-ui",
+  "version": "0.5.1",
+  "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js"
+    },
+    "./motely": {
+      "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"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "assets",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc --pretty false",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit --pretty false",
+    "prepack": "npm run build"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OptimusPi/jaml-ui"
+  },
+  "homepage": "https://github.com/OptimusPi/jaml-ui#readme",
+  "bugs": {
+    "url": "https://github.com/OptimusPi/jaml-ui/issues"
+  },
+  "keywords": [
+    "balatro",
+    "jaml",
+    "motely",
+    "seed",
+    "card",
+    "sprite",
+    "ui"
+  ],
+  "author": "pifreak",
+  "license": "MIT",
+  "peerDependencies": {
+    "@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-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",
+    "@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"
+  }
+}