@wallarm-org/design-system 2.3.0 → 2.3.2-rc-fix-filter-popover-handoff.1

package/dist/components/AppShell/AppShell.d.ts

@@ -13,9 +13,8 @@ export interface AppShellProps extends HTMLAttributes<HTMLDivElement>, TestableP
     onRevealed?: () => void;
     appeared?: boolean;
     /**
-     * The Frame's ambient layer — drifting blooms, grain and a dot cluster behind the header and
-     * rail. On by default; `false` leaves the flat Frame token fill. Still under
-     * `prefers-reduced-motion: reduce`.
+     * The Frame's ambient layer — soft blooms, grain and a dot cluster behind the header and
+     * rail. On by default; `false` leaves the flat Frame token fill.
      */
     ambient?: boolean;
 }

package/dist/components/AppShell/AppShellAmbient.d.ts

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 /**
  * The Frame's ambient layer. The Frame is the shell's gray zone — the header
  * bar plus the rail, everything around the canvas — and Ambient is the life in
- * it: slow-drifting blooms, grain and a dot cluster pooled bottom-left of the
+ * it: soft blooms, grain and a dot cluster pooled bottom-left of the
  * rail. Purely decorative, painted under every region (see
  * `theme/components/app-shell.css`). Internal to `AppShell`; toggled with its
  * `ambient` prop.

package/dist/components/AppShell/AppShellAmbient.js

@@ -12,6 +12,7 @@ const AppShellAmbient = ()=>{
     let t5;
     let t6;
     let t7;
+    let t8;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("div", {
             className: "app-shell-ambient-bloom app-shell-ambient-bloom-1"
@@ -37,6 +38,9 @@ const AppShellAmbient = ()=>{
         t7 = /*#__PURE__*/ jsx("div", {
             className: "app-shell-ambient-grain"
         });
+        t8 = /*#__PURE__*/ jsx("div", {
+            className: "app-shell-ambient-dots"
+        });
         $[0] = t0;
         $[1] = t1;
         $[2] = t2;
@@ -45,6 +49,7 @@ const AppShellAmbient = ()=>{
         $[5] = t5;
         $[6] = t6;
         $[7] = t7;
+        $[8] = t8;
     } else {
         t0 = $[0];
         t1 = $[1];
@@ -54,23 +59,8 @@ const AppShellAmbient = ()=>{
         t5 = $[5];
         t6 = $[6];
         t7 = $[7];
+        t8 = $[8];
     }
-    let t8;
-    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-        t8 = /*#__PURE__*/ jsx("div", {
-            className: "app-shell-ambient-dots",
-            children: /*#__PURE__*/ jsx("div", {
-                className: "app-shell-ambient-dots-noise-a",
-                children: /*#__PURE__*/ jsx("div", {
-                    className: "app-shell-ambient-dots-noise-b",
-                    children: /*#__PURE__*/ jsx("div", {
-                        className: "app-shell-ambient-dots-grid"
-                    })
-                })
-            })
-        });
-        $[8] = t8;
-    } else t8 = $[8];
     let t9;
     if ($[9] !== testId) {
         t9 = /*#__PURE__*/ jsxs("div", {

package/dist/components/FilterInput/FilterInputMenu/FilterInputFieldMenu/FieldMenuPopover.js

@@ -94,6 +94,7 @@ const FieldMenuPopover = (t0)=>{
             minWidth: "240px",
             maxWidth: "340px",
             className: "gap-6 pointer-events-none",
+            "data-filter-input-menu": "true",
             "data-testid": "field-menu-popover",
             children: [
                 t4,

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.2.0",
-  "generatedAt": "2026-10-08T10:17:05.571Z",
+  "version": "2.3.1",
+  "generatedAt": "2026-10-09T13:43:37.468Z",
   "components": [
     {
       "name": "Accordion",
@@ -4236,7 +4236,7 @@
           "name": "ambient",
           "type": "boolean | undefined",
           "required": false,
-          "description": "The Frame's ambient layer — drifting blooms, grain and a dot cluster behind the header and\nrail. On by default; `false` leaves the flat Frame token fill. Still under\n`prefers-reduced-motion: reduce`.",
+          "description": "The Frame's ambient layer — soft blooms, grain and a dot cluster behind the header and\nrail. On by default; `false` leaves the flat Frame token fill.",
           "defaultValue": "true"
         },
         {

package/dist/theme/components/app-shell.css

@@ -8,28 +8,19 @@
  * Three stacked layers, all decorative, all under the regions:
  *   1. blooms  — seven large soft gray spots: four in the rail (two lifts, two
  *                shades) and three flat ellipses crossing
- *                the top edge so the header carries the same light. They wander
- *                on 60–90 s loops, stretching as they move. This is the "mesh
- *                gradient" of the 21st.dev builder, in the shell's own tones.
+ *                the top edge so the header carries the same light. This is a
+ *                still frame of the "mesh gradient" of the 21st.dev builder, in
+ *                the shell's own tones.
  *   2. grain   — desaturated fractal noise tiled as a background image, so it
  *                rasterises once.
  *   3. dots    — a 12px halftone raster (the auth-page scanner's grid) pooled
  *                in the bottom-left of the rail, fading upward to nothing;
- *                patches of it surface and dissolve under two drifting noise
- *                masks, so the grid is never fully there.
+ *                two noise masks break it into patches, so the grid is never
+ *                fully there.
  *
- * Performance (ENG-911). Everything that moves animates `transform` /
- * `opacity` only, so the compositor shifts already-rasterised layers and
- * nothing is repainted. The dots used to animate `mask-position`, which Chrome
- * repaints on the main thread every frame (about a third of the old idle CPU);
- * the masks now ride on their own layers instead. Softness is baked into the
- * gradient stops rather than `filter: blur()`: a blur on a moving layer is
- * re-run by the GPU every frame, a gradient is rasterised once.
- *
- * Motion is opt-in: it runs only under `prefers-reduced-motion:
- * no-preference`, set on each `bloom-N` itself (a shared rule would lose to
- * the equally specific, later `bloom-N`). Otherwise the ambient is the
- * still first frame.
+ * Nothing here animates (ENG-911): endless 60–150 s drift loops kept a CPU
+ * core busy on every idle tab just to repaint a background nobody watches.
+ * Softness is baked into the gradient stops rather than `filter: blur()`.
  *
  * The canvas (`AppShellRemote`) sits on top, so none of this shows under page
  * content. Colours are theme tokens in semantic.css (light and dark), derived
@@ -70,7 +61,7 @@
 }
 
 /* One soft spot. Each `app-shell-ambient-bloom-N` only sets its colour (`--c`), shape,
-   size, position and drift path; the falloff below approximates a Gaussian so no
+   size and position; the falloff below approximates a Gaussian so no
    `filter: blur()` is needed. */
 @utility app-shell-ambient-bloom {
     --c: transparent;
@@ -93,10 +84,6 @@
     height: 760px;
     left: -280px;
     bottom: -240px;
-
-    @media (prefers-reduced-motion: no-preference) {
-        animation: app-shell-ambient-drift-1 60s ease-in-out infinite;
-    }
 }
 
 @utility app-shell-ambient-bloom-2 {
@@ -105,10 +92,6 @@
     height: 680px;
     left: -140px;
     top: 8%;
-
-    @media (prefers-reduced-motion: no-preference) {
-        animation: app-shell-ambient-drift-2 74s ease-in-out infinite;
-    }
 }
 
 @utility app-shell-ambient-bloom-3 {
@@ -117,10 +100,6 @@
     height: 540px;
     left: -170px;
     top: 46%;
-
-    @media (prefers-reduced-motion: no-preference) {
-        animation: app-shell-ambient-drift-3 66s ease-in-out infinite;
-    }
 }
 
 @utility app-shell-ambient-bloom-4 {
@@ -129,10 +108,6 @@
     height: 620px;
     left: 30px;
     bottom: -190px;
-
-    @media (prefers-reduced-motion: no-preference) {
-        animation: app-shell-ambient-drift-4 82s ease-in-out infinite;
-    }
 }
 
 /* Header strip: three wide, flat ellipses crossing the top edge so the bar
@@ -146,10 +121,6 @@
     height: 540px;
     left: 22%;
     top: -360px;
-
-    @media (prefers-reduced-motion: no-preference) {
-        animation: app-shell-ambient-drift-5 90s ease-in-out infinite;
-    }
 }
 
 @utility app-shell-ambient-bloom-6 {
@@ -159,10 +130,6 @@
     height: 580px;
     right: -300px;
     top: -390px;
-
-    @media (prefers-reduced-motion: no-preference) {
-        animation: app-shell-ambient-drift-6 78s ease-in-out infinite;
-    }
 }
 
 @utility app-shell-ambient-bloom-7 {
@@ -172,141 +139,6 @@
     height: 500px;
     left: 20px;
     top: -350px;
-
-    @media (prefers-reduced-motion: no-preference) {
-        animation: app-shell-ambient-drift-7 70s ease-in-out infinite;
-    }
-}
-
-/* Drift paths. Each spot wanders through four waypoints instead of a straight
-   back-and-forth, stretching along the direction it moves (a liquid smearing
-   on a surface) and breathing a little in opacity. Transform + opacity only,
-   so the rasterised gradient is never repainted, just composited. */
-@keyframes app-shell-ambient-drift-1 {
-    0% {
-        transform: translate(0, 0) rotate(0deg) scale(1, 1);
-        opacity: 1;
-    }
-    33% {
-        transform: translate(70px, -90px) rotate(6deg) scale(1.16, 0.92);
-        opacity: 0.9;
-    }
-    66% {
-        transform: translate(30px, -160px) rotate(-4deg) scale(0.94, 1.14);
-        opacity: 1;
-    }
-    100% {
-        transform: translate(0, 0) rotate(0deg) scale(1, 1);
-        opacity: 1;
-    }
-}
-@keyframes app-shell-ambient-drift-2 {
-    0% {
-        transform: translate(0, 0) rotate(0deg) scale(1, 1);
-        opacity: 0.95;
-    }
-    33% {
-        transform: translate(-50px, 110px) rotate(-8deg) scale(0.9, 1.18);
-        opacity: 1;
-    }
-    66% {
-        transform: translate(40px, 170px) rotate(5deg) scale(1.2, 0.9);
-        opacity: 0.88;
-    }
-    100% {
-        transform: translate(0, 0) rotate(0deg) scale(1, 1);
-        opacity: 0.95;
-    }
-}
-@keyframes app-shell-ambient-drift-3 {
-    0% {
-        transform: translate(0, 0) rotate(0deg) scale(1, 1);
-        opacity: 1;
-    }
-    33% {
-        transform: translate(60px, -120px) rotate(10deg) scale(1.22, 0.88);
-        opacity: 0.85;
-    }
-    66% {
-        transform: translate(-30px, -200px) rotate(-6deg) scale(0.92, 1.16);
-        opacity: 1;
-    }
-    100% {
-        transform: translate(0, 0) rotate(0deg) scale(1, 1);
-        opacity: 1;
-    }
-}
-@keyframes app-shell-ambient-drift-4 {
-    0% {
-        transform: translate(0, 0) rotate(0deg) scale(1, 1);
-        opacity: 0.9;
-    }
-    33% {
-        transform: translate(-80px, -60px) rotate(-7deg) scale(1.18, 0.9);
-        opacity: 1;
-    }
-    66% {
-        transform: translate(-40px, -140px) rotate(4deg) scale(0.9, 1.2);
-        opacity: 0.86;
-    }
-    100% {
-        transform: translate(0, 0) rotate(0deg) scale(1, 1);
-        opacity: 0.9;
-    }
-}
-@keyframes app-shell-ambient-drift-5 {
-    0% {
-        transform: translate(0, 0) scale(1, 1);
-        opacity: 1;
-    }
-    33% {
-        transform: translate(160px, 40px) scale(1.14, 0.94);
-        opacity: 0.85;
-    }
-    66% {
-        transform: translate(260px, 10px) scale(0.96, 1.1);
-        opacity: 1;
-    }
-    100% {
-        transform: translate(0, 0) scale(1, 1);
-        opacity: 1;
-    }
-}
-@keyframes app-shell-ambient-drift-6 {
-    0% {
-        transform: translate(0, 0) scale(1, 1);
-        opacity: 0.95;
-    }
-    33% {
-        transform: translate(-200px, 30px) scale(1.12, 0.92);
-        opacity: 1;
-    }
-    66% {
-        transform: translate(-320px, 60px) scale(0.94, 1.12);
-        opacity: 0.85;
-    }
-    100% {
-        transform: translate(0, 0) scale(1, 1);
-        opacity: 0.95;
-    }
-}
-@keyframes app-shell-ambient-drift-7 {
-    0% {
-        transform: translate(0, 0) scale(1, 1);
-        opacity: 1;
-    }
-    33% {
-        transform: translate(120px, 50px) scale(1.16, 0.9);
-        opacity: 0.88;
-    }
-    66% {
-        transform: translate(200px, 20px) scale(0.92, 1.12);
-        opacity: 1;
-    }
-    100% {
-        transform: translate(0, 0) scale(1, 1);
-        opacity: 1;
-    }
 }
 
 @utility app-shell-ambient-grain {
@@ -319,82 +151,33 @@
 }
 
 /* Dot cluster. Confined to the bottom-left of the Frame (the only place it is
-   ever visible). Three masks intersect: the vertical fade here, and two tiles
-   of low-frequency noise on the nested `dots-noise-*` layers. Dots show only
-   where both noise tiles are open, so patches surface and dissolve in place
-   over a couple of minutes instead of sliding across.
-
-   The noise tiles move by `transform`, not `mask-position`, so the compositor
-   slides them and nothing repaints. Each layer carries its mask with it, and
-   the grid counter-moves by the sum of the two, so the dots themselves stay
-   put. The noise layers overhang the box by 1200px (a multiple of both the
-   400px tile and the 12px grid) so their edges never show mid-loop. */
+   ever visible). Three masks intersect: the vertical fade, and two tiles of
+   low-frequency noise. Dots show only where both noise tiles are open, so the
+   grid reads as scattered patches. */
 @utility app-shell-ambient-dots {
     position: absolute;
     left: 0;
     bottom: 0;
     width: min(100%, 480px);
     height: min(560px, 64vh);
-    overflow: hidden;
-    mask-image: linear-gradient(
-        to top,
-        #000 0,
-        rgb(0 0 0 / 0.75) 22%,
-        rgb(0 0 0 / 0.4) 48%,
-        rgb(0 0 0 / 0.12) 74%,
-        transparent 94%
-    );
-}
-
-@utility app-shell-ambient-dots-noise-a {
-    position: absolute;
-    inset: -1200px;
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 5 5 0 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-    mask-size: 400px 400px;
-
-    @media (prefers-reduced-motion: no-preference) {
-        animation: app-shell-ambient-dots-noise-a 150s linear infinite;
-    }
-}
-
-@utility app-shell-ambient-dots-noise-b {
-    position: absolute;
-    inset: 0;
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 5 5 0 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-    mask-size: 400px 400px;
-
-    @media (prefers-reduced-motion: no-preference) {
-        animation: app-shell-ambient-dots-noise-b 150s linear infinite;
-    }
-}
-
-@utility app-shell-ambient-dots-grid {
-    position: absolute;
-    inset: 0;
     background-image: radial-gradient(circle at center, var(--color-component-app-shell-ambient-dot) 0.9px, transparent 1.1px);
     background-size: 12px 12px;
     background-position: 6px 6px;
-
-    @media (prefers-reduced-motion: no-preference) {
-        animation: app-shell-ambient-dots-grid 150s linear infinite;
-    }
-}
-
-/* Whole-tile offsets (multiples of 400px) so the loop is seamless. Noise A
-   travels (400, -400), noise B (-800, 400) in total — so (-1200, 800) relative
-   to A, which it sits inside — and the grid undoes B's total. */
-@keyframes app-shell-ambient-dots-noise-a {
-    to {
-        transform: translate(400px, -400px);
-    }
-}
-@keyframes app-shell-ambient-dots-noise-b {
-    to {
-        transform: translate(-1200px, 800px);
-    }
-}
-@keyframes app-shell-ambient-dots-grid {
-    to {
-        transform: translate(800px, -400px);
-    }
+    mask-image:
+        linear-gradient(
+            to top,
+            #000 0,
+            rgb(0 0 0 / 0.75) 22%,
+            rgb(0 0 0 / 0.4) 48%,
+            rgb(0 0 0 / 0.12) 74%,
+            transparent 94%
+        ),
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 5 5 0 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 5 5 0 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    mask-size:
+        100% 100%,
+        400px 400px,
+        400px 400px;
+    mask-repeat: no-repeat, repeat, repeat;
+    mask-composite: intersect;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "2.3.0",
+  "version": "2.3.2-rc-fix-filter-popover-handoff.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",