jaml-ui 0.17.2 → 0.18.0

package/DESIGN.md

@@ -147,9 +147,11 @@ Must-clause items glow blue. Should-clause items glow gold/green. Non-matching i
 
 ## Typography
 
-m6x11plus (m6x11plusplus.otf) is the ONLY font. It is a single-weight pixel font. NEVER apply font-weight bold, semibold, or any weight other than 400. Bold makes it look muddy. Use size and letter-spacing for hierarchy instead.
+m6x11plus (m6x11plusplus.otf) is the ONLY font. It is a single-weight pixel font. NEVER apply font-weight bold, semibold, or any weight other than 400. Bold makes it look muddy. NEVER USE HEAVY!
 
-All text is uppercase with generous letter-spacing (0.04em-0.1em) for labels and micro text. Seed codes use the display size (26px) in gold (#e4b643) with 0.04em tracking.
+Text is NEVER ALL CAPS. Use proper Title Case or Sentence case. Seed codes use the display size (26px) in gold (#e4b643).
+
+Contrast is critical. NEVER make grey text on top of a grey background. If using a dark grey background, use white or light contrasting text.
 
 ## Layout
 
@@ -188,7 +190,9 @@ JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]`
 - DO use m6x11plus for everything except code/monospace.
 - DO design for 375px portrait.
 - DO use translateY + box-shadow for button depth. Not CSS 3D transforms.
-- DON'T use font-weight bold. m6x11plus is single-weight. Bold = muddy.
+- DON'T use font-weight bold or heavy. m6x11plus is single-weight.
+- DON'T use ALL CAPS. It is considered an embellishment and ruins the aesthetic.
+- DON'T put grey text on top of a grey background.
 - DON'T use fat padding or margins. Balatro UI is dense and cozy.
 - DON'T add horizontal scroll. Vertical snap-scroll + horizontal swipe only.
 - DON'T use rounded corners larger than 10px. Balatro is chunky, not bubbly.

package/dist/components/JamlAnalyzerFullscreen.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { AnalyzerAnteView, AnalyzerItem } from "./AnalyzerExplorer.js";
 import type { AnalyzerLive } from "../hooks/useAnalyzer.js";
 import { type AnalyzerStreamKey } from "../hooks/analyzerStreamRegistry.js";
@@ -21,7 +22,9 @@ export interface JamlAnalyzerFullscreenProps {
     /** Pull size on each lazy load. */
     chunkSize?: number;
     className?: string;
+    /** Custom top page to render as Slide 0 */
+    topPage?: React.ReactNode;
 }
-export declare function JamlAnalyzerFullscreen({ antes, live, jaml, tallyColumns, tallyLabels, enabledStreams, onEnabledStreamsChange, hidePicker, chunkSize, className, }: JamlAnalyzerFullscreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlAnalyzerFullscreen({ antes, live, jaml, tallyColumns, tallyLabels, enabledStreams, onEnabledStreamsChange, hidePicker, chunkSize, className, topPage, }: JamlAnalyzerFullscreenProps): import("react/jsx-runtime").JSX.Element;
 export type { AnalyzerItem };
 export { ANALYZER_STREAM_META, type AnalyzerStreamKey } from "../hooks/analyzerStreamRegistry.js";

package/dist/components/JamlAnalyzerFullscreen.js

@@ -17,7 +17,7 @@ const TONE_COLORS = {
     default: C.GOLD_TEXT,
 };
 import { JamlMapPreview } from "./JamlMapPreview.js";
-export function JamlAnalyzerFullscreen({ antes, live, jaml, tallyColumns, tallyLabels, enabledStreams, onEnabledStreamsChange, hidePicker = false, chunkSize = 12, className = "", }) {
+export function JamlAnalyzerFullscreen({ antes, live, jaml, tallyColumns, tallyLabels, enabledStreams, onEnabledStreamsChange, hidePicker = false, chunkSize = 12, className = "", topPage, }) {
     const [internalEnabled, setInternalEnabled] = useState(enabledStreams ?? DEFAULT_ENABLED_STREAMS);
     const effectiveEnabled = enabledStreams ?? internalEnabled;
     const setEnabled = useCallback((next) => {
@@ -26,7 +26,7 @@ export function JamlAnalyzerFullscreen({ antes, live, jaml, tallyColumns, tallyL
     }, [onEnabledStreamsChange]);
     const { currentAnte, scrollRef, scrollToAnte, registerAnteRef } = useAnteTracker(antes);
     const [pickerOpen, setPickerOpen] = useState(false);
-    return (_jsxs("div", { className: className, style: styles.root, children: [_jsxs("div", { ref: scrollRef, style: styles.scroller, children: [jaml && (_jsxs("section", { style: { ...styles.section, scrollSnapAlign: "start", justifyContent: 'center' }, children: [_jsxs("div", { style: { marginBottom: 20 }, children: [_jsx("div", { style: styles.anteLabel, children: "JAML" }), _jsx("div", { style: styles.anteNumber, children: "MAP" })] }), _jsx(JamlMapPreview, { jaml: jaml, tallyColumns: tallyColumns, tallyLabels: tallyLabels }), _jsx("div", { style: { marginTop: 24, textAlign: 'center', opacity: 0.6 }, children: _jsx(JimboText, { size: "xs", tone: "grey", children: "Scroll down to explore seed details" }) })] })), antes.map((ante) => (_jsx(AnteSection, { ante: ante, live: live, enabledStreams: effectiveEnabled, chunkSize: chunkSize, registerRef: (el) => registerAnteRef(ante.ante, el) }, ante.ante)))] }), _jsx(SideRail, { antes: antes.map((a) => a.ante), currentAnte: currentAnte, onJump: scrollToAnte }), !hidePicker && (_jsx(StreamPicker, { enabled: effectiveEnabled, onChange: setEnabled, open: pickerOpen, onToggle: () => setPickerOpen((v) => !v) }))] }));
+    return (_jsxs("div", { className: className, style: styles.root, children: [_jsxs("div", { ref: scrollRef, style: styles.scroller, children: [topPage ? topPage : jaml && (_jsxs("section", { style: { ...styles.section, scrollSnapAlign: "start", justifyContent: 'center' }, children: [_jsxs("div", { style: { marginBottom: 20 }, children: [_jsx("div", { style: styles.anteLabel, children: "JAML" }), _jsx("div", { style: styles.anteNumber, children: "MAP" })] }), _jsx(JamlMapPreview, { jaml: jaml, tallyColumns: tallyColumns, tallyLabels: tallyLabels }), _jsx("div", { style: { marginTop: 24, textAlign: 'center', opacity: 0.6 }, children: _jsx(JimboText, { size: "xs", tone: "grey", children: "Scroll down to explore seed details" }) })] })), antes.map((ante) => (_jsx(AnteSection, { ante: ante, live: live, enabledStreams: effectiveEnabled, chunkSize: chunkSize, registerRef: (el) => registerAnteRef(ante.ante, el) }, ante.ante)))] }), _jsx(SideRail, { antes: antes.map((a) => a.ante), currentAnte: currentAnte, onJump: scrollToAnte }), !hidePicker && (_jsx(StreamPicker, { enabled: effectiveEnabled, onChange: setEnabled, open: pickerOpen, onToggle: () => setPickerOpen((v) => !v) }))] }));
 }
 function AnteSection({ ante, live, enabledStreams, chunkSize, registerRef }) {
     return (_jsxs("section", { ref: registerRef, "data-ante": ante.ante, style: styles.section, children: [_jsxs("header", { style: styles.header, children: [_jsxs("div", { children: [_jsx("div", { style: styles.anteLabel, children: "Ante" }), _jsx("div", { style: styles.anteNumber, children: ante.ante })] }), ante.voucher && (_jsxs("div", { style: styles.voucherBlock, children: [_jsx(JamlVoucher, { voucherName: ante.voucher, scale: 0.85 }), _jsx("div", { style: styles.voucherCaption, children: ante.voucher })] }))] }), _jsxs("div", { style: styles.blindRow, children: [_jsx(BlindCell, { label: "Small", tag: ante.smallBlindTag }), _jsx(BlindCell, { label: "Big", tag: ante.bigBlindTag }), ante.boss && (_jsxs("div", { style: styles.bossCell, children: [_jsx("div", { style: styles.cellLabel, children: "Boss" }), _jsx(JamlBoss, { bossName: ante.boss, scale: 0.7 }), _jsx("div", { style: styles.cellCaption, children: ante.boss })] }))] }), ante.packs && ante.packs.length > 0 && (_jsxs("div", { style: styles.streamLane, children: [_jsx("div", { style: styles.streamLabel, children: "Packs" }), _jsx("div", { style: styles.packRow, children: ante.packs.map((pack, i) => (_jsx("div", { style: styles.packPill, children: pack }, `${ante.ante}-pack-${i}`))) })] })), enabledStreams.map((key) => {

package/dist/components/JamlCurator.d.ts

@@ -0,0 +1,4 @@
+export interface JamlCuratorProps {
+    motelyWasmUrl: string;
+}
+export declare function JamlCurator({ motelyWasmUrl }: JamlCuratorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlCurator.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { JimboButton, JimboPanel } from "../ui/panel.js";
+import { JimboText } from "../ui/jimboText.js";
+import { JimboColorOption } from "../ui/tokens.js";
+import { JimboFlankNav } from "../ui/jimboFlankNav.js";
+import { JamlMapEditor } from "./jamlMap/JamlMapEditor.js";
+import { JamlAnalyzerFullscreen } from "./JamlAnalyzerFullscreen.js";
+import { useSearch } from "../hooks/useSearch.js";
+import { useAnalyzer } from "../hooks/useAnalyzer.js";
+import { JamlSpeedometer } from "./JamlSpeedometer.js";
+const C = JimboColorOption;
+export function JamlCurator({ motelyWasmUrl }) {
+    // Use map editor by default to generate JAML
+    const [jamlText, setJamlText] = useState("");
+    const search = useSearch(motelyWasmUrl);
+    const analyzer = useAnalyzer();
+    // Search results pagination
+    const [resultIndex, setResultIndex] = useState(0);
+    const isSearching = search.status === "running";
+    const handleSearch = () => {
+        if (isSearching) {
+            search.cancel();
+        }
+        else {
+            setResultIndex(0);
+            search.start(jamlText, 1_000_000);
+        }
+    };
+    const currentSeed = search.results[resultIndex]?.seed;
+    useEffect(() => {
+        if (currentSeed) {
+            analyzer.analyze(currentSeed, "Red", "White", jamlText);
+        }
+    }, [currentSeed, jamlText]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Map Editor changes
+    const handleMapChange = (jamlString) => {
+        setJamlText(jamlString);
+    };
+    return (_jsx("div", { style: {
+            width: "100%",
+            maxWidth: 375,
+            height: "100svh",
+            margin: "0 auto",
+            position: "relative",
+            background: C.DARKEST,
+            overflow: "hidden",
+            borderLeft: `1px solid ${C.PANEL_EDGE}`,
+            borderRight: `1px solid ${C.PANEL_EDGE}`,
+            boxShadow: `0 0 20px rgba(0,0,0,0.5)`,
+        }, children: _jsx(JamlAnalyzerFullscreen, { antes: analyzer.antes, live: analyzer.live, hidePicker: true, topPage: _jsxs("section", { style: {
+                    width: "100%",
+                    height: "100svh",
+                    scrollSnapAlign: "start",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 12,
+                    padding: "16px 12px 24px",
+                    boxSizing: "border-box",
+                    borderBottom: `2px solid ${C.GOLD}`,
+                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(JimboText, { size: "lg", tone: "gold", children: "JAML Curator" }), _jsx(JimboButton, { tone: isSearching ? "red" : "green", size: "sm", onClick: handleSearch, children: isSearching ? "STOP" : "SEARCH" })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto' }, className: "hide-scrollbar", children: _jsx(JamlMapEditor, { onChange: handleMapChange }) }), _jsx("div", { style: { flexShrink: 0 }, children: _jsx(JamlSpeedometer, { status: search.status, seedsPerSecond: search.seedsPerSecond, totalSearched: search.totalSearched, matchingSeeds: search.matchingSeeds }) }), _jsx("div", { style: { flexShrink: 0 }, children: _jsx(JimboPanel, { children: search.results.length === 0 ? (_jsx(JimboText, { size: "sm", tone: "grey", className: "j-text-center", children: isSearching ? "Searching..." : "No results yet." })) : (_jsxs("div", { className: "j-flex-col j-gap-sm", children: [_jsxs("div", { className: "j-flex j-items-center j-justify-between", children: [_jsx(JimboText, { size: "xs", tone: "grey", children: "SEED MATCHES" }), _jsxs(JimboText, { size: "xs", tone: "gold", children: [search.matchingSeeds, " FOUND"] })] }), _jsx(JimboFlankNav, { canPrev: resultIndex > 0, canNext: resultIndex < search.results.length - 1, onPrev: () => setResultIndex(i => Math.max(0, i - 1)), onNext: () => setResultIndex(i => Math.min(search.results.length - 1, i + 1)), children: _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "lg", tone: "gold", style: { letterSpacing: 2 }, children: currentSeed }), _jsx(JimboButton, { tone: "grey", size: "xs", children: "Copy Seed" })] }) }), _jsx(JimboText, { size: "micro", tone: "grey", className: "j-text-center", style: { opacity: 0.7, marginTop: 8 }, children: "\u25BC SWIPE DOWN FOR ANTES \u25BC" })] })) }) })] }) }) }));
+}

package/dist/components/JamlCurator.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { JamlCurator } from "./JamlCurator.js";
+declare const meta: Meta<typeof JamlCurator>;
+export default meta;
+type Story = StoryObj<typeof JamlCurator>;
+export declare const Default: Story;

package/dist/components/JamlCurator.stories.js

@@ -0,0 +1,14 @@
+import { JamlCurator } from "./JamlCurator.js";
+const meta = {
+    title: "JAML/JamlCurator",
+    component: JamlCurator,
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        motelyWasmUrl: "https://unpkg.com/@nims11/motely@0.2.2/motely_bg.wasm",
+    },
+};

package/dist/components/JamlIde.js

@@ -69,7 +69,7 @@ function ResultsView({ results, jaml }) {
                             display: "flex",
                             flexDirection: "column",
                             gap: 8,
-                        }, children: [_jsx(JamlMapPreview, { jaml: jaml, tallyColumns: result.tallyColumns, tallyLabels: result.tallyLabels }), _jsxs("div", { style: { padding: "4px 8px 8px", display: "flex", flexDirection: "column", gap: 5 }, children: [_jsx("span", { style: { fontSize: 8, color: JimboColorOption.GREY, letterSpacing: "0.08em", textTransform: "uppercase" }, children: "RAW TALLY DATA" }), (result.tallyLabels ?? []).map((label, i) => {
+                        }, children: [_jsx(JamlMapPreview, { jaml: jaml, tallyColumns: result.tallyColumns, tallyLabels: result.tallyLabels }), _jsxs("div", { style: { padding: "4px 8px 8px", display: "flex", flexDirection: "column", gap: 5 }, children: [_jsx("span", { style: { fontSize: 9, color: JimboColorOption.WHITE, opacity: 0.8 }, children: "Raw Tally Data" }), (result.tallyLabels ?? []).map((label, i) => {
                                         const val = result.tallyColumns[i] ?? 0;
                                         if (val === 0)
                                             return null;

package/dist/components/JamlIdeVisual.js

@@ -6,9 +6,9 @@ import { JimboColorOption } from "../ui/tokens.js";
 import { JimboSprite } from "../ui/sprites.js";
 const C = JimboColorOption;
 const ZONE_META = {
-    must: { label: "MUST", hint: "Seed must contain all of these.", color: C.BLUE, accent: "#4db5ff" },
-    should: { label: "SHOULD", hint: "Bonus points per match.", color: C.RED, accent: "#ff8076" },
-    mustnot: { label: "MUST NOT", hint: "Seed is rejected if any appear.", color: C.ORANGE, accent: "#ffb84d" },
+    must: { label: "Must", hint: "Seed must contain all of these.", color: C.BLUE, accent: "#4db5ff" },
+    should: { label: "Should", hint: "Bonus points per match.", color: C.RED, accent: "#ff8076" },
+    mustnot: { label: "Must Not", hint: "Rejected if any appear.", color: C.ORANGE, accent: "#ffb84d" },
 };
 function clauseSpriteSheet(type) {
     if (type === "joker" ||
@@ -127,8 +127,7 @@ function MysteryAddTile({ zone, onTap }) {
                     fontFamily: "m6x11plus, ui-monospace, monospace",
                     fontSize: 12,
                     color: z.accent,
-                    letterSpacing: 2,
-                }, children: ["ADD TO ", z.label] })] }));
+                }, children: ["Add to ", z.label] })] }));
 }
 function ZoneRail({ zone, clauses, onAdd, onRemove, onEdit, onDragStart, highlight, }) {
     const z = ZONE_META[zone];
@@ -140,23 +139,16 @@ function ZoneRail({ zone, clauses, onAdd, onRemove, onEdit, onDragStart, highlig
             transition: "background 100ms, border-color 100ms",
         }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [_jsx("div", { style: {
                             fontFamily: "m6x11plus, ui-monospace, monospace",
-                            fontSize: 11,
-                            padding: "2px 8px",
+                            fontSize: 12,
+                            padding: "2px 6px",
                             background: z.color,
                             color: C.WHITE,
                             borderRadius: 3,
-                            letterSpacing: 2,
                             boxShadow: `0 2px 0 ${C.BLACK}`,
                         }, children: z.label }), _jsx("div", { style: { flex: 1, height: 2, background: `${z.color}55`, borderRadius: 1 } }), _jsx("div", { style: { fontFamily: "m6x11plus, ui-monospace, monospace", fontSize: 8, color: C.GREY }, children: clauses.length })] }), _jsx("div", { style: { fontFamily: "m6x11plus, ui-monospace, monospace", fontSize: 9, color: C.GREY, letterSpacing: 0.5, marginBottom: 8 }, children: z.hint }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [clauses.map((c) => (_jsx(ClauseCard, { clause: c, zone: zone, onRemove: () => onRemove(c.id), onEdit: () => onEdit(c), onDragStart: onDragStart }, c.id))), _jsx(MysteryAddTile, { zone: zone, onTap: onAdd })] })] }));
 }
 function TopMatter({ filter, onChange, }) {
-    return (_jsxs("div", { style: {
-            background: C.DARK_GREY,
-            borderRadius: 6,
-            padding: 10,
-            border: `2px solid ${C.PANEL_EDGE}`,
-            boxShadow: `0 2px 0 ${C.BLACK}`,
-        }, children: [_jsx("input", { value: filter.name ?? "", placeholder: "Untitled", onChange: (e) => onChange({ ...filter, name: e.target.value }), style: {
+    return (_jsxs("div", { className: "j-inner-panel", style: { padding: 10 }, children: [_jsx("input", { value: filter.name ?? "", placeholder: "Untitled", onChange: (e) => onChange({ ...filter, name: e.target.value }), style: {
                     display: "block",
                     width: "100%",
                     background: "transparent",
@@ -168,7 +160,7 @@ function TopMatter({ filter, onChange, }) {
                     letterSpacing: 1,
                     padding: 0,
                     marginBottom: 4,
-                } }), _jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [_jsx("div", { style: { fontFamily: "m6x11plus, ui-monospace, monospace", fontSize: 9, color: C.GREY, letterSpacing: 2 }, children: "BY" }), _jsx("input", { value: filter.author ?? "", placeholder: "anonymous", onChange: (e) => onChange({ ...filter, author: e.target.value }), style: {
+                } }), _jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [_jsx("div", { style: { fontFamily: "m6x11plus, ui-monospace, monospace", fontSize: 10, color: C.WHITE }, children: "By" }), _jsx("input", { value: filter.author ?? "", placeholder: "anonymous", onChange: (e) => onChange({ ...filter, author: e.target.value }), style: {
                             flex: 1,
                             background: "transparent",
                             border: "none",
@@ -176,7 +168,6 @@ function TopMatter({ filter, onChange, }) {
                             fontFamily: "m6x11plus, ui-monospace, monospace",
                             fontSize: 12,
                             color: C.GOLD_TEXT,
-                            letterSpacing: 1,
                             padding: 0,
                         } })] }), _jsx("input", { value: filter.description ?? "", placeholder: "description", onChange: (e) => onChange({ ...filter, description: e.target.value }), style: {
                     display: "block",
@@ -186,8 +177,9 @@ function TopMatter({ filter, onChange, }) {
                     border: "none",
                     outline: "none",
                     fontFamily: "m6x11plus, ui-monospace, monospace",
-                    fontSize: 10,
-                    color: C.GREY,
+                    fontSize: 11,
+                    color: C.WHITE,
+                    opacity: 0.8,
                     lineHeight: 1.35,
                     padding: 0,
                 } })] }));
@@ -205,7 +197,7 @@ export function JamlIdeVisual({ filter, onChange, onEditClause, onAddClause }) {
             padding: 10,
             background: C.DARKEST,
             color: C.WHITE,
-        }, children: [_jsx(TopMatter, { filter: filter, onChange: onChange }), ["must", "should", "mustnot"].map((zone) => (_jsx(ZoneRail, { zone: zone, clauses: filter[zone], onAdd: onAddClause ? () => onAddClause(zone) : undefined, onRemove: (id) => removeClause(zone, id), onEdit: (c) => onEditClause?.(zone, c), onDragStart: onDragStart, highlight: hoverZone === zone }, zone))), drag && (_jsx("div", { style: {
+        }, children: [_jsx(TopMatter, { filter: filter, onChange: onChange }), _jsxs("div", { style: { display: "flex", gap: 10 }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsx(ZoneRail, { zone: "must", clauses: filter.must, onAdd: onAddClause ? () => onAddClause("must") : undefined, onRemove: (id) => removeClause("must", id), onEdit: (c) => onEditClause?.("must", c), onDragStart: onDragStart, highlight: hoverZone === "must" }) }), _jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsx(ZoneRail, { zone: "mustnot", clauses: filter.mustnot, onAdd: onAddClause ? () => onAddClause("mustnot") : undefined, onRemove: (id) => removeClause("mustnot", id), onEdit: (c) => onEditClause?.("mustnot", c), onDragStart: onDragStart, highlight: hoverZone === "mustnot" }) })] }), _jsx(ZoneRail, { zone: "should", clauses: filter.should, onAdd: onAddClause ? () => onAddClause("should") : undefined, onRemove: (id) => removeClause("should", id), onEdit: (c) => onEditClause?.("should", c), onDragStart: onDragStart, highlight: hoverZone === "should" }), drag && (_jsx("div", { style: {
                     position: "fixed",
                     left: drag.x - drag.offX,
                     top: drag.y - drag.offY,

package/dist/components/jamlMap/CategoryPicker.d.ts

@@ -0,0 +1,32 @@
+import type { SpriteEntry } from "../../sprites/spriteData.js";
+import type { SpriteSheetType } from "../../sprites/spriteMapper.js";
+import type { SlotSelection, SlotCategory } from "./MysterySlot.js";
+export interface CategoryPickerConfig {
+    /** Display title, e.g. "Vouchers" */
+    title: string;
+    /** The SlotCategory value */
+    category: SlotCategory;
+    /** JAML clause key emitted on select, e.g. "voucher" */
+    clauseKey: string;
+    /** Which sprite sheet to render from */
+    sheet: SpriteSheetType;
+    /** Full list of items for the grid */
+    items: SpriteEntry[];
+    /** Accent color for the header/buttons */
+    accent: string;
+    /** Optional tooltip hint shown in the "Any" button area */
+    hint?: string;
+}
+export interface CategoryPickerProps {
+    config: CategoryPickerConfig;
+    onSelect: (selection: SlotSelection) => void;
+    onCancel: () => void;
+}
+export declare function CategoryPicker({ config, onSelect, onCancel }: CategoryPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare const VOUCHER_PICKER_CONFIG: CategoryPickerConfig;
+export declare const TAG_PICKER_CONFIG: CategoryPickerConfig;
+export declare const BOSS_PICKER_CONFIG: CategoryPickerConfig;
+export declare const TAROT_PICKER_CONFIG: CategoryPickerConfig;
+export declare const PLANET_PICKER_CONFIG: CategoryPickerConfig;
+export declare const SPECTRAL_PICKER_CONFIG: CategoryPickerConfig;
+export declare const PACK_PICKER_CONFIG: CategoryPickerConfig;

package/dist/components/jamlMap/CategoryPicker.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { JimboSprite } from "../../ui/sprites.js";
+import { JimboColorOption } from "../../ui/tokens.js";
+import { JimboButton } from "../../ui/panel.js";
+import { JimboText } from "../../ui/jimboText.js";
+// ─── Component ───────────────────────────────────────────────────────────────
+const C = JimboColorOption;
+export function CategoryPicker({ config, onSelect, onCancel }) {
+    const [search, setSearch] = useState("");
+    const filtered = useMemo(() => {
+        if (!search)
+            return config.items;
+        const q = search.toLowerCase();
+        return config.items.filter((item) => item.name.toLowerCase().includes(q));
+    }, [config.items, search]);
+    const pairedVouchers = useMemo(() => {
+        if (config.category !== "voucher")
+            return null;
+        const bases = config.items.filter((item) => item.pos.y % 2 === 0);
+        const pairs = bases.map((base) => {
+            const upgrade = config.items.find((u) => u.pos.x === base.pos.x && u.pos.y === base.pos.y + 1);
+            return { base, upgrade };
+        });
+        if (!search)
+            return pairs;
+        const q = search.toLowerCase();
+        return pairs.filter(p => p.base.name.toLowerCase().includes(q) || p.upgrade?.name.toLowerCase().includes(q));
+    }, [config.items, search, config.category]);
+    const handleSelect = useCallback((item) => {
+        onSelect({
+            category: config.category,
+            value: item.name,
+            clauseKey: config.clauseKey,
+        });
+    }, [onSelect, config]);
+    const handleAny = useCallback(() => {
+        onSelect({
+            category: config.category,
+            value: "Any",
+            clauseKey: config.clauseKey,
+        });
+    }, [onSelect, config]);
+    const renderItem = (item, isMuted = false) => (_jsxs("div", { onClick: () => handleSelect(item), title: item.name, style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 3,
+            padding: 4,
+            borderRadius: 4,
+            cursor: "pointer",
+            opacity: isMuted ? 0.3 : 1,
+        }, children: [_jsx(JimboSprite, { name: item.name, sheet: config.sheet, width: 48 }), _jsx(JimboText, { size: "micro", tone: "grey", style: { maxWidth: 60, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: item.name })] }, item.name));
+    return (_jsxs("div", { style: { padding: 0, maxWidth: 420, maxHeight: "80vh", display: "flex", flexDirection: "column" }, children: [_jsxs("div", { className: "j-flex j-gap-sm", style: { padding: "8px 10px 4px" }, children: [_jsx("input", { className: "j-seed-input__field", type: "text", placeholder: `Search ${config.title.toLowerCase()}...`, value: search, onChange: (e) => setSearch(e.target.value), style: { fontSize: 13, padding: "6px 10px", textTransform: "none", letterSpacing: "0.04em" } }), _jsx(JimboButton, { tone: "gold", size: "sm", onClick: handleAny, children: "Any" })] }), config.hint && (_jsx("div", { className: "j-inner-panel", style: { margin: "4px 10px 6px", padding: "6px 10px" }, children: _jsx(JimboText, { size: "xs", tone: "grey", children: config.hint }) })), _jsxs("div", { style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 6,
+                    padding: "8px 10px 10px",
+                    overflowY: "auto",
+                    flex: 1,
+                    alignContent: "flex-start",
+                }, children: [config.category === "voucher" && pairedVouchers ? (pairedVouchers.map((pair) => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4, width: 64 }, children: [renderItem(pair.base, search ? !pair.base.name.toLowerCase().includes(search.toLowerCase()) : false), pair.upgrade && renderItem(pair.upgrade, search ? !pair.upgrade.name.toLowerCase().includes(search.toLowerCase()) : false)] }, pair.base.name)))) : (filtered.map((item) => (_jsx("div", { style: { width: 64 }, children: renderItem(item) }, item.name)))), ((config.category === "voucher" && pairedVouchers?.length === 0) ||
+                        (config.category !== "voucher" && filtered.length === 0)) && (_jsx("div", { style: { width: "100%", padding: 20, textAlign: "center" }, children: _jsxs(JimboText, { size: "sm", tone: "grey", children: ["No matches for \"", search, "\""] }) }))] })] }));
+}
+// ─── Pre-built configs ───────────────────────────────────────────────────────
+import { VOUCHERS, TAGS, BOSSES, BOOSTER_PACKS, TAROTS_AND_PLANETS } from "../../sprites/spriteData.js";
+// Split consumables by type
+const TAROT_CARDS = TAROTS_AND_PLANETS.filter((c) => {
+    const y = c.pos.y;
+    return y <= 2 && c.name !== "The Soul" && c.name !== "Black Hole";
+}).filter((c) => {
+    return c.pos.y <= 1 || (c.pos.y === 2 && c.pos.x <= 1);
+});
+const PLANET_CARDS = TAROTS_AND_PLANETS.filter((c) => {
+    return c.pos.y === 3 ||
+        c.name === "Planet X" || c.name === "Ceres" || c.name === "Eris" ||
+        c.name === "Black Hole";
+});
+const SPECTRAL_CARDS = TAROTS_AND_PLANETS.filter((c) => {
+    return c.pos.y >= 4 || c.name === "The Soul";
+});
+export const VOUCHER_PICKER_CONFIG = {
+    title: "Vouchers",
+    category: "voucher",
+    clauseKey: "voucher",
+    sheet: "Vouchers",
+    items: VOUCHERS,
+    accent: C.GOLD,
+};
+export const TAG_PICKER_CONFIG = {
+    title: "Tags",
+    category: "tag",
+    clauseKey: "tag",
+    sheet: "tags",
+    items: TAGS,
+    accent: C.GREEN,
+};
+export const BOSS_PICKER_CONFIG = {
+    title: "Boss Blinds",
+    category: "boss",
+    clauseKey: "boss",
+    sheet: "BlindChips",
+    items: BOSSES,
+    accent: C.RED,
+    hint: "Boss Blinds appear at the end of each Ante.",
+};
+export const TAROT_PICKER_CONFIG = {
+    title: "Tarot Cards",
+    category: "tarot",
+    clauseKey: "tarotCard",
+    sheet: "Tarots",
+    items: TAROT_CARDS,
+    accent: C.PURPLE,
+    hint: "Found in Arcana Packs and shops.",
+};
+export const PLANET_PICKER_CONFIG = {
+    title: "Planet Cards",
+    category: "planet",
+    clauseKey: "planetCard",
+    sheet: "Tarots",
+    items: PLANET_CARDS,
+    accent: C.BLUE,
+    hint: "Found in Celestial Packs and shops.",
+};
+export const SPECTRAL_PICKER_CONFIG = {
+    title: "Spectral Cards",
+    category: "spectral",
+    clauseKey: "spectralCard",
+    sheet: "Tarots",
+    items: SPECTRAL_CARDS,
+    accent: C.TEAL_GREY,
+    hint: "Found in Spectral Packs. Ghost Deck only for shop spawns!",
+};
+export const PACK_PICKER_CONFIG = {
+    title: "Booster Packs",
+    category: "pack",
+    clauseKey: "pack",
+    sheet: "Boosters",
+    items: BOOSTER_PACKS,
+    accent: C.ORANGE,
+};

package/dist/components/jamlMap/JamlMapEditor.d.ts

@@ -0,0 +1,11 @@
+import { type SlotSelection, type JamlZone } from "./MysterySlot.js";
+export interface JamlMapEditorProps {
+    /** Initial zone for the demo. */
+    zone?: JamlZone;
+    /** Callback when selections change. Returns JAML string. */
+    onChange?: (jamlString: string) => void;
+}
+export interface MapSlotSelection extends SlotSelection {
+    zone: JamlZone;
+}
+export declare function JamlMapEditor({ zone: initialZone, onChange, }: JamlMapEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/jamlMap/JamlMapEditor.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { MysterySlot } from "./MysterySlot.js";
+import { JokerPicker } from "./JokerPicker.js";
+import { CategoryPicker, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./CategoryPicker.js";
+import { JimboButton, JimboModal } from "../../ui/panel.js";
+import { JimboText } from "../../ui/jimboText.js";
+import { JimboColorOption } from "../../ui/tokens.js";
+import { JimboSprite } from "../../ui/sprites.js";
+// ─── Category menu items ─────────────────────────────────────────────────────
+const C = JimboColorOption;
+const CATEGORIES = [
+    { key: "joker", label: "Joker", sprite: "Joker", sheet: "Jokers", tone: "blue", hint: "Shop, Buffoon Pack" },
+    { key: "voucher", label: "Voucher", sprite: "Blank", sheet: "Vouchers", tone: "gold", hint: "1 per Ante in shop" },
+    { key: "tarot", label: "Tarot Card", sprite: "The Fool", sheet: "Tarots", tone: "tarot", hint: "Arcana Pack, shop" },
+    { key: "planet", label: "Planet Card", sprite: "Mercury", sheet: "Tarots", tone: "planet", hint: "Celestial Pack, shop" },
+    { key: "spectral", label: "Spectral Card", sprite: "Grim", sheet: "Tarots", tone: "spectral", hint: "Ghost Deck, Spectral Pack" },
+    { key: "tag", label: "Tag", sprite: "Uncommon Tag", sheet: "tags", tone: "green", hint: "Skip blind reward" },
+    { key: "boss", label: "Boss Blind", sprite: "The Hook", sheet: "BlindChips", tone: "red", hint: "End of each Ante" },
+    { key: "pack", label: "Booster Pack", sprite: "Arcana Pack", sheet: "Boosters", tone: "orange", hint: "Arcana, Celestial, etc." },
+];
+const ZONE_TONE = {
+    must: "blue",
+    should: "red",
+    mustnot: "orange",
+};
+const ZONE_LABEL = {
+    must: "Must",
+    should: "Should",
+    mustnot: "Must Not",
+};
+const CATEGORY_CONFIG_MAP = {
+    joker: VOUCHER_PICKER_CONFIG,
+    voucher: VOUCHER_PICKER_CONFIG,
+    tag: TAG_PICKER_CONFIG,
+    boss: BOSS_PICKER_CONFIG,
+    tarot: TAROT_PICKER_CONFIG,
+    planet: PLANET_PICKER_CONFIG,
+    spectral: SPECTRAL_PICKER_CONFIG,
+    pack: PACK_PICKER_CONFIG,
+};
+// ─── Component ───────────────────────────────────────────────────────────────
+export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
+    const [currentZone, setCurrentZone] = useState(initialZone);
+    const [ante, setAnte] = useState(1);
+    const [antesState, setAntesState] = useState({});
+    const [activeSlot, setActiveSlot] = useState(null);
+    const [pickerFlow, setPickerFlow] = useState("category");
+    const currentAnteSelections = antesState[ante] || {};
+    const handleSlotTap = useCallback((anteIndex, id, forceCategory) => {
+        setActiveSlot({ ante: anteIndex, id, forceCategory });
+        setPickerFlow(forceCategory || "category");
+    }, []);
+    const handleSlotClear = useCallback((anteIndex, id) => {
+        setAntesState((prev) => {
+            const next = { ...prev };
+            if (!next[anteIndex])
+                return next;
+            const nextAnte = { ...next[anteIndex] };
+            delete nextAnte[id];
+            next[anteIndex] = nextAnte;
+            return next;
+        });
+    }, []);
+    const handleCategorySelect = useCallback((cat) => {
+        setPickerFlow(cat);
+    }, []);
+    const handleItemSelect = useCallback((selection) => {
+        if (!activeSlot)
+            return;
+        setAntesState((prev) => {
+            const next = { ...prev };
+            const nextAnte = { ...(next[activeSlot.ante] || {}) };
+            nextAnte[activeSlot.id] = { ...selection, zone: currentZone };
+            next[activeSlot.ante] = nextAnte;
+            return next;
+        });
+        setActiveSlot(null);
+    }, [activeSlot, currentZone]);
+    const handlePickerCancel = useCallback(() => {
+        if (activeSlot?.forceCategory) {
+            setActiveSlot(null);
+        }
+        else if (pickerFlow !== "category") {
+            setPickerFlow("category");
+        }
+        else {
+            setActiveSlot(null);
+        }
+    }, [activeSlot, pickerFlow]);
+    const handleOverlayClose = useCallback(() => {
+        setActiveSlot(null);
+    }, []);
+    const jsonTree = useMemo(() => buildJsonTree(antesState), [antesState]);
+    useEffect(() => {
+        onChange?.(JSON.stringify(jsonTree, null, 2));
+    }, [jsonTree, onChange]);
+    const renderSlot = (anteIndex, id, width, sheetType, forceCategory) => {
+        const sel = (antesState[anteIndex] || {})[id];
+        return (_jsx(MysterySlot, { zone: sel ? sel.zone : currentZone, sheetType: sheetType, selection: sel, width: width, onTap: () => handleSlotTap(anteIndex, id, forceCategory), onClear: sel ? () => handleSlotClear(anteIndex, id) : undefined, style: { flexShrink: 0 } }, id));
+    };
+    return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: [_jsx("style", { children: `.hide-scrollbar { scrollbar-width: none; ms-overflow-style: none; } .hide-scrollbar::-webkit-scrollbar { display: none; }` }), _jsx("div", { style: { position: "sticky", top: 0, zIndex: 10, background: C.DARKEST, padding: "max(8px, env(safe-area-inset-top, 8px)) 0 8px 0", borderBottom: `2px solid ${C.PANEL_EDGE}` }, children: _jsx("div", { className: "j-flex j-gap-sm", style: { justifyContent: "center" }, children: ["must", "should", "mustnot"].map((z) => (_jsx(JimboButton, { tone: currentZone === z ? ZONE_TONE[z] : "grey", size: "sm", onClick: () => setCurrentZone(z), children: ZONE_LABEL[z] }, z))) }) }), _jsx("div", { className: "hide-scrollbar", style: {
+                    flex: 1,
+                    overflowY: "auto",
+                    scrollSnapType: "y mandatory",
+                    scrollBehavior: "smooth"
+                }, children: [1, 2, 3, 4, 5, 6, 7, 8].map((a) => (_jsxs("div", { style: {
+                        scrollSnapAlign: "start",
+                        padding: "24px 8px 64px 8px",
+                        minHeight: "100%", // ensuring each ante takes at least full viewport height to snap cleanly
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 24,
+                        borderBottom: `2px solid ${C.DARK_GREY}`
+                    }, children: [_jsxs(JimboText, { size: "md", tone: "grey", style: { textAlign: "center", marginBottom: 8 }, children: ["ANTE ", a] }), _jsxs("div", { className: "j-flex j-justify-between j-items-end", children: [_jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "VOUCHER" }), renderSlot(a, `ante_${a}_voucher`, 42, "Vouchers", "voucher")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "SMALL" }), renderSlot(a, `ante_${a}_tag_small`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BIG" }), renderSlot(a, `ante_${a}_tag_big`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BOSS" }), renderSlot(a, `ante_${a}_boss`, 42, "BlindChips", "boss")] })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "SHOP ITEMS" }), _jsx("div", { className: "j-flex hide-scrollbar j-gap-sm", style: { overflowX: "auto", paddingBottom: 8 }, children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => renderSlot(a, `ante_${a}_shop_${i}`, 52, "Jokers")) })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "PACKS" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [1, 2, 3, 4, 5, 6].map(i => renderSlot(a, `ante_${a}_pack_${i}`, 64, "Boosters", "pack")) })] })] }, a))) }), _jsx(JimboModal, { open: activeSlot !== null, onClose: handlePickerCancel, title: pickerFlow === "category" ? "Select Category" : undefined, className: "j-picker-modal", children: activeSlot !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel }))) })] }));
+}
+// ─── Category Selection Menu ─────────────────────────────────────────────────
+function CategoryMenu({ onSelect, }) {
+    return (_jsx("div", { style: {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: 6,
+            padding: 10,
+            maxHeight: "70vh",
+            overflowY: "auto",
+        }, children: CATEGORIES.map((cat) => (_jsx(JimboButton, { tone: cat.tone, size: "sm", fullWidth: true, onClick: () => onSelect(cat.key), style: { padding: "8px 6px" }, children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, width: "100%", textAlign: "left" }, children: [_jsx(JimboSprite, { name: cat.sprite, sheet: cat.sheet, width: 24 }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [_jsx("span", { style: { fontSize: 11 }, children: cat.label }), _jsx("span", { style: { fontSize: 8, opacity: 0.7, letterSpacing: "0.04em", lineHeight: 1 }, children: cat.hint })] })] }) }, cat.key))) }));
+}
+// ─── Build JSON tree from slots ──────────────────────────────────────────────
+function buildJsonTree(antes) {
+    const must = [];
+    const should = [];
+    const mustNot = [];
+    for (const [anteStr, selections] of Object.entries(antes)) {
+        const anteNum = parseInt(anteStr, 10);
+        // Group by zone
+        const byZone = {
+            must: {}, should: {}, mustnot: {}
+        };
+        for (const sel of Object.values(selections)) {
+            if (!byZone[sel.zone][sel.clauseKey]) {
+                byZone[sel.zone][sel.clauseKey] = [];
+            }
+            byZone[sel.zone][sel.clauseKey].push(sel.value);
+        }
+        for (const z of ["must", "should", "mustnot"]) {
+            const clauseList = Object.entries(byZone[z]);
+            if (clauseList.length === 0)
+                continue;
+            const obj = { ante: anteNum };
+            for (const [key, values] of clauseList) {
+                obj[key] = values.length === 1 ? values[0] : values;
+            }
+            if (z === "must")
+                must.push(obj);
+            else if (z === "should")
+                should.push(obj);
+            else if (z === "mustnot")
+                mustNot.push(obj);
+        }
+    }
+    const result = {};
+    if (must.length > 0)
+        result.must = must;
+    if (should.length > 0)
+        result.should = should;
+    if (mustNot.length > 0)
+        result.mustNot = mustNot;
+    return result;
+}