jaml-ui 0.19.0 → 0.21.0

package/dist/assets.d.ts

@@ -18,8 +18,3 @@ export declare function setJamlAssetBaseUrl(baseUrl: string | null | undefined):
 export declare function clearJamlAssetBaseUrl(): void;
 export declare function resolveJamlAssetUrl(asset: JamlAssetKey | JamlAssetFile): string;
 export declare function getDefaultJamlAssetUrlMap(): Readonly<Record<JamlAssetKey, string>>;
-/**
- * Returns the versioned Vercel Blob URL for motely-wasm's Bootsharp module.
- * Pass the same pinned motely-wasm version the app installed/uploaded.
- */
-export declare function getMotelyWasmUrl(version: string): string;

package/dist/assets.js

@@ -68,10 +68,3 @@ export function resolveJamlAssetUrl(asset) {
 export function getDefaultJamlAssetUrlMap() {
     return defaultAssetUrls;
 }
-/**
- * Returns the versioned Vercel Blob URL for motely-wasm's Bootsharp module.
- * Pass the same pinned motely-wasm version the app installed/uploaded.
- */
-export function getMotelyWasmUrl(version) {
-    return `https://cdn.seedfinder.app/motely-wasm/${version}/index.mjs`;
-}

package/dist/components/JamlCurator.d.ts

@@ -1,4 +1,3 @@
 export interface JamlCuratorProps {
-    motelyWasmUrl: string;
 }
-export declare function JamlCurator({ motelyWasmUrl }: JamlCuratorProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlCurator({}: JamlCuratorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlCurator.js

@@ -11,10 +11,10 @@ import { useSearch } from "../hooks/useSearch.js";
 import { useAnalyzer } from "../hooks/useAnalyzer.js";
 import { JamlSpeedometer } from "./JamlSpeedometer.js";
 const C = JimboColorOption;
-export function JamlCurator({ motelyWasmUrl }) {
+export function JamlCurator({}) {
     // Use map editor by default to generate JAML
     const [jamlText, setJamlText] = useState("");
-    const search = useSearch(motelyWasmUrl);
+    const search = useSearch();
     const analyzer = useAnalyzer();
     // Search results pagination
     const [resultIndex, setResultIndex] = useState(0);

package/dist/components/jamlMap/CategoryPicker.js

@@ -42,7 +42,7 @@ export function CategoryPicker({ config, onSelect, onCancel }) {
             clauseKey: config.clauseKey,
         });
     }, [onSelect, config]);
-    const renderItem = (item, isMuted = false) => (_jsxs("div", { onClick: () => handleSelect(item), title: item.name, style: {
+    const renderItem = (item, isMuted = false) => (_jsxs("div", { className: "j-juice-hover", onClick: () => handleSelect(item), title: item.name, style: {
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
@@ -51,8 +51,8 @@ export function CategoryPicker({ config, onSelect, onCancel }) {
             borderRadius: 4,
             cursor: "pointer",
             opacity: isMuted ? 0.3 : 1,
-        }, children: [_jsx(JimboSprite, { name: item.name, sheet: config.sheet, width: 48 }), _jsx(JimboText, { size: "micro", tone: "grey", style: { maxWidth: 60, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: item.name })] }, item.name));
-    return (_jsxs("div", { style: { padding: 0, maxWidth: 420, maxHeight: "80vh", display: "flex", flexDirection: "column" }, children: [_jsxs("div", { className: "j-flex j-gap-sm", style: { padding: "8px 10px 4px" }, children: [_jsx("input", { className: "j-seed-input__field", type: "text", placeholder: `Search ${config.title.toLowerCase()}...`, value: search, onChange: (e) => setSearch(e.target.value), style: { fontSize: 13, padding: "6px 10px", textTransform: "none", letterSpacing: "0.04em" } }), _jsx(JimboButton, { tone: "gold", size: "sm", onClick: handleAny, children: "Any" })] }), config.hint && (_jsx("div", { className: "j-inner-panel", style: { margin: "4px 10px 6px", padding: "6px 10px" }, children: _jsx(JimboText, { size: "xs", tone: "grey", children: config.hint }) })), _jsxs("div", { style: {
+        }, children: [_jsx(JimboSprite, { name: item.name, sheet: config.sheet, width: 48 }), _jsx(JimboText, { size: "micro", tone: "white", style: { lineHeight: 1.1, whiteSpace: "normal", textAlign: "center" }, children: item.name })] }, item.name));
+    return (_jsxs("div", { style: { padding: 0, maxWidth: 420, maxHeight: "80vh", display: "flex", flexDirection: "column" }, children: [_jsxs("div", { className: "j-flex j-gap-sm", style: { padding: "8px 10px 4px" }, children: [_jsx("input", { className: "j-seed-input__field", type: "text", placeholder: `Search ${config.title.toLowerCase()}...`, value: search, onChange: (e) => setSearch(e.target.value), style: { fontSize: 13, padding: "6px 10px", textTransform: "none", letterSpacing: "0.04em" } }), _jsx(JimboButton, { tone: "red", size: "sm", onClick: handleAny, children: "Any" })] }), config.hint && (_jsx("div", { className: "j-inner-panel", style: { margin: "4px 10px 6px", padding: "6px 10px" }, children: _jsx(JimboText, { size: "xs", tone: "grey", children: config.hint }) })), _jsxs("div", { className: "hide-scrollbar", style: {
                     display: "flex",
                     flexWrap: "wrap",
                     gap: 6,
@@ -86,7 +86,7 @@ export const VOUCHER_PICKER_CONFIG = {
     clauseKey: "voucher",
     sheet: "Vouchers",
     items: VOUCHERS,
-    accent: C.GOLD,
+    accent: C.ORANGE,
 };
 export const TAG_PICKER_CONFIG = {
     title: "Tags",

package/dist/components/jamlMap/JamlMapEditor.js

@@ -12,7 +12,7 @@ import { JimboSprite } from "../../ui/sprites.js";
 const C = JimboColorOption;
 const CATEGORIES = [
     { key: "joker", label: "Joker", sprite: "Joker", sheet: "Jokers", tone: "blue", hint: "Shop, Buffoon Pack" },
-    { key: "voucher", label: "Voucher", sprite: "Blank", sheet: "Vouchers", tone: "gold", hint: "1 per Ante in shop" },
+    { key: "voucher", label: "Voucher", sprite: "Blank", sheet: "Vouchers", tone: "orange", hint: "1 per Ante in shop" },
     { key: "tarot", label: "Tarot Card", sprite: "The Fool", sheet: "Tarots", tone: "tarot", hint: "Arcana Pack, shop" },
     { key: "planet", label: "Planet Card", sprite: "Mercury", sheet: "Tarots", tone: "planet", hint: "Celestial Pack, shop" },
     { key: "spectral", label: "Spectral Card", sprite: "Grim", sheet: "Tarots", tone: "spectral", hint: "Ghost Deck, Spectral Pack" },
@@ -100,7 +100,7 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
         const sel = (antesState[anteIndex] || {})[id];
         return (_jsx(MysterySlot, { zone: sel ? sel.zone : currentZone, sheetType: sheetType, selection: sel, width: width, onTap: () => handleSlotTap(anteIndex, id, forceCategory), onClear: sel ? () => handleSlotClear(anteIndex, id) : undefined, style: { flexShrink: 0 } }, id));
     };
-    return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: [_jsx("style", { children: `.hide-scrollbar { scrollbar-width: none; ms-overflow-style: none; } .hide-scrollbar::-webkit-scrollbar { display: none; }` }), _jsx("div", { style: { position: "sticky", top: 0, zIndex: 10, background: C.DARKEST, padding: "max(8px, env(safe-area-inset-top, 8px)) 0 8px 0", borderBottom: `2px solid ${C.PANEL_EDGE}` }, children: _jsx("div", { className: "j-flex j-gap-sm", style: { justifyContent: "center" }, children: ["must", "should", "mustnot"].map((z) => (_jsx(JimboButton, { tone: currentZone === z ? ZONE_TONE[z] : "grey", size: "sm", onClick: () => setCurrentZone(z), children: ZONE_LABEL[z] }, z))) }) }), _jsx("div", { className: "hide-scrollbar", style: {
+    return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: [_jsxs("div", { style: { position: "sticky", top: 0, zIndex: 10, background: C.DARKEST, padding: "max(32px, env(safe-area-inset-top, 32px)) 0 8px 0", borderBottom: `2px solid ${C.PANEL_EDGE}` }, children: [_jsx(JimboText, { size: "md", tone: "white", dance: true, style: { textAlign: "center", marginBottom: 12 }, children: "JAML VISUAL BUILDER" }), _jsx("div", { className: "j-flex j-gap-sm", style: { justifyContent: "center" }, children: ["must", "should", "mustnot"].map((z) => (_jsx(JimboButton, { tone: currentZone === z ? ZONE_TONE[z] : "blue", size: "sm", onClick: () => setCurrentZone(z), style: { opacity: currentZone === z ? 1 : 0.4 }, children: ZONE_LABEL[z] }, z))) })] }), _jsx("div", { className: "hide-scrollbar", style: {
                     flex: 1,
                     overflowY: "auto",
                     scrollSnapType: "y mandatory",
@@ -117,14 +117,14 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
 }
 // ─── Category Selection Menu ─────────────────────────────────────────────────
 function CategoryMenu({ onSelect, }) {
-    return (_jsx("div", { style: {
-            display: "grid",
-            gridTemplateColumns: "1fr 1fr",
-            gap: 6,
-            padding: 10,
+    return (_jsx("div", { className: "hide-scrollbar", style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 12,
+            padding: "10px 4px",
             maxHeight: "70vh",
             overflowY: "auto",
-        }, children: CATEGORIES.map((cat) => (_jsx(JimboButton, { tone: cat.tone, size: "sm", fullWidth: true, onClick: () => onSelect(cat.key), style: { padding: "8px 6px" }, children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, width: "100%", textAlign: "left" }, children: [_jsx(JimboSprite, { name: cat.sprite, sheet: cat.sheet, width: 24 }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [_jsx("span", { style: { fontSize: 11 }, children: cat.label }), _jsx("span", { style: { fontSize: 8, opacity: 0.7, letterSpacing: "0.04em", lineHeight: 1 }, children: cat.hint })] })] }) }, cat.key))) }));
+        }, children: CATEGORIES.map((cat) => (_jsx(JimboButton, { tone: cat.tone, size: "sm", fullWidth: true, onClick: () => onSelect(cat.key), children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left" }, children: [_jsx(JimboSprite, { name: cat.sprite, sheet: cat.sheet, width: 24 }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [_jsx("span", { style: { fontSize: 11 }, children: cat.label }), _jsx("span", { style: { fontSize: 8, opacity: 0.7, letterSpacing: "0.04em", lineHeight: 1, whiteSpace: "normal" }, children: cat.hint })] })] }) }, cat.key))) }));
 }
 // ─── Build JSON tree from slots ──────────────────────────────────────────────
 function buildJsonTree(antes) {

package/dist/components/jamlMap/MysterySlot.js

@@ -62,63 +62,67 @@ export function MysterySlot({ zone, sheetType, selection, width = 56, onTap, onC
         setPressed(false);
         setTilt({ rx: 0, ry: 0, tx: 0, ty: 0 });
     };
-    return (_jsxs("div", { ref: cardRef, onClick: onTap, onMouseEnter: () => setHover(true), onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), style: {
+    return (_jsx("div", { ref: cardRef, onClick: onTap, onMouseEnter: () => setHover(true), onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), style: {
             position: "relative",
             width: width + 8,
             height: cardH + 8,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
             cursor: onTap ? "pointer" : "default",
-            borderRadius: 6,
-            border: isEmpty
-                ? `2px dashed ${withAlpha(borderColor, 0.4)}`
-                : `3px solid ${borderColor}`,
-            background: isEmpty
-                ? withAlpha(borderColor, 0.06)
-                : withAlpha(C.DARKEST, 0.8),
-            transform: `perspective(600px) scale(${scale}) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg) translate(${tilt.tx}px, ${tilt.ty}px)`,
-            transformStyle: "preserve-3d",
-            transition: hover
-                ? `border-color 200ms`
-                : `transform 400ms ${JIMBO_ANIMATIONS.JUICE_EASING}, border-color 200ms`,
-            boxShadow: hover ? `0 8px 16px ${withAlpha(C.BLACK, 0.4)}` : `0 2px 4px ${withAlpha(C.BLACK, 0.2)}`,
-            zIndex: hover ? 10 : 1,
             ...style,
-        }, children: [_jsx(JimboSprite, { name: spriteName, sheet: spriteSheet, width: width, style: {
-                    opacity: isEmpty ? 0.5 : 1,
-                    filter: isEmpty ? "saturate(0.3)" : "none",
-                    transition: "opacity 200ms, filter 200ms",
-                } }), selection && onClear && (_jsx("div", { onClick: (e) => { e.stopPropagation(); onClear(); }, style: {
-                    position: "absolute",
-                    top: -6,
-                    right: -6,
-                    width: 18,
-                    height: 18,
-                    borderRadius: "50%",
-                    background: C.RED,
-                    color: C.WHITE,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: 11,
-                    fontFamily: "m6x11plus, ui-monospace, monospace",
-                    cursor: "pointer",
-                    lineHeight: 1,
-                    boxShadow: `0 1px 4px ${withAlpha(C.BLACK, 0.5)}`,
-                    transform: "translateZ(10px)", // Pop out in 3D
-                }, children: "\u00D7" })), isEmpty && hover && (_jsx("div", { style: {
-                    position: "absolute",
-                    bottom: -16,
-                    left: "50%",
-                    transform: "translateX(-50%) translateZ(10px)",
-                    fontFamily: "m6x11plus, ui-monospace, monospace",
-                    fontSize: 10,
-                    color: borderColor,
-                    whiteSpace: "nowrap",
-                    textTransform: "uppercase",
-                    letterSpacing: 1,
-                }, children: "+ tap" }))] }));
+        }, children: _jsxs("div", { style: {
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: 6,
+                border: isEmpty
+                    ? `2px dashed ${withAlpha(borderColor, 0.4)}`
+                    : `3px solid ${borderColor}`,
+                background: isEmpty
+                    ? withAlpha(borderColor, 0.06)
+                    : withAlpha(C.DARKEST, 0.8),
+                transform: `perspective(600px) scale(${scale}) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg) translate(${tilt.tx}px, ${tilt.ty}px)`,
+                transformStyle: "preserve-3d",
+                transition: hover
+                    ? `border-color 200ms`
+                    : `transform 400ms ${JIMBO_ANIMATIONS.JUICE_EASING}, border-color 200ms`,
+                boxShadow: hover ? `0 8px 16px ${withAlpha(C.BLACK, 0.4)}` : `0 2px 4px ${withAlpha(C.BLACK, 0.2)}`,
+                zIndex: hover ? 10 : 1,
+                pointerEvents: "none",
+            }, children: [_jsx(JimboSprite, { name: spriteName, sheet: spriteSheet, width: width, style: {
+                        opacity: isEmpty ? 0.5 : 1,
+                        filter: isEmpty ? "saturate(0.3)" : "none",
+                        transition: "opacity 200ms, filter 200ms",
+                    } }), selection && onClear && (_jsx("div", { onClick: (e) => { e.stopPropagation(); onClear(); }, style: {
+                        position: "absolute",
+                        top: -6,
+                        right: -6,
+                        width: 18,
+                        height: 18,
+                        borderRadius: "50%",
+                        background: C.RED,
+                        color: C.WHITE,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: 11,
+                        fontFamily: "m6x11plus, ui-monospace, monospace",
+                        cursor: "pointer",
+                        lineHeight: 1,
+                        boxShadow: `0 1px 4px ${withAlpha(C.BLACK, 0.5)}`,
+                        transform: "translateZ(10px)", // Pop out in 3D
+                    }, children: "\u00D7" })), isEmpty && hover && (_jsx("div", { style: {
+                        position: "absolute",
+                        bottom: -16,
+                        left: "50%",
+                        transform: "translateX(-50%) translateZ(10px)",
+                        fontFamily: "m6x11plus, ui-monospace, monospace",
+                        fontSize: 10,
+                        color: borderColor,
+                        whiteSpace: "nowrap",
+                        textTransform: "uppercase",
+                        letterSpacing: 1,
+                    }, children: "+ tap" }))] }) }));
 }
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 function categoryToSheet(cat) {

package/dist/hooks/searchWorker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/searchWorker.js

@@ -0,0 +1,68 @@
+import motely, { MotelyWasm, MotelyWasmEvents } from "motely-wasm";
+// Boot motely immediately when this module is loaded
+motely.boot().catch(console.error);
+let activeSearch = null;
+self.addEventListener('message', function (e) {
+    const msg = e.data;
+    if (msg.type === 'start') {
+        const validation = MotelyWasm.validateJaml(msg.jaml);
+        if (validation !== 'valid') {
+            self.postMessage({ type: 'error', message: validation });
+            return;
+        }
+        function cleanup() {
+            MotelyWasmEvents.notifyResult = () => { };
+            MotelyWasmEvents.notifyProgress = () => { };
+            MotelyWasmEvents.notifyComplete = () => { };
+            activeSearch = null;
+        }
+        MotelyWasmEvents.notifyResult = function (seed, score, tallyColumns) {
+            self.postMessage({ type: 'result', seed, score, tallyColumns: Array.from(tallyColumns) });
+        };
+        MotelyWasmEvents.notifyProgress = function (searched, matching) {
+            self.postMessage({ type: 'progress', searched: searched.toString(), matching: matching.toString() });
+        };
+        MotelyWasmEvents.notifyComplete = function (status, searched, matched) {
+            cleanup();
+            self.postMessage({ type: 'complete', status, searched: searched.toString(), matched: matched.toString() });
+        };
+        try {
+            const mode = msg.mode || 'random';
+            if (mode === 'random') {
+                activeSearch = MotelyWasm.startRandomSearch(msg.jaml, msg.count);
+            }
+            else if (mode === 'aesthetic') {
+                activeSearch = MotelyWasm.startAestheticSearch(msg.jaml, msg.aesthetic);
+            }
+            else if (mode === 'seedList') {
+                activeSearch = MotelyWasm.startSeedListSearch(msg.jaml, msg.seeds);
+            }
+            else if (mode === 'keyword') {
+                activeSearch = MotelyWasm.startKeywordSearch(msg.jaml, msg.keywords, msg.padding || '');
+            }
+            else if (mode === 'sequential') {
+                activeSearch = MotelyWasm.startSequentialSearch(msg.jaml, msg.batchCharCount, BigInt(msg.startBatch), BigInt(msg.endBatch));
+            }
+        }
+        catch (err) {
+            cleanup();
+            self.postMessage({ type: 'error', message: String(err) });
+        }
+    }
+    else if (msg.type === 'stop') {
+        if (activeSearch) {
+            activeSearch.cancel();
+            activeSearch = null;
+            self.postMessage({ type: 'cancelled' });
+        }
+    }
+    else if (msg.type === 'get_tally_labels') {
+        try {
+            const labels = MotelyWasm.getTallyLabels(msg.jaml);
+            self.postMessage({ type: 'tally_labels', labels: Array.from(labels) });
+        }
+        catch (err) {
+            self.postMessage({ type: 'error', message: String(err) });
+        }
+    }
+});

package/dist/hooks/useSearch.d.ts

@@ -13,7 +13,7 @@ export interface UseSearchState {
     seedsPerSecond: number;
     tallyLabels: string[];
 }
-export declare function useSearch(motelyWasmUrl: string): {
+export declare function useSearch(): {
     start: (jaml: string, count: number) => void;
     startAesthetic: (jaml: string, aesthetic: number) => void;
     startSeedList: (jaml: string, seeds: string[]) => void;

package/dist/hooks/useSearch.js

@@ -1,12 +1,8 @@
 "use client";
 import { useState, useCallback, useRef, useEffect } from "react";
-import { SEARCH_WORKER_CODE } from "./searchWorkerCode.js";
-function createWorker(motelyWasmUrl) {
-    const blob = new Blob([SEARCH_WORKER_CODE], { type: "text/javascript" });
-    const blobUrl = URL.createObjectURL(blob);
-    const worker = new Worker(blobUrl);
-    worker.postMessage({ type: "init", url: motelyWasmUrl });
-    return worker;
+import SearchWorker from "./searchWorker.ts?worker&inline";
+function createWorker() {
+    return new SearchWorker();
 }
 const INITIAL_STATE = {
     results: [],
@@ -17,16 +13,15 @@ const INITIAL_STATE = {
     seedsPerSecond: 0,
     tallyLabels: [],
 };
-export function useSearch(motelyWasmUrl) {
+export function useSearch() {
     const [state, setState] = useState(INITIAL_STATE);
     const workerRef = useRef(null);
-    const readyRef = useRef(false);
+    const readyRef = useRef(true); // Worker is ready implicitly since boot is handled by import
     const speedRef = useRef({ lastSearched: 0n, lastTime: 0, ema: 0 });
     useEffect(() => {
-        setState((s) => ({ ...s, status: "booting" }));
-        const worker = createWorker(motelyWasmUrl);
+        setState((s) => ({ ...s, status: "idle" }));
+        const worker = createWorker();
         workerRef.current = worker;
-        readyRef.current = false;
         worker.onmessage = (e) => {
             const msg = e.data;
             if (msg.type === "ready") {
@@ -88,7 +83,7 @@ export function useSearch(motelyWasmUrl) {
             worker.terminate();
             workerRef.current = null;
         };
-    }, [motelyWasmUrl]);
+    }, []);
     const sendStart = useCallback((payload) => {
         const worker = workerRef.current;
         if (!worker)

package/dist/r3f/Card3D.js

@@ -66,5 +66,5 @@ export const Card3D = memo(function Card3D({ sprite, position = [0, 0, 0], rotat
     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 })] }))] }) }));
+    return (_jsxs(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("mesh", { visible: false, 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'; }, children: [_jsx("boxGeometry", { args: [CARD_DIMENSIONS.WIDTH, CARD_DIMENSIONS.HEIGHT, CARD_DIMENSIONS.DEPTH * 2] }), _jsx("meshBasicMaterial", {})] }), _jsxs("group", { ref: tiltRef, children: [highlighted && (_jsx("pointLight", { color: glowColor, intensity: 1.5, distance: 1, position: [0, 0, 0.1] })), _jsxs("mesh", { 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/render/CanvasRenderer.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useJamlCardRenderer } from "../ui/hooks.js";
 export function JamlCardRenderer({ layers, invert = false, className = "", hoverTilt = false }) {
     const { canvasRef, containerStyle, canvasStyle, handlers } = useJamlCardRenderer({
@@ -7,5 +7,5 @@ export function JamlCardRenderer({ layers, invert = false, className = "", hover
         invert,
         hoverTilt
     });
-    return (_jsx("div", { className: className, style: containerStyle, ...handlers, children: _jsx("canvas", { ref: canvasRef, style: canvasStyle }) }));
+    return (_jsxs("div", { className: className, style: { ...containerStyle, position: "relative" }, children: [_jsx("canvas", { ref: canvasRef, style: canvasStyle }), hoverTilt && (_jsx("div", { style: { position: "absolute", inset: "-15px", zIndex: 10, cursor: "pointer" }, ...handlers })), !hoverTilt && (_jsx("div", { style: { position: "absolute", inset: "0", zIndex: 10 }, ...handlers }))] }));
 }

package/dist/ui/hooks.d.ts

@@ -87,3 +87,16 @@ export declare function useJamlIdeDrag(filter: JamlVisualFilter, onChange: (filt
     hoverZone: string | null;
     onDragStart: (e: React.MouseEvent | React.TouchEvent, clause: JamlVisualClause, fromZone: JamlZone) => void;
 };
+/**
+ * Provides a magnetic 3D tilt effect for DOM elements, replicating the 'juice' of Balatro cards.
+ * Ensures the hit-detection area remains stable by separating container events from the transformed style.
+ */
+export declare function useDOMMagneticTilt(enabled?: boolean): {
+    handlers: {
+        onPointerEnter: ((event: React.PointerEvent) => void) | undefined;
+        onPointerLeave: (() => void) | undefined;
+        onPointerMove: ((event: React.PointerEvent) => void) | undefined;
+    };
+    tiltStyle: React.CSSProperties;
+    isHovered: boolean;
+};

package/dist/ui/hooks.js

@@ -405,18 +405,18 @@ export function useJamlCardRenderer({ layers, invert = false, hoverTilt = false,
         aspectRatio: String(ratio),
         width: '100%',
         display: 'flex',
-        transition: hoverTilt && !isHovered ? 'transform 0.4s ease' : undefined,
-        transform: hoverTilt ? (isHovered ? transform : 'none') : undefined,
-        transformStyle: hoverTilt ? 'preserve-3d' : undefined,
-        transformOrigin: hoverTilt ? 'center center' : undefined,
+        perspective: hoverTilt ? '1000px' : undefined,
         userSelect: 'none',
         WebkitUserSelect: 'none',
     };
     const canvasStyle = {
+        transition: hoverTilt && !isHovered ? 'transform 0.4s ease, box-shadow 0.4s ease-out' : 'transform 0.1s ease-out',
+        transform: hoverTilt ? (isHovered ? transform : 'none') : undefined,
+        transformStyle: hoverTilt ? 'preserve-3d' : undefined,
+        transformOrigin: hoverTilt ? 'center center' : undefined,
         borderRadius: '6px',
         boxShadow: hoverTilt && isHovered ? '0 2px 12px rgba(0,0,0,0.3)' : '0 2px 8px rgba(0,0,0,0.2)',
         imageRendering: 'pixelated',
-        transition: hoverTilt && !isHovered ? 'box-shadow 0.4s ease-out' : undefined,
         pointerEvents: 'none',
     };
     return {
@@ -551,3 +551,47 @@ export function useJamlIdeDrag(filter, onChange, rootRef) {
         onDragStart,
     };
 }
+/**
+ * Provides a magnetic 3D tilt effect for DOM elements, replicating the 'juice' of Balatro cards.
+ * Ensures the hit-detection area remains stable by separating container events from the transformed style.
+ */
+export function useDOMMagneticTilt(enabled = true) {
+    const [isHovered, setIsHovered] = useState(false);
+    const [transform, setTransform] = useState('none');
+    const onPointerEnter = (event) => {
+        if (!enabled || event.pointerType === 'touch')
+            return;
+        setIsHovered(true);
+    };
+    const onPointerLeave = () => {
+        if (!enabled)
+            return;
+        setIsHovered(false);
+        setTransform('none');
+    };
+    const onPointerMove = (event) => {
+        if (!enabled || event.pointerType === 'touch')
+            return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const rotateY = (x / rect.width) * 12 - 6;
+        const rotateX = (y / rect.height) * -16 + 8;
+        const juiceScale = 1.05;
+        const juiceY = -2; // slight move up
+        setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${juiceScale}) translateY(${juiceY}px)`);
+    };
+    const handlers = {
+        onPointerEnter: enabled ? onPointerEnter : undefined,
+        onPointerLeave: enabled ? onPointerLeave : undefined,
+        onPointerMove: enabled ? onPointerMove : undefined,
+    };
+    const tiltStyle = {
+        transition: enabled && !isHovered ? 'transform 0.4s ease, box-shadow 0.4s ease-out' : 'transform 0.1s ease-out',
+        transform: enabled ? (isHovered ? transform : 'none') : undefined,
+        transformStyle: enabled ? 'preserve-3d' : undefined,
+        transformOrigin: enabled ? 'center center' : undefined,
+        willChange: enabled ? 'transform' : undefined,
+    };
+    return { handlers, tiltStyle, isHovered };
+}