jaml-ui 0.24.14 → 0.24.16

package/dist/components/JamlCurator.js

@@ -40,7 +40,7 @@ export function JamlCurator({ motely, motelyWasmUrl }) {
     };
     return (_jsx("div", { style: {
             width: "100%",
-            maxWidth: 375,
+            maxWidth: 320,
             height: "100svh",
             margin: "0 auto",
             position: "relative",

package/dist/components/JamlIde.js

@@ -11,7 +11,6 @@ import { JimboColorOption } from "../ui/tokens.js";
 import { JimboModal } from "../ui/panel.js";
 import { jamlTextToVisualFilter, visualFilterToJamlText } from "../utils/jamlVisualFilter.js";
 import { DeckSprite } from "./DeckSprite.js";
-import { DECK_OPTIONS, STAKE_OPTIONS } from "../lib/data/constants.js";
 const CATEGORY_CONFIG_MAP = {
     voucher: VOUCHER_PICKER_CONFIG,
     tag: TAG_PICKER_CONFIG,
@@ -104,25 +103,20 @@ function setRootValue(jaml, key, value) {
     const trimmed = jaml.trimEnd();
     return trimmed.length > 0 ? `${line}\n${trimmed}` : line;
 }
-function DeckStakeSelector({ jaml, onChange, }) {
+import { RunConfigModal } from "./RunConfigModal.js";
+function DeckStakeSelector({ jaml, onChange, onSearch, }) {
     const deck = readRootValue(jaml, "deck", "Red");
     const stake = readRootValue(jaml, "stake", "White");
-    const setDeck = (nextDeck) => onChange(setRootValue(jaml, "deck", nextDeck));
-    const setStake = (nextStake) => onChange(setRootValue(jaml, "stake", nextStake));
-    return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [_jsx(DeckSprite, { deck: deck, stake: stake, size: compactDeckSpriteSize }), _jsx("select", { value: deck, onChange: (event) => setDeck(event.currentTarget.value), style: selectorStyle, children: DECK_OPTIONS.map((option) => (_jsx("option", { value: option, children: option }, option))) }), _jsx("select", { value: stake, onChange: (event) => setStake(event.currentTarget.value), style: selectorStyle, children: STAKE_OPTIONS.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }));
+    const [modalOpen, setModalOpen] = useState(false);
+    const handleApply = (nextDeck, nextStake) => {
+        let next = setRootValue(jaml, "deck", nextDeck);
+        next = setRootValue(next, "stake", nextStake);
+        onChange(next);
+        onSearch?.();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setModalOpen(true), className: "j-btn j-btn--red", style: { height: 32, padding: 0, borderRadius: 8, overflow: 'hidden' }, children: _jsxs("div", { className: "j-btn__face", style: { display: 'flex', alignItems: 'center', gap: 8, padding: '0 8px 0 4px', height: '100%' }, children: [_jsx(DeckSprite, { deck: deck, stake: stake, size: compactDeckSpriteSize }), _jsxs("span", { style: { fontFamily: "m6x11plus, monospace", fontSize: 14 }, children: [deck, " / ", stake] })] }) }), _jsx(RunConfigModal, { open: modalOpen, onClose: () => setModalOpen(false), deck: deck, stake: stake, onChange: handleApply })] }));
 }
 const compactDeckSpriteSize = 24;
-const selectorStyle = {
-    minWidth: 0,
-    height: 28,
-    borderRadius: 8,
-    border: `1px solid ${JimboColorOption.PANEL_EDGE}`,
-    background: JimboColorOption.DARKEST,
-    color: JimboColorOption.WHITE,
-    fontFamily: "m6x11plus, monospace",
-    fontSize: 12,
-    padding: "0 8px",
-};
 export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", searchResults = [], className = "", style, title = "JAML IDE", subtitle = "Jimbo's Ante Markup Language", compactHeader = false, actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, hideFooter = false, visualFilter, onVisualFilterChange, }) {
     const [mode, setMode] = useState(defaultMode);
     const [internalText, setInternalText] = useState(jaml ?? defaultJaml ?? "");
@@ -223,5 +217,5 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
                     padding: compactHeader ? "8px 10px" : "10px 14px",
                     borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
                     background: JimboColorOption.TEAL_GREY,
-                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: "normal", fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), subtitle ? _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: subtitle }) : null] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }, children: [_jsx(DeckStakeSelector, { jaml: text, onChange: handleTextChange }), actions] })] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: mode === "map" ? "hidden" : "auto", background: JimboColorOption.DARKEST }, children: [mode === "visual" ? (_jsx(JamlIdeVisual, { filter: activeFilter, onChange: handleVisualFilterChange, onAddClause: handleAddClause })) : null, mode === "code" ? (_jsx(JamlCodeEditor, { value: text, onChange: handleTextChange, placeholder: codePlaceholder })) : null, mode === "map" ? _jsx(JamlMapEditor, { onChange: handleTextChange }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results, jaml: text }) })) : null] }), !hideFooter && _jsx(JimboBalatroFooter, {}), _jsx(JimboModal, { open: addZone !== null, onClose: handlePickerClose, children: addZone !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: (cat) => setPickerFlow(cat) })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handlePickerSelect, onCancel: handlePickerClose })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handlePickerSelect, onCancel: handlePickerClose }))) })] }));
+                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: "normal", fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), subtitle ? _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: subtitle }) : null] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }, children: [_jsx(DeckStakeSelector, { jaml: text, onChange: handleTextChange, onSearch: onSearch }), actions] })] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: mode === "map" ? "hidden" : "auto", background: JimboColorOption.DARKEST }, children: [mode === "visual" ? (_jsx(JamlIdeVisual, { filter: activeFilter, onChange: handleVisualFilterChange, onAddClause: handleAddClause })) : null, mode === "code" ? (_jsx(JamlCodeEditor, { value: text, onChange: handleTextChange, placeholder: codePlaceholder })) : null, mode === "map" ? _jsx(JamlMapEditor, { onChange: handleTextChange }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results, jaml: text }) })) : null] }), !hideFooter && _jsx(JimboBalatroFooter, {}), _jsx(JimboModal, { open: addZone !== null, onClose: handlePickerClose, children: addZone !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: (cat) => setPickerFlow(cat) })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handlePickerSelect, onCancel: handlePickerClose })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handlePickerSelect, onCancel: handlePickerClose }))) })] }));
 }

package/dist/components/RunConfigModal.d.ts

@@ -0,0 +1,8 @@
+export interface RunConfigModalProps {
+    open: boolean;
+    onClose: () => void;
+    deck: string;
+    stake: string;
+    onChange: (deck: string, stake: string) => void;
+}
+export declare function RunConfigModal({ open, onClose, deck, stake, onChange, }: RunConfigModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/RunConfigModal.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { JimboModal } from "../ui/panel.js";
+import { DECK_OPTIONS, STAKE_OPTIONS } from "../lib/data/constants.js";
+import { DeckSprite } from "./DeckSprite.js";
+import { StakeSprite } from "../ui/sprites.js";
+import { JimboColorOption } from "../ui/tokens.js";
+const DECK_DESCRIPTIONS = {
+    "Red": "+1 discard every round",
+    "Blue": "+1 hand every round",
+    "Yellow": "Start with extra $10",
+    "Green": "At end of each Round:\n$2 per remaining Hand,\n$1 per remaining Discard.\nEarn no Interest",
+    "Black": "+1 Joker slot\n-1 hand every round",
+    "Magic": "Start run with the\nCrystal Ball voucher\nand 2 copies of The Fool",
+    "Nebula": "Start run with the\nTelescope voucher\n-1 consumable slot",
+    "Ghost": "Spectral cards may\nappear in the shop,\nstart with a Hex card",
+    "Abandoned": "Start run with no\nFace Cards in your deck",
+    "Checkered": "Start run with\n26 Spades and\n26 Hearts in deck",
+    "Zodiac": "Start run with\nTarot Merchant,\nPlanet Merchant,\nand Overstock vouchers",
+    "Painted": "+2 hand size,\n-1 Joker slot",
+    "Anaglyph": "After defeating each\nBoss Blind, gain a\nDouble Tag",
+    "Plasma": "Balance Chips and\nMult when calculating\nscore for played hand.\nX2 base Blind size",
+    "Erratic": "All Ranks and Suits\nin deck are randomized",
+};
+const STAKE_DESCRIPTIONS = {
+    "White": "Base Difficulty",
+    "Red": "Small Blind gives\nno reward money\nApplies all previous Stakes",
+    "Green": "Required score scales\nfaster for each Ante\nApplies all previous Stakes",
+    "Black": "Shop can have Jokers\nwith Eternal\nApplies all previous Stakes",
+    "Blue": "-1 Discard\nApplies all previous Stakes",
+    "Purple": "Required score scales\nfaster for each Ante\nApplies all previous Stakes",
+    "Orange": "Shop can have Jokers\nwith Perishable\nApplies all previous Stakes",
+    "Gold": "-1 hand size\nShop can have Jokers\nwith Rental\nApplies all previous Stakes",
+};
+function formatTextWithColors(text) {
+    // Hacky basic coloration for Balatro text
+    const parts = text.split(/(\d+|Spades|Hearts|Clubs|Diamonds|\$[\d]+|Eternal|Perishable|Rental|Chips|Mult)/g);
+    return parts.map((part, i) => {
+        let color = JimboColorOption.WHITE;
+        if (/^\d+$/.test(part))
+            color = JimboColorOption.RED;
+        else if (part === 'Spades')
+            color = JimboColorOption.BLUE; // Spades are typically blue in high contrast
+        else if (part === 'Hearts')
+            color = JimboColorOption.RED;
+        else if (part === 'Clubs')
+            color = JimboColorOption.GREEN_TEXT;
+        else if (part === 'Diamonds')
+            color = JimboColorOption.ORANGE_TEXT;
+        else if (part.startsWith('$'))
+            color = JimboColorOption.GOLD_TEXT;
+        else if (['Eternal', 'Perishable', 'Rental'].includes(part))
+            color = JimboColorOption.GOLD_TEXT; // Should be specific colours
+        else if (part === 'Chips')
+            color = JimboColorOption.BLUE;
+        else if (part === 'Mult')
+            color = JimboColorOption.RED;
+        if (color !== JimboColorOption.WHITE) {
+            return _jsx("span", { style: { color }, children: part }, i);
+        }
+        return _jsx("span", { children: part }, i);
+    });
+}
+export function RunConfigModal({ open, onClose, deck, stake, onChange, }) {
+    const [activeDeck, setActiveDeck] = useState(deck);
+    const [activeStake, setActiveStake] = useState(stake);
+    // Sync state if props change when opened
+    React.useEffect(() => {
+        if (open) {
+            setActiveDeck(deck);
+            setActiveStake(stake);
+        }
+    }, [open, deck, stake]);
+    if (!open)
+        return null;
+    const deckIdx = DECK_OPTIONS.indexOf(activeDeck) >= 0 ? DECK_OPTIONS.indexOf(activeDeck) : 0;
+    const stakeIdx = STAKE_OPTIONS.indexOf(activeStake) >= 0 ? STAKE_OPTIONS.indexOf(activeStake) : 0;
+    const nextDeck = () => setActiveDeck(DECK_OPTIONS[(deckIdx + 1) % DECK_OPTIONS.length]);
+    const prevDeck = () => setActiveDeck(DECK_OPTIONS[(deckIdx - 1 + DECK_OPTIONS.length) % DECK_OPTIONS.length]);
+    const nextStake = () => setActiveStake(STAKE_OPTIONS[(stakeIdx + 1) % STAKE_OPTIONS.length]);
+    const prevStake = () => setActiveStake(STAKE_OPTIONS[(stakeIdx - 1 + STAKE_OPTIONS.length) % STAKE_OPTIONS.length]);
+    const handleApply = () => {
+        onChange(activeDeck, activeStake);
+        onClose();
+    };
+    const CarouselButton = ({ onClick, children }) => (_jsx("button", { onClick: onClick, style: {
+            width: 32,
+            height: "100%",
+            borderRadius: 8,
+            background: JimboColorOption.RED,
+            border: `2px solid ${JimboColorOption.WHITE}`, // Should be dark edge with inner shadow but let's use standard red btn style
+            color: JimboColorOption.WHITE,
+            fontSize: 24,
+            fontFamily: "m6x11plus, monospace",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            flexShrink: 0,
+        }, className: "j-btn j-btn--red" // piggyback on Jimbo button styles
+        , children: _jsx("div", { className: "j-btn__face", style: { padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: children }) }));
+    return (_jsx(JimboModal, { open: open, onClose: onClose, children: _jsxs("div", { style: {
+                width: 600,
+                maxWidth: "95vw",
+                background: JimboColorOption.TEAL_GREY, // A greenish-grey slate color
+                borderRadius: 16,
+                border: `3px solid ${JimboColorOption.BORDER_SILVER}`,
+                boxShadow: `inset 0 0 0 2px ${JimboColorOption.DARKEST}, 0 8px 16px rgba(0,0,0,0.5)`,
+                padding: "24px 20px",
+                display: "flex",
+                flexDirection: "column",
+                gap: 24,
+                position: "relative",
+            }, children: [_jsx("div", { style: {
+                        position: "absolute",
+                        top: -20,
+                        left: 0,
+                        right: 0,
+                        display: "flex",
+                        justifyContent: "center",
+                        gap: 8,
+                    }, children: _jsx("div", { className: "j-btn j-btn--red", style: { height: 36, pointerEvents: "none" }, children: _jsx("div", { className: "j-btn__face", style: { fontSize: 16, padding: "0 16px" }, children: "Seed Finder" }) }) }), _jsxs("div", { style: { display: "flex", height: 160, gap: 12 }, children: [_jsx(CarouselButton, { onClick: prevDeck, children: "<" }), _jsxs("div", { style: {
+                                flex: 1,
+                                background: JimboColorOption.DARK_GREY,
+                                borderRadius: 12,
+                                border: `2px solid ${JimboColorOption.PANEL_EDGE}`,
+                                display: "flex",
+                                alignItems: "center",
+                                padding: "16px",
+                                gap: 16,
+                            }, children: [_jsx(DeckSprite, { deck: activeDeck, size: 100, style: { flexShrink: 0 } }), _jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center" }, children: [_jsxs("h2", { style: {
+                                                fontFamily: "m6x11plus, monospace",
+                                                fontSize: 28,
+                                                color: JimboColorOption.WHITE,
+                                                margin: "0 0 8px 0",
+                                                textShadow: `1px 1px 0 ${JimboColorOption.DARKEST}`,
+                                            }, children: [activeDeck, " Deck"] }), _jsx("div", { style: {
+                                                background: JimboColorOption.WHITE,
+                                                borderRadius: 8,
+                                                padding: "12px",
+                                                width: "100%",
+                                                minHeight: 80,
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                boxShadow: `inset 0 -2px 0 0 ${JimboColorOption.PANEL_EDGE}`,
+                                            }, children: _jsx("div", { style: {
+                                                    fontFamily: "m6x11plus, monospace",
+                                                    fontSize: 16,
+                                                    color: JimboColorOption.DARKEST,
+                                                    textAlign: "center",
+                                                    whiteSpace: "pre-line",
+                                                    lineHeight: 1.2,
+                                                }, children: formatTextWithColors(DECK_DESCRIPTIONS[activeDeck] || "Standard 52 card deck") }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, paddingRight: 4 }, children: [_jsx("div", { style: { width: 8, height: 8, borderRadius: 4, background: JimboColorOption.GREY } }), _jsx("div", { style: { width: 8, height: 8, borderRadius: 4, background: JimboColorOption.GREY } }), _jsx("div", { style: { width: 8, height: 8, borderRadius: 4, background: JimboColorOption.GREEN } }), _jsx("div", { style: { width: 8, height: 8, borderRadius: 4, background: JimboColorOption.RED } }), _jsx("div", { style: { width: 8, height: 8, borderRadius: 4, background: JimboColorOption.WHITE } })] })] }), _jsx(CarouselButton, { onClick: nextDeck, children: ">" })] }), _jsxs("div", { style: { display: "flex", height: 120, gap: 12 }, children: [_jsx(CarouselButton, { onClick: prevStake, children: "<" }), _jsxs("div", { style: {
+                                flex: 1,
+                                background: JimboColorOption.DARK_GREY,
+                                borderRadius: 12,
+                                border: `2px solid ${JimboColorOption.PANEL_EDGE}`,
+                                display: "flex",
+                                alignItems: "center",
+                                padding: "12px 16px",
+                                gap: 16,
+                                position: "relative",
+                            }, children: [_jsx("div", { style: {
+                                        position: 'absolute',
+                                        left: -14, // Cut out effect text
+                                        top: '50%',
+                                        transform: 'translateY(-50%) rotate(-90deg)',
+                                        fontFamily: "m6x11plus, monospace",
+                                        fontSize: 16,
+                                        color: JimboColorOption.GREY,
+                                    }, children: "Stake" }), _jsx("div", { style: { paddingLeft: 20 }, children: _jsx(StakeSprite, { stake: activeStake, width: 64, style: { flexShrink: 0 } }) }), _jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center" }, children: [_jsxs("h2", { style: {
+                                                fontFamily: "m6x11plus, monospace",
+                                                fontSize: 22,
+                                                color: JimboColorOption.WHITE,
+                                                margin: "0 0 6px 0",
+                                                textShadow: `1px 1px 0 ${JimboColorOption.DARKEST}`,
+                                            }, children: [activeStake, " Stake"] }), _jsx("div", { style: {
+                                                background: JimboColorOption.WHITE,
+                                                borderRadius: 8,
+                                                padding: "8px 12px",
+                                                width: "100%",
+                                                minHeight: 60,
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                boxShadow: `inset 0 -2px 0 0 ${JimboColorOption.PANEL_EDGE}`,
+                                            }, children: _jsx("div", { style: {
+                                                    fontFamily: "m6x11plus, monospace",
+                                                    fontSize: 14,
+                                                    color: JimboColorOption.DARKEST,
+                                                    textAlign: "center",
+                                                    whiteSpace: "pre-line",
+                                                    lineHeight: 1.2,
+                                                }, children: formatTextWithColors(STAKE_DESCRIPTIONS[activeStake] || "Base Difficulty") }) })] })] }), _jsx(CarouselButton, { onClick: nextStake, children: ">" })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, marginTop: 8 }, children: [_jsx("button", { onClick: handleApply, className: "j-btn j-btn--blue j-btn--lg", style: { width: "80%", height: 50, fontSize: 24, padding: 0 }, children: _jsx("div", { className: "j-btn__face", style: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "APPLY" }) }), _jsx("button", { onClick: onClose, className: "j-btn j-btn--orange j-btn--md", style: { width: "100%", height: 40, fontSize: 18, padding: 0 }, children: _jsx("div", { className: "j-btn__face", style: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "Back" }) })] })] }) }));
+}

package/dist/ui/jimbo.css

@@ -18,7 +18,7 @@
 
 :root {
   /* Colors — eyedropped from Balatro's rendered shader output */
-  --j-red: #ff4c40;
+  --j-red: #fe5148;
   --j-blue: #0093ff;
   --j-green: #429f79;
   --j-orange: #ff9800;
@@ -915,7 +915,7 @@
 
 .j-modal {
   width: 100%;
-  max-width: 375px;
+  max-width: 320px;
   max-height: 90vh;
   display: flex;
   flex-direction: column;
@@ -1142,9 +1142,9 @@
 }
 
 /* ── App Shell ────────────────────────────────────────────────────────── */
-/* Mobile-first 375px layout container for ALL Jimbo UI screens.
+/* Mobile-first 320px layout container for ALL Jimbo UI screens.
  * Supports container queries for responsive breakpoints:
- *   compact  ≤400px  — iPhone SE, fixed 667px height, NO scroll
+ *   compact  ≤400px  — iPhone SE, fixed 568px height, NO scroll
  *   cozy     401-750px — MCP inline / wider phones, flexible height, scroll OK
  *   wide     751px+  — tablet/desktop, two-column layouts (future)
  *
@@ -1154,10 +1154,10 @@
 .j-app {
   container-type: inline-size;
   container-name: jimbo;
-  width: 375px;
-  max-width: 375px;
-  height: 667px;
-  max-height: 667px;
+  width: 320px;
+  max-width: 320px;
+  height: 568px;
+  max-height: 568px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;

package/dist/ui/jimboApp.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 export interface JimboAppProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    /** Unlock width/height for MCP inline or desktop use. Default: false (375×667 locked). */
+    /** Unlock width/height for MCP inline or desktop use. Default: false (320×568 locked). */
     fluid?: boolean;
 }
-/** Standard mobile-first app shell. 375px locked, or fluid for MCP/desktop. */
+/** Standard mobile-first app shell. 320px locked, or fluid for MCP/desktop. */
 export declare function JimboApp({ children, fluid, className, ...props }: JimboAppProps): import("react/jsx-runtime").JSX.Element;
 /** Scrollable content area inside JimboApp. Hidden scrollbar, snap-friendly. */
 export declare function JimboAppScroll({ children, className, ...props }: Omit<JimboAppProps, 'fluid'>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboApp.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-/** Standard mobile-first app shell. 375px locked, or fluid for MCP/desktop. */
+/** Standard mobile-first app shell. 320px locked, or fluid for MCP/desktop. */
 export function JimboApp({ children, fluid, className = '', ...props }) {
     const classes = `j-app${fluid ? ' j-app--fluid' : ''} ${className}`.trim();
     return (_jsx("div", { className: classes, ...props, children: children }));

package/dist/ui/radial/RadialMenu.js

@@ -80,7 +80,7 @@ function layoutOrbitalEllipse(items, Rx, Ry, startAngle, stepRad, mascotSizePx)
  */
 export function RadialMenu({ items, showClosing, mascotSizePx, orbitRadiusX, orbitRadiusY, mascotTranslateY, currentMenu, onItemClick, onBack, breadcrumb, showPageControls = false, onPagePrev, onPageNext, }) {
     const rootRef = useRef(null);
-    const [containerW, setContainerW] = useState(375);
+    const [containerW, setContainerW] = useState(320);
     useLayoutEffect(() => {
         const el = rootRef.current;
         if (!el)

package/dist/ui/radial/radialMenuViewport.js

@@ -21,7 +21,7 @@ function readGeometry() {
         return { baseRadius: 66, keyboardHeight: 0 };
     }
     const w = window.innerWidth;
-    const baseRadius = w < 375 ? 58 : 66;
+    const baseRadius = w < 320 ? 58 : 66;
     const vv = window.visualViewport;
     let keyboardHeight = 0;
     if (vv) {

package/dist/ui/showcase.d.ts

@@ -32,7 +32,7 @@ export interface ShowcaseProps {
     onFilterClick?: (filter: ShowcaseFilter, index: number) => void;
 }
 /**
- * Landing/showcase screen — 375×667, NO SCROLL.
+ * Landing/showcase screen — 320×568, NO SCROLL.
  * Every pixel accounted for. No flex stretching. No gaps.
  */
 export declare function Showcase({ title, subtitle, hotFilters, recentFinds, mcpInfo, onNewSearch, onBrowseFilters, onFilterClick, }: ShowcaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/showcase.js

@@ -8,7 +8,7 @@ import { JimboBalatroFooter } from './footer.js';
 import { JimboSectionHeader } from './jimboSectionHeader.js';
 import { JimboInfoCard, JimboInfoCardBody, JimboInfoCardTitle, JimboInfoCardSub, JimboInfoCardAside } from './jimboInfoCard.js';
 /**
- * Landing/showcase screen — 375×667, NO SCROLL.
+ * Landing/showcase screen — 320×568, NO SCROLL.
  * Every pixel accounted for. No flex stretching. No gaps.
  */
 export function Showcase({ title = 'Balatro', subtitle = 'Seed Curator', hotFilters = [], recentFinds = [], mcpInfo, onNewSearch, onBrowseFilters, onFilterClick, }) {

package/package.json

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