jaml-ui 0.7.2 → 0.9.0

package/dist/assets.js

@@ -12,7 +12,7 @@ export const JAML_ASSET_FILES = {
 };
 const assetKeyByFileName = Object.fromEntries(Object.entries(JAML_ASSET_FILES).map(([key, fileName]) => [fileName, key]));
 // Keep in lockstep with package.json version. Upload assets to this path when publishing.
-const JAML_UI_VERSION = "0.7.0";
+const JAML_UI_VERSION = "0.8.0";
 const CDN_BASE = `https://cdn.seedfinder.app/jaml-ui/${JAML_UI_VERSION}/assets/`;
 const defaultAssetUrls = {
     deck: `${CDN_BASE}${JAML_ASSET_FILES.deck}`,

package/dist/components/JamlCodeEditor.d.ts

@@ -0,0 +1,7 @@
+export interface JamlCodeEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    minHeight?: number;
+}
+export declare function JamlCodeEditor({ value, onChange, minHeight, }: JamlCodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlCodeEditor.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Editor from "@monaco-editor/react";
+import { JimboColorOption } from "../ui/tokens.js";
+// Monaco needs hex strings for its colors API. We strip the leading `#` from
+// JimboColor tokens where Monaco expects raw hex for syntax rules (token
+// foreground), and pass the full `#...` form for UI colors. Alpha suffix
+// (e.g. WHITE + "20") is valid for Monaco colors but not for rules.
+const hex = (token) => token.replace(/^#/, "");
+const defineBalatroTheme = (monaco) => {
+    monaco.editor.defineTheme("jaml-balatro-dark", {
+        base: "vs-dark",
+        inherit: true,
+        rules: [
+            { token: "comment", foreground: hex(JimboColorOption.GREY), fontStyle: "italic" },
+            { token: "keyword", foreground: hex(JimboColorOption.RED) },
+            { token: "string", foreground: hex(JimboColorOption.GOLD_TEXT) },
+            { token: "number", foreground: hex(JimboColorOption.BLUE) },
+            { token: "type", foreground: hex(JimboColorOption.GREEN_TEXT) },
+        ],
+        colors: {
+            "editor.background": JimboColorOption.DARKEST,
+            "editor.foreground": JimboColorOption.WHITE,
+            "editorLineNumber.foreground": JimboColorOption.GREY,
+            "editorLineNumber.activeForeground": JimboColorOption.GOLD_TEXT,
+            "editor.selectionBackground": `${JimboColorOption.WHITE}20`,
+            "editor.inactiveSelectionBackground": `${JimboColorOption.WHITE}10`,
+            "editor.lineHighlightBackground": `${JimboColorOption.BLACK}20`,
+            "editorCursor.foreground": JimboColorOption.GOLD_TEXT,
+            "editorWidget.background": JimboColorOption.DARK_GREY,
+            "editorWidget.border": `${JimboColorOption.WHITE}20`,
+            "editorWidget.foreground": JimboColorOption.WHITE,
+            "list.activeSelectionBackground": JimboColorOption.GOLD,
+            "list.activeSelectionForeground": JimboColorOption.DARKEST,
+            "list.hoverBackground": JimboColorOption.PANEL_EDGE,
+            "list.hoverForeground": JimboColorOption.WHITE,
+            "list.focusBackground": JimboColorOption.GOLD,
+            "list.focusForeground": JimboColorOption.DARKEST,
+        },
+    });
+};
+export function JamlCodeEditor({ value, onChange, minHeight = 320, }) {
+    return (_jsx("div", { style: { width: "100%", minHeight, background: JimboColorOption.DARKEST }, children: _jsx(Editor, { height: `${minHeight}px`, defaultLanguage: "yaml", value: value, theme: "jaml-balatro-dark", onChange: (next) => onChange(next ?? ""), beforeMount: defineBalatroTheme, options: {
+                minimap: { enabled: false },
+                scrollBeyondLastLine: false,
+                fontSize: 13,
+                lineHeight: 22,
+                fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                lineNumbers: "on",
+                automaticLayout: true,
+                padding: { top: 12, bottom: 12 },
+                wordWrap: "on",
+                formatOnPaste: true,
+                formatOnType: true,
+                renderLineHighlight: "line",
+                scrollbar: { verticalScrollbarSize: 8, horizontalScrollbarSize: 8 },
+            } }) }));
+}

package/dist/components/JamlIde.d.ts

@@ -22,6 +22,10 @@ export interface JamlIdeProps {
     codePlaceholder?: string;
     onSearch?: () => void;
     isSearching?: boolean;
+    /**
+     * Controlled visual filter. When provided alongside `onVisualFilterChange`, the Visual tab
+     * is fully controlled by the parent. When absent, the Visual tab auto-derives from the text.
+     */
     visualFilter?: JamlVisualFilter;
     onVisualFilterChange?: (filter: JamlVisualFilter) => void;
 }

package/dist/components/JamlIde.js

@@ -4,7 +4,9 @@ import { useMemo, useState } from "react";
 import { JamlMapPreview } from "./JamlMapPreview.js";
 import { JamlIdeToolbar } from "./JamlIdeToolbar.js";
 import { JamlIdeVisual } from "./JamlIdeVisual.js";
+import { JamlCodeEditor } from "./JamlCodeEditor.js";
 import { JimboColorOption } from "../ui/tokens.js";
+import { jamlTextToVisualFilter, visualFilterToJamlText } from "../utils/jamlVisualFilter.js";
 function TallyBar({ value, max }) {
     const pct = max > 0 ? Math.min(1, value / max) : 0;
     return (_jsx("div", { style: { flex: 1, height: 4, borderRadius: 999, background: `${JimboColorOption.DARK_GREY}88`, overflow: "hidden" }, children: _jsx("div", { style: {
@@ -93,6 +95,7 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
     const [mode, setMode] = useState(defaultMode);
     const [internalText, setInternalText] = useState(jaml ?? defaultJaml ?? "");
     const [lastJamlProp, setLastJamlProp] = useState(jaml);
+    // Adjust-state-during-render: sync controlled `jaml` prop into internal text.
     if (jaml !== lastJamlProp) {
         setLastJamlProp(jaml);
         if (jaml !== undefined)
@@ -103,6 +106,38 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
         setInternalText(next);
         onChange?.(next);
     };
+    // Derived visual filter state (used only when not externally controlled).
+    // Cache the last successfully parsed filter so a mid-edit invalid state
+    // doesn't flash the visual panel empty.
+    const [lastParsedText, setLastParsedText] = useState("");
+    const [lastParsedFilter, setLastParsedFilter] = useState(() => jamlTextToVisualFilter(jaml ?? defaultJaml ?? ""));
+    // Adjust-state-during-render: reparse when text changes (only if not controlled).
+    if (visualFilter === undefined && text !== lastParsedText) {
+        try {
+            const parsed = jamlTextToVisualFilter(text);
+            setLastParsedText(text);
+            setLastParsedFilter(parsed);
+        }
+        catch {
+            // Keep previous filter on parse error — don't flash empty.
+            setLastParsedText(text);
+        }
+    }
+    const activeFilter = visualFilter ?? lastParsedFilter;
+    const handleVisualFilterChange = (next) => {
+        if (onVisualFilterChange) {
+            // Controlled: let parent own both.
+            onVisualFilterChange(next);
+        }
+        else {
+            // Uncontrolled: round-trip through text so textarea stays source of truth.
+            const nextText = visualFilterToJamlText(next);
+            setInternalText(nextText);
+            setLastParsedFilter(next);
+            setLastParsedText(nextText);
+            onChange?.(nextText);
+        }
+    };
     const results = useMemo(() => searchResults, [searchResults]);
     return (_jsxs("div", { className: className, style: {
             display: "flex",
@@ -122,17 +157,5 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
                     padding: "10px 14px",
                     borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
                     background: JimboColorOption.TEAL_GREY,
-                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 14, fontWeight: 800, fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: "Jimbo's Ante Markup Language" })] }), actions ? _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: actions }) : null] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: "auto", background: JimboColorOption.DARKEST }, children: [mode === "visual" && visualFilter && onVisualFilterChange ? (_jsx(JamlIdeVisual, { filter: visualFilter, onChange: onVisualFilterChange })) : mode === "visual" ? (_jsxs("div", { style: { padding: 16, color: JimboColorOption.GREY, fontSize: 12, textAlign: "center" }, children: ["Pass ", _jsx("code", { children: "visualFilter" }), " and ", _jsx("code", { children: "onVisualFilterChange" }), " props to enable the visual editor."] })) : null, mode === "code" ? (_jsx("textarea", { title: "JAML IDE Editor", value: text, onChange: (event) => handleTextChange(event.target.value), placeholder: codePlaceholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", style: {
-                            width: "100%",
-                            minHeight: 320,
-                            resize: "vertical",
-                            border: 0,
-                            outline: 0,
-                            padding: 16,
-                            background: "transparent",
-                            color: JimboColorOption.WHITE,
-                            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-                            fontSize: 13,
-                            lineHeight: 1.7,
-                        } })) : null, mode === "map" ? _jsx(JamlMapPreview, { jaml: text }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results }) })) : null] })] }));
+                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 14, fontWeight: 800, fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: "Jimbo's Ante Markup Language" })] }), actions ? _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: actions }) : null] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: "auto", background: JimboColorOption.DARKEST }, children: [mode === "visual" ? (_jsx(JamlIdeVisual, { filter: activeFilter, onChange: handleVisualFilterChange })) : null, mode === "code" ? (_jsx(JamlCodeEditor, { value: text, onChange: handleTextChange, placeholder: codePlaceholder })) : null, mode === "map" ? _jsx(JamlMapPreview, { jaml: text }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results }) })) : null] })] }));
 }

package/dist/components/JamlIdeToolbar.js

@@ -4,7 +4,7 @@ import { JimboButton } from "../ui/panel.js";
 import { JimboColorOption } from "../ui/tokens.js";
 const TABS = [
     { id: "visual", label: "Visual" },
-    { id: "code", label: "Code" },
+    { id: "code", label: ".jaml" },
     { id: "map", label: "Map" },
     { id: "results", label: "Results" },
 ];
@@ -17,5 +17,46 @@ export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className
             padding: "6px 10px",
             borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
             background: JimboColorOption.DARKEST,
-        }, children: [_jsx("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: TABS.map((tab) => (_jsxs(JimboButton, { tone: mode === tab.id ? "gold" : "grey", size: "xs", onClick: () => onModeChange(tab.id), children: [tab.label, tab.id === "results" && resultCount > 0 ? (_jsx("span", { style: { marginLeft: 6, borderRadius: 999, background: "rgba(228,182,67,0.2)", color: JimboColorOption.GOLD_TEXT, padding: "1px 6px", fontSize: 10 }, children: resultCount })) : null] }, tab.id))) }), onSearch ? (_jsx(JimboButton, { tone: isSearching ? "red" : "blue", size: "xs", onClick: onSearch, children: isSearching ? "Stop" : "Search" })) : null] }));
+        }, children: [_jsx("div", { style: {
+                    display: "flex",
+                    alignItems: "stretch",
+                    gap: 0,
+                    background: `${JimboColorOption.DARK_GREY}cc`,
+                    borderRadius: 7,
+                    border: `1px solid ${JimboColorOption.PANEL_EDGE}`,
+                    padding: 2,
+                    overflow: "hidden",
+                }, children: TABS.map((tab) => {
+                    const isActive = mode === tab.id;
+                    return (_jsxs("button", { type: "button", onClick: () => onModeChange(tab.id), style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 5,
+                            padding: "3px 10px",
+                            border: "none",
+                            borderRadius: 5,
+                            cursor: "pointer",
+                            fontFamily: "m6x11plus, monospace",
+                            fontSize: 10,
+                            letterSpacing: 1,
+                            textTransform: "uppercase",
+                            lineHeight: 1.2,
+                            transition: "background 80ms, color 80ms, box-shadow 80ms",
+                            color: isActive ? JimboColorOption.DARKEST : JimboColorOption.GREY,
+                            background: isActive ? JimboColorOption.GOLD : "transparent",
+                            boxShadow: isActive ? `0 2px 0 #8a6a1e` : "none",
+                            textShadow: isActive ? "none" : "none",
+                            userSelect: "none",
+                            position: "relative",
+                            transform: isActive ? "translateY(0)" : "translateY(0)",
+                        }, children: [tab.label, tab.id === "results" && resultCount > 0 ? (_jsx("span", { style: {
+                                    borderRadius: 999,
+                                    background: isActive ? `${JimboColorOption.DARKEST}44` : `${JimboColorOption.GOLD}33`,
+                                    color: isActive ? JimboColorOption.DARKEST : JimboColorOption.GOLD_TEXT,
+                                    padding: "0px 5px",
+                                    fontSize: 9,
+                                    fontFamily: "monospace",
+                                    letterSpacing: 0,
+                                }, children: resultCount })) : null] }, tab.id));
+                }) }), onSearch ? (_jsx(JimboButton, { tone: isSearching ? "red" : "blue", size: "xs", onClick: onSearch, children: isSearching ? "Stop" : "Search" })) : null] }));
 }

package/dist/components/JamlIdeVisual.js

@@ -35,7 +35,7 @@ function DragClausePill({ clause, zone, onDragStart, }) {
             borderRadius: 6, padding: "5px 8px 5px 4px",
             boxShadow: `0 2px 0 ${JimboColorOption.BLACK}`,
             cursor: "grab", userSelect: "none", touchAction: "none",
-        }, children: [_jsx("div", { style: { color: JimboColorOption.GREY, fontSize: 12, lineHeight: 1, padding: "0 2px" }, children: "\u22EE\u22EE" }), _jsx(ClauseSprite, { clause: clause, size: 26 }), _jsx("div", { style: { fontSize: 10, color: JimboColorOption.WHITE, letterSpacing: 1, textShadow: "1px 1px 0 rgba(0,0,0,.8)" }, children: clause.label || clause.value }), clause.antes && clause.antes.length > 0 && (_jsxs("div", { style: { display: "flex", gap: 2 }, children: [clause.antes.slice(0, 3).map((a) => (_jsx("div", { style: { fontSize: 8, padding: "0 3px", background: JimboColorOption.DARKEST, color: z.color, borderRadius: 2 }, children: a }, a))), clause.antes.length > 3 && _jsxs("div", { style: { fontSize: 8, color: JimboColorOption.GREY }, children: ["+", clause.antes.length - 3] })] })), clause.score != null && (_jsxs("div", { style: { fontSize: 9, padding: "0 4px", background: JimboColorOption.RED, color: JimboColorOption.WHITE, borderRadius: 2 }, children: ["+", clause.score] }))] }));
+        }, children: [_jsx("div", { style: { color: JimboColorOption.GREY, fontSize: 12, lineHeight: 1, padding: "0 2px" }, children: "\u22EE\u22EE" }), _jsx(ClauseSprite, { clause: clause, size: 26 }), _jsx("div", { style: { fontSize: 10, color: JimboColorOption.WHITE, letterSpacing: 1, textShadow: `1px 1px 0 ${JimboColorOption.BLACK}cc` }, children: clause.label || clause.value }), clause.antes && clause.antes.length > 0 && (_jsxs("div", { style: { display: "flex", gap: 2 }, children: [clause.antes.slice(0, 3).map((a) => (_jsx("div", { style: { fontSize: 8, padding: "0 3px", background: JimboColorOption.DARKEST, color: z.color, borderRadius: 2 }, children: a }, a))), clause.antes.length > 3 && _jsxs("div", { style: { fontSize: 8, color: JimboColorOption.GREY }, children: ["+", clause.antes.length - 3] })] })), clause.score != null && (_jsxs("div", { style: { fontSize: 9, padding: "0 4px", background: JimboColorOption.RED, color: JimboColorOption.WHITE, borderRadius: 2 }, children: ["+", clause.score] }))] }));
 }
 function ZoneDropRail({ zone, clauses, onDragStart, highlight, }) {
     const z = ZONE_META[zone];
@@ -47,7 +47,7 @@ function ZoneDropRail({ zone, clauses, onDragStart, highlight, }) {
         }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [_jsx("div", { style: {
                             fontSize: 10, letterSpacing: 2, padding: "2px 8px",
                             background: z.color, color: JimboColorOption.WHITE, borderRadius: 3,
-                            textShadow: "1px 1px 0 rgba(0,0,0,.8)",
+                            textShadow: `1px 1px 0 ${JimboColorOption.BLACK}cc`,
                         }, children: z.label }), _jsx("div", { style: { flex: 1, height: 1, background: `${z.color}44` } }), _jsx("div", { style: { fontSize: 8, color: JimboColorOption.GREY }, children: clauses.length })] }), _jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [clauses.map((c) => (_jsx(DragClausePill, { clause: c, zone: zone, onDragStart: onDragStart }, c.id))), clauses.length === 0 && (_jsx("div", { style: { fontSize: 10, color: JimboColorOption.GREY, padding: 10, fontStyle: "italic" }, children: "drop clauses here" }))] })] }));
 }
 export function JamlIdeVisual({ filter, onChange, onSave, onBack }) {
@@ -103,11 +103,11 @@ export function JamlIdeVisual({ filter, onChange, onSave, onBack }) {
     return (_jsxs("div", { ref: rootRef, style: { display: "flex", flexDirection: "column", gap: 10, padding: 10 }, children: [_jsxs("div", { style: {
                     background: JimboColorOption.DARK_GREY, border: `2px solid ${JimboColorOption.PANEL_EDGE}`,
                     borderRadius: 6, padding: 8, boxShadow: `0 2px 0 ${JimboColorOption.BLACK}`,
-                }, children: [_jsx("div", { style: { fontSize: 9, color: JimboColorOption.GREY, letterSpacing: 2 }, children: "FILE" }), _jsxs("div", { style: { fontSize: 14, color: JimboColorOption.WHITE, textShadow: "1px 1px 0 rgba(0,0,0,.8)" }, children: [filter.name || "Untitled", ".jaml"] }), filter.author && (_jsxs("div", { style: { fontSize: 9, color: JimboColorOption.GOLD_TEXT, marginTop: 2 }, children: ["by ", filter.author] }))] }), _jsx("div", { style: { fontSize: 9, color: JimboColorOption.GREY, letterSpacing: 1, textAlign: "center" }, children: "\u22EE\u22EE drag clauses between zones \u00B7 tap to edit" }), _jsx(ZoneDropRail, { zone: "must", clauses: filter.must, onDragStart: onDragStart, highlight: hoverZone === "must" }), _jsx(ZoneDropRail, { zone: "should", clauses: filter.should, onDragStart: onDragStart, highlight: hoverZone === "should" }), _jsx(ZoneDropRail, { zone: "mustnot", clauses: filter.mustnot, onDragStart: onDragStart, highlight: hoverZone === "mustnot" }), drag && (_jsx("div", { style: {
+                }, children: [_jsx("div", { style: { fontSize: 9, color: JimboColorOption.GREY, letterSpacing: 2 }, children: "FILE" }), _jsxs("div", { style: { fontSize: 14, color: JimboColorOption.WHITE, textShadow: `1px 1px 0 ${JimboColorOption.BLACK}cc` }, children: [filter.name || "Untitled", ".jaml"] }), filter.author && (_jsxs("div", { style: { fontSize: 9, color: JimboColorOption.GOLD_TEXT, marginTop: 2 }, children: ["by ", filter.author] }))] }), _jsx(ZoneDropRail, { zone: "must", clauses: filter.must, onDragStart: onDragStart, highlight: hoverZone === "must" }), _jsx(ZoneDropRail, { zone: "should", clauses: filter.should, onDragStart: onDragStart, highlight: hoverZone === "should" }), _jsx(ZoneDropRail, { zone: "mustnot", clauses: filter.mustnot, onDragStart: onDragStart, highlight: hoverZone === "mustnot" }), drag && (_jsx("div", { style: {
                     position: "fixed",
                     left: drag.x - drag.offX, top: drag.y - drag.offY,
                     pointerEvents: "none", zIndex: 999,
                     transform: "rotate(-2deg) scale(1.05)",
-                    filter: "drop-shadow(0 4px 6px rgba(0,0,0,.6))", opacity: 0.92,
+                    filter: `drop-shadow(0 4px 6px ${JimboColorOption.BLACK}99)`, opacity: 0.92,
                 }, children: _jsx(DragClausePill, { clause: drag.clause, zone: drag.fromZone, onDragStart: () => { } }) }))] }));
 }

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { AnalyzerExplorer, type AnalyzerAnteView, type AnalyzerBadge, type Analy
 export { JamlMapPreview, type JamlMapPreviewProps } from "./components/JamlMapPreview.js";
 export { JamlIde, type JamlIdeProps, type JamlIdeSearchResult, type JamlVisualFilter, type JamlVisualClause, type JamlZone, } from "./components/JamlIde.js";
 export { JamlIdeVisual, type JamlIdeVisualProps, } from "./components/JamlIdeVisual.js";
+export { JamlCodeEditor, type JamlCodeEditorProps, } from "./components/JamlCodeEditor.js";
 export { JamlIdeToolbar, type JamlIdeMode, type JamlIdeToolbarProps, } from "./components/JamlIdeToolbar.js";
 export { CardList, type CardListProps } from "./components/CardList.js";
 export { extractVisualJamlItems, type JamlPreviewGroups, type JamlPreviewItem, type JamlPreviewSection, type JamlPreviewVisualType, } from "./utils/jamlMapPreview.js";

package/dist/index.js

@@ -7,6 +7,7 @@ export { AnalyzerExplorer, } from "./components/AnalyzerExplorer.js";
 export { JamlMapPreview } from "./components/JamlMapPreview.js";
 export { JamlIde, } from "./components/JamlIde.js";
 export { JamlIdeVisual, } from "./components/JamlIdeVisual.js";
+export { JamlCodeEditor, } from "./components/JamlCodeEditor.js";
 export { JamlIdeToolbar, } from "./components/JamlIdeToolbar.js";
 export { CardList } from "./components/CardList.js";
 export { extractVisualJamlItems, } from "./utils/jamlMapPreview.js";

package/dist/utils/jamlVisualFilter.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Utilities for converting between JAML text and JamlVisualFilter.
+ *
+ * Intentionally does NOT depend on a YAML library — uses the same
+ * line-by-line approach as jamlMapPreview.ts to stay zero-dep.
+ */
+import type { JamlVisualFilter } from "../components/JamlIdeVisual.js";
+export declare function jamlTextToVisualFilter(text: string): JamlVisualFilter;
+export declare function visualFilterToJamlText(filter: JamlVisualFilter): string;

package/dist/utils/jamlVisualFilter.js

@@ -0,0 +1,194 @@
+/**
+ * Utilities for converting between JAML text and JamlVisualFilter.
+ *
+ * Intentionally does NOT depend on a YAML library — uses the same
+ * line-by-line approach as jamlMapPreview.ts to stay zero-dep.
+ */
+// ─── Text → Filter ────────────────────────────────────────────────────────────
+function stripQuotes(s) {
+    if ((s.startsWith('"') && s.endsWith('"')) || (s.startsWith("'") && s.endsWith("'"))) {
+        return s.slice(1, -1).trim();
+    }
+    return s;
+}
+function parseScalarValue(raw) {
+    const v = stripQuotes(raw.trim().replace(/,$/, "").trim());
+    return v || null;
+}
+function parseInlineList(raw) {
+    const t = raw.trim();
+    if (t.startsWith("[") && t.includes("]")) {
+        const body = t.slice(1, t.indexOf("]"));
+        return body
+            .split(",")
+            .map((s) => parseScalarValue(s))
+            .filter((s) => s !== null);
+    }
+    const v = parseScalarValue(t);
+    return v ? [v] : [];
+}
+function topLevelScalar(lines, key) {
+    for (const line of lines) {
+        const m = new RegExp(`^${key}:\\s*(.+)$`).exec(line.trim());
+        if (m)
+            return stripQuotes(m[1].trim());
+    }
+    return undefined;
+}
+const CLAUSE_ZONE_KEYS = new Set([
+    "joker", "jokers", "commonJoker", "commonJokers", "uncommonJoker", "uncommonJokers",
+    "rareJoker", "rareJokers", "mixedJoker", "mixedJokers", "soulJoker", "legendaryJoker",
+    "voucher", "vouchers",
+    "tarot", "tarotCard", "spectral", "spectralCard", "planet", "planetCard",
+    "boss", "bosses",
+    "tag", "tags", "smallBlindTag", "bigBlindTag", "smallblindtag", "bigblindtag",
+]);
+// JAML uses "mustnot" as zone key in some contexts; the visual filter uses "mustnot".
+// The text format may use "mustnot" or "must_not" — handle both, normalise to "mustnot".
+function sectionToZone(raw) {
+    if (raw === "must")
+        return "must";
+    if (raw === "should")
+        return "should";
+    if (raw === "mustnot" || raw === "must_not" || raw === "mustNot")
+        return "mustnot";
+    return null;
+}
+let _uid = 0;
+function uid() {
+    return `clause-${++_uid}`;
+}
+export function jamlTextToVisualFilter(text) {
+    const lines = text.replace(/\r\n/g, "\n").split("\n");
+    const filter = { must: [], should: [], mustnot: [] };
+    filter.name = topLevelScalar(lines, "name");
+    filter.author = topLevelScalar(lines, "author");
+    filter.description = topLevelScalar(lines, "description");
+    filter.deck = topLevelScalar(lines, "deck");
+    filter.stake = topLevelScalar(lines, "stake");
+    let zone = null;
+    let current = null;
+    const seen = new Set();
+    function flushClause() {
+        if (!current || !zone)
+            return;
+        const dedupeKey = `${zone}:${current.type}:${current.value.toLowerCase()}`;
+        if (!seen.has(dedupeKey)) {
+            seen.add(dedupeKey);
+            const clause = { id: uid(), type: current.type, value: current.value };
+            if (current.antes && current.antes.length > 0)
+                clause.antes = current.antes;
+            if (current.score !== undefined)
+                clause.score = current.score;
+            if (current.edition)
+                clause.edition = current.edition;
+            clause.label = current.value;
+            filter[zone].push(clause);
+        }
+        current = null;
+    }
+    for (const rawLine of lines) {
+        const trimmed = rawLine.trim();
+        if (!trimmed || trimmed.startsWith("#"))
+            continue;
+        // Top-level section header: must:/should:/mustnot:
+        const sectionMatch = /^(must|should|mustnot|must_not|mustNot):\s*$/.exec(trimmed);
+        if (sectionMatch) {
+            flushClause();
+            zone = sectionToZone(sectionMatch[1]);
+            continue;
+        }
+        // Top-level key (non-section) resets zone
+        const indent = rawLine.search(/\S|$/);
+        if (indent === 0 && /^[A-Za-z]/.test(trimmed) && !trimmed.startsWith("-")) {
+            flushClause();
+            if (!sectionToZone(trimmed.replace(/:.*/, "")))
+                zone = null;
+            continue;
+        }
+        if (!zone)
+            continue;
+        // New clause start: "  - rareJoker: Blueprint"
+        const clauseStart = /^-\s*([A-Za-z][A-Za-z0-9]*):\s*(.*?)\s*$/.exec(trimmed);
+        if (clauseStart) {
+            flushClause();
+            const type = clauseStart[1];
+            const rawVal = clauseStart[2];
+            if (!CLAUSE_ZONE_KEYS.has(type))
+                continue;
+            const value = parseScalarValue(rawVal) ?? "Any";
+            current = { type, value };
+            continue;
+        }
+        // Continuation line inside a clause: "    antes: [1,2,3]"
+        if (current && indent > 0 && !trimmed.startsWith("-")) {
+            const contMatch = /^([A-Za-z_][A-Za-z0-9_]*):\s*(.*?)\s*$/.exec(trimmed);
+            if (contMatch) {
+                const key = contMatch[1];
+                const val = contMatch[2];
+                if (key === "antes") {
+                    const nums = parseInlineList(val)
+                        .map(Number)
+                        .filter((n) => !isNaN(n));
+                    current.antes = nums;
+                }
+                else if (key === "score") {
+                    const n = Number(val);
+                    if (!isNaN(n))
+                        current.score = n;
+                }
+                else if (key === "edition") {
+                    current.edition = parseScalarValue(val) ?? undefined;
+                }
+            }
+        }
+    }
+    flushClause();
+    return filter;
+}
+// ─── Filter → Text ───────────────────────────────────────────────────────────
+function q(s) {
+    if (!s)
+        return "";
+    return /[:#\[\]{}|>&*!,'"?]/.test(s) ? `"${s.replace(/"/g, '\\"')}"` : s;
+}
+function serializeClause(clause) {
+    let out = `  - ${clause.type}: ${q(clause.value)}\n`;
+    if (clause.antes && clause.antes.length > 0) {
+        out += `    antes: [${clause.antes.join(", ")}]\n`;
+    }
+    if (clause.score !== undefined) {
+        out += `    score: ${clause.score}\n`;
+    }
+    if (clause.edition) {
+        out += `    edition: ${q(clause.edition)}\n`;
+    }
+    return out;
+}
+export function visualFilterToJamlText(filter) {
+    const parts = [];
+    if (filter.name)
+        parts.push(`name: ${q(filter.name)}`);
+    if (filter.author)
+        parts.push(`author: ${q(filter.author)}`);
+    if (filter.description)
+        parts.push(`description: ${q(filter.description)}`);
+    if (filter.deck)
+        parts.push(`deck: ${q(filter.deck)}`);
+    if (filter.stake)
+        parts.push(`stake: ${q(filter.stake)}`);
+    const zones = [
+        { key: "must", label: "must", clauses: filter.must },
+        { key: "should", label: "should", clauses: filter.should },
+        { key: "mustnot", label: "mustnot", clauses: filter.mustnot },
+    ];
+    for (const { label, clauses } of zones) {
+        if (clauses.length > 0) {
+            parts.push(`${label}:`);
+            for (const c of clauses) {
+                parts.push(serializeClause(c).trimEnd());
+            }
+        }
+    }
+    return parts.join("\n") + "\n";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",
@@ -37,6 +37,7 @@
   "scripts": {
     "build": "tsc --pretty false",
     "dev": "tsc --watch",
+    "demo": "vite --config demo/vite.config.ts",
     "typecheck": "tsc --noEmit --pretty false",
     "prepack": "npm run build"
   },
@@ -66,8 +67,10 @@
   "author": "pifreak",
   "license": "MIT",
   "peerDependencies": {
+    "@monaco-editor/react": ">=4.0.0",
     "@react-spring/three": ">=9.0.0",
     "@react-three/fiber": ">=8.0.0",
+    "monaco-editor": ">=0.50.0",
     "motely-wasm": "^10.2.0 || ^11.0.0 || ^12.0.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
@@ -92,16 +95,20 @@
     }
   },
   "devDependencies": {
+    "@monaco-editor/react": "^4.7.0",
     "@react-spring/three": "^10.0.3",
     "@react-three/fiber": "^9.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/three": "^0.184.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "monaco-editor": "^0.55.1",
     "motely-wasm": "^12.0.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-icons": "^5.6.0",
     "three": "^0.184.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^8.0.9"
   }
 }