jaml-ui 0.18.0 → 0.19.0

package/DESIGN.md

@@ -155,7 +155,9 @@ Contrast is critical. NEVER make grey text on top of a grey background. If using
 
 ## Layout
 
-Target: Minimum 375px portrait width. Components must scale gracefully using relative units and flexible layouts. Avoid fixed widths that break at 375px. Vertical snap-scroll for ante pages. Horizontal swipe for seed navigation.
+Target: Minimum 375px portrait width. Components must scale gracefully using relative units and flexible layouts. Avoid fixed widths that break at 375px. 
+
+Vertical snap-scroll for ante pages using magnetic scroll-snapping (`scroll-snap-type: y mandatory`, `scroll-snap-align: start`). Horizontal swipe for seed navigation. NO visible scrollbars globally — use `::-webkit-scrollbar { display: none; }` and `-ms-overflow-style: none`.
 
 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`.
 
@@ -183,6 +185,10 @@ JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]`
 
 **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.
 
+**Card Hover Juice:** Cards receive a 3D magnetic tilt plus a "juice-up" scale animation (`scale(1.05) translateY(-2px)`) on hover to mimic a physical interaction.
+
+**Font Dance:** Text can be made to wiggle with a staggered `translateY` offset animation across characters (`.j-font-dance-char`), creating a cozy pixel font animation.
+
 **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
@@ -194,6 +200,7 @@ JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]`
 - DON'T use ALL CAPS. It is considered an embellishment and ruins the aesthetic.
 - DON'T put grey text on top of a grey background.
 - 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 add visible scrollbars. Vertical magnetic snap-scroll + horizontal swipe only.
 - DON'T use rounded corners larger than 10px. Balatro is chunky, not bubbly.
 - DON'T use blur-based shadows for depth. Use solid colored box-shadows 80% opaque.
+- DON'T use redundant JS wrappers for `motely-wasm`. Import globally and `motely.boot()` once.

package/dist/components/jamlMap/JamlMapEditor.js

@@ -113,7 +113,7 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
                         flexDirection: "column",
                         gap: 24,
                         borderBottom: `2px solid ${C.DARK_GREY}`
-                    }, children: [_jsxs(JimboText, { size: "md", tone: "grey", style: { textAlign: "center", marginBottom: 8 }, children: ["ANTE ", a] }), _jsxs("div", { className: "j-flex j-justify-between j-items-end", children: [_jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "VOUCHER" }), renderSlot(a, `ante_${a}_voucher`, 42, "Vouchers", "voucher")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "SMALL" }), renderSlot(a, `ante_${a}_tag_small`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BIG" }), renderSlot(a, `ante_${a}_tag_big`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BOSS" }), renderSlot(a, `ante_${a}_boss`, 42, "BlindChips", "boss")] })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "SHOP ITEMS" }), _jsx("div", { className: "j-flex hide-scrollbar j-gap-sm", style: { overflowX: "auto", paddingBottom: 8 }, children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => renderSlot(a, `ante_${a}_shop_${i}`, 52, "Jokers")) })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "PACKS" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [1, 2, 3, 4, 5, 6].map(i => renderSlot(a, `ante_${a}_pack_${i}`, 64, "Boosters", "pack")) })] })] }, a))) }), _jsx(JimboModal, { open: activeSlot !== null, onClose: handlePickerCancel, title: pickerFlow === "category" ? "Select Category" : undefined, className: "j-picker-modal", children: activeSlot !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel }))) })] }));
+                    }, children: [_jsxs(JimboText, { size: "md", tone: "white", dance: true, style: { textAlign: "center", marginBottom: 8 }, children: ["ANTE ", a] }), _jsxs("div", { className: "j-flex j-justify-between j-items-end", children: [_jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "VOUCHER" }), renderSlot(a, `ante_${a}_voucher`, 42, "Vouchers", "voucher")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "SMALL" }), renderSlot(a, `ante_${a}_tag_small`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BIG" }), renderSlot(a, `ante_${a}_tag_big`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "BOSS" }), renderSlot(a, `ante_${a}_boss`, 42, "BlindChips", "boss")] })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "SHOP ITEMS" }), _jsx("div", { className: "j-flex hide-scrollbar j-gap-sm", style: { overflowX: "auto", paddingBottom: 8 }, children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => renderSlot(a, `ante_${a}_shop_${i}`, 52, "Jokers")) })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "PACKS" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [1, 2, 3, 4, 5, 6].map(i => renderSlot(a, `ante_${a}_pack_${i}`, 64, "Boosters", "pack")) })] })] }, a))) }), _jsx(JimboModal, { open: activeSlot !== null, onClose: handlePickerCancel, title: pickerFlow === "category" ? "Select Category" : undefined, className: "j-picker-modal", children: activeSlot !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel }))) })] }));
 }
 // ─── Category Selection Menu ─────────────────────────────────────────────────
 function CategoryMenu({ onSelect, }) {

package/dist/hooks/useAnalyzer.js

@@ -1,6 +1,8 @@
 "use client";
 import { useState, useCallback } from "react";
-import { MotelyWasm, Motely } from "motely-wasm";
+import motely, { MotelyWasm, Motely } from "motely-wasm";
+// Boot motely immediately when this module is loaded
+motely.boot().catch(console.error);
 import { extractVisualJamlItems } from "../utils/jamlMapPreview.js";
 import { motelyItemDisplayNameFromValue } from "../motelyDisplay.js";
 export function useAnalyzer() {

package/dist/ui/hooks.js

@@ -397,7 +397,9 @@ export function useJamlCardRenderer({ layers, invert = false, hoverTilt = false,
         const y = event.clientY - rect.top;
         const rotateY = (x / rect.width) * 12 - 6;
         const rotateX = (y / rect.height) * -16 + 8;
-        setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`);
+        const juiceScale = 1.05;
+        const juiceY = -2; // slight move up
+        setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${juiceScale}) translateY(${juiceY}px)`);
     };
     const containerStyle = {
         aspectRatio: String(ratio),

package/dist/ui/jimbo.css

@@ -1047,3 +1047,22 @@
   background: var(--j-darkest);
   border: 1px solid var(--j-panel-edge);
 }
+
+/* ── Font Dance Animation ─────────────────────────────────────────────── */
+
+@keyframes j-font-dance {
+  0%   { transform: translateY(0); }
+  25%  { transform: translateY(-1px); }
+  50%  { transform: translateY(0); }
+  75%  { transform: translateY(1px); }
+  100% { transform: translateY(0); }
+}
+
+.j-text--dance-container {
+  display: inline-flex;
+}
+
+.j-font-dance-char {
+  display: inline-block;
+  animation: j-font-dance 3s infinite ease-in-out;
+}

package/dist/ui/jimboText.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type JimboTextTone = 'default' | 'mult' | 'chips' | 'gold' | 'green' | 'red' | 'blue' | 'orange' | 'purple' | 'grey';
+export type JimboTextTone = 'default' | 'mult' | 'chips' | 'gold' | 'green' | 'red' | 'blue' | 'orange' | 'purple' | 'grey' | 'white';
 export type JimboTextSize = 'micro' | 'label' | 'xs' | 'body' | 'sm' | 'md' | 'heading' | 'lg' | 'xl' | 'display';
 export interface JimboTextProps extends React.HTMLAttributes<HTMLElement> {
     tone?: JimboTextTone;
@@ -8,6 +8,8 @@ export interface JimboTextProps extends React.HTMLAttributes<HTMLElement> {
     shadow?: boolean;
     /** Uppercase + spacing — Balatro button/pill label treatment. Default false. */
     uppercase?: boolean;
+    /** Wiggle effect for text characters. Default false. */
+    dance?: boolean;
     /** Letter-spacing override; defaults depend on uppercase prop. */
     letterSpacing?: number | string;
     as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
@@ -23,4 +25,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, className, style, children, ...rest }: JimboTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function JimboText({ tone, size, shadow, uppercase, dance, letterSpacing, as: Tag, className, style, children, ...rest }: JimboTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboText.js

@@ -10,11 +10,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * 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', className = '', style, children, ...rest }) {
+export function JimboText({ tone = 'default', size = 'md', shadow = true, uppercase = false, dance = 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 danceClass = dance ? 'j-text--dance-container' : '';
     const inlineStyle = {};
     if (letterSpacing != null) {
         inlineStyle.letterSpacing = letterSpacing;
@@ -24,5 +25,9 @@ export function JimboText({ tone = 'default', size = 'md', shadow = true, upperc
     }
     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 }));
+    let content = children;
+    if (dance && typeof children === 'string') {
+        content = children.split('').map((char, i) => (_jsx("span", { className: "j-font-dance-char", style: { animationDelay: `${i * -0.15}s` }, children: char === ' ' ? '\u00A0' : char }, i)));
+    }
+    return (_jsx(Tag, { className: `j-text ${sizeClass} ${toneClass} ${shadowClass} ${upperClass} ${danceClass} ${className}`.trim(), style: Object.keys(inlineStyle).length > 0 ? inlineStyle : undefined, ...rest, children: content }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",