jaml-ui 0.20.1 → 0.21.1

package/DESIGN.md

@@ -203,4 +203,4 @@ JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]`
 - DON'T add visible scrollbars. Vertical magnetic snap-scroll + horizontal swipe only.
 - DON'T use rounded corners larger than 10px. Balatro is chunky, not bubbly.
 - DON'T use blur-based shadows for depth. Use solid colored box-shadows 80% opaque.
-- DON'T use redundant JS wrappers for `motely-wasm`. Import globally and `motely.boot()` once.
+- DON'T use redundant JS wrappers for `motely-wasm`. Import globally and `motely.boot()` once. Use `?worker&inline` for search workers rather than blob strings, and do not prop-drill `motelyWasmUrl`.

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/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/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

@@ -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 };
+}