jaml-ui 0.10.0 → 0.11.0

package/dist/assets.js

@@ -11,20 +11,17 @@ export const JAML_ASSET_FILES = {
     tags: "tags.png",
 };
 const assetKeyByFileName = Object.fromEntries(Object.entries(JAML_ASSET_FILES).map(([key, fileName]) => [fileName, key]));
-// Keep in lockstep with package.json version. Upload assets to this path when publishing.
-const JAML_UI_VERSION = "0.10.0";
-const CDN_BASE = `https://cdn.seedfinder.app/jaml-ui/${JAML_UI_VERSION}/assets/`;
 const defaultAssetUrls = {
-    deck: `${CDN_BASE}${JAML_ASSET_FILES.deck}`,
-    blinds: `${CDN_BASE}${JAML_ASSET_FILES.blinds}`,
-    boosters: `${CDN_BASE}${JAML_ASSET_FILES.boosters}`,
-    editions: `${CDN_BASE}${JAML_ASSET_FILES.editions}`,
-    enhancers: `${CDN_BASE}${JAML_ASSET_FILES.enhancers}`,
-    jokers: `${CDN_BASE}${JAML_ASSET_FILES.jokers}`,
-    tarots: `${CDN_BASE}${JAML_ASSET_FILES.tarots}`,
-    vouchers: `${CDN_BASE}${JAML_ASSET_FILES.vouchers}`,
-    stickers: `${CDN_BASE}${JAML_ASSET_FILES.stickers}`,
-    tags: `${CDN_BASE}${JAML_ASSET_FILES.tags}`,
+    deck: new URL(`../assets/${JAML_ASSET_FILES.deck}`, import.meta.url).href,
+    blinds: new URL(`../assets/${JAML_ASSET_FILES.blinds}`, import.meta.url).href,
+    boosters: new URL(`../assets/${JAML_ASSET_FILES.boosters}`, import.meta.url).href,
+    editions: new URL(`../assets/${JAML_ASSET_FILES.editions}`, import.meta.url).href,
+    enhancers: new URL(`../assets/${JAML_ASSET_FILES.enhancers}`, import.meta.url).href,
+    jokers: new URL(`../assets/${JAML_ASSET_FILES.jokers}`, import.meta.url).href,
+    tarots: new URL(`../assets/${JAML_ASSET_FILES.tarots}`, import.meta.url).href,
+    vouchers: new URL(`../assets/${JAML_ASSET_FILES.vouchers}`, import.meta.url).href,
+    stickers: new URL(`../assets/${JAML_ASSET_FILES.stickers}`, import.meta.url).href,
+    tags: new URL(`../assets/${JAML_ASSET_FILES.tags}`, import.meta.url).href,
 };
 let customAssetBaseUrl = null;
 function normalizeBaseUrl(baseUrl) {

package/dist/components/GameCard.js

@@ -2,9 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Layer } from "../render/Layer.js";
 import { JamlCardRenderer } from "../render/CanvasRenderer.js";
-import { JOKERS, JOKER_FACES, TAROTS_AND_PLANETS, CONSUMABLE_FACES, TAGS, VOUCHERS, BOSSES, EDITION_MAP, SPRITE_SHEETS, STICKER_MAP, } from "../sprites/spriteData.js";
+import { JOKERS, JOKER_FACES, TAROTS_AND_PLANETS, CONSUMABLE_FACES, TAGS, VOUCHERS, BOSSES, EDITION_MAP, SPRITE_SHEETS, STICKER_MAP, RANK_MAP, SUIT_MAP, ENHANCER_MAP, SEAL_MAP, } from "../sprites/spriteData.js";
 import { BalatroItemCategory, isPackedItemValid, packedItemCategory } from "../decode/packedBalatroItem.js";
-import { getEnhancerPosition, getSealPosition, getStandardCardPosition } from "../utils/gameCardUtils.js";
 function normalizeCardRank(raw) {
     const value = raw.trim().toUpperCase();
     if (value === "A" || value === "ACE")
@@ -225,8 +224,11 @@ export function JamlGameCard({ card, type, className = "", hoverTilt = false })
             }));
     }
     else if (rank && suit) {
+        const enhancerPos = (enhancements ?? [])
+            .map((m) => ENHANCER_MAP[m])
+            .find((pos) => Boolean(pos)) ?? { x: 1, y: 0 };
         layers.push(new Layer({
-            pos: getEnhancerPosition(enhancements ?? []),
+            pos: enhancerPos,
             name: "background",
             order: 0,
             source: SPRITE_SHEETS.enhancers.src,
@@ -234,7 +236,7 @@ export function JamlGameCard({ card, type, className = "", hoverTilt = false })
             columns: SPRITE_SHEETS.enhancers.columns,
         }));
         layers.push(new Layer({
-            pos: getStandardCardPosition(rank, suit),
+            pos: { x: RANK_MAP[rank] ?? 0, y: SUIT_MAP[suit] ?? 0 },
             name,
             order: 1,
             source: SPRITE_SHEETS.deck.src,
@@ -286,7 +288,7 @@ export function JamlGameCard({ card, type, className = "", hoverTilt = false })
         }));
     }
     if (seal) {
-        const sealPos = getSealPosition(seal);
+        const sealPos = SEAL_MAP[seal];
         if (sealPos) {
             layers.push(new Layer({
                 pos: sealPos,

package/dist/components/JamlCodeEditor.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Editor from "@monaco-editor/react";
 import { JimboColorOption } from "../ui/tokens.js";
 // Monaco needs hex strings for its colors API. We strip the leading `#` from
@@ -40,19 +40,31 @@ const defineBalatroTheme = (monaco) => {
     });
 };
 export function JamlCodeEditor({ value, onChange, minHeight = 320, }) {
-    return (_jsx("div", { style: { width: "100%", minHeight, background: JimboColorOption.DARKEST }, children: _jsx(Editor, { height: `${minHeight}px`, defaultLanguage: "yaml", value: value, theme: "jaml-balatro-dark", onChange: (next) => onChange(next ?? ""), beforeMount: defineBalatroTheme, options: {
-                minimap: { enabled: false },
-                scrollBeyondLastLine: false,
-                fontSize: 13,
-                lineHeight: 22,
-                fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-                lineNumbers: "on",
-                automaticLayout: true,
-                padding: { top: 12, bottom: 12 },
-                wordWrap: "on",
-                formatOnPaste: true,
-                formatOnType: true,
-                renderLineHighlight: "line",
-                scrollbar: { verticalScrollbarSize: 8, horizontalScrollbarSize: 8 },
-            } }) }));
+    return (_jsxs("div", { style: { width: "100%", minHeight, background: JimboColorOption.DARKEST }, children: [_jsx("style", { children: `
+        .monaco-editor .iPadShowKeyboard,
+        .monaco-editor [class*="iPadShowKeyboard"] { display: none !important; }
+      ` }), _jsx(Editor, { height: `${minHeight}px`, defaultLanguage: "yaml", value: value, theme: "jaml-balatro-dark", onChange: (next) => onChange(next ?? ""), beforeMount: defineBalatroTheme, options: {
+                    minimap: { enabled: false },
+                    scrollBeyondLastLine: false,
+                    fontSize: 13,
+                    lineHeight: 22,
+                    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                    lineNumbers: "on",
+                    lineNumbersMinChars: 2,
+                    lineDecorationsWidth: 4,
+                    glyphMargin: false,
+                    folding: false,
+                    automaticLayout: true,
+                    padding: { top: 12, bottom: 12 },
+                    wordWrap: "on",
+                    formatOnPaste: true,
+                    formatOnType: true,
+                    renderLineHighlight: "line",
+                    scrollbar: { verticalScrollbarSize: 8, horizontalScrollbarSize: 8 },
+                    // Mobile/chat-WebView UX: kill the context menu ("Change All Occurrences" etc. covering half
+                    // the file on long-press) and the accessibility-help keyboard widget that's just clutter when
+                    // the OS keyboard is already open.
+                    contextmenu: false,
+                    accessibilitySupport: "off",
+                } })] }));
 }

package/dist/components/JamlIdeVisual.d.ts

@@ -21,7 +21,9 @@ export interface JamlVisualFilter {
 export interface JamlIdeVisualProps {
     filter: JamlVisualFilter;
     onChange: (filter: JamlVisualFilter) => void;
-    onSave?: () => void;
-    onBack?: () => void;
+    /** Tap a clause to edit it (Pass 2 wires this to the cascade picker). */
+    onEditClause?: (zone: JamlZone, clause: JamlVisualClause) => void;
+    /** Tap the "?" mystery tile to add a new clause to a zone (Pass 2 wires this to the cascade picker). */
+    onAddClause?: (zone: JamlZone) => void;
 }
-export declare function JamlIdeVisual({ filter, onChange, onSave, onBack }: JamlIdeVisualProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlIdeVisual({ filter, onChange, onEditClause, onAddClause }: JamlIdeVisualProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlIdeVisual.js

@@ -1,15 +1,22 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { JimboColorOption } from "../ui/tokens.js";
 import { JimboSprite } from "../ui/sprites.js";
+const C = JimboColorOption;
 const ZONE_META = {
-    must: { label: "MUST", color: JimboColorOption.BLUE },
-    should: { label: "SHOULD", color: JimboColorOption.RED },
-    mustnot: { label: "MUST NOT", color: JimboColorOption.ORANGE },
+    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" },
 };
 function clauseSpriteSheet(type) {
-    if (type === "joker" || type === "souljoker" || type === "rareJoker" || type === "commonJoker" || type === "uncommonJoker" || type === "legendaryJoker" || type === "mixedJoker")
+    if (type === "joker" ||
+        type === "souljoker" ||
+        type === "rareJoker" ||
+        type === "commonJoker" ||
+        type === "uncommonJoker" ||
+        type === "legendaryJoker" ||
+        type === "mixedJoker")
         return "Jokers";
     if (type === "voucher")
         return "Vouchers";
@@ -21,44 +28,188 @@ function clauseSpriteSheet(type) {
         return "Tarots";
     return undefined;
 }
-function ClauseSprite({ clause, size = 26 }) {
+function ClauseSprite({ clause, size = 40 }) {
     const sheet = clauseSpriteSheet(clause.type);
     if (!sheet)
         return null;
     return _jsx(JimboSprite, { name: clause.value, sheet: sheet, width: size });
 }
-function DragClausePill({ clause, zone, onDragStart, }) {
+function ClauseCard({ clause, zone, onRemove, onEdit, onDragStart, }) {
     const z = ZONE_META[zone];
-    return (_jsxs("div", { onMouseDown: (e) => onDragStart(e, clause, zone), onTouchStart: (e) => onDragStart(e, clause, zone), style: {
-            display: "flex", alignItems: "center", gap: 6,
-            background: JimboColorOption.DARK_GREY, border: `2px solid ${z.color}`,
-            borderRadius: 6, padding: "5px 8px 5px 4px",
-            boxShadow: `0 2px 0 ${JimboColorOption.BLACK}`,
-            cursor: "grab", userSelect: "none", touchAction: "none",
-        }, children: [_jsx("div", { style: { color: JimboColorOption.GREY, fontSize: 12, lineHeight: 1, padding: "0 2px" }, children: "\u22EE\u22EE" }), _jsx(ClauseSprite, { clause: clause, size: 26 }), _jsx("div", { style: { fontSize: 10, color: JimboColorOption.WHITE, letterSpacing: 1, textShadow: `1px 1px 0 ${JimboColorOption.BLACK}cc` }, children: clause.label || clause.value }), clause.antes && clause.antes.length > 0 && (_jsxs("div", { style: { display: "flex", gap: 2 }, children: [clause.antes.slice(0, 3).map((a) => (_jsx("div", { style: { fontSize: 8, padding: "0 3px", background: JimboColorOption.DARKEST, color: z.color, borderRadius: 2 }, children: a }, a))), clause.antes.length > 3 && _jsxs("div", { style: { fontSize: 8, color: JimboColorOption.GREY }, children: ["+", clause.antes.length - 3] })] })), clause.score != null && (_jsxs("div", { style: { fontSize: 9, padding: "0 4px", background: JimboColorOption.RED, color: JimboColorOption.WHITE, borderRadius: 2 }, children: ["+", clause.score] }))] }));
+    return (_jsxs("div", { onClick: onEdit, onMouseDown: (e) => onDragStart(e, clause, zone), onTouchStart: (e) => onDragStart(e, clause, zone), style: {
+            position: "relative",
+            background: C.DARK_GREY,
+            border: `2px solid ${z.color}`,
+            borderRadius: 6,
+            padding: "8px 8px 8px 6px",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            minWidth: 0,
+            cursor: "pointer",
+            userSelect: "none",
+            touchAction: "none",
+            boxShadow: `0 2px 0 ${C.BLACK}`,
+        }, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: 44, height: 50, flexShrink: 0 }, children: _jsx(ClauseSprite, { clause: clause, size: 40 }) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
+                            fontFamily: "m6x11plus, ui-monospace, monospace",
+                            fontSize: 13,
+                            color: C.WHITE,
+                            letterSpacing: 0.5,
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                        }, children: clause.label || clause.value }), _jsxs("div", { style: { display: "flex", gap: 3, marginTop: 3, alignItems: "center", flexWrap: "wrap" }, children: [clause.antes && clause.antes.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { style: { fontFamily: "m6x11plus, ui-monospace, monospace", fontSize: 8, color: C.GREY, letterSpacing: 1 }, children: "A" }), clause.antes.map((a) => (_jsx("div", { style: {
+                                            fontFamily: "m6x11plus, ui-monospace, monospace",
+                                            fontSize: 9,
+                                            padding: "1px 4px",
+                                            background: C.DARKEST,
+                                            color: z.accent,
+                                            borderRadius: 3,
+                                            letterSpacing: 0.5,
+                                            lineHeight: 1,
+                                        }, children: a }, a)))] })), zone === "should" && clause.score != null && (_jsxs("div", { style: {
+                                    marginLeft: 4,
+                                    fontFamily: "m6x11plus, ui-monospace, monospace",
+                                    fontSize: 9,
+                                    padding: "1px 5px",
+                                    background: C.RED,
+                                    color: C.WHITE,
+                                    borderRadius: 3,
+                                    letterSpacing: 0.5,
+                                    lineHeight: 1,
+                                }, children: ["+", clause.score] }))] })] }), _jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove();
+                }, "aria-label": `Remove ${clause.label || clause.value}`, style: {
+                    width: 22,
+                    height: 22,
+                    flexShrink: 0,
+                    border: `2px solid ${C.BLACK}`,
+                    borderRadius: 4,
+                    background: C.RED,
+                    color: C.WHITE,
+                    fontFamily: "m6x11plus, ui-monospace, monospace",
+                    fontSize: 12,
+                    lineHeight: 1,
+                    cursor: "pointer",
+                    padding: 0,
+                    boxShadow: `inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 ${C.BLACK}`,
+                }, children: "\u00D7" })] }));
 }
-function ZoneDropRail({ zone, clauses, onDragStart, highlight, }) {
+function MysteryAddTile({ zone, onTap }) {
+    const z = ZONE_META[zone];
+    return (_jsxs("div", { onClick: onTap, style: {
+            cursor: onTap ? "pointer" : "default",
+            opacity: onTap ? 1 : 0.55,
+            border: `2px dashed ${z.color}`,
+            borderRadius: 6,
+            padding: "12px 8px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 10,
+            background: `${z.color}0d`,
+            minHeight: 60,
+        }, children: [_jsx("div", { style: {
+                    width: 40,
+                    height: 40,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: C.DARKEST,
+                    border: `2px solid ${z.color}`,
+                    borderRadius: 6,
+                    fontFamily: "m6x11plus, ui-monospace, monospace",
+                    fontSize: 24,
+                    color: z.color,
+                }, children: "?" }), _jsxs("div", { style: {
+                    fontFamily: "m6x11plus, ui-monospace, monospace",
+                    fontSize: 12,
+                    color: z.accent,
+                    letterSpacing: 2,
+                }, children: ["ADD TO ", z.label] })] }));
+}
+function ZoneRail({ zone, clauses, onAdd, onRemove, onEdit, onDragStart, highlight, }) {
     const z = ZONE_META[zone];
     return (_jsxs("div", { "data-zone": zone, style: {
-            border: `2px dashed ${highlight ? z.color : `${z.color}55`}`,
-            background: highlight ? `${z.color}22` : "transparent",
-            borderRadius: 6, padding: 8,
+            border: `2px dashed ${highlight ? z.color : "transparent"}`,
+            borderRadius: 6,
+            padding: highlight ? 6 : 0,
+            background: highlight ? `${z.color}11` : "transparent",
             transition: "background 100ms, border-color 100ms",
-        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [_jsx("div", { style: {
-                            fontSize: 10, letterSpacing: 2, padding: "2px 8px",
-                            background: z.color, color: JimboColorOption.WHITE, borderRadius: 3,
-                            textShadow: `1px 1px 0 ${JimboColorOption.BLACK}cc`,
-                        }, children: z.label }), _jsx("div", { style: { flex: 1, height: 1, background: `${z.color}44` } }), _jsx("div", { style: { fontSize: 8, color: JimboColorOption.GREY }, children: clauses.length })] }), _jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [clauses.map((c) => (_jsx(DragClausePill, { clause: c, zone: zone, onDragStart: onDragStart }, c.id))), clauses.length === 0 && (_jsx("div", { style: { fontSize: 10, color: JimboColorOption.GREY, padding: 10, fontStyle: "italic" }, children: "drop clauses here" }))] })] }));
+        }, 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",
+                            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 })] })] }));
 }
-export function JamlIdeVisual({ filter, onChange, onSave, onBack }) {
+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: {
+                    display: "block",
+                    width: "100%",
+                    background: "transparent",
+                    border: "none",
+                    outline: "none",
+                    fontFamily: "m6x11plus, ui-monospace, monospace",
+                    fontSize: 18,
+                    color: C.WHITE,
+                    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: {
+                            flex: 1,
+                            background: "transparent",
+                            border: "none",
+                            outline: "none",
+                            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",
+                    width: "100%",
+                    marginTop: 6,
+                    background: "transparent",
+                    border: "none",
+                    outline: "none",
+                    fontFamily: "m6x11plus, ui-monospace, monospace",
+                    fontSize: 10,
+                    color: C.GREY,
+                    lineHeight: 1.35,
+                    padding: 0,
+                } })] }));
+}
+export function JamlIdeVisual({ filter, onChange, onEditClause, onAddClause }) {
     const [drag, setDrag] = useState(null);
     const [hoverZone, setHoverZone] = useState(null);
     const rootRef = useRef(null);
+    const removeClause = (zone, id) => {
+        onChange({ ...filter, [zone]: filter[zone].filter((c) => c.id !== id) });
+    };
     const onDragStart = (e, clause, fromZone) => {
-        e.preventDefault();
+        // Don't preventDefault; we want clicks to still fire if there's no actual drag.
         const t = "touches" in e ? e.touches[0] : e;
         const rect = e.currentTarget.getBoundingClientRect();
-        setDrag({ clause, fromZone, x: t.clientX, y: t.clientY, offX: t.clientX - rect.left, offY: t.clientY - rect.top, w: rect.width, h: rect.height });
+        setDrag({
+            clause,
+            fromZone,
+            x: t.clientX,
+            y: t.clientY,
+            offX: t.clientX - rect.left,
+            offY: t.clientY - rect.top,
+        });
     };
     useEffect(() => {
         if (!drag)
@@ -79,11 +230,11 @@ export function JamlIdeVisual({ filter, onChange, onSave, onBack }) {
         };
         const up = () => {
             if (hoverZone && hoverZone !== drag.fromZone) {
-                const from = hoverZone;
+                const to = hoverZone;
                 onChange({
                     ...filter,
                     [drag.fromZone]: filter[drag.fromZone].filter((c) => c.id !== drag.clause.id),
-                    [from]: [...filter[from], { ...drag.clause }],
+                    [to]: [...filter[to], { ...drag.clause }],
                 });
             }
             setDrag(null);
@@ -100,14 +251,21 @@ export function JamlIdeVisual({ filter, onChange, onSave, onBack }) {
             window.removeEventListener("touchend", up);
         };
     }, [drag, hoverZone, filter, onChange]);
-    return (_jsxs("div", { ref: rootRef, style: { display: "flex", flexDirection: "column", gap: 10, padding: 10 }, children: [_jsxs("div", { style: {
-                    background: JimboColorOption.DARK_GREY, border: `2px solid ${JimboColorOption.PANEL_EDGE}`,
-                    borderRadius: 6, padding: 8, boxShadow: `0 2px 0 ${JimboColorOption.BLACK}`,
-                }, children: [_jsx("div", { style: { fontSize: 9, color: JimboColorOption.GREY, letterSpacing: 2 }, children: "FILE" }), _jsxs("div", { style: { fontSize: 14, color: JimboColorOption.WHITE, textShadow: `1px 1px 0 ${JimboColorOption.BLACK}cc` }, children: [filter.name || "Untitled", ".jaml"] }), filter.author && (_jsxs("div", { style: { fontSize: 9, color: JimboColorOption.GOLD_TEXT, marginTop: 2 }, children: ["by ", filter.author] }))] }), _jsx(ZoneDropRail, { zone: "must", clauses: filter.must, onDragStart: onDragStart, highlight: hoverZone === "must" }), _jsx(ZoneDropRail, { zone: "should", clauses: filter.should, onDragStart: onDragStart, highlight: hoverZone === "should" }), _jsx(ZoneDropRail, { zone: "mustnot", clauses: filter.mustnot, onDragStart: onDragStart, highlight: hoverZone === "mustnot" }), drag && (_jsx("div", { style: {
+    return (_jsxs("div", { ref: rootRef, style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 14,
+            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: {
                     position: "fixed",
-                    left: drag.x - drag.offX, top: drag.y - drag.offY,
-                    pointerEvents: "none", zIndex: 999,
+                    left: drag.x - drag.offX,
+                    top: drag.y - drag.offY,
+                    pointerEvents: "none",
+                    zIndex: 999,
                     transform: "rotate(-2deg) scale(1.05)",
-                    filter: `drop-shadow(0 4px 6px ${JimboColorOption.BLACK}99)`, opacity: 0.92,
-                }, children: _jsx(DragClausePill, { clause: drag.clause, zone: drag.fromZone, onDragStart: () => { } }) }))] }));
+                    filter: `drop-shadow(0 4px 6px ${C.BLACK}99)`,
+                    opacity: 0.92,
+                }, children: _jsx(ClauseCard, { clause: drag.clause, zone: drag.fromZone, onRemove: () => { }, onEdit: () => { }, onDragStart: () => { } }) }))] }));
 }

package/dist/components/JamlMapPreview.d.ts

@@ -1,10 +1,6 @@
 export interface JamlMapPreviewProps {
     jaml: string;
     className?: string;
-    title?: string;
     emptyMessage?: string;
-    cardScale?: number;
-    tagScale?: number;
-    bossScale?: number;
 }
-export declare function JamlMapPreview({ jaml, className, title, emptyMessage, cardScale, tagScale, bossScale, }: JamlMapPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlMapPreview({ jaml, className, emptyMessage, }: JamlMapPreviewProps): import("react/jsx-runtime").JSX.Element;