@luxfi/ui 7.4.6 → 7.4.7

package/src/vite.ts

@@ -14,7 +14,7 @@
 // Node-only (it is a build-time module) and dependency-free: it returns a plain
 // Vite plugin object, so it does not force `vite` into anyone's runtime graph.
 
-import { GUI_DEFINES, GUI_PACKAGES } from './engine';
+import { ENGINE_DEDUPE, GUI_DEFINES } from './engine';
 
 interface LuxUiViteOptions {
   /**
@@ -42,14 +42,9 @@ interface LuxUiVitePlugin {
 // The WHOLE engine, not a hand-picked three. `@hanzogui/popper` and
 // `@hanzogui/popover` publish the contexts a Tooltip trigger reads, and they
 // were the two missing from the old list — so a consumer using this plugin
-// could still get two poppers and the `setReference` crash it causes. One list,
-// shared with the Next wrapper. See ./engine.
-const DEDUPE = [
-  'react',
-  'react-dom',
-  '@tanstack/react-query',
-  ...GUI_PACKAGES,
-];
+// could still get two poppers and the `setReference` crash it causes. The list
+// itself lives in ./engine, shared with the Next wrapper.
+const DEDUPE = ENGINE_DEDUPE;
 
 const INCLUDE = [
   'react-native-web',

package/tokens.css

@@ -730,3 +730,220 @@
   --sidebar-border: var(--lux-paper-10);
   --sidebar-ring: var(--lux-n-500);
 }
+
+/* ================================================================
+   6 — MOTION. One system: five durations, four curves, six moves.
+
+   Two rules make "smooth" measurable. Both were established by
+   benchmark, not by taste, and the second one is the one that bites.
+
+   1. WHAT you animate. A decorative animation may touch `transform`
+      and `opacity` and nothing else. Those two are the only properties
+      the compositor can run off the main thread, so they survive a
+      busy CPU. Animating width / height / top / left / margin /
+      background-position forces layout or paint every frame. Worse,
+      the layout ones also register as layout shift: the explorer's
+      mobile drawer animated `left` and scored CLS 0.726 every time it
+      opened — Google calls anything over 0.25 "poor". The same drawer
+      on `transform` scores 0.
+
+   2. HOW MANY things animate. Keep it O(1) in the size of the page.
+      Every independently animated element is a compositor layer to
+      allocate, rasterise and composite. Past a few hundred, that count
+      — not the property — is the bottleneck, and rule 1 alone will
+      happily walk you off a cliff. The measurements are in 6c.
+
+   The one deliberate exception is a disclosure widget (accordion,
+   collapsible). There the box change IS the content the user asked
+   for, not decoration, so animating its height is correct. Decoration
+   animates transform; disclosure animates the box it discloses.
+
+   Durations are named for their ROLE so a caller cannot pick "300ms
+   because it felt right". Exits are shorter than entrances — by the
+   time a thing leaves the user has already decided, and waiting on it
+   reads as lag.
+   ================================================================ */
+:root {
+  /* --- Durations -------------------------------------------------- */
+  --lux-dur-press: 80ms;   /* tap acknowledgement                      */
+  --lux-dur-hover: 120ms;  /* pointer feedback                         */
+  --lux-dur-exit:  140ms;  /* something leaves                         */
+  --lux-dur-enter: 200ms;  /* something appears                        */
+  --lux-dur-move:  280ms;  /* a panel travels across the viewport      */
+
+  /* --- Curves ----------------------------------------------------- */
+  --lux-ease:        cubic-bezier(0.4, 0, 0.2, 1);      /* A -> B      */
+  --lux-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* entering    */
+  --lux-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);     /* leaving     */
+  --lux-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* press       */
+
+  /* --- Distances. Enter offsets are one value, not a per-component
+         guess. Both collapse to 0 under reduced motion. -------------- */
+  --lux-lift: 2px;         /* hover raise                              */
+  --lux-rise: 8px;         /* enter offset                             */
+}
+
+/* --- The six moves. transform + opacity only. --------------------- */
+@keyframes lux-fade-in  { from { opacity: 0 } to { opacity: 1 } }
+@keyframes lux-fade-out { from { opacity: 1 } to { opacity: 0 } }
+
+@keyframes lux-rise-in {
+  from { opacity: 0; transform: translate3d(0, var(--lux-rise), 0) }
+  to   { opacity: 1; transform: translate3d(0, 0, 0) }
+}
+
+@keyframes lux-scale-in {
+  from { opacity: 0; transform: scale(0.96) }
+  to   { opacity: 1; transform: scale(1) }
+}
+
+@keyframes lux-scale-out {
+  from { opacity: 1; transform: scale(1) }
+  to   { opacity: 0; transform: scale(0.96) }
+}
+
+/* The loading sweep — ONE per page, never one per skeleton. See 6c. */
+@keyframes lux-sweep {
+  from { transform: translate3d(-100%, 0, 0) }
+  to   { transform: translate3d(350%, 0, 0) }
+}
+
+@keyframes lux-spin { to { transform: rotate(360deg) } }
+
+/* ================================================================
+   6b — The primitives. Every surface reaches for these, never for a
+   hand-rolled keyframe.
+   ================================================================ */
+
+.lux-enter { animation: lux-rise-in  var(--lux-dur-enter) var(--lux-ease-out) both }
+.lux-exit  { animation: lux-fade-out var(--lux-dur-exit)  var(--lux-ease-in)  both }
+
+/* Floating surfaces — menu, popover, tooltip, dialog. They grow from
+   where they were summoned rather than sliding in from nowhere. */
+.lux-pop      { animation: lux-scale-in  var(--lux-dur-enter) var(--lux-ease-out) both }
+.lux-pop-exit { animation: lux-scale-out var(--lux-dur-exit)  var(--lux-ease-in)  both }
+
+/* A list cascades by setting --lux-i on each row; one property, no JS. */
+.lux-stagger { animation-delay: calc(var(--lux-i, 0) * 40ms) }
+
+/* Hover / press feedback. `transform` and `opacity` are the only
+   transitioned properties, so this is safe on any element. */
+.lux-interactive {
+  transition:
+    transform var(--lux-dur-hover) var(--lux-ease-out),
+    opacity   var(--lux-dur-hover) var(--lux-ease-out);
+}
+.lux-interactive:hover        { transform: translate3d(0, calc(-1 * var(--lux-lift)), 0) }
+.lux-interactive:active       { transform: scale(0.98); transition-duration: var(--lux-dur-press) }
+.lux-interactive:disabled,
+.lux-interactive[aria-disabled='true'] { transform: none }
+
+/* ================================================================
+   6c — The loading state. Two primitives, one job each.
+
+   `.lux-skeleton` RESERVES SPACE. `.lux-loading` SAYS WORK IS IN
+   FLIGHT. Keeping those apart is what makes the whole thing cheap,
+   because only the second one moves — once for the page, not once per
+   skeleton.
+
+   This is the part that is counter-intuitive, so here are the numbers
+   that settled it. Chromium, 390x844 @3x, 4x CPU throttle, 5s samples,
+   n = concurrently-mounted skeletons:
+
+     n=600   bgpos 79.6fps   sheen 57.2fps   pulse 115.4fps   bar 120fps
+     n=1460  bgpos 33.6fps   sheen 23.0fps   pulse  39.0fps   bar 120fps
+     n=3000  bgpos 13.8fps   sheen  5.4fps   pulse  18.2fps   bar 120fps
+
+     bgpos = per-element background-position gradient (what we shipped)
+     sheen = per-element transform on a ::after   (the "obvious" fix)
+     pulse = per-element opacity keyframe
+     bar   = flat skeletons + ONE page-level sweep  (what we ship now)
+
+   Read the middle column twice. Rewriting the shimmer as a per-element
+   `transform` — obeying "animate transform and opacity only" to the
+   letter — made it 32% SLOWER than the background-position version it
+   replaced, and at n=3000 it produced a single 2.5-SECOND frame.
+
+   The property rule is necessary and not sufficient. Past a few
+   hundred elements the dominant cost is the NUMBER of independently
+   animated elements: each one is a compositor layer to allocate,
+   rasterise and composite, and `overflow:hidden` on each adds a
+   render surface on top. Only the O(1) design is flat in n — 120fps
+   at 600, at 1460 and at 3000, identical to animating nothing.
+
+   So: a skeleton is a promise about layout and nothing else. It
+   occupies exactly the space the real content will (zero CLS) and it
+   holds still.
+   ================================================================ */
+.lux-skeleton {
+  background: var(--color-skeleton-start);
+  /* Nothing inside a skeleton is readable yet; say so once, here. */
+  color: transparent;
+  user-select: none;
+}
+
+/* The one moving part. Fixed, 2px, above everything, out of flow — so it
+   cannot shift layout and cannot tint content. Mount it while any request
+   is in flight; unmount it when they land. One per page. */
+.lux-loading {
+  position: fixed;
+  inset: 0 0 auto;
+  height: 2px;
+  z-index: 60;
+  overflow: hidden;
+  background: var(--color-skeleton-start);
+  pointer-events: none;
+}
+
+.lux-loading::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  width: 40%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color-skeleton-end) 50%,
+    transparent 100%
+  );
+  animation: lux-sweep 1.1s var(--lux-ease) infinite;
+}
+
+/* ================================================================
+   6d — Reduced motion.
+
+   Belt AND braces, because either alone leaks:
+     - zeroing the TOKENS catches anything that reads them, including
+       inline styles and the Web Animations API, which !important
+       cannot reach;
+     - the global override catches every hand-rolled transition that
+       never adopted a token.
+   Unscoped on purpose. A reduced-motion rule that only applies inside
+   one component is a rule the rest of the app ignores.
+
+   Motion goes; FEEDBACK stays. State changes still land, instantly.
+   ================================================================ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --lux-dur-press: 1ms;
+    --lux-dur-hover: 1ms;
+    --lux-dur-exit:  1ms;
+    --lux-dur-enter: 1ms;
+    --lux-dur-move:  1ms;
+    --lux-lift: 0px;
+    --lux-rise: 0px;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  /* A sweep that runs once and freezes mid-track is a smear. Drop the
+     motion; the bar itself stays, so "work in flight" is still visible. */
+  .lux-loading::after { animation: none; width: 100%; opacity: 0.5 }
+}