jaml-ui 0.8.0 → 0.10.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.8.0";
+const JAML_UI_VERSION = "0.10.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/CardFan.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface CardFanProps {
+    /** Total number of cards to render (used when `cards` is not provided). */
+    count?: number;
+    /** Array of cards as "rank_suit" strings (e.g. ["2_C", "10_H", "A_S"]). Takes priority over `count`. */
+    cards?: string[];
+    /** Optional label below the fan. */
+    label?: string;
+    showLabel?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Parabolic card fan with rotation + arc overlap. Ported from weejoker's
+ * CardFan.tsx. Uses mathematical transforms (inline style, not Tailwind)
+ * to produce the authentic Balatro spread: cards overlap toward the
+ * center, tilt outward, sit higher at the edges.
+ *
+ * Sizing, overlap, and max rotation auto-scale with card count so full
+ * 52-card decks render cleanly and tiny 3-card hands look deliberate.
+ */
+export declare function CardFan({ count, cards, className, style, label, showLabel }: CardFanProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CardFan.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RealPlayingCard } from './PlayingCard.js';
+import { JimboColorOption } from '../ui/tokens.js';
+import { JimboText } from '../ui/jimboText.js';
+const RANK_MAP = {
+    '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9', '10': '10',
+    J: 'Jack', Q: 'Queen', K: 'King', A: 'Ace',
+};
+const SUIT_MAP = {
+    H: 'Hearts', C: 'Clubs', D: 'Diamonds', S: 'Spades',
+};
+function parseJamlCard(input) {
+    const [r, s] = input.split('_');
+    return {
+        rank: RANK_MAP[r] ?? '2',
+        suit: SUIT_MAP[s] ?? 'Clubs',
+    };
+}
+/**
+ * Parabolic card fan with rotation + arc overlap. Ported from weejoker's
+ * CardFan.tsx. Uses mathematical transforms (inline style, not Tailwind)
+ * to produce the authentic Balatro spread: cards overlap toward the
+ * center, tilt outward, sit higher at the edges.
+ *
+ * Sizing, overlap, and max rotation auto-scale with card count so full
+ * 52-card decks render cleanly and tiny 3-card hands look deliberate.
+ */
+export function CardFan({ count = 0, cards, className = '', style, label, showLabel = true }) {
+    const displayCount = cards ? cards.length : count;
+    const cardSize = displayCount > 40 ? 46
+        : displayCount > 30 ? 32
+            : displayCount > 12 ? 36
+                : displayCount > 8 ? 42
+                    : displayCount > 5 ? 48
+                        : 54;
+    const overlap = displayCount > 40 ? 0.88
+        : displayCount > 30 ? 0.85
+            : displayCount > 15 ? 0.75
+                : displayCount > 6 ? 0.60
+                    : 0.45;
+    const cardSpacing = cardSize * (1 - overlap);
+    const maxRotation = displayCount > 40 ? 40
+        : displayCount > 20 ? 30
+            : displayCount > 10 ? 15
+                : 25;
+    const cardsHeight = 120;
+    return (_jsxs("div", { className: className, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 4,
+            ...style,
+        }, children: [_jsx("div", { style: { position: 'relative', width: '100%', height: cardsHeight }, children: displayCount > 0 ? (Array.from({ length: displayCount }).map((_, i) => {
+                    const centerIndex = (displayCount - 1) / 2;
+                    const offset = i - centerIndex;
+                    const xPos = offset * cardSpacing;
+                    // Parabolic lift — outer cards sit higher than center (bowed upward)
+                    const yOffset = Math.pow(Math.abs(offset / (centerIndex || 1)), 2) * (displayCount > 20 ? 20 : 10);
+                    const rotation = (offset / (centerIndex || 1)) * maxRotation;
+                    const parsed = cards ? parseJamlCard(cards[i]) : { rank: '2', suit: 'Clubs' };
+                    return (_jsx("div", { style: {
+                            position: 'absolute',
+                            left: '50%',
+                            bottom: 0,
+                            transform: `translateX(calc(-50% + ${xPos}px)) translateY(${yOffset}px) rotate(${rotation}deg)`,
+                            transformOrigin: 'bottom center',
+                            zIndex: i,
+                        }, children: _jsx(RealPlayingCard, { rank: parsed.rank, suit: parsed.suit, size: cardSize, style: { filter: `drop-shadow(0 2px 3px ${JimboColorOption.BLACK}66)` } }) }, i));
+                })) : (_jsx("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '100%',
+                        height: '100%',
+                        background: `${JimboColorOption.WHITE}0d`,
+                        border: `1px solid ${JimboColorOption.WHITE}0d`,
+                        borderRadius: 8,
+                    }, children: _jsx(JimboText, { size: "xs", uppercase: true, tone: "grey", children: "Deck Empty" }) })) }), label && showLabel ? _jsx(JimboText, { size: "xs", uppercase: true, tone: "grey", children: label }) : null] }));
+}

package/dist/components/DeckSprite.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare const DECK_SPRITE_POS: Record<string, {
+    x: number;
+    y: number;
+}>;
+export declare const STAKE_SPRITE_POS: Record<string, {
+    x: number;
+    y: number;
+}>;
+export interface DeckSpriteProps {
+    /** Deck name — case-insensitive, "Deck" suffix tolerated (e.g. "Erratic Deck" → "erratic"). */
+    deck: string;
+    /** Optional stake name to overlay its sticker on the deck. */
+    stake?: string;
+    /** Rendered width in pixels. Height is scaled proportionally from the 142x190 sprite. */
+    size?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Balatro deck box sprite — optionally overlaid with a stake sticker.
+ * Draws from the Enhancers.png atlas (deck thumbnails live in the bottom
+ * two rows) and stickers.png for the stake band. Uses jaml-ui's
+ * `resolveJamlAssetUrl` so consumers can override the CDN base.
+ */
+export declare function DeckSprite({ deck, stake, size, className, style }: DeckSpriteProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DeckSprite.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveJamlAssetUrl } from '../assets.js';
+export const DECK_SPRITE_POS = {
+    red: { x: 0, y: 0 },
+    nebula: { x: 3, y: 0 },
+    locked: { x: 4, y: 0 },
+    blue: { x: 0, y: 2 },
+    yellow: { x: 1, y: 2 },
+    green: { x: 2, y: 2 },
+    black: { x: 3, y: 2 },
+    plasma: { x: 4, y: 2 },
+    ghost: { x: 6, y: 2 },
+    magic: { x: 0, y: 3 },
+    checkered: { x: 1, y: 3 },
+    erratic: { x: 2, y: 3 },
+    abandoned: { x: 3, y: 3 },
+    painted: { x: 4, y: 3 },
+    challenge: { x: 0, y: 4 },
+    anaglyph: { x: 2, y: 4 },
+    zodiac: { x: 3, y: 4 },
+};
+export const STAKE_SPRITE_POS = {
+    white: { x: 1, y: 0 },
+    red: { x: 2, y: 0 },
+    green: { x: 3, y: 0 },
+    blue: { x: 4, y: 0 },
+    black: { x: 0, y: 1 },
+    purple: { x: 1, y: 1 },
+    orange: { x: 2, y: 1 },
+    gold: { x: 3, y: 1 },
+};
+const SPRITE_WIDTH = 142;
+const SPRITE_HEIGHT = 190;
+const DECK_COLS = 7;
+const DECK_ROWS = 5;
+const STICKER_COLS = 5;
+const STICKER_ROWS = 3;
+/**
+ * Balatro deck box sprite — optionally overlaid with a stake sticker.
+ * Draws from the Enhancers.png atlas (deck thumbnails live in the bottom
+ * two rows) and stickers.png for the stake band. Uses jaml-ui's
+ * `resolveJamlAssetUrl` so consumers can override the CDN base.
+ */
+export function DeckSprite({ deck, stake, size = 50, className = '', style }) {
+    const deckKey = (deck || 'erratic').toLowerCase().replace(/\s*deck$/, '').trim();
+    const deckPos = DECK_SPRITE_POS[deckKey] ?? DECK_SPRITE_POS.erratic;
+    const stakePos = stake ? STAKE_SPRITE_POS[stake.toLowerCase().replace(/\s*stake$/, '').trim()] : null;
+    const scale = size / SPRITE_WIDTH;
+    const displayHeight = SPRITE_HEIGHT * scale;
+    return (_jsxs("div", { className: className, style: {
+            position: 'relative',
+            width: size,
+            height: displayHeight,
+            ...style,
+        }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    backgroundImage: `url(${resolveJamlAssetUrl('enhancers')})`,
+                    backgroundSize: `${DECK_COLS * 100}% ${DECK_ROWS * 100}%`,
+                    backgroundPosition: `${(deckPos.x / (DECK_COLS - 1)) * 100}% ${(deckPos.y / (DECK_ROWS - 1)) * 100}%`,
+                    backgroundRepeat: 'no-repeat',
+                    imageRendering: 'pixelated',
+                } }), stakePos ? (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    backgroundImage: `url(${resolveJamlAssetUrl('stickers')})`,
+                    backgroundSize: `${STICKER_COLS * 100}% ${STICKER_ROWS * 100}%`,
+                    backgroundPosition: `${(stakePos.x / (STICKER_COLS - 1)) * 100}% ${(stakePos.y / (STICKER_ROWS - 1)) * 100}%`,
+                    backgroundRepeat: 'no-repeat',
+                    imageRendering: 'pixelated',
+                } })) : null] }));
+}

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