jaml-ui 0.24.20 → 0.25.2

package/dist/ui/ide/JamlEditor.js

@@ -1,486 +0,0 @@
-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, color }) {
-    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 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'), []);
-    const [prevInitialJaml, setPrevInitialJaml] = useState(initialJaml);
-    if (initialJaml !== prevInitialJaml) {
-        setPrevInitialJaml(initialJaml);
-        const text = initialJaml || DEFAULT_JAML;
-        if (lines.length === 0 || linesToJaml(lines) !== text) {
-            setLines(parseJamlToLines(text));
-        }
-    }
-    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 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) => (_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);
-                    }, 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) }, 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 }) {
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [localValue, setLocalValue] = useState('');
-    const [prevContext, setPrevContext] = useState('');
-    const [prevEditState, setPrevEditState] = useState({ isEditing, editingPart, editingArrayIndex, lineRaw: line.raw });
-    if (isEditing !== prevEditState.isEditing ||
-        editingPart !== prevEditState.editingPart ||
-        editingArrayIndex !== prevEditState.editingArrayIndex ||
-        line.raw !== prevEditState.lineRaw) {
-        setPrevEditState({ isEditing, editingPart, editingArrayIndex, lineRaw: line.raw });
-        if (isEditing) {
-            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('');
-        }
-    }
-    const currentContext = useMemo(() => {
-        if (!isEditing || !editingPart)
-            return '';
-        if (editingPart === 'value' && line.key) {
-            return `${line.key}: ${localValue}`;
-        }
-        else if (editingPart === 'key') {
-            return localValue;
-        }
-        return line.raw;
-    }, [isEditing, editingPart, localValue, line.raw, line.key]);
-    const suggestions = useMemo(() => {
-        if (!currentContext)
-            return [];
-        return JamlCompletionService.getCompletions(currentContext).slice(0, 10);
-    }, [currentContext]);
-    if (currentContext !== prevContext) {
-        setPrevContext(currentContext);
-        setSelectedIndex(0);
-    }
-    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 derived above
-    // Input Focus
-    useEffect(() => {
-        if (isEditing && inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [isEditing]);
-    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", 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);
-                }, color: getBrightColor() })) : (_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

@@ -1,8 +0,0 @@
-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

@@ -1,78 +0,0 @@
-"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

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

package/dist/ui/ide/WasmStatus.js

@@ -1,42 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import motely, { Motely } 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(Motely.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 })] })] }));
-}

package/dist/ui/jimboApp.js

@@ -1,15 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-/** Standard mobile-first app shell. 320px locked, or fluid for MCP/desktop. */
-export function JimboApp({ children, fluid, className = '', ...props }) {
-    const classes = `j-app${fluid ? ' j-app--fluid' : ''} ${className}`.trim();
-    return (_jsx("div", { className: classes, ...props, children: children }));
-}
-/** Scrollable content area inside JimboApp. Hidden scrollbar, snap-friendly. */
-export function JimboAppScroll({ children, className = '', ...props }) {
-    return (_jsx("div", { className: `j-app__scroll ${className}`, ...props, children: children }));
-}
-/** Sticky bottom action area inside JimboApp. Thumb zone. */
-export function JimboAppFooter({ children, className = '', ...props }) {
-    return (_jsx("div", { className: `j-app__footer ${className}`, ...props, children: children }));
-}