jaml-ui 0.17.3 → 0.19.0

package/DESIGN.md

@@ -147,13 +147,17 @@ Must-clause items glow blue. Should-clause items glow gold/green. Non-matching i
 
 ## Typography
 
-m6x11plus (m6x11plusplus.otf) is the ONLY font. It is a single-weight pixel font. NEVER apply font-weight bold, semibold, or any weight other than 400. Bold makes it look muddy. Use size and letter-spacing for hierarchy instead.
+m6x11plus (m6x11plusplus.otf) is the ONLY font. It is a single-weight pixel font. NEVER apply font-weight bold, semibold, or any weight other than 400. Bold makes it look muddy. NEVER USE HEAVY!
 
-All text is uppercase with generous letter-spacing (0.04em-0.1em) for labels and micro text. Seed codes use the display size (26px) in gold (#e4b643) with 0.04em tracking.
+Text is NEVER ALL CAPS. Use proper Title Case or Sentence case. Seed codes use the display size (26px) in gold (#e4b643).
+
+Contrast is critical. NEVER make grey text on top of a grey background. If using a dark grey background, use white or light contrasting text.
 
 ## Layout
 
-Target: Minimum 375px portrait width. Components must scale gracefully using relative units and flexible layouts. Avoid fixed widths that break at 375px. Vertical snap-scroll for ante pages. Horizontal swipe for seed navigation.
+Target: Minimum 375px portrait width. Components must scale gracefully using relative units and flexible layouts. Avoid fixed widths that break at 375px. 
+
+Vertical snap-scroll for ante pages using magnetic scroll-snapping (`scroll-snap-type: y mandatory`, `scroll-snap-align: start`). Horizontal swipe for seed navigation. NO visible scrollbars globally — use `::-webkit-scrollbar { display: none; }` and `-ms-overflow-style: none`.
 
 Panels use 2px solid borders with border-silver on top/sides and border-south on bottom, creating a subtle 3D card effect. Inner shadow: `inset 0 0 0 1px rgba(255,255,255,0.04)`. Outer shadow: `0 2px 0 #000`.
 
@@ -181,6 +185,10 @@ JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]`
 
 **GlowRing:** Pulsing outline around JAML-hit items. `0 0 0 2px [color], 0 0 10px [color]`. Animation: opacity 0.55 → 1.0 over 1.6s ease-in-out infinite.
 
+**Card Hover Juice:** Cards receive a 3D magnetic tilt plus a "juice-up" scale animation (`scale(1.05) translateY(-2px)`) on hover to mimic a physical interaction.
+
+**Font Dance:** Text can be made to wiggle with a staggered `translateY` offset animation across characters (`.j-font-dance-char`), creating a cozy pixel font animation.
+
 **SeedPagerHeader:** Three columns: [left stride arrow] [identity panel with seed + copy + deck/stake] [right stride arrow]. Stride arrows are tall red bars with dark-red inset shadow. Identity panel is translucent with counter pip.
 
 ## Do's and Don'ts
@@ -188,8 +196,11 @@ JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]`
 - DO use m6x11plus for everything except code/monospace.
 - DO design for 375px portrait.
 - DO use translateY + box-shadow for button depth. Not CSS 3D transforms.
-- DON'T use font-weight bold. m6x11plus is single-weight. Bold = muddy.
+- DON'T use font-weight bold or heavy. m6x11plus is single-weight.
+- DON'T use ALL CAPS. It is considered an embellishment and ruins the aesthetic.
+- DON'T put grey text on top of a grey background.
 - DON'T use fat padding or margins. Balatro UI is dense and cozy.
-- DON'T add horizontal scroll. Vertical snap-scroll + horizontal swipe only.
+- DON'T add visible scrollbars. Vertical magnetic snap-scroll + horizontal swipe only.
 - DON'T use rounded corners larger than 10px. Balatro is chunky, not bubbly.
 - DON'T use blur-based shadows for depth. Use solid colored box-shadows 80% opaque.
+- DON'T use redundant JS wrappers for `motely-wasm`. Import globally and `motely.boot()` once.

package/dist/components/JamlAnalyzerFullscreen.d.ts

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

package/dist/components/JamlAnalyzerFullscreen.js

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

package/dist/components/JamlCurator.d.ts

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

package/dist/components/JamlCurator.js

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

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

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

package/dist/components/JamlCurator.stories.js

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

package/dist/components/JamlIde.js

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

package/dist/components/JamlIdeVisual.js

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

package/dist/components/jamlMap/CategoryPicker.js

@@ -2,8 +2,11 @@
 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";
+import { JimboColorOption } from "../../ui/tokens.js";
+import { JimboButton } from "../../ui/panel.js";
+import { JimboText } from "../../ui/jimboText.js";
 // ─── Component ───────────────────────────────────────────────────────────────
+const C = JimboColorOption;
 export function CategoryPicker({ config, onSelect, onCancel }) {
     const [search, setSearch] = useState("");
     const filtered = useMemo(() => {
@@ -12,6 +15,19 @@ export function CategoryPicker({ config, onSelect, onCancel }) {
         const q = search.toLowerCase();
         return config.items.filter((item) => item.name.toLowerCase().includes(q));
     }, [config.items, search]);
+    const pairedVouchers = useMemo(() => {
+        if (config.category !== "voucher")
+            return null;
+        const bases = config.items.filter((item) => item.pos.y % 2 === 0);
+        const pairs = bases.map((base) => {
+            const upgrade = config.items.find((u) => u.pos.x === base.pos.x && u.pos.y === base.pos.y + 1);
+            return { base, upgrade };
+        });
+        if (!search)
+            return pairs;
+        const q = search.toLowerCase();
+        return pairs.filter(p => p.base.name.toLowerCase().includes(q) || p.upgrade?.name.toLowerCase().includes(q));
+    }, [config.items, search, config.category]);
     const handleSelect = useCallback((item) => {
         onSelect({
             category: config.category,
@@ -26,8 +42,26 @@ export function CategoryPicker({ config, onSelect, onCancel }) {
             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, "\""] }))] })] }));
+    const renderItem = (item, isMuted = false) => (_jsxs("div", { onClick: () => handleSelect(item), title: item.name, style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 3,
+            padding: 4,
+            borderRadius: 4,
+            cursor: "pointer",
+            opacity: isMuted ? 0.3 : 1,
+        }, children: [_jsx(JimboSprite, { name: item.name, sheet: config.sheet, width: 48 }), _jsx(JimboText, { size: "micro", tone: "grey", style: { maxWidth: 60, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: item.name })] }, item.name));
+    return (_jsxs("div", { style: { padding: 0, maxWidth: 420, maxHeight: "80vh", display: "flex", flexDirection: "column" }, children: [_jsxs("div", { className: "j-flex j-gap-sm", style: { padding: "8px 10px 4px" }, children: [_jsx("input", { className: "j-seed-input__field", type: "text", placeholder: `Search ${config.title.toLowerCase()}...`, value: search, onChange: (e) => setSearch(e.target.value), style: { fontSize: 13, padding: "6px 10px", textTransform: "none", letterSpacing: "0.04em" } }), _jsx(JimboButton, { tone: "gold", size: "sm", onClick: handleAny, children: "Any" })] }), config.hint && (_jsx("div", { className: "j-inner-panel", style: { margin: "4px 10px 6px", padding: "6px 10px" }, children: _jsx(JimboText, { size: "xs", tone: "grey", children: config.hint }) })), _jsxs("div", { style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 6,
+                    padding: "8px 10px 10px",
+                    overflowY: "auto",
+                    flex: 1,
+                    alignContent: "flex-start",
+                }, children: [config.category === "voucher" && pairedVouchers ? (pairedVouchers.map((pair) => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4, width: 64 }, children: [renderItem(pair.base, search ? !pair.base.name.toLowerCase().includes(search.toLowerCase()) : false), pair.upgrade && renderItem(pair.upgrade, search ? !pair.upgrade.name.toLowerCase().includes(search.toLowerCase()) : false)] }, pair.base.name)))) : (filtered.map((item) => (_jsx("div", { style: { width: 64 }, children: renderItem(item) }, item.name)))), ((config.category === "voucher" && pairedVouchers?.length === 0) ||
+                        (config.category !== "voucher" && filtered.length === 0)) && (_jsx("div", { style: { width: "100%", padding: 20, textAlign: "center" }, children: _jsxs(JimboText, { size: "sm", tone: "grey", children: ["No matches for \"", search, "\""] }) }))] })] }));
 }
 // ─── Pre-built configs ───────────────────────────────────────────────────────
 import { VOUCHERS, TAGS, BOSSES, BOOSTER_PACKS, TAROTS_AND_PLANETS } from "../../sprites/spriteData.js";
@@ -36,18 +70,16 @@ 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
+    return c.pos.y === 3 ||
         c.name === "Planet X" || c.name === "Ceres" || c.name === "Eris" ||
         c.name === "Black Hole";
 });
 const SPECTRAL_CARDS = TAROTS_AND_PLANETS.filter((c) => {
     return c.pos.y >= 4 || c.name === "The Soul";
 });
-const C = JimboColorOption;
 export const VOUCHER_PICKER_CONFIG = {
     title: "Vouchers",
     category: "voucher",
@@ -108,117 +140,3 @@ export const PACK_PICKER_CONFIG = {
     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/JamlMapEditor.d.ts

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