jaml-ui 0.17.3 → 0.18.0

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;
+}

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

@@ -0,0 +1,7 @@
+import type { StoryObj } from '@storybook/react';
+import { JamlMapEditor } from './JamlMapEditor';
+import "../../ui/jimbo.css";
+declare const meta: Meta<typeof JamlMapEditor>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/jamlMap/JamlMapEditor.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JamlMapEditor } from './JamlMapEditor';
+import { useState } from 'react';
+import { JimboModalRoot } from '../../ui/panel';
+import "../../ui/jimbo.css"; // Ensure global CSS is loaded
+const meta = {
+    title: 'JamlMap/JamlMapEditor',
+    component: JamlMapEditor,
+    parameters: {
+        layout: 'fullscreen',
+        viewport: {
+            defaultViewport: 'mobile1', // iPhone SE
+        },
+    },
+    decorators: [
+        (Story) => (_jsxs("div", { style: { width: "375px", height: "667px", margin: "0 auto", overflow: "hidden", border: "1px solid #333" }, children: [_jsx(Story, {}), _jsx(JimboModalRoot, {})] })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [clauses, setClauses] = useState([]);
+        return (_jsx(JamlMapEditor, { clauses: clauses, onChange: setClauses }));
+    },
+};

package/dist/components/jamlMap/JokerPicker.js

@@ -2,7 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
 import { JimboSprite } from "../../ui/sprites.js";
-import { JimboColorOption, withAlpha } from "../../ui/tokens.js";
+import { JimboColorOption } from "../../ui/tokens.js";
+import { JimboButton } from "../../ui/panel.js";
+import { JimboText } from "../../ui/jimboText.js";
 import { JOKERS } from "../../sprites/spriteData.js";
 const LEGENDARY_JOKERS = new Set([
     "Canio", "Triboulet", "Yorick", "Chicot", "Perkeo",
@@ -52,13 +54,13 @@ function getJokerRarity(name) {
         return "uncommon";
     return "common";
 }
-// ─── Rarity colors ───────────────────────────────────────────────────────────
+// ─── Rarity → JimboButton tones ──────────────────────────────────────────────
 const C = JimboColorOption;
 const RARITY_META = {
-    common: { label: "Common", color: C.BLUE, bg: withAlpha(C.BLUE, 0.12), hint: "Found in shops and Buffoon Packs" },
-    uncommon: { label: "Uncommon", color: C.GREEN, bg: withAlpha(C.GREEN, 0.12), hint: "Found in shops and Buffoon Packs" },
-    rare: { label: "Rare", color: C.RED, bg: withAlpha(C.RED, 0.12), hint: "Found in shops and Buffoon Packs" },
-    legendary: { label: "Legendary", color: C.PURPLE, bg: withAlpha(C.PURPLE, 0.12), hint: "Spawns from The Soul only! Find in Arcana Pack, Spectral Pack, Charm Tag, or Ethereal Tag." },
+    common: { label: "Common", tone: "blue", hint: "Found in shops and Buffoon Packs" },
+    uncommon: { label: "Uncommon", tone: "green", hint: "Found in shops and Buffoon Packs" },
+    rare: { label: "Rare", tone: "red", hint: "Found in shops and Buffoon Packs" },
+    legendary: { label: "Legendary", tone: "gold", hint: "Spawns from The Soul only!" },
 };
 export function JokerPicker({ onSelect, onCancel }) {
     const [step, setStep] = useState("rarity");
@@ -103,156 +105,25 @@ export function JokerPicker({ onSelect, onCancel }) {
             rarity,
         });
     }, [onSelect, selectedRarity]);
-    return (_jsxs("div", { style: styles.container, children: [_jsxs("div", { style: styles.header, children: [_jsx("button", { onClick: step === "rarity" ? onCancel : () => setStep("rarity"), style: styles.backBtn, children: step === "rarity" ? "✕" : "← Back" }), _jsx("span", { style: styles.title, children: step === "rarity" ? "Select Joker Rarity" : `${RARITY_META[selectedRarity].label} Jokers` }), _jsx("div", { style: { width: 44 } })] }), step === "rarity" && (_jsx("div", { style: styles.rarityGrid, children: ["common", "uncommon", "rare", "legendary"].map((rarity) => {
+    return (_jsxs("div", { style: { padding: 0, display: "flex", flexDirection: "column" }, children: [step === "rarity" && (_jsx("div", { className: "j-flex-col j-gap-sm", style: { padding: 10 }, children: ["common", "uncommon", "rare", "legendary"].map((rarity) => {
                     const meta = RARITY_META[rarity];
-                    return (_jsxs("button", { onClick: () => handleRaritySelect(rarity), style: {
-                            ...styles.rarityBtn,
-                            borderColor: meta.color,
-                            background: meta.bg,
-                        }, children: [_jsx("span", { style: { ...styles.rarityLabel, color: meta.color }, children: meta.label }), _jsx("span", { style: styles.rarityHint, children: meta.hint })] }, rarity));
-                }) })), step === "specific" && selectedRarity && (_jsxs(_Fragment, { children: [_jsxs("div", { style: styles.searchRow, children: [_jsx("input", { type: "text", placeholder: "Search jokers...", value: search, onChange: (e) => setSearch(e.target.value), style: styles.searchInput }), _jsx("button", { onClick: handleAnySelect, style: styles.anyBtn, children: "Any" })] }), selectedRarity === "legendary" && (_jsxs("div", { style: styles.legendaryBanner, children: [_jsx("span", { style: { fontSize: 14 }, children: "\uD83D\uDC51" }), _jsxs("span", { children: ["Legendary jokers spawn from ", _jsx("b", { children: "The Soul" }), ". Find it in ", _jsx("b", { children: "Arcana Pack" }), ",", " ", _jsx("b", { children: "Spectral Pack" }), ", ", _jsx("b", { children: "Charm Tag" }), ", or ", _jsx("b", { children: "Ethereal Tag" }), " only!"] })] })), _jsxs("div", { style: styles.jokerGrid, children: [filteredJokers.map((joker) => (_jsxs("div", { onClick: () => handleJokerSelect(joker), title: joker.name, style: styles.jokerCell, children: [_jsx(JimboSprite, { name: joker.name, sheet: "Jokers", width: 48 }), _jsx("span", { style: styles.jokerName, children: joker.name })] }, joker.name))), filteredJokers.length === 0 && (_jsxs("div", { style: styles.emptyState, children: ["No jokers match \"", search, "\""] }))] })] }))] }));
+                    return (_jsx(JimboButton, { tone: meta.tone, size: "md", fullWidth: true, onClick: () => handleRaritySelect(rarity), children: _jsxs("span", { style: { display: "flex", flexDirection: "column", gap: 2, textAlign: "left", width: "100%" }, children: [_jsx("span", { children: meta.label }), _jsx("span", { style: { fontSize: 9, opacity: 0.7 }, children: meta.hint })] }) }, rarity));
+                }) })), step === "specific" && selectedRarity && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "j-flex j-items-center", style: {
+                            justifyContent: "space-between",
+                            padding: "8px 10px",
+                            borderBottom: `2px solid ${C.PANEL_EDGE}`,
+                        }, children: [_jsx(JimboButton, { tone: "grey", size: "xs", onClick: () => setStep("rarity"), children: "\u2190 Back" }), _jsxs(JimboText, { size: "md", children: [RARITY_META[selectedRarity].label, " Jokers"] }), _jsx("div", { style: { width: 44 } })] }), _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 jokers...", 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: handleAnySelect, children: "Any" })] }), selectedRarity === "legendary" && (_jsx("div", { className: "j-inner-panel", style: { margin: "4px 10px 6px", padding: "6px 10px" }, children: _jsx(JimboText, { size: "xs", tone: "purple", children: "Legendary jokers spawn from The Soul. Find it in Arcana Pack, Spectral Pack, Charm Tag, or Ethereal Tag only!" }) })), _jsxs("div", { style: {
+                            display: "grid",
+                            gridTemplateColumns: "repeat(auto-fill, minmax(64px, 1fr))",
+                            gap: 6,
+                            padding: "8px 10px 10px"
+                        }, children: [filteredJokers.map((joker) => (_jsxs("div", { onClick: () => handleJokerSelect(joker), title: joker.name, style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    gap: 3,
+                                    padding: 4,
+                                    borderRadius: 4,
+                                    cursor: "pointer",
+                                }, children: [_jsx(JimboSprite, { name: joker.name, sheet: "Jokers", width: 48 }), _jsx(JimboText, { size: "micro", tone: "grey", style: { maxWidth: 60, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: joker.name })] }, joker.name))), filteredJokers.length === 0 && (_jsx("div", { style: { gridColumn: "1 / -1", padding: 20, textAlign: "center" }, children: _jsxs(JimboText, { size: "sm", tone: "grey", children: ["No jokers match \"", search, "\""] }) }))] })] }))] }));
 }
-// ─── Styles ──────────────────────────────────────────────────────────────────
-const styles = {
-    container: {
-        background: C.DARKEST,
-        border: `2px solid ${C.TEAL_GREY}`,
-        borderRadius: 8,
-        padding: 0,
-        maxWidth: 400,
-        maxHeight: "80vh",
-        overflow: "hidden",
-        display: "flex",
-        flexDirection: "column",
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-        boxShadow: `0 8px 32px ${withAlpha(C.BLACK, 0.6)}`,
-    },
-    header: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "10px 12px",
-        borderBottom: `1px solid ${C.TEAL_GREY}`,
-        background: withAlpha(C.DARK_GREY, 0.5),
-    },
-    backBtn: {
-        background: "none",
-        border: "none",
-        color: C.GREY,
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-        fontSize: 14,
-        cursor: "pointer",
-        padding: "4px 8px",
-    },
-    title: {
-        color: C.WHITE,
-        fontSize: 16,
-        fontWeight: "bold",
-        letterSpacing: 0.5,
-    },
-    rarityGrid: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 8,
-        padding: 12,
-    },
-    rarityBtn: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        gap: 4,
-        padding: "12px 14px",
-        border: "2px solid",
-        borderRadius: 6,
-        cursor: "pointer",
-        textAlign: "left",
-        transition: "background 150ms",
-    },
-    rarityLabel: {
-        fontSize: 16,
-        fontWeight: "bold",
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-    },
-    rarityHint: {
-        fontSize: 11,
-        color: C.GREY,
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-        lineHeight: "1.3",
-    },
-    searchRow: {
-        display: "flex",
-        gap: 8,
-        padding: "10px 12px 6px",
-    },
-    searchInput: {
-        flex: 1,
-        padding: "6px 10px",
-        borderRadius: 4,
-        border: `1px solid ${C.TEAL_GREY}`,
-        background: withAlpha(C.DARK_GREY, 0.8),
-        color: C.WHITE,
-        fontSize: 13,
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-        outline: "none",
-    },
-    anyBtn: {
-        padding: "6px 14px",
-        borderRadius: 4,
-        border: `1px solid ${C.GOLD}`,
-        background: withAlpha(C.GOLD, 0.15),
-        color: C.GOLD,
-        fontSize: 13,
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-        cursor: "pointer",
-        fontWeight: "bold",
-    },
-    legendaryBanner: {
-        display: "flex",
-        alignItems: "flex-start",
-        gap: 6,
-        margin: "4px 12px 8px",
-        padding: "8px 10px",
-        borderRadius: 4,
-        background: withAlpha(C.PURPLE, 0.12),
-        border: `1px solid ${withAlpha(C.PURPLE, 0.3)}`,
-        color: C.PURPLE,
-        fontSize: 11,
-        lineHeight: "1.4",
-    },
-    jokerGrid: {
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(64px, 1fr))",
-        gap: 6,
-        padding: "8px 12px 12px",
-        overflowY: "auto",
-        flex: 1,
-    },
-    jokerCell: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 3,
-        padding: 4,
-        borderRadius: 4,
-        cursor: "pointer",
-        transition: "background 120ms",
-        background: "transparent",
-    },
-    jokerName: {
-        fontSize: 9,
-        color: C.GREY,
-        textAlign: "center",
-        lineHeight: "1.2",
-        maxWidth: 60,
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-    },
-    emptyState: {
-        gridColumn: "1 / -1",
-        textAlign: "center",
-        color: C.GREY,
-        fontSize: 13,
-        padding: 20,
-    },
-};

package/dist/components/jamlMap/MysterySlot.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import React, { useState } from "react";
 import { JimboSprite } from "../../ui/sprites.js";
 import { JimboColorOption, withAlpha, JIMBO_ANIMATIONS } from "../../ui/tokens.js";
 // ─── Zone colors ─────────────────────────────────────────────────────────────
@@ -30,6 +30,8 @@ function getWildcardName(category) {
 export function MysterySlot({ zone, sheetType, selection, width = 56, onTap, onClear, style, }) {
     const [hover, setHover] = useState(false);
     const [pressed, setPressed] = useState(false);
+    const [tilt, setTilt] = useState({ rx: 0, ry: 0, tx: 0, ty: 0 });
+    const cardRef = React.useRef(null);
     const borderColor = ZONE_BORDER[zone];
     const isEmpty = !selection;
     const cardH = Math.round((width * 95) / 71);
@@ -41,7 +43,26 @@ export function MysterySlot({ zone, sheetType, selection, width = 56, onTap, onC
         : hover
             ? JIMBO_ANIMATIONS.JUICE_UP_SCALE
             : 1;
-    return (_jsxs("div", { onClick: onTap, onMouseEnter: () => setHover(true), onMouseLeave: () => { setHover(false); setPressed(false); }, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), style: {
+    const handleMouseMove = (e) => {
+        if (!cardRef.current)
+            return;
+        const rect = cardRef.current.getBoundingClientRect();
+        // Normalize coordinates: -1 to 1
+        const nx = Math.max(-1, Math.min(1, ((e.clientX - rect.left) / rect.width - 0.5) * 2));
+        const ny = Math.max(-1, Math.min(1, ((e.clientY - rect.top) / rect.height - 0.5) * 2));
+        setTilt({
+            rx: ny * -20, // max 20deg tilt
+            ry: nx * 20,
+            tx: nx * -4, // subtle shift
+            ty: ny * -4,
+        });
+    };
+    const handleMouseLeave = () => {
+        setHover(false);
+        setPressed(false);
+        setTilt({ rx: 0, ry: 0, tx: 0, ty: 0 });
+    };
+    return (_jsxs("div", { ref: cardRef, onClick: onTap, onMouseEnter: () => setHover(true), onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), style: {
             position: "relative",
             width: width + 8,
             height: cardH + 8,
@@ -56,8 +77,13 @@ export function MysterySlot({ zone, sheetType, selection, width = 56, onTap, onC
             background: isEmpty
                 ? withAlpha(borderColor, 0.06)
                 : withAlpha(C.DARKEST, 0.8),
-            transform: `scale(${scale})`,
-            transition: `transform ${JIMBO_ANIMATIONS.JUICE_DURATION}ms ${JIMBO_ANIMATIONS.JUICE_EASING}, border-color 200ms`,
+            transform: `perspective(600px) scale(${scale}) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg) translate(${tilt.tx}px, ${tilt.ty}px)`,
+            transformStyle: "preserve-3d",
+            transition: hover
+                ? `border-color 200ms`
+                : `transform 400ms ${JIMBO_ANIMATIONS.JUICE_EASING}, border-color 200ms`,
+            boxShadow: hover ? `0 8px 16px ${withAlpha(C.BLACK, 0.4)}` : `0 2px 4px ${withAlpha(C.BLACK, 0.2)}`,
+            zIndex: hover ? 10 : 1,
             ...style,
         }, children: [_jsx(JimboSprite, { name: spriteName, sheet: spriteSheet, width: width, style: {
                     opacity: isEmpty ? 0.5 : 1,
@@ -80,11 +106,12 @@ export function MysterySlot({ zone, sheetType, selection, width = 56, onTap, onC
                     cursor: "pointer",
                     lineHeight: 1,
                     boxShadow: `0 1px 4px ${withAlpha(C.BLACK, 0.5)}`,
+                    transform: "translateZ(10px)", // Pop out in 3D
                 }, children: "\u00D7" })), isEmpty && hover && (_jsx("div", { style: {
                     position: "absolute",
                     bottom: -16,
                     left: "50%",
-                    transform: "translateX(-50%)",
+                    transform: "translateX(-50%) translateZ(10px)",
                     fontFamily: "m6x11plus, ui-monospace, monospace",
                     fontSize: 10,
                     color: borderColor,

package/dist/components/jamlMap/MysterySlot.stories.d.ts

@@ -0,0 +1,7 @@
+import type { StoryObj } from '@storybook/react';
+import { MysterySlot } from './MysterySlot';
+declare const meta: Meta<typeof MysterySlot>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const FilledJoker: Story;

package/dist/components/jamlMap/MysterySlot.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MysterySlot } from './MysterySlot';
+const meta = {
+    title: 'JAML/MysterySlot',
+    component: MysterySlot,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        zone: 'must',
+        width: 64,
+    },
+    render: (args) => (_jsx("div", { style: { background: '#1e2b2d', padding: 20 }, children: _jsx(MysterySlot, { ...args }) })),
+};
+export const FilledJoker = {
+    args: {
+        zone: 'must',
+        width: 64,
+        selection: {
+            clauseKey: 'joker',
+            value: 'Joker',
+            displayLabel: 'Joker',
+            spriteName: 'Joker',
+            sheetType: 'Jokers',
+        },
+    },
+    render: (args) => (_jsx("div", { style: { background: '#1e2b2d', padding: 20 }, children: _jsx(MysterySlot, { ...args }) })),
+};

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

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

@@ -1,9 +1,5 @@
-import type { Motely as MotelyT, MotelyWasm as MotelyWasmT } from "motely-wasm";
+import { MotelyWasm, Motely } from "motely-wasm";
 import type { AnalyzerAnteView } from "../components/AnalyzerExplorer.js";
-export interface MotelyRuntime {
-    MotelyWasm: typeof MotelyWasmT;
-    Motely: typeof MotelyT;
-}
 export type AnalyzerStatus = "idle" | "running" | "done" | "error";
 export type MotelyJsRunState = {
     voucherBitfield: number;
@@ -18,15 +14,15 @@ export type MotelyJsRunState = {
  * `createShopItemStream(ante, runState, ...)`.
  */
 export interface AnalyzerLive {
-    ctx: ReturnType<typeof MotelyWasmT.createSearchContext>;
-    Motely: typeof MotelyT;
+    ctx: ReturnType<typeof MotelyWasm.createSearchContext>;
+    Motely: typeof Motely;
     runStates: Record<number, MotelyJsRunState>;
     desiredNames: ReadonlySet<string>;
     seed: string;
     deck: string;
     stake: string;
 }
-export declare function useAnalyzer(motelyRuntime: MotelyRuntime | null): {
+export declare function useAnalyzer(): {
     antes: AnalyzerAnteView[];
     status: AnalyzerStatus;
     error: string | null;

package/dist/hooks/useAnalyzer.js

@@ -1,8 +1,9 @@
 "use client";
 import { useState, useCallback } from "react";
+import { MotelyWasm, Motely } from "motely-wasm";
 import { extractVisualJamlItems } from "../utils/jamlMapPreview.js";
 import { motelyItemDisplayNameFromValue } from "../motelyDisplay.js";
-export function useAnalyzer(motelyRuntime) {
+export function useAnalyzer() {
     const [antes, setAntes] = useState([]);
     const [status, setStatus] = useState("idle");
     const [error, setError] = useState(null);
@@ -17,10 +18,6 @@ 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;
             const desiredNames = new Set();
@@ -80,7 +77,7 @@ export function useAnalyzer(motelyRuntime) {
             setError(e instanceof Error ? e.message : String(e));
             setStatus("error");
         }
-    }, [motelyRuntime]);
+    }, []);
     const clearError = useCallback(() => {
         setError(null);
         setStatus((s) => (s === "error" ? "idle" : s));

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export { Showcase, type ShowcaseFilter, type ShowcaseLiveStats, type ShowcasePro
 export { extractVisualJamlItems, type JamlPreviewGroups, type JamlPreviewItem, type JamlPreviewSection, type JamlPreviewVisualType, } from "./utils/jamlMapPreview.js";
 export { useMotelyStream, type StreamItem, type StreamState } from "./hooks/useShopStream.js";
 export { useSearch, type SearchResult, type SearchStatus, type UseSearchState, } from "./hooks/useSearch.js";
-export { useAnalyzer, type AnalyzerStatus, type AnalyzerLive, type MotelyRuntime, type MotelyJsRunState, } from "./hooks/useAnalyzer.js";
+export { useAnalyzer, type AnalyzerStatus, type AnalyzerLive, 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, 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";
+export { JamlMapEditor, JokerPicker, MysterySlot, CategoryPicker, type JamlMapEditorProps, 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, 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";
+export { JamlMapEditor, 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";