jaml-ui 0.16.0 → 0.17.1

package/dist/ui/jimboCopyRow.d.ts

@@ -2,4 +2,8 @@ export interface JimboCopyRowProps {
     value: string;
     label?: string;
 }
+/**
+ * Inline copy-to-clipboard row with label + value + button.
+ * All styling via jimbo.css `.j-copy-row` classes.
+ */
 export declare function JimboCopyRow({ value, label }: JimboCopyRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboCopyRow.js

@@ -1,35 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { JimboColorOption } from './tokens.js';
 import { JimboText } from './jimboText.js';
+/**
+ * Inline copy-to-clipboard row with label + value + button.
+ * All styling via jimbo.css `.j-copy-row` classes.
+ */
 export function JimboCopyRow({ value, label }) {
     const [copied, setCopied] = useState(false);
-    const C = JimboColorOption;
     function copy() {
         navigator.clipboard.writeText(value).then(() => {
             setCopied(true);
             setTimeout(() => setCopied(false), 1500);
         });
     }
-    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,
-                            border: `2px solid ${C.PANEL_EDGE}`,
-                            borderRadius: 4,
-                            wordBreak: 'break-all',
-                        }, children: _jsx(JimboText, { size: "sm", children: value }) }), _jsx("button", { type: "button", onClick: copy, style: {
-                            fontFamily: "'m6x11plus', 'Courier New', monospace",
-                            fontSize: 11,
-                            letterSpacing: 2,
-                            color: copied ? C.GREEN_TEXT : C.GOLD_TEXT,
-                            background: copied ? 'rgba(53,189,134,0.12)' : 'rgba(228,182,67,0.12)',
-                            border: `1px solid ${copied ? C.GREEN_TEXT : C.GOLD_TEXT}`,
-                            borderRadius: 4,
-                            padding: '4px 12px',
-                            cursor: 'pointer',
-                            flexShrink: 0,
-                            transition: 'color 0.15s, background 0.15s, border-color 0.15s',
-                        }, children: copied ? 'Copied' : 'Copy' })] })] }));
+    return (_jsxs("div", { className: "j-copy-row", children: [label && (_jsx(JimboText, { size: "xs", tone: "grey", className: "j-copy-row__label", children: label })), _jsxs("div", { className: "j-copy-row__field", children: [_jsx("div", { className: "j-copy-row__value", children: _jsx(JimboText, { size: "sm", children: value }) }), _jsx("button", { type: "button", className: "j-copy-row__btn", "data-copied": copied, onClick: copy, children: copied ? 'Copied' : 'Copy' })] })] }));
 }

package/dist/ui/jimboFilterBar.d.ts

@@ -17,9 +17,6 @@ export interface JimboFilterBarProps {
 }
 /**
  * Generic Balatro-styled filter row: search input with floating pill label
- * + optional sort dropdown with floating pill label. Adapted from
- * weejoker's FilterBar — no hardcoded sort options, no lucide dep.
- *
- * Pass `sortOptions` to show the sort side; omit to show search only.
+ * + optional sort dropdown with floating pill label.
  */
 export declare function JimboFilterBar({ search, onSearchChange, searchPlaceholder, searchLabel, sort, onSortChange, sortLabel, sortOptions, className, style, }: JimboFilterBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboFilterBar.js

@@ -1,71 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboColorOption } from './tokens.js';
 import { JimboText } from './jimboText.js';
 /**
  * Generic Balatro-styled filter row: search input with floating pill label
- * + optional sort dropdown with floating pill label. Adapted from
- * weejoker's FilterBar — no hardcoded sort options, no lucide dep.
- *
- * Pass `sortOptions` to show the sort side; omit to show search only.
+ * + optional sort dropdown with floating pill label.
  */
 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,
-            padding: 16,
-            backgroundColor: JimboColorOption.DARK_GREY,
-            border: `4px solid ${JimboColorOption.BORDER_SILVER}`,
-            boxShadow: `0 3px 0 0 ${JimboColorOption.BORDER_SOUTH}`,
-            borderRadius: 12,
-            position: 'relative',
-            flexWrap: 'wrap',
-            ...style,
-        }, children: [onSearchChange ? (_jsx(FloatingLabelField, { label: searchLabel, children: _jsxs("div", { style: { position: 'relative' }, children: [_jsx("div", { style: { position: 'absolute', left: 0, top: 0, bottom: 0, width: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none', color: JimboColorOption.BLUE, zIndex: 1 }, children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "text", value: search ?? '', onChange: (e) => onSearchChange(e.target.value), placeholder: searchPlaceholder, style: {
-                                width: '100%',
-                                paddingLeft: 48,
-                                paddingRight: 16,
-                                paddingTop: 14,
-                                paddingBottom: 14,
-                                backgroundColor: JimboColorOption.DARKEST,
-                                border: 'none',
-                                borderBottom: `4px solid ${JimboColorOption.PANEL_EDGE}`,
-                                borderRadius: 8,
-                                color: JimboColorOption.WHITE,
-                                fontFamily: "'m6x11plus', 'Courier New', monospace",
-                                fontSize: 20,
-                                letterSpacing: 2,
-                                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',
-                                WebkitAppearance: 'none',
-                                MozAppearance: 'none',
-                                backgroundColor: JimboColorOption.ORANGE,
-                                color: JimboColorOption.WHITE,
-                                border: 'none',
-                                borderBottom: `4px solid ${JimboColorOption.DARK_ORANGE}`,
-                                borderRadius: 8,
-                                cursor: 'pointer',
-                                fontFamily: "'m6x11plus', 'Courier New', monospace",
-                                fontSize: 18,
-                                letterSpacing: 2,
-                                padding: '14px 48px 14px 24px',
-                                minWidth: 200,
-                                textAlign: 'center',
-                                outline: 'none',
-                            }, children: sortOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) }), _jsx("div", { style: { position: 'absolute', right: 16, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', color: JimboColorOption.WHITE, opacity: 0.85 }, children: _jsx(SortIcon, {}) })] }) })) : null] }));
-}
-function FloatingLabelField({ label, children }) {
-    return (_jsxs("div", { style: { flex: 1, minWidth: 200, position: 'relative', marginTop: 10 }, children: [_jsx("div", { style: {
-                    position: 'absolute',
-                    top: -14,
-                    left: 16,
-                    backgroundColor: JimboColorOption.RED,
-                    border: `2px solid ${JimboColorOption.DARK_RED}`,
-                    borderRadius: 6,
-                    padding: '4px 12px',
-                    zIndex: 2,
-                }, children: _jsx(JimboText, { size: "xs", children: label }) }), children] }));
+    return (_jsxs("div", { className: `j-filter-bar ${className}`, style: style, children: [onSearchChange ? (_jsxs("div", { className: "j-filter-bar__field", children: [_jsx("div", { className: "j-filter-bar__pill", children: _jsx(JimboText, { size: "xs", children: searchLabel }) }), _jsxs("div", { className: "j-relative", children: [_jsx("div", { className: "j-filter-bar__search-icon", children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "text", value: search ?? '', onChange: (e) => onSearchChange(e.target.value), placeholder: searchPlaceholder, className: "j-filter-bar__input" })] })] })) : null, sortOptions && onSortChange ? (_jsxs("div", { className: "j-filter-bar__field", children: [_jsx("div", { className: "j-filter-bar__pill", children: _jsx(JimboText, { size: "xs", children: sortLabel }) }), _jsxs("div", { className: "j-relative", children: [_jsx("select", { value: sort ?? sortOptions[0]?.value, onChange: (e) => onSortChange(e.target.value), className: "j-filter-bar__select", children: sortOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) }), _jsx("div", { className: "j-filter-bar__sort-icon", children: _jsx(SortIcon, {}) })] })] })) : null] }));
 }
 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/jimboFlankNav.d.ts

@@ -12,7 +12,6 @@ export interface JimboFlankNavProps {
 }
 /**
  * Prev/next navigation with flanking buttons around a central stage.
- * Generic adaptation of weejoker's DayNavigation — no hardcoded "Day"
- * labels, no lucide dep (inline chevron SVGs).
+ * No hardcoded labels, no lucide dep (inline chevron SVGs).
  */
 export declare function JimboFlankNav({ onPrev, onNext, canPrev, canNext, prevLabel, nextLabel, children, className, style, }: JimboFlankNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboFlankNav.js

@@ -1,43 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { JimboColorOption, JIMBO_ANIMATIONS } from './tokens.js';
 /**
  * Prev/next navigation with flanking buttons around a central stage.
- * Generic adaptation of weejoker's DayNavigation — no hardcoded "Day"
- * labels, no lucide dep (inline chevron SVGs).
+ * No hardcoded labels, no lucide dep (inline chevron SVGs).
  */
 export function JimboFlankNav({ onPrev, onNext, canPrev = true, canNext = true, prevLabel = 'Previous', nextLabel = 'Next', children, className = '', style, }) {
-    return (_jsxs("div", { className: className, style: {
-            display: 'flex',
-            alignItems: 'stretch',
-            justifyContent: 'center',
-            gap: 8,
-            width: '100%',
-            position: 'relative',
-            ...style,
-        }, children: [_jsx(NavButton, { direction: "left", onClick: onPrev, disabled: !canPrev, "aria-label": prevLabel }), _jsx("div", { style: { position: 'relative', flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }, children: children }), _jsx(NavButton, { direction: "right", onClick: onNext, disabled: !canNext, "aria-label": nextLabel })] }));
+    return (_jsxs("div", { className: `j-flank ${className}`, style: style, children: [_jsx(NavButton, { direction: "left", onClick: onPrev, disabled: !canPrev, "aria-label": prevLabel }), _jsx("div", { className: "j-flank__content", children: children }), _jsx(NavButton, { direction: "right", onClick: onNext, disabled: !canNext, "aria-label": nextLabel })] }));
 }
 function NavButton({ direction, onClick, disabled, 'aria-label': ariaLabel, }) {
     const [pressed, setPressed] = React.useState(false);
-    return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, "aria-label": ariaLabel, title: ariaLabel, onMouseDown: () => !disabled && setPressed(true), onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onTouchStart: () => !disabled && setPressed(true), onTouchEnd: () => setPressed(false), style: {
-            flexShrink: 0,
-            width: 48,
-            border: 'none',
-            borderRadius: 8,
-            cursor: disabled ? 'default' : 'pointer',
-            opacity: 1,
-            backgroundColor: disabled ? JimboColorOption.DARK_RED : JimboColorOption.RED,
-            color: JimboColorOption.WHITE,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            transform: pressed ? `translateY(${JIMBO_ANIMATIONS.PRESS_TRANSLATE_Y}px)` : 'translateY(0)',
-            boxShadow: pressed || disabled ? 'none' : `0 ${JIMBO_ANIMATIONS.PRESS_TRANSLATE_Y}px 0 0 ${JimboColorOption.DARK_RED}`,
-            transition: `transform ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease, box-shadow ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease, background-color ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease`,
-        }, children: _jsx(ChevronSvg, { direction: direction }) }));
+    return (_jsx("button", { type: "button", className: "j-flank__btn", "data-pressed": pressed && !disabled, onClick: onClick, disabled: disabled, "aria-label": ariaLabel, title: ariaLabel, onMouseDown: () => !disabled && setPressed(true), onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onTouchStart: () => !disabled && setPressed(true), onTouchEnd: () => setPressed(false), children: _jsx(ChevronSvg, { direction: direction }) }));
 }
 function ChevronSvg({ direction }) {
-    const points = direction === 'left' ? '20,4 8,16 20,28' : '12,4 24,16 12,28';
-    return (_jsx("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("polyline", { points: points }) }));
+    const points = direction === 'left' ? '18,4 8,14 18,24' : '10,4 20,14 10,24';
+    return (_jsx("svg", { width: 28, height: 28, viewBox: "0 0 28 28", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("polyline", { points: points }) }));
 }

package/dist/ui/jimboTabs.d.ts

@@ -12,14 +12,10 @@ export interface JimboTabsProps {
 }
 /**
  * Horizontal tab navigation with bouncing triangle indicator on the active
- * tab. Ported from JAMMY's jimbo-ui/Tabs.tsx — triangle attaches to each
- * button and animates only on the active one.
+ * tab. Triangle attaches to each button and animates only on the active one.
  */
 export declare function JimboTabs({ tabs, activeTab, onTabChange, className, style }: JimboTabsProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Vertical tab strip — rotated labels (writing-mode) for space efficiency.
- * Ported from JAMMY's JimboVerticalTabs. Typical use: inline on the left
- * side of a content panel to pick between content categories
- * (e.g. JOKERS / CONSUMABLES / VOUCHERS).
  */
 export declare function JimboVerticalTabs({ tabs, activeTab, onTabChange, className, style }: JimboTabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboTabs.js

@@ -1,59 +1,24 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { JimboColorOption, JIMBO_ANIMATIONS } from './tokens.js';
 import { JimboText } from './jimboText.js';
 /**
  * Horizontal tab navigation with bouncing triangle indicator on the active
- * tab. Ported from JAMMY's jimbo-ui/Tabs.tsx — triangle attaches to each
- * button and animates only on the active one.
+ * tab. Triangle attaches to each button and animates only on the active one.
  */
 export function JimboTabs({ tabs, activeTab, onTabChange, className = '', style }) {
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: className, style: { display: 'flex', gap: 8, alignItems: 'flex-end', flexWrap: 'wrap', ...style }, children: tabs.map((tab) => (_jsx(TabButton, { label: tab.label, active: activeTab === tab.id, onClick: () => onTabChange(tab.id) }, tab.id))) }), _jsx("style", { children: JIMBO_BOUNCE_KEYFRAMES })] }));
+    return (_jsx("div", { className: `j-tabs ${className}`, style: style, children: tabs.map((tab) => (_jsx(TabButton, { label: tab.label, active: activeTab === tab.id, onClick: () => onTabChange(tab.id) }, tab.id))) }));
 }
-const JIMBO_BOUNCE_KEYFRAMES = `
-  @keyframes jimbo-bounce {
-    0%, 100% { transform: translateY(0); }
-    50%      { transform: translateY(-3px); }
-  }
-`;
 function TabButton({ label, active, onClick }) {
     const [pressed, setPressed] = useState(false);
-    return (_jsxs("div", { style: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("div", { style: {
-                    marginBottom: 4,
-                    opacity: active ? 1 : 0,
-                    transition: 'opacity 150ms',
-                    animation: active ? 'jimbo-bounce 0.8s cubic-bezier(0.68, 0, 0.68, 1) infinite' : 'none',
-                }, "aria-hidden": true, children: _jsx("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: JimboColorOption.RED, children: _jsx("polygon", { points: "7,10 0,0 14,0" }) }) }), _jsx("button", { type: "button", onClick: onClick, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onTouchStart: () => setPressed(true), onTouchEnd: () => setPressed(false), style: {
-                    border: 'none',
-                    cursor: 'pointer',
-                    borderRadius: 8,
-                    padding: '8px 16px',
-                    backgroundColor: JimboColorOption.RED,
-                    transform: pressed ? `translateY(${JIMBO_ANIMATIONS.PRESS_TRANSLATE_Y}px)` : 'translateY(0)',
-                    boxShadow: pressed ? 'none' : `0 ${JIMBO_ANIMATIONS.PRESS_TRANSLATE_Y}px 0 0 ${JimboColorOption.BLACK}80`,
-                    transition: `transform ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease, box-shadow ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease`,
-                }, children: _jsx(JimboText, { size: "sm", uppercase: true, children: label }) })] }));
+    return (_jsxs("div", { className: "j-tab", children: [_jsx("div", { className: "j-tab__indicator", "data-active": active, "aria-hidden": true, children: _jsx("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: "var(--j-red)", children: _jsx("polygon", { points: "7,10 0,0 14,0" }) }) }), _jsx("button", { type: "button", className: "j-tab__btn", "data-pressed": pressed, onClick: onClick, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), onMouseEnter: () => { }, onMouseLeave: () => { setPressed(false); }, onTouchStart: () => setPressed(true), onTouchEnd: () => setPressed(false), children: _jsx(JimboText, { size: "sm", children: label }) })] }));
 }
 /**
  * Vertical tab strip — rotated labels (writing-mode) for space efficiency.
- * Ported from JAMMY's JimboVerticalTabs. Typical use: inline on the left
- * side of a content panel to pick between content categories
- * (e.g. JOKERS / CONSUMABLES / VOUCHERS).
  */
 export function JimboVerticalTabs({ tabs, activeTab, onTabChange, className = '', style }) {
-    return (_jsx("div", { className: className, style: { display: 'flex', flexDirection: 'column', gap: 4, ...style }, children: tabs.map((tab) => {
+    return (_jsx("div", { className: `j-vtabs ${className}`, style: style, children: tabs.map((tab) => {
             const isActive = activeTab === tab.id;
-            return (_jsx("button", { type: "button", onClick: () => onTabChange(tab.id), style: {
-                    border: 'none',
-                    cursor: 'pointer',
-                    borderRadius: '8px 0 0 8px',
-                    padding: '16px 8px',
-                    backgroundColor: isActive ? JimboColorOption.DARK_GREY : JimboColorOption.INNER_BORDER,
-                    writingMode: 'vertical-rl',
-                    textOrientation: 'mixed',
-                    transform: 'rotate(180deg)',
-                    transition: 'background-color 120ms ease',
-                }, children: _jsx(JimboText, { size: "sm", uppercase: true, tone: isActive ? 'default' : 'grey', children: tab.label }) }, tab.id));
+            return (_jsx("button", { type: "button", className: "j-vtab", onClick: () => onTabChange(tab.id), children: _jsx(JimboText, { size: "sm", tone: isActive ? 'default' : 'grey', children: tab.label }) }, tab.id));
         }) }));
 }

package/dist/ui/jimboText.d.ts

@@ -23,4 +23,4 @@ export interface JimboTextProps extends React.HTMLAttributes<HTMLElement> {
  * so the @font-face declaration lands (font is base64-embedded, no
  * runtime fetch).
  */
-export declare function JimboText({ tone, size, shadow, uppercase, letterSpacing, as: Tag, style, children, ...rest }: JimboTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function JimboText({ tone, size, shadow, uppercase, letterSpacing, as: Tag, className, style, children, ...rest }: JimboTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboText.js

@@ -1,25 +1,5 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { JimboColorOption } from './tokens.js';
-const TONE_COLOR = {
-    default: JimboColorOption.WHITE,
-    mult: JimboColorOption.RED,
-    chips: JimboColorOption.BLUE,
-    gold: JimboColorOption.GOLD_TEXT,
-    green: JimboColorOption.GREEN_TEXT,
-    red: JimboColorOption.RED,
-    blue: JimboColorOption.BLUE,
-    orange: JimboColorOption.ORANGE_TEXT,
-    purple: JimboColorOption.PURPLE,
-    grey: JimboColorOption.GREY,
-};
-const SIZE_PX = {
-    xs: 10,
-    sm: 12,
-    md: 14,
-    lg: 18,
-    xl: 24,
-};
 /**
  * Canonical pixel-font text wrapper. Uses `m6x11plus` as its family and
  * applies the authentic Balatro drop shadow by default. Prefer this over
@@ -30,16 +10,19 @@ const SIZE_PX = {
  * so the @font-face declaration lands (font is base64-embedded, no
  * runtime fetch).
  */
-export function JimboText({ tone = 'default', size = 'md', shadow = true, uppercase = false, letterSpacing, as: Tag = 'span', style, children, ...rest }) {
-    const resolvedLetterSpacing = letterSpacing ?? (uppercase ? 2 : undefined);
-    return (_jsx(Tag, { style: {
-            fontFamily: "'m6x11plus', 'Courier New', monospace",
-            fontSize: SIZE_PX[size],
-            color: TONE_COLOR[tone],
-            textShadow: shadow ? `1px 1px 0 ${JimboColorOption.BLACK}cc` : 'none',
-            textTransform: uppercase ? 'uppercase' : 'none',
-            letterSpacing: resolvedLetterSpacing,
-            lineHeight: 1.2,
-            ...style,
-        }, ...rest, children: children }));
+export function JimboText({ tone = 'default', size = 'md', shadow = true, uppercase = false, letterSpacing, as: Tag = 'span', className = '', style, children, ...rest }) {
+    const sizeClass = `j-text--${size}`;
+    const toneClass = `j-text--${tone}`;
+    const shadowClass = shadow ? '' : 'j-text--no-shadow';
+    const upperClass = uppercase ? 'j-text--upper' : '';
+    const inlineStyle = {};
+    if (letterSpacing != null) {
+        inlineStyle.letterSpacing = letterSpacing;
+    }
+    else if (uppercase && letterSpacing == null) {
+        inlineStyle.letterSpacing = 2;
+    }
+    if (style)
+        Object.assign(inlineStyle, style);
+    return (_jsx(Tag, { className: `j-text ${sizeClass} ${toneClass} ${shadowClass} ${upperClass} ${className}`.trim(), style: Object.keys(inlineStyle).length > 0 ? inlineStyle : undefined, ...rest, children: children }));
 }

package/dist/ui/jimboTooltip.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-export type JimboTooltipMode = 'snap' | 'mouse';
-export type JimboTooltipPlacement = 'top' | 'bottom' | 'auto';
+import { type JimboTooltipMode, type JimboTooltipPlacement } from './hooks.js';
 export interface JimboTooltipProps {
     /** Content rendered inside the tooltip panel. Typically a card's ability text, joker description, etc. */
     content: React.ReactNode;
@@ -21,15 +20,5 @@ export interface JimboTooltipProps {
 /**
  * Canonical Balatro-style tooltip: dark panel, silver border, pixel font.
  * Wrap any target to get a hover/focus popover.
- *
- *   <JimboTooltip content={<JimboText size="sm">Gains +4 mult per face card</JimboText>}>
- *     <GameCard joker="Blueprint" />
- *   </JimboTooltip>
- *
- * Modes:
- *  - `snap` (default): anchored to the target's bounding rect, chooses
- *    top or bottom automatically so it stays in viewport.
- *  - `mouse`: follows the mouse position — useful for large targets
- *    (full card fans, zone rails) where "above the element" is imprecise.
  */
 export declare function JimboTooltip({ content, children, mode, placement, delay, maxWidth, disabled, }: JimboTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboTooltip.js

@@ -1,87 +1,21 @@
-'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from 'react';
-import { JimboColorOption } from './tokens.js';
+import React, { useCallback } from 'react';
+import { useJimboTooltip } from './hooks.js';
 /**
  * Canonical Balatro-style tooltip: dark panel, silver border, pixel font.
  * Wrap any target to get a hover/focus popover.
- *
- *   <JimboTooltip content={<JimboText size="sm">Gains +4 mult per face card</JimboText>}>
- *     <GameCard joker="Blueprint" />
- *   </JimboTooltip>
- *
- * Modes:
- *  - `snap` (default): anchored to the target's bounding rect, chooses
- *    top or bottom automatically so it stays in viewport.
- *  - `mouse`: follows the mouse position — useful for large targets
- *    (full card fans, zone rails) where "above the element" is imprecise.
  */
 export function JimboTooltip({ content, children, mode = 'snap', placement = 'auto', delay = 80, maxWidth = 280, disabled = false, }) {
-    const [visible, setVisible] = useState(false);
-    const [pos, setPos] = useState(null);
-    const targetRef = useRef(null);
-    const tooltipRef = useRef(null);
-    const delayTimerRef = useRef(null);
-    useEffect(() => () => {
-        if (delayTimerRef.current)
-            clearTimeout(delayTimerRef.current);
-    }, []);
-    const show = () => {
-        if (disabled)
-            return;
-        if (delayTimerRef.current)
-            clearTimeout(delayTimerRef.current);
-        delayTimerRef.current = setTimeout(() => setVisible(true), delay);
-    };
-    const hide = () => {
-        if (delayTimerRef.current)
-            clearTimeout(delayTimerRef.current);
-        setVisible(false);
-        setPos(null);
-    };
-    const computeSnapPos = () => {
-        const el = targetRef.current;
-        const tip = tooltipRef.current;
-        if (!el || !tip)
-            return;
-        const rect = el.getBoundingClientRect();
-        const tipRect = tip.getBoundingClientRect();
-        const roomAbove = rect.top;
-        const align = placement === 'top' ? 'top'
-            : placement === 'bottom' ? 'bottom'
-                : roomAbove >= tipRect.height + 12 ? 'top' : 'bottom';
-        const left = rect.left + rect.width / 2 - tipRect.width / 2;
-        const top = align === 'top' ? rect.top - tipRect.height - 8 : rect.bottom + 8;
-        setPos({ left: Math.max(8, Math.min(window.innerWidth - tipRect.width - 8, left)), top, align });
-    };
-    useEffect(() => {
-        if (!visible || mode !== 'snap')
-            return;
-        // Recompute after the tooltip renders so its size is known.
-        const raf = requestAnimationFrame(computeSnapPos);
-        window.addEventListener('resize', computeSnapPos);
-        window.addEventListener('scroll', computeSnapPos, true);
-        return () => {
-            cancelAnimationFrame(raf);
-            window.removeEventListener('resize', computeSnapPos);
-            window.removeEventListener('scroll', computeSnapPos, true);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible, mode, placement]);
-    const handleMouseMove = (e) => {
-        if (mode !== 'mouse')
-            return;
-        setPos({ left: e.clientX + 12, top: e.clientY + 16, align: 'bottom' });
-    };
+    const { visible, pos, targetRef, tooltipRef, show, hide, handleMouseMove, } = useJimboTooltip({ mode, placement, delay, disabled });
     const child = React.Children.only(children);
-    const refHandler = (node) => {
+    const refHandler = useCallback((node) => {
         targetRef.current = node;
         const childRef = child.ref;
         if (typeof childRef === 'function')
             childRef(node);
         else if (childRef && 'current' in childRef)
             childRef.current = node;
-    };
+    }, [child, targetRef]);
     const wrapped = React.cloneElement(child, {
         ref: refHandler,
         onMouseEnter: (e) => { show(); child.props.onMouseEnter?.(e); },
@@ -90,20 +24,10 @@ export function JimboTooltip({ content, children, mode = 'snap', placement = 'au
         onBlur: (e) => { hide(); child.props.onBlur?.(e); },
         onMouseMove: (e) => { handleMouseMove(e); child.props.onMouseMove?.(e); },
     });
-    return (_jsxs(_Fragment, { children: [wrapped, visible ? (_jsx("div", { ref: tooltipRef, role: "tooltip", style: {
-                    position: 'fixed',
+    return (_jsxs(_Fragment, { children: [wrapped, visible ? (_jsx("div", { ref: tooltipRef, role: "tooltip", className: "j-tooltip", style: {
                     left: pos?.left ?? -9999,
                     top: pos?.top ?? -9999,
                     maxWidth,
-                    padding: '6px 10px',
-                    borderRadius: 6,
-                    background: JimboColorOption.DARKEST,
-                    border: `2px solid ${JimboColorOption.BORDER_SILVER}`,
-                    boxShadow: `0 2px 0 ${JimboColorOption.BLACK}cc`,
-                    color: JimboColorOption.WHITE,
-                    pointerEvents: 'none',
-                    zIndex: 10000,
                     opacity: pos ? 1 : 0,
-                    transition: 'opacity 120ms ease',
                 }, children: content })) : null] }));
 }

package/dist/ui/panel.d.ts

@@ -17,9 +17,10 @@ export interface JimboButtonProps {
     uppercase?: boolean;
     onClick?: () => void;
     style?: React.CSSProperties;
+    className?: string;
     children?: React.ReactNode;
 }
-export declare function JimboButton({ tone, size, fullWidth, disabled, uppercase, onClick, style, children, }: JimboButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function JimboButton({ tone, size, fullWidth, disabled, uppercase, onClick, style, className, children, }: JimboButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare function JimboBackButton({ onClick }: {
     onClick?: () => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/panel.js

@@ -1,33 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, memo } from 'react';
+import { useState, memo } from 'react';
 import { JimboColorOption, JIMBO_ANIMATIONS } from './tokens.js';
+import { useSway, useDelayedVisibility } from './hooks.js';
 import { JimboText } from './jimboText.js';
 export const JimboPanel = memo(({ children, className = '', sway = false, onBack, hideBack = false, style, ...props }) => {
-    const panelRef = useRef(null);
-    useEffect(() => {
-        if (!sway || !panelRef.current)
-            return;
-        let frame;
-        const start = Date.now();
-        const el = panelRef.current;
-        const tick = () => {
-            const t = ((Date.now() - start) % JIMBO_ANIMATIONS.SWAY_DURATION) / JIMBO_ANIMATIONS.SWAY_DURATION * Math.PI * 2;
-            el.style.transform = `translate(${Math.sin(t) * JIMBO_ANIMATIONS.SWAY_AMOUNT * 0.3}px, ${Math.sin(t * 0.8) * JIMBO_ANIMATIONS.SWAY_AMOUNT}px)`;
-            frame = requestAnimationFrame(tick);
-        };
-        frame = requestAnimationFrame(tick);
-        return () => { cancelAnimationFrame(frame); el.style.transform = ''; };
-    }, [sway]);
-    return (_jsxs("div", { ref: panelRef, className: 'rounded-xl p-4 flex flex-col items-stretch overflow-hidden ' + className, style: {
-            backgroundColor: JimboColorOption.DARK_GREY,
-            border: `3px solid ${JimboColorOption.BORDER_SILVER}`,
-            boxShadow: `0 3px 0 0 ${JimboColorOption.BORDER_SOUTH}`,
-            ...style,
-        }, ...props, children: [_jsx("div", { className: "flex-1 overflow-auto", children: children }), onBack && !hideBack && (_jsx("div", { className: "mt-4 pt-2 shrink-0", children: _jsx(JimboBackButton, { onClick: onBack }) }))] }));
+    const panelRef = useSway(sway);
+    return (_jsxs("div", { ref: panelRef, className: `j-panel ${className}`, style: style, ...props, children: [_jsx("div", { className: "j-panel__body", children: children }), onBack && !hideBack && (_jsx("div", { className: "j-panel__back", children: _jsx(JimboBackButton, { onClick: onBack }) }))] }));
 });
 JimboPanel.displayName = 'JimboPanel';
-export const JimboInnerPanel = memo(({ children, className = '', style, ...props }) => (_jsx("div", { className: 'rounded-lg p-3 ' + className, style: { backgroundColor: JimboColorOption.INNER_BORDER, border: `2px solid ${JimboColorOption.PANEL_EDGE}`, ...style }, ...props, children: children })));
+export const JimboInnerPanel = memo(({ children, className = '', style, ...props }) => (_jsx("div", { className: `j-inner-panel ${className}`, style: style, ...props, children: children })));
 JimboInnerPanel.displayName = 'JimboInnerPanel';
 // ─── JimboButton ──────────────────────────────────────────────────────────────
 // Canonical flat 2D Balatro-style button.
@@ -41,39 +23,21 @@ const JIMBO_TONE_PAIRS = {
     gold: [JimboColorOption.GOLD, '#8a6a1e'],
     grey: [JimboColorOption.DARK_GREY, JimboColorOption.DARKEST],
 };
-export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, disabled = false, uppercase = false, onClick, style, children, }) {
+export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, disabled = false, uppercase = false, onClick, style, className = '', children, }) {
     const [pressed, setPressed] = useState(false);
     const [fg, sh] = JIMBO_TONE_PAIRS[tone] ?? JIMBO_TONE_PAIRS.orange;
-    const pad = size === 'xs' ? '2px 8px' : size === 'sm' ? '4px 10px' : size === 'lg' ? '10px 18px' : '6px 14px';
     const textSize = size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md';
-    return (_jsxs("div", { onMouseDown: () => { if (!disabled)
+    return (_jsxs("div", { className: `j-btn j-btn--${tone} j-btn--${size} ${fullWidth ? 'j-btn--full' : ''} ${disabled ? 'j-btn--disabled' : ''} ${className}`, "data-pressed": pressed, onMouseDown: () => { if (!disabled)
             setPressed(true); }, onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onTouchStart: () => { if (!disabled)
             setPressed(true); }, onTouchEnd: () => setPressed(false), onClick: () => { if (!disabled)
-            onClick?.(); }, style: { display: 'inline-block', width: fullWidth ? '100%' : undefined, position: 'relative', cursor: disabled ? 'not-allowed' : 'pointer', userSelect: 'none', opacity: disabled ? 0.55 : 1, ...style }, children: [_jsx("div", { style: { position: 'absolute', left: 1, top: 3, right: -1, bottom: -3, background: sh, borderRadius: 6, opacity: pressed ? 0 : 1 } }), _jsx("div", { style: {
-                    position: 'relative', background: fg, borderRadius: 6, padding: pad,
-                    transform: pressed ? 'translate(1px, 3px)' : 'translate(0,0)',
-                    transition: 'transform 55ms linear',
-                    textAlign: 'center',
-                }, children: _jsx(JimboText, { size: textSize, uppercase: uppercase, children: children }) })] }));
+            onClick?.(); }, style: style, children: [_jsx("div", { className: "j-btn__shadow", style: { background: sh } }), _jsx("div", { className: "j-btn__face", style: { background: fg }, children: _jsx(JimboText, { size: textSize, uppercase: uppercase, children: children }) })] }));
 }
 export function JimboBackButton({ onClick }) {
-    return (_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%', padding: '4px 0' }, children: _jsx(JimboButton, { tone: "orange", size: "md", fullWidth: true, onClick: onClick, children: "Back" }) }));
+    return (_jsx("div", { className: "j-flex j-justify-center j-w-full", style: { padding: '4px 0' }, children: _jsx(JimboButton, { tone: "orange", size: "md", fullWidth: true, onClick: onClick, children: "Back" }) }));
 }
 export function JimboModal({ children, open, onClose, title, className }) {
-    const [visible, setVisible] = useState(open);
-    const [opacity, setOpacity] = useState(open ? 1 : 0);
-    useEffect(() => {
-        if (open) {
-            setVisible(true);
-            requestAnimationFrame(() => setOpacity(1));
-        }
-        else {
-            setOpacity(0);
-            const t = setTimeout(() => setVisible(false), JIMBO_ANIMATIONS.MENU_SINK_DURATION);
-            return () => clearTimeout(t);
-        }
-    }, [open]);
+    const { visible, opacity } = useDelayedVisibility(open, JIMBO_ANIMATIONS.MENU_SINK_DURATION);
     if (!visible)
         return null;
-    return (_jsx("div", { style: { position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem', background: 'rgba(0,0,0,0.7)', opacity, transition: `opacity ${JIMBO_ANIMATIONS.MENU_SINK_DURATION}ms ease` }, onClick: onClose, children: _jsxs(JimboPanel, { sway: true, onBack: onClose, className: 'w-full flex flex-col max-h-[90vh] ' + (className ?? 'max-w-lg'), onClick: (e) => e.stopPropagation(), children: [title && _jsx(JimboText, { as: "h2", size: "lg", style: { textAlign: 'center', margin: '0 0 1rem' }, children: title }), children] }) }));
+    return (_jsx("div", { className: "j-modal-overlay", style: { opacity, transition: `opacity ${JIMBO_ANIMATIONS.MENU_SINK_DURATION}ms ease` }, onClick: onClose, children: _jsxs(JimboPanel, { sway: true, onBack: onClose, className: `j-modal ${className ?? ''}`, onClick: (e) => e.stopPropagation(), children: [title && _jsx(JimboText, { as: "h2", size: "lg", className: "j-modal__title", children: title }), children] }) }));
 }

package/dist/ui/showcase.d.ts

@@ -23,4 +23,8 @@ export interface ShowcaseProps {
     onBrowseFilters?: () => void;
     onBack?: () => void;
 }
+/**
+ * Landing/showcase screen for the seed curator.
+ * All styling via jimbo.css `.j-showcase` classes — zero inline styles.
+ */
 export declare function Showcase({ hotFilters, recentFinds, stats, onNewSearch, onBrowseFilters, onBack, }: ShowcaseProps): import("react/jsx-runtime").JSX.Element;