@evinvest/uikit 0.23.0 → 0.25.0

package/styles/theme.css

@@ -1,6 +1,7 @@
 /* AUTO-GENERATED by `nix run .#gen` from the repo-root theme.css — do not edit. */
 /*
- * Toast (sonner) and Drawer enter/exit motion, shared by both ports. Imported by the token
+ * Toast (sonner) and Drawer enter/exit motion, the entrances (rise / stagger / settled /
+ * skeleton) and the app-shell markers, shared by both ports. Imported by the token
  * sheets so the lifecycle ships with the theme contract.
  */
 
@@ -306,6 +307,139 @@
   }
 }
 
+/* ── Entrances: rise, stagger, settled, skeleton ─────────────────────────────
+   One keyframe for every "arriving" thing, driven by attributes so a consumer
+   without a motion library (and a Server Component) gets it for free:
+
+     data-enter="rise"       the element fades in and rises --ev-rise, once, on
+                             insertion; --enter-delay postpones it.
+     data-enter="stagger"    each direct child does the same, one --enter-step
+                             (default --ev-stagger) after the previous. The index
+                             comes from nth-child; set --enter-index inline to
+                             override it. Capped at 12 — past that the tail is
+                             still arriving after the head has been read.
+     [data-slot="settled"][data-state="revealed"]
+                             a skeleton → content handover (uikit <Settled>).
+
+   It animates the independent `translate` property, not `transform`, so it
+   composes with any transform the element already has. `backwards` holds the
+   start frame through the delay and then lets go, so nothing about the element
+   (stacking, containing block for `fixed` children) lingers after it lands.
+   Reduced motion keeps the fade and drops the travel. */
+@keyframes ev-enter-rise {
+  from {
+    opacity: 0;
+    translate: 0 var(--ev-rise, 8px);
+  }
+}
+[data-enter="rise"],
+[data-enter="stagger"] > *,
+[data-slot="settled"][data-state="revealed"] {
+  animation: ev-enter-rise var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out)
+    var(--enter-delay, 0ms) backwards;
+}
+[data-enter="stagger"] > * {
+  animation-delay: calc(
+    var(--enter-delay, 0ms) + var(--enter-index, 0) * var(--enter-step, var(--ev-stagger, 35ms))
+  );
+}
+[data-enter="stagger"] > :nth-child(2) { --enter-index: 1; }
+[data-enter="stagger"] > :nth-child(3) { --enter-index: 2; }
+[data-enter="stagger"] > :nth-child(4) { --enter-index: 3; }
+[data-enter="stagger"] > :nth-child(5) { --enter-index: 4; }
+[data-enter="stagger"] > :nth-child(6) { --enter-index: 5; }
+[data-enter="stagger"] > :nth-child(7) { --enter-index: 6; }
+[data-enter="stagger"] > :nth-child(8) { --enter-index: 7; }
+[data-enter="stagger"] > :nth-child(9) { --enter-index: 8; }
+[data-enter="stagger"] > :nth-child(10) { --enter-index: 9; }
+[data-enter="stagger"] > :nth-child(11) { --enter-index: 10; }
+[data-enter="stagger"] > :nth-child(n + 12) { --enter-index: 11; }
+
+/* Every skeleton fades in before it starts to pulse. Keyed on the pulse class as
+   well as the slot: a running animation beats a transition on the same property,
+   so the entrance has to be the first of two animations rather than anything
+   layered beside `animate-pulse` — and a caller's `animate-none` (which `cn`
+   merges over the pulse) removes the class and with it this rule. Reduced motion
+   keeps the pulse, the signal that work is in flight, and drops the entrance. */
+@keyframes ev-skeleton-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes ev-skeleton-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+[data-slot="skeleton"].animate-pulse {
+  animation:
+    ev-skeleton-in 200ms var(--ev-ease-out, ease-out),
+    ev-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 200ms infinite;
+}
+
+/* ── App shell: the rail's active-row marker and the tab bar's rule ──────────
+   ShellNav: one marker node per nav section, placed on the [aria-current] row by
+   measurement and moved by a `transform` transition — on the compositor, so it
+   keeps its frames while the main thread renders the page just navigated to (a
+   JS layout projection here dropped exactly those). Until the first placement
+   (SSR, every frame to hydration) the marker has no position: it stays hidden
+   and the marked row carries the fill itself, so the first paint is right.
+   `data-placed` flips both at once; `entered` is a marker that mounted into a
+   section already on screen (a move across sections — a fade), `first` one that
+   arrived with its section (a cut: fading under a row whose own fill fades out
+   would dip). */
+@keyframes ev-shell-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+[data-slot="shell-nav-marker"] {
+  transition: transform var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="shell-nav-marker"]:not([data-placed]) {
+  visibility: hidden;
+}
+[data-slot="shell-nav-marker"][data-placed="entered"] {
+  animation: ev-shell-fade-in var(--ev-dur-fast, 180ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="shell-nav-marker"]:not([data-placed]) ~ * [aria-current="page"] {
+  background-color: var(--primary);
+}
+
+/* BottomTabBar: one rule for the whole bar, mounted once and translated by
+   whole tab widths (it is exactly one tab wide, so the two cannot drift). A
+   route no tab claims fades it out where it stands, and coming back fades it in
+   already in place. */
+[data-slot="tab-bar-marker"] {
+  transition:
+    translate var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out),
+    opacity var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="tab-bar-marker"][data-state="idle"] {
+  opacity: 0;
+}
+
+@keyframes ev-enter-fade {
+  from {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-enter="rise"],
+  [data-enter="stagger"] > *,
+  [data-slot="settled"][data-state="revealed"] {
+    animation-name: ev-enter-fade;
+  }
+  [data-slot="skeleton"].animate-pulse {
+    animation: ev-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+  [data-slot="shell-nav-marker"],
+  [data-slot="tab-bar-marker"] {
+    transition: none;
+    animation: none;
+  }
+}
+
 /* ═══ CONTRACT ═══════════════════════════════════════════════════ */
 
 @theme inline {
@@ -428,6 +562,26 @@
 
   --sidebar-width: 14rem;
 
+  /* app shell (uikit <AppShell> / <ShellNav> / <BottomTabBar>) */
+  --shell-rail-w: 15.5rem; /* 248px */
+  --shell-tab-bar-h: 4rem; /* 64px, before the bottom safe area */
+
+  /* ── motion ──────────────────────────────────────────────────── *
+   * One place to retune the feel of every animation the kit ships (motion.css
+   * reads these) and every one a consumer writes against them:
+   * `ease-(--ev-ease-out) duration-(--ev-dur-base)`. Quiet on purpose — short,
+   * small travel: motion here says what changed, it never decorates. */
+  --ev-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* every entrance */
+  --ev-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* state that reverses */
+  --ev-dur-fast: 180ms;
+  --ev-dur-base: 280ms;
+  --ev-dur-slow: 400ms;
+  --ev-rise: 8px; /* how far an entrance travels */
+  --ev-stagger: 35ms; /* between rows of a list */
+  /* between the sections of a page: cards, not rows — at 35ms six of them read
+     as one block twitching; at 50ms the last lands ~0.55s in, still "opening" */
+  --ev-stagger-section: 50ms;
+
   /* page container — responsive gutter + max width (uikit <Container>) */
   --page-max: 90rem; /* 1440px */
   --page-px: 1rem; /* 16px — mobile gutter, scales up below */

package/styles/tokens.css

@@ -21,7 +21,8 @@
  *              accent-trace · accent-debug · accent-info · accent-warn · accent-error
  *              primary-ink — the primary role as ink on a surface, where the
  *              fill and the readable value are different colours
- *   SCALARS    radius · control-* · display-scale · page-* · shadows · fonts
+ *   SCALARS    radius · control-* · display-scale · page-* · shell-* · shadows · fonts
+ *   MOTION     ev-ease-* · ev-dur-* · ev-rise · ev-stagger(-section)
  *   CHARTS     chart-1 … chart-5
  *   MARK       brand-mark · brand-aspect       — supplied, never defined here
  *
@@ -40,7 +41,8 @@
  */
 
 /*
- * Toast (sonner) and Drawer enter/exit motion, shared by both ports. Imported by the token
+ * Toast (sonner) and Drawer enter/exit motion, the entrances (rise / stagger / settled /
+ * skeleton) and the app-shell markers, shared by both ports. Imported by the token
  * sheets so the lifecycle ships with the theme contract.
  */
 
@@ -346,6 +348,139 @@
   }
 }
 
+/* ── Entrances: rise, stagger, settled, skeleton ─────────────────────────────
+   One keyframe for every "arriving" thing, driven by attributes so a consumer
+   without a motion library (and a Server Component) gets it for free:
+
+     data-enter="rise"       the element fades in and rises --ev-rise, once, on
+                             insertion; --enter-delay postpones it.
+     data-enter="stagger"    each direct child does the same, one --enter-step
+                             (default --ev-stagger) after the previous. The index
+                             comes from nth-child; set --enter-index inline to
+                             override it. Capped at 12 — past that the tail is
+                             still arriving after the head has been read.
+     [data-slot="settled"][data-state="revealed"]
+                             a skeleton → content handover (uikit <Settled>).
+
+   It animates the independent `translate` property, not `transform`, so it
+   composes with any transform the element already has. `backwards` holds the
+   start frame through the delay and then lets go, so nothing about the element
+   (stacking, containing block for `fixed` children) lingers after it lands.
+   Reduced motion keeps the fade and drops the travel. */
+@keyframes ev-enter-rise {
+  from {
+    opacity: 0;
+    translate: 0 var(--ev-rise, 8px);
+  }
+}
+[data-enter="rise"],
+[data-enter="stagger"] > *,
+[data-slot="settled"][data-state="revealed"] {
+  animation: ev-enter-rise var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out)
+    var(--enter-delay, 0ms) backwards;
+}
+[data-enter="stagger"] > * {
+  animation-delay: calc(
+    var(--enter-delay, 0ms) + var(--enter-index, 0) * var(--enter-step, var(--ev-stagger, 35ms))
+  );
+}
+[data-enter="stagger"] > :nth-child(2) { --enter-index: 1; }
+[data-enter="stagger"] > :nth-child(3) { --enter-index: 2; }
+[data-enter="stagger"] > :nth-child(4) { --enter-index: 3; }
+[data-enter="stagger"] > :nth-child(5) { --enter-index: 4; }
+[data-enter="stagger"] > :nth-child(6) { --enter-index: 5; }
+[data-enter="stagger"] > :nth-child(7) { --enter-index: 6; }
+[data-enter="stagger"] > :nth-child(8) { --enter-index: 7; }
+[data-enter="stagger"] > :nth-child(9) { --enter-index: 8; }
+[data-enter="stagger"] > :nth-child(10) { --enter-index: 9; }
+[data-enter="stagger"] > :nth-child(11) { --enter-index: 10; }
+[data-enter="stagger"] > :nth-child(n + 12) { --enter-index: 11; }
+
+/* Every skeleton fades in before it starts to pulse. Keyed on the pulse class as
+   well as the slot: a running animation beats a transition on the same property,
+   so the entrance has to be the first of two animations rather than anything
+   layered beside `animate-pulse` — and a caller's `animate-none` (which `cn`
+   merges over the pulse) removes the class and with it this rule. Reduced motion
+   keeps the pulse, the signal that work is in flight, and drops the entrance. */
+@keyframes ev-skeleton-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes ev-skeleton-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+[data-slot="skeleton"].animate-pulse {
+  animation:
+    ev-skeleton-in 200ms var(--ev-ease-out, ease-out),
+    ev-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 200ms infinite;
+}
+
+/* ── App shell: the rail's active-row marker and the tab bar's rule ──────────
+   ShellNav: one marker node per nav section, placed on the [aria-current] row by
+   measurement and moved by a `transform` transition — on the compositor, so it
+   keeps its frames while the main thread renders the page just navigated to (a
+   JS layout projection here dropped exactly those). Until the first placement
+   (SSR, every frame to hydration) the marker has no position: it stays hidden
+   and the marked row carries the fill itself, so the first paint is right.
+   `data-placed` flips both at once; `entered` is a marker that mounted into a
+   section already on screen (a move across sections — a fade), `first` one that
+   arrived with its section (a cut: fading under a row whose own fill fades out
+   would dip). */
+@keyframes ev-shell-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+[data-slot="shell-nav-marker"] {
+  transition: transform var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="shell-nav-marker"]:not([data-placed]) {
+  visibility: hidden;
+}
+[data-slot="shell-nav-marker"][data-placed="entered"] {
+  animation: ev-shell-fade-in var(--ev-dur-fast, 180ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="shell-nav-marker"]:not([data-placed]) ~ * [aria-current="page"] {
+  background-color: var(--primary);
+}
+
+/* BottomTabBar: one rule for the whole bar, mounted once and translated by
+   whole tab widths (it is exactly one tab wide, so the two cannot drift). A
+   route no tab claims fades it out where it stands, and coming back fades it in
+   already in place. */
+[data-slot="tab-bar-marker"] {
+  transition:
+    translate var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out),
+    opacity var(--ev-dur-base, 280ms) var(--ev-ease-out, ease-out);
+}
+[data-slot="tab-bar-marker"][data-state="idle"] {
+  opacity: 0;
+}
+
+@keyframes ev-enter-fade {
+  from {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-enter="rise"],
+  [data-enter="stagger"] > *,
+  [data-slot="settled"][data-state="revealed"] {
+    animation-name: ev-enter-fade;
+  }
+  [data-slot="skeleton"].animate-pulse {
+    animation: ev-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+  [data-slot="shell-nav-marker"],
+  [data-slot="tab-bar-marker"] {
+    transition: none;
+    animation: none;
+  }
+}
+
 /* ═══ CONTRACT ═══════════════════════════════════════════════════ */
 
 @theme inline {
@@ -468,6 +603,26 @@
 
   --sidebar-width: 14rem;
 
+  /* app shell (uikit <AppShell> / <ShellNav> / <BottomTabBar>) */
+  --shell-rail-w: 15.5rem; /* 248px */
+  --shell-tab-bar-h: 4rem; /* 64px, before the bottom safe area */
+
+  /* ── motion ──────────────────────────────────────────────────── *
+   * One place to retune the feel of every animation the kit ships (motion.css
+   * reads these) and every one a consumer writes against them:
+   * `ease-(--ev-ease-out) duration-(--ev-dur-base)`. Quiet on purpose — short,
+   * small travel: motion here says what changed, it never decorates. */
+  --ev-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* every entrance */
+  --ev-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* state that reverses */
+  --ev-dur-fast: 180ms;
+  --ev-dur-base: 280ms;
+  --ev-dur-slow: 400ms;
+  --ev-rise: 8px; /* how far an entrance travels */
+  --ev-stagger: 35ms; /* between rows of a list */
+  /* between the sections of a page: cards, not rows — at 35ms six of them read
+     as one block twitching; at 50ms the last lands ~0.55s in, still "opening" */
+  --ev-stagger-section: 50ms;
+
   /* page container — responsive gutter + max width (uikit <Container>) */
   --page-max: 90rem; /* 1440px */
   --page-px: 1rem; /* 16px — mobile gutter, scales up below */