@wallarm-org/design-system 1.22.3-rc-fix-date-utils-honour-format-context.1 → 1.23.0

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

@@ -12,5 +12,10 @@ export interface AppShellProps extends HTMLAttributes<HTMLDivElement>, TestableP
     expandFrom?: AppShellExpandFrom;
     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.
+     */
+    ambient?: boolean;
 }
 export declare const AppShell: FC<AppShellProps>;

package/dist/components/AppShell/AppShell.js

@@ -3,11 +3,12 @@ import { useMemo, useRef } from "react";
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
+import { AppShellAmbient } from "./AppShellAmbient.js";
 import { AppShellContext } from "./AppShellContext.js";
 import { ExpandOverlay } from "./ExpandOverlay.js";
 import { RevealOverlay } from "./RevealOverlay.js";
 import { useShellAnimation } from "./useShellAnimation.js";
-const AppShell = ({ ref, className, children, reveal, expandFrom, onRevealed, appeared: appearedProp, 'data-testid': testId, ...props })=>{
+const AppShell = ({ ref, className, children, reveal, expandFrom, onRevealed, appeared: appearedProp, ambient = true, 'data-testid': testId, ...props })=>{
     const internalRef = useRef(null);
     const { phase, targetRect, expandStyle, appeared, handleRevealOverlayTransitionEnd, handleExpandTransitionEnd } = useShellAnimation(internalRef, {
         reveal,
@@ -29,10 +30,11 @@ const AppShell = ({ ref, className, children, reveal, expandFrom, onRevealed, ap
                 ref: composeRefs(internalRef, ref),
                 "data-slot": "app-shell",
                 "data-testid": testId,
-                className: cn('relative grid h-screen overscroll-none [grid-template-areas:"header_header""rail_remote"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr] bg-component-app-shell-bg', className),
+                className: cn('relative isolate grid h-screen overscroll-none [grid-template-areas:"header_header""rail_remote"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr] bg-component-app-shell-bg', className),
                 style: expandStyle,
                 onTransitionEnd: expandFrom ? handleExpandTransitionEnd : void 0,
                 children: [
+                    ambient && /*#__PURE__*/ jsx(AppShellAmbient, {}),
                     children,
                     expandFrom && /*#__PURE__*/ jsx(ExpandOverlay, {
                         phase: phase,

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

@@ -0,0 +1,10 @@
+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
+ * rail. Purely decorative, painted under every region (see
+ * `theme/components/app-shell.css`). Internal to `AppShell`; toggled with its
+ * `ambient` prop.
+ */
+export declare const AppShellAmbient: FC;

package/dist/components/AppShell/AppShellAmbient.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+const AppShellAmbient = ()=>{
+    const testId = useTestId('ambient');
+    return /*#__PURE__*/ jsxs("div", {
+        "aria-hidden": "true",
+        "data-slot": "app-shell-ambient",
+        "data-testid": testId,
+        className: "app-shell-ambient",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "app-shell-ambient-bloom app-shell-ambient-bloom-1"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "app-shell-ambient-bloom app-shell-ambient-bloom-2"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "app-shell-ambient-bloom app-shell-ambient-bloom-3"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "app-shell-ambient-bloom app-shell-ambient-bloom-4"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "app-shell-ambient-bloom app-shell-ambient-bloom-5"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "app-shell-ambient-bloom app-shell-ambient-bloom-6"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "app-shell-ambient-bloom app-shell-ambient-bloom-7"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "app-shell-ambient-grain"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "app-shell-ambient-dots"
+            })
+        ]
+    });
+};
+AppShellAmbient.displayName = 'AppShellAmbient';
+export { AppShellAmbient };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.22.2",
-  "generatedAt": "2026-09-24T08:10:05.373Z",
+  "version": "1.22.3",
+  "generatedAt": "2026-09-24T15:23:59.270Z",
   "components": [
     {
       "name": "Accordion",
@@ -4232,6 +4232,13 @@
           "type": "boolean | undefined",
           "required": false
         },
+        {
+          "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.",
+          "defaultValue": "true"
+        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",
@@ -5334,7 +5341,7 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [loading, setLoading] = useState(true);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  return (\n    <AppShell>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <WallarmLogo />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            {loading ? (\n              <>\n                <Skeleton width='150px' height='20px' rounded={6} />\n                <TopHeaderSeparator />\n                <Skeleton width='150px' height='20px' rounded={6} />\n\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button\n                      variant='ghost'\n                      size='small'\n                      color='neutral'\n                      aria-label='Wallarm Updates'\n                    >\n                      <Bell />\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>Wallarm updates</TooltipContent>\n                </Tooltip>\n\n                <QuickHelpDropdown />\n              </>\n            ) : (\n              <HeaderActions />\n            )}\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail collapsed={collapsed}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <RecentDropdown />\n\n            <NavRailSeparator />\n\n            {loading ? <NavRailSkeleton /> : <ProductNavItems activeProduct={activeProduct} />}\n          </NavRailBody>\n\n          <NavRailFooterContent\n            activeProduct={activeProduct}\n            sidebarMode={sidebarMode}\n            onSidebarModeChange={setSidebarMode}\n            theme={theme}\n            onThemeChange={setTheme}\n          />\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <div className='flex gap-8 absolute top-4 right-4 z-10'>\n          <Button variant='ghost' size='small' color='neutral' onClick={() => setLoading(v => !v)}>\n            {loading ? 'Finish loading' : 'Start loading'}\n          </Button>\n        </div>\n\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}",
+          "code": "({ ambient }) => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [loading, setLoading] = useState(true);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  return (\n    <AppShell ambient={ambient}>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <WallarmLogo />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            {loading ? (\n              <>\n                <Skeleton width='150px' height='20px' rounded={6} />\n                <TopHeaderSeparator />\n                <Skeleton width='150px' height='20px' rounded={6} />\n\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button\n                      variant='ghost'\n                      size='small'\n                      color='neutral'\n                      aria-label='Wallarm Updates'\n                    >\n                      <Bell />\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>Wallarm updates</TooltipContent>\n                </Tooltip>\n\n                <QuickHelpDropdown />\n              </>\n            ) : (\n              <HeaderActions />\n            )}\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail collapsed={collapsed}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <RecentDropdown />\n\n            <NavRailSeparator />\n\n            {loading ? <NavRailSkeleton /> : <ProductNavItems activeProduct={activeProduct} />}\n          </NavRailBody>\n\n          <NavRailFooterContent\n            activeProduct={activeProduct}\n            sidebarMode={sidebarMode}\n            onSidebarModeChange={setSidebarMode}\n            theme={theme}\n            onThemeChange={setTheme}\n          />\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <div className='flex gap-8 absolute top-4 right-4 z-10'>\n          <Button variant='ghost' size='small' color='neutral' onClick={() => setLoading(v => !v)}>\n            {loading ? 'Finish loading' : 'Start loading'}\n          </Button>\n        </div>\n\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}",
           "description": "The three regions composed once — `AppShellHeader`, `AppShellRail`, `AppShellRemote` — with the content surface being the only part that scrolls."
         },
         {
@@ -102156,6 +102163,10 @@
           "name": "--color-component-app-shell-bg",
           "value": "var(--color-slate-100)"
         },
+        {
+          "name": "--color-component-app-shell-ambient-dot",
+          "value": "--alpha(var(--color-slate-500) / 28%)"
+        },
         {
           "name": "--color-component-empty-state-medallion-bg-from",
           "value": "var(--color-white)"
@@ -103230,6 +103241,10 @@
           "name": "--color-component-app-shell-bg",
           "value": "var(--color-slate-975)"
         },
+        {
+          "name": "--color-component-app-shell-ambient-dot",
+          "value": "--alpha(var(--color-slate-50) / 15%)"
+        },
         {
           "name": "--color-component-empty-state-medallion-bg-from",
           "value": "--alpha(var(--color-white) / 7%)"

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

@@ -0,0 +1,336 @@
+/**
+ * AppShell Frame ambient (WDS-181).
+ *
+ * Vocabulary: the **Frame** is the shell's gray surround — the header bar plus
+ * the rail, everything that is not the canvas. **Ambient** is the barely-there
+ * life painted into it.
+ *
+ * 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.
+ *   2. grain   — desaturated fractal noise tiled as a background image, so it
+ *                rasterises once and never repaints with the blooms.
+ *   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.
+ *
+ * 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.
+ *
+ * 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
+ * from the Frame token; only grain opacity/blend live in this file.
+ */
+
+/* Colours are theme tokens (`--color-component-app-shell-ambient-*` in
+   semantic.css, beside the Frame token they derive from). Only the non-colour
+   knobs live here. */
+:root {
+    --app-shell-ambient-grain-opacity: 0.36;
+    --app-shell-ambient-grain-blend: multiply;
+}
+
+[data-theme='dark'] {
+    --app-shell-ambient-grain-opacity: 0.28;
+    --app-shell-ambient-grain-blend: screen;
+}
+
+@utility app-shell-ambient {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+    contain: layout paint;
+}
+
+/* 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
+   `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%,
+        color-mix(in srgb, var(--c) 78%, transparent) 22%,
+        color-mix(in srgb, var(--c) 40%, transparent) 46%,
+        color-mix(in srgb, var(--c) 12%, transparent) 64%,
+        transparent 78%
+    );
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
+}
+
+@utility app-shell-ambient-bloom-1 {
+    --c: var(--color-component-app-shell-ambient-lift);
+    width: 760px;
+    height: 760px;
+    left: -280px;
+    bottom: -240px;
+    animation: app-shell-ambient-drift-1 60s ease-in-out infinite;
+}
+
+@utility app-shell-ambient-bloom-2 {
+    --c: var(--color-component-app-shell-ambient-shade);
+    width: 680px;
+    height: 680px;
+    left: -140px;
+    top: 8%;
+    animation: app-shell-ambient-drift-2 74s ease-in-out infinite;
+}
+
+@utility app-shell-ambient-bloom-3 {
+    --c: var(--color-component-app-shell-ambient-lift-soft);
+    width: 540px;
+    height: 540px;
+    left: -170px;
+    top: 46%;
+    animation: app-shell-ambient-drift-3 66s ease-in-out infinite;
+}
+
+@utility app-shell-ambient-bloom-4 {
+    --c: var(--color-component-app-shell-ambient-shade-soft);
+    width: 620px;
+    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
+   catches an echo of the rail's light — a shade over the centre, a lift toward
+   the actions on the right, and a shade bridging the corner past the logo so
+   the bar and the rail read as one fluid, not two zones. */
+@utility app-shell-ambient-bloom-5 {
+    --c: var(--color-component-app-shell-ambient-header);
+    --shape: ellipse;
+    width: clamp(1000px, 55vw, 1400px);
+    height: 540px;
+    left: 22%;
+    top: -360px;
+    animation: app-shell-ambient-drift-5 90s ease-in-out infinite;
+}
+
+@utility app-shell-ambient-bloom-6 {
+    --c: var(--color-component-app-shell-ambient-lift);
+    --shape: ellipse;
+    width: clamp(1100px, 60vw, 1500px);
+    height: 580px;
+    right: -300px;
+    top: -390px;
+    animation: app-shell-ambient-drift-6 78s ease-in-out infinite;
+}
+
+@utility app-shell-ambient-bloom-7 {
+    --c: var(--color-component-app-shell-ambient-header);
+    --shape: ellipse;
+    width: clamp(780px, 50vw, 1100px);
+    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 {
+    position: absolute;
+    inset: 0;
+    opacity: var(--app-shell-ambient-grain-opacity);
+    mix-blend-mode: var(--app-shell-ambient-grain-blend);
+    background-size: 256px 256px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.24'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+/* 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. */
+@utility app-shell-ambient-dots {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: min(100%, 480px);
+    height: min(560px, 64vh);
+    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;
+    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;
+    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/dist/theme/index.css

@@ -28,6 +28,7 @@
 @import './components/progress.css';
 @import './components/product-nav.css';
 @import './components/animated-background.css';
+@import './components/app-shell.css';
 @import './components/chart.css';
 
 [data-scope='scroll-area'][data-part='viewport'] {

package/dist/theme/semantic.css

@@ -216,6 +216,38 @@
     --color-component-toast-ic-info: var(--color-blue-400);
     --color-component-app-shell-bg: var(--color-slate-100);
 
+    /* AppShell Frame ambient — the soft spots and dot raster painted into the
+     * Frame (header + rail). Every tone derives from the Frame token above, so
+     * a branded Frame (any hue) lights and shades itself: "lift" mixes the base
+     * toward white, "shade" toward black, in oklch to keep the hue honest.
+     * Achromatic by design: no accent tint. */
+    --color-component-app-shell-ambient-lift: color-mix(
+        in oklch,
+        var(--color-component-app-shell-bg),
+        white 70%
+    );
+    --color-component-app-shell-ambient-lift-soft: color-mix(
+        in srgb,
+        color-mix(in oklch, var(--color-component-app-shell-bg), white 45%) 70%,
+        transparent
+    );
+    --color-component-app-shell-ambient-shade: color-mix(
+        in srgb,
+        color-mix(in oklch, var(--color-component-app-shell-bg), black 10%) 70%,
+        transparent
+    );
+    --color-component-app-shell-ambient-shade-soft: color-mix(
+        in srgb,
+        color-mix(in oklch, var(--color-component-app-shell-bg), black 5%) 65%,
+        transparent
+    );
+    --color-component-app-shell-ambient-header: color-mix(
+        in srgb,
+        color-mix(in oklch, var(--color-component-app-shell-bg), black 7%) 22%,
+        transparent
+    );
+    --color-component-app-shell-ambient-dot: --alpha(var(--color-slate-500) / 28%);
+
     /* EmptyState medallion — the small raised tile behind the empty-state icon.
      * Reads as a lit surface: a top-down gradient, a hairline border, a soft
      * drop shadow and an inner top highlight. Kept as tokens (not utilities)
@@ -630,6 +662,35 @@
     --color-component-toast-ic-info: var(--color-blue-600);
     --color-component-app-shell-bg: var(--color-slate-975);
 
+    /* AppShell Frame ambient (dark) — on a near-black base only lifts read, so
+     * every spot mixes toward white. */
+    --color-component-app-shell-ambient-lift: color-mix(
+        in srgb,
+        color-mix(in oklch, var(--color-component-app-shell-bg), white 11%) 95%,
+        transparent
+    );
+    --color-component-app-shell-ambient-lift-soft: color-mix(
+        in srgb,
+        color-mix(in oklch, var(--color-component-app-shell-bg), white 14%) 70%,
+        transparent
+    );
+    --color-component-app-shell-ambient-shade: color-mix(
+        in srgb,
+        color-mix(in oklch, var(--color-component-app-shell-bg), white 18%) 60%,
+        transparent
+    );
+    --color-component-app-shell-ambient-shade-soft: color-mix(
+        in srgb,
+        color-mix(in oklch, var(--color-component-app-shell-bg), white 6%) 95%,
+        transparent
+    );
+    --color-component-app-shell-ambient-header: color-mix(
+        in srgb,
+        color-mix(in oklch, var(--color-component-app-shell-bg), white 10%) 30%,
+        transparent
+    );
+    --color-component-app-shell-ambient-dot: --alpha(var(--color-slate-50) / 15%);
+
     /* EmptyState medallion (dark) — same recipe inverted: the gradient and the
      * top highlight become low-alpha white, the shadows deepen to near-black. */
     --color-component-empty-state-medallion-bg-from: --alpha(var(--color-white) / 7%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.22.3-rc-fix-date-utils-honour-format-context.1",
+  "version": "1.23.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",