jaml-ui 0.7.1 → 0.8.0

package/dist/r3f/jokerTilt.js

@@ -0,0 +1,41 @@
+import * as THREE from "three";
+const AMBIENT_TILT = 0.2;
+const TILT_FACTOR = 0.3;
+const MAGNET_MAX_RX = 0.34;
+const MAGNET_MAX_RY = 0.4;
+const MAGNET_MAX_SHIFT = 0.05;
+const MAGNET_TWIST_Z = 0.1;
+export const JOKER_TILT_LERP_IN = 20;
+export const JOKER_TILT_LERP_OUT = 11;
+export function stableIdFraction(s) {
+    let h = 2166136261;
+    for (let i = 0; i < s.length; i++) {
+        h ^= s.charCodeAt(i);
+        h = Math.imul(h, 16777619);
+    }
+    return ((h >>> 0) % 100000) / 100000;
+}
+export function applyJokerTiltFromNormalized(nx, ny, amtScale, target) {
+    const clampedX = THREE.MathUtils.clamp(nx, -1, 1);
+    const clampedY = THREE.MathUtils.clamp(ny, -1, 1);
+    target.ry = -clampedX * MAGNET_MAX_RY * amtScale;
+    target.rx = clampedY * MAGNET_MAX_RX * amtScale;
+    target.rz = -clampedX * clampedY * MAGNET_TWIST_Z * amtScale;
+    target.ox = clampedX * MAGNET_MAX_SHIFT * amtScale;
+    target.oy = -clampedY * MAGNET_MAX_SHIFT * 0.65 * amtScale;
+}
+export function jokerPointerTiltFromUv(uv, target) {
+    const nx = (uv.x - 0.5) * 2;
+    const ny = (uv.y - 0.5) * 2;
+    const amt = Math.abs(ny + nx - 1) * TILT_FACTOR;
+    applyJokerTiltFromNormalized(nx, ny, THREE.MathUtils.clamp(amt * 1.15, 0.35, 1.25), target);
+}
+export function jokerAmbientTiltAtTime(t, idFrac, target) {
+    const tiltAngle = t * (1.56 + ((idFrac / 1.14212) % 1)) + idFrac / 1.35122;
+    const nu = 0.5 + 0.5 * AMBIENT_TILT * Math.cos(tiltAngle);
+    const nv = 0.5 + 0.5 * AMBIENT_TILT * Math.sin(tiltAngle);
+    const nx = (nu - 0.5) * 2;
+    const ny = (nv - 0.5) * 2;
+    const amt = AMBIENT_TILT * (0.5 + Math.cos(tiltAngle)) * TILT_FACTOR;
+    applyJokerTiltFromNormalized(nx, ny, THREE.MathUtils.clamp(amt * 2.2, 0.2, 1), target);
+}

package/dist/r3f/magneticTilt.d.ts

@@ -0,0 +1,18 @@
+import * as THREE from "three";
+export type MagneticTarget = {
+    rx: number;
+    ry: number;
+    rz: number;
+    ox: number;
+    oy: number;
+};
+export declare function createZeroMagneticTarget(): MagneticTarget;
+/** Map pointer UV on card face to rotation + in-plane shift (Balatro-style). */
+export declare function magneticTargetFromUvPlayingCard(uv: THREE.Vector2, magnet: {
+    MAX_TILT_X: number;
+    MAX_TILT_Y: number;
+    MAX_SHIFT: number;
+    TWIST_Z: number;
+}): MagneticTarget;
+export declare function resetMagneticTarget(t: MagneticTarget): void;
+export declare function lerpMagneticGroup(group: THREE.Group, target: MagneticTarget, dt: number, lerpIn: number, lerpOut: number, hovered: boolean, extraRz: number): void;

package/dist/r3f/magneticTilt.js

@@ -0,0 +1,34 @@
+import * as THREE from "three";
+export function createZeroMagneticTarget() {
+    return { rx: 0, ry: 0, rz: 0, ox: 0, oy: 0 };
+}
+/** Map pointer UV on card face to rotation + in-plane shift (Balatro-style). */
+export function magneticTargetFromUvPlayingCard(uv, magnet) {
+    const nx = (uv.x - 0.5) * 2;
+    const ny = (uv.y - 0.5) * 2;
+    const clampedX = THREE.MathUtils.clamp(nx, -1, 1);
+    const clampedY = THREE.MathUtils.clamp(ny, -1, 1);
+    return {
+        ry: -clampedX * magnet.MAX_TILT_Y,
+        rx: clampedY * magnet.MAX_TILT_X,
+        rz: -clampedX * clampedY * magnet.TWIST_Z,
+        ox: clampedX * magnet.MAX_SHIFT,
+        oy: -clampedY * magnet.MAX_SHIFT * 0.65,
+    };
+}
+export function resetMagneticTarget(t) {
+    t.rx = 0;
+    t.ry = 0;
+    t.rz = 0;
+    t.ox = 0;
+    t.oy = 0;
+}
+export function lerpMagneticGroup(group, target, dt, lerpIn, lerpOut, hovered, extraRz) {
+    const rate = hovered ? lerpIn : lerpOut;
+    const a = 1 - Math.exp(-rate * dt);
+    group.rotation.x = THREE.MathUtils.lerp(group.rotation.x, target.rx, a);
+    group.rotation.y = THREE.MathUtils.lerp(group.rotation.y, target.ry, a);
+    group.rotation.z = THREE.MathUtils.lerp(group.rotation.z, target.rz + extraRz, a);
+    group.position.x = THREE.MathUtils.lerp(group.position.x, target.ox, a);
+    group.position.y = THREE.MathUtils.lerp(group.position.y, target.oy, a);
+}

package/dist/r3f/playingCardTypes.d.ts

@@ -0,0 +1,24 @@
+export type PlayingCardSuit = "hearts" | "diamonds" | "clubs" | "spades";
+export type PlayingCardRank = "A" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "J" | "Q" | "K";
+export type PlayingCardEnhancement = "bonus" | "mult" | "wild" | "glass" | "steel" | "stone" | "gold" | "lucky";
+export type PlayingCardSeal = "gold" | "red" | "blue" | "purple";
+export type PlayingCardEdition = "foil" | "holographic" | "polychrome" | "negative";
+/** Minimal card model for 3D mesh (game-specific id/chips optional). */
+export interface PlayingCard3DModel {
+    suit: PlayingCardSuit;
+    rank: PlayingCardRank;
+    enhancement?: PlayingCardEnhancement;
+    seal?: PlayingCardSeal;
+    edition?: PlayingCardEdition;
+}
+export declare const PLAYING_CARD_ATLAS: {
+    readonly columns: 13;
+    readonly rows: 4;
+    readonly cellPx: {
+        readonly x: 71;
+        readonly y: 95;
+    };
+};
+export declare const SUIT_ROW: Record<PlayingCardSuit, number>;
+export declare const RANK_COLUMN: Record<PlayingCardRank, number>;
+export declare const SUIT_COLORS: Record<PlayingCardSuit, string>;

package/dist/r3f/playingCardTypes.js

@@ -0,0 +1,32 @@
+export const PLAYING_CARD_ATLAS = {
+    columns: 13,
+    rows: 4,
+    cellPx: { x: 71, y: 95 },
+};
+export const SUIT_ROW = {
+    hearts: 0,
+    clubs: 1,
+    diamonds: 2,
+    spades: 3,
+};
+export const RANK_COLUMN = {
+    "2": 0,
+    "3": 1,
+    "4": 2,
+    "5": 3,
+    "6": 4,
+    "7": 5,
+    "8": 6,
+    "9": 7,
+    "10": 8,
+    J: 9,
+    Q: 10,
+    K: 11,
+    A: 12,
+};
+export const SUIT_COLORS = {
+    hearts: "#e74c3c",
+    diamonds: "#3498db",
+    clubs: "#27ae60",
+    spades: "#2c3e50",
+};

package/dist/r3f/playingCardVisuals.d.ts

@@ -0,0 +1,7 @@
+import type { PlayingCard3DModel } from "./playingCardTypes.js";
+export declare function editionMaterialProps(edition: PlayingCard3DModel["edition"]): {
+    metalness: number;
+    roughness: number;
+};
+export declare function enhancementGlowHex(card: PlayingCard3DModel, highlighted: boolean): string;
+export declare function sealColorHex(seal: PlayingCard3DModel["seal"]): string;

package/dist/r3f/playingCardVisuals.js

@@ -0,0 +1,45 @@
+import { SUIT_COLORS } from "./playingCardTypes.js";
+export function editionMaterialProps(edition) {
+    switch (edition) {
+        case "foil":
+            return { metalness: 0.9, roughness: 0.1 };
+        case "holographic":
+            return { metalness: 0.7, roughness: 0.2 };
+        case "polychrome":
+            return { metalness: 0.8, roughness: 0.15 };
+        default:
+            return { metalness: 0.1, roughness: 0.8 };
+    }
+}
+export function enhancementGlowHex(card, highlighted) {
+    switch (card.enhancement) {
+        case "bonus":
+            return "#3498db";
+        case "mult":
+            return "#e74c3c";
+        case "wild":
+            return "#9b59b6";
+        case "glass":
+            return "#1abc9c";
+        case "steel":
+            return "#95a5a6";
+        case "gold":
+            return "#f1c40f";
+        case "lucky":
+            return "#2ecc71";
+        default:
+            return highlighted ? SUIT_COLORS[card.suit] : "#ffffff";
+    }
+}
+export function sealColorHex(seal) {
+    switch (seal) {
+        case "gold":
+            return "#f1c40f";
+        case "red":
+            return "#e74c3c";
+        case "blue":
+            return "#3498db";
+        default:
+            return "#9b59b6";
+    }
+}

package/dist/r3f/usePlayingCardTexture.d.ts

@@ -0,0 +1,7 @@
+import * as THREE from "three";
+import { type PlayingCardRank, type PlayingCardSuit } from "./playingCardTypes.js";
+export declare function usePlayingCardFaceTexture(suit: PlayingCardSuit, rank: PlayingCardRank, options?: {
+    deckUrl?: string;
+    enhancersUrl?: string;
+}): THREE.Texture | null;
+export declare function useCardBackTexture(): THREE.Texture;

package/dist/r3f/usePlayingCardTexture.js

@@ -0,0 +1,92 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { resolveJamlAssetUrl } from "../assets.js";
+import { applyBalatroGridUV } from "./gridUV.js";
+import { loadCompositedPlayingAtlas } from "./compositedAtlas.js";
+import { PLAYING_CARD_ATLAS, RANK_COLUMN, SUIT_ROW, } from "./playingCardTypes.js";
+const textureCache = new Map();
+function magnetKey(suit, rank, deckUrl, enhancersUrl) {
+    return `${deckUrl}|${enhancersUrl}|${suit}|${rank}`;
+}
+export function usePlayingCardFaceTexture(suit, rank, options) {
+    const [texture, setTexture] = useState(null);
+    const loadSerial = useRef(0);
+    const deckUrl = options?.deckUrl ?? resolveJamlAssetUrl("deck");
+    const enhancersUrl = options?.enhancersUrl ?? resolveJamlAssetUrl("enhancers");
+    useEffect(() => {
+        const serial = ++loadSerial.current;
+        let cancelled = false;
+        const key = magnetKey(suit, rank, deckUrl, enhancersUrl);
+        const cached = textureCache.get(key);
+        if (cached) {
+            setTexture(cached);
+            return;
+        }
+        loadCompositedPlayingAtlas(deckUrl, PLAYING_CARD_ATLAS.columns, PLAYING_CARD_ATLAS.rows, enhancersUrl)
+            .then((canvas) => {
+            if (cancelled || serial !== loadSerial.current)
+                return;
+            const tex = new THREE.CanvasTexture(canvas);
+            tex.colorSpace = THREE.SRGBColorSpace;
+            tex.magFilter = THREE.NearestFilter;
+            tex.minFilter = THREE.NearestFilter;
+            const tw = canvas.width;
+            const th = canvas.height;
+            const cellW = tw / PLAYING_CARD_ATLAS.columns;
+            const cellH = th / PLAYING_CARD_ATLAS.rows;
+            applyBalatroGridUV(tex, { x: RANK_COLUMN[rank], y: SUIT_ROW[suit] }, {
+                cellW,
+                cellH,
+                textureWidth: tw,
+                textureHeight: th,
+            });
+            textureCache.set(key, tex);
+            setTexture(tex);
+        })
+            .catch((err) => {
+            console.error("[jaml-ui/r3f] playing card atlas failed:", err);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [suit, rank, deckUrl, enhancersUrl]);
+    return texture;
+}
+export function useCardBackTexture() {
+    const [tex] = useState(() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = PLAYING_CARD_ATLAS.cellPx.x;
+        canvas.height = PLAYING_CARD_ATLAS.cellPx.y;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            throw new Error("2d context unavailable");
+        ctx.fillStyle = "#1a1a2e";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.strokeStyle = "#c9a227";
+        ctx.lineWidth = 2;
+        ctx.strokeRect(2, 2, canvas.width - 4, canvas.height - 4);
+        ctx.fillStyle = "#16213e";
+        for (let y = 8; y < canvas.height - 8; y += 10) {
+            for (let x = 8; x < canvas.width - 8; x += 10) {
+                ctx.fillRect(x, y, 5, 5);
+            }
+        }
+        ctx.fillStyle = "#c9a227";
+        const cx = canvas.width / 2;
+        const cy = canvas.height / 2;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - 17);
+        ctx.lineTo(cx + 14, cy);
+        ctx.lineTo(cx, cy + 17);
+        ctx.lineTo(cx - 14, cy);
+        ctx.closePath();
+        ctx.fill();
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.magFilter = THREE.NearestFilter;
+        texture.minFilter = THREE.NearestFilter;
+        texture.colorSpace = THREE.SRGBColorSpace;
+        return texture;
+    });
+    return tex;
+}

package/dist/ui/footer.js

@@ -9,10 +9,10 @@ const SUITS = [
 ];
 const CYCLE = '5s';
 export function JimboBalatroFooter({ hidden = false, className = '' }) {
-    return (_jsxs("div", { className: ['fixed right-0 bottom-0 left-0 w-screen min-w-full transition-opacity duration-200', hidden ? 'pointer-events-none opacity-0' : 'opacity-100', className].filter(Boolean).join(' '), children: [_jsx("div", { style: { width: '100%', borderTop: '1px solid rgba(255,255,255,0.1)', background: 'rgba(0,0,0,0.9)', padding: '0 1rem 3px', textAlign: 'center' }, children: _jsxs("p", { style: { fontFamily: 'm6x11plus, monospace', fontSize: 'clamp(11px, 0.8vw + 8px, 14px)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '0 0.5rem', color: 'white', margin: 0 }, children: [_jsx("span", { children: "Not affiliated with LocalThunk or PlayStack" }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }, children: ["Made with", ' ', _jsx("span", { style: { position: 'relative', display: 'inline-block', width: '1.5em', height: '1em', verticalAlign: 'middle' }, children: SUITS.map(({ char, kf }) => (_jsx("span", { style: { position: 'absolute', inset: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: 0, animationName: kf, animationDuration: CYCLE, animationDelay: '0s', animationIterationCount: 'infinite', animationTimingFunction: 'ease-out' }, children: char }, char))) }), ' ', "for the", ' ', _jsx("a", { href: "https://playbalatro.com", target: "_blank", rel: "noopener noreferrer", style: { color: JimboColorOption.GOLD, textDecoration: 'none' }, children: "Balatro" }), ' ', "community"] })] }) }), _jsx("style", { children: `
-        @keyframes jaml-heart   { 0%{opacity:0;transform:scale(1)} 1%{opacity:1;transform:scale(1.45)} 3.5%{opacity:1;transform:scale(1)} 61.5%{opacity:1;transform:scale(1)} 62%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-spade   { 0%,61.5%{opacity:0} 62%{opacity:1;transform:scale(1.45)} 64.5%{opacity:1;transform:scale(1)} 71.5%{opacity:1} 72%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-diamond { 0%,71.5%{opacity:0} 72%{opacity:1;transform:scale(1.45)} 74.5%{opacity:1;transform:scale(1)} 81.5%{opacity:1} 82%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-club    { 0%,81.5%{opacity:0} 82%{opacity:1;transform:scale(1.45)} 84.5%{opacity:1;transform:scale(1)} 95%{opacity:1}  96%{opacity:0} 100%{opacity:0} }
+    return (_jsxs("div", { className: ['fixed right-0 bottom-0 left-0 w-screen min-w-full transition-opacity duration-200', hidden ? 'pointer-events-none opacity-0' : 'opacity-100', className].filter(Boolean).join(' '), children: [_jsx("div", { style: { width: '100%', borderTop: '1px solid rgba(255,255,255,0.1)', background: 'rgba(0,0,0,0.9)', padding: '0 1rem 3px', textAlign: 'center' }, children: _jsxs("p", { style: { fontFamily: 'm6x11plus, monospace', fontSize: 'clamp(11px, 0.8vw + 8px, 14px)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '0 0.5rem', color: 'white', margin: 0 }, children: [_jsx("span", { children: "Not affiliated with LocalThunk or PlayStack" }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }, children: ["Made with", ' ', _jsx("span", { style: { position: 'relative', display: 'inline-block', width: '1.5em', height: '1em', verticalAlign: 'middle' }, children: SUITS.map(({ char, kf }) => (_jsx("span", { style: { position: 'absolute', inset: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: 0, animationName: kf, animationDuration: CYCLE, animationDelay: '0s', animationIterationCount: 'infinite', animationTimingFunction: 'ease-out' }, children: char }, char))) }), ' ', "for the", ' ', _jsx("a", { href: "https://playbalatro.com", target: "_blank", rel: "noopener noreferrer", style: { color: JimboColorOption.GOLD, textDecoration: 'none' }, children: "Balatro" }), ' ', "community"] })] }) }), _jsx("style", { children: `
+        @keyframes jaml-heart   { 0%{opacity:0;transform:scale(1)} 1%{opacity:1;transform:scale(1.45)} 3.5%{opacity:1;transform:scale(1)} 61.5%{opacity:1;transform:scale(1)} 62%{opacity:0} 100%{opacity:0} }
+        @keyframes jaml-spade   { 0%,61.5%{opacity:0} 62%{opacity:1;transform:scale(1.45)} 64.5%{opacity:1;transform:scale(1)} 71.5%{opacity:1} 72%{opacity:0} 100%{opacity:0} }
+        @keyframes jaml-diamond { 0%,71.5%{opacity:0} 72%{opacity:1;transform:scale(1.45)} 74.5%{opacity:1;transform:scale(1)} 81.5%{opacity:1} 82%{opacity:0} 100%{opacity:0} }
+        @keyframes jaml-club    { 0%,81.5%{opacity:0} 82%{opacity:1;transform:scale(1.45)} 84.5%{opacity:1;transform:scale(1)} 95%{opacity:1}  96%{opacity:0} 100%{opacity:0} }
       ` })] }));
 }

package/dist/utils/jamlVisualFilter.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Utilities for converting between JAML text and JamlVisualFilter.
+ *
+ * Intentionally does NOT depend on a YAML library — uses the same
+ * line-by-line approach as jamlMapPreview.ts to stay zero-dep.
+ */
+import type { JamlVisualFilter } from "../components/JamlIdeVisual.js";
+export declare function jamlTextToVisualFilter(text: string): JamlVisualFilter;
+export declare function visualFilterToJamlText(filter: JamlVisualFilter): string;

package/dist/utils/jamlVisualFilter.js

@@ -0,0 +1,194 @@
+/**
+ * Utilities for converting between JAML text and JamlVisualFilter.
+ *
+ * Intentionally does NOT depend on a YAML library — uses the same
+ * line-by-line approach as jamlMapPreview.ts to stay zero-dep.
+ */
+// ─── Text → Filter ────────────────────────────────────────────────────────────
+function stripQuotes(s) {
+    if ((s.startsWith('"') && s.endsWith('"')) || (s.startsWith("'") && s.endsWith("'"))) {
+        return s.slice(1, -1).trim();
+    }
+    return s;
+}
+function parseScalarValue(raw) {
+    const v = stripQuotes(raw.trim().replace(/,$/, "").trim());
+    return v || null;
+}
+function parseInlineList(raw) {
+    const t = raw.trim();
+    if (t.startsWith("[") && t.includes("]")) {
+        const body = t.slice(1, t.indexOf("]"));
+        return body
+            .split(",")
+            .map((s) => parseScalarValue(s))
+            .filter((s) => s !== null);
+    }
+    const v = parseScalarValue(t);
+    return v ? [v] : [];
+}
+function topLevelScalar(lines, key) {
+    for (const line of lines) {
+        const m = new RegExp(`^${key}:\\s*(.+)$`).exec(line.trim());
+        if (m)
+            return stripQuotes(m[1].trim());
+    }
+    return undefined;
+}
+const CLAUSE_ZONE_KEYS = new Set([
+    "joker", "jokers", "commonJoker", "commonJokers", "uncommonJoker", "uncommonJokers",
+    "rareJoker", "rareJokers", "mixedJoker", "mixedJokers", "soulJoker", "legendaryJoker",
+    "voucher", "vouchers",
+    "tarot", "tarotCard", "spectral", "spectralCard", "planet", "planetCard",
+    "boss", "bosses",
+    "tag", "tags", "smallBlindTag", "bigBlindTag", "smallblindtag", "bigblindtag",
+]);
+// JAML uses "mustnot" as zone key in some contexts; the visual filter uses "mustnot".
+// The text format may use "mustnot" or "must_not" — handle both, normalise to "mustnot".
+function sectionToZone(raw) {
+    if (raw === "must")
+        return "must";
+    if (raw === "should")
+        return "should";
+    if (raw === "mustnot" || raw === "must_not" || raw === "mustNot")
+        return "mustnot";
+    return null;
+}
+let _uid = 0;
+function uid() {
+    return `clause-${++_uid}`;
+}
+export function jamlTextToVisualFilter(text) {
+    const lines = text.replace(/\r\n/g, "\n").split("\n");
+    const filter = { must: [], should: [], mustnot: [] };
+    filter.name = topLevelScalar(lines, "name");
+    filter.author = topLevelScalar(lines, "author");
+    filter.description = topLevelScalar(lines, "description");
+    filter.deck = topLevelScalar(lines, "deck");
+    filter.stake = topLevelScalar(lines, "stake");
+    let zone = null;
+    let current = null;
+    const seen = new Set();
+    function flushClause() {
+        if (!current || !zone)
+            return;
+        const dedupeKey = `${zone}:${current.type}:${current.value.toLowerCase()}`;
+        if (!seen.has(dedupeKey)) {
+            seen.add(dedupeKey);
+            const clause = { id: uid(), type: current.type, value: current.value };
+            if (current.antes && current.antes.length > 0)
+                clause.antes = current.antes;
+            if (current.score !== undefined)
+                clause.score = current.score;
+            if (current.edition)
+                clause.edition = current.edition;
+            clause.label = current.value;
+            filter[zone].push(clause);
+        }
+        current = null;
+    }
+    for (const rawLine of lines) {
+        const trimmed = rawLine.trim();
+        if (!trimmed || trimmed.startsWith("#"))
+            continue;
+        // Top-level section header: must:/should:/mustnot:
+        const sectionMatch = /^(must|should|mustnot|must_not|mustNot):\s*$/.exec(trimmed);
+        if (sectionMatch) {
+            flushClause();
+            zone = sectionToZone(sectionMatch[1]);
+            continue;
+        }
+        // Top-level key (non-section) resets zone
+        const indent = rawLine.search(/\S|$/);
+        if (indent === 0 && /^[A-Za-z]/.test(trimmed) && !trimmed.startsWith("-")) {
+            flushClause();
+            if (!sectionToZone(trimmed.replace(/:.*/, "")))
+                zone = null;
+            continue;
+        }
+        if (!zone)
+            continue;
+        // New clause start: "  - rareJoker: Blueprint"
+        const clauseStart = /^-\s*([A-Za-z][A-Za-z0-9]*):\s*(.*?)\s*$/.exec(trimmed);
+        if (clauseStart) {
+            flushClause();
+            const type = clauseStart[1];
+            const rawVal = clauseStart[2];
+            if (!CLAUSE_ZONE_KEYS.has(type))
+                continue;
+            const value = parseScalarValue(rawVal) ?? "Any";
+            current = { type, value };
+            continue;
+        }
+        // Continuation line inside a clause: "    antes: [1,2,3]"
+        if (current && indent > 0 && !trimmed.startsWith("-")) {
+            const contMatch = /^([A-Za-z_][A-Za-z0-9_]*):\s*(.*?)\s*$/.exec(trimmed);
+            if (contMatch) {
+                const key = contMatch[1];
+                const val = contMatch[2];
+                if (key === "antes") {
+                    const nums = parseInlineList(val)
+                        .map(Number)
+                        .filter((n) => !isNaN(n));
+                    current.antes = nums;
+                }
+                else if (key === "score") {
+                    const n = Number(val);
+                    if (!isNaN(n))
+                        current.score = n;
+                }
+                else if (key === "edition") {
+                    current.edition = parseScalarValue(val) ?? undefined;
+                }
+            }
+        }
+    }
+    flushClause();
+    return filter;
+}
+// ─── Filter → Text ───────────────────────────────────────────────────────────
+function q(s) {
+    if (!s)
+        return "";
+    return /[:#\[\]{}|>&*!,'"?]/.test(s) ? `"${s.replace(/"/g, '\\"')}"` : s;
+}
+function serializeClause(clause) {
+    let out = `  - ${clause.type}: ${q(clause.value)}\n`;
+    if (clause.antes && clause.antes.length > 0) {
+        out += `    antes: [${clause.antes.join(", ")}]\n`;
+    }
+    if (clause.score !== undefined) {
+        out += `    score: ${clause.score}\n`;
+    }
+    if (clause.edition) {
+        out += `    edition: ${q(clause.edition)}\n`;
+    }
+    return out;
+}
+export function visualFilterToJamlText(filter) {
+    const parts = [];
+    if (filter.name)
+        parts.push(`name: ${q(filter.name)}`);
+    if (filter.author)
+        parts.push(`author: ${q(filter.author)}`);
+    if (filter.description)
+        parts.push(`description: ${q(filter.description)}`);
+    if (filter.deck)
+        parts.push(`deck: ${q(filter.deck)}`);
+    if (filter.stake)
+        parts.push(`stake: ${q(filter.stake)}`);
+    const zones = [
+        { key: "must", label: "must", clauses: filter.must },
+        { key: "should", label: "should", clauses: filter.should },
+        { key: "mustnot", label: "mustnot", clauses: filter.mustnot },
+    ];
+    for (const { label, clauses } of zones) {
+        if (clauses.length > 0) {
+            parts.push(`${label}:`);
+            for (const c of clauses) {
+                parts.push(serializeClause(c).trimEnd());
+            }
+        }
+    }
+    return parts.join("\n") + "\n";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",