@wallarm-org/design-system 2.1.0 → 2.1.2-rc-fix-filter-cascade-tooltip.1

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

@@ -13,7 +13,7 @@ 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
+     * 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/FilterCascade/FilterCascadeTrigger.js

@@ -14,7 +14,7 @@ const CLEAR_KEYS = new Set([
     "Delete"
 ]);
 const FilterCascadeTrigger = (t0)=>{
-    const $ = c(65);
+    const $ = c(68);
     let ariaLabel;
     let children;
     let className;
@@ -79,6 +79,7 @@ const FilterCascadeTrigger = (t0)=>{
         $[16] = api;
         $[17] = t4;
     } else t4 = $[17];
+    const controlProps = t4;
     let t5;
     if ($[18] !== isSet) {
         t5 = cn(filterDropdownControlVariants({
@@ -216,9 +217,9 @@ const FilterCascadeTrigger = (t0)=>{
         $[50] = t16;
     } else t16 = $[50];
     let t17;
-    if ($[51] !== controlTestId || $[52] !== t15 || $[53] !== t16 || $[54] !== t4 || $[55] !== t5) {
+    if ($[51] !== controlProps || $[52] !== controlTestId || $[53] !== t15 || $[54] !== t16 || $[55] !== t5) {
         t17 = /*#__PURE__*/ jsxs("div", {
-            ...t4,
+            ...controlProps,
             "data-slot": "filter-cascade-control",
             "data-testid": controlTestId,
             className: t5,
@@ -227,50 +228,60 @@ const FilterCascadeTrigger = (t0)=>{
                 t16
             ]
         });
-        $[51] = controlTestId;
-        $[52] = t15;
-        $[53] = t16;
-        $[54] = t4;
+        $[51] = controlProps;
+        $[52] = controlTestId;
+        $[53] = t15;
+        $[54] = t16;
         $[55] = t5;
         $[56] = t17;
     } else t17 = $[56];
     const control = t17;
     if (!isSet) return control;
     let t18;
-    if ($[57] !== control) {
-        t18 = /*#__PURE__*/ jsx(TooltipTrigger, {
-            asChild: true,
-            children: control
-        });
-        $[57] = control;
+    if ($[57] !== controlProps.id) {
+        t18 = {
+            trigger: controlProps.id
+        };
+        $[57] = controlProps.id;
         $[58] = t18;
     } else t18 = $[58];
     let t19;
-    if ($[59] !== fullPath || $[60] !== label) {
-        t19 = /*#__PURE__*/ jsxs(TooltipContent, {
+    if ($[59] !== control) {
+        t19 = /*#__PURE__*/ jsx(TooltipTrigger, {
+            asChild: true,
+            children: control
+        });
+        $[59] = control;
+        $[60] = t19;
+    } else t19 = $[60];
+    let t20;
+    if ($[61] !== fullPath || $[62] !== label) {
+        t20 = /*#__PURE__*/ jsxs(TooltipContent, {
             children: [
                 label,
                 " — ",
                 fullPath
             ]
         });
-        $[59] = fullPath;
-        $[60] = label;
-        $[61] = t19;
-    } else t19 = $[61];
-    let t20;
-    if ($[62] !== t18 || $[63] !== t19) {
-        t20 = /*#__PURE__*/ jsxs(Tooltip, {
+        $[61] = fullPath;
+        $[62] = label;
+        $[63] = t20;
+    } else t20 = $[63];
+    let t21;
+    if ($[64] !== t18 || $[65] !== t19 || $[66] !== t20) {
+        t21 = /*#__PURE__*/ jsxs(Tooltip, {
+            ids: t18,
             children: [
-                t18,
-                t19
+                t19,
+                t20
             ]
         });
-        $[62] = t18;
-        $[63] = t19;
-        $[64] = t20;
-    } else t20 = $[64];
-    return t20;
+        $[64] = t18;
+        $[65] = t19;
+        $[66] = t20;
+        $[67] = t21;
+    } else t21 = $[67];
+    return t21;
 };
 FilterCascadeTrigger.displayName = "FilterCascadeTrigger";
 function _temp(node) {

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.0.0",
-  "generatedAt": "2026-10-07T13:55:02.346Z",
+  "version": "2.1.1",
+  "generatedAt": "2026-10-08T07:30:13.430Z",
   "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.",
+          "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,19 +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 and never repaints with the blooms.
+ *                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.
  *
- * Softness is baked into the gradient stops rather than `filter: blur()`:
- * a blur on a transform-animated layer is re-run by the GPU every frame, a
- * gradient is rasterised once and then only composited.
+ * 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
@@ -61,14 +61,13 @@
 }
 
 /* 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;
     --shape: circle;
     position: absolute;
     border-radius: 50%;
-    will-change: transform;
     background: radial-gradient(
         var(--shape),
         var(--c) 0%,
@@ -77,10 +76,6 @@
         color-mix(in srgb, var(--c) 12%, transparent) 64%,
         transparent 78%
     );
-
-    @media (prefers-reduced-motion: reduce) {
-        animation: none;
-    }
 }
 
 @utility app-shell-ambient-bloom-1 {
@@ -89,7 +84,6 @@
     height: 760px;
     left: -280px;
     bottom: -240px;
-    animation: app-shell-ambient-drift-1 60s ease-in-out infinite;
 }
 
 @utility app-shell-ambient-bloom-2 {
@@ -98,7 +92,6 @@
     height: 680px;
     left: -140px;
     top: 8%;
-    animation: app-shell-ambient-drift-2 74s ease-in-out infinite;
 }
 
 @utility app-shell-ambient-bloom-3 {
@@ -107,7 +100,6 @@
     height: 540px;
     left: -170px;
     top: 46%;
-    animation: app-shell-ambient-drift-3 66s ease-in-out infinite;
 }
 
 @utility app-shell-ambient-bloom-4 {
@@ -116,7 +108,6 @@
     height: 620px;
     left: 30px;
     bottom: -190px;
-    animation: app-shell-ambient-drift-4 82s ease-in-out infinite;
 }
 
 /* Header strip: three wide, flat ellipses crossing the top edge so the bar
@@ -130,7 +121,6 @@
     height: 540px;
     left: 22%;
     top: -360px;
-    animation: app-shell-ambient-drift-5 90s ease-in-out infinite;
 }
 
 @utility app-shell-ambient-bloom-6 {
@@ -140,7 +130,6 @@
     height: 580px;
     right: -300px;
     top: -390px;
-    animation: app-shell-ambient-drift-6 78s ease-in-out infinite;
 }
 
 @utility app-shell-ambient-bloom-7 {
@@ -150,138 +139,6 @@
     height: 500px;
     left: 20px;
     top: -350px;
-    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 {
@@ -294,11 +151,9 @@
 }
 
 /* Dot cluster. Confined to the bottom-left of the Frame (the only place it is
-   ever visible) so the animated masks repaint a small box, not the viewport.
-   Three masks intersect: the vertical fade, and two tiles of low-frequency
-   noise drifting in opposite directions. Dots show only where both noise
-   tiles are open, so patches of dots surface and dissolve in place over a
-   couple of minutes instead of sliding across. */
+   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;
@@ -325,23 +180,4 @@
         400px 400px;
     mask-repeat: no-repeat, repeat, repeat;
     mask-composite: intersect;
-    mask-position:
-        0 0,
-        0 0,
-        0 0;
-    animation: app-shell-ambient-dots-shift 150s linear infinite;
-
-    @media (prefers-reduced-motion: reduce) {
-        animation: none;
-    }
-}
-
-/* Whole-tile offsets (multiples of 400px) so the loop is seamless. */
-@keyframes app-shell-ambient-dots-shift {
-    to {
-        mask-position:
-            0 0,
-            400px -400px,
-            -800px 400px;
-    }
 }

package/package.json

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