jaml-ui 0.17.1 → 0.17.3

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,224 @@
+"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, withAlpha } from "../../ui/tokens.js";
+// ─── Component ───────────────────────────────────────────────────────────────
+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 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 C = JimboColorOption;
+    return (_jsxs("div", { style: styles.container, children: [_jsxs("div", { style: { ...styles.header, borderBottomColor: withAlpha(config.accent, 0.3) }, children: [_jsx("button", { onClick: onCancel, style: styles.backBtn, children: "\u2715" }), _jsx("span", { style: { ...styles.title, color: config.accent }, children: config.title }), _jsx("div", { style: { width: 44 } })] }), _jsxs("div", { style: styles.searchRow, children: [_jsx("input", { type: "text", placeholder: `Search ${config.title.toLowerCase()}...`, value: search, onChange: (e) => setSearch(e.target.value), style: styles.searchInput }), _jsx("button", { onClick: handleAny, style: styles.anyBtn, children: "Any" })] }), config.hint && (_jsxs("div", { style: styles.hint, children: [_jsx("span", { children: "\uD83D\uDCA1" }), _jsx("span", { children: config.hint })] })), _jsxs("div", { style: styles.grid, children: [filtered.map((item) => (_jsxs("div", { onClick: () => handleSelect(item), title: item.name, style: styles.cell, children: [_jsx(JimboSprite, { name: item.name, sheet: config.sheet, width: 48 }), _jsx("span", { style: styles.label, children: item.name })] }, item.name))), filtered.length === 0 && (_jsxs("div", { style: styles.emptyState, 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) => {
+    // Tarots are y=0..1 + Judgement (y=2,x=0) + The World (y=2,x=1)
+    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 || // Main planets row
+        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";
+});
+const C = JimboColorOption;
+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,
+};
+// ─── Styles ──────────────────────────────────────────────────────────────────
+const styles = {
+    container: {
+        background: JimboColorOption.DARKEST,
+        border: `2px solid ${JimboColorOption.TEAL_GREY}`,
+        borderRadius: 8,
+        padding: 0,
+        maxWidth: 420,
+        maxHeight: "80vh",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+        boxShadow: `0 8px 32px ${withAlpha(JimboColorOption.BLACK, 0.6)}`,
+    },
+    header: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "10px 12px",
+        borderBottom: `1px solid ${JimboColorOption.TEAL_GREY}`,
+        background: withAlpha(JimboColorOption.DARK_GREY, 0.5),
+    },
+    backBtn: {
+        background: "none",
+        border: "none",
+        color: JimboColorOption.GREY,
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+        fontSize: 14,
+        cursor: "pointer",
+        padding: "4px 8px",
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: "bold",
+        letterSpacing: 0.5,
+    },
+    searchRow: {
+        display: "flex",
+        gap: 8,
+        padding: "10px 12px 6px",
+    },
+    searchInput: {
+        flex: 1,
+        padding: "6px 10px",
+        borderRadius: 4,
+        border: `1px solid ${JimboColorOption.TEAL_GREY}`,
+        background: withAlpha(JimboColorOption.DARK_GREY, 0.8),
+        color: JimboColorOption.WHITE,
+        fontSize: 13,
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+        outline: "none",
+    },
+    anyBtn: {
+        padding: "6px 14px",
+        borderRadius: 4,
+        border: `1px solid ${JimboColorOption.GOLD}`,
+        background: withAlpha(JimboColorOption.GOLD, 0.15),
+        color: JimboColorOption.GOLD,
+        fontSize: 13,
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+        cursor: "pointer",
+        fontWeight: "bold",
+    },
+    hint: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 6,
+        margin: "4px 12px 8px",
+        padding: "8px 10px",
+        borderRadius: 4,
+        background: withAlpha(JimboColorOption.TEAL_GREY, 0.12),
+        border: `1px solid ${withAlpha(JimboColorOption.TEAL_GREY, 0.3)}`,
+        color: JimboColorOption.GREY,
+        fontSize: 11,
+        lineHeight: "1.4",
+    },
+    grid: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(64px, 1fr))",
+        gap: 6,
+        padding: "8px 12px 12px",
+        overflowY: "auto",
+        flex: 1,
+    },
+    cell: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 3,
+        padding: 4,
+        borderRadius: 4,
+        cursor: "pointer",
+        transition: "background 120ms",
+        background: "transparent",
+    },
+    label: {
+        fontSize: 9,
+        color: JimboColorOption.GREY,
+        textAlign: "center",
+        lineHeight: "1.2",
+        maxWidth: 60,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    emptyState: {
+        gridColumn: "1 / -1",
+        textAlign: "center",
+        color: JimboColorOption.GREY,
+        fontSize: 13,
+        padding: 20,
+    },
+};

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

@@ -2,7 +2,7 @@ import { type SlotSelection, type JamlZone } from "./MysterySlot.js";
 export interface JamlMapEditorDemoProps {
     /** Initial zone for the demo. */
     zone?: JamlZone;
-    /** Callback when a selection changes, to update JAML text. */
+    /** Callback when selections change. */
     onChange?: (slots: (SlotSelection | null)[]) => void;
 }
 export declare function JamlMapEditorDemo({ zone: initialZone, onChange, }: JamlMapEditorDemoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/jamlMap/JamlMapEditorDemo.js

@@ -1,18 +1,32 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } 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 { JimboColorOption, withAlpha } from "../../ui/tokens.js";
-// ─── Component ───────────────────────────────────────────────────────────────
+// ─── Category menu items ─────────────────────────────────────────────────────
 const C = JimboColorOption;
-const INITIAL_SLOTS = 8; // 8 shop item slots like in Balatro ante
+const CATEGORIES = [
+    { key: "joker", label: "Joker", icon: "🃏", color: C.BLUE, hint: "Shop, Buffoon Pack" },
+    { key: "voucher", label: "Voucher", icon: "🎫", color: C.GOLD, hint: "1 per Ante in shop" },
+    { key: "tarot", label: "Tarot Card", icon: "🔮", color: C.PURPLE, hint: "Arcana Pack, shop" },
+    { key: "planet", label: "Planet Card", icon: "🪐", color: C.BLUE, hint: "Celestial Pack, shop" },
+    { key: "spectral", label: "Spectral Card", icon: "👻", color: C.TEAL_GREY, hint: "Ghost Deck, Spectral Pack" },
+    { key: "tag", label: "Tag", icon: "🏷️", color: C.GREEN, hint: "Skip blind reward" },
+    { key: "boss", label: "Boss Blind", icon: "👁️", color: C.RED, hint: "End of each Ante" },
+    { key: "pack", label: "Booster Pack", icon: "📦", color: C.ORANGE, hint: "Arcana, Celestial, etc." },
+];
+// ─── Component ───────────────────────────────────────────────────────────────
+const INITIAL_SLOTS = 8;
 export function JamlMapEditorDemo({ zone: initialZone = "must", onChange, }) {
     const [zone, setZone] = useState(initialZone);
     const [slots, setSlots] = useState(Array(INITIAL_SLOTS).fill(null));
     const [activeSlot, setActiveSlot] = useState(null);
+    const [pickerFlow, setPickerFlow] = useState("category");
     const handleSlotTap = useCallback((index) => {
         setActiveSlot(index);
+        setPickerFlow("category");
     }, []);
     const handleSlotClear = useCallback((index) => {
         setSlots((prev) => {
@@ -22,7 +36,15 @@ export function JamlMapEditorDemo({ zone: initialZone = "must", onChange, }) {
             return next;
         });
     }, [onChange]);
-    const handleJokerSelect = useCallback((selection) => {
+    const handleCategorySelect = useCallback((cat) => {
+        if (cat === "joker") {
+            setPickerFlow("joker");
+        }
+        else {
+            setPickerFlow(cat);
+        }
+    }, []);
+    const handleItemSelect = useCallback((selection) => {
         if (activeSlot === null)
             return;
         setSlots((prev) => {
@@ -34,23 +56,64 @@ export function JamlMapEditorDemo({ zone: initialZone = "must", onChange, }) {
         setActiveSlot(null);
     }, [activeSlot, onChange]);
     const handlePickerCancel = useCallback(() => {
+        if (pickerFlow !== "category") {
+            // Go back to category selection
+            setPickerFlow("category");
+        }
+        else {
+            setActiveSlot(null);
+        }
+    }, [pickerFlow]);
+    const handleOverlayClose = useCallback(() => {
         setActiveSlot(null);
     }, []);
     const filledCount = slots.filter(Boolean).length;
+    // Build the JSON tree from slots
+    const jsonTree = useMemo(() => buildJsonTree(zone, slots), [zone, slots]);
     return (_jsxs("div", { style: styles.wrapper, children: [_jsx("div", { style: styles.zoneBar, children: ["must", "should", "mustnot"].map((z) => (_jsx("button", { onClick: () => setZone(z), style: {
                         ...styles.zoneBtn,
                         borderColor: zone === z ? ZONE_COLORS[z] : C.TEAL_GREY,
                         color: zone === z ? ZONE_COLORS[z] : C.GREY,
                         background: zone === z ? withAlpha(ZONE_COLORS[z], 0.1) : "transparent",
-                    }, children: z.toUpperCase() }, z))) }), _jsxs("div", { style: styles.sectionLabel, children: [_jsx("span", { style: { color: ZONE_COLORS[zone] }, children: "Shop Items" }), _jsxs("span", { style: { color: C.GREY, fontSize: 11 }, children: [filledCount, "/", INITIAL_SLOTS, " defined"] })] }), _jsx("div", { style: styles.slotRow, children: slots.map((selection, i) => (_jsx(MysterySlot, { zone: zone, sheetType: "Jokers", selection: selection ?? undefined, width: 48, onTap: () => handleSlotTap(i), onClear: selection ? () => handleSlotClear(i) : undefined }, i))) }), _jsx("div", { style: styles.scrollHint, children: "\u25C0 swipe \u25B6" }), activeSlot !== null && (_jsxs("div", { style: styles.overlay, children: [_jsx("div", { style: styles.overlayBackdrop, onClick: handlePickerCancel }), _jsx("div", { style: styles.pickerWrapper, children: _jsx(JokerPicker, { onSelect: handleJokerSelect, onCancel: handlePickerCancel }) })] })), filledCount > 0 && (_jsxs("div", { style: styles.jamlPreview, children: [_jsx("div", { style: styles.jamlHeader, children: "Generated JAML" }), _jsx("pre", { style: styles.jamlCode, children: generateJamlSnippet(zone, slots) })] }))] }));
+                    }, children: z.toUpperCase() }, z))) }), _jsxs("div", { style: styles.sectionLabel, children: [_jsx("span", { style: { color: ZONE_COLORS[zone] }, children: "Shop Items" }), _jsxs("span", { style: { color: C.GREY, fontSize: 11 }, children: [filledCount, "/", INITIAL_SLOTS, " defined"] })] }), _jsx("div", { style: styles.slotRow, children: slots.map((selection, i) => (_jsx(MysterySlot, { zone: zone, sheetType: "Jokers", selection: selection ?? undefined, width: 48, onTap: () => handleSlotTap(i), onClear: selection ? () => handleSlotClear(i) : undefined }, i))) }), _jsx("div", { style: styles.scrollHint, children: "\u25C0 swipe \u25B6" }), activeSlot !== null && (_jsxs("div", { style: styles.overlay, children: [_jsx("div", { style: styles.overlayBackdrop, onClick: handleOverlayClose }), _jsx("div", { style: styles.pickerWrapper, children: pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect, onCancel: handleOverlayClose })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel })) })] })), filledCount > 0 && (_jsxs("div", { style: styles.jsonPreview, children: [_jsxs("div", { style: styles.jsonHeader, children: [_jsx("span", { children: "Filter Preview" }), _jsx("span", { style: { fontSize: 10, opacity: 0.6 }, children: "JSON" })] }), _jsx("div", { style: styles.jsonBody, children: _jsx(JsonTreeNode, { data: jsonTree, indent: 0 }) })] }))] }));
+}
+// ─── Category Selection Menu ─────────────────────────────────────────────────
+function CategoryMenu({ onSelect, onCancel, }) {
+    return (_jsxs("div", { style: styles.catMenuContainer, children: [_jsxs("div", { style: styles.catMenuHeader, children: [_jsx("button", { onClick: onCancel, style: styles.backBtn, children: "\u2715" }), _jsx("span", { style: styles.catMenuTitle, children: "Select Category" }), _jsx("div", { style: { width: 44 } })] }), _jsx("div", { style: styles.catGrid, children: CATEGORIES.map((cat) => (_jsxs("button", { onClick: () => onSelect(cat.key), style: {
+                        ...styles.catBtn,
+                        borderColor: withAlpha(cat.color, 0.3),
+                    }, children: [_jsx("span", { style: styles.catIcon, children: cat.icon }), _jsxs("div", { style: styles.catText, children: [_jsx("span", { style: { ...styles.catLabel, color: cat.color }, children: cat.label }), _jsx("span", { style: styles.catHint, children: cat.hint })] })] }, cat.key))) })] }));
 }
-// ─── JAML generation ─────────────────────────────────────────────────────────
-function generateJamlSnippet(zone, slots) {
+// ─── JSON tree renderer ──────────────────────────────────────────────────────
+function JsonTreeNode({ data, indent }) {
+    if (data === null || data === undefined) {
+        return _jsx("span", { style: { color: C.GREY }, children: "null" });
+    }
+    if (typeof data === "string") {
+        return _jsxs("span", { style: { color: C.GREEN_TEXT }, children: ["\"", data, "\""] });
+    }
+    if (typeof data === "number" || typeof data === "boolean") {
+        return _jsx("span", { style: { color: C.GOLD }, children: String(data) });
+    }
+    if (Array.isArray(data)) {
+        if (data.length === 0)
+            return _jsx("span", { style: { color: C.GREY }, children: "[]" });
+        return (_jsxs("span", { children: [_jsx("span", { style: { color: C.GREY }, children: "[" }), data.map((item, i) => (_jsxs("div", { style: { paddingLeft: (indent + 1) * 14 }, children: [_jsx(JsonTreeNode, { data: item, indent: indent + 1 }), i < data.length - 1 && _jsx("span", { style: { color: C.GREY }, children: "," })] }, i))), _jsx("div", { style: { paddingLeft: indent * 14 }, children: _jsx("span", { style: { color: C.GREY }, children: "]" }) })] }));
+    }
+    if (typeof data === "object") {
+        const entries = Object.entries(data);
+        if (entries.length === 0)
+            return _jsx("span", { style: { color: C.GREY }, children: "{}" });
+        return (_jsxs("span", { children: [_jsx("span", { style: { color: C.GREY }, children: "{" }), entries.map(([key, val], i) => (_jsxs("div", { style: { paddingLeft: (indent + 1) * 14 }, children: [_jsx("span", { style: { color: C.BLUE }, children: key }), _jsx("span", { style: { color: C.GREY }, children: ": " }), _jsx(JsonTreeNode, { data: val, indent: indent + 1 }), i < entries.length - 1 && _jsx("span", { style: { color: C.GREY }, children: "," })] }, key))), _jsx("div", { style: { paddingLeft: indent * 14 }, children: _jsx("span", { style: { color: C.GREY }, children: "}" }) })] }));
+    }
+    return _jsx("span", { children: String(data) });
+}
+// ─── Build JSON tree from slots ──────────────────────────────────────────────
+function buildJsonTree(zone, slots) {
     const filled = slots.filter(Boolean);
     if (filled.length === 0)
-        return "# empty";
+        return {};
     const jamlZone = zone === "mustnot" ? "mustNot" : zone;
-    const lines = [`${jamlZone}:`];
     // Group by clauseKey
     const groups = new Map();
     for (const s of filled) {
@@ -58,22 +121,35 @@ function generateJamlSnippet(zone, slots) {
         existing.push(s.value);
         groups.set(s.clauseKey, existing);
     }
+    const clauses = [];
     for (const [key, values] of groups) {
         if (values.length === 1) {
-            lines.push(`  - ${key}: ${values[0]}`);
+            clauses.push({ [key]: values[0] });
         }
         else {
-            lines.push(`  - ${key}: [${values.join(", ")}]`);
+            clauses.push({ [key]: values });
         }
     }
-    return lines.join("\n");
+    return { [jamlZone]: clauses };
 }
-// ─── Constants & styles ──────────────────────────────────────────────────────
+// ─── Category → picker config mapping ────────────────────────────────────────
+const CATEGORY_CONFIG_MAP = {
+    joker: VOUCHER_PICKER_CONFIG, // Not used — routed to JokerPicker
+    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,
+};
+// ─── Zone colors ─────────────────────────────────────────────────────────────
 const ZONE_COLORS = {
     must: C.BLUE,
     should: C.RED,
     mustnot: C.ORANGE,
 };
+// ─── Styles ──────────────────────────────────────────────────────────────────
 const styles = {
     wrapper: {
         position: "relative",
@@ -141,15 +217,90 @@ const styles = {
         position: "relative",
         zIndex: 1,
         width: "90%",
-        maxWidth: 400,
+        maxWidth: 420,
+    },
+    // Category menu
+    catMenuContainer: {
+        background: C.DARKEST,
+        border: `2px solid ${C.TEAL_GREY}`,
+        borderRadius: 8,
+        overflow: "hidden",
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+        boxShadow: `0 8px 32px ${withAlpha(C.BLACK, 0.6)}`,
     },
-    jamlPreview: {
+    catMenuHeader: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "10px 12px",
+        borderBottom: `1px solid ${C.TEAL_GREY}`,
+        background: withAlpha(C.DARK_GREY, 0.5),
+    },
+    catMenuTitle: {
+        color: C.WHITE,
+        fontSize: 16,
+        fontWeight: "bold",
+        letterSpacing: 0.5,
+    },
+    backBtn: {
+        background: "none",
+        border: "none",
+        color: C.GREY,
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+        fontSize: 14,
+        cursor: "pointer",
+        padding: "4px 8px",
+    },
+    catGrid: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: 6,
+        padding: 10,
+        maxHeight: "70vh",
+        overflowY: "auto",
+    },
+    catBtn: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "10px 10px",
+        border: "1px solid",
+        borderRadius: 6,
+        cursor: "pointer",
+        background: withAlpha(C.DARK_GREY, 0.3),
+        textAlign: "left",
+        transition: "background 150ms, transform 100ms",
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+    },
+    catIcon: {
+        fontSize: 20,
+        flexShrink: 0,
+    },
+    catText: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+        minWidth: 0,
+    },
+    catLabel: {
+        fontSize: 13,
+        fontWeight: "bold",
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+    },
+    catHint: {
+        fontSize: 9,
+        color: C.GREY,
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+        lineHeight: "1.2",
+    },
+    // JSON preview
+    jsonPreview: {
         marginTop: 12,
         borderRadius: 4,
         border: `1px solid ${C.TEAL_GREY}`,
         overflow: "hidden",
     },
-    jamlHeader: {
+    jsonHeader: {
         padding: "6px 10px",
         fontSize: 11,
         color: C.GREY,
@@ -157,14 +308,16 @@ const styles = {
         borderBottom: `1px solid ${C.TEAL_GREY}`,
         letterSpacing: 1,
         textTransform: "uppercase",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
     },
-    jamlCode: {
-        margin: 0,
+    jsonBody: {
         padding: "8px 10px",
         fontSize: 12,
-        color: C.GREEN_TEXT,
         background: withAlpha(C.DARKEST, 0.8),
-        lineHeight: "1.5",
-        whiteSpace: "pre-wrap",
+        lineHeight: "1.6",
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+        overflowX: "auto",
     },
 };

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

@@ -1,3 +1,4 @@
 export { MysterySlot, type MysterySlotProps, type SlotSelection, type SlotCategory, type JamlZone } from "./MysterySlot.js";
 export { JokerPicker, type JokerPickerProps, type JokerRarity } from "./JokerPicker.js";
 export { JamlMapEditorDemo, type JamlMapEditorDemoProps } from "./JamlMapEditorDemo.js";
+export { CategoryPicker, type CategoryPickerConfig, type CategoryPickerProps, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./CategoryPicker.js";

package/dist/components/jamlMap/index.js

@@ -1,3 +1,4 @@
 export { MysterySlot } from "./MysterySlot.js";
 export { JokerPicker } from "./JokerPicker.js";
 export { JamlMapEditorDemo } from "./JamlMapEditorDemo.js";
+export { 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";

package/dist/hooks/useAnalyzer.d.ts

@@ -26,7 +26,7 @@ export interface AnalyzerLive {
     deck: string;
     stake: string;
 }
-export declare function useAnalyzer(motelyRuntime: MotelyRuntime): {
+export declare function useAnalyzer(motelyRuntime: MotelyRuntime | null): {
     antes: AnalyzerAnteView[];
     status: AnalyzerStatus;
     error: string | null;

package/dist/hooks/useAnalyzer.js

@@ -17,6 +17,9 @@ export function useAnalyzer(motelyRuntime) {
         setStatus("running");
         setError(null);
         try {
+            if (!motelyRuntime) {
+                throw new Error("motely-wasm runtime is still booting.");
+            }
             const { MotelyWasm, Motely } = motelyRuntime;
             const deckEnum = Motely.MotelyDeck[deck] ?? Motely.MotelyDeck.Red;
             const stakeEnum = Motely.MotelyStake[stake] ?? Motely.MotelyStake.White;

package/dist/index.d.ts

@@ -24,4 +24,4 @@ export { useSearch, type SearchResult, type SearchStatus, type UseSearchState, }
 export { useAnalyzer, type AnalyzerStatus, type AnalyzerLive, type MotelyRuntime, type MotelyJsRunState, } from "./hooks/useAnalyzer.js";
 export { JamlAestheticSelector, type JamlAestheticSelectorProps, type JamlAestheticOption, } from "./components/JamlAestheticSelector.js";
 export { JamlSeedInput, type JamlSeedInputProps, } from "./components/JamlSeedInput.js";
-export { JamlMapEditorDemo, JokerPicker, MysterySlot, type JamlMapEditorDemoProps, type JokerPickerProps, type JokerRarity, type MysterySlotProps, type SlotCategory, type SlotSelection, } from "./components/jamlMap/index.js";
+export { JamlMapEditorDemo, JokerPicker, MysterySlot, CategoryPicker, type JamlMapEditorDemoProps, type JokerPickerProps, type JokerRarity, type MysterySlotProps, type SlotCategory, type SlotSelection, type CategoryPickerConfig, type CategoryPickerProps, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./components/jamlMap/index.js";

package/dist/index.js

@@ -25,4 +25,4 @@ export { useSearch, } from "./hooks/useSearch.js";
 export { useAnalyzer, } from "./hooks/useAnalyzer.js";
 export { JamlAestheticSelector, } from "./components/JamlAestheticSelector.js";
 export { JamlSeedInput, } from "./components/JamlSeedInput.js";
-export { JamlMapEditorDemo, JokerPicker, MysterySlot, } from "./components/jamlMap/index.js";
+export { JamlMapEditorDemo, JokerPicker, MysterySlot, CategoryPicker, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./components/jamlMap/index.js";