jaml-ui 0.24.0 → 0.24.2

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;
@@ -182,6 +265,7 @@
   -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 +274,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 +294,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,16 +369,47 @@
   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 ──────────────────────────────────────────────────────────────── */
@@ -261,8 +417,13 @@
 .j-tabs {
   display: flex;
   gap: var(--j-space-md);
-  align-items: flex-end;
-  flex-wrap: wrap;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: visible;
+  padding-top: 12px;
+  scrollbar-width: none;
 }
 
 .j-tab {
@@ -270,40 +431,75 @@
   flex-direction: column;
   align-items: center;
   position: relative;
+  flex: 0 0 auto;
+  padding-top: 10px;
 }
 
 .j-tab__indicator {
-  margin-bottom: var(--j-space-sm);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 14px;
+  height: 10px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
 }
+
 .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;
+  opacity: 0;
 }
 
 .j-tab__btn {
+  appearance: none;
+  -webkit-appearance: none;
   border: none;
+  outline: none;
   cursor: pointer;
   border-radius: var(--j-radius-lg);
   padding: 4px 12px;
+  min-height: 28px;
   background-color: var(--j-red);
   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
   transition: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  color: var(--j-white);
+  font-family: var(--j-font);
+  font-size: 12px;
+  line-height: 1;
+  flex: 0 0 auto;
 }
+
 .j-tab__btn:hover,
 .j-tab__btn:active {
   background-color: var(--j-dark-red);
 }
+
 .j-tab__btn[data-pressed="true"] {
   transform: translateY(2px);
   box-shadow: none;
 }
 
 @keyframes jimbo-bounce {
-  0%, 100% { transform: translateY(0); }
-  50%      { transform: translateY(-3px); }
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-3px);
+  }
 }
 
 /* Vertical tabs */
@@ -367,8 +563,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 ──────────────────────────────────────────────────────────── */
@@ -422,13 +624,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;
@@ -469,11 +673,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);
@@ -527,8 +733,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;
@@ -706,6 +918,7 @@
   width: 100%;
   transition: opacity 200ms;
 }
+
 .j-footer--hidden {
   pointer-events: none;
   opacity: 0;
@@ -739,7 +952,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) ── */
@@ -751,55 +967,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.
@@ -855,7 +1173,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;
@@ -874,9 +1195,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);
   }
@@ -886,12 +1209,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;
   }
@@ -972,6 +1298,7 @@
   cursor: pointer;
   border: 2px solid transparent;
 }
+
 .j-info-card:hover {
   filter: brightness(1.08);
 }
@@ -1075,6 +1402,7 @@
   transition: border-color 100ms ease;
   box-sizing: border-box;
 }
+
 .j-seed-input__field::placeholder {
   color: var(--j-grey);
   opacity: 0.6;
@@ -1082,15 +1410,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);
 }
@@ -1133,10 +1465,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);
@@ -1378,11 +1712,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 {
@@ -1398,8 +1746,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;
+}