jaml-ui 0.14.2 → 0.14.4

package/DESIGN.md

@@ -0,0 +1,197 @@
+---
+name: Jimbo
+description: Balatro-inspired design system for JAML seed finder tools. Eyedropped from actual game shader output — not Lua hex values.
+colors:
+  red: "#ff4c40"
+  blue: "#0093ff"
+  green: "#429f79"
+  orange: "#ff9800"
+  gold: "#e4b643"
+  purple: "#9e74ce"
+  dark-red: "#a02721"
+  dark-blue: "#0057a1"
+  dark-orange: "#a05b00"
+  dark-green: "#215f46"
+  dark-purple: "#5e437e"
+  dark-grey: "#3a5055"
+  darkest: "#1e2b2d"
+  grey: "#708386"
+  teal-grey: "#404c4e"
+  panel-edge: "#1e2e32"
+  inner-border: "#334461"
+  border-silver: "#b9c2d2"
+  border-south: "#777e89"
+  gold-text: "#e4b643"
+  green-text: "#35bd86"
+  orange-text: "#ff8f00"
+  white: "#ffffff"
+  black: "#000000"
+  tarot-button: "#9e74ce"
+  planet-button: "#00a7ca"
+  spectral-button: "#2e76fd"
+typography:
+  display:
+    fontFamily: m6x11plus, monospace
+    fontSize: 26px
+    fontWeight: 400
+    lineHeight: 1
+    letterSpacing: 0.04em
+  heading:
+    fontFamily: m6x11plus, monospace
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.2
+    letterSpacing: 0.08em
+  body:
+    fontFamily: m6x11plus, monospace
+    fontSize: 11px
+    fontWeight: 400
+    lineHeight: 1.3
+    letterSpacing: 0.05em
+  label:
+    fontFamily: m6x11plus, monospace
+    fontSize: 9px
+    fontWeight: 400
+    lineHeight: 1
+    letterSpacing: 0.1em
+  micro:
+    fontFamily: m6x11plus, monospace
+    fontSize: 8px
+    fontWeight: 400
+    lineHeight: 1
+    letterSpacing: 0.08em
+rounded:
+  sm: 4px
+  md: 6px
+  lg: 8px
+  pill: 10px
+spacing:
+  xs: 2px
+  sm: 4px
+  md: 8px
+  lg: 12px
+  xl: 16px
+components:
+  panel:
+    backgroundColor: "{colors.dark-grey}"
+    rounded: "{rounded.md}"
+  panel-edge:
+    backgroundColor: "{colors.panel-edge}"
+  panel-darkest:
+    backgroundColor: "{colors.darkest}"
+    rounded: "{rounded.md}"
+  button-primary:
+    backgroundColor: "{colors.red}"
+    textColor: "{colors.white}"
+    rounded: "{rounded.md}"
+    padding: 8px
+  button-primary-hover:
+    backgroundColor: "{colors.dark-red}"
+  button-secondary:
+    backgroundColor: "{colors.blue}"
+    textColor: "{colors.white}"
+    rounded: "{rounded.md}"
+    padding: 8px
+  button-secondary-hover:
+    backgroundColor: "{colors.dark-blue}"
+  button-back:
+    backgroundColor: "{colors.orange}"
+    textColor: "{colors.white}"
+    rounded: "{rounded.md}"
+    padding: 8px
+  button-back-hover:
+    backgroundColor: "{colors.dark-orange}"
+  tab-active:
+    backgroundColor: "{colors.gold}"
+    textColor: "{colors.black}"
+    rounded: "{rounded.sm}"
+  tab-inactive:
+    backgroundColor: "transparent"
+    textColor: "{colors.grey}"
+  score-must:
+    backgroundColor: "{colors.blue}"
+    textColor: "{colors.white}"
+  score-should:
+    backgroundColor: "{colors.red}"
+    textColor: "{colors.white}"
+  glow-must:
+    backgroundColor: "{colors.gold}"
+  glow-should:
+    backgroundColor: "{colors.green-text}"
+---
+
+## Overview
+
+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 targets iPhone SE portrait (375x667) as the minimum viewport. No fat padding, no bloated margins — every pixel earns its place.
+
+## Colors
+
+All colors are eyedropped from Balatro's actual rendered shader output. Do NOT substitute with Lua source hex values — the game's shader pipeline transforms them.
+
+- **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.
+- **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.
+- **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.
+
+Must-clause items glow blue. Should-clause items glow gold/green. Non-matching items render at 40-60% opacity with slight grayscale.
+
+## Typography
+
+m6x11plus (m6x11plusplus.otf) is the ONLY font. It is a single-weight pixel font. NEVER apply font-weight bold, semibold, or any weight other than 400. Bold makes it look muddy. Use size and letter-spacing for hierarchy instead.
+
+All text is uppercase with generous letter-spacing (0.04em-0.1em) for labels and micro text. Seed codes use the display size (26px) in gold (#e4b643) with 0.04em tracking.
+
+## Layout
+
+Target: iPhone SE portrait (375x667). Components must fit without horizontal scroll. 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.
+
+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)`.
+
+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. 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)`.
+
+**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`.
+
+**Tabs (JimboTabs):** Active tab = gold background + black text. Inactive = transparent + grey text. No bold. Small radius (4px). Tabs are the ONLY navigation — no hamburger menus, no sidebars on mobile.
+
+**ScoreCol:** Must-clauses show as blue-framed boxes with checkmark/cross badge. Should-clauses show as bare sprites with a red corner count badge (x2, x3...). Unlit = 40% opacity + grayscale.
+
+**ShopTape:** Horizontal grab-scrollable strip of item sprites. Edge fades (linear-gradient masks) on left/right. Hidden scrollbar. Cursor: grab/grabbing.
+
+**PackCell:** Tap to fan — cards explode out with springy stagger (40ms delay, juice easing). Tap again to collapse. Closed state = single pack sprite with type label.
+
+**GlowRing:** Pulsing outline around JAML-hit items. `0 0 0 2px [color], 0 0 10px [color]`. Animation: opacity 0.55 → 1.0 over 1.6s ease-in-out infinite.
+
+**SeedPagerHeader:** Three columns: [left stride arrow] [identity panel with seed + copy + deck/stake] [right stride arrow]. Stride arrows are tall red bars with dark-red inset shadow. Identity panel is translucent with counter pip.
+
+## 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 iPhone SE portrait first. Desktop is a stretched phone.
+- 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.

package/dist/components/AnalyzerExplorer.js

@@ -157,7 +157,6 @@ const styles = {
     highlightTitle: {
         fontSize: 12,
         color: "#6f6fa1",
-        textTransform: "uppercase",
         letterSpacing: "0.05em",
     },
     highlightSubtitle: {
@@ -212,7 +211,6 @@ const styles = {
     highlightAnte: {
         fontSize: 11,
         color: "#a855f7",
-        textTransform: "uppercase",
         letterSpacing: "0.05em",
     },
     highlightLabel: {
@@ -248,14 +246,12 @@ const styles = {
     navLabel: {
         fontSize: 13,
         color: "#a855f7",
-        textTransform: "uppercase",
         letterSpacing: "0.05em",
         minWidth: 110,
         textAlign: "center",
     },
     navSubLabel: {
         color: "#5a5a88",
-        textTransform: "none",
         letterSpacing: "normal",
         fontSize: 11,
         marginLeft: 4,
@@ -287,7 +283,6 @@ const styles = {
     anteHeading: {
         fontSize: 14,
         color: "#a855f7",
-        textTransform: "uppercase",
         letterSpacing: "0.05em",
     },
     bossRow: {
@@ -305,7 +300,6 @@ const styles = {
     rowLabel: {
         fontSize: 11,
         color: "#5a5a88",
-        textTransform: "uppercase",
         letterSpacing: "0.05em",
         marginBottom: 4,
     },
@@ -335,7 +329,6 @@ const styles = {
         color: "#7f7fa7",
         border: "1px solid #2a2a55",
         fontSize: 11,
-        textTransform: "uppercase",
     },
     itemCard: {
         display: "flex",
@@ -386,7 +379,6 @@ const styles = {
         color: "#c7c7ef",
         border: "1px solid #35356d",
         fontSize: 11,
-        textTransform: "uppercase",
     },
     badgeAccent: {
         padding: "1px 4px",
@@ -395,7 +387,6 @@ const styles = {
         color: "#f5c842",
         border: "1px solid rgba(245,200,66,0.35)",
         fontSize: 11,
-        textTransform: "uppercase",
     },
     badgeMuted: {
         padding: "1px 4px",
@@ -404,7 +395,6 @@ const styles = {
         color: "#7f7fa7",
         border: "1px solid #2a2a55",
         fontSize: 11,
-        textTransform: "uppercase",
     },
     packChip: {
         fontSize: 13,
@@ -427,7 +417,6 @@ const styles = {
     factLabel: {
         fontSize: 11,
         color: "#7f7fa7",
-        textTransform: "uppercase",
     },
     factValue: {
         fontSize: 13,

package/dist/components/JamlAestheticSelector.js

@@ -16,7 +16,7 @@ export function JamlAestheticSelector({ value, onChange, className, style }) {
             flexDirection: "column",
             gap: 4,
             ...style,
-        }, children: [_jsx(JimboText, { size: "xs", tone: "grey", uppercase: true, children: "Seed Aesthetics" }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: AESTHETICS.map((a) => {
+        }, children: [_jsx(JimboText, { size: "xs", tone: "grey", children: "Seed Aesthetics" }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, 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",
@@ -26,9 +26,7 @@ export function JamlAestheticSelector({ value, onChange, className, style }) {
                             color: isActive ? JimboColorOption.GOLD_TEXT : JimboColorOption.GREY,
                             cursor: "pointer",
                             fontSize: 11,
-                            fontWeight: 700,
                             fontFamily: "m6x11plus, monospace",
-                            textTransform: "uppercase",
                             letterSpacing: 0.5,
                             transition: "border-color 100ms, background 100ms",
                         }, children: a.label }, a.id));

package/dist/components/JamlAnalyzerFullscreen.js

@@ -52,7 +52,7 @@ export function JamlAnalyzerFullscreen({ antes, live, enabledStreams, onEnabledS
                     } }, 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) => {
+    return (_jsxs("section", { ref: registerRef, "data-ante": ante.ante, style: styles.section, children: [_jsxs("header", { style: styles.header, children: [_jsxs("div", { children: [_jsx("div", { style: styles.anteLabel, children: "Ante" }), _jsx("div", { style: styles.anteNumber, children: ante.ante })] }), ante.voucher && (_jsxs("div", { style: styles.voucherBlock, children: [_jsx(JamlVoucher, { voucherName: ante.voucher, scale: 0.85 }), _jsx("div", { style: styles.voucherCaption, children: ante.voucher })] }))] }), _jsxs("div", { style: styles.blindRow, children: [_jsx(BlindCell, { label: "Small", tag: ante.smallBlindTag }), _jsx(BlindCell, { label: "Big", tag: ante.bigBlindTag }), ante.boss && (_jsxs("div", { style: styles.bossCell, children: [_jsx("div", { style: styles.cellLabel, children: "Boss" }), _jsx(JamlBoss, { bossName: ante.boss, scale: 0.7 }), _jsx("div", { style: styles.cellCaption, children: ante.boss })] }))] }), ante.packs && ante.packs.length > 0 && (_jsxs("div", { style: styles.streamLane, children: [_jsx("div", { style: styles.streamLabel, children: "Packs" }), _jsx("div", { style: styles.packRow, children: ante.packs.map((pack, i) => (_jsx("div", { style: styles.packPill, children: pack }, `${ante.ante}-pack-${i}`))) })] })), enabledStreams.map((key) => {
                 const isShop = key === "shop";
                 const initialItems = isShop
                     ? (ante.shop ?? []).map((item) => ({
@@ -70,7 +70,7 @@ function StreamLane({ ante, streamKey, live, chunkSize, initialItems }) {
     const stream = useMotelyStream(handle?.initStream ?? null, handle?.nextItem ?? null, [ante, streamKey, live?.seed, live?.deck, live?.stake], initialItems);
     const desired = live?.desiredNames ?? new Set();
     const toneColor = TONE_COLORS[meta.tone] ?? TONE_COLORS.default;
-    return (_jsxs("div", { style: styles.streamLane, children: [_jsxs("div", { style: { ...styles.streamLabel, color: toneColor }, children: [meta.label.toUpperCase(), stream.items.length > 0 ? ` · ${stream.items.length}` : ""] }), _jsx(ShopRow, { items: stream.items, desired: desired, loadingMore: stream.loadingMore, ready: stream.ready, onPullMore: () => stream.pullMore(chunkSize) }), stream.error && _jsxs("div", { style: styles.errorLine, children: ["stream error: ", stream.error] })] }));
+    return (_jsxs("div", { style: styles.streamLane, children: [_jsxs("div", { style: { ...styles.streamLabel, color: toneColor }, children: [meta.label, stream.items.length > 0 ? ` · ${stream.items.length}` : ""] }), _jsx(ShopRow, { items: stream.items, desired: desired, loadingMore: stream.loadingMore, ready: stream.ready, onPullMore: () => stream.pullMore(chunkSize) }), stream.error && _jsxs("div", { style: styles.errorLine, children: ["stream error: ", stream.error] })] }));
 }
 function BlindCell({ label, tag }) {
     if (!tag)
@@ -139,7 +139,7 @@ function StreamPicker({ enabled, onChange, open, onToggle }) {
             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) => {
+    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: {

package/dist/components/JamlIde.js

@@ -61,7 +61,6 @@ function ResultsView({ results }) {
                                     minWidth: 80,
                                 }, children: result.seed }), result.score !== undefined ? (_jsxs(_Fragment, { children: [_jsx(TallyBar, { value: result.score, max: maxScore }), _jsx("span", { style: {
                                             fontSize: 12,
-                                            fontWeight: 700,
                                             color: result.score > 0 ? JimboColorOption.GREEN_TEXT : JimboColorOption.GREY,
                                             minWidth: 36,
                                             textAlign: "right",
@@ -83,7 +82,6 @@ function ResultsView({ results }) {
                                             whiteSpace: "nowrap",
                                         }, children: label }), _jsx(TallyBar, { value: val, max: maxVal }), _jsx("span", { style: {
                                             fontSize: 11,
-                                            fontWeight: 700,
                                             color: val > 0 ? JimboColorOption.GREEN_TEXT : JimboColorOption.DARK_GREY,
                                             minWidth: 24,
                                             textAlign: "right",

package/dist/components/JamlSeedInput.js

@@ -13,14 +13,13 @@ export function JamlSeedInput({ value, onChange, placeholder = "Enter seed (e.g.
         setInternal(raw);
         onChange?.(raw);
     };
-    return (_jsxs("div", { className: className, style: { display: "flex", flexDirection: "column", gap: 4, ...style }, children: [_jsx(JimboText, { size: "xs", tone: "grey", uppercase: true, children: "Seed" }), _jsx("input", { type: "text", value: display, onChange: handleChange, placeholder: placeholder, maxLength: 8, spellCheck: false, autoComplete: "off", style: {
+    return (_jsxs("div", { className: className, style: { display: "flex", flexDirection: "column", gap: 4, ...style }, children: [_jsx(JimboText, { size: "xs", tone: "grey", children: "Seed" }), _jsx("input", { type: "text", value: display, onChange: handleChange, placeholder: placeholder, maxLength: 8, spellCheck: false, autoComplete: "off", style: {
                     padding: "6px 10px",
                     borderRadius: 6,
                     border: `2px solid ${!isValid ? JimboColorOption.RED : display.length === 8 ? JimboColorOption.GREEN : JimboColorOption.PANEL_EDGE}`,
                     background: JimboColorOption.DARKEST,
                     color: JimboColorOption.GOLD_TEXT,
                     fontSize: 16,
-                    fontWeight: 900,
                     fontFamily: "m6x11plus, monospace",
                     letterSpacing: 2,
                     textTransform: "uppercase",

package/dist/components/JamlSpeedometer.js

@@ -50,5 +50,5 @@ export function JamlSpeedometer({ seedsPerSecond, totalSearched, matchingSeeds,
                                 transformOrigin: "60px 65px",
                                 transform: `rotate(${angle}deg)`,
                                 transition: "transform 300ms ease",
-                            } }), _jsx("circle", { cx: 60, cy: 65, r: 4, fill: JimboColorOption.RED })] }) }), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 20, fontWeight: 900, fontFamily: "m6x11plus, monospace", color: isActive ? speedColor : JimboColorOption.GREY }, children: isActive ? formatSpeed(seedsPerSecond) : "---" }), _jsx(JimboText, { size: "xs", tone: "grey", uppercase: true, children: "seeds / sec" })] }), _jsxs("div", { style: { display: "flex", gap: 16, marginTop: 2 }, children: [_jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 13, fontWeight: 700, fontFamily: "m6x11plus, monospace", color: JimboColorOption.WHITE }, children: formatCount(totalSearched) }), _jsx(JimboText, { size: "xs", tone: "grey", uppercase: true, children: "searched" })] }), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 13, fontWeight: 700, fontFamily: "m6x11plus, monospace", color: JimboColorOption.GREEN_TEXT }, children: formatCount(matchingSeeds) }), _jsx(JimboText, { size: "xs", tone: "grey", uppercase: true, children: "matches" })] })] })] }));
+                            } }), _jsx("circle", { cx: 60, cy: 65, r: 4, fill: JimboColorOption.RED })] }) }), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 20, fontFamily: "m6x11plus, monospace", color: isActive ? speedColor : JimboColorOption.GREY }, children: isActive ? formatSpeed(seedsPerSecond) : "---" }), _jsx(JimboText, { size: "xs", tone: "grey", children: "seeds / sec" })] }), _jsxs("div", { style: { display: "flex", gap: 16, marginTop: 2 }, children: [_jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 13, fontFamily: "m6x11plus, monospace", color: JimboColorOption.WHITE }, children: formatCount(totalSearched) }), _jsx(JimboText, { size: "xs", tone: "grey", children: "searched" })] }), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 13, fontFamily: "m6x11plus, monospace", color: JimboColorOption.GREEN_TEXT }, children: formatCount(matchingSeeds) }), _jsx(JimboText, { size: "xs", tone: "grey", children: "matches" })] })] })] }));
 }

package/dist/ui/codeBlock.js

@@ -9,7 +9,7 @@ export function JimboCodeBlock({ code, language, filename, className = '' }) {
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     };
-    return (_jsxs("div", { className: 'rounded-xl overflow-hidden flex flex-col border-2 ' + className, style: { backgroundColor: JimboColorOption.DARKEST, borderColor: JimboColorOption.PANEL_EDGE, boxShadow: '0 3px 0 0 rgba(0,0,0,0.5)' }, children: [_jsxs("div", { style: { padding: '0.5rem 1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px solid ${JimboColorOption.INNER_BORDER}` }, children: [_jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [filename && _jsx("span", { style: { fontSize: 10, textTransform: 'uppercase', opacity: 0.6 }, children: filename }), language && _jsx("span", { style: { fontSize: 9, padding: '1px 6px', borderRadius: 3, background: 'rgba(0,0,0,0.4)', color: '#60a5fa', textTransform: 'uppercase' }, children: language })] }), _jsx("button", { onClick: copy, title: "Copy", style: { padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: copied ? '#4ade80' : 'rgba(255,255,255,0.5)', display: 'flex' }, children: copied
+    return (_jsxs("div", { className: 'rounded-xl overflow-hidden flex flex-col border-2 ' + className, style: { backgroundColor: JimboColorOption.DARKEST, borderColor: JimboColorOption.PANEL_EDGE, boxShadow: '0 3px 0 0 rgba(0,0,0,0.5)' }, children: [_jsxs("div", { style: { padding: '0.5rem 1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px solid ${JimboColorOption.INNER_BORDER}` }, children: [_jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [filename && _jsx("span", { style: { fontSize: 10, opacity: 0.6 }, children: filename }), language && _jsx("span", { style: { fontSize: 9, padding: '1px 6px', borderRadius: 3, background: 'rgba(0,0,0,0.4)', color: '#60a5fa' }, children: language })] }), _jsx("button", { onClick: copy, title: "Copy", style: { padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: copied ? '#4ade80' : 'rgba(255,255,255,0.5)', display: 'flex' }, children: copied
                             ? _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })
                             : _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }) })] }), _jsx("pre", { style: { padding: '1rem', overflowX: 'auto', fontFamily: 'monospace', fontSize: '0.875rem', lineHeight: 1.6, color: '#f6f0d5', margin: 0 }, children: _jsx("code", { children: code }) })] }));
 }

package/dist/ui/jimboCopyRow.js

@@ -12,7 +12,7 @@ export function JimboCopyRow({ value, label }) {
             setTimeout(() => setCopied(false), 1500);
         });
     }
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [label && (_jsx(JimboText, { size: "xs", tone: "grey", uppercase: true, style: { letterSpacing: 2 }, children: label })), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [label && (_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 2 }, children: label })), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: {
                             flex: 1,
                             padding: '6px 10px',
                             background: C.DARKEST,
@@ -31,6 +31,5 @@ export function JimboCopyRow({ value, label }) {
                             cursor: 'pointer',
                             flexShrink: 0,
                             transition: 'color 0.15s, background 0.15s, border-color 0.15s',
-                            textTransform: 'uppercase',
                         }, children: copied ? 'Copied' : 'Copy' })] })] }));
 }

package/dist/ui/jimboFilterBar.js

@@ -9,7 +9,7 @@ import { JimboText } from './jimboText.js';
  *
  * Pass `sortOptions` to show the sort side; omit to show search only.
  */
-export function JimboFilterBar({ search, onSearchChange, searchPlaceholder = 'SEARCH...', searchLabel = 'Search', sort, onSortChange, sortLabel = 'Sort By', sortOptions, className = '', style, }) {
+export function JimboFilterBar({ search, onSearchChange, searchPlaceholder = 'Search...', searchLabel = 'Search', sort, onSortChange, sortLabel = 'Sort By', sortOptions, className = '', style, }) {
     return (_jsxs("div", { className: className, style: {
             display: 'flex',
             gap: 24,
@@ -35,7 +35,6 @@ export function JimboFilterBar({ search, onSearchChange, searchPlaceholder = 'SE
                                 fontFamily: "'m6x11plus', 'Courier New', monospace",
                                 fontSize: 20,
                                 letterSpacing: 2,
-                                textTransform: 'uppercase',
                                 outline: 'none',
                             } })] }) })) : null, sortOptions && onSortChange ? (_jsx(FloatingLabelField, { label: sortLabel, children: _jsxs("div", { style: { position: 'relative' }, children: [_jsx("select", { value: sort ?? sortOptions[0]?.value, onChange: (e) => onSortChange(e.target.value), style: {
                                 appearance: 'none',
@@ -50,7 +49,6 @@ export function JimboFilterBar({ search, onSearchChange, searchPlaceholder = 'SE
                                 fontFamily: "'m6x11plus', 'Courier New', monospace",
                                 fontSize: 18,
                                 letterSpacing: 2,
-                                textTransform: 'uppercase',
                                 padding: '14px 48px 14px 24px',
                                 minWidth: 200,
                                 textAlign: 'center',
@@ -67,7 +65,7 @@ function FloatingLabelField({ label, children }) {
                     borderRadius: 6,
                     padding: '4px 12px',
                     zIndex: 2,
-                }, children: _jsx(JimboText, { size: "xs", uppercase: true, children: label }) }), children] }));
+                }, children: _jsx(JimboText, { size: "xs", children: label }) }), children] }));
 }
 function SearchIcon() {
     return (_jsxs("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("circle", { cx: 11, cy: 11, r: 8 }), _jsx("line", { x1: 21, y1: 21, x2: 16.65, y2: 16.65 })] }));

package/dist/ui/showcase.js

@@ -16,7 +16,7 @@ export function Showcase({ hotFilters = [], recentFinds = [], stats = DEFAULT_ST
             width: '100%', height: '100%', background: C.DARKEST,
             display: 'flex', flexDirection: 'column',
             fontFamily: 'm6x11plus, monospace', color: C.WHITE, overflow: 'hidden',
-        }, children: [_jsxs("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '18px 14px 10px' }, children: [_jsxs("div", { style: { textAlign: 'center', marginBottom: 18 }, children: [_jsx("div", { style: { fontSize: 32, letterSpacing: 3, lineHeight: 1, color: C.GOLD, textShadow: '2px 2px 0 rgba(0,0,0,.8)' }, children: "Balatro" }), _jsx("div", { style: { fontSize: 14, letterSpacing: 4, color: C.GREY, marginTop: 4, textShadow: '1px 1px 0 rgba(0,0,0,.8)' }, children: "SEED \u00B7 CURATOR" })] }), _jsx("div", { style: {
+        }, children: [_jsxs("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '18px 14px 10px' }, children: [_jsxs("div", { style: { textAlign: 'center', marginBottom: 18 }, children: [_jsx("div", { style: { fontSize: 32, letterSpacing: 3, lineHeight: 1, color: C.GOLD, textShadow: '2px 2px 0 rgba(0,0,0,.8)' }, children: "Balatro" }), _jsx("div", { style: { fontSize: 14, letterSpacing: 4, color: C.GREY, marginTop: 4, textShadow: '1px 1px 0 rgba(0,0,0,.8)' }, children: "Seed \u00B7 Curator" })] }), _jsx("div", { style: {
                             background: C.DARK_GREY, borderRadius: 6, padding: 10,
                             border: `2px solid ${C.PANEL_EDGE}`, boxShadow: `0 2px 0 ${C.BLACK}`,
                             display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, textAlign: 'center', marginBottom: 16,
@@ -24,11 +24,11 @@ export function Showcase({ hotFilters = [], recentFinds = [], stats = DEFAULT_ST
                             [stats.searched, 'searched'],
                             [stats.matches, 'matches'],
                             [stats.speed, 'speed'],
-                        ].map(([n, l]) => (_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, color: C.GOLD, textShadow: '1px 1px 0 rgba(0,0,0,.8)' }, children: n }), _jsx("div", { style: { fontSize: 9, color: C.GREY, letterSpacing: 2, marginTop: 2 }, children: l.toUpperCase() })] }, l))) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }, children: [_jsx("div", { style: {
+                        ].map(([n, l]) => (_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, color: C.GOLD, textShadow: '1px 1px 0 rgba(0,0,0,.8)' }, children: n }), _jsx("div", { style: { fontSize: 9, color: C.GREY, letterSpacing: 2, marginTop: 2 }, children: l })] }, l))) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }, children: [_jsx("div", { style: {
                                     fontSize: 11, letterSpacing: 2, padding: '2px 8px',
                                     background: C.BLUE, color: C.WHITE, borderRadius: 3,
                                     textShadow: '1px 1px 0 rgba(0,0,0,.8)',
-                                }, children: "HOT FILTERS" }), _jsx("div", { style: { flex: 1, height: 2, background: `${C.BLUE}55`, borderRadius: 1 } })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }, children: hotFilters.map((f, i) => {
+                                }, children: "Hot Filters" }), _jsx("div", { style: { flex: 1, height: 2, background: `${C.BLUE}55`, borderRadius: 1 } })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }, children: hotFilters.map((f, i) => {
                             const tColor = TONE_COLOR[f.tone];
                             return (_jsxs("div", { style: {
                                     background: C.DARK_GREY, borderRadius: 6, padding: 10,
@@ -43,7 +43,7 @@ export function Showcase({ hotFilters = [], recentFinds = [], stats = DEFAULT_ST
                                     fontSize: 11, letterSpacing: 2, padding: '2px 8px',
                                     background: C.GREEN, color: C.WHITE, borderRadius: 3,
                                     textShadow: '1px 1px 0 rgba(0,0,0,.8)',
-                                }, children: "RECENT FINDS" }), _jsx("div", { style: { flex: 1, height: 2, background: `${C.GREEN}55`, borderRadius: 1 } })] }), _jsx("div", { style: {
+                                }, children: "Recent Finds" }), _jsx("div", { style: { flex: 1, height: 2, background: `${C.GREEN}55`, borderRadius: 1 } })] }), _jsx("div", { style: {
                             background: C.DARK_GREY, borderRadius: 6, padding: '8px 10px',
                             border: `2px solid ${C.PANEL_EDGE}`, boxShadow: `0 2px 0 ${C.BLACK}`,
                             fontSize: 11, color: C.GREY, letterSpacing: 1, lineHeight: 1.7,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",
@@ -34,9 +34,11 @@
   ],
   "files": [
     "dist",
-    "assets",
+    "assets/*.png",
+    "assets/fonts",
     "fonts.css",
     "README.md",
+    "DESIGN.md",
     "LICENSE"
   ],
   "scripts": {
@@ -108,12 +110,13 @@
     "@types/three": "^0.184.0",
     "@vitejs/plugin-react": "^5.0.4",
     "monaco-editor": "^0.55.1",
-    "motely-wasm": "link:../JammySeedFinder/src/MotelyJAML/Motely.Wasm/bin/motely-wasm",
-"react": "^19.2.4",
+    "motely-wasm": "^14.0.2",
+    "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-icons": "^5.6.0",
     "three": "^0.184.0",
     "typescript": "^5.9.3",
-    "vite": "^8.0.9"
+    "vite": "^8.0.9",
+    "@google/design.md": "^0.1.1"
   }
 }

package/assets/Balatro Seed Curator (DesignsV2)/.design-canvas.state.json

@@ -1 +0,0 @@
-{"sections":{"seed-detail":{"labels":{"hifi":"Hi-fi · Balatro native"}}}}