jaml-ui 0.24.6 → 0.24.7

package/dist/components/JamlIdeToolbar.js

@@ -11,14 +11,13 @@ export function JamlIdeToolbar({ mode, onModeChange, resultCount = 0, className
         { id: "results", label: resultCount > 0 ? `Results (${resultCount})` : "Results" },
     ];
     return (_jsxs("div", { className: className, style: {
-            display: "flex",
+            display: "grid",
+            gridTemplateColumns: onSearch ? "1fr auto 1fr" : "1fr",
             alignItems: "center",
-            justifyContent: "space-between",
-            flexWrap: "nowrap",
             gap: 8,
             minWidth: 0,
             padding: "10px 10px 6px",
             borderBottom: `1px solid ${JimboColorOption.PANEL_EDGE}`,
             background: JimboColorOption.DARKEST,
-        }, children: [_jsx("div", { style: { flex: "1 1 auto", minWidth: 0, overflow: "hidden" }, children: _jsx(JimboTabs, { tabs: tabs, activeTab: mode, onTabChange: (id) => onModeChange(id) }) }), onSearch ? (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(JimboButton, { tone: isSearching ? "red" : "blue", size: "xs", onClick: onSearch, children: isSearching ? "Stop" : "Search" }) })) : null] }));
+        }, children: [onSearch ? _jsx("div", {}) : null, _jsx("div", { style: { minWidth: 0, overflow: "hidden", width: "100%" }, children: _jsx(JimboTabs, { tabs: tabs, activeTab: mode, onTabChange: (id) => onModeChange(id) }) }), onSearch ? (_jsx("div", { style: { justifySelf: "end" }, children: _jsx(JimboButton, { tone: isSearching ? "red" : "blue", size: "xs", onClick: onSearch, children: isSearching ? "Stop" : "Search" }) })) : null] }));
 }

package/dist/components/JamlIdeVisual.js

@@ -78,7 +78,7 @@ function ClauseCard({ clause, zone, onRemove, onEdit, onDragStart, }) {
                                     borderRadius: 3,
                                     letterSpacing: 0.5,
                                     lineHeight: 1,
-                                }, children: ["+", clause.score] }))] })] }), _jsx("button", { onClick: (e) => {
+                                }, children: ["+", clause.score] }))] })] }), _jsx("button", { onMouseDown: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), onClick: (e) => {
                     e.stopPropagation();
                     onRemove();
                 }, "aria-label": `Remove ${clause.label || clause.value}`, style: {
@@ -134,9 +134,8 @@ function ZoneRail({ zone, clauses, onAdd, onRemove, onEdit, onDragStart, highlig
     return (_jsxs("div", { "data-zone": zone, style: {
             border: `2px dashed ${highlight ? z.color : "transparent"}`,
             borderRadius: 6,
-            padding: highlight ? 6 : 0,
+            padding: 6,
             background: highlight ? `${z.color}11` : "transparent",
-            transition: "background 100ms, border-color 100ms",
         }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [_jsx("div", { style: {
                             fontFamily: "m6x11plus, ui-monospace, monospace",
                             fontSize: 12,
@@ -203,7 +202,6 @@ export function JamlIdeVisual({ filter, onChange, onEditClause, onAddClause }) {
                     top: drag.y - drag.offY,
                     pointerEvents: "none",
                     zIndex: 999,
-                    transform: "rotate(-2deg) scale(1.05)",
                     filter: `drop-shadow(0 4px 6px ${C.BLACK}99)`,
                     opacity: 0.92,
                 }, children: _jsx(ClauseCard, { clause: drag.clause, zone: drag.fromZone, onRemove: () => { }, onEdit: () => { }, onDragStart: () => { } }) }))] }));

package/dist/ui/hooks.js

@@ -492,11 +492,12 @@ export function useAnteTracker(antes, options = {}) {
  */
 export function useJamlIdeDrag(filter, onChange, rootRef) {
     const [drag, setDrag] = useState(null);
+    const [pendingDrag, setPendingDrag] = useState(null);
     const [hoverZone, setHoverZone] = useState(null);
     const onDragStart = useCallback((e, clause, fromZone) => {
         const t = 'touches' in e ? e.touches[0] : e;
         const rect = e.currentTarget.getBoundingClientRect();
-        setDrag({
+        setPendingDrag({
             clause,
             fromZone,
             x: t.clientX,
@@ -504,13 +505,38 @@ export function useJamlIdeDrag(filter, onChange, rootRef) {
             offX: t.clientX - rect.left,
             offY: t.clientY - rect.top,
         });
+        setHoverZone(null);
     }, []);
     useEffect(() => {
-        if (!drag)
+        if (!pendingDrag && !drag)
             return;
         const move = (e) => {
-            const t = 'touches' in e ? e.touches[0] : e;
-            setDrag((d) => d && { ...d, x: t.clientX, y: t.clientY });
+            const touchEvent = 'touches' in e ? e : null;
+            const t = touchEvent ? touchEvent.touches[0] : e;
+            if (!t)
+                return;
+            let activeDrag = drag;
+            if (!activeDrag && pendingDrag) {
+                const dx = t.clientX - pendingDrag.x;
+                const dy = t.clientY - pendingDrag.y;
+                if (Math.hypot(dx, dy) < 8)
+                    return;
+                activeDrag = {
+                    ...pendingDrag,
+                    x: t.clientX,
+                    y: t.clientY,
+                };
+                setPendingDrag(null);
+                setDrag(activeDrag);
+            }
+            else if (activeDrag) {
+                activeDrag = { ...activeDrag, x: t.clientX, y: t.clientY };
+                setDrag(activeDrag);
+            }
+            if (!activeDrag)
+                return;
+            if (touchEvent?.cancelable)
+                touchEvent.preventDefault();
             const rails = rootRef.current?.querySelectorAll('[data-zone]') ?? [];
             let found = null;
             for (const r of rails) {
@@ -523,7 +549,7 @@ export function useJamlIdeDrag(filter, onChange, rootRef) {
             setHoverZone(found);
         };
         const up = () => {
-            if (hoverZone && hoverZone !== drag.fromZone) {
+            if (drag && hoverZone && hoverZone !== drag.fromZone) {
                 const to = hoverZone;
                 onChange({
                     ...filter,
@@ -531,6 +557,7 @@ export function useJamlIdeDrag(filter, onChange, rootRef) {
                     [to]: [...filter[to], { ...drag.clause }],
                 });
             }
+            setPendingDrag(null);
             setDrag(null);
             setHoverZone(null);
         };
@@ -544,7 +571,7 @@ export function useJamlIdeDrag(filter, onChange, rootRef) {
             window.removeEventListener('touchmove', move);
             window.removeEventListener('touchend', up);
         };
-    }, [drag, hoverZone, filter, onChange, rootRef]);
+    }, [pendingDrag, drag, hoverZone, filter, onChange, rootRef]);
     return {
         drag,
         hoverZone,

package/dist/ui/jimbo.css

@@ -9,6 +9,7 @@
   scrollbar-width: none !important;
   -ms-overflow-style: none !important;
 }
+
 *::-webkit-scrollbar {
   display: none !important;
 }
@@ -86,7 +87,11 @@
   text-shadow: var(--j-text-shadow);
   color: var(--j-white);
 }
-.j-text--no-shadow { text-shadow: none; }
+
+.j-text--no-shadow {
+  text-shadow: none;
+}
+
 .j-text--upper {
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -104,35 +109,113 @@
 }
 
 @keyframes j-font-dance {
-  0%, 100% { transform: translate(0, 0); }
-  25% { transform: translate(1px, -1px); }
-  50% { transform: translate(0, -2px); }
-  75% { transform: translate(-1px, -1px); }
+
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+
+  25% {
+    transform: translate(1px, -1px);
+  }
+
+  50% {
+    transform: translate(0, -2px);
+  }
+
+  75% {
+    transform: translate(-1px, -1px);
+  }
 }
 
 /* Sizes (from DESIGN.md typography scale) */
-.j-text--display { font-size: 26px; letter-spacing: 0.04em; line-height: 1; }
-.j-text--xl      { font-size: 24px; letter-spacing: 0.04em; }
-.j-text--lg      { font-size: 18px; letter-spacing: 0.04em; }
-.j-text--heading  { font-size: 14px; letter-spacing: 0.08em; line-height: 1.2; }
-.j-text--md      { font-size: 14px; }
-.j-text--sm      { font-size: 12px; }
-.j-text--body    { font-size: 11px; letter-spacing: 0.05em; line-height: 1.3; }
-.j-text--xs      { font-size: 10px; }
-.j-text--label   { font-size: 9px; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; }
-.j-text--micro   { font-size: 8px; letter-spacing: 0.08em; line-height: 1; }
+.j-text--display {
+  font-size: 26px;
+  letter-spacing: 0.04em;
+  line-height: 1;
+}
+
+.j-text--xl {
+  font-size: 24px;
+  letter-spacing: 0.04em;
+}
+
+.j-text--lg {
+  font-size: 18px;
+  letter-spacing: 0.04em;
+}
+
+.j-text--heading {
+  font-size: 14px;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+}
+
+.j-text--md {
+  font-size: 14px;
+}
+
+.j-text--sm {
+  font-size: 12px;
+}
+
+.j-text--body {
+  font-size: 11px;
+  letter-spacing: 0.05em;
+  line-height: 1.3;
+}
+
+.j-text--xs {
+  font-size: 10px;
+}
+
+.j-text--label {
+  font-size: 9px;
+  letter-spacing: 0.1em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.j-text--micro {
+  font-size: 8px;
+  letter-spacing: 0.08em;
+  line-height: 1;
+}
 
 /* Tones */
-.j-text--default { color: var(--j-white); }
+.j-text--default {
+  color: var(--j-white);
+}
+
 .j-text--mult,
-.j-text--red     { color: var(--j-red); }
+.j-text--red {
+  color: var(--j-red);
+}
+
 .j-text--chips,
-.j-text--blue    { color: var(--j-blue); }
-.j-text--gold    { color: var(--j-gold-text); }
-.j-text--green   { color: var(--j-green-text); }
-.j-text--orange  { color: var(--j-orange-text); }
-.j-text--purple  { color: var(--j-purple); }
-.j-text--grey    { color: var(--j-grey); }
+.j-text--blue {
+  color: var(--j-blue);
+}
+
+.j-text--gold {
+  color: var(--j-gold-text);
+}
+
+.j-text--green {
+  color: var(--j-green-text);
+}
+
+.j-text--orange {
+  color: var(--j-orange-text);
+}
+
+.j-text--purple {
+  color: var(--j-purple);
+}
+
+.j-text--grey {
+  color: var(--j-grey);
+}
 
 
 /* ── Panel ─────────────────────────────────────────────────────────────── */
@@ -143,7 +226,7 @@
   border-bottom-color: var(--j-border-south);
   border-radius: var(--j-radius-md);
   box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.55),
-              inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
   padding: var(--j-space-lg);
   display: flex;
   flex-direction: column;
@@ -163,6 +246,11 @@
   flex-shrink: 0;
 }
 
+.j-back-btn .j-btn__face {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
 .j-inner-panel {
   background-color: var(--j-inner-border);
   border: 2px solid var(--j-panel-edge);
@@ -176,12 +264,18 @@
    press sinks the face +3px and collapses the shadow. */
 
 .j-btn {
+  appearance: none;
+  -webkit-appearance: none;
   display: inline-block;
   position: relative;
   cursor: pointer;
+  border: none;
+  padding: 0;
+  background: transparent;
   -webkit-user-select: none;
   user-select: none;
 }
+
 /* Invisible stable hit target to prevent hover jitter when the child transforms */
 .j-btn::after {
   content: '';
@@ -190,7 +284,11 @@
   background: transparent;
   z-index: 10;
 }
-.j-btn--full { width: 100%; }
+
+.j-btn--full {
+  width: 100%;
+}
+
 .j-btn--disabled {
   opacity: 0.55;
   cursor: not-allowed;
@@ -206,29 +304,66 @@
   transform: translate(0, 0);
   transition: transform var(--j-press-speed) linear, box-shadow var(--j-press-speed) linear;
 }
+
 .j-btn[data-pressed="true"] .j-btn__face,
 .j-btn:active:not(:disabled):not(.j-btn--disabled) .j-btn__face {
   transform: translateY(var(--j-press-y));
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
 }
+
 .j-btn:not(.j-btn--disabled):hover .j-btn__face {
   filter: brightness(1.1);
 }
 
 /* Sizes */
-.j-btn--xs .j-btn__face { padding: 4px 8px;  font-size: 11px; }
-.j-btn--sm .j-btn__face { padding: 6px 12px; font-size: 13px; }
-.j-btn--md .j-btn__face { padding: 10px 18px; font-size: 16px; }
-.j-btn--lg .j-btn__face { padding: 8px 18px; font-size: 20px; }
+.j-btn--xs .j-btn__face {
+  padding: 4px 8px;
+  font-size: 11px;
+}
+
+.j-btn--sm .j-btn__face {
+  padding: 6px 12px;
+  font-size: 13px;
+}
+
+.j-btn--md .j-btn__face {
+  padding: 10px 18px;
+  font-size: 16px;
+}
+
+.j-btn--lg .j-btn__face {
+  padding: 8px 18px;
+  font-size: 20px;
+}
 
 /* Tone colors — set via CSS custom properties */
-.j-btn--orange   { --j-btn-face-color: var(--j-orange); }
-.j-btn--red      { --j-btn-face-color: var(--j-red); }
-.j-btn--blue     { --j-btn-face-color: var(--j-blue); }
-.j-btn--green    { --j-btn-face-color: var(--j-green); }
-.j-btn--tarot    { --j-btn-face-color: var(--j-tarot-btn); }
-.j-btn--planet   { --j-btn-face-color: var(--j-planet-btn); }
-.j-btn--spectral { --j-btn-face-color: var(--j-spectral-btn); }
+.j-btn--orange {
+  --j-btn-face-color: var(--j-orange);
+}
+
+.j-btn--red {
+  --j-btn-face-color: var(--j-red);
+}
+
+.j-btn--blue {
+  --j-btn-face-color: var(--j-blue);
+}
+
+.j-btn--green {
+  --j-btn-face-color: var(--j-green);
+}
+
+.j-btn--tarot {
+  --j-btn-face-color: var(--j-tarot-btn);
+}
+
+.j-btn--planet {
+  --j-btn-face-color: var(--j-planet-btn);
+}
+
+.j-btn--spectral {
+  --j-btn-face-color: var(--j-spectral-btn);
+}
 
 
 /* ── Badge ─────────────────────────────────────────────────────────────── */
@@ -244,25 +379,58 @@
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
   border: none;
 }
-.j-badge--sm { padding: 2px 6px; font-size: 10px; }
-.j-badge--md { padding: 4px 8px; font-size: 12px; }
+
+.j-badge--sm {
+  padding: 2px 6px;
+  font-size: 10px;
+}
+
+.j-badge--md {
+  padding: 4px 8px;
+  font-size: 12px;
+}
 
 /* Badge tones — flat, no shadow, no edges */
-.j-badge--dark   { background: var(--j-darkest);  color: var(--j-white); }
-.j-badge--blue   { background: var(--j-blue);     color: var(--j-white); }
-.j-badge--red    { background: var(--j-red);      color: var(--j-white); }
-.j-badge--green  { background: var(--j-green);    color: var(--j-white); }
-.j-badge--orange { background: var(--j-orange);   color: var(--j-white); }
-.j-badge--purple { background: var(--j-purple);   color: var(--j-white); }
+.j-badge--dark {
+  background: var(--j-darkest);
+  color: var(--j-white);
+}
+
+.j-badge--blue {
+  background: var(--j-blue);
+  color: var(--j-white);
+}
+
+.j-badge--red {
+  background: var(--j-red);
+  color: var(--j-white);
+}
+
+.j-badge--green {
+  background: var(--j-green);
+  color: var(--j-white);
+}
+
+.j-badge--orange {
+  background: var(--j-orange);
+  color: var(--j-white);
+}
+
+.j-badge--purple {
+  background: var(--j-purple);
+  color: var(--j-white);
+}
 
 
 /* ── Tabs ──────────────────────────────────────────────────────────────── */
 
 .j-tabs {
   display: flex;
-  gap: var(--j-space-md);
+  gap: var(--j-space-sm);
   align-items: flex-end;
+  justify-content: center;
   flex-wrap: wrap;
+  width: 100%;
 }
 
 .j-tab {
@@ -270,51 +438,74 @@
   flex-direction: column;
   align-items: center;
   position: relative;
+  flex: 0 0 auto;
 }
 
 .j-tab__indicator {
-  margin-bottom: var(--j-space-sm);
+  height: 10px;
+  margin-bottom: 3px;
   display: flex;
   justify-content: center;
+  align-items: flex-end;
 }
+
 .j-tab__indicator svg {
-  fill: var(--j-gold, #e4b643);
+  fill: var(--j-red);
   display: block;
 }
+
 .j-tab__indicator[data-active="true"] {
   animation: jimbo-bounce 0.8s cubic-bezier(0.68, 0, 0.68, 1) infinite;
 }
+
 .j-tab__indicator[data-active="false"] {
   visibility: hidden;
 }
 
 .j-tab__btn {
+  appearance: none;
+  -webkit-appearance: none;
   border: none;
   cursor: pointer;
-  border-radius: var(--j-radius-sm);
-  padding: 4px 12px;
-  background-color: transparent;
-  box-shadow: none;
-  transition: none;
+  border-radius: var(--j-radius-md);
+  padding: 6px 14px;
+  min-height: 28px;
+  background: var(--j-red);
+  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.6);
+  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;
+  outline: none;
 }
+
 .j-tab__btn[data-active="true"] {
-  background-color: var(--j-gold);
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
+  opacity: 1;
 }
+
 .j-tab__btn[data-active="true"]:hover {
-  background-color: var(--j-gold);
+  background: var(--j-red);
 }
+
 .j-tab__btn[data-active="false"]:hover {
-  background-color: rgba(255, 255, 255, 0.06);
+  background: var(--j-red);
+  filter: brightness(1.08);
 }
-.j-tab__btn[data-pressed="true"] {
-  transform: translateY(2px);
-  box-shadow: none;
+
+.j-tab__btn[data-active="false"] {
+  opacity: 0.82;
 }
 
 @keyframes jimbo-bounce {
-  0%, 100% { transform: translateY(0); }
-  50%      { transform: translateY(-3px); }
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-3px);
+  }
 }
 
 /* Vertical tabs */
@@ -335,6 +526,7 @@
   transform: rotate(180deg);
   transition: none;
 }
+
 .j-vtab[data-active="true"] {
   background-color: var(--j-gold, #e4b643);
   color: var(--j-black, #000000);
@@ -382,8 +574,14 @@
   border: 1px solid var(--j-dark-grey);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
 }
-.j-toggle-check[data-on="true"]  { background: var(--j-orange); }
-.j-toggle-check[data-on="false"] { background: var(--j-darkest); }
+
+.j-toggle-check[data-on="true"] {
+  background: var(--j-orange);
+}
+
+.j-toggle-check[data-on="false"] {
+  background: var(--j-darkest);
+}
 
 
 /* ── Tooltip ──────────────────────────────────────────────────────────── */
@@ -437,13 +635,15 @@
   justify-content: center;
   box-shadow: 0 var(--j-press-y) 0 0 var(--j-dark-red);
   transition: transform var(--j-press-speed) ease,
-              box-shadow var(--j-press-speed) ease,
-              background-color var(--j-press-speed) ease;
+    box-shadow var(--j-press-speed) ease,
+    background-color var(--j-press-speed) ease;
 }
+
 .j-flank__btn[data-pressed="true"] {
   transform: translateY(var(--j-press-y));
   box-shadow: none;
 }
+
 .j-flank__btn:disabled {
   background-color: var(--j-dark-red);
   cursor: default;
@@ -484,11 +684,13 @@
   flex-shrink: 0;
   transition: color 0.15s, background 0.15s, border-color 0.15s;
 }
+
 .j-copy-row__btn[data-copied="false"] {
   color: var(--j-gold-text);
   background: rgba(228, 182, 67, 0.12);
   border: 1px solid var(--j-gold-text);
 }
+
 .j-copy-row__btn[data-copied="true"] {
   color: var(--j-green-text);
   background: rgba(53, 189, 134, 0.12);
@@ -542,8 +744,14 @@
   cursor: pointer;
   display: flex;
 }
-.j-code-block__copy[data-copied="false"] { color: rgba(255, 255, 255, 0.5); }
-.j-code-block__copy[data-copied="true"]  { color: #4ade80; }
+
+.j-code-block__copy[data-copied="false"] {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.j-code-block__copy[data-copied="true"] {
+  color: #4ade80;
+}
 
 .j-code-block__pre {
   padding: 12px;
@@ -721,6 +929,7 @@
   width: 100%;
   transition: opacity 200ms;
 }
+
 .j-footer--hidden {
   pointer-events: none;
   opacity: 0;
@@ -754,7 +963,10 @@
 
 /* ── Floating ─────────────────────────────────────────────────────────── */
 
-.j-floating { position: absolute; z-index: 20; }
+.j-floating {
+  position: absolute;
+  z-index: 20;
+}
 
 
 /* ── Background (canvas is styled inline because it's fixed fullscreen) ── */
@@ -766,55 +978,157 @@
   box-shadow: 0 0 0 2px var(--j-blue), 0 0 10px var(--j-blue);
   animation: j-glow-pulse 1.6s ease-in-out infinite;
 }
+
 .j-glow--should {
   box-shadow: 0 0 0 2px var(--j-gold), 0 0 10px var(--j-gold);
   animation: j-glow-pulse 1.6s ease-in-out infinite;
 }
 
 @keyframes j-glow-pulse {
-  0%, 100% { opacity: 0.55; }
-  50%      { opacity: 1; }
+
+  0%,
+  100% {
+    opacity: 0.55;
+  }
+
+  50% {
+    opacity: 1;
+  }
 }
 
 
 /* ── Utility ──────────────────────────────────────────────────────────── */
 
-.j-flex       { display: flex; }
-.j-flex-col   { display: flex; flex-direction: column; }
-.j-flex-wrap  { flex-wrap: wrap; }
-.j-items-center { align-items: center; }
-.j-justify-center { justify-content: center; }
-.j-gap-xs     { gap: var(--j-space-xs); }
-.j-gap-sm     { gap: var(--j-space-sm); }
-.j-gap-md     { gap: var(--j-space-md); }
-.j-gap-lg     { gap: var(--j-space-lg); }
-.j-gap-xl     { gap: var(--j-space-xl); }
-.j-w-full     { width: 100%; }
-.j-shrink-0   { flex-shrink: 0; }
-.j-flex-1     { flex: 1; }
-.j-min-w-0    { min-width: 0; }
-.j-text-center { text-align: center; }
-.j-overflow-hidden { overflow: hidden; }
-.j-overflow-auto   { overflow: auto; }
-.j-relative   { position: relative; }
+.j-flex {
+  display: flex;
+}
+
+.j-flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.j-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.j-items-center {
+  align-items: center;
+}
+
+.j-justify-center {
+  justify-content: center;
+}
+
+.j-gap-xs {
+  gap: var(--j-space-xs);
+}
+
+.j-gap-sm {
+  gap: var(--j-space-sm);
+}
+
+.j-gap-md {
+  gap: var(--j-space-md);
+}
+
+.j-gap-lg {
+  gap: var(--j-space-lg);
+}
+
+.j-gap-xl {
+  gap: var(--j-space-xl);
+}
+
+.j-w-full {
+  width: 100%;
+}
+
+.j-shrink-0 {
+  flex-shrink: 0;
+}
+
+.j-flex-1 {
+  flex: 1;
+}
+
+.j-min-w-0 {
+  min-width: 0;
+}
+
+.j-text-center {
+  text-align: center;
+}
+
+.j-overflow-hidden {
+  overflow: hidden;
+}
+
+.j-overflow-auto {
+  overflow: auto;
+}
+
+.j-relative {
+  position: relative;
+}
 
 /* Tone border utilities */
-.j-border--red    { border-color: var(--j-red); }
-.j-border--blue   { border-color: var(--j-blue); }
-.j-border--green  { border-color: var(--j-green); }
-.j-border--gold   { border-color: var(--j-gold); }
-.j-border--orange { border-color: var(--j-orange); }
-.j-border--purple { border-color: var(--j-purple); }
+.j-border--red {
+  border-color: var(--j-red);
+}
+
+.j-border--blue {
+  border-color: var(--j-blue);
+}
+
+.j-border--green {
+  border-color: var(--j-green);
+}
+
+.j-border--gold {
+  border-color: var(--j-gold);
+}
+
+.j-border--orange {
+  border-color: var(--j-orange);
+}
+
+.j-border--purple {
+  border-color: var(--j-purple);
+}
 
 /* Tone background utilities */
-.j-bg--red       { background-color: var(--j-red); }
-.j-bg--blue      { background-color: var(--j-blue); }
-.j-bg--green     { background-color: var(--j-green); }
-.j-bg--gold      { background-color: var(--j-gold); }
-.j-bg--orange    { background-color: var(--j-orange); }
-.j-bg--purple    { background-color: var(--j-purple); }
-.j-bg--dark-grey { background-color: var(--j-dark-grey); }
-.j-bg--darkest   { background-color: var(--j-darkest); }
+.j-bg--red {
+  background-color: var(--j-red);
+}
+
+.j-bg--blue {
+  background-color: var(--j-blue);
+}
+
+.j-bg--green {
+  background-color: var(--j-green);
+}
+
+.j-bg--gold {
+  background-color: var(--j-gold);
+}
+
+.j-bg--orange {
+  background-color: var(--j-orange);
+}
+
+.j-bg--purple {
+  background-color: var(--j-purple);
+}
+
+.j-bg--dark-grey {
+  background-color: var(--j-dark-grey);
+}
+
+.j-bg--darkest {
+  background-color: var(--j-darkest);
+}
 
 /* ── App Shell ────────────────────────────────────────────────────────── */
 /* Mobile-first 375px layout container for ALL Jimbo UI screens.
@@ -870,7 +1184,10 @@
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-.j-app__scroll::-webkit-scrollbar { display: none; }
+
+.j-app__scroll::-webkit-scrollbar {
+  display: none;
+}
 
 .j-app__footer {
   flex-shrink: 0;
@@ -889,9 +1206,11 @@
   .j-app__content {
     padding: var(--j-space-xl) var(--j-space-xl) var(--j-space-lg);
   }
+
   .j-app__scroll {
     padding: var(--j-space-xl) var(--j-space-xl) var(--j-space-lg);
   }
+
   .j-app__footer {
     padding: var(--j-space-md) var(--j-space-xl) var(--j-space-lg);
   }
@@ -901,12 +1220,15 @@
   .j-stat-grid__value {
     font-size: 20px;
   }
+
   .j-info-card {
     padding: var(--j-space-md) var(--j-space-lg);
   }
+
   .j-info-card__title {
     font-size: 14px;
   }
+
   .j-section-header__tag {
     font-size: 12px;
   }
@@ -987,6 +1309,7 @@
   cursor: pointer;
   border: 2px solid transparent;
 }
+
 .j-info-card:hover {
   filter: brightness(1.08);
 }
@@ -1090,6 +1413,7 @@
   transition: border-color 100ms ease;
   box-sizing: border-box;
 }
+
 .j-seed-input__field::placeholder {
   color: var(--j-grey);
   opacity: 0.6;
@@ -1097,15 +1421,19 @@
   letter-spacing: 0.06em;
   font-size: 12px;
 }
+
 .j-seed-input__field:focus {
   border-color: var(--j-gold);
 }
+
 .j-seed-input__field[data-valid="true"] {
   border-color: var(--j-green);
 }
+
 .j-seed-input__field[data-valid="false"] {
   border-color: var(--j-red);
 }
+
 .j-seed-input__field[data-valid="partial"] {
   border-color: var(--j-panel-edge);
 }
@@ -1148,10 +1476,12 @@
   transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
 }
+
 .j-aesthetic-pill:hover {
   border-color: var(--j-gold);
   color: var(--j-gold-text);
 }
+
 .j-aesthetic-pill[data-active="true"] {
   border-color: var(--j-gold);
   background: rgba(228, 182, 67, 0.13);
@@ -1393,11 +1723,25 @@
 /* ── 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); }
+  0% {
+    transform: translateY(0);
+  }
+
+  25% {
+    transform: translateY(-1px);
+  }
+
+  50% {
+    transform: translateY(0);
+  }
+
+  75% {
+    transform: translateY(1px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
 }
 
 .j-text--dance-container {
@@ -1413,8 +1757,16 @@
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
+
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }
-.j-juice-hover { transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }
-.j-juice-hover:hover { transform: scale(1.05) translateY(-2px); z-index: 5; }
+
+.j-juice-hover {
+  transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.j-juice-hover:hover {
+  transform: scale(1.05) translateY(-2px);
+  z-index: 5;
+}

package/dist/ui/jimboTabs.js

@@ -1,6 +1,5 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
 import { JimboText } from './jimboText.js';
 /**
  * Horizontal tab navigation with bouncing triangle indicator on the active
@@ -10,8 +9,7 @@ export function JimboTabs({ tabs, activeTab, onTabChange, className = '', style
     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))) }));
 }
 function TabButton({ label, active, onClick }) {
-    const [pressed, setPressed] = useState(false);
-    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", children: _jsx("polygon", { points: "7,10 0,0 14,0" }) }) }), _jsx("button", { type: "button", className: "j-tab__btn", "data-active": active, "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", tone: active ? 'default' : 'grey', children: label }) })] }));
+    return (_jsxs("div", { className: "j-tab", "data-active": active, 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", children: _jsx("polygon", { points: "7,10 0,0 14,0" }) }) }), _jsx("button", { type: "button", className: "j-tab__btn", "data-active": active, onClick: onClick, children: _jsx(JimboText, { size: "sm", tone: "default", children: label }) })] }));
 }
 /**
  * Vertical tab strip — rotated labels (writing-mode) for space efficiency.

package/dist/ui/panel.js

@@ -15,7 +15,7 @@ export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, d
     return (_jsx("button", { type: "button", className: `j-btn j-btn--${tone} j-btn--${size} ${fullWidth ? 'j-btn--full' : ''} ${disabled ? 'j-btn--disabled' : ''} ${className}`, disabled: disabled, onClick: onClick, style: style, children: _jsx("div", { className: "j-btn__face", children: _jsx(JimboText, { size: textSize, uppercase: uppercase, children: children }) }) }));
 }
 export function JimboBackButton({ onClick }) {
-    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" }) }));
+    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, className: "j-back-btn", children: "Back" }) }));
 }
 export function JimboModal({ children, open, onClose, title, className }) {
     if (!open)

package/package.json

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