jaml-ui 0.21.3 → 0.21.4

package/dist/ui/ide/JamlEditor.js

@@ -0,0 +1,496 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import yaml from 'js-yaml';
+import { Plus, Minus, Check } from 'lucide-react';
+import { JamlCompletionService } from '../../lib/jaml/jamlCompletion';
+// Balatro Colors - High Contrast Theme
+const COLORS = {
+    white: '#FFFFFF',
+    black: '#000000',
+    red: '#ff5e5e', // Balatro Red
+    blue: '#4bb1ff', // Balatro Blue
+    green: '#46bc77', // Balatro Green
+    purple: '#9074ff', // Balatro Purple
+    orange: '#ff9d4d', // Balatro Orange
+    yellow: '#ffcf4d', // Balatro Yellow
+    gold: '#efb82d',
+    // Editor background
+    editorBg: '#0f1416',
+    editorBgAlt: '#1c2629',
+};
+const DEFAULT_JAML = `# My JAML Filter
+name: My Filter
+deck: Red
+stake: White
+
+must:
+  - joker: Blueprint
+    edition: Negative
+    antes: [1, 2, 3]
+
+should:
+  - soulJoker: Any
+    score: 5
+`;
+const METADATA_KEYS = ['name', 'author', 'description', 'deck', 'stake', 'label'];
+const REQUIRED_KEYS = ['joker', 'soulJoker', 'voucher', 'tarotCard', 'planetCard', 'spectralCard', 'standardCard', 'tag', 'boss', 'event'];
+// --- Sub-components ---
+function SuggestionList({ suggestions, selectedIndex, onSelect, onHover }) {
+    if (suggestions.length === 0) {
+        return (_jsx("div", { className: "p-2 text-xs text-white/40 italic", children: "No suggestions..." }));
+    }
+    return (_jsx("div", { className: "flex flex-col max-h-[200px] overflow-y-auto", onMouseDown: e => e.preventDefault(), children: suggestions.map((s, idx) => {
+            const isSelected = idx === selectedIndex;
+            return (_jsxs("div", { onClick: () => onSelect(s.text), onMouseEnter: () => onHover(idx), className: `
+              flex items-center justify-between px-3 py-1.5 cursor-pointer font-mono text-[13px] transition-colors
+              ${isSelected ? 'bg-[var(--balatro-gold)] text-black' : 'text-white hover:bg-white/10'}
+            `, children: [_jsx("span", { children: s.displayText }), isSelected && _jsx("span", { className: "opacity-50 text-[11px] ml-2", children: "\u21B5" })] }, `${s.text}-${idx}`));
+        }) }));
+}
+function AntesToggle({ values, onToggle, onStartEdit, color, darkColor }) {
+    const [expanded, setExpanded] = useState(false);
+    const maxAnte = 8;
+    const selectedAntes = new Set(values.map(v => parseInt(v, 10)).filter(n => !isNaN(n)));
+    const getDisplayText = () => {
+        if (selectedAntes.size === 0)
+            return 'tap to select';
+        const sorted = Array.from(selectedAntes).sort((a, b) => a - b);
+        if (sorted.length === 1)
+            return `Ante ${sorted[0]}`;
+        const min = sorted[0];
+        const max = sorted[sorted.length - 1];
+        const isConsecutive = sorted.every((v, i) => i === 0 || v === sorted[i - 1] + 1);
+        if (isConsecutive)
+            return `Antes ${min}-${max}`;
+        return `Antes ${sorted.join(', ')}`;
+    };
+    if (!expanded) {
+        return (_jsx("div", { onClick: () => setExpanded(true), className: "jaml-block", style: {
+                '--jaml-bg': selectedAntes.size > 0 ? `${color}20` : `${COLORS.red}15`,
+                '--jaml-border': `1px solid ${selectedAntes.size > 0 ? color : COLORS.red}`,
+                '--jaml-color': selectedAntes.size > 0 ? color : COLORS.red,
+                '--jaml-min-w': '100px',
+                '--jaml-shadow': selectedAntes.size > 0 ? `0 0 10px ${color}20` : 'none',
+            }, children: getDisplayText() }));
+    }
+    return (_jsxs("div", { className: "flex flex-row items-center", children: [Array.from({ length: maxAnte + 1 }, (_, i) => i).map((ante) => {
+                const isSelected = selectedAntes.has(ante);
+                const borderRadiusClass = ante === 0 ? 'jaml-ante-btn--first' : ante === maxAnte ? 'jaml-ante-btn--last' : 'jaml-ante-btn';
+                return (_jsx("div", { onClick: (e) => {
+                        e.stopPropagation();
+                        onToggle(ante.toString());
+                    }, className: `jaml-block ${borderRadiusClass}`, style: {
+                        '--jaml-min-w': '28px',
+                        '--jaml-bg': isSelected ? `${color}40` : 'transparent',
+                        '--jaml-border': `1px solid ${isSelected ? color : 'rgba(255,255,255,0.2)'}`,
+                        '--jaml-color': isSelected ? color : 'rgba(255,255,255,0.4)',
+                        borderRight: ante < maxAnte ? 'none' : undefined,
+                    }, children: ante }, ante));
+            }), _jsx("div", { onClick: () => setExpanded(false), className: "jaml-block jaml-antes-confirm", children: _jsx(Check, { size: 16, strokeWidth: 3 }) })] }));
+}
+// Custom Hook for Floating Position (Viewport-aware)
+function useFloatingPosition(targetRef, isOpen) {
+    const [coords, setCoords] = useState(null);
+    useEffect(() => {
+        if (!isOpen || !targetRef.current) {
+            setCoords(null);
+            return;
+        }
+        const updatePosition = () => {
+            if (!targetRef.current)
+                return;
+            const rect = targetRef.current.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - rect.bottom;
+            const spaceAbove = rect.top;
+            // Prefer bottom, unless too close to edge
+            const showBelow = spaceBelow > 220 || spaceBelow > spaceAbove;
+            setCoords({
+                left: rect.left,
+                top: showBelow ? rect.bottom + 4 : rect.top - 4,
+                position: showBelow ? 'bottom' : 'top'
+            });
+        };
+        updatePosition();
+        // Update on scroll/resize to keep pinned
+        window.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        return () => {
+            window.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [isOpen, targetRef]);
+    return coords;
+}
+// --- Main Editor Component ---
+export default function JamlEditor({ initialJaml, onJamlChange, className }) {
+    const [lines, setLines] = useState([]);
+    const [editingLineId, setEditingLineId] = useState(null);
+    const [editingPart, setEditingPart] = useState(null);
+    const [editingArrayIndex, setEditingArrayIndex] = useState(null);
+    const [focusedLineIndex, setFocusedLineIndex] = useState(0);
+    const editorRef = useRef(null);
+    // -- Parsing Logic --
+    const parseJamlToLines = useCallback((text) => {
+        const rawLines = text.split('\n');
+        let currentClauseType;
+        return rawLines.map((raw, index) => {
+            const indent = raw.search(/\S|$/);
+            const trimmed = raw.trim();
+            const isComment = trimmed.startsWith('#');
+            const isArrayItem = trimmed.startsWith('- ');
+            let key;
+            let value;
+            let isArrayValue = false;
+            let arrayValues;
+            if (!isComment && trimmed.includes(':')) {
+                const colonIndex = trimmed.indexOf(':');
+                const rawKey = trimmed.slice(isArrayItem ? 2 : 0, colonIndex).trim();
+                const rawValue = trimmed.slice(colonIndex + 1).trim();
+                key = rawKey;
+                value = rawValue || undefined;
+                if (value && value.startsWith('[') && value.endsWith(']')) {
+                    isArrayValue = true;
+                    const inner = value.slice(1, -1);
+                    arrayValues = inner.split(',').map(v => v.trim()).filter(v => v);
+                }
+            }
+            if (indent === 0 && !isArrayItem)
+                currentClauseType = undefined;
+            // Basic clause type tracking (heuristic)
+            if (isArrayItem && key && REQUIRED_KEYS.includes(key)) {
+                currentClauseType = key;
+            }
+            let validationState = 'complete';
+            let isInvalidValue = false;
+            if (key) {
+                if (METADATA_KEYS.includes(key))
+                    validationState = 'metadata';
+                else if (REQUIRED_KEYS.includes(key))
+                    validationState = value ? 'complete' : 'required-incomplete';
+                else if (!value && key !== 'must' && key !== 'should' && key !== 'mustNot')
+                    validationState = 'optional-incomplete';
+                if (value && value.startsWith('~') && value.endsWith('~')) {
+                    isInvalidValue = true;
+                    validationState = 'invalid';
+                }
+            }
+            return {
+                id: `line-${index}`,
+                raw, indent, key, value, isComment, isArrayItem, lineNumber: index,
+                clauseType: currentClauseType, validationState, isInvalidValue, isArrayValue, arrayValues
+            };
+        });
+    }, []);
+    const linesToJaml = useCallback((linesList) => linesList.map(l => l.raw).join('\n'), []);
+    useEffect(() => {
+        const text = initialJaml || DEFAULT_JAML;
+        // Prevent feedback loop: If the incoming text matches what we already have, don't re-parse/reset.
+        // This is crucial when onJamlChange -> parent -> initialJaml cycle exists.
+        if (lines.length > 0 && linesToJaml(lines) === text)
+            return;
+        setLines(parseJamlToLines(text));
+    }, [initialJaml, parseJamlToLines, lines, linesToJaml]);
+    const updateLineValue = useCallback((lineId, part, newValue) => {
+        const newLines = lines.map(line => {
+            if (line.id !== lineId)
+                return line;
+            const indent = ' '.repeat(line.indent);
+            const prefix = line.isArrayItem ? '- ' : '';
+            let newRaw = line.raw;
+            if (part === 'value' && line.key) {
+                newRaw = `${indent}${prefix}${line.key}: ${newValue}`;
+            }
+            else if (part === 'key') {
+                const valuePart = line.value ? `: ${line.value}` : ':';
+                newRaw = `${indent}${prefix}${newValue}${valuePart}`;
+            }
+            let isArrayValue = false;
+            let arrayValues;
+            if (newValue && newValue.startsWith('[') && newValue.endsWith(']')) {
+                isArrayValue = true;
+                arrayValues = newValue.slice(1, -1).split(',').map(v => v.trim()).filter(v => v);
+            }
+            return { ...line, raw: newRaw, [part]: newValue, isArrayValue, arrayValues };
+        });
+        setLines(newLines);
+        const txt = linesToJaml(newLines);
+        if (onJamlChange) {
+            try {
+                onJamlChange(txt, yaml.load(txt), true);
+            }
+            catch {
+                onJamlChange(txt, null, false);
+            }
+        }
+    }, [lines, linesToJaml, onJamlChange]);
+    const updateArrayItem = useCallback((lineId, arrayIndex, newValue) => {
+        const newLines = lines.map(line => {
+            if (line.id !== lineId || !line.arrayValues)
+                return line;
+            const newArrayValues = [...line.arrayValues];
+            newArrayValues[arrayIndex] = newValue;
+            const newArrayStr = `[${newArrayValues.join(', ')}]`;
+            const indent = ' '.repeat(line.indent);
+            const prefix = line.isArrayItem ? '- ' : '';
+            const newRaw = `${indent}${prefix}${line.key}: ${newArrayStr}`;
+            return { ...line, raw: newRaw, value: newArrayStr, arrayValues: newArrayValues };
+        });
+        setLines(newLines);
+        const txt = linesToJaml(newLines);
+        if (onJamlChange) {
+            try {
+                onJamlChange(txt, yaml.load(txt), true);
+            }
+            catch {
+                onJamlChange(txt, null, false);
+            }
+        }
+    }, [lines, linesToJaml, onJamlChange]);
+    const addArrayItem = useCallback((lineId, newValue) => {
+        const newLines = lines.map(line => {
+            if (line.id !== lineId)
+                return line;
+            const newArrayValues = [...(line.arrayValues || []), newValue];
+            const newArrayStr = `[${newArrayValues.join(', ')}]`;
+            const indent = ' '.repeat(line.indent);
+            const prefix = line.isArrayItem ? '- ' : '';
+            const newRaw = `${indent}${prefix}${line.key}: ${newArrayStr}`;
+            return { ...line, raw: newRaw, value: newArrayStr, arrayValues: newArrayValues, isArrayValue: true };
+        });
+        setLines(newLines);
+        const txt = linesToJaml(newLines);
+        if (onJamlChange) {
+            try {
+                onJamlChange(txt, yaml.load(txt), true);
+            }
+            catch {
+                onJamlChange(txt, null, false);
+            }
+        }
+    }, [lines, linesToJaml, onJamlChange]);
+    const removeArrayItem = useCallback((lineId, arrayIndex) => {
+        const newLines = lines.map(line => {
+            if (line.id !== lineId || !line.arrayValues)
+                return line;
+            const newArrayValues = line.arrayValues.filter((_, i) => i !== arrayIndex);
+            const newArrayStr = newArrayValues.length > 0 ? `[${newArrayValues.join(', ')}]` : '';
+            const indent = ' '.repeat(line.indent);
+            const prefix = line.isArrayItem ? '- ' : '';
+            const newRaw = `${indent}${prefix}${line.key}: ${newArrayStr}`;
+            return { ...line, raw: newRaw, value: newArrayStr || undefined, arrayValues: newArrayValues.length > 0 ? newArrayValues : undefined, isArrayValue: newArrayValues.length > 0 };
+        });
+        setLines(newLines);
+        const txt = linesToJaml(newLines);
+        if (onJamlChange) {
+            try {
+                onJamlChange(txt, yaml.load(txt), true);
+            }
+            catch {
+                onJamlChange(txt, null, false);
+            }
+        }
+    }, [lines, linesToJaml, onJamlChange]);
+    const addLineAfter = useCallback((afterLineId, content) => {
+        const index = lines.findIndex(l => l.id === afterLineId);
+        if (index === -1)
+            return;
+        const currentLine = lines[index];
+        const newLineRaw = ' '.repeat(currentLine.indent) + content;
+        const newParsed = parseJamlToLines(newLineRaw)[0];
+        const newLine = { ...newParsed, id: `line-new-${Date.now()}`, clauseType: currentLine.clauseType };
+        const newLines = [...lines];
+        newLines.splice(index + 1, 0, newLine);
+        const renumbered = newLines.map((l, i) => ({ ...l, lineNumber: i, id: `line-${i}` })); // simplified ID update
+        setLines(renumbered);
+        const txt = linesToJaml(renumbered);
+        if (onJamlChange) {
+            try {
+                onJamlChange(txt, yaml.load(txt), true);
+            }
+            catch {
+                onJamlChange(txt, null, false);
+            }
+        }
+    }, [lines, linesToJaml, onJamlChange, parseJamlToLines]);
+    const deleteLine = useCallback((lineId) => {
+        const filtered = lines.filter(l => l.id !== lineId);
+        const renumbered = filtered.map((l, i) => ({ ...l, lineNumber: i, id: `line-${i}` }));
+        setLines(renumbered);
+        const txt = linesToJaml(renumbered);
+        if (onJamlChange) {
+            try {
+                onJamlChange(txt, yaml.load(txt), true);
+            }
+            catch {
+                onJamlChange(txt, null, false);
+            }
+        }
+    }, [lines, linesToJaml, onJamlChange]);
+    // -- Render --
+    const maxKeyLengthByIndent = useMemo(() => {
+        const byIndent = {};
+        for (const line of lines) {
+            if (line.key) {
+                // Cap the alignment width at 12 characters to prevent huge gaps
+                byIndent[line.indent] = Math.min(Math.max(byIndent[line.indent] || 0, line.key.length), 12);
+            }
+        }
+        return byIndent;
+    }, [lines]);
+    return (_jsxs("div", { ref: editorRef, className: `flex flex-col bg-[#0f1416] text-white font-mono text-[13px] leading-[1.8] outline-none rounded-md p-4 overflow-auto min-h-[500px] border border-white/5 ${className}`, tabIndex: 0, children: [_jsx("div", { className: "flex flex-col gap-0.5", children: lines.map((line, index) => (_jsx(JamlLine, { line: line, keyWidth: maxKeyLengthByIndent[line.indent] || 8, isEditing: editingLineId === line.id, editingPart: editingLineId === line.id ? editingPart : null, editingArrayIndex: editingLineId === line.id ? editingArrayIndex : null, onStartEdit: (part, idx) => {
+                        setEditingLineId(line.id);
+                        setEditingPart(part);
+                        setEditingArrayIndex(idx ?? null);
+                        setFocusedLineIndex(index);
+                    }, onEndEdit: () => {
+                        setEditingLineId(null);
+                        setEditingPart(null);
+                        setEditingArrayIndex(null);
+                    }, onChange: (part, val) => updateLineValue(line.id, part, val), onArrayItemChange: (idx, val) => updateArrayItem(line.id, idx, val), onArrayItemAdd: (val) => addArrayItem(line.id, val), onArrayItemRemove: (idx) => removeArrayItem(line.id, idx), onDelete: () => deleteLine(line.id), onAddLine: (content) => addLineAfter(line.id, content) }, line.id))) }), _jsxs("div", { className: "mt-4 p-2 bg-black/40 rounded border border-white/5 flex flex-wrap gap-4 text-[12px] text-white/50 font-mono", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "jaml-legend-dot jaml-legend-dot--red" }), " required"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "jaml-legend-dot jaml-legend-dot--blue" }), " optional"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "jaml-legend-dot jaml-legend-dot--green" }), " complete"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "jaml-legend-dot jaml-legend-dot--purple" }), " metadata"] }), _jsx("span", { className: "ml-auto opacity-40", children: "Click to edit \u2022 Tab to navigate" })] })] }));
+}
+function JamlLine({ line, keyWidth, isEditing, editingPart, editingArrayIndex, onStartEdit, onEndEdit, onChange, onArrayItemChange, onArrayItemAdd, onArrayItemRemove, onDelete, onAddLine }) {
+    const [, setHovered] = useState(false);
+    const [suggestions, setSuggestions] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [localValue, setLocalValue] = useState('');
+    const inputRef = useRef(null);
+    const targetRef = useRef(null);
+    const floatingCoords = useFloatingPosition(targetRef, isEditing && suggestions.length > 0);
+    // Colors
+    const getBaseColor = () => {
+        switch (line.validationState) {
+            case 'required-incomplete': return COLORS.red;
+            case 'optional-incomplete': return COLORS.blue;
+            case 'complete': return COLORS.green;
+            case 'invalid': return COLORS.red;
+            case 'metadata': return COLORS.purple;
+            default: return '#888';
+        }
+    };
+    const getBrightColor = () => {
+        switch (line.validationState) {
+            case 'required-incomplete': return COLORS.red;
+            case 'optional-incomplete': return COLORS.blue;
+            case 'complete': return COLORS.green;
+            case 'invalid': return COLORS.red;
+            case 'metadata': return COLORS.purple;
+            default: return '#FFF';
+        }
+    };
+    // Suggestions Logic
+    useEffect(() => {
+        if (isEditing && editingPart) {
+            let textContext = line.raw;
+            if (editingPart === 'value' && line.key) {
+                textContext = `${line.key}: ${localValue}`;
+            }
+            else if (editingPart === 'key') {
+                textContext = localValue;
+            }
+            const sugs = JamlCompletionService.getCompletions(textContext);
+            setSuggestions(sugs.slice(0, 10));
+            setSelectedIndex(0);
+        }
+    }, [isEditing, editingPart, localValue, line.raw, line.key]);
+    // Input Focus
+    useEffect(() => {
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+            if (editingPart === 'key')
+                setLocalValue(line.key || '');
+            else if (editingPart === 'value')
+                setLocalValue((line.value || '').replace(/^~|~$/g, ''));
+            else if (editingPart === 'arrayItem' && editingArrayIndex !== null)
+                setLocalValue(line.arrayValues?.[editingArrayIndex] || '');
+            else
+                setLocalValue('');
+        }
+    }, [isEditing, editingPart, editingArrayIndex, line]);
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const finalVal = (suggestions.length > 0 && selectedIndex >= 0) ? suggestions[selectedIndex].text : localValue;
+            if (editingPart === 'key')
+                onChange('key', finalVal);
+            else if (editingPart === 'value')
+                onChange('value', finalVal);
+            else if (editingPart === 'arrayItem') {
+                if (editingArrayIndex >= (line.arrayValues?.length || 0))
+                    onArrayItemAdd(finalVal);
+                else
+                    onArrayItemChange(editingArrayIndex, finalVal);
+            }
+            onEndEdit();
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setSelectedIndex(Math.min(selectedIndex + 1, suggestions.length - 1));
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setSelectedIndex(Math.max(selectedIndex - 1, 0));
+        }
+        else if (e.key === 'Escape') {
+            onEndEdit();
+        }
+        else if (e.key === 'Backspace' && localValue === '' && editingPart === 'arrayItem') {
+            onArrayItemRemove(editingArrayIndex);
+            onEndEdit();
+        }
+    };
+    if (line.isComment) {
+        return _jsx("div", { className: "pl-8 text-stone-400 italic text-xs py-0.5", children: line.raw });
+    }
+    if (!line.key && !line.raw.trim()) {
+        return _jsx("div", { className: "h-5" });
+    }
+    if ((line.key === 'must' || line.key === 'should' || line.key === 'mustNot') && !line.value) {
+        const color = line.key === 'must' ? COLORS.red : COLORS.blue;
+        return _jsx("div", { className: "jaml-clause-header pl-8 py-1 text-[16px] border-b border-white/10 mt-4 mb-2 uppercase tracking-widest", style: { '--jaml-color': color }, children: line.raw });
+    }
+    const indentSpaces = ' '.repeat(line.indent);
+    const prefix = line.isArrayItem ? '- ' : '';
+    // Helper: popover CSS vars from floating coords
+    const popoverVars = floatingCoords ? {
+        '--popover-top': `${floatingCoords.top}px`,
+        '--popover-left': `${floatingCoords.left}px`,
+        '--popover-transform': floatingCoords.position === 'top' ? 'translateY(-100%)' : 'none',
+    } : {};
+    return (_jsxs("div", { className: "relative flex items-center py-0.5 group", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [_jsx("div", { className: "w-6 h-full flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity", onClick: (e) => { e.stopPropagation(); onDelete(); }, children: _jsx(Minus, { size: 12, className: "text-orange-500 hover:bg-orange-100 rounded" }) }), _jsxs("span", { className: "whitespace-pre text-stone-400", children: [indentSpaces, prefix] }), line.key && (_jsxs("div", { className: "relative", children: [_jsx("div", { ref: editingPart === 'key' ? targetRef : null, onClick: (e) => { e.stopPropagation(); onStartEdit('key'); }, className: "jaml-block jaml-block--start", style: {
+                            '--jaml-min-w': `${keyWidth}ch`,
+                            '--jaml-color': (isEditing && editingPart === 'key') ? getBrightColor() : getBaseColor(),
+                            '--jaml-bg': (isEditing && editingPart === 'key') ? `${getBrightColor()}15` : 'transparent',
+                        }, children: isEditing && editingPart === 'key' ? (_jsx("input", { ref: inputRef, title: "Edit key", value: localValue, onChange: e => setLocalValue(e.target.value), onKeyDown: handleKeyDown, onBlur: () => setTimeout(onEndEdit, 200), className: "jaml-inline-input", style: { '--jaml-color': getBrightColor() } })) : line.key }), isEditing && editingPart === 'key' && suggestions.length > 0 && floatingCoords && createPortal(_jsx("div", { className: "jaml-suggestion-popover", style: popoverVars, children: _jsx(SuggestionList, { suggestions: suggestions, selectedIndex: selectedIndex, onHover: setSelectedIndex, onSelect: (val) => {
+                                onChange('key', val);
+                                onEndEdit();
+                            } }) }), document.body)] })), line.key && _jsx("span", { className: "text-stone-400 mr-1", children: ":" }), line.key && (line.isArrayValue && line.arrayValues ? (line.key === 'antes' ? (_jsx(AntesToggle, { values: line.arrayValues, onToggle: (val) => {
+                    const idx = line.arrayValues.indexOf(val);
+                    if (idx >= 0)
+                        onArrayItemRemove(idx);
+                    else
+                        onArrayItemAdd(val);
+                }, onStartEdit: () => onStartEdit('arrayItem', 0), color: getBrightColor(), darkColor: getBaseColor() })) : (_jsxs("div", { className: "flex gap-0.5 items-center", children: [line.arrayValues.map((val, idx) => (_jsx("div", { onClick: (e) => { e.stopPropagation(); onStartEdit('arrayItem', idx); }, className: "jaml-block", style: {
+                            '--jaml-min-w': '24px',
+                            '--jaml-bg': `${getBaseColor()}15`,
+                            '--jaml-border': `1px solid ${getBaseColor()}40`,
+                            '--jaml-color': getBaseColor(),
+                        }, children: isEditing && editingPart === 'arrayItem' && editingArrayIndex === idx ? (_jsx("input", { ref: inputRef, title: "Edit array item", value: localValue, onChange: e => setLocalValue(e.target.value), onKeyDown: handleKeyDown, onBlur: () => setTimeout(onEndEdit, 200), className: "bg-transparent w-[3ch] text-center outline-none" })) : val }, idx))), _jsx("div", { onClick: (e) => { e.stopPropagation(); onStartEdit('arrayItem', line.arrayValues.length); }, className: "jaml-block", style: {
+                            '--jaml-min-w': '24px',
+                            '--jaml-bg': `${COLORS.green}15`,
+                            '--jaml-border': `1px solid ${COLORS.green}40`,
+                            '--jaml-color': COLORS.green,
+                        }, children: _jsx(Plus, { size: 12 }) })] }))) : (_jsxs("div", { className: "relative", children: [_jsx("div", { ref: editingPart === 'value' ? targetRef : null, onClick: (e) => { e.stopPropagation(); onStartEdit('value'); }, className: "jaml-block", style: {
+                            '--jaml-min-w': line.value ? undefined : '60px',
+                            '--jaml-color': line.isInvalidValue ? COLORS.red : (line.value ? getBaseColor() : COLORS.red),
+                            '--jaml-bg': line.isInvalidValue ? `${COLORS.red}15` : (line.value ? `${getBaseColor()}10` : `${COLORS.red}08`),
+                            '--jaml-border': `1px solid ${line.isInvalidValue ? `${COLORS.red}60` : (line.value ? `${getBaseColor()}40` : `${COLORS.red}40`)}`,
+                            '--jaml-text-decoration': line.isInvalidValue ? 'line-through' : 'none',
+                        }, children: isEditing && editingPart === 'value' ? (_jsx("input", { ref: inputRef, title: "Edit value", value: localValue, onChange: e => setLocalValue(e.target.value), onKeyDown: handleKeyDown, onBlur: () => setTimeout(onEndEdit, 200), className: "jaml-inline-input jaml-inline-input--sized", style: {
+                                '--jaml-color': getBaseColor(),
+                                '--jaml-input-w': `${Math.max(localValue.length, 4)}ch`,
+                            } })) : (line.isInvalidValue ? line.value?.replace(/~/g, '') : (line.value || '???')) }), isEditing && editingPart === 'value' && suggestions.length > 0 && floatingCoords && createPortal(_jsx("div", { className: "jaml-suggestion-popover", style: popoverVars, children: _jsx(SuggestionList, { suggestions: suggestions, selectedIndex: selectedIndex, onHover: setSelectedIndex, onSelect: (val) => {
+                                onChange('value', val);
+                                onEndEdit();
+                            } }) }), document.body)] })))] }));
+}

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

@@ -0,0 +1,8 @@
+interface JamlEditorMonacoProps {
+    value: string;
+    onChange: (value: string | undefined) => void;
+    diagnostics?: any;
+    className?: string;
+}
+export default function JamlEditorMonaco({ value, onChange, diagnostics, className }: JamlEditorMonacoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/ide/JamlEditorMonaco.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import Editor from "@monaco-editor/react";
+import { Copy, Check, AlertCircle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+export default function JamlEditorMonaco({ value, onChange, diagnostics, className }) {
+    const editorRef = useRef(null);
+    const handleEditorWillMount = (monaco) => {
+        // Define Balatro Theme
+        monaco.editor.defineTheme('balatro-dark', {
+            base: 'vs-dark',
+            inherit: true,
+            rules: [
+                { token: 'comment', foreground: '5f7377', fontStyle: 'italic' },
+                { token: 'keyword', foreground: 'fe5f55' }, // Balatro Red
+                { token: 'string', foreground: 'eac058' }, // Balatro Gold
+                { token: 'number', foreground: '009dff' }, // Balatro Blue
+                { token: 'type', foreground: '4bc292' }, // Balatro Green
+            ],
+            colors: {
+                'editor.background': '#1e2b2d', // Authentic G.C.BLACK variant
+                'editor.foreground': '#ffffff',
+                'editorLineNumber.foreground': '#4f6367',
+                'editorLineNumber.activeForeground': '#eac058',
+                'editor.selectionBackground': '#ffffff20',
+                'editor.inactiveSelectionBackground': '#ffffff10',
+                'editor.lineHighlightBackground': '#00000020',
+                'editorCursor.foreground': '#eac058',
+                // Widget/Popover Colors (Fixes User Issue: "White text on white background")
+                'editorWidget.background': '#1e2b2d', // Balatro Dark
+                'editorWidget.border': '#ffffff20',
+                'editorWidget.foreground': '#ffffff',
+                // Suggestion List Colors
+                'list.activeSelectionBackground': '#d8b97d', // Balatro Gold Selection
+                'list.activeSelectionForeground': '#1e2b2d', // Dark text on gold
+                'list.hoverBackground': '#2a3b3d',
+                'list.hoverForeground': '#ffffff',
+                'list.focusBackground': '#d8b97d',
+                'list.focusForeground': '#1e2b2d',
+            }
+        });
+    };
+    const handleEditorDidMount = (editor, monaco) => {
+        editorRef.current = editor;
+        // Focus editor
+        editor.focus();
+        // Optional: Add custom JAML commands/actions here
+    };
+    const handleFormat = () => {
+        if (editorRef.current) {
+            editorRef.current.getAction('editor.action.formatDocument').run();
+        }
+    };
+    const handleCopy = () => {
+        navigator.clipboard.writeText(value);
+    };
+    const hasErrors = diagnostics?.errors?.length > 0;
+    return (_jsxs("div", { className: cn("flex flex-col h-full bg-[#1e2b2d] border border-white/10 rounded-xl overflow-hidden shadow-2xl group", className), children: [_jsxs("div", { className: "h-10 bg-black/40 border-b border-white/5 flex items-center justify-between px-4 shrink-0 overflow-hidden", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("span", { className: "font-header text-xs text-[var(--balatro-red)] tracking-widest uppercase flex items-center gap-2", children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--balatro-red)] animate-pulse" }), "JAML EDITOR"] }), _jsx("div", { className: "h-4 w-px bg-white/10" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("button", { onClick: handleFormat, className: "text-[9px] font-pixel text-white/30 hover:text-white/80 uppercase tracking-tighter transition-colors", children: "Format" }), _jsxs("button", { onClick: handleCopy, className: "text-[9px] font-pixel text-white/30 hover:text-white/80 uppercase tracking-tighter transition-colors flex items-center gap-1", children: [_jsx(Copy, { size: 10 }), " Copy"] })] })] }), _jsx("div", { className: "flex items-center gap-2", children: hasErrors ? (_jsxs("div", { className: "flex items-center gap-1.5 px-2 py-0.5 bg-red-500/10 border border-red-500/20 rounded text-[9px] font-pixel text-red-400", children: [_jsx(AlertCircle, { size: 10 }), _jsxs("span", { children: [diagnostics.errors.length, " SYNTAX ERROR(S)"] })] })) : (_jsxs("div", { className: "flex items-center gap-1.5 px-2 py-0.5 bg-green-500/10 border border-green-500/20 rounded text-[9px] font-pixel text-green-400 opacity-60", children: [_jsx(Check, { size: 10 }), _jsx("span", { children: "SYNTAX VALID" })] })) })] }), _jsx("div", { className: "flex-1 min-h-0 relative", children: _jsx(Editor, { height: "100%", defaultLanguage: "yaml", value: value, theme: "balatro-dark", onChange: onChange, onMount: handleEditorDidMount, beforeMount: handleEditorWillMount, options: {
+                        minimap: { enabled: false },
+                        scrollBeyondLastLine: false,
+                        fontSize: 14,
+                        fontFamily: 'var(--font-mono)',
+                        lineNumbers: 'on',
+                        roundedSelection: true,
+                        readOnly: false,
+                        cursorStyle: 'line',
+                        automaticLayout: true,
+                        padding: { top: 16, bottom: 16 },
+                        wordWrap: 'on',
+                        formatOnPaste: true,
+                        formatOnType: true,
+                        suggest: {
+                            showKeywords: true,
+                            showSnippets: true,
+                        }
+                    } }) }), _jsxs("div", { className: "h-6 bg-black/20 border-t border-white/5 flex items-center px-4 justify-between shrink-0", children: [_jsxs("div", { className: "text-[8px] font-pixel text-white/20 uppercase", children: ["Lines: ", value.split('\n').length, " | Encoding: UTF-8"] }), _jsx("div", { className: "text-[8px] font-pixel text-white/20 uppercase tracking-widest", children: "Motely JAML Engine v1.0.4" })] })] }));
+}

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

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

package/dist/ui/ide/WasmStatus.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import motely, { MotelyWasm } from 'motely-wasm';
+import { Cpu, Loader2, CheckCircle2, XCircle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+export function WasmStatus() {
+    const [status, setStatus] = useState('idle');
+    const [version, setVersion] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        const load = async () => {
+            setStatus('loading');
+            try {
+                await motely.boot();
+                if (cancelled)
+                    return;
+                setVersion(MotelyWasm.getVersion());
+                setStatus('ready');
+            }
+            catch (err) {
+                console.error("WASM Status Error:", err);
+                if (cancelled)
+                    return;
+                setStatus('error');
+                setError(err.message || String(err));
+            }
+        };
+        load();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const displayVersion = version;
+    return (_jsxs("div", { className: cn("fixed bottom-10 right-10 z-[100] flex items-center gap-3 px-4 py-2 rounded-full border shadow-2xl backdrop-blur-md transition-all", status === 'ready' ? "bg-green-500/10 border-green-500/50 text-green-400" :
+            status === 'error' ? "bg-red-500/10 border-red-500/50 text-red-400" :
+                "bg-blue-500/10 border-blue-500/50 text-blue-400"), children: [status === 'loading' ? _jsx(Loader2, { size: 16, className: "animate-spin" }) :
+                status === 'ready' ? _jsx(CheckCircle2, { size: 16 }) :
+                    status === 'error' ? _jsx(XCircle, { size: 16 }) :
+                        _jsx(Cpu, { size: 16 }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("span", { className: "text-[12px] uppercase tracking-widest leading-tight", children: ["WASM: ", status.toUpperCase()] }), displayVersion && (_jsxs("span", { className: "text-[11px] opacity-70 leading-tight", children: ["v", displayVersion] })), error && _jsx("span", { className: "text-[11px] opacity-70 truncate max-w-[200px] leading-tight", children: error })] })] }));
+}