jaml-ui 0.8.0 → 0.9.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 pifreak
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 pifreak
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,135 +1,135 @@
-# 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"] };
-```
-
-## Peer dependencies
-
-| Peer | Required for |
-|------|-------------|
-| `react`, `react-dom` | All components |
-| `motely-wasm ^10 \|\| ^11 \|\| ^12` | `jaml-ui/motely`, `AnalyzerExplorer` 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"] };
+```
+
+## Peer dependencies
+
+| Peer | Required for |
+|------|-------------|
+| `react`, `react-dom` | All components |
+| `motely-wasm ^10 \|\| ^11 \|\| ^12` | `jaml-ui/motely`, `AnalyzerExplorer` data |
+| `three`, `@react-three/fiber`, `@react-three/drei`, `@react-spring/three` | `jaml-ui/r3f` only |

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.js

@@ -4,6 +4,7 @@ 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 }) {
@@ -156,18 +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" ? (_jsx(JamlIdeVisual, { filter: activeFilter, onChange: handleVisualFilterChange })) : 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,
-                            boxSizing: "border-box",
-                        } })) : 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/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/hooks/searchWorkerCode.js

@@ -1,62 +1,62 @@
 // Worker code as an inline string — created as a Blob URL at runtime.
 // This avoids bundler/import.meta.url issues when shipped as an npm package.
-export const SEARCH_WORKER_CODE = `
-let MotelyWasm = null;
-let MotelyWasmEvents = null;
-let activeSearch = null;
-
-self.addEventListener('message', async function(e) {
-  const msg = e.data;
-
-  if (msg.type === 'init') {
-    try {
-      const mod = await import(msg.url);
-      await mod.default.boot();
-      MotelyWasm = mod.MotelyWasm;
-      MotelyWasmEvents = mod.MotelyWasmEvents;
-      self.postMessage({ type: 'ready' });
-    } catch (err) {
-      self.postMessage({ type: 'error', message: String(err) });
-    }
-    return;
-  }
-
-  if (msg.type === 'start') {
-    if (!MotelyWasm) { self.postMessage({ type: 'error', message: 'Not initialized' }); return; }
-    const validation = MotelyWasm.validateJaml(msg.jaml);
-    if (validation !== 'valid') { self.postMessage({ type: 'error', message: validation }); return; }
-
-    let rId, pId, cId;
-    function cleanup() {
-      MotelyWasmEvents.onResult.unsubscribeById(rId);
-      MotelyWasmEvents.onProgress.unsubscribeById(pId);
-      MotelyWasmEvents.onComplete.unsubscribeById(cId);
-      activeSearch = null;
-    }
-
-    rId = MotelyWasmEvents.onResult.subscribe(function(seed, score) {
-      self.postMessage({ type: 'result', seed, score });
-    });
-    pId = MotelyWasmEvents.onProgress.subscribe(function(searched, matching) {
-      self.postMessage({ type: 'progress', searched: searched.toString(), matching: matching.toString() });
-    });
-    cId = MotelyWasmEvents.onComplete.subscribe(function(status, searched, matched) {
-      cleanup();
-      self.postMessage({ type: 'complete', status, searched: searched.toString(), matched: matched.toString() });
-    });
-
-    try {
-      activeSearch = MotelyWasm.startRandomSearch(msg.jaml, msg.count);
-    } catch (err) {
-      cleanup();
-      self.postMessage({ type: 'error', message: String(err) });
-    }
-    return;
-  }
-
-  if (msg.type === 'stop') {
-    if (activeSearch) { activeSearch.cancel(); activeSearch = null; }
-    self.postMessage({ type: 'cancelled' });
-  }
-});
+export const SEARCH_WORKER_CODE = `
+let MotelyWasm = null;
+let MotelyWasmEvents = null;
+let activeSearch = null;
+
+self.addEventListener('message', async function(e) {
+  const msg = e.data;
+
+  if (msg.type === 'init') {
+    try {
+      const mod = await import(msg.url);
+      await mod.default.boot();
+      MotelyWasm = mod.MotelyWasm;
+      MotelyWasmEvents = mod.MotelyWasmEvents;
+      self.postMessage({ type: 'ready' });
+    } catch (err) {
+      self.postMessage({ type: 'error', message: String(err) });
+    }
+    return;
+  }
+
+  if (msg.type === 'start') {
+    if (!MotelyWasm) { self.postMessage({ type: 'error', message: 'Not initialized' }); return; }
+    const validation = MotelyWasm.validateJaml(msg.jaml);
+    if (validation !== 'valid') { self.postMessage({ type: 'error', message: validation }); return; }
+
+    let rId, pId, cId;
+    function cleanup() {
+      MotelyWasmEvents.onResult.unsubscribeById(rId);
+      MotelyWasmEvents.onProgress.unsubscribeById(pId);
+      MotelyWasmEvents.onComplete.unsubscribeById(cId);
+      activeSearch = null;
+    }
+
+    rId = MotelyWasmEvents.onResult.subscribe(function(seed, score) {
+      self.postMessage({ type: 'result', seed, score });
+    });
+    pId = MotelyWasmEvents.onProgress.subscribe(function(searched, matching) {
+      self.postMessage({ type: 'progress', searched: searched.toString(), matching: matching.toString() });
+    });
+    cId = MotelyWasmEvents.onComplete.subscribe(function(status, searched, matched) {
+      cleanup();
+      self.postMessage({ type: 'complete', status, searched: searched.toString(), matched: matched.toString() });
+    });
+
+    try {
+      activeSearch = MotelyWasm.startRandomSearch(msg.jaml, msg.count);
+    } catch (err) {
+      cleanup();
+      self.postMessage({ type: 'error', message: String(err) });
+    }
+    return;
+  }
+
+  if (msg.type === 'stop') {
+    if (activeSearch) { activeSearch.cancel(); activeSearch = null; }
+    self.postMessage({ type: 'cancelled' });
+  }
+});
 `;

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/ui/footer.js

@@ -9,10 +9,10 @@ const SUITS = [
 ];
 const CYCLE = '5s';
 export function JimboBalatroFooter({ hidden = false, className = '' }) {
-    return (_jsxs("div", { className: ['fixed right-0 bottom-0 left-0 w-screen min-w-full transition-opacity duration-200', hidden ? 'pointer-events-none opacity-0' : 'opacity-100', className].filter(Boolean).join(' '), children: [_jsx("div", { style: { width: '100%', borderTop: '1px solid rgba(255,255,255,0.1)', background: 'rgba(0,0,0,0.9)', padding: '0 1rem 3px', textAlign: 'center' }, children: _jsxs("p", { style: { fontFamily: 'm6x11plus, monospace', fontSize: 'clamp(11px, 0.8vw + 8px, 14px)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '0 0.5rem', color: 'white', margin: 0 }, children: [_jsx("span", { children: "Not affiliated with LocalThunk or PlayStack" }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }, children: ["Made with", ' ', _jsx("span", { style: { position: 'relative', display: 'inline-block', width: '1.5em', height: '1em', verticalAlign: 'middle' }, children: SUITS.map(({ char, kf }) => (_jsx("span", { style: { position: 'absolute', inset: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: 0, animationName: kf, animationDuration: CYCLE, animationDelay: '0s', animationIterationCount: 'infinite', animationTimingFunction: 'ease-out' }, children: char }, char))) }), ' ', "for the", ' ', _jsx("a", { href: "https://playbalatro.com", target: "_blank", rel: "noopener noreferrer", style: { color: JimboColorOption.GOLD, textDecoration: 'none' }, children: "Balatro" }), ' ', "community"] })] }) }), _jsx("style", { children: `
-        @keyframes jaml-heart   { 0%{opacity:0;transform:scale(1)} 1%{opacity:1;transform:scale(1.45)} 3.5%{opacity:1;transform:scale(1)} 61.5%{opacity:1;transform:scale(1)} 62%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-spade   { 0%,61.5%{opacity:0} 62%{opacity:1;transform:scale(1.45)} 64.5%{opacity:1;transform:scale(1)} 71.5%{opacity:1} 72%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-diamond { 0%,71.5%{opacity:0} 72%{opacity:1;transform:scale(1.45)} 74.5%{opacity:1;transform:scale(1)} 81.5%{opacity:1} 82%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-club    { 0%,81.5%{opacity:0} 82%{opacity:1;transform:scale(1.45)} 84.5%{opacity:1;transform:scale(1)} 95%{opacity:1}  96%{opacity:0} 100%{opacity:0} }
+    return (_jsxs("div", { className: ['fixed right-0 bottom-0 left-0 w-screen min-w-full transition-opacity duration-200', hidden ? 'pointer-events-none opacity-0' : 'opacity-100', className].filter(Boolean).join(' '), children: [_jsx("div", { style: { width: '100%', borderTop: '1px solid rgba(255,255,255,0.1)', background: 'rgba(0,0,0,0.9)', padding: '0 1rem 3px', textAlign: 'center' }, children: _jsxs("p", { style: { fontFamily: 'm6x11plus, monospace', fontSize: 'clamp(11px, 0.8vw + 8px, 14px)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '0 0.5rem', color: 'white', margin: 0 }, children: [_jsx("span", { children: "Not affiliated with LocalThunk or PlayStack" }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }, children: ["Made with", ' ', _jsx("span", { style: { position: 'relative', display: 'inline-block', width: '1.5em', height: '1em', verticalAlign: 'middle' }, children: SUITS.map(({ char, kf }) => (_jsx("span", { style: { position: 'absolute', inset: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: 0, animationName: kf, animationDuration: CYCLE, animationDelay: '0s', animationIterationCount: 'infinite', animationTimingFunction: 'ease-out' }, children: char }, char))) }), ' ', "for the", ' ', _jsx("a", { href: "https://playbalatro.com", target: "_blank", rel: "noopener noreferrer", style: { color: JimboColorOption.GOLD, textDecoration: 'none' }, children: "Balatro" }), ' ', "community"] })] }) }), _jsx("style", { children: `
+        @keyframes jaml-heart   { 0%{opacity:0;transform:scale(1)} 1%{opacity:1;transform:scale(1.45)} 3.5%{opacity:1;transform:scale(1)} 61.5%{opacity:1;transform:scale(1)} 62%{opacity:0} 100%{opacity:0} }
+        @keyframes jaml-spade   { 0%,61.5%{opacity:0} 62%{opacity:1;transform:scale(1.45)} 64.5%{opacity:1;transform:scale(1)} 71.5%{opacity:1} 72%{opacity:0} 100%{opacity:0} }
+        @keyframes jaml-diamond { 0%,71.5%{opacity:0} 72%{opacity:1;transform:scale(1.45)} 74.5%{opacity:1;transform:scale(1)} 81.5%{opacity:1} 82%{opacity:0} 100%{opacity:0} }
+        @keyframes jaml-club    { 0%,81.5%{opacity:0} 82%{opacity:1;transform:scale(1.45)} 84.5%{opacity:1;transform:scale(1)} 95%{opacity:1}  96%{opacity:0} 100%{opacity:0} }
       ` })] }));
 }