jaml-ui 0.16.0 → 0.17.1

package/DESIGN.md

@@ -124,7 +124,7 @@ components:
 
 Jimbo is the design system for Balatro seed finder tools (JAML-UI, WeeJoker, Seed Finder). It recreates the cozy, tactile, chunky feel of LocalThunk's Balatro — dark panels with silver borders, 3D-press buttons, pixel typography, juice animations. Everything feels like a physical object you can poke.
 
-The system is built **Mobile First**. The absolute minimum viewport width is **320px**. All components must be accessible and usable at 320px without breaking layouts or horizontal scrolling. No fat padding, no bloated margins — every pixel earns its place.
+The system is built **Mobile First**. The absolute minimum viewport width is **375px**. All components must be accessible and usable at 375px without breaking layouts or horizontal scrolling. No fat padding, no bloated margins — every pixel earns its place.
 
 ## Colors
 
@@ -133,12 +133,12 @@ All colors are eyedropped from Balatro's actual rendered shader output. Do NOT s
 - **Red (#ff4c40):** Primary action, mult scoring, should-clause hits. The "play" color.
 - **Blue (#0093ff):** Secondary action, chips scoring, must-clause gates. The "requirement" color.
 - **Green (#429f79):** Success, positive state, money.
-- **Orange (#ff9800):** Back/return actions, warning.
+- **Orange (#ff9800):** Back/return actions, warning, configuration, misc.
 - **Gold (#e4b643):** Seed text, premium highlights, active tab. The "treasure" color.
 - **Purple (#9e74ce):** Joker rarity, tarot cards.
 - **Dark Grey (#3a5055):** Panel backgrounds — the primary surface.
 - **Darkest (#1e2b2d):** Deepest background, inset areas.
-- **Grey (#708386):** Disabled text, labels, inactive elements.
+- **Grey (#708386):** Disabled text, labels.
 - **Border Silver (#b9c2d2):** Panel top/side borders — the "silver frame."
 - **Border South (#777e89):** Panel bottom border — creates the 3D depth illusion.
 - **Panel Edge (#1e2e32):** Thin outer edge on panels.
@@ -153,13 +153,13 @@ All text is uppercase with generous letter-spacing (0.04em-0.1em) for labels and
 
 ## Layout
 
-Target: Minimum 320px portrait width. Components must scale gracefully using relative units and flexible layouts. Avoid fixed widths that break at 320px. Vertical snap-scroll for ante pages. Horizontal swipe for seed navigation.
+Target: Minimum 375px portrait width. Components must scale gracefully using relative units and flexible layouts. Avoid fixed widths that break at 375px. Vertical snap-scroll for ante pages. Horizontal swipe for seed navigation.
 
 Panels use 2px solid borders with border-silver on top/sides and border-south on bottom, creating a subtle 3D card effect. Inner shadow: `inset 0 0 0 1px rgba(255,255,255,0.04)`. Outer shadow: `0 2px 0 #000`.
 
 ## Elevation & Depth
 
-Buttons have a colored "underside" via box-shadow (not blur). On press, translateY increases by 2-3px and the shadow collapses — the button physically sinks. On hover, translateY decreases by 2px (lifts) with a tiny brightness bump.
+Buttons have a colored "underside" via box-shadow (not blur). On press, translateY increases by 2-3px and the shadow collapses — the button physically sinks. On hover, apply a tiny brightness bump (no lift).
 
 Panels sit on a dark south-shadow (`0 3px 0 rgba(0,0,0,0.55)`). Translucent panels (for swirl-background contexts) use `rgba(15, 24, 26, 0.78)` with `backdrop-filter: blur(2px)`.
 
@@ -167,7 +167,7 @@ JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]`
 
 ## Components
 
-**Button:** Chunky 3D press. Colored underside via box-shadow. Hover lifts -2px + brightness. Press sinks +2-3px + shadow collapse. Variants: primary (red), secondary (blue), back (orange), ghost (transparent). Sizes via padding, not font-size. Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)`.
+**Button:** Chunky 3D press. Colored underside via box-shadow. Hover brightness bump. Press sinks +2-3px + shadow collapse. Variants: primary (red), secondary (blue), back (orange). Sizes via padding, not font-size. Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)`.
 
 **Panel:** Dark grey (#3a5055) background, 2px solid border (silver top/sides, south bottom), border-radius 6px. Inner highlight: `inset 0 0 0 1px rgba(255,255,255,0.04)`. Drop: `0 2px 0 #000`.
 
@@ -185,13 +185,11 @@ JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]`
 
 ## Do's and Don'ts
 
-- DO use m6x11plus for everything. No fallback display fonts.
-- DO eyedrop colors from the game. Never guess or approximate.
-- DO design for 320px portrait first. Desktop is an expanded view of the mobile baseline.
+- DO use m6x11plus for everything except code/monospace.
+- DO design for 375px portrait.
 - DO use translateY + box-shadow for button depth. Not CSS 3D transforms.
-- DO dim non-matching items (opacity 0.4 + grayscale 0.6). They stay visible for context.
 - DON'T use font-weight bold. m6x11plus is single-weight. Bold = muddy.
 - DON'T use fat padding or margins. Balatro UI is dense and cozy.
 - DON'T add horizontal scroll. Vertical snap-scroll + horizontal swipe only.
 - DON'T use rounded corners larger than 10px. Balatro is chunky, not bubbly.
-- DON'T use blur-based shadows for depth. Use solid colored box-shadows.
+- DON'T use blur-based shadows for depth. Use solid colored box-shadows 80% opaque.

package/dist/assets.d.ts

@@ -10,6 +10,7 @@ export declare const JAML_ASSET_FILES: {
     readonly stickers: "stickers.png";
     readonly tags: "tags.png";
     readonly stakes: "balatro-stake-chips.png";
+    readonly font: "fonts/m6x11plusplus.otf";
 };
 export type JamlAssetKey = keyof typeof JAML_ASSET_FILES;
 export type JamlAssetFile = (typeof JAML_ASSET_FILES)[JamlAssetKey];
@@ -17,3 +18,8 @@ export declare function setJamlAssetBaseUrl(baseUrl: string | null | undefined):
 export declare function clearJamlAssetBaseUrl(): void;
 export declare function resolveJamlAssetUrl(asset: JamlAssetKey | JamlAssetFile): string;
 export declare function getDefaultJamlAssetUrlMap(): Readonly<Record<JamlAssetKey, string>>;
+/**
+ * Returns the versioned Vercel Blob URL for motely-wasm's Bootsharp module.
+ * Pass the same pinned motely-wasm version the app installed/uploaded.
+ */
+export declare function getMotelyWasmUrl(version: string): string;

package/dist/assets.js

@@ -10,6 +10,7 @@ export const JAML_ASSET_FILES = {
     stickers: "stickers.png",
     tags: "tags.png",
     stakes: "balatro-stake-chips.png",
+    font: "fonts/m6x11plusplus.otf",
 };
 const assetKeyByFileName = Object.fromEntries(Object.entries(JAML_ASSET_FILES).map(([key, fileName]) => [fileName, key]));
 const defaultAssetUrls = {
@@ -24,6 +25,7 @@ const defaultAssetUrls = {
     stickers: new URL(`../assets/${JAML_ASSET_FILES.stickers}`, import.meta.url).href,
     tags: new URL(`../assets/${JAML_ASSET_FILES.tags}`, import.meta.url).href,
     stakes: new URL(`../assets/${JAML_ASSET_FILES.stakes}`, import.meta.url).href,
+    font: new URL(`../assets/${JAML_ASSET_FILES.font}`, import.meta.url).href,
 };
 let customAssetBaseUrl = null;
 function normalizeBaseUrl(baseUrl) {
@@ -66,3 +68,10 @@ export function resolveJamlAssetUrl(asset) {
 export function getDefaultJamlAssetUrlMap() {
     return defaultAssetUrls;
 }
+/**
+ * Returns the versioned Vercel Blob URL for motely-wasm's Bootsharp module.
+ * Pass the same pinned motely-wasm version the app installed/uploaded.
+ */
+export function getMotelyWasmUrl(version) {
+    return `https://cdn.seedfinder.app/motely-wasm/${version}/index.mjs`;
+}

package/dist/components/AnalyzerExplorer.d.ts

@@ -40,5 +40,8 @@ export interface AnalyzerExplorerProps {
     visibleAntes?: number;
     totalAntes?: number;
     className?: string;
+    jaml?: string;
+    tallyColumns?: number[][];
+    tallyLabels?: string[];
 }
-export declare function AnalyzerExplorer({ antes, highlights, visibleAntes, totalAntes, className, }: AnalyzerExplorerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnalyzerExplorer({ antes, highlights, visibleAntes, totalAntes, className, jaml, tallyColumns, tallyLabels, }: AnalyzerExplorerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AnalyzerExplorer.js

@@ -1,40 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
+import { useAnteTracker } from "../ui/hooks.js";
 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());
+import { JamlMapPreview } from "./JamlMapPreview.js";
+export function AnalyzerExplorer({ antes, highlights = [], visibleAntes, totalAntes, className = "", jaml, tallyColumns, tallyLabels, }) {
+    const { currentAnte, scrollRef, scrollToAnte, registerAnteRef } = useAnteTracker(antes, {
+        threshold: [0.45, 0.72, 0.9],
+    });
     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) {
@@ -47,18 +21,12 @@ export function AnalyzerExplorer({ antes, highlights = [], visibleAntes, totalAn
             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) => {
+    return (_jsxs("div", { className: className, style: styles.root, children: [jaml ? (_jsxs("section", { style: styles.jamlSection, children: [_jsx("div", { style: styles.highlightHeader, children: _jsx("span", { style: styles.highlightTitle, children: "JAML Map" }) }), _jsx(JamlMapPreview, { jaml: jaml, tallyColumns: tallyColumns?.[0], tallyLabels: tallyLabels, compact: true })] })) : null, 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) {
@@ -74,14 +42,7 @@ export function AnalyzerExplorer({ antes, highlights = [], visibleAntes, totalAn
                         }, 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))) })] }));
+                        }, children: "\u25BC" })] }), _jsx("div", { ref: scrollRef, style: styles.scrollRegion, children: antes.map((ante) => (_jsx("div", { "data-ante": ante.ante, ref: (element) => registerAnteRef(ante.ante, element), 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] }));
@@ -147,6 +108,11 @@ const styles = {
         borderBottom: "1px solid #1a1a34",
         background: "#0f0f22",
     },
+    jamlSection: {
+        padding: "6px 8px",
+        borderBottom: "1px solid #1a1a34",
+        background: "#0f0f22",
+    },
     highlightHeader: {
         display: "flex",
         alignItems: "center",

package/dist/components/GameCard.js

@@ -3,7 +3,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Layer } from "../render/Layer.js";
 import { JamlCardRenderer } from "../render/CanvasRenderer.js";
 import { JOKERS, JOKER_FACES, TAROTS_AND_PLANETS, CONSUMABLE_FACES, TAGS, VOUCHERS, BOSSES, EDITION_MAP, SPRITE_SHEETS, STICKER_MAP, RANK_MAP, SUIT_MAP, ENHANCER_MAP, SEAL_MAP, } from "../sprites/spriteData.js";
-import { BalatroItemCategory, isPackedItemValid, packedItemCategory } from "../decode/packedBalatroItem.js";
 function normalizeCardRank(raw) {
     const value = raw.trim().toUpperCase();
     if (value === "A" || value === "ACE")
@@ -106,21 +105,23 @@ function stripModifiers(name) {
     return { baseName: remaining, edition, isEternal, isPerishable, isRental };
 }
 function resolvePackedAnalyzerItem(item, scale) {
-    if (typeof item.value !== "number" || !Number.isFinite(item.value) || !isPackedItemValid(item.value)) {
+    if (typeof item.value !== "number" || !Number.isFinite(item.value)) {
         return null;
     }
     const displayName = String(item.name || "").trim();
     const { baseName, edition, isEternal, isPerishable, isRental } = stripModifiers(displayName);
-    const category = packedItemCategory(item.value);
-    if (category === BalatroItemCategory.Joker) {
+    // Use motely-wasm enum to determine category — no hand-rolled bitmasks
+    const itemType = item.value & 0xffff;
+    const catNibble = (itemType >> 12) & 0xf;
+    if (catNibble === 5 /* Joker */) {
         const jokerName = JOKERS.some((joker) => joker.name === baseName) ? baseName : displayName;
         if (JOKERS.some((joker) => joker.name === jokerName)) {
             return { kind: "joker", type: "joker", card: { name: jokerName, edition, isEternal, isPerishable, isRental, scale } };
         }
     }
-    if (category === BalatroItemCategory.Tarot ||
-        category === BalatroItemCategory.Planet ||
-        category === BalatroItemCategory.Spectral) {
+    if (catNibble === 3 /* Tarot */ ||
+        catNibble === 4 /* Planet */ ||
+        catNibble === 2 /* Spectral */) {
         const consumableName = TAROTS_AND_PLANETS.some((consumable) => consumable.name === baseName) ? baseName : displayName;
         if (TAROTS_AND_PLANETS.some((consumable) => consumable.name === consumableName)) {
             return { kind: "consumable", type: "consumable", card: { name: consumableName, edition, scale } };

package/dist/components/JamlAestheticSelector.d.ts

@@ -6,4 +6,8 @@ export interface JamlAestheticSelectorProps {
     className?: string;
     style?: React.CSSProperties;
 }
+/**
+ * Pill-toggle selector for seed aesthetic filters.
+ * All styling via jimbo.css `.j-aesthetic-selector` / `.j-aesthetic-pill` — zero inline styles.
+ */
 export declare function JamlAestheticSelector({ value, onChange, className, style }: JamlAestheticSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlAestheticSelector.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboColorOption } from "../ui/tokens.js";
 import { JimboText } from "../ui/jimboText.js";
 const AESTHETICS = [
     { id: "Palindrome", value: 0, label: "Palindrome", desc: "Seeds that read the same forwards and backwards" },
@@ -10,25 +9,13 @@ const AESTHETICS = [
     { id: "Funny", value: 4, label: "Funny", desc: "Seeds that spell funny words" },
     { id: "Balatro", value: 5, label: "Balatro", desc: "Seeds referencing the game itself" },
 ];
+/**
+ * Pill-toggle selector for seed aesthetic filters.
+ * All styling via jimbo.css `.j-aesthetic-selector` / `.j-aesthetic-pill` — zero inline styles.
+ */
 export function JamlAestheticSelector({ value, onChange, className, style }) {
-    return (_jsxs("div", { className: className, style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 4,
-            ...style,
-        }, children: [_jsx(JimboText, { size: "xs", tone: "grey", children: "Seed Aesthetics" }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: AESTHETICS.map((a) => {
+    return (_jsxs("div", { className: `j-aesthetic-selector ${className ?? ""}`, style: style, children: [_jsx(JimboText, { size: "xs", tone: "grey", children: "Seed Aesthetics" }), _jsx("div", { className: "j-aesthetic-selector__list", children: AESTHETICS.map((a) => {
                     const isActive = value === a.id;
-                    return (_jsx("button", { type: "button", onClick: () => onChange(isActive ? null : a.id, a.value), title: a.desc, style: {
-                            padding: "4px 10px",
-                            borderRadius: 6,
-                            border: `2px solid ${isActive ? JimboColorOption.GOLD : JimboColorOption.PANEL_EDGE}`,
-                            background: isActive ? `${JimboColorOption.GOLD}22` : JimboColorOption.DARKEST,
-                            color: isActive ? JimboColorOption.GOLD_TEXT : JimboColorOption.GREY,
-                            cursor: "pointer",
-                            fontSize: 11,
-                            fontFamily: "m6x11plus, monospace",
-                            letterSpacing: 0.5,
-                            transition: "border-color 100ms, background 100ms",
-                        }, children: a.label }, a.id));
+                    return (_jsx("button", { type: "button", className: "j-aesthetic-pill", "data-active": isActive, onClick: () => onChange(isActive ? null : a.id, a.value), title: a.desc, children: a.label }, a.id));
                 }) })] }));
 }

package/dist/components/JamlAnalyzerFullscreen.d.ts

@@ -6,6 +6,12 @@ export interface JamlAnalyzerFullscreenProps {
     antes: AnalyzerAnteView[];
     /** Live ctx from useAnalyzer.live; null disables additional stream lanes. */
     live: AnalyzerLive | null;
+    /** JAML string for visual breakdown. */
+    jaml?: string;
+    /** Tally column data for JAML map highlighting. */
+    tallyColumns?: number[];
+    /** Tally labels mapping to columns. */
+    tallyLabels?: string[];
     /** 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. */
@@ -16,6 +22,6 @@ export interface JamlAnalyzerFullscreenProps {
     chunkSize?: number;
     className?: string;
 }
-export declare function JamlAnalyzerFullscreen({ antes, live, enabledStreams, onEnabledStreamsChange, hidePicker, chunkSize, className, }: JamlAnalyzerFullscreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlAnalyzerFullscreen({ antes, live, jaml, tallyColumns, tallyLabels, 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

@@ -1,8 +1,11 @@
 "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 { useCallback, useMemo, useRef, useState } from "react";
 import { JamlBoss, JamlGameCard, JamlTag, JamlVoucher, resolveAnalyzerShopItem } from "./GameCard.js";
 import { useMotelyStream } from "../hooks/useShopStream.js";
+import { useInfiniteScroll } from "../hooks/useIntersectionObserver.js";
+import { useAnteTracker } from "../ui/hooks.js";
+import { JimboText } from "../ui/jimboText.js";
 import { ANALYZER_STREAM_META, DEFAULT_ENABLED_STREAMS, buildStreamHandle, } from "../hooks/analyzerStreamRegistry.js";
 import { JimboColorOption, withAlpha } from "../ui/tokens.js";
 const C = JimboColorOption;
@@ -13,43 +16,17 @@ const TONE_COLORS = {
     spectral: C.SPECTRAL_BUTTON,
     default: C.GOLD_TEXT,
 };
-export function JamlAnalyzerFullscreen({ antes, live, enabledStreams, onEnabledStreamsChange, hidePicker = false, chunkSize = 12, className = "", }) {
+import { JamlMapPreview } from "./JamlMapPreview.js";
+export function JamlAnalyzerFullscreen({ antes, live, jaml, tallyColumns, tallyLabels, 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 { currentAnte, scrollRef, scrollToAnte, registerAnteRef } = useAnteTracker(antes);
     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) }))] }));
+    return (_jsxs("div", { className: className, style: styles.root, children: [_jsxs("div", { ref: scrollRef, style: styles.scroller, children: [jaml && (_jsxs("section", { style: { ...styles.section, scrollSnapAlign: "start", justifyContent: 'center' }, children: [_jsxs("div", { style: { marginBottom: 20 }, children: [_jsx("div", { style: styles.anteLabel, children: "JAML" }), _jsx("div", { style: styles.anteNumber, children: "MAP" })] }), _jsx(JamlMapPreview, { jaml: jaml, tallyColumns: tallyColumns, tallyLabels: tallyLabels }), _jsx("div", { style: { marginTop: 24, textAlign: 'center', opacity: 0.6 }, children: _jsx(JimboText, { size: "xs", tone: "grey", children: "Scroll down to explore seed details" }) })] })), antes.map((ante) => (_jsx(AnteSection, { ante: ante, live: live, enabledStreams: effectiveEnabled, chunkSize: chunkSize, registerRef: (el) => registerAnteRef(ante.ante, el) }, 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) => {
@@ -78,24 +55,18 @@ function BlindCell({ label, tag }) {
     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)
+    const throttlePull = useCallback(() => {
+        const now = Date.now();
+        if (now - lastTriggerRef.current < 200)
             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]);
+        lastTriggerRef.current = now;
+        onPullMore();
+    }, [onPullMore]);
+    const sentinelRef = useInfiniteScroll(throttlePull, {
+        threshold: 0.1,
+        rootMargin: "0px 200px 0px 0px",
+    }, ready && !loadingMore);
     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 }) {

package/dist/components/JamlIde.js

@@ -17,7 +17,7 @@ function TallyBar({ value, max }) {
                 transition: "width 200ms ease",
             } }) }));
 }
-function ResultsView({ results }) {
+function ResultsView({ results, jaml }) {
     const [expanded, setExpanded] = useState(null);
     if (results.length === 0) {
         return (_jsx("div", { style: {
@@ -30,11 +30,10 @@ function ResultsView({ results }) {
                 textAlign: "center",
             }, children: "No results yet. Run a search to find seeds." }));
     }
-    const labels = results[0]?.tallyLabels ?? [];
     const maxScore = Math.max(...results.map((r) => r.score ?? 0));
     return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: results.map((result) => {
             const isOpen = expanded === result.seed;
-            const hasTally = result.tallyColumns && result.tallyColumns.length > 0 && labels.length > 0;
+            const hasTally = result.tallyColumns && result.tallyColumns.length > 0;
             return (_jsxs("div", { style: {
                     borderRadius: 10,
                     border: `1px solid ${isOpen ? JimboColorOption.GOLD + "55" : JimboColorOption.PANEL_EDGE}`,
@@ -64,29 +63,18 @@ function ResultsView({ results }) {
                                             color: result.score > 0 ? JimboColorOption.GREEN_TEXT : JimboColorOption.GREY,
                                             minWidth: 36,
                                             textAlign: "right",
-                                        }, children: result.score })] })) : null, hasTally ? (_jsx("span", { style: { fontSize: 11, color: JimboColorOption.GREY, marginLeft: 2 }, children: isOpen ? "▲" : "▼" })) : null] }), isOpen && hasTally ? (_jsx("div", { style: {
+                                        }, children: result.score })] })) : null, hasTally ? (_jsx("span", { style: { fontSize: 11, color: JimboColorOption.GREY, marginLeft: 2 }, children: isOpen ? "▲" : "▼" })) : null] }), isOpen && hasTally ? (_jsxs("div", { style: {
                             borderTop: `1px solid ${JimboColorOption.PANEL_EDGE}`,
-                            padding: "8px 12px 10px",
+                            padding: "4px",
                             display: "flex",
                             flexDirection: "column",
-                            gap: 5,
-                        }, children: labels.map((label, i) => {
-                            const val = result.tallyColumns[i] ?? 0;
-                            const maxVal = Math.max(...results.map((r) => r.tallyColumns?.[i] ?? 0));
-                            return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: {
-                                            fontSize: 11,
-                                            color: val > 0 ? JimboColorOption.WHITE : JimboColorOption.GREY,
-                                            minWidth: 140,
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                            whiteSpace: "nowrap",
-                                        }, children: label }), _jsx(TallyBar, { value: val, max: maxVal }), _jsx("span", { style: {
-                                            fontSize: 11,
-                                            color: val > 0 ? JimboColorOption.GREEN_TEXT : JimboColorOption.DARK_GREY,
-                                            minWidth: 24,
-                                            textAlign: "right",
-                                        }, children: val })] }, label));
-                        }) })) : null] }, result.seed));
+                            gap: 8,
+                        }, children: [_jsx(JamlMapPreview, { jaml: jaml, tallyColumns: result.tallyColumns, tallyLabels: result.tallyLabels }), _jsxs("div", { style: { padding: "4px 8px 8px", display: "flex", flexDirection: "column", gap: 5 }, children: [_jsx("span", { style: { fontSize: 8, color: JimboColorOption.GREY, letterSpacing: "0.08em", textTransform: "uppercase" }, children: "RAW TALLY DATA" }), (result.tallyLabels ?? []).map((label, i) => {
+                                        const val = result.tallyColumns[i] ?? 0;
+                                        if (val === 0)
+                                            return null;
+                                        return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: { fontSize: 10, color: JimboColorOption.WHITE, flex: 1 }, children: label }), _jsx("span", { style: { fontSize: 10, color: JimboColorOption.GREEN_TEXT }, children: val })] }, label));
+                                    })] })] })) : null] }, result.seed));
         }) }));
 }
 export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", searchResults = [], className = "", style, title = "JAML IDE", actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, visualFilter, onVisualFilterChange, }) {
@@ -159,5 +147,5 @@ export function JamlIde({ jaml, defaultJaml, onChange, defaultMode = "code", sea
                     padding: "10px 14px",
                     borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
                     background: JimboColorOption.TEAL_GREY,
-                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: "normal", fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: "Jimbo's Ante Markup Language" })] }), 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", background: JimboColorOption.DARKEST }, children: [mode === "visual" ? (_jsx(JamlIdeVisual, { filter: activeFilter, onChange: handleVisualFilterChange })) : null, mode === "code" ? (_jsx(JamlCodeEditor, { value: text, onChange: handleTextChange, placeholder: codePlaceholder })) : null, mode === "map" ? _jsx(JamlMapPreview, { jaml: text }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results }) })) : null] })] }));
+                }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: "normal", fontFamily: "m6x11plus, monospace", color: JimboColorOption.GOLD_TEXT }, children: title }), _jsx("div", { style: { fontSize: 11, color: JimboColorOption.GREY }, children: "Jimbo's Ante Markup Language" })] }), 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", background: JimboColorOption.DARKEST }, children: [mode === "visual" ? (_jsx(JamlIdeVisual, { filter: activeFilter, onChange: handleVisualFilterChange })) : null, mode === "code" ? (_jsx(JamlCodeEditor, { value: text, onChange: handleTextChange, placeholder: codePlaceholder })) : null, mode === "map" ? _jsx(JamlMapPreview, { jaml: text }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results, jaml: text }) })) : null] })] }));
 }

package/dist/components/JamlIdeVisual.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
+import { useJamlIdeDrag } from "../ui/hooks.js";
 import { JimboColorOption } from "../ui/tokens.js";
 import { JimboSprite } from "../ui/sprites.js";
 const C = JimboColorOption;
@@ -192,65 +193,11 @@ function TopMatter({ filter, onChange, }) {
                 } })] }));
 }
 export function JamlIdeVisual({ filter, onChange, onEditClause, onAddClause }) {
-    const [drag, setDrag] = useState(null);
-    const [hoverZone, setHoverZone] = useState(null);
     const rootRef = useRef(null);
+    const { drag, hoverZone, onDragStart } = useJamlIdeDrag(filter, onChange, rootRef);
     const removeClause = (zone, id) => {
         onChange({ ...filter, [zone]: filter[zone].filter((c) => c.id !== id) });
     };
-    const onDragStart = (e, clause, fromZone) => {
-        // Don't preventDefault; we want clicks to still fire if there's no actual drag.
-        const t = "touches" in e ? e.touches[0] : e;
-        const rect = e.currentTarget.getBoundingClientRect();
-        setDrag({
-            clause,
-            fromZone,
-            x: t.clientX,
-            y: t.clientY,
-            offX: t.clientX - rect.left,
-            offY: t.clientY - rect.top,
-        });
-    };
-    useEffect(() => {
-        if (!drag)
-            return;
-        const move = (e) => {
-            const t = "touches" in e ? e.touches[0] : e;
-            setDrag((d) => d && { ...d, x: t.clientX, y: t.clientY });
-            const rails = rootRef.current?.querySelectorAll("[data-zone]") ?? [];
-            let found = null;
-            for (const r of rails) {
-                const rc = r.getBoundingClientRect();
-                if (t.clientX >= rc.left && t.clientX <= rc.right && t.clientY >= rc.top && t.clientY <= rc.bottom) {
-                    found = r.getAttribute("data-zone");
-                    break;
-                }
-            }
-            setHoverZone(found);
-        };
-        const up = () => {
-            if (hoverZone && hoverZone !== drag.fromZone) {
-                const to = hoverZone;
-                onChange({
-                    ...filter,
-                    [drag.fromZone]: filter[drag.fromZone].filter((c) => c.id !== drag.clause.id),
-                    [to]: [...filter[to], { ...drag.clause }],
-                });
-            }
-            setDrag(null);
-            setHoverZone(null);
-        };
-        window.addEventListener("mousemove", move);
-        window.addEventListener("mouseup", up);
-        window.addEventListener("touchmove", move, { passive: false });
-        window.addEventListener("touchend", up);
-        return () => {
-            window.removeEventListener("mousemove", move);
-            window.removeEventListener("mouseup", up);
-            window.removeEventListener("touchmove", move);
-            window.removeEventListener("touchend", up);
-        };
-    }, [drag, hoverZone, filter, onChange]);
     return (_jsxs("div", { ref: rootRef, style: {
             display: "flex",
             flexDirection: "column",

package/dist/components/JamlMapPreview.d.ts

@@ -1,6 +1,11 @@
 export interface JamlMapPreviewProps {
+    /** The raw JAML string to parse and visualize. */
     jaml: string;
     className?: string;
     emptyMessage?: string;
+    tallyColumns?: number[];
+    tallyLabels?: string[];
+    /** Reduces padding and sizes for sidebar/explorer usage. */
+    compact?: boolean;
 }
-export declare function JamlMapPreview({ jaml, className, emptyMessage, }: JamlMapPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlMapPreview({ jaml, className, emptyMessage, tallyColumns, tallyLabels, compact, }: JamlMapPreviewProps): import("react/jsx-runtime").JSX.Element;