jaml-ui 0.17.2 → 0.18.0

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/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/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;