jaml-ui 0.24.19 → 0.24.20

package/DESIGN.md

@@ -197,13 +197,13 @@ Panels sit on a dark south-shadow (`0 3px 0 rgba(0,0,0,0.55)`). Translucent pane
 
 JAML-hit items get a GlowRing: `box-shadow: 0 0 0 2px [color], 0 0 10px [color]` with a 1.6s pulse animation. Must = blue glow, should = gold/green glow.
 
-**Button:** Chunky 3D press. DO NOT ADD A COLORED EDGE/BORDER. Buttons rely entirely on a solid `box-shadow` to create the colored "underside" depth. Hover brightness bump. Press sinks +2-3px and the box-shadow collapses to 0. Variants: primary (red), secondary (blue), back (orange), default (grey). NO GOLD BUTTONS. Sizes via padding, not font-size. Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)`.
+**Button:** Chunky 3D press. DO NOT ADD A COLORED EDGE/BORDER. Buttons rely entirely on a solid `box-shadow` to create the colored "underside" depth. Hover = dark variant of the button color. Press sinks +2-3px and the box-shadow collapses to 0. Variants: primary (red), secondary (blue), back (orange), default (grey). NO GOLD BUTTONS. Sizes via padding, not font-size. Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)`.
 
 **Badge (JimboBadge):** Badges indicate status and DO NOT CLICK. They are strictly flat. They have a colored background and flat borders, but NO 3D BOX-SHADOW and NO PRESS ANIMATIONS. Variants: dark, blue, red, green, orange, purple, grey. NO GOLD BADGES.
 
 **Panel:** Dark grey (#3a5055) background, 2px solid border (silver top/sides, south bottom), border-radius 6px. Inner highlight: `inset 0 0 0 1px rgba(255,255,255,0.04)`. Drop: `0 2px 0 #000`.
 
-**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.
+**Tabs (JimboTabs):** All tabs are red. Active tab has the bouncing triangle indicator above it. Hover and press = dark red. No opacity changes, no dimming, no gold. 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.
 

package/dist/ui/jimbo.css

@@ -6,7 +6,8 @@
 
 @font-face {
   font-family: 'm6x11plus';
-  src: url('/fonts/m6x11plus.otf') format('opentype');
+  src: local('m6x11plus'), local('m6x11plusplus'),
+       url('../../assets/fonts/m6x11plusplus.otf') format('opentype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -324,7 +325,7 @@
 }
 
 .j-btn:not(.j-btn--disabled):hover .j-btn__face {
-  filter: brightness(1.1);
+  background: var(--j-btn-hover-color, var(--j-btn-face-color));
 }
 
 /* Sizes */
@@ -351,30 +352,37 @@
 /* Tone colors — set via CSS custom properties */
 .j-btn--orange {
   --j-btn-face-color: var(--j-orange);
+  --j-btn-hover-color: var(--j-dark-orange);
 }
 
 .j-btn--red {
   --j-btn-face-color: var(--j-red);
+  --j-btn-hover-color: var(--j-dark-red);
 }
 
 .j-btn--blue {
   --j-btn-face-color: var(--j-blue);
+  --j-btn-hover-color: var(--j-dark-blue);
 }
 
 .j-btn--green {
   --j-btn-face-color: var(--j-green);
+  --j-btn-hover-color: var(--j-dark-green);
 }
 
 .j-btn--tarot {
   --j-btn-face-color: var(--j-tarot-btn);
+  --j-btn-hover-color: var(--j-tarot-btn-dark);
 }
 
 .j-btn--planet {
   --j-btn-face-color: var(--j-planet-btn);
+  --j-btn-hover-color: var(--j-planet-btn-dark);
 }
 
 .j-btn--spectral {
   --j-btn-face-color: var(--j-spectral-btn);
+  --j-btn-hover-color: var(--j-spectral-btn-dark);
 }
 
 
@@ -470,7 +478,7 @@
 }
 
 .j-tab__indicator[data-active="true"] {
-  animation: jimbo-bounce 0.6s ease-in-out infinite;
+  animation: jimbo-bounce 0.7s ease-in-out infinite;
 }
 
 .j-tab__indicator[data-active="false"] {
@@ -482,7 +490,7 @@
   -webkit-appearance: none;
   border: none;
   cursor: pointer;
-  border-radius: var(--j-radius-md);
+  border-radius: var(--j-radius-sm);
   padding: 6px 14px;
   min-height: 28px;
   background: var(--j-red);
@@ -490,33 +498,35 @@
   color: var(--j-white);
   text-align: center;
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
-  transition: filter 80ms linear, opacity 80ms linear;
+  transition: background var(--j-press-speed) linear;
   outline: none;
 }
 
-.j-tab__btn[data-active="true"] {
-  opacity: 1;
+.j-tab__btn .j-text {
+  color: inherit;
+  text-shadow: inherit;
 }
 
-.j-tab__btn[data-active="true"]:hover {
-  background: var(--j-red);
+.j-tab__btn:hover {
+  background: var(--j-dark-red);
 }
 
-.j-tab__btn[data-active="false"]:hover {
-  background: var(--j-red);
-  filter: brightness(1.08);
+.j-tab__btn:active {
+  background: var(--j-dark-red);
 }
 
 
 @keyframes jimbo-bounce {
-
-  0%,
-  100% {
+  0% {
     transform: translateY(0);
+    animation-timing-function: ease-out;
   }
-
-  50% {
-    transform: translateY(-3px);
+  45% {
+    transform: translateY(-5px);
+    animation-timing-function: ease-in;
+  }
+  100% {
+    transform: translateY(0);
   }
 }
 
@@ -991,7 +1001,11 @@
 /* ── Footer ───────────────────────────────────────────────────────────── */
 
 .j-footer {
-  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
   transition: opacity 200ms;
 }
 
@@ -1248,6 +1262,11 @@
   padding: var(--j-space-lg) var(--j-space-lg) var(--j-space-md);
   scrollbar-width: none;
   -ms-overflow-style: none;
+  scroll-snap-type: y mandatory;
+}
+
+.j-app__scroll > * {
+  scroll-snap-align: start;
 }
 
 .j-app__scroll::-webkit-scrollbar {

package/dist/ui/jimboBackground.d.ts

@@ -1,10 +1,10 @@
 /**
  * Fullscreen WebGL CRT/spin background — the authentic Balatro hypnotic
- * swirl, pixelated and animated. Ported from weejoker.app's
- * BackgroundShader.tsx; no config required.
+ * swirl, pixelated and animated. Also renders the attribution footer at the
+ * bottom of the viewport (position: fixed) so it is always present and no
+ * consumer can accidentally omit it.
  *
- * Renders a fixed-position canvas at z-index: -10 that fills the viewport
- * and ignores pointer events. Drop it once at the root of your page:
+ * Drop it once at the root of your page:
  *
  *     <JimboBackground />
  *     <YourAppContent />

package/dist/ui/jimboBackground.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useBalatroBackground } from './hooks.js';
+import { JimboBalatroFooter } from './footer.js';
 /**
  * Fullscreen WebGL CRT/spin background — the authentic Balatro hypnotic
- * swirl, pixelated and animated. Ported from weejoker.app's
- * BackgroundShader.tsx; no config required.
+ * swirl, pixelated and animated. Also renders the attribution footer at the
+ * bottom of the viewport (position: fixed) so it is always present and no
+ * consumer can accidentally omit it.
  *
- * Renders a fixed-position canvas at z-index: -10 that fills the viewport
- * and ignores pointer events. Drop it once at the root of your page:
+ * Drop it once at the root of your page:
  *
  *     <JimboBackground />
  *     <YourAppContent />
@@ -15,12 +16,12 @@ import { useBalatroBackground } from './hooks.js';
  */
 export function JimboBackground() {
     const canvasRef = useBalatroBackground();
-    return (_jsx("canvas", { ref: canvasRef, "aria-hidden": true, style: {
-            position: 'fixed',
-            inset: 0,
-            width: '100%',
-            height: '100%',
-            zIndex: -10,
-            pointerEvents: 'none',
-        } }));
+    return (_jsxs(_Fragment, { children: [_jsx("canvas", { ref: canvasRef, "aria-hidden": true, style: {
+                    position: 'fixed',
+                    inset: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: -10,
+                    pointerEvents: 'none',
+                } }), _jsx(JimboBalatroFooter, {})] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.24.19",
+  "version": "0.24.20",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",
@@ -57,7 +57,8 @@
     "LICENSE"
   ],
   "engines": {
-    "node": ">=18"
+    "node": ">=18",
+    "pnpm": ">=10"
   },
   "publishConfig": {
     "access": "public"
@@ -114,10 +115,9 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.2",
     "@eslint/js": "^10.0.1",
-    "@google/design.md": "^0.1.1",
     "@react-spring/three": "^10.0.3",
-    "@react-three/drei": ">=9.0.0",
-    "@react-three/fiber": "^9.6.0",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.6.1",
     "@storybook/addon-a11y": "^10.3.6",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/addon-onboarding": "^10.3.6",
@@ -127,7 +127,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/three": "^0.184.0",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@vitejs/plugin-react": "^5.2.0",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.1.5",
     "eslint": "^10.3.0",
@@ -136,23 +136,23 @@
     "globals": "^17.6.0",
     "motely-wasm": "^15.1.3",
     "playwright": "^1.59.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "react-icons": "^5.6.0",
     "storybook": "^10.3.6",
     "three": "^0.184.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.59.2",
-    "vite": "^8.0.9",
+    "vite": "^8.0.10",
     "vitest": "^4.1.5"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/autocomplete": "^6.20.2",
     "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-yaml": "^6.1.3",
     "@codemirror/language": "^6.12.3",
     "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.41.1",
+    "@codemirror/view": "^6.42.0",
     "@json-render/core": "^0.18.0",
     "@lezer/highlight": "^1.2.3",
     "@types/js-yaml": "^4.0.9",
@@ -160,7 +160,7 @@
     "js-yaml": "^4.1.1",
     "lucide-react": "^1.14.0",
     "tailwind-merge": "^2.6.1",
-    "zustand": "^5.0.0"
+    "zustand": "^5.0.13"
   },
   "scripts": {
     "build": "tsc --pretty false && node -e \"const fs=require('fs');fs.mkdirSync('dist/ui',{recursive:true});fs.copyFileSync('src/ui/jimbo.css','dist/ui/jimbo.css');\"",