jaml-ui 0.16.0 → 0.17.1

package/dist/components/JamlMapPreview.js

@@ -6,9 +6,9 @@ import { JimboColorOption } from "../ui/tokens.js";
 import { extractVisualJamlItems, } from "../utils/jamlMapPreview.js";
 const C = JimboColorOption;
 const ZONES = {
-    must: { label: "MUST", color: C.BLUE },
-    should: { label: "SHOULD", color: C.RED },
-    mustNot: { label: "MUST NOT", color: C.ORANGE },
+    must: { label: "MUST", color: C.BLUE, glow: C.BLUE },
+    should: { label: "SHOULD", color: C.RED, glow: C.GOLD },
+    mustNot: { label: "MUST NOT", color: C.ORANGE, glow: C.ORANGE },
 };
 const SECTION_ORDER = ["must", "should", "mustNot"];
 const SHEET_FOR_VISUAL = {
@@ -18,48 +18,126 @@ const SHEET_FOR_VISUAL = {
     tag: "tags",
     boss: "BlindChips",
 };
-function ClausePill({ item, color }) {
+/**
+ * Pulsing glow animation for hits.
+ * Design ref: assets/...DesignsV2/src/v2/GlowRing.css
+ */
+const GLOW_ANIMATION = `
+@keyframes j-glow-pulse {
+  0% { box-shadow: 0 0 0 1px var(--glow-color), 0 0 4px var(--glow-color); opacity: 0.8; }
+  50% { box-shadow: 0 0 0 2px var(--glow-color), 0 0 12px var(--glow-color); opacity: 1; }
+  100% { box-shadow: 0 0 0 1px var(--glow-color), 0 0 4px var(--glow-color); opacity: 0.8; }
+}
+`;
+function ClausePill({ item, color, glow, matchCount }) {
+    const isHit = matchCount > 0;
+    const hasData = matchCount !== undefined && matchCount >= 0;
     return (_jsxs("div", { style: {
             display: "flex",
             alignItems: "center",
             gap: 6,
-            background: C.DARK_GREY,
-            border: `2px solid ${color}`,
-            borderRadius: 6,
-            padding: "5px 8px 5px 4px",
-            boxShadow: `0 2px 0 ${C.BLACK}`,
-        }, title: `${item.clauseKey}: ${item.value}`, children: [_jsx("div", { style: { color: C.GREY, fontSize: 12, lineHeight: 1, padding: "0 2px" }, children: "\u22EE\u22EE" }), _jsx(JimboSprite, { name: item.value, sheet: SHEET_FOR_VISUAL[item.visualType], width: 26 }), _jsx("div", { style: {
+            background: isHit ? `${glow}33` : C.DARKEST,
+            border: `2px solid ${isHit ? glow : C.PANEL_EDGE}`,
+            borderRadius: 4,
+            padding: "3px 8px",
+            position: "relative",
+            opacity: isHit ? 1 : 0.6,
+            // @ts-ignore -- CSS custom property
+            "--glow-color": glow,
+            animation: isHit ? "j-glow-pulse 1.6s ease-in-out infinite" : "none",
+        }, title: `${item.clauseKey}: ${item.value}${hasData ? ` (Found: ${matchCount})` : ""}`, children: [_jsx("style", { children: GLOW_ANIMATION }), _jsx(JimboSprite, { name: item.value, sheet: SHEET_FOR_VISUAL[item.visualType], width: 26 }), _jsx("div", { style: {
                     fontSize: 10,
                     color: C.WHITE,
-                    letterSpacing: 1,
+                    letterSpacing: 0.5,
                     textShadow: "1px 1px 0 rgba(0,0,0,.8)",
-                }, children: item.value })] }));
+                }, children: item.value }), isHit && (_jsx("div", { style: {
+                    position: "absolute",
+                    top: -6,
+                    right: -6,
+                    background: C.GREEN,
+                    color: C.WHITE,
+                    fontSize: 7,
+                    padding: "1px 3px",
+                    borderRadius: 3,
+                    border: `1px solid ${C.BLACK}`,
+                    boxShadow: `0 1px 0 ${C.BLACK}`,
+                }, children: matchCount > 1 ? `x${matchCount}` : "✓" }))] }));
+}
+function VisualChip({ item, matchCount, compact }) {
+    const isHit = matchCount > 0;
+    const hasData = matchCount !== undefined;
+    const glow = ZONES[item.section].glow;
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: compact ? 3 : 6,
+            background: isHit ? `${glow}33` : C.DARKEST,
+            border: `2px solid ${isHit ? glow : C.PANEL_EDGE}`,
+            borderRadius: 4,
+            padding: compact ? "2px 4px" : "3px 8px",
+            position: "relative",
+            opacity: isHit ? 1 : 0.6,
+            // @ts-ignore
+            "--glow-color": glow,
+            animation: isHit ? "j-glow-pulse 1.6s ease-in-out infinite" : "none",
+        }, title: `${item.clauseKey}: ${item.value}${hasData ? ` (Found: ${matchCount})` : ""}`, children: [_jsx("style", { children: GLOW_ANIMATION }), _jsx("div", { style: { color: C.GREY, fontSize: 10, lineHeight: 1, padding: "0 2px" }, children: "\u22EE\u22EE" }), _jsx(JimboSprite, { name: item.value, sheet: SHEET_FOR_VISUAL[item.visualType], width: compact ? 20 : 26 }), _jsx("div", { style: {
+                    fontSize: compact ? 9 : 10,
+                    color: C.WHITE,
+                    letterSpacing: 0.5,
+                    textShadow: "1px 1px 0 rgba(0,0,0,.8)",
+                }, children: item.value }), isHit && (_jsx("div", { style: {
+                    position: "absolute",
+                    top: compact ? -4 : -6,
+                    right: compact ? -4 : -6,
+                    background: C.GREEN,
+                    color: C.WHITE,
+                    fontSize: 7,
+                    padding: "1px 3px",
+                    borderRadius: 3,
+                    border: `1px solid ${C.BLACK}`,
+                    boxShadow: `0 1px 0 ${C.BLACK}`,
+                }, children: matchCount > 1 ? `x${matchCount}` : "✓" }))] }));
 }
-function ZoneRail({ zone, items }) {
+function ZoneRail({ zone, items, matchMap, compact = false }) {
     const meta = ZONES[zone];
     return (_jsxs("div", { style: {
             border: `2px dashed ${meta.color}55`,
             borderRadius: 6,
-            padding: 8,
+            padding: compact ? 4 : 8,
         }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [_jsx("div", { style: {
-                            fontSize: 10,
+                            fontSize: compact ? 8 : 10,
                             letterSpacing: 2,
                             padding: "2px 8px",
                             background: meta.color,
                             color: C.WHITE,
                             borderRadius: 3,
                             textShadow: "1px 1px 0 rgba(0,0,0,.8)",
-                        }, children: meta.label }), _jsx("div", { style: { flex: 1, height: 1, background: `${meta.color}44` } }), _jsx("div", { style: { fontSize: 8, color: C.GREY }, children: items.length })] }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: items.length === 0 ? (_jsx("div", { style: { fontSize: 10, color: C.GREY, padding: 10, fontStyle: "italic" }, children: "drop clauses here" })) : (items.map((item) => _jsx(ClausePill, { item: item, color: meta.color }, item.id))) })] }));
+                        }, children: meta.label }), _jsx("div", { style: { flex: 1, height: 1, background: `${meta.color}44` } }), _jsx("div", { style: { fontSize: 8, color: C.GREY }, children: items.length })] }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: items.length === 0 ? (_jsx("div", { style: { fontSize: 10, color: C.GREY, padding: 10, fontStyle: "italic" }, children: "drop clauses here" })) : (items.map((item) => {
+                    // Match logic: the engine labels usually look like "must: joker: Blueprint"
+                    // or "must: rareJoker: Blueprint". We try to match the item value and section.
+                    const labelKey = `${item.section}: ${item.clauseKey}: ${item.value}`;
+                    const count = matchMap[labelKey] ?? -1;
+                    return (_jsx(ClausePill, { item: item, color: meta.color, glow: meta.glow, matchCount: count }, item.id));
+                })) })] }));
 }
-export function JamlMapPreview({ jaml, className = "", emptyMessage = "No visual JAML clauses found yet.", }) {
+export function JamlMapPreview({ jaml, className = "", emptyMessage = "No visual JAML clauses found yet.", tallyColumns, tallyLabels, compact = false, }) {
     const groups = useMemo(() => extractVisualJamlItems(jaml), [jaml]);
     const totalItems = SECTION_ORDER.reduce((sum, s) => sum + groups[s].length, 0);
+    const matchMap = useMemo(() => {
+        const map = {};
+        if (tallyColumns && tallyLabels) {
+            tallyLabels.forEach((label, i) => {
+                map[label] = tallyColumns[i] ?? 0;
+            });
+        }
+        return map;
+    }, [tallyColumns, tallyLabels]);
     if (totalItems === 0) {
         return (_jsx("div", { className: className, style: {
                 background: C.DARKEST,
                 border: `2px solid ${C.PANEL_EDGE}`,
                 borderRadius: 6,
-                padding: 16,
+                padding: compact ? 8 : 16,
                 color: C.GREY,
                 fontSize: 11,
                 fontStyle: "italic",
@@ -69,9 +147,9 @@ export function JamlMapPreview({ jaml, className = "", emptyMessage = "No visual
     return (_jsx("div", { className: className, style: {
             display: "flex",
             flexDirection: "column",
-            gap: 10,
-            padding: 10,
+            gap: compact ? 6 : 10,
+            padding: compact ? 6 : 10,
             background: C.DARKEST,
             color: C.WHITE,
-        }, children: SECTION_ORDER.map((section) => (_jsx(ZoneRail, { zone: section, items: groups[section] }, section))) }));
+        }, children: SECTION_ORDER.map((section) => (_jsx(ZoneRail, { zone: section, items: groups[section], matchMap: matchMap, compact: compact }, section))) }));
 }

package/dist/components/JamlSeedInput.d.ts

@@ -6,4 +6,9 @@ export interface JamlSeedInputProps {
     className?: string;
     style?: React.CSSProperties;
 }
+/**
+ * Balatro-styled seed input field.
+ * Validates 1-8 uppercase alphanumeric characters.
+ * All styling via jimbo.css `.j-seed-input` classes — zero inline styles.
+ */
 export declare function JamlSeedInput({ value, onChange, placeholder, className, style }: JamlSeedInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlSeedInput.js

@@ -1,29 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { JimboColorOption } from "../ui/tokens.js";
 import { JimboText } from "../ui/jimboText.js";
 const SEED_PATTERN = /^[A-Z0-9]{0,8}$/;
+/**
+ * Balatro-styled seed input field.
+ * Validates 1-8 uppercase alphanumeric characters.
+ * All styling via jimbo.css `.j-seed-input` classes — zero inline styles.
+ */
 export function JamlSeedInput({ value, onChange, placeholder = "Enter seed (e.g. J4SPZMWW)", className, style }) {
     const [internal, setInternal] = useState(value ?? "");
     const display = value ?? internal;
     const isValid = display.length === 0 || SEED_PATTERN.test(display);
+    // Validation state drives data-valid attribute for CSS border color
+    const validState = display.length === 0 ? "partial"
+        : !isValid ? "false"
+            : display.length === 8 ? "true"
+                : "partial";
     const handleChange = (e) => {
         const raw = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 8);
         setInternal(raw);
         onChange?.(raw);
     };
-    return (_jsxs("div", { className: className, style: { display: "flex", flexDirection: "column", gap: 4, ...style }, children: [_jsx(JimboText, { size: "xs", tone: "grey", children: "Seed" }), _jsx("input", { type: "text", value: display, onChange: handleChange, placeholder: placeholder, maxLength: 8, spellCheck: false, autoComplete: "off", style: {
-                    padding: "6px 10px",
-                    borderRadius: 6,
-                    border: `2px solid ${!isValid ? JimboColorOption.RED : display.length === 8 ? JimboColorOption.GREEN : JimboColorOption.PANEL_EDGE}`,
-                    background: JimboColorOption.DARKEST,
-                    color: JimboColorOption.GOLD_TEXT,
-                    fontSize: 16,
-                    fontFamily: "m6x11plus, monospace",
-                    letterSpacing: 2,
-                    textTransform: "uppercase",
-                    outline: "none",
-                    transition: "border-color 100ms",
-                } }), display.length > 0 && display.length < 8 && (_jsxs(JimboText, { size: "xs", tone: "grey", children: [8 - display.length, " more characters"] }))] }));
+    return (_jsxs("div", { className: `j-seed-input ${className ?? ""}`, style: style, children: [_jsx(JimboText, { size: "xs", tone: "grey", children: "Seed" }), _jsx("input", { type: "text", className: "j-seed-input__field", "data-valid": validState, value: display, onChange: handleChange, placeholder: placeholder, maxLength: 8, spellCheck: false, autoComplete: "off" }), display.length > 0 && display.length < 8 && (_jsxs("span", { className: "j-seed-input__hint", children: [8 - display.length, " more characters"] }))] }));
 }

package/dist/components/JamlSpeedometer.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-import type { SearchStatus } from "../hooks/useSearch.js";
+export type JamlSpeedometerStatus = "idle" | "booting" | "running" | "completed" | "cancelled" | "error";
 export interface JamlSpeedometerProps {
     seedsPerSecond: number;
-    totalSearched: bigint;
-    matchingSeeds: bigint;
-    status: SearchStatus;
-    className?: string;
-    style?: React.CSSProperties;
+    totalSearched: bigint | number;
+    matchingSeeds: bigint | number;
+    status: JamlSpeedometerStatus;
 }
-export declare function JamlSpeedometer({ seedsPerSecond, totalSearched, matchingSeeds, status, className, style, }: JamlSpeedometerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Compact live-search stats strip for MCP/app chrome.
+ */
+export declare function JamlSpeedometer({ seedsPerSecond, totalSearched, matchingSeeds, status, }: JamlSpeedometerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlSpeedometer.js

@@ -1,54 +1,32 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { JimboColorOption } from "../ui/tokens.js";
-import { JimboText } from "../ui/jimboText.js";
-function formatCount(n) {
-    if (n >= 1000000000n)
-        return `${(Number(n / 1000000n) / 1000).toFixed(1)}B`;
-    if (n >= 1000000n)
-        return `${(Number(n / 1000n) / 1000).toFixed(1)}M`;
-    if (n >= 1000n)
-        return `${(Number(n) / 1000).toFixed(1)}K`;
-    return n.toString();
+const C = JimboColorOption;
+function formatCount(value) {
+    return Number(value).toLocaleString();
 }
-function formatSpeed(sps) {
-    if (sps >= 1_000_000)
-        return `${(sps / 1_000_000).toFixed(1)}M`;
-    if (sps >= 1_000)
-        return `${(sps / 1_000).toFixed(0)}K`;
-    return sps.toString();
+function formatSpeed(value) {
+    if (!Number.isFinite(value) || value <= 0)
+        return "0/s";
+    if (value >= 1_000_000)
+        return `${(value / 1_000_000).toFixed(1)}M/s`;
+    if (value >= 1_000)
+        return `${(value / 1_000).toFixed(1)}K/s`;
+    return `${Math.round(value)}/s`;
 }
-function needleAngle(sps) {
-    if (sps <= 0)
-        return -90;
-    const maxLog = Math.log10(5_000_000);
-    const clamped = Math.min(sps, 5_000_000);
-    const pct = Math.log10(Math.max(clamped, 1)) / maxLog;
-    return -90 + pct * 180;
-}
-export function JamlSpeedometer({ seedsPerSecond, totalSearched, matchingSeeds, status, className, style, }) {
-    const isActive = status === "running" || status === "booting";
-    const angle = needleAngle(seedsPerSecond);
-    const speedColor = seedsPerSecond >= 500_000
-        ? JimboColorOption.GREEN
-        : seedsPerSecond >= 100_000
-            ? JimboColorOption.GOLD
-            : seedsPerSecond > 0
-                ? JimboColorOption.ORANGE
-                : JimboColorOption.GREY;
-    return (_jsxs("div", { className: className, style: {
+/**
+ * Compact live-search stats strip for MCP/app chrome.
+ */
+export function JamlSpeedometer({ seedsPerSecond, totalSearched, matchingSeeds, status, }) {
+    const active = status === "running" || status === "booting";
+    const tone = status === "error" ? C.RED : active ? C.GOLD : C.GREY;
+    return (_jsxs("div", { style: {
             display: "flex",
-            flexDirection: "column",
             alignItems: "center",
-            gap: 6,
-            padding: "12px 16px",
-            borderRadius: 10,
-            background: `${JimboColorOption.DARKEST}cc`,
-            border: `1px solid ${JimboColorOption.PANEL_EDGE}`,
-            ...style,
-        }, children: [_jsx("div", { style: { position: "relative", width: 120, height: 68, overflow: "hidden" }, children: _jsxs("svg", { viewBox: "0 0 120 68", width: 120, height: 68, children: [_jsx("path", { d: "M 10 65 A 50 50 0 0 1 110 65", fill: "none", stroke: JimboColorOption.DARK_GREY, strokeWidth: 6, strokeLinecap: "round" }), isActive && (_jsx("path", { d: "M 10 65 A 50 50 0 0 1 110 65", fill: "none", stroke: speedColor, strokeWidth: 6, strokeLinecap: "round", strokeDasharray: "157", strokeDashoffset: 157 - (157 * ((angle + 90) / 180)), style: { transition: "stroke-dashoffset 300ms ease, stroke 300ms ease" } })), _jsx("line", { x1: 60, y1: 65, x2: 60, y2: 20, stroke: isActive ? JimboColorOption.RED : JimboColorOption.GREY, strokeWidth: 2, strokeLinecap: "round", style: {
-                                transformOrigin: "60px 65px",
-                                transform: `rotate(${angle}deg)`,
-                                transition: "transform 300ms ease",
-                            } }), _jsx("circle", { cx: 60, cy: 65, r: 4, fill: JimboColorOption.RED })] }) }), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 20, fontFamily: "m6x11plus, monospace", color: isActive ? speedColor : JimboColorOption.GREY }, children: isActive ? formatSpeed(seedsPerSecond) : "---" }), _jsx(JimboText, { size: "xs", tone: "grey", children: "seeds / sec" })] }), _jsxs("div", { style: { display: "flex", gap: 16, marginTop: 2 }, children: [_jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 13, fontFamily: "m6x11plus, monospace", color: JimboColorOption.WHITE }, children: formatCount(totalSearched) }), _jsx(JimboText, { size: "xs", tone: "grey", children: "searched" })] }), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 13, fontFamily: "m6x11plus, monospace", color: JimboColorOption.GREEN_TEXT }, children: formatCount(matchingSeeds) }), _jsx(JimboText, { size: "xs", tone: "grey", children: "matches" })] })] })] }));
+            gap: 8,
+            color: tone,
+            fontSize: 11,
+            fontFamily: "var(--font-sans, m6x11plus), monospace",
+            whiteSpace: "nowrap",
+        }, children: [_jsx("span", { children: status }), _jsx("span", { children: formatSpeed(seedsPerSecond) }), _jsxs("span", { children: [formatCount(totalSearched), " searched"] }), _jsxs("span", { children: [formatCount(matchingSeeds), " matches"] })] }));
 }

package/dist/components/MotelyVersionBadge.d.ts

@@ -23,8 +23,6 @@ export interface MotelyVersionBadgeProps {
 }
 /**
  * Badge showing the loaded motely-wasm version + optional SIMD / threads
- * capability indicators. Ported from weejoker.app with no dependency on
- * weejoker's lib/api — the consumer owns capability fetching and passes
- * the result in.
+ * capability indicators. All styling via jimbo.css `.j-motely-badge`.
  */
 export declare function MotelyVersionBadge({ caps, version, minimal, loading, className, style, }: MotelyVersionBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MotelyVersionBadge.js

@@ -1,31 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboColorOption } from '../ui/tokens.js';
 import { JimboText } from '../ui/jimboText.js';
 /**
  * Badge showing the loaded motely-wasm version + optional SIMD / threads
- * capability indicators. Ported from weejoker.app with no dependency on
- * weejoker's lib/api — the consumer owns capability fetching and passes
- * the result in.
+ * capability indicators. All styling via jimbo.css `.j-motely-badge`.
  */
 export function MotelyVersionBadge({ caps, version, minimal = false, loading = false, className = '', style, }) {
     if (loading) {
-        return (_jsx("span", { className: className, style: style, children: _jsx(JimboText, { size: "xs", tone: "grey", children: "Initializing\u2026" }) }));
+        return (_jsx("span", { className: `j-motely-badge ${className}`, style: style, children: _jsx(JimboText, { size: "xs", tone: "grey", children: "Initializing\u2026" }) }));
     }
     const resolved = caps?.version ?? version ?? '?';
     const simd = caps?.simd;
     const threads = caps?.threads;
     if (minimal) {
-        return (_jsxs("span", { className: className, style: { display: 'inline-flex', alignItems: 'center', gap: 6, ...style }, children: [_jsxs(JimboText, { size: "xs", tone: "grey", children: ["v", resolved] }), simd ? (_jsx(JimboText, { size: "xs", tone: "blue", title: "SIMD enabled", children: "\u26A1" })) : null, threads ? (_jsx(JimboText, { size: "xs", tone: "green", title: "Multi-threaded", children: "\uD83E\uDDF5" })) : null] }));
+        return (_jsxs("span", { className: `j-motely-badge ${className}`, style: style, children: [_jsxs(JimboText, { size: "xs", tone: "grey", children: ["v", resolved] }), simd ? _jsx(JimboText, { size: "xs", tone: "blue", title: "SIMD enabled", children: "\u26A1" }) : null, threads ? _jsx(JimboText, { size: "xs", tone: "green", title: "Multi-threaded", children: "\uD83E\uDDF5" }) : null] }));
     }
-    return (_jsxs("div", { className: className, style: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 6,
-            padding: '3px 8px',
-            borderRadius: 4,
-            background: JimboColorOption.DARKEST,
-            border: `1px solid ${JimboColorOption.PANEL_EDGE}`,
-            ...style,
-        }, children: [_jsxs(JimboText, { size: "xs", tone: "gold", uppercase: true, children: ["motely v", resolved] }), simd ? _jsx(JimboText, { size: "xs", tone: "blue", title: "SIMD enabled", children: "\u26A1" }) : null, threads ? _jsx(JimboText, { size: "xs", tone: "green", title: "Multi-threaded", children: "\uD83E\uDDF5" }) : null] }));
+    return (_jsxs("div", { className: `j-motely-badge j-motely-badge--chip ${className}`, style: style, children: [_jsxs(JimboText, { size: "xs", tone: "gold", uppercase: true, children: ["motely v", resolved] }), simd ? _jsx(JimboText, { size: "xs", tone: "blue", title: "SIMD enabled", children: "\u26A1" }) : null, threads ? _jsx(JimboText, { size: "xs", tone: "green", title: "Multi-threaded", children: "\uD83E\uDDF5" }) : null] }));
 }

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

@@ -0,0 +1,8 @@
+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. */
+    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

@@ -0,0 +1,170 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { MysterySlot } from "./MysterySlot.js";
+import { JokerPicker } from "./JokerPicker.js";
+import { JimboColorOption, withAlpha } from "../../ui/tokens.js";
+// ─── Component ───────────────────────────────────────────────────────────────
+const C = JimboColorOption;
+const INITIAL_SLOTS = 8; // 8 shop item slots like in Balatro ante
+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 handleSlotTap = useCallback((index) => {
+        setActiveSlot(index);
+    }, []);
+    const handleSlotClear = useCallback((index) => {
+        setSlots((prev) => {
+            const next = [...prev];
+            next[index] = null;
+            onChange?.(next);
+            return next;
+        });
+    }, [onChange]);
+    const handleJokerSelect = useCallback((selection) => {
+        if (activeSlot === null)
+            return;
+        setSlots((prev) => {
+            const next = [...prev];
+            next[activeSlot] = selection;
+            onChange?.(next);
+            return next;
+        });
+        setActiveSlot(null);
+    }, [activeSlot, onChange]);
+    const handlePickerCancel = useCallback(() => {
+        setActiveSlot(null);
+    }, []);
+    const filledCount = slots.filter(Boolean).length;
+    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) })] }))] }));
+}
+// ─── JAML generation ─────────────────────────────────────────────────────────
+function generateJamlSnippet(zone, slots) {
+    const filled = slots.filter(Boolean);
+    if (filled.length === 0)
+        return "# empty";
+    const jamlZone = zone === "mustnot" ? "mustNot" : zone;
+    const lines = [`${jamlZone}:`];
+    // Group by clauseKey
+    const groups = new Map();
+    for (const s of filled) {
+        const existing = groups.get(s.clauseKey) ?? [];
+        existing.push(s.value);
+        groups.set(s.clauseKey, existing);
+    }
+    for (const [key, values] of groups) {
+        if (values.length === 1) {
+            lines.push(`  - ${key}: ${values[0]}`);
+        }
+        else {
+            lines.push(`  - ${key}: [${values.join(", ")}]`);
+        }
+    }
+    return lines.join("\n");
+}
+// ─── Constants & styles ──────────────────────────────────────────────────────
+const ZONE_COLORS = {
+    must: C.BLUE,
+    should: C.RED,
+    mustnot: C.ORANGE,
+};
+const styles = {
+    wrapper: {
+        position: "relative",
+        padding: 16,
+        background: C.DARKEST,
+        borderRadius: 8,
+        border: `1px solid ${C.TEAL_GREY}`,
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+    },
+    zoneBar: {
+        display: "flex",
+        gap: 6,
+        marginBottom: 12,
+    },
+    zoneBtn: {
+        padding: "5px 12px",
+        border: "2px solid",
+        borderRadius: 4,
+        background: "none",
+        fontFamily: "m6x11plus, ui-monospace, monospace",
+        fontSize: 12,
+        fontWeight: "bold",
+        cursor: "pointer",
+        transition: "all 150ms",
+        letterSpacing: 1,
+    },
+    sectionLabel: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 8,
+        fontSize: 14,
+        fontWeight: "bold",
+    },
+    slotRow: {
+        display: "flex",
+        gap: 6,
+        overflowX: "auto",
+        paddingBottom: 8,
+        WebkitOverflowScrolling: "touch",
+    },
+    scrollHint: {
+        textAlign: "center",
+        fontSize: 10,
+        color: C.GREY,
+        opacity: 0.5,
+        marginTop: 2,
+        marginBottom: 8,
+    },
+    overlay: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    overlayBackdrop: {
+        position: "absolute",
+        inset: 0,
+        background: withAlpha(C.BLACK, 0.6),
+        backdropFilter: "blur(4px)",
+    },
+    pickerWrapper: {
+        position: "relative",
+        zIndex: 1,
+        width: "90%",
+        maxWidth: 400,
+    },
+    jamlPreview: {
+        marginTop: 12,
+        borderRadius: 4,
+        border: `1px solid ${C.TEAL_GREY}`,
+        overflow: "hidden",
+    },
+    jamlHeader: {
+        padding: "6px 10px",
+        fontSize: 11,
+        color: C.GREY,
+        background: withAlpha(C.DARK_GREY, 0.5),
+        borderBottom: `1px solid ${C.TEAL_GREY}`,
+        letterSpacing: 1,
+        textTransform: "uppercase",
+    },
+    jamlCode: {
+        margin: 0,
+        padding: "8px 10px",
+        fontSize: 12,
+        color: C.GREEN_TEXT,
+        background: withAlpha(C.DARKEST, 0.8),
+        lineHeight: "1.5",
+        whiteSpace: "pre-wrap",
+    },
+};

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

@@ -0,0 +1,7 @@
+import type { SlotSelection } from "./MysterySlot.js";
+export type JokerRarity = "common" | "uncommon" | "rare" | "legendary";
+export interface JokerPickerProps {
+    onSelect: (selection: SlotSelection) => void;
+    onCancel: () => void;
+}
+export declare function JokerPicker({ onSelect, onCancel }: JokerPickerProps): import("react/jsx-runtime").JSX.Element;