jaml-ui 0.24.9 → 0.24.11

package/dist/components/JamlIde.d.ts

@@ -19,6 +19,8 @@ export interface JamlIdeProps {
     className?: string;
     style?: React.CSSProperties;
     title?: string;
+    subtitle?: React.ReactNode;
+    compactHeader?: boolean;
     actions?: React.ReactNode;
     codePlaceholder?: string;
     onSearch?: () => void;
@@ -32,4 +34,4 @@ export interface JamlIdeProps {
 }
 export type { JamlVisualFilter } from "./JamlIdeVisual.js";
 export type { JamlVisualClause, JamlZone } from "./JamlIdeVisual.js";
-export declare function JamlIde({ jaml, defaultJaml, onChange, defaultMode, searchResults, className, style, title, actions, codePlaceholder, onSearch, isSearching, visualFilter, onVisualFilterChange, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlIde({ jaml, defaultJaml, onChange, defaultMode, searchResults, className, style, title, subtitle, compactHeader, actions, codePlaceholder, onSearch, isSearching, visualFilter, onVisualFilterChange, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlIde.js

@@ -88,7 +88,7 @@ function ResultsView({ results, jaml }) {
                                     })] })] })) : null] }, result.seed));
         }) }));
 }
-export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", searchResults = [], className = "", style, title = "JAML IDE", actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, visualFilter, onVisualFilterChange, }) {
+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, visualFilter, onVisualFilterChange, }) {
     const [mode, setMode] = useState(defaultMode);
     const [internalText, setInternalText] = useState(jaml ?? defaultJaml ?? "");
     const [lastJamlProp, setLastJamlProp] = useState(jaml);
@@ -171,6 +171,9 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
             minHeight: 420,
             borderRadius: 12,
             overflow: "hidden",
+            overflowX: "clip",
+            overscrollBehaviorX: "none",
+            maxWidth: "100%",
             border: `2px solid ${JimboColorOption.BORDER_SILVER}`,
             boxShadow: `0 3px 0 0 ${JimboColorOption.BORDER_SOUTH}`,
             background: JimboColorOption.DARK_GREY,
@@ -181,9 +184,9 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
                     alignItems: "center",
                     justifyContent: "space-between",
                     flexWrap: "wrap",
-                    gap: 12,
-                    padding: "10px 14px",
+                    gap: compactHeader ? 8 : 12,
+                    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 }), _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, 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] }), _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] }), 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: 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] }), _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/jamlMap/JamlMapEditor.js

@@ -110,13 +110,18 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
     };
     return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: [_jsx("div", { ref: handleScrollAttach, className: "hide-scrollbar", style: {
                     flex: 1,
-                    overflowY: "auto",
+                    overflowY: "scroll",
+                    overflowX: "hidden",
                     scrollSnapType: "y mandatory",
-                    scrollBehavior: "smooth"
+                    scrollBehavior: "smooth",
+                    WebkitOverflowScrolling: "touch",
+                    overscrollBehaviorY: "contain",
                 }, children: Array.from({ length: 40 }, (_, i) => i).map((a) => (_jsxs("div", { style: {
                         scrollSnapAlign: "start",
+                        scrollSnapStop: "always",
                         padding: "24px 8px 64px 8px",
-                        minHeight: "100%", // ensuring each ante takes at least full viewport height to snap cleanly
+                        minHeight: "100%",
+                        boxSizing: "border-box",
                         display: "flex",
                         flexDirection: "column",
                         gap: 24,

package/package.json

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