jaml-ui 0.22.5 → 0.24.0

package/README.md

@@ -1,147 +1,147 @@
-# jaml-ui
-
-React components, UI tokens, sprites, and utilities for Balatro/JAML apps.
-
-## Install
-
-```bash
-npm install jaml-ui react react-dom
-```
-
-## Package exports
-
-| Entry | Contents |
-|-------|----------|
-| `jaml-ui` | Game card components, JAML IDE, Analyzer Explorer, hooks |
-| `jaml-ui/ui` | Jimbo design system — JimboPanel, JimboButton, JimboModal, tokens |
-| `jaml-ui/core` | Pure asset helpers, sprite metadata, decode utilities (no React) |
-| `jaml-ui/motely` | motely-wasm decode helpers (requires `motely-wasm` peer) |
-| `jaml-ui/r3f` | 3D card component via React Three Fiber (requires r3f peers) |
-
-## Quick start
-
-```tsx
-import { JamlGameCard, AnalyzerExplorer, JamlIde } from "jaml-ui";
-import { JimboPanel, JimboButton } from "jaml-ui/ui";
-```
-
-### Game card
-
-```tsx
-import { JamlGameCard } from "jaml-ui";
-
-<JamlGameCard
-  type="joker"
-  card={{ name: "Blueprint", edition: "Foil", isEternal: true, scale: 1.5 }}
-/>
-```
-
-### Jimbo UI (Balatro design system)
-
-```tsx
-import { JimboPanel, JimboButton, JimboModal } from "jaml-ui/ui";
-import { JimboColorOption } from "jaml-ui/ui";
-
-<JimboPanel sway onBack={() => setOpen(false)}>
-  <JimboButton variant="primary" onClick={handleSearch}>Search</JimboButton>
-</JimboPanel>
-```
-
-Available variants: `primary`, `secondary`, `danger`, `back`, `ghost`
-
-### JAML IDE
-
-```tsx
-import { JamlIde } from "jaml-ui";
-
-<JamlIde
-  jaml={jaml}
-  onChange={setJaml}
-  searchResults={results}
-  onSearch={handleSearch}
-  isSearching={isSearching}
-/>
-```
-
-### Analyzer Explorer
-
-```tsx
-import { AnalyzerExplorer } from "jaml-ui";
-
-// antes: AnalyzerAnteView[] — stream from motely-wasm createSearchContext
-<AnalyzerExplorer antes={antes} totalAntes={8} highlights={highlights} />
-```
-
-### JAML Map Preview
-
-```tsx
-import { JamlMapPreview } from "jaml-ui";
-
-<JamlMapPreview jaml={jaml} />
-```
-
-## Asset handling
-
-By default sprites resolve from the package `assets/` directory via `import.meta.url`.
-
-Override at app startup:
-
-```ts
-import { setJamlAssetBaseUrl, clearJamlAssetBaseUrl } from "jaml-ui";
-
-setJamlAssetBaseUrl("/vendor/jaml-ui/");  // custom CDN
-clearJamlAssetBaseUrl();                   // back to default
-```
-
-## Core utilities
-
-```ts
-import { SPRITE_SHEETS, getSpriteData, resolveJamlAssetUrl } from "jaml-ui/core";
-```
-
-## Motely decode helpers
-
-```ts
-import { decodeMotelyItemName, motelyItemTypeName } from "jaml-ui/motely";
-```
-
-## 3D card (optional)
-
-```bash
-npm install three @react-three/fiber @react-three/drei @react-spring/three
-```
-
-```tsx
-import { Card3D } from "jaml-ui/r3f";
-
-<Card3D itemName="Blueprint" />
-```
-
-## Next.js
-
-Import pure helpers from `jaml-ui/core` for server components. For local workspace installs add:
-
-```ts
-// next.config.ts
-const nextConfig = { transpilePackages: ["jaml-ui"] };
-```
-
-## Search Worker Architecture
-
-The library provides `useAnalyzer` to interact with `motely-wasm`'s search context natively.
-**Important:** As of `motely-wasm@14.3.3`, the search worker utilizes Vite's `?worker&inline` pattern. You no longer need to pass `motelyWasmUrl`.
-
-Ensure `motely-wasm` is imported and booted at the module level in your application:
-
-```tsx
-import { boot } from "motely-wasm";
-boot(); // Call early in your application lifecycle
-```
-
-## Peer dependencies
-
-| Peer | Required for |
-|------|-------------|
-| `react`, `react-dom` | All components |
-| `motely-wasm ^14.3.3` | `jaml-ui/motely`, `AnalyzerExplorer`, `useAnalyzer` data |
-| `three`, `@react-three/fiber`, `@react-three/drei`, `@react-spring/three` | `jaml-ui/r3f` only |
+# jaml-ui
+
+React components, UI tokens, sprites, and utilities for Balatro/JAML apps.
+
+## Install
+
+```bash
+npm install jaml-ui react react-dom
+```
+
+## Package exports
+
+| Entry | Contents |
+|-------|----------|
+| `jaml-ui` | Game card components, JAML IDE, Analyzer Explorer, hooks |
+| `jaml-ui/ui` | Jimbo design system — JimboPanel, JimboButton, JimboModal, tokens |
+| `jaml-ui/core` | Pure asset helpers, sprite metadata, decode utilities (no React) |
+| `jaml-ui/motely` | motely-wasm decode helpers (requires `motely-wasm` peer) |
+| `jaml-ui/r3f` | 3D card component via React Three Fiber (requires r3f peers) |
+
+## Quick start
+
+```tsx
+import { JamlGameCard, AnalyzerExplorer, JamlIde } from "jaml-ui";
+import { JimboPanel, JimboButton } from "jaml-ui/ui";
+```
+
+### Game card
+
+```tsx
+import { JamlGameCard } from "jaml-ui";
+
+<JamlGameCard
+  type="joker"
+  card={{ name: "Blueprint", edition: "Foil", isEternal: true, scale: 1.5 }}
+/>
+```
+
+### Jimbo UI (Balatro design system)
+
+```tsx
+import { JimboPanel, JimboButton, JimboModal } from "jaml-ui/ui";
+import { JimboColorOption } from "jaml-ui/ui";
+
+<JimboPanel sway onBack={() => setOpen(false)}>
+  <JimboButton variant="primary" onClick={handleSearch}>Search</JimboButton>
+</JimboPanel>
+```
+
+Available variants: `primary`, `secondary`, `danger`, `back`, `ghost`
+
+### JAML IDE
+
+```tsx
+import { JamlIde } from "jaml-ui";
+
+<JamlIde
+  jaml={jaml}
+  onChange={setJaml}
+  searchResults={results}
+  onSearch={handleSearch}
+  isSearching={isSearching}
+/>
+```
+
+### Analyzer Explorer
+
+```tsx
+import { AnalyzerExplorer } from "jaml-ui";
+
+// antes: AnalyzerAnteView[] — stream from motely-wasm createSearchContext
+<AnalyzerExplorer antes={antes} totalAntes={8} highlights={highlights} />
+```
+
+### JAML Map Preview
+
+```tsx
+import { JamlMapPreview } from "jaml-ui";
+
+<JamlMapPreview jaml={jaml} />
+```
+
+## Asset handling
+
+By default sprites resolve from the package `assets/` directory via `import.meta.url`.
+
+Override at app startup:
+
+```ts
+import { setJamlAssetBaseUrl, clearJamlAssetBaseUrl } from "jaml-ui";
+
+setJamlAssetBaseUrl("/vendor/jaml-ui/");  // custom CDN
+clearJamlAssetBaseUrl();                   // back to default
+```
+
+## Core utilities
+
+```ts
+import { SPRITE_SHEETS, getSpriteData, resolveJamlAssetUrl } from "jaml-ui/core";
+```
+
+## Motely decode helpers
+
+```ts
+import { decodeMotelyItemName, motelyItemTypeName } from "jaml-ui/motely";
+```
+
+## 3D card (optional)
+
+```bash
+npm install three @react-three/fiber @react-three/drei @react-spring/three
+```
+
+```tsx
+import { Card3D } from "jaml-ui/r3f";
+
+<Card3D itemName="Blueprint" />
+```
+
+## Next.js
+
+Import pure helpers from `jaml-ui/core` for server components. For local workspace installs add:
+
+```ts
+// next.config.ts
+const nextConfig = { transpilePackages: ["jaml-ui"] };
+```
+
+## Search Worker Architecture
+
+The library provides `useAnalyzer` to interact with `motely-wasm`'s search context natively.
+**Important:** As of `motely-wasm@14.3.3`, the search worker utilizes Vite's `?worker&inline` pattern. You no longer need to pass `motelyWasmUrl`.
+
+Ensure `motely-wasm` is imported and booted at the module level in your application:
+
+```tsx
+import { boot } from "motely-wasm";
+boot(); // Call early in your application lifecycle
+```
+
+## Peer dependencies
+
+| Peer | Required for |
+|------|-------------|
+| `react`, `react-dom` | All components |
+| `motely-wasm ^14.3.3` | `jaml-ui/motely`, `AnalyzerExplorer`, `useAnalyzer` data |
+| `three`, `@react-three/fiber`, `@react-three/drei`, `@react-spring/three` | `jaml-ui/r3f` only |

package/dist/components/JamlCodeEditor.d.ts

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

package/dist/components/JamlCodeEditor.js

@@ -1,102 +1,131 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import Editor from "@monaco-editor/react";
+import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection, placeholder as cmPlaceholder } from "@codemirror/view";
+import { EditorState } from "@codemirror/state";
+import { yaml } from "@codemirror/lang-yaml";
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { syntaxHighlighting, HighlightStyle } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
 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, }) {
-    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 balatroHighlight = HighlightStyle.define([
+    { tag: tags.comment, color: JimboColorOption.GREY, fontStyle: "italic" },
+    { tag: tags.keyword, color: JimboColorOption.RED },
+    { tag: tags.string, color: JimboColorOption.GOLD_TEXT },
+    { tag: tags.number, color: JimboColorOption.BLUE },
+    { tag: tags.bool, color: JimboColorOption.BLUE },
+    { tag: tags.null, color: JimboColorOption.GREY },
+    { tag: tags.propertyName, color: JimboColorOption.GREEN_TEXT },
+    { tag: tags.typeName, color: JimboColorOption.GREEN_TEXT },
+]);
+const balatroTheme = EditorView.theme({
+    "&": {
+        backgroundColor: JimboColorOption.DARKEST,
+        color: JimboColorOption.WHITE,
+        fontSize: "13px",
+        height: "100%",
+    },
+    ".cm-content": {
+        fontFamily: "'m6x11mono', 'm6x11plus', ui-monospace, monospace",
+        lineHeight: "22px",
+        padding: "12px 0",
+        caretColor: JimboColorOption.GOLD_TEXT,
+        minHeight: "100%",
+    },
+    ".cm-gutters": {
+        backgroundColor: JimboColorOption.DARKEST,
+        color: JimboColorOption.GREY,
+        border: "none",
+    },
+    ".cm-lineNumbers .cm-gutterElement": {
+        minWidth: "2ch",
+        padding: "0 6px 0 8px",
+    },
+    ".cm-activeLineGutter": {
+        color: JimboColorOption.GOLD_TEXT,
+        backgroundColor: "transparent",
+    },
+    ".cm-activeLine": {
+        backgroundColor: `${JimboColorOption.BLACK}20`,
+    },
+    ".cm-selectionBackground": {
+        backgroundColor: `${JimboColorOption.WHITE}20 !important`,
+    },
+    "&.cm-focused .cm-selectionBackground": {
+        backgroundColor: `${JimboColorOption.WHITE}20`,
+    },
+    ".cm-cursor, .cm-dropCursor": {
+        borderLeftColor: JimboColorOption.GOLD_TEXT,
+    },
+    ".cm-scroller": {
+        overflow: "auto",
+    },
+    ".cm-placeholder": {
+        color: JimboColorOption.GREY,
+        fontStyle: "italic",
+    },
+}, { dark: true });
+export function JamlCodeEditor({ value, onChange, placeholder = "", minHeight = 320, }) {
+    const containerRef = useRef(null);
+    const viewRef = useRef(null);
     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;
-    };
+    const onChangeRef = useRef(onChange);
+    useEffect(() => { onChangeRef.current = onChange; });
     useEffect(() => {
-        const editor = editorRef.current;
-        const m = monacoRef.current;
-        if (!editor || !m)
+        if (!containerRef.current)
             return;
-        const model = editor.getModel();
-        if (!model)
+        const view = new EditorView({
+            state: EditorState.create({
+                doc: lastSyncedValueRef.current,
+                extensions: [
+                    history(),
+                    lineNumbers(),
+                    highlightActiveLine(),
+                    drawSelection(),
+                    yaml(),
+                    syntaxHighlighting(balatroHighlight),
+                    balatroTheme,
+                    EditorView.lineWrapping,
+                    keymap.of([indentWithTab, ...defaultKeymap, ...historyKeymap]),
+                    ...(placeholder ? [cmPlaceholder(placeholder)] : []),
+                    EditorView.updateListener.of((update) => {
+                        if (update.docChanged && !suppressEmitRef.current) {
+                            onChangeRef.current(update.state.doc.toString());
+                        }
+                    }),
+                ],
+            }),
+            parent: containerRef.current,
+        });
+        viewRef.current = view;
+        return () => {
+            view.destroy();
+            viewRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view)
             return;
-        const current = editor.getValue();
+        const current = view.state.doc.toString();
         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.
+            // Streaming-friendly: append only the suffix when new value extends current.
             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,
-                    },
-                ]);
+                view.dispatch({
+                    changes: { from: view.state.doc.length, insert: value.slice(current.length) },
+                });
             }
             else {
-                // Real replacement (paste from outside, parent rewrite, undo, etc.).
-                editor.executeEdits("", [
-                    {
-                        range: model.getFullModelRange(),
-                        text: value,
-                        forceMoveMarkers: true,
-                    },
-                ]);
-                editor.pushUndoStop();
+                view.dispatch({
+                    changes: { from: 0, to: view.state.doc.length, insert: value },
+                });
             }
         }
         finally {
@@ -104,35 +133,5 @@ export function JamlCodeEditor({ value, onChange, minHeight = 320, }) {
             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", 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,
-                    lineHeight: 22,
-                    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-                    lineNumbers: "on",
-                    lineNumbersMinChars: 2,
-                    lineDecorationsWidth: 4,
-                    glyphMargin: false,
-                    folding: false,
-                    automaticLayout: true,
-                    padding: { top: 12, bottom: 12 },
-                    wordWrap: "on",
-                    formatOnPaste: true,
-                    formatOnType: true,
-                    renderLineHighlight: "line",
-                    scrollbar: { verticalScrollbarSize: 8, horizontalScrollbarSize: 8 },
-                    // Mobile/chat-WebView UX: kill the context menu ("Change All Occurrences" etc. covering half
-                    // the file on long-press) and the accessibility-help keyboard widget that's just clutter when
-                    // the OS keyboard is already open.
-                    contextmenu: false,
-                    accessibilitySupport: "off",
-                } })] }));
+    return (_jsx("div", { ref: containerRef, style: { width: "100%", minHeight, background: JimboColorOption.DARKEST } }));
 }