jaml-ui 0.21.2 → 0.21.4

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 **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.
+The system is built **Mobile First** for the **iPhone SE viewport: 375×667px**. This is a HARD constraint — not a minimum, it is THE target. All app screens must fit within 375×667 with **NO SCROLLING**. Content must be designed to fit, not overflow. No fat padding, no bloated margins — every pixel earns its place. If content doesn't fit, redesign it to be more compact or split it into a separate view.
 
 ## Colors
 
@@ -155,12 +155,40 @@ Contrast is critical. NEVER make grey text on top of a grey background. If using
 
 ## Layout
 
-Target: Minimum 375px portrait width. Components must scale gracefully using relative units and flexible layouts. Avoid fixed widths that break at 375px. 
+Hard target: **375×667px (iPhone SE portrait)**. No scrolling on app-level screens. Components must fit within the viewport. Snap-scrolling is ONLY allowed for internal content areas that are explicitly paginated (e.g., ante pages within a fullscreen analyzer). Top-level app views must never scroll.
 
-Vertical snap-scroll for ante pages using magnetic scroll-snapping (`scroll-snap-type: y mandatory`, `scroll-snap-align: start`). Horizontal swipe for seed navigation. NO visible scrollbars globally — use `::-webkit-scrollbar { display: none; }` and `-ms-overflow-style: none`.
+**Thumb Zone Rule:** Back buttons, navigation buttons, and primary actions ALWAYS go at the **bottom** of the screen. Users hold their phone with one hand and tap with their thumb — bottom-positioned buttons are always in reach. NEVER put back/nav buttons at the top of a mobile screen. Back buttons are ALWAYS orange and labeled "Back".
+
+**Button Consistency:** All footer buttons use `lg` size across every screen. No mixing sizes in footers.
+
+Horizontal swipe for seed navigation. NO visible scrollbars globally — use `::-webkit-scrollbar { display: none; }` and `-ms-overflow-style: none`.
 
 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`.
 
+### Responsive Breakpoints (Container Queries)
+
+The j-app shell uses CSS **container queries** (not media queries) because it may live inside a mobile browser, a Claude MCP artifact, or a centered desktop preview. The container determines the layout, not the viewport.
+
+| Name | Container Width | Height | Scroll | Usage |
+|---|---|---|---|---|
+| `compact` | ≤ 400px | Fixed 667px | Never | iPhone SE. Default. |
+| `cozy` | 401–750px | Flexible | Vertical OK | MCP inline artifacts, wider phones. |
+| `wide` | 751px+ | Flexible | Vertical OK | Tablet/desktop (future). |
+
+Default is `compact` (375×667 locked). Add `<JimboApp fluid>` or `.j-app--fluid` to unlock for MCP/desktop contexts. This lets the container stretch to fill its parent (up to 750px) and activates `@container jimbo` queries in CSS.
+
+**What changes compact → cozy:**
+- Height constraint lifts — content determines height
+- Vertical scroll becomes OK (host manages scroll)
+- Padding bumps from `--j-space-lg` to `--j-space-xl`
+- Stat grid values bump to 20px
+- Info card titles bump to 14px
+- Section header tags bump to 12px
+- Buttons STAY `lg` — thumb zone rule still applies
+- Footer STAYS bottom-anchored
+
+**What does NOT change:** Colors, fonts, components, spacing tokens, button behavior, animation. The design language is identical — only density shifts.
+
 ## 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, apply a tiny brightness bump (no lift).
@@ -169,9 +197,9 @@ Panels sit on a dark south-shadow (`0 3px 0 rgba(0,0,0,0.55)`). Translucent pane
 
 JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]` with a 1.6s pulse animation. Must = blue glow, should = gold/green glow.
 
-## Components
+**Button:** Chunky 3D press. DO NOT ADD A COLORED EDGE/BORDER. Buttons rely entirely on a solid `box-shadow` to create the colored "underside" depth. Hover brightness bump. Press sinks +2-3px and the box-shadow collapses to 0. Variants: primary (red), secondary (blue), back (orange), default (grey). NO GOLD BUTTONS. 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)`.
+**Badge (JimboBadge):** Badges indicate status and DO NOT CLICK. They are strictly flat. They have a colored background and flat borders, but NO 3D BOX-SHADOW and NO PRESS ANIMATIONS. Variants: dark, blue, red, green, orange, purple, grey. NO GOLD BADGES.
 
 **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`.
 
@@ -194,8 +222,9 @@ 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 except code/monospace.
-- DO design for 375px portrait.
+- DO design for 375×667px (iPhone SE). Everything must fit — no scrolling.
 - DO use translateY + box-shadow for button depth. Not CSS 3D transforms.
+- DO put back buttons and nav actions at the **bottom** of the screen (thumb zone).
 - DON'T use font-weight bold or heavy. m6x11plus is single-weight.
 - DON'T use ALL CAPS. It is considered an embellishment and ruins the aesthetic.
 - DON'T put grey text on top of a grey background.
@@ -203,4 +232,5 @@ JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]`
 - DON'T add visible scrollbars. Vertical magnetic 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 80% opaque.
+- DON'T put back/nav buttons at the top of a screen. They go at the BOTTOM.
 - DON'T use redundant JS wrappers for `motely-wasm`. Import globally and `motely.boot()` once. Use `?worker&inline` for search workers rather than blob strings, and do not prop-drill `motelyWasmUrl`.

package/dist/components/JamlAnalyzerFullscreen.d.ts

@@ -25,6 +25,6 @@ export interface JamlAnalyzerFullscreenProps {
     /** Custom top page to render as Slide 0 */
     topPage?: React.ReactNode;
 }
-export declare function JamlAnalyzerFullscreen({ antes, live, jaml, tallyColumns, tallyLabels, enabledStreams, onEnabledStreamsChange, hidePicker, chunkSize, className, topPage, }: JamlAnalyzerFullscreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlAnalyzerFullscreen({ antes, live, jaml, tallyColumns, tallyLabels, enabledStreams, chunkSize, className, topPage, }: 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,6 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef } from "react";
 import { JamlBoss, JamlGameCard, JamlTag, JamlVoucher, resolveAnalyzerShopItem } from "./GameCard.js";
 import { useMotelyStream } from "../hooks/useShopStream.js";
 import { useInfiniteScroll } from "../hooks/useIntersectionObserver.js";
@@ -17,16 +17,10 @@ const TONE_COLORS = {
     default: C.GOLD_TEXT,
 };
 import { JamlMapPreview } from "./JamlMapPreview.js";
-export function JamlAnalyzerFullscreen({ antes, live, jaml, tallyColumns, tallyLabels, enabledStreams, onEnabledStreamsChange, hidePicker = false, chunkSize = 12, className = "", topPage, }) {
-    const [internalEnabled, setInternalEnabled] = useState(enabledStreams ?? DEFAULT_ENABLED_STREAMS);
-    const effectiveEnabled = enabledStreams ?? internalEnabled;
-    const setEnabled = useCallback((next) => {
-        setInternalEnabled(next);
-        onEnabledStreamsChange?.(next);
-    }, [onEnabledStreamsChange]);
+export function JamlAnalyzerFullscreen({ antes, live, jaml, tallyColumns, tallyLabels, enabledStreams, chunkSize = 12, className = "", topPage, }) {
+    const effectiveEnabled = enabledStreams ?? DEFAULT_ENABLED_STREAMS;
     const { currentAnte, scrollRef, scrollToAnte, registerAnteRef } = useAnteTracker(antes);
-    const [pickerOpen, setPickerOpen] = useState(false);
-    return (_jsxs("div", { className: className, style: styles.root, children: [_jsxs("div", { ref: scrollRef, style: styles.scroller, children: [topPage ? topPage : 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) }))] }));
+    return (_jsxs("div", { className: className, style: styles.root, children: [_jsxs("div", { ref: scrollRef, style: styles.scroller, children: [topPage ? topPage : 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 })] }));
 }
 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) => {
@@ -99,28 +93,6 @@ function SideRail({ antes, currentAnte, onJump }) {
                 } }, 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",
@@ -287,53 +259,5 @@ const styles = {
         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/JamlCurator.js

@@ -59,5 +59,5 @@ export function JamlCurator({}) {
                     padding: "16px 12px 24px",
                     boxSizing: "border-box",
                     borderBottom: `2px solid ${C.GOLD}`,
-                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(JimboText, { size: "lg", tone: "gold", children: "JAML Curator" }), _jsx(JimboButton, { tone: isSearching ? "red" : "green", size: "sm", onClick: handleSearch, children: isSearching ? "STOP" : "SEARCH" })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto' }, className: "hide-scrollbar", children: _jsx(JamlMapEditor, { onChange: handleMapChange }) }), _jsx("div", { style: { flexShrink: 0 }, children: _jsx(JamlSpeedometer, { status: search.status, seedsPerSecond: search.seedsPerSecond, totalSearched: search.totalSearched, matchingSeeds: search.matchingSeeds }) }), _jsx("div", { style: { flexShrink: 0 }, children: _jsx(JimboPanel, { children: search.results.length === 0 ? (_jsx(JimboText, { size: "sm", tone: "grey", className: "j-text-center", children: isSearching ? "Searching..." : "No results yet." })) : (_jsxs("div", { className: "j-flex-col j-gap-sm", children: [_jsxs("div", { className: "j-flex j-items-center j-justify-between", children: [_jsx(JimboText, { size: "xs", tone: "grey", children: "SEED MATCHES" }), _jsxs(JimboText, { size: "xs", tone: "gold", children: [search.matchingSeeds, " FOUND"] })] }), _jsx(JimboFlankNav, { canPrev: resultIndex > 0, canNext: resultIndex < search.results.length - 1, onPrev: () => setResultIndex(i => Math.max(0, i - 1)), onNext: () => setResultIndex(i => Math.min(search.results.length - 1, i + 1)), children: _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "lg", tone: "gold", style: { letterSpacing: 2 }, children: currentSeed }), _jsx(JimboButton, { tone: "grey", size: "xs", children: "Copy Seed" })] }) }), _jsx(JimboText, { size: "micro", tone: "grey", className: "j-text-center", style: { opacity: 0.7, marginTop: 8 }, children: "\u25BC SWIPE DOWN FOR ANTES \u25BC" })] })) }) })] }) }) }));
+                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(JimboText, { size: "lg", tone: "gold", children: "JAML Curator" }), _jsx(JimboButton, { tone: isSearching ? "red" : "green", size: "sm", onClick: handleSearch, children: isSearching ? "STOP" : "SEARCH" })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto' }, className: "hide-scrollbar", children: _jsx(JamlMapEditor, { onChange: handleMapChange }) }), _jsx("div", { style: { flexShrink: 0 }, children: _jsx(JamlSpeedometer, { status: search.status, seedsPerSecond: search.seedsPerSecond, totalSearched: search.totalSearched, matchingSeeds: search.matchingSeeds }) }), _jsx("div", { style: { flexShrink: 0 }, children: _jsx(JimboPanel, { children: search.results.length === 0 ? (_jsx(JimboText, { size: "sm", tone: "grey", className: "j-text-center", children: isSearching ? "Searching..." : "No results yet." })) : (_jsxs("div", { className: "j-flex-col j-gap-sm", children: [_jsxs("div", { className: "j-flex j-items-center j-justify-between", children: [_jsx(JimboText, { size: "xs", tone: "grey", children: "SEED MATCHES" }), _jsxs(JimboText, { size: "xs", tone: "gold", children: [search.matchingSeeds, " FOUND"] })] }), _jsx(JimboFlankNav, { canPrev: resultIndex > 0, canNext: resultIndex < search.results.length - 1, onPrev: () => setResultIndex(i => Math.max(0, i - 1)), onNext: () => setResultIndex(i => Math.min(search.results.length - 1, i + 1)), children: _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "lg", tone: "gold", style: { letterSpacing: 2 }, children: currentSeed }), _jsx(JimboButton, { tone: "blue", size: "xs", children: "Copy Seed" })] }) }), _jsx(JimboText, { size: "micro", tone: "grey", className: "j-text-center", style: { opacity: 0.7, marginTop: 8 }, children: "\u25BC SWIPE DOWN FOR ANTES \u25BC" })] })) }) })] }) }) }));
 }

package/dist/components/JamlSpeedometer.d.ts

@@ -1,11 +1,16 @@
+import React from "react";
 export type JamlSpeedometerStatus = "idle" | "booting" | "running" | "completed" | "cancelled" | "error";
 export interface JamlSpeedometerProps {
     seedsPerSecond: number;
     totalSearched: bigint | number;
     matchingSeeds: bigint | number;
     status: JamlSpeedometerStatus;
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
- * Compact live-search stats strip for MCP/app chrome.
+ * Compact live-search stats strip — NOT a car speedometer.
+ * Three stat cells in a row: speed | searched | matches.
+ * Uses j-stat-grid CSS class from jimbo.css.
  */
-export declare function JamlSpeedometer({ seedsPerSecond, totalSearched, matchingSeeds, status, }: JamlSpeedometerProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlSpeedometer({ seedsPerSecond, totalSearched, matchingSeeds, status, className, style, }: JamlSpeedometerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlSpeedometer.js

@@ -1,13 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboColorOption } from "../ui/tokens.js";
-const C = JimboColorOption;
+import { JimboText } from "../ui/jimboText.js";
 function formatCount(value) {
     return Number(value).toLocaleString();
 }
 function formatSpeed(value) {
     if (!Number.isFinite(value) || value <= 0)
-        return "0/s";
+        return "—";
     if (value >= 1_000_000)
         return `${(value / 1_000_000).toFixed(1)}M/s`;
     if (value >= 1_000)
@@ -15,18 +14,12 @@ function formatSpeed(value) {
     return `${Math.round(value)}/s`;
 }
 /**
- * Compact live-search stats strip for MCP/app chrome.
+ * Compact live-search stats strip — NOT a car speedometer.
+ * Three stat cells in a row: speed | searched | matches.
+ * Uses j-stat-grid CSS class from jimbo.css.
  */
-export function JamlSpeedometer({ seedsPerSecond, totalSearched, matchingSeeds, status, }) {
+export function JamlSpeedometer({ seedsPerSecond, totalSearched, matchingSeeds, status, className = "", style, }) {
     const active = status === "running" || status === "booting";
-    const tone = status === "error" ? C.RED : active ? C.GOLD : C.GREY;
-    return (_jsxs("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            color: tone,
-            fontSize: 11,
-            fontFamily: "var(--font-sans, m6x11plus), monospace",
-            whiteSpace: "nowrap",
-        }, children: [_jsx("span", { children: status }), _jsx("span", { children: formatSpeed(seedsPerSecond) }), _jsxs("span", { children: [formatCount(totalSearched), " searched"] }), _jsxs("span", { children: [formatCount(matchingSeeds), " matches"] })] }));
+    const statusTone = status === "error" ? "red" : active ? "green" : "grey";
+    return (_jsxs("div", { className: `j-stat-grid ${className}`, style: style, children: [_jsxs("div", { children: [_jsx("div", { className: "j-stat-grid__value", children: _jsx(JimboText, { size: "md", tone: active ? "gold" : "grey", children: formatSpeed(seedsPerSecond) }) }), _jsx("div", { className: "j-stat-grid__label", children: "speed" })] }), _jsxs("div", { children: [_jsx("div", { className: "j-stat-grid__value", children: _jsx(JimboText, { size: "md", tone: "white", children: formatCount(totalSearched) }) }), _jsx("div", { className: "j-stat-grid__label", children: "searched" })] }), _jsxs("div", { children: [_jsx("div", { className: "j-stat-grid__value", children: _jsx(JimboText, { size: "md", tone: Number(matchingSeeds) > 0 ? "green" : "grey", children: formatCount(matchingSeeds) }) }), _jsx("div", { className: "j-stat-grid__label", children: "matches" })] })] }));
 }

package/dist/components/jamlMap/JamlMapEditor.js

@@ -92,15 +92,15 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
     const handleOverlayClose = useCallback(() => {
         setActiveSlot(null);
     }, []);
-    const jsonTree = useMemo(() => buildJsonTree(antesState), [antesState]);
+    const jamlText = useMemo(() => buildJamlText(antesState), [antesState]);
     useEffect(() => {
-        onChange?.(JSON.stringify(jsonTree, null, 2));
-    }, [jsonTree, onChange]);
+        onChange?.(jamlText);
+    }, [jamlText, onChange]);
     const renderSlot = (anteIndex, id, width, sheetType, forceCategory) => {
         const sel = (antesState[anteIndex] || {})[id];
         return (_jsx(MysterySlot, { zone: sel ? sel.zone : currentZone, sheetType: sheetType, selection: sel, width: width, onTap: () => handleSlotTap(anteIndex, id, forceCategory), onClear: sel ? () => handleSlotClear(anteIndex, id) : undefined, style: { flexShrink: 0 } }, id));
     };
-    return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: [_jsxs("div", { style: { position: "sticky", top: 0, zIndex: 10, background: C.DARKEST, padding: "max(32px, env(safe-area-inset-top, 32px)) 0 8px 0", borderBottom: `2px solid ${C.PANEL_EDGE}` }, children: [_jsx(JimboText, { size: "md", tone: "white", dance: true, style: { textAlign: "center", marginBottom: 12 }, children: "JAML VISUAL BUILDER" }), _jsx("div", { className: "j-flex j-gap-sm", style: { justifyContent: "center" }, children: ["must", "should", "mustnot"].map((z) => (_jsx(JimboButton, { tone: currentZone === z ? ZONE_TONE[z] : "blue", size: "sm", onClick: () => setCurrentZone(z), style: { opacity: currentZone === z ? 1 : 0.4 }, children: ZONE_LABEL[z] }, z))) })] }), _jsx("div", { className: "hide-scrollbar", style: {
+    return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: [_jsxs("div", { style: { position: "sticky", top: 0, zIndex: 10, background: C.DARKEST, padding: "max(32px, env(safe-area-inset-top, 32px)) 0 8px 0", borderBottom: `2px solid ${C.PANEL_EDGE}` }, children: [_jsx(JimboText, { size: "md", tone: "white", style: { textAlign: "center", marginBottom: 12 }, children: "JAML VISUAL BUILDER" }), _jsx("div", { className: "j-flex j-gap-sm", style: { justifyContent: "center" }, children: ["must", "should", "mustnot"].map((z) => (_jsx(JimboButton, { tone: currentZone === z ? ZONE_TONE[z] : "blue", size: "sm", onClick: () => setCurrentZone(z), style: { opacity: currentZone === z ? 1 : 0.4 }, children: ZONE_LABEL[z] }, z))) })] }), _jsx("div", { className: "hide-scrollbar", style: {
                     flex: 1,
                     overflowY: "auto",
                     scrollSnapType: "y mandatory",
@@ -113,7 +113,7 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
                         flexDirection: "column",
                         gap: 24,
                         borderBottom: `2px solid ${C.DARK_GREY}`
-                    }, children: [_jsxs(JimboText, { size: "md", tone: "white", dance: true, style: { textAlign: "center", marginBottom: 8 }, children: ["ANTE ", a] }), _jsxs("div", { className: "j-flex j-justify-between j-items-end", children: [_jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "VOUCHER" }), renderSlot(a, `ante_${a}_voucher`, 42, "Vouchers", "voucher")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "SMALL" }), renderSlot(a, `ante_${a}_tag_small`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BIG" }), renderSlot(a, `ante_${a}_tag_big`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BOSS" }), renderSlot(a, `ante_${a}_boss`, 42, "BlindChips", "boss")] })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "SHOP ITEMS" }), _jsx("div", { className: "j-flex hide-scrollbar j-gap-sm", style: { overflowX: "auto", paddingBottom: 8 }, children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => renderSlot(a, `ante_${a}_shop_${i}`, 52, "Jokers")) })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "PACKS" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [1, 2, 3, 4, 5, 6].map(i => renderSlot(a, `ante_${a}_pack_${i}`, 64, "Boosters", "pack")) })] })] }, a))) }), _jsx(JimboModal, { open: activeSlot !== null, onClose: handlePickerCancel, title: pickerFlow === "category" ? "Select Category" : undefined, className: "j-picker-modal", children: activeSlot !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel }))) })] }));
+                    }, children: [_jsxs(JimboText, { size: "md", tone: "white", style: { textAlign: "center", marginBottom: 8 }, children: ["ANTE ", a] }), _jsxs("div", { className: "j-flex j-justify-between j-items-end", children: [_jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "VOUCHER" }), renderSlot(a, `ante_${a}_voucher`, 42, "Vouchers", "voucher")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "SMALL" }), renderSlot(a, `ante_${a}_tag_small`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BIG" }), renderSlot(a, `ante_${a}_tag_big`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BOSS" }), renderSlot(a, `ante_${a}_boss`, 42, "BlindChips", "boss")] })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "SHOP ITEMS" }), _jsx("div", { className: "j-flex hide-scrollbar j-gap-sm", style: { overflowX: "auto", paddingBottom: 8 }, children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => renderSlot(a, `ante_${a}_shop_${i}`, 52, "Jokers")) })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "PACKS" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [1, 2, 3, 4, 5, 6].map(i => renderSlot(a, `ante_${a}_pack_${i}`, 64, "Boosters", "pack")) })] })] }, a))) }), _jsx(JimboModal, { open: activeSlot !== null, onClose: handlePickerCancel, title: pickerFlow === "category" ? "Select Category" : undefined, className: "j-picker-modal", children: activeSlot !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel }))) })] }));
 }
 // ─── Category Selection Menu ─────────────────────────────────────────────────
 function CategoryMenu({ onSelect, }) {
@@ -126,45 +126,49 @@ function CategoryMenu({ onSelect, }) {
             overflowY: "auto",
         }, children: CATEGORIES.map((cat) => (_jsx(JimboButton, { tone: cat.tone, size: "sm", fullWidth: true, onClick: () => onSelect(cat.key), children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left" }, children: [_jsx(JimboSprite, { name: cat.sprite, sheet: cat.sheet, width: 24 }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [_jsx("span", { style: { fontSize: 11 }, children: cat.label }), _jsx("span", { style: { fontSize: 8, opacity: 0.7, letterSpacing: "0.04em", lineHeight: 1, whiteSpace: "normal" }, children: cat.hint })] })] }) }, cat.key))) }));
 }
-// ─── Build JSON tree from slots ──────────────────────────────────────────────
-function buildJsonTree(antes) {
-    const must = [];
-    const should = [];
-    const mustNot = [];
+// ─── Build JAML text from slots ──────────────────────────────────────────────
+function buildJamlText(antes) {
+    const byZone = {
+        must: {}, should: {}, mustnot: {}
+    };
     for (const [anteStr, selections] of Object.entries(antes)) {
         const anteNum = parseInt(anteStr, 10);
-        // Group by zone
-        const byZone = {
-            must: {}, should: {}, mustnot: {}
-        };
         for (const sel of Object.values(selections)) {
-            if (!byZone[sel.zone][sel.clauseKey]) {
-                byZone[sel.zone][sel.clauseKey] = [];
+            const zone = sel.zone;
+            const key = sel.clauseKey;
+            if (!byZone[zone][key]) {
+                byZone[zone][key] = [];
+            }
+            const existing = byZone[zone][key].find(item => item.value === sel.value);
+            if (existing) {
+                if (!existing.antes.includes(anteNum))
+                    existing.antes.push(anteNum);
+            }
+            else {
+                byZone[zone][key].push({ value: sel.value, antes: [anteNum] });
             }
-            byZone[sel.zone][sel.clauseKey].push(sel.value);
         }
-        for (const z of ["must", "should", "mustnot"]) {
-            const clauseList = Object.entries(byZone[z]);
-            if (clauseList.length === 0)
-                continue;
-            const obj = { ante: anteNum };
-            for (const [key, values] of clauseList) {
-                obj[key] = values.length === 1 ? values[0] : values;
+    }
+    let lines = [];
+    lines.push("name: My Custom Seed Map");
+    lines.push("author: JamlBuilder");
+    lines.push("description: Auto-generated from the visual editor.");
+    lines.push("deck: Red");
+    lines.push("stake: White");
+    for (const [zone, label] of [["must", "must"], ["should", "should"], ["mustnot", "mustNot"]]) {
+        const clauses = byZone[zone];
+        if (Object.keys(clauses).length === 0)
+            continue;
+        lines.push(`${label}:`);
+        for (const [key, items] of Object.entries(clauses)) {
+            for (const item of items) {
+                lines.push(`  - ${key}: ${item.value}`);
+                // Only emit `antes:` if it's not all 8 antes (simplification, or just emit it)
+                if (item.antes.length < 8) {
+                    lines.push(`    antes: [${item.antes.sort((a, b) => a - b).join(", ")}]`);
+                }
             }
-            if (z === "must")
-                must.push(obj);
-            else if (z === "should")
-                should.push(obj);
-            else if (z === "mustnot")
-                mustNot.push(obj);
         }
     }
-    const result = {};
-    if (must.length > 0)
-        result.must = must;
-    if (should.length > 0)
-        result.should = should;
-    if (mustNot.length > 0)
-        result.mustNot = mustNot;
-    return result;
+    return lines.join("\n") + "\n";
 }

package/dist/components/jamlMap/JokerPicker.js

@@ -60,7 +60,7 @@ const RARITY_META = {
     common: { label: "Common", tone: "blue", hint: "Found in shops and Buffoon Packs" },
     uncommon: { label: "Uncommon", tone: "green", hint: "Found in shops and Buffoon Packs" },
     rare: { label: "Rare", tone: "red", hint: "Found in shops and Buffoon Packs" },
-    legendary: { label: "Legendary", tone: "gold", hint: "Spawns from The Soul only!" },
+    legendary: { label: "Legendary", tone: "tarot", hint: "Spawns from The Soul only!" },
 };
 export function JokerPicker({ onSelect, onCancel }) {
     const [step, setStep] = useState("rarity");
@@ -112,7 +112,7 @@ export function JokerPicker({ onSelect, onCancel }) {
                             justifyContent: "space-between",
                             padding: "8px 10px",
                             borderBottom: `2px solid ${C.PANEL_EDGE}`,
-                        }, children: [_jsx(JimboButton, { tone: "grey", size: "xs", onClick: () => setStep("rarity"), children: "\u2190 Back" }), _jsxs(JimboText, { size: "md", children: [RARITY_META[selectedRarity].label, " Jokers"] }), _jsx("div", { style: { width: 44 } })] }), _jsxs("div", { className: "j-flex j-gap-sm", style: { padding: "8px 10px 4px" }, children: [_jsx("input", { className: "j-seed-input__field", type: "text", placeholder: "Search jokers...", value: search, onChange: (e) => setSearch(e.target.value), style: { fontSize: 13, padding: "6px 10px", textTransform: "none", letterSpacing: "0.04em" } }), _jsx(JimboButton, { tone: "gold", size: "sm", onClick: handleAnySelect, children: "Any" })] }), selectedRarity === "legendary" && (_jsx("div", { className: "j-inner-panel", style: { margin: "4px 10px 6px", padding: "6px 10px" }, children: _jsx(JimboText, { size: "xs", tone: "purple", children: "Legendary jokers spawn from The Soul. Find it in Arcana Pack, Spectral Pack, Charm Tag, or Ethereal Tag only!" }) })), _jsxs("div", { style: {
+                        }, children: [_jsx(JimboButton, { tone: "orange", size: "xs", onClick: () => setStep("rarity"), children: "\u2190 Back" }), _jsxs(JimboText, { size: "md", children: [RARITY_META[selectedRarity].label, " Jokers"] }), _jsx("div", { style: { width: 44 } })] }), _jsxs("div", { className: "j-flex j-gap-sm", style: { padding: "8px 10px 4px" }, children: [_jsx("input", { className: "j-seed-input__field", type: "text", placeholder: "Search jokers...", value: search, onChange: (e) => setSearch(e.target.value), style: { fontSize: 13, padding: "6px 10px", textTransform: "none", letterSpacing: "0.04em" } }), _jsx(JimboButton, { tone: "orange", size: "sm", onClick: handleAnySelect, children: "Any" })] }), selectedRarity === "legendary" && (_jsx("div", { className: "j-inner-panel", style: { margin: "4px 10px 6px", padding: "6px 10px" }, children: _jsx(JimboText, { size: "xs", tone: "purple", children: "Legendary jokers spawn from The Soul. Find it in Arcana Pack, Spectral Pack, Charm Tag, or Ethereal Tag only!" }) })), _jsxs("div", { style: {
                             display: "grid",
                             gridTemplateColumns: "repeat(auto-fill, minmax(64px, 1fr))",
                             gap: 6,

package/dist/components/jamlMap/MysterySlot.js

@@ -51,10 +51,10 @@ export function MysterySlot({ zone, sheetType, selection, width = 56, onTap, onC
         const nx = Math.max(-1, Math.min(1, ((e.clientX - rect.left) / rect.width - 0.5) * 2));
         const ny = Math.max(-1, Math.min(1, ((e.clientY - rect.top) / rect.height - 0.5) * 2));
         setTilt({
-            rx: ny * -20, // max 20deg tilt
-            ry: nx * 20,
-            tx: nx * -4, // subtle shift
-            ty: ny * -4,
+            rx: ny * -8, // subtle max 8deg tilt
+            ry: nx * 8,
+            tx: nx * -2, // subtle shift
+            ty: ny * -2,
         });
     };
     const handleMouseLeave = () => {

package/dist/hooks/useSearch.d.ts

@@ -13,11 +13,12 @@ export interface UseSearchState {
     seedsPerSecond: number;
     tallyLabels: string[];
 }
-export declare function useSearch(): {
+export declare function useSearch(motelyWasmUrl?: string): {
     start: (jaml: string, count: number) => void;
     startAesthetic: (jaml: string, aesthetic: number) => void;
     startSeedList: (jaml: string, seeds: string[]) => void;
     startKeyword: (jaml: string, keywords: string, padding?: string) => void;
+    startSequential: (jaml: string, startSeed: string, endSeed?: string) => void;
     cancel: () => void;
     clearError: () => void;
     fetchTallyLabels: (jaml: string) => void;

package/dist/hooks/useSearch.js

@@ -1,9 +1,5 @@
 "use client";
 import { useState, useCallback, useRef, useEffect } from "react";
-import SearchWorker from "./searchWorker.ts?worker&inline";
-function createWorker() {
-    return new SearchWorker();
-}
 const INITIAL_STATE = {
     results: [],
     totalSearched: 0n,
@@ -13,15 +9,107 @@ const INITIAL_STATE = {
     seedsPerSecond: 0,
     tallyLabels: [],
 };
-export function useSearch() {
+const SEARCH_WORKER_CODE = `
+let MotelyWasm = null;
+let MotelyWasmEvents = null;
+let activeSearch = null;
+
+self.addEventListener('message', async function(e) {
+  const msg = e.data;
+
+  if (msg.type === 'init') {
+    try {
+      const mod = await import(msg.url);
+      await mod.default.boot();
+      MotelyWasm = mod.MotelyWasm;
+      MotelyWasmEvents = mod.MotelyWasmEvents;
+      self.postMessage({ type: 'ready' });
+    } catch (err) {
+      self.postMessage({ type: 'error', message: String(err) });
+    }
+    return;
+  }
+
+  if (msg.type === 'start') {
+    if (!MotelyWasm) { self.postMessage({ type: 'error', message: 'Not initialized' }); return; }
+    const validation = MotelyWasm.validateJaml(msg.jaml);
+    if (validation !== 'valid') { self.postMessage({ type: 'error', message: validation }); return; }
+
+    function cleanup() {
+      MotelyWasmEvents.notifyResult = () => {};
+      MotelyWasmEvents.notifyProgress = () => {};
+      MotelyWasmEvents.notifyComplete = () => {};
+      activeSearch = null;
+    }
+
+    MotelyWasmEvents.notifyResult = function(seed, score, tallyColumns) {
+      self.postMessage({ type: 'result', seed, score, tallyColumns: Array.from(tallyColumns) });
+    };
+    MotelyWasmEvents.notifyProgress = function(searched, matching) {
+      self.postMessage({ type: 'progress', searched: searched.toString(), matching: matching.toString() });
+    };
+    MotelyWasmEvents.notifyComplete = function(status, searched, matched) {
+      cleanup();
+      self.postMessage({ type: 'complete', status, searched: searched.toString(), matched: matched.toString() });
+    };
+
+    try {
+      const mode = msg.mode || 'random';
+
+      if (mode === 'random') {
+        activeSearch = MotelyWasm.startRandomSearch(msg.jaml, msg.count);
+      } else if (mode === 'aesthetic') {
+        activeSearch = MotelyWasm.startAestheticSearch(msg.jaml, msg.aesthetic);
+      } else if (mode === 'seedList') {
+        activeSearch = MotelyWasm.startSeedListSearch(msg.jaml, msg.seeds);
+      } else if (mode === 'keyword') {
+        activeSearch = MotelyWasm.startKeywordSearch(msg.jaml, msg.keywords, msg.padding || '');
+      } else if (mode === 'sequential') {
+        activeSearch = MotelyWasm.startSequentialSearch(msg.jaml, msg.batchCharCount, BigInt(msg.startBatch), BigInt(msg.endBatch));
+      } else {
+        self.postMessage({ type: 'error', message: 'Unknown search mode: ' + mode });
+        cleanup();
+        return;
+      }
+    } catch (err) {
+      cleanup();
+      self.postMessage({ type: 'error', message: String(err) });
+    }
+    return;
+  }
+
+  if (msg.type === 'stop') {
+    if (activeSearch) { activeSearch.cancel(); activeSearch = null; }
+    self.postMessage({ type: 'cancelled' });
+  }
+
+  if (msg.type === 'get_tally_labels') {
+    if (!MotelyWasm) { self.postMessage({ type: 'error', message: 'Not initialized' }); return; }
+    try {
+      const labels = MotelyWasm.getTallyLabels(msg.jaml);
+      self.postMessage({ type: 'tally_labels', labels: Array.from(labels) });
+    } catch (err) {
+      self.postMessage({ type: 'error', message: String(err) });
+    }
+  }
+});
+`;
+function createWorker() {
+    const blob = new Blob([SEARCH_WORKER_CODE], { type: "application/javascript" });
+    return new Worker(URL.createObjectURL(blob), { type: "module" });
+}
+export function useSearch(motelyWasmUrl) {
     const [state, setState] = useState(INITIAL_STATE);
     const workerRef = useRef(null);
-    const readyRef = useRef(true); // Worker is ready implicitly since boot is handled by import
+    const readyRef = useRef(false); // Worker is NOT implicitly ready, must wait for 'ready' message
     const speedRef = useRef({ lastSearched: 0n, lastTime: 0, ema: 0 });
     useEffect(() => {
         setState((s) => ({ ...s, status: "idle" }));
         const worker = createWorker();
         workerRef.current = worker;
+        if (motelyWasmUrl) {
+            worker.postMessage({ type: 'init', url: motelyWasmUrl });
+        }
         worker.onmessage = (e) => {
             const msg = e.data;
             if (msg.type === "ready") {
@@ -83,7 +171,7 @@ export function useSearch() {
             worker.terminate();
             workerRef.current = null;
         };
-    }, []);
+    }, [motelyWasmUrl]);
     const sendStart = useCallback((payload) => {
         const worker = workerRef.current;
         if (!worker)
@@ -117,6 +205,21 @@ export function useSearch() {
     const startKeyword = useCallback((jaml, keywords, padding) => {
         sendStart({ type: "start", mode: "keyword", jaml, keywords, padding });
     }, [sendStart]);
+    const startSequential = useCallback((jaml, startSeed, endSeed) => {
+        // Sequential search: single-threaded, deterministic order.
+        // batchCharCount = length of start seed, startBatch/endBatch = numeric range.
+        const charCount = startSeed.length || 1;
+        const startNum = parseInt(startSeed, 36) || 0;
+        const endNum = endSeed ? parseInt(endSeed, 36) : startNum + 10_000_000;
+        sendStart({
+            type: "start",
+            mode: "sequential",
+            jaml,
+            batchCharCount: charCount,
+            startBatch: startNum.toString(),
+            endBatch: endNum.toString(),
+        });
+    }, [sendStart]);
     const cancel = useCallback(() => {
         workerRef.current?.postMessage({ type: "stop" });
     }, []);
@@ -126,5 +229,5 @@ export function useSearch() {
     const fetchTallyLabels = useCallback((jaml) => {
         workerRef.current?.postMessage({ type: "get_tally_labels", jaml });
     }, []);
-    return { ...state, start, startAesthetic, startSeedList, startKeyword, cancel, clearError, fetchTallyLabels };
+    return { ...state, start, startAesthetic, startSeedList, startKeyword, startSequential, cancel, clearError, fetchTallyLabels };
 }