jaml-ui 0.21.2 → 0.21.4

package/dist/ui/PanelSplitter.js

@@ -0,0 +1,76 @@
+// PORTABLE — intended for jaml-ui/src/ui/panelSplitter.tsx
+// On paste, replace `from 'jaml-ui'` with `from './tokens.js'`.
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { JimboColorOption } from "./tokens.js";
+import { useCallback, useEffect, useRef } from "react";
+const C = JimboColorOption;
+export function PanelSplitter({ orientation = "vertical", onDrag, onKeyAdjust, "aria-label": ariaLabel, }) {
+    const draggingRef = useRef(false);
+    const lastRef = useRef(0);
+    const onDragRef = useRef(onDrag);
+    onDragRef.current = onDrag;
+    const handlePointerDown = useCallback((e) => {
+        e.preventDefault();
+        e.target.setPointerCapture(e.pointerId);
+        draggingRef.current = true;
+        lastRef.current = orientation === "vertical" ? e.clientX : e.clientY;
+    }, [orientation]);
+    useEffect(() => {
+        function move(e) {
+            if (!draggingRef.current) {
+                return;
+            }
+            const cur = orientation === "vertical" ? e.clientX : e.clientY;
+            const delta = cur - lastRef.current;
+            if (delta !== 0) {
+                lastRef.current = cur;
+                onDragRef.current(delta);
+            }
+        }
+        function up() {
+            draggingRef.current = false;
+        }
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+        window.addEventListener("pointercancel", up);
+        return () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+            window.removeEventListener("pointercancel", up);
+        };
+    }, [orientation]);
+    const step = 16;
+    const isVertical = orientation === "vertical";
+    return (_jsx("button", { "aria-label": ariaLabel ?? "Resize panel", onKeyDown: (e) => {
+            if (!onKeyAdjust) {
+                return;
+            }
+            if (isVertical && e.key === "ArrowLeft") {
+                onKeyAdjust(-step);
+            }
+            if (isVertical && e.key === "ArrowRight") {
+                onKeyAdjust(step);
+            }
+            if (!isVertical && e.key === "ArrowUp") {
+                onKeyAdjust(-step);
+            }
+            if (!isVertical && e.key === "ArrowDown") {
+                onKeyAdjust(step);
+            }
+        }, onPointerDown: handlePointerDown, style: {
+            all: "unset",
+            display: "block",
+            flex: "0 0 auto",
+            width: isVertical ? 6 : undefined,
+            height: isVertical ? undefined : 6,
+            cursor: isVertical ? "col-resize" : "row-resize",
+            background: C.PANEL_EDGE,
+            borderLeft: isVertical ? `1px solid ${C.BLACK}` : undefined,
+            borderRight: isVertical ? `1px solid ${C.BLACK}` : undefined,
+            borderTop: isVertical ? undefined : `1px solid ${C.BLACK}`,
+            borderBottom: isVertical ? undefined : `1px solid ${C.BLACK}`,
+            touchAction: "none",
+            userSelect: "none",
+        }, type: "button" }));
+}

package/dist/ui/ide/AgnosticSeedCard.d.ts

@@ -0,0 +1,19 @@
+interface AgnosticSeedCardProps {
+    seed: string;
+    deckSlug?: string;
+    stakeSlug?: string;
+    className?: string;
+    onClick?: () => void;
+    analysis?: any;
+    result?: any;
+    dayNumber?: number;
+    ritualId?: string;
+    jamlConfig?: string | null;
+    isLocked?: boolean;
+    onShowHowTo?: () => void;
+    onOpenSubmit?: () => void;
+    canSubmit?: boolean;
+    filter?: any;
+}
+export declare function AgnosticSeedCard({ seed, deckSlug, stakeSlug, isLocked, dayNumber, className, onClick, analysis: propAnalysis, result: propResult, filter }: AgnosticSeedCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/ide/AgnosticSeedCard.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import motely, { MotelyWasm } from 'motely-wasm';
+import { cn } from '../../lib/utils';
+import { DeckSprite } from './DeckSprite';
+import { Loader2, Sparkles } from 'lucide-react';
+export function AgnosticSeedCard({ seed, deckSlug = 'Erratic', stakeSlug = 'White', isLocked, dayNumber, className, onClick, analysis: propAnalysis, result: propResult, filter }) {
+    const [loading, setLoading] = useState(false);
+    const [fetchedAnalysis, setFetchedAnalysis] = useState(null);
+    const result = propAnalysis || propResult || fetchedAnalysis;
+    useEffect(() => {
+        if (propAnalysis || propResult)
+            return;
+        const analyze = async () => {
+            setLoading(true);
+            try {
+                await motely.boot();
+                const jaml = `version: 1\nconfig:\n  deck: ${deckSlug}\n  stake: ${stakeSlug}\n`;
+                const rawData = MotelyWasm.analyzeJamlSeeds(jaml, [seed]);
+                if (rawData && rawData.seeds.length > 0) {
+                    const seedData = rawData.seeds[0];
+                    // The UI needs score and matches. The WASM provides score and tallies, but no matches yet.
+                    // If filter logic is still desired, it needs to be updated. For now, pass what we have.
+                    setFetchedAnalysis({
+                        score: seedData.score,
+                        matches: [], // TODO: C# Agent needs to provide matches in the WASM response if required.
+                        analysis: seedData.analysis
+                    });
+                }
+            }
+            catch (err) {
+                console.error(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        analyze();
+    }, [seed, deckSlug, stakeSlug, propAnalysis, propResult, filter]);
+    if (isLocked) {
+        return (_jsxs("div", { className: cn("balatro-panel flex flex-col items-center justify-center text-center", "w-[315px] h-[340px] shrink-0", "border-dashed border-white/10 opacity-60 grayscale", "animate-sway", // Move sway to container
+            className), children: [_jsx("div", { className: "mb-4", children: _jsx(DeckSprite, { deck: deckSlug, stake: stakeSlug, size: 84 }) }), _jsx("h3", { className: "font-header text-2xl text-[var(--balatro-grey)] tracking-widest uppercase mb-2", children: "PREVIEW ONLY" }), _jsx("p", { className: "font-pixel text-[10px] text-white/30 max-w-[200px]", children: "This seed unlocks tomorrow. You can view the deck, but the strategy is hidden!" }), _jsx("div", { className: "mt-6 px-4 py-2 bg-black/60 rounded-xl border-2 border-white/10 shadow-[0_4px_0_rgba(0,0,0,0.5)]", children: _jsxs("span", { className: "font-header text-xl text-[var(--balatro-gold)] text-shadow-balatro", children: ["UNLOCKS DAY ", dayNumber] }) })] }));
+    }
+    return (_jsxs("div", { className: cn("balatro-panel flex flex-col cursor-pointer", "w-[315px] h-[340px] shrink-0", // ONE SIZE RULE
+        "animate-sway", // Preserve the cute breathing/sway
+        className), onClick: onClick, children: [_jsxs("div", { className: "flex items-start gap-3 pb-4 border-b border-white/10", children: [_jsx("div", { className: "animate-juice-pop", children: _jsx(DeckSprite, { deck: deckSlug, stake: stakeSlug, size: 64 }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-header text-3xl text-white leading-tight mb-1 truncate", children: seed }), _jsxs("p", { className: "font-pixel text-xs text-white/40 tracking-wider", children: [deckSlug, " \u2022 ", stakeSlug] })] }), loading ? (_jsx(Loader2, { className: "animate-spin text-[var(--balatro-gold)] shrink-0", size: 28 })) : (_jsx(Sparkles, { className: "text-[var(--balatro-gold)] shrink-0", size: 28 }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-3 py-6", children: [_jsxs("div", { className: "bg-black/40 rounded-xl p-5 border border-white/5 flex flex-col items-center justify-center", children: [_jsx("span", { className: "block text-[11px] font-pixel text-white/30 mb-2", children: "PRIMARY MATCH" }), _jsx("div", { className: "font-header text-xl text-[var(--balatro-blue)] leading-tight text-center", children: result?.matches?.[0]?.item?.name || result?.matches?.[0]?.name || "N/A" })] }), _jsxs("div", { className: "bg-black/40 rounded-xl p-5 border border-white/5 flex flex-col items-center justify-center", children: [_jsx("span", { className: "block text-[11px] font-pixel text-white/30 mb-2", children: "SIM SCORE" }), _jsx("div", { className: "font-header text-xl text-[var(--balatro-green)] leading-tight text-center", children: result?.score?.toLocaleString() || "0" })] })] }), _jsx("div", { className: "mt-auto flex items-center justify-center pt-3 border-t border-white/5", children: _jsx("span", { className: "font-header text-lg text-[var(--balatro-gold)] group-hover:text-white transition-colors text-shadow-balatro", children: "CLICK TO VIEW STRATEGY" }) })] }));
+}

package/dist/ui/ide/DeckSprite.d.ts

@@ -0,0 +1 @@
+export { DeckSprite, DECK_SPRITE_POS as DECK_MAP, STAKE_SPRITE_POS as STAKE_MAP, type DeckSpriteProps, } from "../../components/DeckSprite.js";

package/dist/ui/ide/DeckSprite.js

@@ -0,0 +1,2 @@
+"use client";
+export { DeckSprite, DECK_SPRITE_POS as DECK_MAP, STAKE_SPRITE_POS as STAKE_MAP, } from "../../components/DeckSprite.js";

package/dist/ui/ide/JamlBuilder.d.ts

@@ -0,0 +1 @@
+export default function JamlBuilder(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/ide/JamlBuilder.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { useJamlFilter } from '../../lib/hooks/useJamlFilter';
+import JamlEditor from './JamlEditor';
+import { Loader2, Search, Copy, RotateCcw, Sparkles } from 'lucide-react';
+import { AgnosticSeedCard } from './AgnosticSeedCard';
+import { WasmStatus } from './WasmStatus';
+export default function JamlBuilder() {
+    const { filter, jamlText, setFromJaml, updateFilter, addClause, editClause, deleteClause, editingClause, setEditingClause } = useJamlFilter();
+    const [isSearching, setIsSearching] = useState(false);
+    const [searchResults, setSearchResults] = useState([]);
+    const [searchError, setSearchError] = useState(null);
+    const [seedsProcessed, setSeedsProcessed] = useState(0);
+    const stopRef = useRef(false);
+    const searchCleanupRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (searchCleanupRef.current)
+                searchCleanupRef.current();
+            handleStop();
+        };
+    }, []);
+    const pollRef = useRef(null);
+    const workerRef = useRef(null);
+    const handleSearch = async () => {
+        // Stop any existing search
+        if (isSearching) {
+            handleStop();
+        }
+        setIsSearching(true);
+        setSearchError(null);
+        setSearchResults([]);
+        setSeedsProcessed(0);
+        stopRef.current = false;
+        try {
+            // Import worker using Vite's ?worker syntax
+            const Worker = (await import('../../hooks/searchWorker?worker')).default;
+            const worker = new Worker();
+            workerRef.current = worker;
+            worker.onmessage = (e) => {
+                const event = e.data;
+                if (event.type === 'result') {
+                    setSearchResults(prev => {
+                        // Prevent duplicates
+                        if (prev.some(r => r.seed === event.seed))
+                            return prev;
+                        return [...prev, {
+                                seed: event.seed,
+                                score: event.score,
+                                tallies: event.tallyColumns || []
+                            }];
+                    });
+                }
+                else if (event.type === 'progress') {
+                    setSeedsProcessed(Number(event.searched) || 0);
+                }
+                else if (event.type === 'complete') {
+                    setIsSearching(false);
+                    worker.terminate();
+                    workerRef.current = null;
+                }
+                else if (event.type === 'error') {
+                    setSearchError(event.message || 'Unknown error');
+                    setIsSearching(false);
+                    worker.terminate();
+                    workerRef.current = null;
+                }
+                else if (event.type === 'cancelled') {
+                    worker.terminate();
+                    workerRef.current = null;
+                }
+            };
+            worker.postMessage({
+                type: 'start',
+                mode: 'random',
+                jaml: jamlText,
+                count: 1000 // A default random count, adjust as needed
+            });
+        }
+        catch (e) {
+            console.error("Local search error:", e);
+            setSearchError(e.message || 'Local search failed');
+            setIsSearching(false);
+        }
+    };
+    const handleStop = async () => {
+        stopRef.current = true;
+        setIsSearching(false);
+        if (workerRef.current) {
+            workerRef.current.postMessage({ type: 'stop' });
+            // The worker will reply with 'cancelled' and terminate itself
+        }
+        if (searchCleanupRef.current) {
+            searchCleanupRef.current();
+            searchCleanupRef.current = null;
+        }
+    };
+    const handleCopyJaml = () => {
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+            navigator.clipboard.writeText(jamlText).catch(err => {
+                console.error('Failed to copy text: ', err);
+            });
+        }
+    };
+    const handleResetJaml = () => {
+        if (confirm("Reset editor to default JAML?")) {
+            setFromJaml(""); // useJamlFilter handles the default
+        }
+    };
+    return (_jsxs("div", { className: "w-full max-w-[1400px] mx-auto p-4 flex-1 overflow-hidden flex flex-col gap-4 bg-[var(--balatro-black)]/40", children: [_jsxs("div", { className: "flex flex-col lg:grid lg:grid-cols-[1fr_400px] gap-6 h-full overflow-hidden", children: [_jsxs("div", { className: "flex flex-col gap-6 overflow-hidden min-h-0", children: [_jsx("div", { className: "balatro-panel border-[var(--balatro-grey)] bg-black/40 py-4", children: _jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("div", { className: "flex gap-4 items-center", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-white text-xl font-header mb-1 uppercase tracking-widest leading-none", children: "JAML IDE" }), _jsx("p", { className: "text-white/60 font-pixel text-[10px] uppercase tracking-wide", children: "Ritual Factory v2.0" })] }), _jsx("div", { className: "h-8 w-px bg-white/10 mx-2" }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { onClick: handleCopyJaml, className: "p-2 hover:bg-white/5 rounded text-white/30 hover:text-white/80 transition-colors", title: "Copy JAML", children: _jsx(Copy, { size: 16 }) }), _jsx("button", { onClick: handleResetJaml, className: "p-2 hover:bg-white/5 rounded text-white/30 hover:text-white/80 transition-colors", title: "Reset Editor", children: _jsx(RotateCcw, { size: 16 }) })] })] }), _jsxs("div", { className: "flex gap-2 items-center", children: [isSearching && (_jsxs("div", { className: "flex items-center gap-2 mr-2 px-3 py-1 bg-black/40 rounded border border-white/5 font-pixel text-[10px] text-white/50", children: [_jsx(Loader2, { size: 12, className: "animate-spin text-[var(--balatro-gold)]" }), _jsx("span", { children: "SEARCHING..." })] })), _jsxs("button", { onClick: handleSearch, disabled: isSearching, className: "balatro-button balatro-button-gold !py-2 !px-4 !text-sm flex items-center gap-2", children: [isSearching ? _jsx(Loader2, { size: 14, className: "animate-spin" }) : _jsx(Search, { size: 14 }), "RUN SEARCH"] }), isSearching && (_jsx("button", { onClick: handleStop, className: "balatro-button balatro-button-red !py-2 !px-4 !text-sm", children: "STOP" }))] })] }) }), _jsx("div", { className: "flex-1 min-h-0 bg-black/20 rounded-2xl border border-white/5 overflow-hidden shadow-inner flex flex-col", children: _jsx(JamlEditor, { initialJaml: jamlText, onJamlChange: (val) => setFromJaml(val), className: "flex-1" }) })] }), _jsx("div", { className: "flex flex-col gap-6 overflow-hidden pb-10", children: _jsxs("div", { className: "h-full balatro-panel border-[var(--balatro-gold)] overflow-hidden flex flex-col", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("h3", { className: "text-[var(--balatro-gold)] text-xl font-header drop-shadow-md uppercase", children: ["Results ", searchResults.length > 0 && `(${searchResults.length})`] }), isSearching && (_jsxs("div", { className: "flex items-center gap-2 font-pixel text-[10px] text-[var(--balatro-blue)] animate-pulse", children: [_jsx(Sparkles, { size: 12, className: "animate-spin" }), _jsx("span", { children: seedsProcessed })] }))] }), isSearching && _jsx(Loader2, { size: 16, className: "animate-spin text-[var(--balatro-blue)]" })] }), isSearching && (_jsx("div", { className: "w-full h-1 bg-black/40 rounded-full mb-4 overflow-hidden border border-white/5", children: _jsx("div", { className: "h-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 animate-gradient-x transition-all duration-300", style: { width: `${Math.min((searchResults.length / 50) * 100, 100)}%` } }) })), _jsx("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-1", children: searchResults.length > 0 ? (_jsx("div", { className: "grid grid-cols-1 gap-4", children: searchResults.map((result) => (_jsx(AgnosticSeedCard, { seed: result.seed, result: result, className: "!scale-95 !origin-top" }, result.seed))) })) : (_jsx("div", { className: "h-full flex flex-col items-center justify-center italic font-pixel text-sm border-2 border-dashed border-white/5 rounded-2xl p-4 text-center", children: searchError ? (_jsxs("div", { className: "text-[var(--balatro-red)] bg-red-950/20 p-4 rounded text-center", children: [_jsx("div", { className: "font-header text-lg mb-1", children: "SEARCH FAILED" }), _jsx("div", { className: "opacity-60", children: searchError })] })) : (_jsx("div", { className: "opacity-30 text-white/50", children: isSearching ? 'SEEKING...' : 'RESULTS WILL APPEAR HERE' })) })) })] }) })] }), _jsx(WasmStatus, {})] }));
+}

package/dist/ui/ide/JamlEditor.d.ts

@@ -0,0 +1,7 @@
+interface InteractiveJamlEditorProps {
+    initialJaml?: string;
+    onJamlChange?: (jamlYaml: string, parsed: unknown, isValid: boolean) => void;
+    className?: string;
+}
+export default function JamlEditor({ initialJaml, onJamlChange, className }: InteractiveJamlEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};