jaml-ui 0.11.0 → 0.13.1

package/dist/components/JamlAnalyzerFullscreen.d.ts

@@ -0,0 +1,21 @@
+import type { AnalyzerAnteView, AnalyzerItem } from "./AnalyzerExplorer.js";
+import type { AnalyzerLive } from "../hooks/useAnalyzer.js";
+import { type AnalyzerStreamKey } from "../hooks/analyzerStreamRegistry.js";
+export interface JamlAnalyzerFullscreenProps {
+    /** Per-ante summaries from useAnalyzer.antes. */
+    antes: AnalyzerAnteView[];
+    /** Live ctx from useAnalyzer.live; null disables additional stream lanes. */
+    live: AnalyzerLive | null;
+    /** Stream lanes to surface. Defaults to shop + soul jokers. */
+    enabledStreams?: AnalyzerStreamKey[];
+    /** Called when the user toggles a stream in the picker. Owners persist if desired. */
+    onEnabledStreamsChange?: (next: AnalyzerStreamKey[]) => void;
+    /** Hide the built-in stream picker overlay (e.g. when host renders its own). */
+    hidePicker?: boolean;
+    /** Pull size on each lazy load. */
+    chunkSize?: number;
+    className?: string;
+}
+export declare function JamlAnalyzerFullscreen({ antes, live, enabledStreams, onEnabledStreamsChange, hidePicker, chunkSize, className, }: JamlAnalyzerFullscreenProps): import("react/jsx-runtime").JSX.Element;
+export type { AnalyzerItem };
+export { ANALYZER_STREAM_META, type AnalyzerStreamKey } from "../hooks/analyzerStreamRegistry.js";

package/dist/components/JamlAnalyzerFullscreen.js

@@ -0,0 +1,368 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { JamlBoss, JamlGameCard, JamlTag, JamlVoucher, resolveAnalyzerShopItem } from "./GameCard.js";
+import { useMotelyStream } from "../hooks/useShopStream.js";
+import { ANALYZER_STREAM_META, DEFAULT_ENABLED_STREAMS, buildStreamHandle, } from "../hooks/analyzerStreamRegistry.js";
+import { JimboColorOption, withAlpha } from "../ui/tokens.js";
+const C = JimboColorOption;
+const TONE_COLORS = {
+    gold: C.GOLD_TEXT,
+    purple: C.TAROT_BUTTON,
+    blue: C.PLANET_BUTTON,
+    spectral: C.SPECTRAL_BUTTON,
+    default: C.GOLD_TEXT,
+};
+export function JamlAnalyzerFullscreen({ antes, live, enabledStreams, onEnabledStreamsChange, hidePicker = false, chunkSize = 12, className = "", }) {
+    const [internalEnabled, setInternalEnabled] = useState(enabledStreams ?? DEFAULT_ENABLED_STREAMS);
+    const effectiveEnabled = enabledStreams ?? internalEnabled;
+    const setEnabled = useCallback((next) => {
+        setInternalEnabled(next);
+        onEnabledStreamsChange?.(next);
+    }, [onEnabledStreamsChange]);
+    const scrollRef = useRef(null);
+    const sectionRefs = useRef(new Map());
+    const [currentAnte, setCurrentAnte] = useState(antes[0]?.ante ?? 1);
+    const [pickerOpen, setPickerOpen] = useState(false);
+    useEffect(() => {
+        const root = scrollRef.current;
+        if (!root)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            const top = entries
+                .filter((e) => e.isIntersecting)
+                .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+            if (!top)
+                return;
+            const ante = Number(top.target.dataset.ante);
+            if (!Number.isNaN(ante))
+                setCurrentAnte(ante);
+        }, { root, threshold: [0.4, 0.6, 0.8] });
+        sectionRefs.current.forEach((el) => observer.observe(el));
+        return () => observer.disconnect();
+    }, [antes]);
+    const scrollToAnte = useCallback((ante) => {
+        sectionRefs.current.get(ante)?.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, []);
+    return (_jsxs("div", { className: className, style: styles.root, children: [_jsx("div", { ref: scrollRef, style: styles.scroller, children: antes.map((ante) => (_jsx(AnteSection, { ante: ante, live: live, enabledStreams: effectiveEnabled, chunkSize: chunkSize, registerRef: (el) => {
+                        if (el)
+                            sectionRefs.current.set(ante.ante, el);
+                        else
+                            sectionRefs.current.delete(ante.ante);
+                    } }, ante.ante))) }), _jsx(SideRail, { antes: antes.map((a) => a.ante), currentAnte: currentAnte, onJump: scrollToAnte }), !hidePicker && (_jsx(StreamPicker, { enabled: effectiveEnabled, onChange: setEnabled, open: pickerOpen, onToggle: () => setPickerOpen((v) => !v) }))] }));
+}
+function AnteSection({ ante, live, enabledStreams, chunkSize, registerRef }) {
+    return (_jsxs("section", { ref: registerRef, "data-ante": ante.ante, style: styles.section, children: [_jsxs("header", { style: styles.header, children: [_jsxs("div", { children: [_jsx("div", { style: styles.anteLabel, children: "ANTE" }), _jsx("div", { style: styles.anteNumber, children: ante.ante })] }), ante.voucher && (_jsxs("div", { style: styles.voucherBlock, children: [_jsx(JamlVoucher, { voucherName: ante.voucher, scale: 0.85 }), _jsx("div", { style: styles.voucherCaption, children: ante.voucher })] }))] }), _jsxs("div", { style: styles.blindRow, children: [_jsx(BlindCell, { label: "SMALL", tag: ante.smallBlindTag }), _jsx(BlindCell, { label: "BIG", tag: ante.bigBlindTag }), ante.boss && (_jsxs("div", { style: styles.bossCell, children: [_jsx("div", { style: styles.cellLabel, children: "BOSS" }), _jsx(JamlBoss, { bossName: ante.boss, scale: 0.7 }), _jsx("div", { style: styles.cellCaption, children: ante.boss })] }))] }), ante.packs && ante.packs.length > 0 && (_jsxs("div", { style: styles.streamLane, children: [_jsx("div", { style: styles.streamLabel, children: "PACKS" }), _jsx("div", { style: styles.packRow, children: ante.packs.map((pack, i) => (_jsx("div", { style: styles.packPill, children: pack }, `${ante.ante}-pack-${i}`))) })] })), enabledStreams.map((key) => {
+                const isShop = key === "shop";
+                const initialItems = isShop
+                    ? (ante.shop ?? []).map((item) => ({
+                        id: item.id,
+                        name: item.name,
+                        value: item.value,
+                    }))
+                    : [];
+                return (_jsx(StreamLane, { ante: ante.ante, streamKey: key, live: live, chunkSize: chunkSize, initialItems: initialItems }, `${ante.ante}-${key}`));
+            })] }));
+}
+function StreamLane({ ante, streamKey, live, chunkSize, initialItems }) {
+    const meta = ANALYZER_STREAM_META[streamKey];
+    const handle = useMemo(() => (live ? buildStreamHandle(live, ante, streamKey) : null), [live, ante, streamKey]);
+    const stream = useMotelyStream(handle?.initStream ?? null, handle?.nextItem ?? null, [ante, streamKey, live?.seed, live?.deck, live?.stake], initialItems);
+    const desired = live?.desiredNames ?? new Set();
+    const toneColor = TONE_COLORS[meta.tone] ?? TONE_COLORS.default;
+    return (_jsxs("div", { style: styles.streamLane, children: [_jsxs("div", { style: { ...styles.streamLabel, color: toneColor }, children: [meta.label.toUpperCase(), stream.items.length > 0 ? ` · ${stream.items.length}` : ""] }), _jsx(ShopRow, { items: stream.items, desired: desired, loadingMore: stream.loadingMore, ready: stream.ready, onPullMore: () => stream.pullMore(chunkSize) }), stream.error && _jsxs("div", { style: styles.errorLine, children: ["stream error: ", stream.error] })] }));
+}
+function BlindCell({ label, tag }) {
+    if (!tag)
+        return null;
+    return (_jsxs("div", { style: styles.blindCell, children: [_jsx("div", { style: styles.cellLabel, children: label }), _jsx(JamlTag, { tagName: tag, scale: 0.7 }), _jsx("div", { style: styles.cellCaption, children: tag })] }));
+}
+function ShopRow({ items, desired, loadingMore, ready, onPullMore }) {
+    const sentinelRef = useRef(null);
+    const lastTriggerRef = useRef(0);
+    useEffect(() => {
+        const el = sentinelRef.current;
+        if (!el || !ready)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0]?.isIntersecting && !loadingMore) {
+                const now = Date.now();
+                if (now - lastTriggerRef.current < 200)
+                    return;
+                lastTriggerRef.current = now;
+                onPullMore();
+            }
+        }, { root: el.parentElement, threshold: 0.1, rootMargin: "0px 200px 0px 0px" });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [ready, loadingMore, onPullMore]);
+    return (_jsxs("div", { style: styles.shopRow, children: [items.map((item) => (_jsx(ShopItem, { item: item, desired: desired.has(item.name.toLowerCase()) }, item.id))), _jsx("div", { ref: sentinelRef, style: styles.sentinel, children: loadingMore ? "…" : "" })] }));
+}
+function ShopItem({ item, desired }) {
+    const resolved = resolveAnalyzerShopItem({ id: item.id, name: item.name, value: item.value });
+    const wrapperStyle = {
+        flexShrink: 0,
+        position: "relative",
+        filter: desired ? `drop-shadow(0 0 6px ${C.GOLD})` : undefined,
+    };
+    const labelStyle = {
+        fontSize: 10,
+        color: desired ? C.GOLD : C.GREY,
+        textAlign: "center",
+        marginTop: 2,
+        maxWidth: 80,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    };
+    return (_jsxs("div", { style: wrapperStyle, children: [resolved.kind === "joker" || resolved.kind === "consumable" || resolved.kind === "playing" ? (_jsx(JamlGameCard, { card: resolved.card, type: resolved.type })) : resolved.kind === "voucher" ? (_jsx(JamlVoucher, { voucherName: resolved.voucherName, scale: 0.7 })) : (_jsx("div", { style: styles.unknownTile, children: ("label" in resolved ? resolved.label : item.name) || "?" })), _jsx("div", { style: labelStyle, children: item.name })] }));
+}
+function SideRail({ antes, currentAnte, onJump }) {
+    return (_jsx("div", { style: styles.sideRail, children: antes.map((ante) => {
+            const active = ante === currentAnte;
+            return (_jsx("button", { type: "button", onClick: () => onJump(ante), "aria-label": `Jump to ante ${ante}`, style: {
+                    ...styles.sideRailDot,
+                    background: active ? C.GOLD : withAlpha(C.WHITE, 0.25),
+                    transform: active ? "scale(1.4)" : "scale(1)",
+                    boxShadow: active ? `0 0 8px ${C.GOLD}` : "none",
+                } }, ante));
+        }) }));
+}
+function StreamPicker({ enabled, onChange, open, onToggle }) {
+    const enabledSet = new Set(enabled);
+    const all = Object.values(ANALYZER_STREAM_META);
+    function toggle(key) {
+        const next = new Set(enabledSet);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        onChange(all.map((m) => m.key).filter((k) => next.has(k)));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: onToggle, style: styles.pickerButton, "aria-label": "Toggle stream picker", children: open ? "✕" : "≡" }), open && (_jsxs("div", { style: styles.pickerPanel, children: [_jsx("div", { style: styles.pickerHeader, children: "STREAMS" }), all.map((meta) => {
+                        const isOn = enabledSet.has(meta.key);
+                        const tone = TONE_COLORS[meta.tone] ?? TONE_COLORS.default;
+                        return (_jsxs("button", { type: "button", onClick: () => toggle(meta.key), style: {
+                                ...styles.pickerChip,
+                                borderColor: isOn ? tone : withAlpha(C.WHITE, 0.15),
+                                color: isOn ? tone : C.GREY,
+                                background: isOn ? withAlpha(tone, 0.1) : "transparent",
+                            }, children: [isOn ? "●" : "○", " ", meta.label] }, meta.key));
+                    })] }))] }));
+}
+const styles = {
+    root: {
+        position: "relative",
+        width: "100%",
+        height: "100svh",
+        background: C.DARKEST,
+        color: C.WHITE,
+        fontFamily: "var(--font-sans, m6x11plus), monospace",
+        overflow: "hidden",
+    },
+    scroller: {
+        width: "100%",
+        height: "100%",
+        overflowY: "scroll",
+        scrollSnapType: "y mandatory",
+        scrollBehavior: "smooth",
+        WebkitOverflowScrolling: "touch",
+    },
+    section: {
+        width: "100%",
+        minHeight: "100svh",
+        scrollSnapAlign: "start",
+        padding: "20px 16px 28px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        boxSizing: "border-box",
+        borderBottom: `1px solid ${withAlpha(C.WHITE, 0.05)}`,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        gap: 12,
+    },
+    anteLabel: {
+        fontSize: 12,
+        color: C.GREY,
+        letterSpacing: "0.16em",
+    },
+    anteNumber: {
+        fontSize: 72,
+        color: C.GOLD,
+        lineHeight: 0.9,
+        textShadow: `3px 3px 0 ${C.BLACK}`,
+    },
+    voucherBlock: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+    },
+    voucherCaption: {
+        fontSize: 10,
+        color: C.PURPLE,
+        letterSpacing: "0.1em",
+    },
+    blindRow: {
+        display: "flex",
+        gap: 16,
+        flexWrap: "wrap",
+    },
+    blindCell: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+    },
+    bossCell: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+    },
+    cellLabel: {
+        fontSize: 10,
+        color: C.GREY,
+        letterSpacing: "0.12em",
+    },
+    cellCaption: {
+        fontSize: 10,
+        color: C.WHITE,
+        maxWidth: 90,
+        textAlign: "center",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    streamLane: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        minHeight: 0,
+    },
+    streamLabel: {
+        fontSize: 11,
+        color: C.GOLD_TEXT,
+        letterSpacing: "0.16em",
+    },
+    shopRow: {
+        display: "flex",
+        gap: 10,
+        overflowX: "auto",
+        overflowY: "hidden",
+        paddingBottom: 6,
+        scrollbarWidth: "thin",
+    },
+    packRow: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 6,
+    },
+    packPill: {
+        padding: "4px 10px",
+        background: withAlpha(C.PANEL_EDGE, 0.9),
+        border: `1px solid ${C.INNER_BORDER}`,
+        borderRadius: 4,
+        fontSize: 11,
+        color: C.WHITE,
+    },
+    sentinel: {
+        flexShrink: 0,
+        width: 28,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: C.GREY,
+        fontSize: 14,
+    },
+    unknownTile: {
+        width: 71,
+        height: 95,
+        border: `1px dashed ${C.GREY}`,
+        borderRadius: 4,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 9,
+        color: C.GREY,
+        padding: 4,
+        textAlign: "center",
+    },
+    errorLine: {
+        fontSize: 10,
+        color: C.RED,
+    },
+    sideRail: {
+        position: "absolute",
+        top: "50%",
+        right: 6,
+        transform: "translateY(-50%)",
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        zIndex: 5,
+        pointerEvents: "auto",
+    },
+    sideRailDot: {
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        border: "none",
+        cursor: "pointer",
+        padding: 0,
+        transition: "transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease",
+    },
+    pickerButton: {
+        position: "absolute",
+        top: 12,
+        right: 12,
+        width: 32,
+        height: 32,
+        borderRadius: 4,
+        border: `1px solid ${withAlpha(C.WHITE, 0.2)}`,
+        background: withAlpha(C.DARK_GREY, 0.85),
+        color: C.WHITE,
+        fontSize: 16,
+        cursor: "pointer",
+        zIndex: 6,
+        fontFamily: "inherit",
+    },
+    pickerPanel: {
+        position: "absolute",
+        top: 50,
+        right: 12,
+        width: 220,
+        maxHeight: "70vh",
+        overflowY: "auto",
+        padding: 10,
+        background: withAlpha(C.DARK_GREY, 0.95),
+        border: `1px solid ${withAlpha(C.WHITE, 0.15)}`,
+        borderRadius: 6,
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        zIndex: 6,
+        backdropFilter: "blur(4px)",
+    },
+    pickerHeader: {
+        fontSize: 10,
+        color: C.GREY,
+        letterSpacing: "0.16em",
+        marginBottom: 4,
+    },
+    pickerChip: {
+        padding: "6px 10px",
+        border: "1px solid",
+        borderRadius: 4,
+        fontSize: 11,
+        fontFamily: "inherit",
+        cursor: "pointer",
+        textAlign: "left",
+        transition: "all 0.12s ease",
+    },
+};
+export { ANALYZER_STREAM_META } from "../hooks/analyzerStreamRegistry.js";

package/dist/components/JamlCodeEditor.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 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,10 +41,77 @@ const defineBalatroTheme = (monaco) => {
     });
 };
 export function JamlCodeEditor({ value, onChange, minHeight = 320, }) {
+    const editorRef = useRef(null);
+    const monacoRef = useRef(null);
+    // Suppress our onChange while we're applying a programmatic edit, so the
+    // streamed parent value doesn't loop back through onChange and bounce.
+    const suppressEmitRef = useRef(false);
+    // Capture initial value for the uncontrolled editor mount; subsequent
+    // updates flow through the useEffect below.
+    const initialValueRef = useRef(value);
+    // Track value across renders so we can apply only the streamed delta when
+    // the new value is a strict suffix-extension of what's already in the model.
+    const lastSyncedValueRef = useRef(value);
+    const handleMount = (editor, m) => {
+        editorRef.current = editor;
+        monacoRef.current = m;
+    };
+    useEffect(() => {
+        const editor = editorRef.current;
+        const m = monacoRef.current;
+        if (!editor || !m)
+            return;
+        const model = editor.getModel();
+        if (!model)
+            return;
+        const current = editor.getValue();
+        if (current === value) {
+            lastSyncedValueRef.current = value;
+            return;
+        }
+        suppressEmitRef.current = true;
+        try {
+            // Streaming-friendly path: when the new value just appends to what
+            // Monaco already has, push an insert at end-of-document. Monaco
+            // re-tokenizes only from the insertion point — no full-doc churn,
+            // no syntax-color strobe, no cursor reset.
+            if (value.length > current.length && value.startsWith(current)) {
+                const suffix = value.slice(current.length);
+                const lastLine = model.getLineCount();
+                const lastCol = model.getLineMaxColumn(lastLine);
+                model.applyEdits([
+                    {
+                        range: new m.Range(lastLine, lastCol, lastLine, lastCol),
+                        text: suffix,
+                        forceMoveMarkers: false,
+                    },
+                ]);
+            }
+            else {
+                // Real replacement (paste from outside, parent rewrite, undo, etc.).
+                editor.executeEdits("", [
+                    {
+                        range: model.getFullModelRange(),
+                        text: value,
+                        forceMoveMarkers: true,
+                    },
+                ]);
+                editor.pushUndoStop();
+            }
+        }
+        finally {
+            suppressEmitRef.current = false;
+            lastSyncedValueRef.current = value;
+        }
+    }, [value]);
     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: {
+      ` }), _jsx(Editor, { height: `${minHeight}px`, defaultLanguage: "yaml", defaultValue: initialValueRef.current, theme: "jaml-balatro-dark", onChange: (next) => {
+                    if (suppressEmitRef.current)
+                        return;
+                    onChange(next ?? "");
+                }, onMount: handleMount, beforeMount: defineBalatroTheme, options: {
                     minimap: { enabled: false },
                     scrollBeyondLastLine: false,
                     fontSize: 13,

package/dist/components/JamlIde.js

@@ -111,8 +111,10 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
     // doesn't flash the visual panel empty.
     const [lastParsedText, setLastParsedText] = useState("");
     const [lastParsedFilter, setLastParsedFilter] = useState(() => jamlTextToVisualFilter(jaml ?? defaultJaml ?? ""));
-    // Adjust-state-during-render: reparse when text changes (only if not controlled).
-    if (visualFilter === undefined && text !== lastParsedText) {
+    // Adjust-state-during-render: reparse when text changes (only if not
+    // controlled). Gated on `mode === "visual"` so we don't burn CPU parsing
+    // on every streamed token while the user is in the .jaml/map/results tab.
+    if (visualFilter === undefined && mode === "visual" && text !== lastParsedText) {
         try {
             const parsed = jamlTextToVisualFilter(text);
             setLastParsedText(text);

package/dist/components/JamlIdeToolbar.js

@@ -1,62 +1,22 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { JimboButton } from "../ui/panel.js";
+import { JimboTabs } from "../ui/jimboTabs.js";
 import { JimboColorOption } from "../ui/tokens.js";
-const TABS = [
-    { id: "visual", label: "Visual" },
-    { id: "code", label: ".jaml" },
-    { id: "map", label: "Map" },
-    { id: "results", label: "Results" },
-];
 export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className = "", onSearch, isSearching = false }) {
+    const tabs = [
+        { id: "visual", label: "Visual" },
+        { id: "code", label: ".jaml" },
+        { id: "map", label: "Map" },
+        { id: "results", label: resultCount > 0 ? `Results (${resultCount})` : "Results" },
+    ];
     return (_jsxs("div", { className: className, style: {
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
             gap: 8,
-            padding: "6px 10px",
+            padding: "10px 10px 6px",
             borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
             background: JimboColorOption.DARKEST,
-        }, children: [_jsx("div", { style: {
-                    display: "flex",
-                    alignItems: "stretch",
-                    gap: 0,
-                    background: `${JimboColorOption.DARK_GREY}cc`,
-                    borderRadius: 7,
-                    border: `1px solid ${JimboColorOption.PANEL_EDGE}`,
-                    padding: 2,
-                    overflow: "hidden",
-                }, children: TABS.map((tab) => {
-                    const isActive = mode === tab.id;
-                    return (_jsxs("button", { type: "button", onClick: () => onModeChange(tab.id), style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 5,
-                            padding: "3px 10px",
-                            border: "none",
-                            borderRadius: 5,
-                            cursor: "pointer",
-                            fontFamily: "m6x11plus, monospace",
-                            fontSize: 10,
-                            letterSpacing: 1,
-                            textTransform: "uppercase",
-                            lineHeight: 1.2,
-                            transition: "background 80ms, color 80ms, box-shadow 80ms",
-                            color: isActive ? JimboColorOption.DARKEST : JimboColorOption.GREY,
-                            background: isActive ? JimboColorOption.GOLD : "transparent",
-                            boxShadow: isActive ? `0 2px 0 #8a6a1e` : "none",
-                            textShadow: isActive ? "none" : "none",
-                            userSelect: "none",
-                            position: "relative",
-                            transform: isActive ? "translateY(0)" : "translateY(0)",
-                        }, children: [tab.label, tab.id === "results" && resultCount > 0 ? (_jsx("span", { style: {
-                                    borderRadius: 999,
-                                    background: isActive ? `${JimboColorOption.DARKEST}44` : `${JimboColorOption.GOLD}33`,
-                                    color: isActive ? JimboColorOption.DARKEST : JimboColorOption.GOLD_TEXT,
-                                    padding: "0px 5px",
-                                    fontSize: 9,
-                                    fontFamily: "monospace",
-                                    letterSpacing: 0,
-                                }, children: resultCount })) : null] }, tab.id));
-                }) }), onSearch ? (_jsx(JimboButton, { tone: isSearching ? "red" : "blue", size: "xs", onClick: onSearch, children: isSearching ? "Stop" : "Search" })) : null] }));
+        }, children: [_jsx(JimboTabs, { tabs: tabs, activeTab: mode, onTabChange: (id) => onModeChange(id) }), onSearch ? (_jsx(JimboButton, { tone: isSearching ? "red" : "blue", size: "xs", onClick: onSearch, children: isSearching ? "Stop" : "Search" })) : null] }));
 }

package/dist/hooks/analyzerStreamRegistry.d.ts

@@ -0,0 +1,35 @@
+import type { StreamItem } from "./useShopStream.js";
+import type { AnalyzerLive } from "./useAnalyzer.js";
+/**
+ * Registry of motely-wasm streams the fullscreen analyzer can surface as
+ * lanes. Each entry knows how to (a) open a stream against a live ctx +
+ * runState for a given ante, and (b) pull the next item.
+ *
+ * Streams that produce raw item *values* (jokers, tarots, planets,
+ * spectrals) are normalized through `motelyItemDisplayNameFromValue` so
+ * downstream rendering uses one shared resolver. Pack-contents streams
+ * return arrays in a single call; we flatten to per-card items keyed by
+ * pack-pull index so React keys stay stable across reloads.
+ */
+export type AnalyzerStreamKey = "shop" | "soulJoker" | "rareTagJoker" | "uncommonTagJoker" | "riffRaffJoker" | "buffoonJoker" | "judgementJoker" | "wraithJoker" | "shopJoker" | "shopTarot" | "shopPlanet" | "shopSpectral" | "purpleSealTarot";
+export interface AnalyzerStreamMeta {
+    key: AnalyzerStreamKey;
+    label: string;
+    /** Tone hint for the lane header. */
+    tone: "gold" | "purple" | "blue" | "spectral" | "default";
+    /** Whether this stream is on by default in the picker. */
+    defaultEnabled: boolean;
+}
+export declare const ANALYZER_STREAM_META: Record<AnalyzerStreamKey, AnalyzerStreamMeta>;
+export declare const DEFAULT_ENABLED_STREAMS: AnalyzerStreamKey[];
+interface StreamHandle {
+    initStream: () => void;
+    nextItem: () => StreamItem;
+}
+/**
+ * Build init/next callbacks for a (key, ante) pair against the live ctx.
+ * The component wraps these with useMotelyStream. Items are normalized to
+ * { id, name, value } so the same ShopItem renderer can show every lane.
+ */
+export declare function buildStreamHandle(live: AnalyzerLive, ante: number, key: AnalyzerStreamKey): StreamHandle | null;
+export {};

package/dist/hooks/analyzerStreamRegistry.js

@@ -0,0 +1,148 @@
+"use client";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { motelyItemDisplayNameFromValue } from "../motelyDisplay.js";
+export const ANALYZER_STREAM_META = {
+    shop: { key: "shop", label: "Shop", tone: "default", defaultEnabled: true },
+    shopJoker: { key: "shopJoker", label: "Shop Jokers", tone: "default", defaultEnabled: false },
+    soulJoker: { key: "soulJoker", label: "Soul (Legendary)", tone: "gold", defaultEnabled: true },
+    rareTagJoker: { key: "rareTagJoker", label: "Rare Tag Jokers", tone: "default", defaultEnabled: false },
+    uncommonTagJoker: { key: "uncommonTagJoker", label: "Uncommon Tag Jokers", tone: "default", defaultEnabled: false },
+    riffRaffJoker: { key: "riffRaffJoker", label: "Riff Raff", tone: "default", defaultEnabled: false },
+    buffoonJoker: { key: "buffoonJoker", label: "Buffoon Pack Jokers", tone: "default", defaultEnabled: false },
+    judgementJoker: { key: "judgementJoker", label: "Judgement Jokers", tone: "purple", defaultEnabled: false },
+    wraithJoker: { key: "wraithJoker", label: "Wraith Jokers", tone: "spectral", defaultEnabled: false },
+    shopTarot: { key: "shopTarot", label: "Shop Tarots", tone: "purple", defaultEnabled: false },
+    shopPlanet: { key: "shopPlanet", label: "Shop Planets", tone: "blue", defaultEnabled: false },
+    shopSpectral: { key: "shopSpectral", label: "Shop Spectrals", tone: "spectral", defaultEnabled: false },
+    purpleSealTarot: { key: "purpleSealTarot", label: "Purple Seal Tarots", tone: "purple", defaultEnabled: false },
+};
+export const DEFAULT_ENABLED_STREAMS = (Object.values(ANALYZER_STREAM_META)
+    .filter((m) => m.defaultEnabled)
+    .map((m) => m.key));
+/**
+ * Build init/next callbacks for a (key, ante) pair against the live ctx.
+ * The component wraps these with useMotelyStream. Items are normalized to
+ * { id, name, value } so the same ShopItem renderer can show every lane.
+ */
+export function buildStreamHandle(live, ante, key) {
+    const ctx = live.ctx;
+    const Motely = live.Motely;
+    const runState = live.runStates[ante];
+    let stream = null;
+    let cursor = 0;
+    const idBase = `${ante}-${key}`;
+    function nameFromValue(value) {
+        return motelyItemDisplayNameFromValue(value);
+    }
+    function joker(streamFactoryName, nextName) {
+        return {
+            initStream: () => {
+                stream = ctx[streamFactoryName](ante, Motely.MotelyJokerStreamFlags.Default);
+                cursor = 0;
+            },
+            nextItem: () => {
+                const r = ctx[nextName](stream);
+                const value = r.joker?.value ?? r.item?.value ?? 0;
+                const id = `${idBase}-${cursor++}`;
+                return { id, name: nameFromValue(value), value };
+            },
+        };
+    }
+    function fixedRarityJoker(streamFactoryName, nextName) {
+        return {
+            initStream: () => {
+                stream = ctx[streamFactoryName](ante, Motely.MotelyJokerFixedRarityStreamFlags.Default);
+                cursor = 0;
+            },
+            nextItem: () => {
+                const r = ctx[nextName](stream);
+                const value = r.joker?.value ?? 0;
+                const id = `${idBase}-${cursor++}`;
+                return { id, name: nameFromValue(value), value };
+            },
+        };
+    }
+    function tarot(streamFactoryName, nextName) {
+        return {
+            initStream: () => {
+                stream = ctx[streamFactoryName](ante);
+                cursor = 0;
+            },
+            nextItem: () => {
+                const r = ctx[nextName](stream);
+                const value = r.tarot?.value ?? r.item?.value ?? 0;
+                const id = `${idBase}-${cursor++}`;
+                return { id, name: nameFromValue(value), value };
+            },
+        };
+    }
+    function planet(streamFactoryName, nextName) {
+        return {
+            initStream: () => {
+                stream = ctx[streamFactoryName](ante);
+                cursor = 0;
+            },
+            nextItem: () => {
+                const r = ctx[nextName](stream);
+                const value = r.planet?.value ?? 0;
+                const id = `${idBase}-${cursor++}`;
+                return { id, name: nameFromValue(value), value };
+            },
+        };
+    }
+    function spectral(streamFactoryName, nextName) {
+        return {
+            initStream: () => {
+                stream = ctx[streamFactoryName](ante);
+                cursor = 0;
+            },
+            nextItem: () => {
+                const r = ctx[nextName](stream);
+                const value = r.spectral?.value ?? 0;
+                const id = `${idBase}-${cursor++}`;
+                return { id, name: nameFromValue(value), value };
+            },
+        };
+    }
+    switch (key) {
+        case "shop":
+            return {
+                initStream: () => {
+                    stream = ctx.createShopItemStream(ante, runState, Motely.MotelyShopStreamFlags.Default, Motely.MotelyJokerStreamFlags.Default);
+                    cursor = 0;
+                },
+                nextItem: () => {
+                    const r = ctx.getNextShopItem(stream);
+                    const value = r.item.value;
+                    const id = `${idBase}-${cursor++}`;
+                    return { id, name: nameFromValue(value), value };
+                },
+            };
+        case "shopJoker":
+            return joker("createShopJokerStream", "getNextShopJoker");
+        case "soulJoker":
+            return fixedRarityJoker("createSoulJokerStream", "getNextSoulJoker");
+        case "rareTagJoker":
+            return fixedRarityJoker("createRareTagJokerStream", "getNextRareTagJoker");
+        case "uncommonTagJoker":
+            return fixedRarityJoker("createUncommonTagJokerStream", "getNextUncommonTagJoker");
+        case "riffRaffJoker":
+            return fixedRarityJoker("createRiffRaffJokerStream", "getNextRiffRaffJoker");
+        case "buffoonJoker":
+            return joker("createBuffoonPackJokerStream", "getNextBuffoonPackJoker");
+        case "judgementJoker":
+            return joker("createJudgementJokerStream", "getNextJudgementJoker");
+        case "wraithJoker":
+            return joker("createWraithJokerStream", "getNextWraithJoker");
+        case "shopTarot":
+            return tarot("createShopTarotStream", "getNextShopTarot");
+        case "shopPlanet":
+            return planet("createShopPlanetStream", "getNextShopPlanet");
+        case "shopSpectral":
+            return spectral("createShopSpectralStream", "getNextShopSpectral");
+        case "purpleSealTarot":
+            return tarot("createPurpleSealTarotStream", "getNextPurpleSealTarot");
+        default:
+            return null;
+    }
+}

package/dist/hooks/useAnalyzer.d.ts

@@ -1,9 +1,31 @@
 import type { AnalyzerAnteView } from "../components/AnalyzerExplorer.js";
 export type AnalyzerStatus = "idle" | "running" | "done" | "error";
+export type MotelyJsRunState = {
+    voucherBitfield: number;
+    bossBitfield: number;
+};
+/**
+ * Snapshot of the live search context after `analyze()` resolves, exposed so
+ * higher-level components can open additional streams (shop chunks, soul-
+ * joker chunks, pack contents) on demand without re-walking the seed. The
+ * `runStates` map is keyed by ante and holds the runState AFTER the boss +
+ * voucher have been resolved for that ante — i.e. the correct input for
+ * `createShopItemStream(ante, runState, ...)`.
+ */
+export interface AnalyzerLive {
+    ctx: any;
+    Motely: any;
+    runStates: Record<number, MotelyJsRunState>;
+    desiredNames: ReadonlySet<string>;
+    seed: string;
+    deck: string;
+    stake: string;
+}
 export declare function useAnalyzer(motelyWasmUrl: string): {
     antes: AnalyzerAnteView[];
     status: AnalyzerStatus;
     error: string | null;
     analyze: (seed: string, deck: string, stake: string, jaml?: string) => Promise<void>;
     clearError: () => void;
+    live: AnalyzerLive | null;
 };

package/dist/hooks/useAnalyzer.js

@@ -7,8 +7,10 @@ export function useAnalyzer(motelyWasmUrl) {
     const [antes, setAntes] = useState([]);
     const [status, setStatus] = useState("idle");
     const [error, setError] = useState(null);
+    const [live, setLive] = useState(null);
     const analyze = useCallback(async (seed, deck, stake, jaml) => {
         setAntes([]);
+        setLive(null);
         setStatus("running");
         setError(null);
         try {
@@ -26,6 +28,7 @@ export function useAnalyzer(motelyWasmUrl) {
             const bossStream = ctx.createBossStream();
             let runState = { voucherBitfield: 0, bossBitfield: 0 };
             const results = [];
+            const runStates = {};
             for (let ante = 1; ante <= 8; ante++) {
                 const bossResult = ctx.getNextBossForAnte(bossStream, ante, runState);
                 const bossName = Motely.MotelyBossBlind[bossResult.boss] ?? `Unknown(${bossResult.boss})`;
@@ -33,6 +36,7 @@ export function useAnalyzer(motelyWasmUrl) {
                 const voucherResult = ctx.getAnteFirstVoucher(ante, runState);
                 const voucherName = Motely.MotelyVoucher[voucherResult.voucher] ?? `Unknown(${voucherResult.voucher})`;
                 runState = voucherResult.runState;
+                runStates[ante] = { ...runState };
                 const tagStream = ctx.createTagStream(ante);
                 const tag1 = ctx.getNextTag(tagStream);
                 const tag2 = ctx.getNextTag(tagStream);
@@ -61,6 +65,7 @@ export function useAnalyzer(motelyWasmUrl) {
                 });
             }
             setAntes(results);
+            setLive({ ctx, Motely, runStates, desiredNames, seed, deck, stake });
             setStatus("done");
         }
         catch (e) {
@@ -72,5 +77,5 @@ export function useAnalyzer(motelyWasmUrl) {
         setError(null);
         setStatus((s) => (s === "error" ? "idle" : s));
     }, []);
-    return { antes, status, error, analyze, clearError };
+    return { antes, status, error, analyze, clearError, live };
 }

package/dist/index.d.ts

@@ -3,6 +3,8 @@ 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 { JamlAnalyzerFullscreen, type JamlAnalyzerFullscreenProps, } from "./components/JamlAnalyzerFullscreen.js";
+export { ANALYZER_STREAM_META, DEFAULT_ENABLED_STREAMS, type AnalyzerStreamKey, type AnalyzerStreamMeta, } from "./hooks/analyzerStreamRegistry.js";
 export { JamlMapPreview, type JamlMapPreviewProps } from "./components/JamlMapPreview.js";
 export { JamlIde, type JamlIdeProps, type JamlIdeSearchResult, type JamlVisualFilter, type JamlVisualClause, type JamlZone, } from "./components/JamlIde.js";
 export { JamlIdeVisual, type JamlIdeVisualProps, } from "./components/JamlIdeVisual.js";
@@ -16,9 +18,10 @@ export { JimboTooltip, type JimboTooltipProps, type JimboTooltipMode, type Jimbo
 export { JamlIdeToolbar, type JamlIdeMode, type JamlIdeToolbarProps, } from "./components/JamlIdeToolbar.js";
 export { CardList, type CardListProps } from "./components/CardList.js";
 export { CardFan, type CardFanProps } from "./components/CardFan.js";
+export { RealPlayingCard, type CardSuit, type CardRank, type CardEnhancement, type CardSeal, type CardEdition, } from "./components/PlayingCard.js";
 export { DeckSprite, DECK_SPRITE_POS, STAKE_SPRITE_POS, type DeckSpriteProps, } from "./components/DeckSprite.js";
 export { MotelyVersionBadge, type MotelyVersionBadgeProps, type MotelyCapabilities, } from "./components/MotelyVersionBadge.js";
 export { extractVisualJamlItems, type JamlPreviewGroups, type JamlPreviewItem, type JamlPreviewSection, type JamlPreviewVisualType, } from "./utils/jamlMapPreview.js";
 export { useMotelyStream, type StreamItem, type StreamState } from "./hooks/useShopStream.js";
 export { useSearch, type SearchResult, type SearchStatus, type UseSearchState, } from "./hooks/useSearch.js";
-export { useAnalyzer, type AnalyzerStatus, } from "./hooks/useAnalyzer.js";
+export { useAnalyzer, type AnalyzerStatus, type AnalyzerLive, type MotelyJsRunState, } from "./hooks/useAnalyzer.js";

package/dist/index.js

@@ -4,6 +4,8 @@ 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 { JamlAnalyzerFullscreen, } from "./components/JamlAnalyzerFullscreen.js";
+export { ANALYZER_STREAM_META, DEFAULT_ENABLED_STREAMS, } from "./hooks/analyzerStreamRegistry.js";
 export { JamlMapPreview } from "./components/JamlMapPreview.js";
 export { JamlIde, } from "./components/JamlIde.js";
 export { JamlIdeVisual, } from "./components/JamlIdeVisual.js";
@@ -17,6 +19,7 @@ export { JimboTooltip, } from "./ui/jimboTooltip.js";
 export { JamlIdeToolbar, } from "./components/JamlIdeToolbar.js";
 export { CardList } from "./components/CardList.js";
 export { CardFan } from "./components/CardFan.js";
+export { RealPlayingCard, } from "./components/PlayingCard.js";
 export { DeckSprite, DECK_SPRITE_POS, STAKE_SPRITE_POS, } from "./components/DeckSprite.js";
 export { MotelyVersionBadge, } from "./components/MotelyVersionBadge.js";
 export { extractVisualJamlItems, } from "./utils/jamlMapPreview.js";

package/package.json

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