jaml-ui 0.11.0 → 0.11.1

package/dist/components/JamlCodeEditor.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 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
@@ -40,10 +41,77 @@ const defineBalatroTheme = (monaco) => {
     });
 };
 export function JamlCodeEditor({ value, onChange, minHeight = 320, }) {
+    const editorRef = useRef(null);
+    const monacoRef = useRef(null);
+    // Suppress our onChange while we're applying a programmatic edit, so the
+    // streamed parent value doesn't loop back through onChange and bounce.
+    const suppressEmitRef = useRef(false);
+    // Capture initial value for the uncontrolled editor mount; subsequent
+    // updates flow through the useEffect below.
+    const initialValueRef = useRef(value);
+    // Track value across renders so we can apply only the streamed delta when
+    // the new value is a strict suffix-extension of what's already in the model.
+    const lastSyncedValueRef = useRef(value);
+    const handleMount = (editor, m) => {
+        editorRef.current = editor;
+        monacoRef.current = m;
+    };
+    useEffect(() => {
+        const editor = editorRef.current;
+        const m = monacoRef.current;
+        if (!editor || !m)
+            return;
+        const model = editor.getModel();
+        if (!model)
+            return;
+        const current = editor.getValue();
+        if (current === value) {
+            lastSyncedValueRef.current = value;
+            return;
+        }
+        suppressEmitRef.current = true;
+        try {
+            // Streaming-friendly path: when the new value just appends to what
+            // Monaco already has, push an insert at end-of-document. Monaco
+            // re-tokenizes only from the insertion point — no full-doc churn,
+            // no syntax-color strobe, no cursor reset.
+            if (value.length > current.length && value.startsWith(current)) {
+                const suffix = value.slice(current.length);
+                const lastLine = model.getLineCount();
+                const lastCol = model.getLineMaxColumn(lastLine);
+                model.applyEdits([
+                    {
+                        range: new m.Range(lastLine, lastCol, lastLine, lastCol),
+                        text: suffix,
+                        forceMoveMarkers: false,
+                    },
+                ]);
+            }
+            else {
+                // Real replacement (paste from outside, parent rewrite, undo, etc.).
+                editor.executeEdits("", [
+                    {
+                        range: model.getFullModelRange(),
+                        text: value,
+                        forceMoveMarkers: true,
+                    },
+                ]);
+                editor.pushUndoStop();
+            }
+        }
+        finally {
+            suppressEmitRef.current = false;
+            lastSyncedValueRef.current = value;
+        }
+    }, [value]);
     return (_jsxs("div", { style: { width: "100%", minHeight, background: JimboColorOption.DARKEST }, children: [_jsx("style", { children: `
         .monaco-editor .iPadShowKeyboard,
         .monaco-editor [class*="iPadShowKeyboard"] { display: none !important; }
-      ` }), _jsx(Editor, { height: `${minHeight}px`, defaultLanguage: "yaml", value: value, theme: "jaml-balatro-dark", onChange: (next) => onChange(next ?? ""), beforeMount: defineBalatroTheme, options: {
+      ` }), _jsx(Editor, { height: `${minHeight}px`, defaultLanguage: "yaml", defaultValue: initialValueRef.current, theme: "jaml-balatro-dark", onChange: (next) => {
+                    if (suppressEmitRef.current)
+                        return;
+                    onChange(next ?? "");
+                }, onMount: handleMount, beforeMount: defineBalatroTheme, options: {
                     minimap: { enabled: false },
                     scrollBeyondLastLine: false,
                     fontSize: 13,

package/dist/components/JamlIde.js

@@ -111,8 +111,10 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
     // 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) {
+    // Adjust-state-during-render: reparse when text changes (only if not
+    // controlled). Gated on `mode === "visual"` so we don't burn CPU parsing
+    // on every streamed token while the user is in the .jaml/map/results tab.
+    if (visualFilter === undefined && mode === "visual" && text !== lastParsedText) {
         try {
             const parsed = jamlTextToVisualFilter(text);
             setLastParsedText(text);

package/dist/components/JamlIdeToolbar.js

@@ -1,62 +1,22 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { JimboButton } from "../ui/panel.js";
+import { JimboTabs } from "../ui/jimboTabs.js";
 import { JimboColorOption } from "../ui/tokens.js";
-const TABS = [
-    { id: "visual", label: "Visual" },
-    { id: "code", label: ".jaml" },
-    { id: "map", label: "Map" },
-    { id: "results", label: "Results" },
-];
 export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className = "", onSearch, isSearching = false }) {
+    const tabs = [
+        { id: "visual", label: "Visual" },
+        { id: "code", label: ".jaml" },
+        { id: "map", label: "Map" },
+        { id: "results", label: resultCount > 0 ? `Results (${resultCount})` : "Results" },
+    ];
     return (_jsxs("div", { className: className, style: {
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
             gap: 8,
-            padding: "6px 10px",
+            padding: "10px 10px 6px",
             borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
             background: JimboColorOption.DARKEST,
-        }, 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] }));
+        }, children: [_jsx(JimboTabs, { tabs: tabs, activeTab: mode, onTabChange: (id) => onModeChange(id) }), onSearch ? (_jsx(JimboButton, { tone: isSearching ? "red" : "blue", size: "xs", onClick: onSearch, children: isSearching ? "Stop" : "Search" })) : null] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",