jaml-ui 0.24.20 → 0.25.2

package/dist/components/JamlCodeEditor.js

@@ -1,137 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection, placeholder as cmPlaceholder } from "@codemirror/view";
-import { EditorState } from "@codemirror/state";
-import { yaml } from "@codemirror/lang-yaml";
-import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
-import { syntaxHighlighting, HighlightStyle } from "@codemirror/language";
-import { tags } from "@lezer/highlight";
-import { JimboColorOption } from "../ui/tokens.js";
-const balatroHighlight = HighlightStyle.define([
-    { tag: tags.comment, color: JimboColorOption.GREY, fontStyle: "italic" },
-    { tag: tags.keyword, color: JimboColorOption.RED },
-    { tag: tags.string, color: JimboColorOption.GOLD_TEXT },
-    { tag: tags.number, color: JimboColorOption.BLUE },
-    { tag: tags.bool, color: JimboColorOption.BLUE },
-    { tag: tags.null, color: JimboColorOption.GREY },
-    { tag: tags.propertyName, color: JimboColorOption.GREEN_TEXT },
-    { tag: tags.typeName, color: JimboColorOption.GREEN_TEXT },
-]);
-const balatroTheme = EditorView.theme({
-    "&": {
-        backgroundColor: JimboColorOption.DARKEST,
-        color: JimboColorOption.WHITE,
-        fontSize: "13px",
-        height: "100%",
-    },
-    ".cm-content": {
-        fontFamily: "var(--j-font-code, 'JetBrains Mono', ui-monospace, monospace)",
-        lineHeight: "22px",
-        padding: "12px 0",
-        caretColor: JimboColorOption.GOLD_TEXT,
-        minHeight: "100%",
-    },
-    ".cm-gutters": {
-        backgroundColor: JimboColorOption.DARKEST,
-        color: JimboColorOption.GREY,
-        border: "none",
-    },
-    ".cm-lineNumbers .cm-gutterElement": {
-        minWidth: "2ch",
-        padding: "0 6px 0 8px",
-    },
-    ".cm-activeLineGutter": {
-        color: JimboColorOption.GOLD_TEXT,
-        backgroundColor: "transparent",
-    },
-    ".cm-activeLine": {
-        backgroundColor: `${JimboColorOption.BLACK}20`,
-    },
-    ".cm-selectionBackground": {
-        backgroundColor: `${JimboColorOption.WHITE}20 !important`,
-    },
-    "&.cm-focused .cm-selectionBackground": {
-        backgroundColor: `${JimboColorOption.WHITE}20`,
-    },
-    ".cm-cursor, .cm-dropCursor": {
-        borderLeftColor: JimboColorOption.GOLD_TEXT,
-    },
-    ".cm-scroller": {
-        overflow: "auto",
-    },
-    ".cm-placeholder": {
-        color: JimboColorOption.GREY,
-        fontStyle: "italic",
-    },
-}, { dark: true });
-export function JamlCodeEditor({ value, onChange, placeholder = "", minHeight = 320, }) {
-    const containerRef = useRef(null);
-    const viewRef = useRef(null);
-    const suppressEmitRef = useRef(false);
-    const lastSyncedValueRef = useRef(value);
-    const onChangeRef = useRef(onChange);
-    useEffect(() => { onChangeRef.current = onChange; });
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        const view = new EditorView({
-            state: EditorState.create({
-                doc: lastSyncedValueRef.current,
-                extensions: [
-                    history(),
-                    lineNumbers(),
-                    highlightActiveLine(),
-                    drawSelection(),
-                    yaml(),
-                    syntaxHighlighting(balatroHighlight),
-                    balatroTheme,
-                    EditorView.lineWrapping,
-                    keymap.of([indentWithTab, ...defaultKeymap, ...historyKeymap]),
-                    ...(placeholder ? [cmPlaceholder(placeholder)] : []),
-                    EditorView.updateListener.of((update) => {
-                        if (update.docChanged && !suppressEmitRef.current) {
-                            onChangeRef.current(update.state.doc.toString());
-                        }
-                    }),
-                ],
-            }),
-            parent: containerRef.current,
-        });
-        viewRef.current = view;
-        return () => {
-            view.destroy();
-            viewRef.current = null;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    useEffect(() => {
-        const view = viewRef.current;
-        if (!view)
-            return;
-        const current = view.state.doc.toString();
-        if (current === value) {
-            lastSyncedValueRef.current = value;
-            return;
-        }
-        suppressEmitRef.current = true;
-        try {
-            // Streaming-friendly: append only the suffix when new value extends current.
-            if (value.length > current.length && value.startsWith(current)) {
-                view.dispatch({
-                    changes: { from: view.state.doc.length, insert: value.slice(current.length) },
-                });
-            }
-            else {
-                view.dispatch({
-                    changes: { from: 0, to: view.state.doc.length, insert: value },
-                });
-            }
-        }
-        finally {
-            suppressEmitRef.current = false;
-            lastSyncedValueRef.current = value;
-        }
-    }, [value]);
-    return (_jsx("div", { ref: containerRef, style: { width: "100%", minHeight, background: JimboColorOption.DARKEST } }));
-}

package/dist/components/JamlCurator.js

@@ -1,64 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { JimboButton, JimboPanel } from "../ui/panel.js";
-import { JimboText } from "../ui/jimboText.js";
-import { JimboColorOption } from "../ui/tokens.js";
-import { JimboFlankNav } from "../ui/jimboFlankNav.js";
-import { JamlMapEditor } from "./jamlMap/JamlMapEditor.js";
-import { JamlAnalyzerFullscreen } from "./JamlAnalyzerFullscreen.js";
-import { useSearch } from "../hooks/useSearch.js";
-import { useAnalyzer } from "../hooks/useAnalyzer.js";
-import { JamlSpeedometer } from "./JamlSpeedometer.js";
-const C = JimboColorOption;
-export function JamlCurator({ motely, motelyWasmUrl }) {
-    // Use map editor by default to generate JAML
-    const [jamlText, setJamlText] = useState("");
-    const search = useSearch(motelyWasmUrl);
-    const analyzer = useAnalyzer(motely);
-    // Search results pagination
-    const [resultIndex, setResultIndex] = useState(0);
-    const isSearching = search.status === "running";
-    const handleSearch = () => {
-        if (isSearching) {
-            search.cancel();
-        }
-        else {
-            setResultIndex(0);
-            search.start(jamlText, 1_000_000);
-        }
-    };
-    const currentSeed = search.results[resultIndex]?.seed;
-    useEffect(() => {
-        if (currentSeed) {
-            analyzer.analyze(currentSeed, "Red", "White", jamlText);
-        }
-    }, [currentSeed, jamlText]); // eslint-disable-line react-hooks/exhaustive-deps
-    // Map Editor changes
-    const handleMapChange = (jamlString) => {
-        setJamlText(jamlString);
-    };
-    return (_jsx("div", { style: {
-            width: "100%",
-            maxWidth: 375,
-            height: "100dvh",
-            maxHeight: 812,
-            margin: "0 auto",
-            position: "relative",
-            background: C.DARKEST,
-            overflow: "hidden",
-            borderLeft: `1px solid ${C.PANEL_EDGE}`,
-            borderRight: `1px solid ${C.PANEL_EDGE}`,
-            boxShadow: `0 0 20px rgba(0,0,0,0.5)`,
-        }, children: _jsx(JamlAnalyzerFullscreen, { antes: analyzer.antes, live: analyzer.live, hidePicker: true, topPage: _jsxs("section", { style: {
-                    width: "100%",
-                    height: "100svh",
-                    scrollSnapAlign: "start",
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 12,
-                    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: "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/JamlCurator.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { JamlCurator } from "./JamlCurator.js";
-declare const meta: Meta<typeof JamlCurator>;
-export default meta;
-type Story = StoryObj<typeof JamlCurator>;
-export declare const Default: Story;

package/dist/components/JamlCurator.stories.js

@@ -1,14 +0,0 @@
-import { JamlCurator } from "./JamlCurator.js";
-const meta = {
-    title: "JAML/JamlCurator",
-    component: JamlCurator,
-    parameters: {
-        layout: "fullscreen",
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        motelyWasmUrl: "https://unpkg.com/@nims11/motely@0.2.2/motely_bg.wasm",
-    },
-};

package/dist/components/JamlIde.js

@@ -1,193 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { JamlMapPreview } from "./JamlMapPreview.js";
-import { JamlMapEditor, CategoryMenu, JokerPicker, CategoryPicker, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./jamlMap/index.js";
-import { JamlIdeToolbar } from "./JamlIdeToolbar.js";
-import { JamlIdeVisual } from "./JamlIdeVisual.js";
-import { JamlCodeEditor } from "./JamlCodeEditor.js";
-import { Jimbolate } from "./Jimbolate.js";
-import { JimboColorOption } from "../ui/tokens.js";
-import { JimboModal } from "../ui/panel.js";
-import { jamlTextToVisualFilter, visualFilterToJamlText } from "../utils/jamlVisualFilter.js";
-const CATEGORY_CONFIG_MAP = {
-    voucher: VOUCHER_PICKER_CONFIG,
-    tag: TAG_PICKER_CONFIG,
-    boss: BOSS_PICKER_CONFIG,
-    tarot: TAROT_PICKER_CONFIG,
-    planet: PLANET_PICKER_CONFIG,
-    spectral: SPECTRAL_PICKER_CONFIG,
-    pack: PACK_PICKER_CONFIG,
-};
-function TallyBar({ value, max }) {
-    const pct = max > 0 ? Math.min(1, value / max) : 0;
-    return (_jsx("div", { style: { flex: 1, height: 4, borderRadius: 999, background: `${JimboColorOption.DARK_GREY}88`, overflow: "hidden" }, children: _jsx("div", { style: {
-                height: "100%",
-                width: `${pct * 100}%`,
-                borderRadius: 999,
-                background: value > 0 ? JimboColorOption.GREEN : JimboColorOption.GREY,
-                transition: "width 200ms ease",
-            } }) }));
-}
-function ResultsView({ results, jaml }) {
-    const [expanded, setExpanded] = useState(null);
-    if (results.length === 0) {
-        return (_jsx("div", { style: {
-                border: `1px dashed ${JimboColorOption.DARK_GREY}`,
-                borderRadius: 10,
-                padding: 16,
-                fontSize: 12,
-                color: JimboColorOption.GREY,
-                background: `${JimboColorOption.DARKEST}88`,
-                textAlign: "center",
-            }, children: "No results yet. Run a search to find seeds." }));
-    }
-    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;
-            return (_jsxs("div", { style: {
-                    borderRadius: 10,
-                    border: `1px solid ${isOpen ? JimboColorOption.GOLD + "55" : JimboColorOption.PANEL_EDGE}`,
-                    background: isOpen ? `${JimboColorOption.GOLD}0a` : `${JimboColorOption.DARKEST}cc`,
-                    overflow: "hidden",
-                    transition: "border-color 120ms",
-                }, children: [_jsxs("button", { type: "button", onClick: () => hasTally && setExpanded(isOpen ? null : result.seed), style: {
-                            width: "100%",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 10,
-                            padding: "9px 12px",
-                            background: "none",
-                            border: "none",
-                            cursor: hasTally ? "pointer" : "default",
-                            color: "inherit",
-                            textAlign: "left",
-                        }, children: [_jsx("span", { style: {
-                                    fontFamily: "m6x11plus, monospace",
-                                    fontWeight: "normal",
-                                    fontSize: 14,
-                                    letterSpacing: 1,
-                                    color: JimboColorOption.GOLD_TEXT,
-                                    minWidth: 80,
-                                }, children: result.seed }), result.score !== undefined ? (_jsxs(_Fragment, { children: [_jsx(TallyBar, { value: result.score, max: maxScore }), _jsx("span", { style: {
-                                            fontSize: 12,
-                                            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 ? (_jsxs("div", { style: {
-                            borderTop: `1px solid ${JimboColorOption.PANEL_EDGE}`,
-                            padding: "4px",
-                            display: "flex",
-                            flexDirection: "column",
-                            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: 9, color: JimboColorOption.WHITE, opacity: 0.8 }, 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", subtitle = "Jimbo's Ante Markup Language", compactHeader = false, actions, codePlaceholder = "Enter JAML...", onSearch, isSearching = false, onTestSeed, jimbolateResult = "idle", jimbolateError, visualFilter, onVisualFilterChange, }) {
-    const [mode, setMode] = useState(defaultMode);
-    const [internalText, setInternalText] = useState(jaml ?? defaultJaml ?? "");
-    const [lastJamlProp, setLastJamlProp] = useState(jaml);
-    // Adjust-state-during-render: sync controlled `jaml` prop into internal text.
-    if (jaml !== lastJamlProp) {
-        setLastJamlProp(jaml);
-        if (jaml !== undefined)
-            setInternalText(jaml);
-    }
-    const text = internalText;
-    const handleTextChange = (next) => {
-        setInternalText(next);
-        onChange?.(next);
-    };
-    // Derived visual filter state (used only when not externally controlled).
-    // Cache the last successfully parsed filter so a mid-edit invalid state
-    // 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). 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);
-            setLastParsedFilter(parsed);
-        }
-        catch {
-            // Keep previous filter on parse error — don't flash empty.
-            setLastParsedText(text);
-        }
-    }
-    const activeFilter = visualFilter ?? lastParsedFilter;
-    const handleVisualFilterChange = (next) => {
-        if (onVisualFilterChange) {
-            // Controlled: let parent own both.
-            onVisualFilterChange(next);
-        }
-        else {
-            // Uncontrolled: round-trip through text so textarea stays source of truth.
-            const nextText = visualFilterToJamlText(next);
-            setInternalText(nextText);
-            setLastParsedFilter(next);
-            setLastParsedText(nextText);
-            onChange?.(nextText);
-        }
-    };
-    const results = useMemo(() => searchResults, [searchResults]);
-    // ── Add-clause picker state ──────────────────────────────────────────────
-    const [addZone, setAddZone] = useState(null);
-    const [pickerFlow, setPickerFlow] = useState("category");
-    const handleAddClause = (zone) => {
-        setAddZone(zone);
-        setPickerFlow("category");
-    };
-    const handlePickerSelect = (sel) => {
-        if (!addZone)
-            return;
-        const clause = {
-            id: `${Date.now()}-${Math.random()}`,
-            type: sel.clauseKey,
-            value: sel.value,
-            label: sel.value,
-        };
-        handleVisualFilterChange({ ...activeFilter, [addZone]: [...activeFilter[addZone], clause] });
-        setAddZone(null);
-    };
-    const handlePickerClose = () => {
-        if (pickerFlow !== "category") {
-            setPickerFlow("category");
-        }
-        else {
-            setAddZone(null);
-        }
-    };
-    return (_jsxs("div", { className: className, style: {
-            display: "flex",
-            flexDirection: "column",
-            minHeight: 420,
-            borderRadius: 12,
-            overflow: "hidden",
-            overflowX: "clip",
-            overscrollBehaviorX: "none",
-            maxWidth: "100%",
-            border: `2px solid ${JimboColorOption.BORDER_SILVER}`,
-            boxShadow: `0 3px 0 0 ${JimboColorOption.BORDER_SOUTH}`,
-            background: JimboColorOption.DARK_GREY,
-            color: JimboColorOption.WHITE,
-            ...style,
-        }, children: [_jsxs("div", { style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    flexWrap: "wrap",
-                    gap: compactHeader ? 8 : 12,
-                    padding: compactHeader ? "8px 10px" : "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 }), subtitle ? _jsx("div", { style: { fontSize: 11, color: "rgba(255,255,255,0.6)" }, children: subtitle }) : null] }), actions && (_jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }, children: actions }))] }), _jsx(JamlIdeToolbar, { mode: mode, onModeChange: setMode, resultCount: results.length, onSearch: onSearch, isSearching: isSearching }), _jsxs("div", { style: { flex: 1, minHeight: 0, overflow: mode === "map" ? "hidden" : "auto", background: JimboColorOption.DARKEST }, children: [mode === "visual" ? (_jsx(JamlIdeVisual, { filter: activeFilter, onChange: handleVisualFilterChange, onAddClause: handleAddClause })) : null, mode === "code" ? (_jsx(JamlCodeEditor, { value: text, onChange: handleTextChange, placeholder: codePlaceholder })) : null, mode === "map" ? _jsx(JamlMapEditor, { onChange: handleTextChange }) : null, mode === "results" ? (_jsx("div", { style: { padding: 12 }, children: _jsx(ResultsView, { results: results, jaml: text }) })) : null, mode === "jimbolate" ? (_jsx(Jimbolate, { jaml: text, onTest: (seed) => onTestSeed?.(seed), result: jimbolateResult, error: jimbolateError })) : null] }), _jsx(JimboModal, { open: addZone !== null, onClose: handlePickerClose, children: addZone !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: (cat) => setPickerFlow(cat) })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handlePickerSelect })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handlePickerSelect }))) })] }));
-}

package/dist/components/JamlIdeToolbar.js

@@ -1,23 +0,0 @@
-"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";
-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" },
-        { id: "jimbolate", label: "Jimbolate" },
-    ];
-    return (_jsxs("div", { className: className, style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            padding: "10px 10px 6px",
-            borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
-            background: JimboColorOption.DARKEST,
-            minWidth: 0,
-        }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, paddingBottom: 3 }, children: _jsx(JimboTabs, { tabs: tabs, activeTab: mode, onTabChange: (id) => onModeChange(id) }) }), onSearch && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(JimboButton, { tone: isSearching ? "red" : "orange", size: "sm", onClick: onSearch, children: isSearching ? "Stop" : "Search" }) }))] }));
-}