jaml-ui 0.7.2 → 0.8.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/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/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

@@ -5,6 +5,7 @@ import { JamlMapPreview } from "./JamlMapPreview.js";
 import { JamlIdeToolbar } from "./JamlIdeToolbar.js";
 import { JamlIdeVisual } from "./JamlIdeVisual.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 +94,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 +105,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,7 +156,7 @@ 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: {
+                }, 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",
@@ -134,5 +168,6 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
                             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] })] }));
 }

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] }));
 }