jaml-ui 0.24.16 → 0.24.18

package/dist/r3f/Card3D.js

@@ -4,7 +4,9 @@ import { useRef, useMemo, useState, memo } from 'react';
 import { useFrame, useLoader } from '@react-three/fiber';
 import { useSpring, animated } from '@react-spring/three';
 import * as THREE from 'three';
+// eslint-disable-next-line react-refresh/only-export-components
 export const CARD_DIMENSIONS = { WIDTH: 0.7, HEIGHT: 0.95, DEPTH: 0.02 };
+// eslint-disable-next-line react-refresh/only-export-components
 export const CARD_MAGNET = {
     MAX_TILT_X: 0.36,
     MAX_TILT_Y: 0.42,

package/dist/r3f/JimboBillboard.d.ts

@@ -7,4 +7,4 @@ export interface JimboBillboardProps {
     yLockOnly?: boolean;
     position?: [number, number, number];
 }
-export declare function JimboBillboard({ sprite, label, width, height, yLockOnly, position }: JimboBillboardProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function JimboBillboard(props: JimboBillboardProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/r3f/JimboBillboard.js

@@ -3,9 +3,12 @@ import { useMemo } from 'react';
 import { Billboard } from '@react-three/drei';
 import { useLoader } from '@react-three/fiber';
 import * as THREE from 'three';
-export function JimboBillboard({ sprite, label, width = 3.4, height = 4.5, yLockOnly = false, position = [0, 0, 0] }) {
-    if (!sprite)
+export function JimboBillboard(props) {
+    if (!props.sprite)
         return null;
+    return _jsx(JimboBillboardInner, { ...props, sprite: props.sprite });
+}
+function JimboBillboardInner({ sprite, width = 3.4, height = 4.5, yLockOnly = false, position = [0, 0, 0] }) {
     // Memoize texture to avoid per-render allocation
     const texture = useLoader(THREE.TextureLoader, sprite.atlasPath);
     const clonedTexture = useMemo(() => {

package/dist/ui/JimboInputModal.js

@@ -11,14 +11,20 @@ export function JimboInputModal({ open, title, message, placeholder, initialValu
     const [value, setValue] = useState(initialValue);
     const [error, setError] = useState(null);
     const inputRef = useRef(null);
-    useEffect(() => {
+    const [prevOpen, setPrevOpen] = useState(open);
+    if (open !== prevOpen) {
+        setPrevOpen(open);
         if (open) {
             setValue(initialValue);
             setError(null);
+        }
+    }
+    useEffect(() => {
+        if (open) {
             const t = setTimeout(() => inputRef.current?.focus(), 30);
             return () => clearTimeout(t);
         }
-    }, [open, initialValue]);
+    }, [open]);
     function submit() {
         const err = validate?.(value) ?? null;
         if (err) {

package/dist/ui/PanelSplitter.js

@@ -3,13 +3,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { JimboColorOption } from "./tokens.js";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useLayoutEffect } 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;
+    useLayoutEffect(() => {
+        onDragRef.current = onDrag;
+    });
     const handlePointerDown = useCallback((e) => {
         e.preventDefault();
         e.target.setPointerCapture(e.pointerId);

package/dist/ui/hooks.js

@@ -66,14 +66,22 @@ export function useSway(active) {
 export function useDelayedVisibility(open, delay) {
     const [visible, setVisible] = useState(open);
     const [opacity, setOpacity] = useState(open ? 1 : 0);
-    useEffect(() => {
+    const [prevOpen, setPrevOpen] = useState(open);
+    if (open !== prevOpen) {
+        setPrevOpen(open);
         if (open) {
             setVisible(true);
+        }
+        else {
+            setOpacity(0);
+        }
+    }
+    useEffect(() => {
+        if (open) {
             const frame = requestAnimationFrame(() => setOpacity(1));
             return () => cancelAnimationFrame(frame);
         }
         else {
-            setOpacity(0);
             const t = setTimeout(() => setVisible(false), delay);
             return () => clearTimeout(t);
         }
@@ -436,14 +444,15 @@ export function useJamlCardRenderer({ layers, invert = false, hoverTilt = false,
  */
 export function useAnteTracker(antes, options = {}) {
     const [currentAnte, setCurrentAnte] = useState(antes[0]?.ante ?? 0);
+    const [prevFirstAnte, setPrevFirstAnte] = useState(antes[0]?.ante);
     const scrollRef = useRef(null);
     const anteRefs = useRef(new Map());
-    useEffect(() => {
-        // Reset to first ante when list changes
+    if (antes[0]?.ante !== prevFirstAnte) {
+        setPrevFirstAnte(antes[0]?.ante);
         if (antes.length > 0) {
             setCurrentAnte(antes[0].ante);
         }
-    }, [antes]);
+    }
     useEffect(() => {
         const root = scrollRef.current;
         if (!root || antes.length === 0)

package/dist/ui/ide/JamlEditor.js

@@ -48,7 +48,7 @@ function SuggestionList({ suggestions, selectedIndex, onSelect, onHover }) {
             `, 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 }) {
+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)));
@@ -128,7 +128,6 @@ export default function JamlEditor({ initialJaml, onJamlChange, className }) {
     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) => {
@@ -183,14 +182,14 @@ export default function JamlEditor({ initialJaml, onJamlChange, className }) {
         });
     }, []);
     const linesToJaml = useCallback((linesList) => linesList.map(l => l.raw).join('\n'), []);
-    useEffect(() => {
+    const [prevInitialJaml, setPrevInitialJaml] = useState(initialJaml);
+    if (initialJaml !== prevInitialJaml) {
+        setPrevInitialJaml(initialJaml);
         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]);
+        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)
@@ -291,28 +290,6 @@ export default function JamlEditor({ initialJaml, onJamlChange, className }) {
             }
         }
     }, [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}` }));
@@ -338,22 +315,57 @@ export default function JamlEditor({ initialJaml, onJamlChange, className }) {
         }
         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) => {
+    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);
-                        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" })] })] }));
+                    }, 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, onAddLine }) {
-    const [, setHovered] = useState(false);
-    const [suggestions, setSuggestions] = useState([]);
+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);
@@ -378,35 +390,13 @@ function JamlLine({ line, keyWidth, isEditing, editingPart, editingArrayIndex, o
             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]);
+    // Suggestions Logic derived above
     // 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]);
+    }, [isEditing]);
     const handleKeyDown = (e) => {
         if (e.key === 'Enter') {
             e.preventDefault();
@@ -457,7 +447,7 @@ function JamlLine({ line, keyWidth, isEditing, editingPart, editingArrayIndex, o
         '--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: {
+    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',
@@ -470,7 +460,7 @@ function JamlLine({ line, keyWidth, isEditing, editingPart, editingArrayIndex, o
                         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: {
+                }, 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`,

package/dist/ui/jimbo.css

@@ -4,6 +4,14 @@
    Eyedropped from actual game shader output — not Lua hex values.
    ═══════════════════════════════════════════════════════════════════════════ */
 
+@font-face {
+  font-family: 'm6x11plus';
+  src: url('/fonts/m6x11plus.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* Global Scrollbar Hide */
 * {
   scrollbar-width: none !important;
@@ -433,9 +441,12 @@
   gap: var(--j-space-sm);
   align-items: flex-end;
   justify-content: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
+.j-tabs::-webkit-scrollbar { display: none; }
 
 .j-tab {
   display: flex;
@@ -459,7 +470,7 @@
 }
 
 .j-tab__indicator[data-active="true"] {
-  animation: jimbo-bounce 0.8s cubic-bezier(0.68, 0, 0.68, 1) infinite;
+  animation: jimbo-bounce 0.6s ease-in-out infinite;
 }
 
 .j-tab__indicator[data-active="false"] {
@@ -496,9 +507,6 @@
   filter: brightness(1.08);
 }
 
-.j-tab__btn[data-active="false"] {
-  opacity: 0.82;
-}
 
 @keyframes jimbo-bounce {
 
@@ -600,11 +608,50 @@
   box-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
   color: var(--j-white);
   pointer-events: none;
-  z-index: 10000;
+  z-index: 9999;
   transition: opacity 120ms ease;
 }
 
 
+
+/* ── Layout Utilities ─────────────────────────────────────────────────── */
+
+.j-flex {
+  display: flex;
+}
+
+.j-flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.j-items-center {
+  align-items: center;
+}
+
+.j-items-start {
+  align-items: flex-start;
+}
+
+.j-justify-center {
+  justify-content: center;
+}
+
+.j-justify-between {
+  justify-content: space-between;
+}
+
+.j-gap-xs { gap: var(--j-space-xs); }
+.j-gap-sm { gap: var(--j-space-sm); }
+.j-gap-md { gap: var(--j-space-md); }
+.j-gap-lg { gap: var(--j-space-lg); }
+
+.j-w-full { width: 100%; }
+.j-h-full { height: 100%; }
+
+.j-text-center { text-align: center; }
+
+
 /* ── Flank Nav ────────────────────────────────────────────────────────── */
 
 .j-flank {
@@ -902,24 +949,31 @@
 
 /* ── Modal ────────────────────────────────────────────────────────────── */
 
+@keyframes jimbo-modal-in {
+  from { transform: scale(0.88); opacity: 0; }
+  to   { transform: scale(1);    opacity: 1; }
+}
+
 .j-modal-overlay {
-  position: fixed;
+  position: absolute;
   inset: 0;
-  z-index: 50;
+  z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--j-space-xl);
-  background: rgba(0, 0, 0, 0.7);
+  padding: var(--j-space-md);
+  background: rgba(0, 0, 0, 0.82);
 }
 
 .j-modal {
   width: 100%;
-  max-width: 320px;
-  max-height: 90vh;
+  max-width: 345px;
+  max-height: calc(100% - 32px);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  border-radius: 12px;
+  animation: jimbo-modal-in 140ms cubic-bezier(0.2, 0, 0.2, 1.4) both;
 }
 
 .j-modal .j-panel__body {
@@ -1154,10 +1208,10 @@
 .j-app {
   container-type: inline-size;
   container-name: jimbo;
-  width: 320px;
-  max-width: 320px;
-  height: 568px;
-  max-height: 568px;
+  width: 375px;
+  max-width: 375px;
+  height: 667px;
+  max-height: 667px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;

package/dist/ui/jimboTooltip.js

@@ -1,6 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback } from 'react';
 import { useJimboTooltip } from './hooks.js';
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref && typeof ref === 'object') {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref.current = value;
+    }
+}
 /**
  * Canonical Balatro-style tooltip: dark panel, silver border, pixel font.
  * Wrap any target to get a hover/focus popover.
@@ -8,14 +16,12 @@ import { useJimboTooltip } from './hooks.js';
 export function JimboTooltip({ content, children, mode = 'snap', placement = 'auto', delay = 80, maxWidth = 280, disabled = false, }) {
     const { visible, pos, targetRef, tooltipRef, show, hide, handleMouseMove, } = useJimboTooltip({ mode, placement, delay, disabled });
     const child = React.Children.only(children);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const childRef = child.ref;
     const refHandler = useCallback((node) => {
         targetRef.current = node;
-        const childRef = child.ref;
-        if (typeof childRef === 'function')
-            childRef(node);
-        else if (childRef && 'current' in childRef)
-            childRef.current = node;
-    }, [child, targetRef]);
+        assignRef(childRef, node);
+    }, [childRef, targetRef]);
     const wrapped = React.cloneElement(child, {
         ref: refHandler,
         onMouseEnter: (e) => { show(); child.props.onMouseEnter?.(e); },

package/dist/ui/panel.d.ts

@@ -5,8 +5,7 @@ export interface JimboPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     hideBack?: boolean;
 }
 export declare const JimboPanel: React.MemoExoticComponent<({ children, className, sway, onBack, hideBack, style, ...props }: JimboPanelProps) => import("react/jsx-runtime").JSX.Element>;
-export interface JimboInnerPanelProps extends React.HTMLAttributes<HTMLDivElement> {
-}
+export type JimboInnerPanelProps = React.HTMLAttributes<HTMLDivElement>;
 export declare const JimboInnerPanel: React.MemoExoticComponent<({ children, className, style, ...props }: JimboInnerPanelProps) => import("react/jsx-runtime").JSX.Element>;
 export type JimboTone = 'orange' | 'red' | 'blue' | 'green' | 'tarot' | 'planet' | 'spectral' | 'grey';
 export interface JimboButtonProps {

package/dist/ui/panel.js

@@ -17,8 +17,8 @@ export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, d
 export function JimboBackButton({ onClick }) {
     return (_jsx("div", { className: "j-flex j-justify-center j-w-full", style: { padding: '4px 0' }, children: _jsx(JimboButton, { tone: "orange", size: "md", fullWidth: true, onClick: onClick, className: "j-back-btn", children: "Back" }) }));
 }
-export function JimboModal({ children, open, onClose, title, className, showBack = false }) {
+export function JimboModal({ children, open, onClose, title, className, showBack = true }) {
     if (!open)
         return null;
-    return (_jsx("div", { className: "j-modal-overlay", onClick: onClose, children: _jsxs(JimboPanel, { onBack: showBack ? onClose : undefined, className: `j-modal ${className ?? ''}`, onClick: (e) => e.stopPropagation(), children: [title && _jsx(JimboText, { as: "h2", size: "lg", className: "j-modal__title", children: title }), children] }) }));
+    return (_jsx("div", { className: "j-modal-overlay", children: _jsxs(JimboPanel, { onBack: showBack ? onClose : undefined, className: `j-modal ${className ?? ''}`, children: [title && _jsx(JimboText, { as: "h2", size: "lg", className: "j-modal__title", children: title }), children] }) }));
 }

package/dist/ui/radial/RadialButton.js

@@ -66,7 +66,7 @@ export function RadialButton(props) {
         }, children: [variant === "toggle" && _jsx(ToggleDot, { active: props.active, disabled: isDisabled }), _jsx("span", { className: "jimbo-radial-label jimbo-radial-label--action", children: label }), variant === "count" && _jsx(CountBadge, { count: props.count, icon: props.icon })] }));
 }
 // ── Internal sub-components ───────────────────────────────────────────────────
-function ToggleDot({ active, disabled: _disabled }) {
+function ToggleDot({ active }) {
     const dotStyle = active
         ? { backgroundColor: JimboColorOption.GREEN_TEXT, borderColor: JimboColorOption.BORDER_SILVER }
         : { backgroundColor: JimboColorOption.DARK_RED, borderColor: JimboColorOption.DARK_GREY };

package/dist/ui/showcase.js

@@ -16,5 +16,5 @@ export function Showcase({ title = 'Balatro', subtitle = 'Seed Curator', hotFilt
                             padding: '3px 8px',
                             background: 'var(--j-dark-grey)', borderRadius: 4,
                             border: '1px solid var(--j-panel-edge)',
-                        }, children: [_jsx(JimboText, { size: "micro", tone: "purple", children: mcpInfo.engine }), _jsx(JimboText, { size: "micro", tone: "grey", children: mcpInfo.features })] })), hotFilters.length > 0 && (_jsxs(_Fragment, { children: [_jsx(JimboSectionHeader, { label: "Filters", tone: "blue" }), _jsx("div", { className: "j-flex-col", style: { gap: 4 }, children: hotFilters.slice(0, 4).map((f, i) => (_jsxs(JimboInfoCard, { tone: f.tone, onClick: () => onFilterClick?.(f, i), style: { cursor: onFilterClick ? 'pointer' : undefined }, children: [_jsx("div", { className: "j-flex j-gap-xs", children: f.sample.slice(0, 2).map((name, j) => (_jsx("div", { style: { width: 22, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(JimboSprite, { name: name, width: 20 }) }, j))) }), _jsxs(JimboInfoCardBody, { children: [_jsx(JimboInfoCardTitle, { children: f.name }), _jsxs(JimboInfoCardSub, { children: ["by ", f.author] })] }), _jsx(JimboInfoCardAside, { children: _jsx(JimboText, { size: "xs", tone: f.tone === 'gold' ? 'gold' : f.tone, children: f.hits }) })] }, i))) })] })), recentFinds.length > 0 && (_jsxs(_Fragment, { children: [_jsx(JimboSectionHeader, { label: "Recent", tone: "green" }), _jsx("div", { style: { lineHeight: 1.5 }, children: recentFinds.slice(0, 3).map((r, i) => (_jsxs("div", { className: "j-flex j-gap-sm", children: [_jsx(JimboText, { size: "micro", tone: "gold", children: r.seed }), _jsx(JimboText, { size: "micro", tone: "grey", children: r.filterName }), r.score > 0 && _jsxs(JimboText, { size: "micro", tone: "green", children: ["+", r.score] })] }, i))) })] }))] }), _jsxs(JimboAppFooter, { children: [_jsx(JimboButton, { tone: "green", fullWidth: true, size: "lg", onClick: onNewSearch, children: "New Search" }), _jsx(JimboButton, { tone: "blue", fullWidth: true, size: "lg", onClick: onBrowseFilters, children: "Browse Filters" }), _jsx(JimboBalatroFooter, {})] })] }));
+                        }, children: [_jsx(JimboText, { size: "micro", tone: "purple", children: mcpInfo.engine }), _jsx(JimboText, { size: "micro", tone: "grey", children: mcpInfo.features })] })), hotFilters.length > 0 && (_jsxs(_Fragment, { children: [_jsx(JimboSectionHeader, { label: "Filters", tone: "blue" }), _jsx("div", { className: "j-flex-col", style: { gap: 4 }, children: hotFilters.slice(0, 4).map((f, i) => (_jsxs(JimboInfoCard, { tone: f.tone, onClick: () => onFilterClick?.(f, i), style: { cursor: onFilterClick ? 'pointer' : undefined }, children: [_jsx("div", { className: "j-flex j-gap-xs", children: f.sample.slice(0, 2).map((name, j) => (_jsx("div", { style: { width: 22, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(JimboSprite, { name: name, width: 20 }) }, j))) }), _jsxs(JimboInfoCardBody, { children: [_jsx(JimboInfoCardTitle, { children: f.name }), _jsxs(JimboInfoCardSub, { children: ["by ", f.author] })] }), _jsx(JimboInfoCardAside, { children: _jsx(JimboText, { size: "xs", tone: f.tone === 'gold' ? 'gold' : f.tone, children: f.hits }) })] }, i))) })] })), recentFinds.length > 0 && (_jsxs(_Fragment, { children: [_jsx(JimboSectionHeader, { label: "Recent", tone: "green" }), _jsx("div", { style: { lineHeight: 1.5 }, children: recentFinds.slice(0, 3).map((r, i) => (_jsxs("div", { className: "j-flex j-gap-sm", children: [_jsx(JimboText, { size: "micro", tone: "gold", children: r.seed }), _jsx(JimboText, { size: "micro", tone: "grey", children: r.filterName }), r.score > 0 && _jsxs(JimboText, { size: "micro", tone: "green", children: ["+", r.score] })] }, i))) })] }))] }), _jsxs(JimboAppFooter, { children: [_jsx(JimboButton, { tone: "green", fullWidth: true, size: "lg", onClick: onNewSearch, children: "New Search" }), _jsx(JimboButton, { tone: "blue", fullWidth: true, size: "lg", onClick: onBrowseFilters, children: "Browse Filters" })] }), _jsx(JimboBalatroFooter, {})] }));
 }

package/dist/utils/jamlMapPreview.js

@@ -61,7 +61,8 @@ function parseInlineValues(raw) {
 export function extractVisualJamlItems(jaml) {
     const groups = createEmptyGroups();
     const seen = new Set();
-    const lines = jaml.replace(/\r\n/g, "\n").split("\n");
+    const safeJaml = jaml || "";
+    const lines = safeJaml.replace(/\r\n/g, "\n").split("\n");
     let currentSection = null;
     for (const rawLine of lines) {
         const trimmed = rawLine.trim();

package/dist/utils/jamlVisualFilter.js

@@ -59,7 +59,8 @@ function uid() {
     return `clause-${++_uid}`;
 }
 export function jamlTextToVisualFilter(text) {
-    const lines = text.replace(/\r\n/g, "\n").split("\n");
+    const safeText = text || "";
+    const lines = safeText.replace(/\r\n/g, "\n").split("\n");
     const filter = { must: [], should: [], mustnot: [] };
     filter.name = topLevelScalar(lines, "name");
     filter.author = topLevelScalar(lines, "author");
@@ -161,7 +162,7 @@ export function jamlTextToVisualFilter(text) {
 function q(s) {
     if (!s)
         return "";
-    return /[:#\[\]{}|>&*!,'"?]/.test(s) ? `"${s.replace(/"/g, '\\"')}"` : s;
+    return /[:#[\]{}|>&*!,'"?]/.test(s) ? `"${s.replace(/"/g, '\\"')}"` : s;
 }
 function serializeClause(clause) {
     let out = `  - ${clause.type}: ${q(clause.value)}\n`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.24.16",
+  "version": "0.24.18",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",
@@ -37,8 +37,7 @@
       "default": "./dist/r3f.js"
     },
     "./jimbo.css": "./dist/ui/jimbo.css",
-    "./fonts.css": "./fonts.css",
-    "./jaml.schema.json": "./jaml.schema.json"
+    "./fonts.css": "./fonts.css"
   },
   "sideEffects": [
     "./fonts.css",
@@ -58,7 +57,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsc --pretty false && node -e \"const fs=require('fs');fs.mkdirSync('dist/ui',{recursive:true});fs.copyFileSync('src/ui/jimbo.css','dist/ui/jimbo.css');fs.copyFileSync('node_modules/motely-wasm/jaml.schema.json','jaml.schema.json');\"",
+    "build": "tsc --pretty false && node -e \"const fs=require('fs');fs.mkdirSync('dist/ui',{recursive:true});fs.copyFileSync('src/ui/jimbo.css','dist/ui/jimbo.css');\"",
     "dev": "tsc --watch",
     "demo": "vite --config demo/vite.config.ts",
     "typecheck": "tsc --noEmit --pretty false",
@@ -96,7 +95,7 @@
     "@react-spring/three": ">=9.0.0",
     "@react-three/drei": ">=9.0.0",
     "@react-three/fiber": ">=8.0.0",
-    "motely-wasm": "^15.1.2",
+    "motely-wasm": "^15.1.3",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
     "react-icons": ">=5.0.0",
@@ -124,6 +123,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.2",
+    "@eslint/js": "^10.0.1",
     "@google/design.md": "^0.1.1",
     "@react-spring/three": "^10.0.3",
     "@react-three/drei": ">=9.0.0",
@@ -140,7 +140,11 @@
     "@vitejs/plugin-react": "^5.0.4",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.1.5",
-    "motely-wasm": "^15.1.2",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "motely-wasm": "^15.1.3",
     "playwright": "^1.59.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -148,10 +152,12 @@
     "storybook": "^10.3.6",
     "three": "^0.184.0",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.59.2",
     "vite": "^8.0.9",
     "vitest": "^4.1.5"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.1",
     "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-yaml": "^6.1.3",
     "@codemirror/language": "^6.12.3",