jaml-ui 0.3.0 → 0.4.0

package/README.md

@@ -1,8 +1,6 @@
 # jaml-ui
 
-Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.
-
-`jaml-ui` is the shared UI layer for Balatro/JAML surfaces: low-level renderers, asset helpers, visual JAML previews, and a lightweight browser-first JAML IDE shell.
+React components and utilities for Balatro/JAML. Pair with **`motely-wasm`** when you need the engine (peer). Update both in consumers with normal **`pnpm update`** / semver like any other deps.
 
 ## Package shape
 

package/dist/components/AnalyzerExplorer.d.ts

@@ -0,0 +1,44 @@
+import { type AnalyzerShopItem } from "./GameCard.js";
+export interface AnalyzerBadge {
+    label: string;
+    tone?: "default" | "accent" | "muted";
+}
+export interface AnalyzerFact {
+    label: string;
+    value: string;
+}
+export interface AnalyzerItem extends AnalyzerShopItem {
+    desired?: boolean;
+    badges?: AnalyzerBadge[];
+    detail?: string;
+}
+export interface AnalyzerAnteView {
+    ante: number;
+    boss?: string;
+    voucher?: string;
+    smallBlindTag?: string;
+    bigBlindTag?: string;
+    packs?: string[];
+    shop?: AnalyzerItem[];
+    facts?: AnalyzerFact[];
+}
+export interface AnalyzerHighlight {
+    id: string;
+    ante: number;
+    title: string;
+    subtitle?: string;
+    desired?: boolean;
+    item?: AnalyzerItem;
+    boss?: string;
+    voucher?: string;
+    tag?: string;
+    badges?: AnalyzerBadge[];
+}
+export interface AnalyzerExplorerProps {
+    antes: AnalyzerAnteView[];
+    highlights?: AnalyzerHighlight[];
+    visibleAntes?: number;
+    totalAntes?: number;
+    className?: string;
+}
+export declare function AnalyzerExplorer({ antes, highlights, visibleAntes, totalAntes, className, }: AnalyzerExplorerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AnalyzerExplorer.js

@@ -0,0 +1,451 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { JamlBoss, JamlGameCard, JamlTag, JamlVoucher, resolveAnalyzerShopItem, } from "./GameCard.js";
+export function AnalyzerExplorer({ antes, highlights = [], visibleAntes, totalAntes, className = "", }) {
+    const [currentAnte, setCurrentAnte] = useState(antes[0]?.ante ?? 0);
+    const scrollRef = useRef(null);
+    const anteRefs = useRef(new Map());
+    const highlightRefs = useRef(new Map());
+    useEffect(() => {
+        setCurrentAnte(antes[0]?.ante ?? 0);
+    }, [antes]);
+    useEffect(() => {
+        const root = scrollRef.current;
+        if (!root) {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            const mostVisibleEntry = entries
+                .filter((entry) => entry.isIntersecting)
+                .sort((left, right) => right.intersectionRatio - left.intersectionRatio)[0];
+            if (!mostVisibleEntry) {
+                return;
+            }
+            const ante = Number(mostVisibleEntry.target.dataset.ante);
+            if (!Number.isNaN(ante)) {
+                setCurrentAnte(ante);
+            }
+        }, {
+            root,
+            threshold: [0.45, 0.72, 0.9],
+        });
+        for (const [, element] of anteRefs.current) {
+            observer.observe(element);
+        }
+        return () => observer.disconnect();
+    }, [antes]);
+    useEffect(() => {
+        const activeHighlight = highlights.find((highlight) => highlight.ante === currentAnte);
+        if (!activeHighlight) {
+            return;
+        }
+        const element = highlightRefs.current.get(activeHighlight.id);
+        element?.scrollIntoView({
+            behavior: "smooth",
+            inline: "center",
+            block: "nearest",
+        });
+    }, [currentAnte, highlights]);
+    const scrollToAnte = useCallback((ante) => {
+        anteRefs.current.get(ante)?.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+        });
+    }, []);
+    const currentAnteIndex = antes.findIndex((ante) => ante.ante === currentAnte);
+    const previousAnte = currentAnteIndex > 0 ? antes[currentAnteIndex - 1]?.ante ?? null : null;
+    const nextAnte = currentAnteIndex >= 0 && currentAnteIndex < antes.length - 1 ? antes[currentAnteIndex + 1]?.ante ?? null : null;
+    const shownAntes = visibleAntes ?? antes.length;
+    const availableAntes = totalAntes ?? shownAntes;
+    return (_jsxs("div", { className: className, style: styles.root, children: [highlights.length > 0 ? (_jsxs("section", { style: styles.highlightSection, children: [_jsxs("div", { style: styles.highlightHeader, children: [_jsx("span", { style: styles.highlightTitle, children: "Highlights" }), _jsx("span", { style: styles.highlightSubtitle, children: "Swipe, tap, jump" })] }), _jsx("div", { style: styles.highlightRail, children: highlights.map((highlight) => {
+                            const isActive = highlight.ante === currentAnte;
+                            return (_jsxs("button", { ref: (element) => {
+                                    if (element) {
+                                        highlightRefs.current.set(highlight.id, element);
+                                    }
+                                    else {
+                                        highlightRefs.current.delete(highlight.id);
+                                    }
+                                }, type: "button", onClick: () => scrollToAnte(highlight.ante), style: isActive ? styles.highlightCardActive : styles.highlightCard, children: [_jsx("div", { style: styles.highlightVisual, children: renderHighlightVisual(highlight) }), _jsxs("div", { style: styles.highlightMeta, children: [_jsxs("span", { style: styles.highlightAnte, children: ["Ante ", highlight.ante] }), _jsx("span", { style: styles.highlightLabel, children: highlight.title }), highlight.subtitle ? (_jsx("span", { style: styles.highlightDescription, children: highlight.subtitle })) : null, _jsx(BadgeRow, { badges: highlight.badges, desired: highlight.desired })] })] }, highlight.id));
+                        }) })] })) : null, _jsxs("div", { style: styles.navBar, children: [_jsx("button", { type: "button", onClick: () => previousAnte !== null && scrollToAnte(previousAnte), disabled: previousAnte === null, style: {
+                            ...styles.navButton,
+                            opacity: previousAnte !== null ? 1 : 0.25,
+                        }, children: "\u25B2" }), _jsxs("div", { style: styles.navLabel, children: ["Ante ", currentAnte, _jsxs("span", { style: styles.navSubLabel, children: ["of ", shownAntes, availableAntes > shownAntes ? ` / ${availableAntes}` : ""] })] }), _jsx("button", { type: "button", onClick: () => nextAnte !== null && scrollToAnte(nextAnte), disabled: nextAnte === null, style: {
+                            ...styles.navButton,
+                            opacity: nextAnte !== null ? 1 : 0.25,
+                        }, children: "\u25BC" })] }), _jsx("div", { ref: scrollRef, style: styles.scrollRegion, children: antes.map((ante) => (_jsx("div", { "data-ante": ante.ante, ref: (element) => {
+                        if (element) {
+                            anteRefs.current.set(ante.ante, element);
+                        }
+                        else {
+                            anteRefs.current.delete(ante.ante);
+                        }
+                    }, style: styles.antePage, children: _jsx(AnteSection, { ante: ante }) }, ante.ante))) })] }));
+}
+function AnteSection({ ante }) {
+    return (_jsxs("section", { style: styles.anteSection, children: [_jsxs("div", { style: styles.anteHeader, children: [_jsxs("span", { style: styles.anteHeading, children: ["Ante ", ante.ante] }), ante.boss ? (_jsxs("div", { style: styles.bossRow, children: [_jsx(JamlBoss, { bossName: ante.boss, scale: 0.62 }), _jsx("span", { style: styles.bossName, children: ante.boss })] })) : null] }), ante.smallBlindTag || ante.bigBlindTag ? (_jsxs(AnalyzerRow, { label: "Tags", children: [ante.smallBlindTag ? (_jsx(CompactCard, { label: "Small", visual: _jsx(JamlTag, { tagName: ante.smallBlindTag, scale: 0.58, hoverTilt: true }), text: ante.smallBlindTag })) : null, ante.bigBlindTag ? (_jsx(CompactCard, { label: "Big", visual: _jsx(JamlTag, { tagName: ante.bigBlindTag, scale: 0.58, hoverTilt: true }), text: ante.bigBlindTag })) : null] })) : null, ante.voucher ? (_jsx(AnalyzerRow, { label: "Voucher", children: _jsx(CompactCard, { visual: _jsx(JamlVoucher, { voucherName: ante.voucher, scale: 0.58, hoverTilt: true }), text: ante.voucher }) })) : null, ante.shop && ante.shop.length > 0 ? (_jsx(AnalyzerRow, { label: "Shop", dense: true, children: ante.shop.map((item) => (_jsx(ResolvedItemCard, { item: item }, `${ante.ante}-${item.id}-${item.name}`))) })) : null, ante.packs && ante.packs.length > 0 ? (_jsx(AnalyzerRow, { label: "Packs", children: ante.packs.map((pack) => (_jsx("div", { style: styles.packChip, children: pack }, `${ante.ante}-${pack}`))) })) : null, ante.facts && ante.facts.length > 0 ? (_jsx(AnalyzerRow, { label: "Facts", children: ante.facts.map((fact) => (_jsxs("div", { style: styles.factCard, children: [_jsx("span", { style: styles.factLabel, children: fact.label }), _jsx("span", { style: styles.factValue, children: fact.value })] }, `${ante.ante}-${fact.label}-${fact.value}`))) })) : null] }));
+}
+function AnalyzerRow({ label, children, dense = false, }) {
+    return (_jsxs("div", { style: styles.row, children: [_jsx("div", { style: styles.rowLabel, children: label }), _jsx("div", { style: dense ? styles.denseGrid : styles.cardFlow, children: children })] }));
+}
+function CompactCard({ label, visual, text, }) {
+    return (_jsxs("div", { style: styles.compactCard, children: [label ? _jsx("span", { style: styles.compactLabel, children: label }) : null, visual, _jsx("span", { style: styles.itemText, children: text })] }));
+}
+function ResolvedItemCard({ item }) {
+    const resolved = resolveAnalyzerShopItem(item, 0.58);
+    const wrapperStyle = item.desired ? styles.itemCardDesired : styles.itemCard;
+    if (resolved.kind === "joker" || resolved.kind === "consumable" || resolved.kind === "playing") {
+        return (_jsxs("div", { style: wrapperStyle, children: [_jsx(JamlGameCard, { card: resolved.card, type: resolved.type, hoverTilt: true }), _jsx("span", { style: styles.itemText, children: item.name }), _jsx(BadgeRow, { badges: item.badges, desired: item.desired }), item.detail ? _jsx("span", { style: styles.itemDetail, children: item.detail }) : null] }));
+    }
+    if (resolved.kind === "voucher") {
+        return (_jsxs("div", { style: wrapperStyle, children: [_jsx(JamlVoucher, { voucherName: resolved.voucherName, scale: 0.58, hoverTilt: true }), _jsx("span", { style: styles.itemText, children: item.name }), _jsx(BadgeRow, { badges: item.badges, desired: item.desired }), item.detail ? _jsx("span", { style: styles.itemDetail, children: item.detail }) : null] }));
+    }
+    return (_jsxs("div", { style: wrapperStyle, children: [_jsx("div", { style: styles.packChip, children: item.name }), _jsx(BadgeRow, { badges: item.badges, desired: item.desired }), item.detail ? _jsx("span", { style: styles.itemDetail, children: item.detail }) : null] }));
+}
+function BadgeRow({ badges, desired = false }) {
+    const combinedBadges = desired
+        ? [{ label: "desired", tone: "accent" }, ...(badges ?? [])]
+        : (badges ?? []);
+    if (combinedBadges.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { style: styles.badgeRow, children: combinedBadges.map((badge) => {
+            const badgeStyle = badge.tone === "accent"
+                ? styles.badgeAccent
+                : badge.tone === "muted"
+                    ? styles.badgeMuted
+                    : styles.badge;
+            return (_jsx("span", { style: badgeStyle, children: badge.label }, `${badge.label}-${badge.tone ?? "default"}`));
+        }) }));
+}
+function renderHighlightVisual(highlight) {
+    if (highlight.item) {
+        return _jsx(ResolvedItemCard, { item: highlight.item });
+    }
+    if (highlight.boss) {
+        return _jsx(JamlBoss, { bossName: highlight.boss, scale: 0.92, hoverTilt: true });
+    }
+    if (highlight.voucher) {
+        return _jsx(JamlVoucher, { voucherName: highlight.voucher, scale: 0.92, hoverTilt: true });
+    }
+    if (highlight.tag) {
+        return _jsx(JamlTag, { tagName: highlight.tag, scale: 0.92, hoverTilt: true });
+    }
+    return _jsx("div", { style: styles.packChip, children: highlight.title });
+}
+const styles = {
+    root: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0,
+    },
+    highlightSection: {
+        padding: "10px 16px 8px",
+        borderBottom: "1px solid #1a1a34",
+        background: "#0f0f22",
+    },
+    highlightHeader: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        marginBottom: 8,
+    },
+    highlightTitle: {
+        fontSize: 11,
+        color: "#6f6fa1",
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+    },
+    highlightSubtitle: {
+        fontSize: 11,
+        color: "#6f6fa1",
+    },
+    highlightRail: {
+        display: "flex",
+        gap: 10,
+        overflowX: "auto",
+        paddingBottom: 4,
+        scrollSnapType: "x mandatory",
+    },
+    highlightCard: {
+        minWidth: 150,
+        maxWidth: 150,
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        padding: 8,
+        borderRadius: 12,
+        border: "1px solid #2a2a55",
+        background: "#131326",
+        scrollSnapAlign: "center",
+        cursor: "pointer",
+    },
+    highlightCardActive: {
+        minWidth: 150,
+        maxWidth: 150,
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        padding: 8,
+        borderRadius: 12,
+        border: "1px solid rgba(245,200,66,0.45)",
+        background: "rgba(245,200,66,0.08)",
+        scrollSnapAlign: "center",
+        cursor: "pointer",
+    },
+    highlightVisual: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "flex-start",
+        minHeight: 88,
+    },
+    highlightMeta: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 3,
+        alignItems: "flex-start",
+    },
+    highlightAnte: {
+        fontSize: 10,
+        color: "#a855f7",
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+    },
+    highlightLabel: {
+        fontSize: 12,
+        color: "#ececff",
+        fontWeight: 700,
+        lineHeight: 1.2,
+        textAlign: "left",
+    },
+    highlightDescription: {
+        fontSize: 11,
+        color: "#8e8eb6",
+        lineHeight: 1.2,
+        textAlign: "left",
+    },
+    navBar: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 12,
+        padding: "8px 16px",
+        background: "#0f0f22",
+        borderBottom: "1px solid #1a1a34",
+    },
+    navButton: {
+        background: "none",
+        border: "1px solid #2a2a55",
+        borderRadius: 6,
+        color: "#9898c0",
+        fontSize: 14,
+        padding: "4px 10px",
+        cursor: "pointer",
+    },
+    navLabel: {
+        fontSize: 12,
+        fontWeight: 700,
+        color: "#a855f7",
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        minWidth: 130,
+        textAlign: "center",
+    },
+    navSubLabel: {
+        color: "#5a5a88",
+        fontWeight: 500,
+        textTransform: "none",
+        letterSpacing: "normal",
+        fontSize: 11,
+        marginLeft: 4,
+    },
+    scrollRegion: {
+        flex: 1,
+        overflowY: "auto",
+        overflowX: "hidden",
+        scrollSnapType: "y mandatory",
+        scrollBehavior: "smooth",
+    },
+    antePage: {
+        scrollSnapAlign: "start",
+        scrollSnapStop: "always",
+        minHeight: "100%",
+        boxSizing: "border-box",
+        paddingBottom: 16,
+        borderBottom: "1px solid #1a1a34",
+    },
+    anteSection: {
+        paddingBottom: 8,
+    },
+    anteHeader: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: "8px 16px",
+    },
+    anteHeading: {
+        fontSize: 12,
+        fontWeight: 700,
+        color: "#a855f7",
+        textTransform: "uppercase",
+        letterSpacing: "0.1em",
+    },
+    bossRow: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+    },
+    bossName: {
+        fontSize: 13,
+        color: "#e84040",
+        fontWeight: 600,
+    },
+    row: {
+        padding: "4px 16px 8px",
+    },
+    rowLabel: {
+        fontSize: 10,
+        color: "#5a5a88",
+        textTransform: "uppercase",
+        letterSpacing: "0.07em",
+        marginBottom: 6,
+    },
+    cardFlow: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 8,
+        alignItems: "flex-start",
+    },
+    denseGrid: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(82px, 1fr))",
+        gap: 8,
+        alignItems: "start",
+    },
+    compactCard: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+        minWidth: 62,
+    },
+    compactLabel: {
+        padding: "2px 6px",
+        borderRadius: 999,
+        background: "#18182e",
+        color: "#7f7fa7",
+        border: "1px solid #2a2a55",
+        fontSize: 9,
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+    },
+    itemCard: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+        width: "100%",
+        minWidth: 0,
+    },
+    itemCardDesired: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+        width: "100%",
+        minWidth: 0,
+        padding: "4px 4px 6px",
+        borderRadius: 10,
+        border: "1px solid rgba(245,200,66,0.4)",
+        background: "rgba(245,200,66,0.08)",
+    },
+    itemText: {
+        fontSize: 10,
+        color: "#8e8eb6",
+        textAlign: "center",
+        lineHeight: 1.2,
+        maxWidth: 84,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    itemDetail: {
+        fontSize: 10,
+        color: "#d8d8ea",
+        textAlign: "center",
+        lineHeight: 1.2,
+    },
+    badgeRow: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 4,
+        justifyContent: "center",
+    },
+    badge: {
+        padding: "2px 6px",
+        borderRadius: 999,
+        background: "#202043",
+        color: "#c7c7ef",
+        border: "1px solid #35356d",
+        fontSize: 9,
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+    },
+    badgeAccent: {
+        padding: "2px 6px",
+        borderRadius: 999,
+        background: "rgba(245,200,66,0.2)",
+        color: "#f5c842",
+        border: "1px solid rgba(245,200,66,0.35)",
+        fontSize: 9,
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+    },
+    badgeMuted: {
+        padding: "2px 6px",
+        borderRadius: 999,
+        background: "#18182e",
+        color: "#7f7fa7",
+        border: "1px solid #2a2a55",
+        fontSize: 9,
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+    },
+    packChip: {
+        fontSize: 12,
+        color: "#5a5a88",
+        background: "#131326",
+        border: "1px solid #2a2a55",
+        borderRadius: 6,
+        padding: "4px 8px",
+    },
+    factCard: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+        minWidth: 110,
+        padding: "8px 10px",
+        borderRadius: 10,
+        background: "#131326",
+        border: "1px solid #2a2a55",
+    },
+    factLabel: {
+        fontSize: 10,
+        color: "#7f7fa7",
+        textTransform: "uppercase",
+        letterSpacing: "0.07em",
+    },
+    factValue: {
+        fontSize: 12,
+        color: "#ececff",
+        fontWeight: 700,
+    },
+};

package/dist/components/JamlIde.d.ts

@@ -13,5 +13,7 @@ export interface JamlIdeProps {
     title?: string;
     actions?: React.ReactNode;
     codePlaceholder?: string;
+    onSearch?: () => void;
+    isSearching?: boolean;
 }
-export declare function JamlIde({ jaml, onChange, defaultMode, searchResults, className, title, actions, codePlaceholder, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlIde({ jaml, onChange, defaultMode, searchResults, className, title, actions, codePlaceholder, onSearch, isSearching, }: JamlIdeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlIde.js

@@ -25,7 +25,7 @@ function ResultsView({ results }) {
                 padding: "10px 12px",
             }, children: [_jsx("div", { style: { fontWeight: 700, letterSpacing: 0.4 }, children: result.seed }), _jsx("div", { style: { fontSize: 12, opacity: 0.7 }, children: result.score !== undefined ? result.score : "-" })] }, `${result.seed}-${index}`))) }));
 }
-export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults = [], className = "", title = "JAML IDE", actions, codePlaceholder = "Enter JAML...", }) {
+export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults = [], className = "", title = "JAML IDE", actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, }) {
     const [mode, setMode] = useState(defaultMode);
     const results = useMemo(() => searchResults, [searchResults]);
     return (_jsxs("div", { className: className, style: {
@@ -45,7 +45,7 @@ export function JamlIde({ jaml, onChange, defaultMode = "code", searchResults =
                     padding: "12px 14px",
                     borderBottom: "1px solid rgba(255,255,255,0.08)",
                     background: "rgba(255,255,255,0.03)",
-                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: 800 }, children: title }), _jsx("div", { style: { fontSize: 11, opacity: 0.66 }, children: "Reusable JAML authoring and preview surface." })] }), actions ? _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: actions }) : null] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: [mode === "code" ? (_jsx("textarea", { title: "JAML IDE Editor", value: jaml, onChange: (event) => onChange(event.target.value), placeholder: codePlaceholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", style: {
+                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: 800 }, children: title }), _jsx("div", { style: { fontSize: 11, opacity: 0.66 }, children: "Reusable JAML authoring and preview surface." })] }), actions ? _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: actions }) : null] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: [mode === "code" ? (_jsx("textarea", { title: "JAML IDE Editor", value: jaml, onChange: (event) => onChange(event.target.value), placeholder: codePlaceholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", style: {
                             width: "100%",
                             minHeight: 320,
                             resize: "vertical",

package/dist/components/JamlIdeToolbar.d.ts

@@ -4,5 +4,7 @@ export interface JamlIdeToolbarProps {
     onModeChange: (mode: JamlIdeMode) => void;
     resultCount?: number;
     className?: string;
+    onSearch?: () => void;
+    isSearching?: boolean;
 }
-export declare function JamlIdeToolbar({ mode, onModeChange, resultCount, className }: JamlIdeToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlIdeToolbar({ mode, onModeChange, resultCount, className, onSearch, isSearching }: JamlIdeToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlIdeToolbar.js

@@ -5,8 +5,8 @@ const TABS = [
     { id: "map", label: "Map" },
     { id: "results", label: "Results" },
 ];
-export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className = "" }) {
-    return (_jsx("div", { className: className, style: {
+export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className = "", onSearch, isSearching = false }) {
+    return (_jsxs("div", { className: className, style: {
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
@@ -14,23 +14,32 @@ export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className
             padding: "8px 10px",
             borderBottom: "1px solid rgba(255,255,255,0.08)",
             background: "rgba(255,255,255,0.04)",
-        }, children: _jsx("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: TABS.map((tab) => {
-                const selected = mode === tab.id;
-                return (_jsxs("button", { type: "button", onClick: () => onModeChange(tab.id), style: {
-                        cursor: "pointer",
-                        borderRadius: 8,
-                        border: selected ? "1px solid rgba(247,185,85,0.55)" : "1px solid transparent",
-                        background: selected ? "rgba(247,185,85,0.16)" : "transparent",
-                        color: selected ? "#f7b955" : "rgba(255,255,255,0.58)",
-                        padding: "6px 10px",
-                        fontSize: 11,
-                        fontWeight: 600,
-                    }, children: [tab.label, tab.id === "results" && resultCount > 0 ? (_jsx("span", { style: {
-                                marginLeft: 6,
-                                borderRadius: 999,
-                                background: "rgba(0,0,0,0.25)",
-                                padding: "1px 6px",
-                                fontSize: 10,
-                            }, children: resultCount })) : null] }, tab.id));
-            }) }) }));
+        }, children: [_jsx("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: TABS.map((tab) => {
+                    const selected = mode === tab.id;
+                    return (_jsxs("button", { type: "button", onClick: () => onModeChange(tab.id), style: {
+                            cursor: "pointer",
+                            borderRadius: 8,
+                            border: selected ? "1px solid rgba(247,185,85,0.55)" : "1px solid transparent",
+                            background: selected ? "rgba(247,185,85,0.16)" : "transparent",
+                            color: selected ? "#f7b955" : "rgba(255,255,255,0.58)",
+                            padding: "6px 10px",
+                            fontSize: 11,
+                            fontWeight: 600,
+                        }, children: [tab.label, tab.id === "results" && resultCount > 0 ? (_jsx("span", { style: {
+                                    marginLeft: 6,
+                                    borderRadius: 999,
+                                    background: "rgba(0,0,0,0.25)",
+                                    padding: "1px 6px",
+                                    fontSize: 10,
+                                }, children: resultCount })) : null] }, tab.id));
+                }) }), onSearch ? (_jsx("button", { type: "button", onClick: onSearch, disabled: isSearching, style: {
+                    cursor: isSearching ? "not-allowed" : "pointer",
+                    borderRadius: 8,
+                    border: "1px solid rgba(74,222,128,0.4)",
+                    background: isSearching ? "rgba(239,68,68,0.2)" : "rgba(74,222,128,0.15)",
+                    color: isSearching ? "#ef4444" : "#4ade80",
+                    padding: "6px 14px",
+                    fontSize: 11,
+                    fontWeight: 700,
+                }, children: isSearching ? "Stop" : "Search" })) : null] }));
 }

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { JAML_ASSET_FILES, clearJamlAssetBaseUrl, getDefaultJamlAssetUrlMap, res
 export { Layer, type LayerOptions } from "./render/Layer.js";
 export { JamlCardRenderer, type JamlCardRendererProps } from "./render/CanvasRenderer.js";
 export { JamlGameCard, JamlVoucher, JamlTag, JamlBoss, resolveAnalyzerShopItem, type JamlGameCardProps, type AnalyzerShopItem, type AnalyzerResolvedItem, } from "./components/GameCard.js";
+export { AnalyzerExplorer, type AnalyzerAnteView, type AnalyzerBadge, type AnalyzerExplorerProps, type AnalyzerFact, type AnalyzerHighlight, type AnalyzerItem, } from "./components/AnalyzerExplorer.js";
 export { JamlMapPreview, type JamlMapPreviewProps } from "./components/JamlMapPreview.js";
 export { JamlIde, type JamlIdeProps, type JamlIdeSearchResult, } from "./components/JamlIde.js";
 export { JamlIdeToolbar, type JamlIdeMode, type JamlIdeToolbarProps, } from "./components/JamlIdeToolbar.js";

package/dist/index.js

@@ -3,6 +3,7 @@ export { JAML_ASSET_FILES, clearJamlAssetBaseUrl, getDefaultJamlAssetUrlMap, res
 export { Layer } from "./render/Layer.js";
 export { JamlCardRenderer } from "./render/CanvasRenderer.js";
 export { JamlGameCard, JamlVoucher, JamlTag, JamlBoss, resolveAnalyzerShopItem, } from "./components/GameCard.js";
+export { AnalyzerExplorer, } from "./components/AnalyzerExplorer.js";
 export { JamlMapPreview } from "./components/JamlMapPreview.js";
 export { JamlIde, } from "./components/JamlIde.js";
 export { JamlIdeToolbar, } from "./components/JamlIdeToolbar.js";

package/dist/motely.d.ts

@@ -1 +1,2 @@
 export { decodeMotelyItem, decodeMotelyItemToJamlCard, motelyItemTypeName, motelyItemCategory, motelyItemDisplayName, motelyItemRenderCategory, motelyItemEditionName, motelyItemSealName, motelyItemEnhancementName, motelyPlayingCardRankName, motelyPlayingCardSuitName, decodeMotelyItemName, resolveMotelyItemType, warmMotelyItemCache, motelyItemCacheSize, type DecodedMotelyItem, type MotelyItemInput, type MotelyJamlCard, type MotelyRenderableCategory, type MotelyRuntimeItem, } from "./decode/motelyItemDecoder.js";
+export { MOTELY_DISPLAY_SCHEMA, motelyBossDisplayName, motelyBossDisplayNameFromKey, motelyBossKeyFromDisplayName, motelyBoosterPackDisplayName, motelyBoosterPackDisplayNameFromKey, motelyBoosterPackKeyFromDisplayName, motelyItemDisplayNameFromKey, motelyItemDisplayNameFromValue, motelyTagDisplayName, motelyTagDisplayNameFromKey, motelyTagKeyFromDisplayName, motelyVoucherDisplayName, motelyVoucherDisplayNameFromKey, motelyVoucherKeyFromDisplayName, type MotelyBoosterPackKey, type MotelyBossKey, type MotelyDisplaySchema, type MotelyTagKey, type MotelyVoucherKey, } from "./motelyDisplay.js";

package/dist/motely.js

@@ -1,2 +1,3 @@
 "use client";
 export { decodeMotelyItem, decodeMotelyItemToJamlCard, motelyItemTypeName, motelyItemCategory, motelyItemDisplayName, motelyItemRenderCategory, motelyItemEditionName, motelyItemSealName, motelyItemEnhancementName, motelyPlayingCardRankName, motelyPlayingCardSuitName, decodeMotelyItemName, resolveMotelyItemType, warmMotelyItemCache, motelyItemCacheSize, } from "./decode/motelyItemDecoder.js";
+export { MOTELY_DISPLAY_SCHEMA, motelyBossDisplayName, motelyBossDisplayNameFromKey, motelyBossKeyFromDisplayName, motelyBoosterPackDisplayName, motelyBoosterPackDisplayNameFromKey, motelyBoosterPackKeyFromDisplayName, motelyItemDisplayNameFromKey, motelyItemDisplayNameFromValue, motelyTagDisplayName, motelyTagDisplayNameFromKey, motelyTagKeyFromDisplayName, motelyVoucherDisplayName, motelyVoucherDisplayNameFromKey, motelyVoucherKeyFromDisplayName, } from "./motelyDisplay.js";