aimeat 2.1.0 → 2.3.0

package/dist/public/lib/aimeat-daisyui-bridge.css

@@ -1,6 +1,10 @@
 /*
  * @file aimeat-daisyui-bridge.css
  * @description Theme-compat layer so the bundled cortex UI libraries cohere with daisyUI.
+ *   (0) Pulls in the AIMEAT daisyUI theme (aimeat-theme.css) so any app already loading this
+ *       bridge gets the house palette — coral primary, the designed dark surface ramp and
+ *       correct `-content` pairs — without editing the app. Before this, `--color-primary` was
+ *       daisyUI's indigo and every branded app hardcoded `#E8564A` by hand.
  *   (1) Maps AIMEAT theme.css variable NAMES to daisyUI 5 theme variables so libs that read
  *       --text / --bg-card / --accent / … follow a daisyUI app's `data-theme` automatically.
  *   (2) Dark-mode polish: a few cortex components hardcode LIGHT colors (no var) — alerts,
@@ -8,12 +12,30 @@
  *       theme-aware tints (`:root .aui-*` wins on specificity). No changes to the libraries.
  *   Load this AFTER the daisyUI stylesheet. Hardcoded fallbacks keep it working if daisyUI
  *   vars are absent.
+ *
+ *   NOTE on daisyUI's OWN components: they are not overridden here. With the theme loaded they
+ *   are already theme-correct, and daisyUI 5 ships the quiet variants an app usually wants —
+ *   `badge-soft`, `alert-soft`, `btn-soft`, `card-border`. Reach for those instead of a solid
+ *   `badge-warning`, which is a loud block of amber on a dark page even when it is legible.
  * @usage  <link href="/lib/daisyui@5.css" rel="stylesheet" />
  *         <link href="/lib/aimeat-daisyui-bridge.css" rel="stylesheet" />
  * @version-history
- *   v1.0.0 — 2026-06-26 — Initial bridge (cortex libs follow daisyUI theme).
+ *   v1.3.0 — 2026-07-25 — FIX the --border collision: the bridge mapped --border to a COLOUR at
+ *     :root for the aui-* cortex components, while daisyUI 5 uses the same name as a border WIDTH
+ *     inside calc() on nearly every component — the invalid calc collapsed badge/input paddings to
+ *     0 and toggles to slivers on every bridge-loading page since v1.0.0. The colour mapping is now
+ *     scoped to aui-* elements, with a --border-w restore for daisyUI components nested inside.
+ *   v1.2.0 — 2026-07-25 — @import the AIMEAT daisyUI theme, so the house palette reaches every
+ *     app that already loads the bridge. Contrast + surface ramp verified by
+ *     `pnpm check:theme` (tools/theme-contrast.ts).
  *   v1.1.0 — 2026-06-26 — Map --bg-surface-dim (table zebra) + theme-aware alert/badge tints.
+ *   v1.0.0 — 2026-06-26 — Initial bridge (cortex libs follow daisyUI theme).
  */
+
+/* MUST be the first rule: @import is only valid ahead of ordinary rules. Same-origin, cached
+   alongside this file, and a no-op duplicate when the app also links the theme directly. */
+@import url('/lib/aimeat-theme.css');
+
 :root {
   --text:           var(--color-base-content, #1A1A2E);
   --text-dim:       color-mix(in oklab, var(--color-base-content, #6B7280) 70%, transparent);
@@ -24,7 +46,6 @@
   --bg-surface-dim: color-mix(in oklab, var(--color-base-content, #111827) 5%, var(--color-base-100, #ffffff));
   --bg-dim:         var(--color-base-200, #f3f4f6);
   --surface:        var(--color-base-200, #f3f4f6);
-  --border:         var(--color-base-300, #e5e7eb);
   --accent:         var(--color-primary, #e8564a);
   --blue:           var(--color-info, #3b82f6);
   --danger:         var(--color-error, #ef4444);
@@ -33,6 +54,22 @@
   --warning:        var(--color-warning, #f59e0b);
 }
 
+/* ── The --border name collision, fixed. The cortex `aui-*` components read `var(--border)` as a
+      border COLOUR; daisyUI 5 reads the same name as a border WIDTH in calc() maths on nearly every
+      component (`padding-inline: calc(var(--size)/2 - var(--border))` on .badge, toggle geometry,
+      input paddings…). Mapping the colour at :root (bridge v1.0.0–v1.2.0) made those calcs invalid
+      at computed-value time, so paddings collapsed to 0 and toggles rendered as slivers on EVERY
+      page that loaded this bridge. The colour is now scoped to elements that actually carry an
+      aui-* class, and daisyUI components nested inside an aui container get the palette's width
+      back via --border-w (declared per theme block in aimeat-theme.css). ── */
+[class^='aui-'], [class*=' aui-'] {
+  --border: var(--color-base-300, #e5e7eb);
+}
+[class^='aui-'] :where(.btn, .badge, .toggle, .checkbox, .radio, .input, .select, .textarea, .file-input, .range, .tab, .tabs, .card, .alert, .table, .kbd, .status, .divider, .menu, .modal-box, .stats, .progress),
+[class*=' aui-'] :where(.btn, .badge, .toggle, .checkbox, .radio, .input, .select, .textarea, .file-input, .range, .tab, .tabs, .card, .alert, .table, .kbd, .status, .divider, .menu, .modal-box, .stats, .progress) {
+  --border: var(--border-w, 1px);
+}
+
 /* ── Dark-mode polish: override the cortex libs' hardcoded light colors with theme-aware
       tints. `:root .aui-*` (specificity 0,1,1) beats the libs' `.aui-*` (0,1,0) regardless
       of stylesheet order. Tint = subtle wash of the semantic colour over the card bg; text

package/dist/public/lib/aimeat-game/board.css

@@ -0,0 +1,262 @@
+/*
+ * @file aimeat-game/board.css
+ * @description Competition and table styles for the aimeat-game kit: the leaderboard (sortable
+ *   metrics, a highlighted "you" row, an empty state that reads as "nobody yet"), the responsive
+ *   stat grid, the compact data table that scrolls inside its own container, and the showcase
+ *   card used by both leaderboards and galleries. Imported by /lib/aimeat-game.css.
+ *
+ *   THE GRID RULE. Every track is `minmax(0, …)` and every child sets `min-width: 0`, so a wide
+ *   cell scrolls its own wrapper instead of inflating the track and pushing the page sideways —
+ *   the single most common cause of a shrunk-to-fit phone layout.
+ * @structure leaderboard · stat grid · data table · showcase card
+ * @usage  @import'ed by /lib/aimeat-game.css. All values come from the --ag-* contract there.
+ * @version-history
+ *   v1.0.0 — 2026-07-28 — Initial (NOSTE prompt 01).
+ */
+
+/* ══════════════════════════════════════════════════════════════════════════════════════════
+   LEADERBOARD
+   ══════════════════════════════════════════════════════════════════════════════════════════ */
+.ag-lb { display: grid; gap: var(--ag-gap); min-width: 0; font-family: var(--ag-font); }
+
+.ag-lb__metrics {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.ag-lb__metric {
+  font: inherit;
+  font-family: var(--ag-font-ui);
+  font-size: var(--ag-text-fine);
+  font-weight: 600;
+  min-height: calc(var(--ag-touch) * 0.75);
+  padding: 4px 12px;
+  border-radius: var(--ag-radius-pill);
+  border: var(--ag-line-w) solid var(--ag-line);
+  background: var(--ag-surface-2);
+  color: var(--ag-ink-dim);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.ag-lb__metric[aria-pressed='true'] {
+  background: color-mix(in oklab, var(--ag-accent) var(--ag-tint), var(--ag-surface));
+  border-color: var(--ag-accent);
+  color: var(--ag-accent-text);
+}
+
+.ag-lb__rows { display: grid; gap: 6px; }
+
+.ag-lb__row {
+  font: inherit;
+  text-align: left;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--ag-gap);
+  width: 100%;
+  min-height: var(--ag-touch);
+  padding: 8px var(--ag-pad);
+  border: var(--ag-line-w) solid var(--ag-line);
+  border-radius: var(--ag-radius-sm);
+  background-color: var(--ag-surface);
+  background-image: var(--ag-surface-image);
+  color: var(--ag-ink);
+  min-width: 0;
+}
+
+button.ag-lb__row { cursor: pointer; }
+
+.ag-lb__row--you {
+  border-color: var(--ag-accent);
+  background-color: color-mix(in oklab, var(--ag-accent) var(--ag-tint), var(--ag-surface));
+  box-shadow: var(--ag-glow), inset var(--ag-select-w) 0 0 var(--ag-accent);
+}
+
+.ag-lb__rank {
+  font-family: var(--ag-font-mono);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  color: var(--ag-ink-dim);
+  min-width: 2.2ch;
+  text-align: right;
+}
+
+.ag-lb__row--you .ag-lb__rank { color: var(--ag-accent-text); }
+
+.ag-lb__who { min-width: 0; }
+
+.ag-lb__name { font-weight: 600; display: block; overflow-wrap: anywhere; }
+
+.ag-lb__sub {
+  display: block;
+  font-size: var(--ag-text-fine);
+  color: var(--ag-ink-dim);
+  overflow-wrap: anywhere;
+}
+
+.ag-lb__val {
+  font-family: var(--ag-font-display);
+  font-size: var(--ag-text-title);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+/* ══════════════════════════════════════════════════════════════════════════════════════════
+   STAT GRID
+   ══════════════════════════════════════════════════════════════════════════════════════════ */
+.ag-stats {
+  display: grid;
+  gap: var(--ag-gap);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
+  min-width: 0;
+  font-family: var(--ag-font);
+}
+
+.ag-stat {
+  display: grid;
+  gap: 4px;
+  align-content: start;
+  padding: calc(var(--ag-pad) * 0.85);
+  border: var(--ag-line-w) solid var(--ag-line);
+  border-radius: var(--ag-radius);
+  background-color: var(--ag-surface);
+  background-image: var(--ag-surface-image);
+  box-shadow: var(--ag-shadow);
+  transform: rotate(var(--ag-tilt));
+  min-width: 0;
+}
+
+.ag-stat__v {
+  font-family: var(--ag-font-display);
+  font-size: var(--ag-text-title);
+  font-weight: var(--ag-weight-display);
+  letter-spacing: var(--ag-tracking-display);
+  text-shadow: var(--ag-display-shadow);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.ag-stat__u { font-size: var(--ag-text-fine); color: var(--ag-ink-dim); margin-left: 4px; }
+
+.ag-stat__d { font-size: var(--ag-text-fine); font-weight: 600; }
+.ag-stat__d--up   { color: var(--ag-ok); }
+.ag-stat__d--down { color: var(--ag-err); }
+.ag-stat__d--flat { color: var(--ag-ink-dim); }
+
+/* ══════════════════════════════════════════════════════════════════════════════════════════
+   DATA TABLE — scrolls inside its own container in both axes.
+   ══════════════════════════════════════════════════════════════════════════════════════════ */
+.ag-table {
+  border: var(--ag-line-w) solid var(--ag-line);
+  border-radius: var(--ag-radius);
+  background-color: var(--ag-surface);
+  background-image: var(--ag-surface-image);
+  overflow: auto;
+  max-height: 60vh;
+  min-width: 0;
+  font-family: var(--ag-font);
+}
+
+.ag-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--ag-text-fine);
+}
+
+.ag-table th,
+.ag-table td {
+  padding: 8px var(--ag-pad);
+  text-align: left;
+  border-bottom: var(--ag-line-w) solid var(--ag-line);
+  white-space: nowrap;
+}
+
+.ag-table th {
+  position: sticky;
+  top: 0;
+  background: var(--ag-surface-2);
+  color: var(--ag-ink-dim);
+  text-transform: var(--ag-label-caps);
+  letter-spacing: var(--ag-label-tracking);
+  font-size: var(--ag-text-fine);
+  font-weight: 700;
+  z-index: 1;
+}
+
+.ag-table tbody tr:last-child td { border-bottom: 0; }
+
+.ag-table tbody tr[data-ag-pick] { cursor: pointer; }
+
+.ag-table tbody tr:hover { background: var(--ag-surface-2); }
+
+.ag-table td.ag-td--num,
+.ag-table th.ag-th--num {
+  text-align: right;
+  font-family: var(--ag-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ══════════════════════════════════════════════════════════════════════════════════════════
+   SHOWCASE CARD — one player's entry, used by leaderboards and galleries alike.
+   ══════════════════════════════════════════════════════════════════════════════════════════ */
+.ag-showcase {
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  padding: 0;
+  overflow: hidden;
+  text-align: left;
+  font: inherit;
+  color: var(--ag-ink);
+  min-width: 0;
+  font-family: var(--ag-font);
+}
+
+button.ag-showcase { cursor: pointer; }
+
+.ag-showcase__img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  background: var(--ag-surface-2);
+  border-bottom: var(--ag-line-w) solid var(--ag-line);
+}
+
+.ag-showcase__body {
+  display: grid;
+  gap: 6px;
+  padding: var(--ag-pad);
+  min-width: 0;
+}
+
+.ag-showcase__title {
+  font-family: var(--ag-font-display);
+  font-size: var(--ag-text-title);
+  font-weight: var(--ag-weight-display);
+  letter-spacing: var(--ag-tracking-display);
+  text-shadow: var(--ag-display-shadow);
+  overflow-wrap: anywhere;
+}
+
+.ag-showcase__by { font-size: var(--ag-text-fine); color: var(--ag-ink-dim); overflow-wrap: anywhere; }
+
+.ag-showcase__metric {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+.ag-showcase__mv {
+  font-family: var(--ag-font-display);
+  font-size: var(--ag-text-title);
+  font-weight: var(--ag-weight-display);
+  font-variant-numeric: tabular-nums;
+  color: var(--ag-accent-text);
+}
+
+.ag-showcase__tags { display: flex; gap: 6px; flex-wrap: wrap; }