@wallarm-org/design-system 3.2.0-rc-feat-app-shell-aside.1 → 3.2.0-rc-feat-app-shell-aside.2

package/dist/components/AppShell/AppShell.js

@@ -6,11 +6,16 @@ import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { AppShellAmbient } from "./AppShellAmbient.js";
 import { AppShellContext } from "./AppShellContext.js";
+import { ASIDE_SLIDE_EASE, ASIDE_SLIDE_MS } from "./constants.js";
 import { ExpandOverlay } from "./ExpandOverlay.js";
 import { RevealOverlay } from "./RevealOverlay.js";
 import { useShellAnimation } from "./useShellAnimation.js";
+const ASIDE_MOTION = {
+    "--app-shell-aside-duration": `${ASIDE_SLIDE_MS}ms`,
+    "--app-shell-aside-ease": ASIDE_SLIDE_EASE
+};
 const AppShell = (t0)=>{
-    const $ = c(50);
+    const $ = c(52);
     let appearedProp;
     let children;
     let className;
@@ -80,92 +85,101 @@ const AppShell = (t0)=>{
     } else t4 = $[19];
     let t5;
     if ($[20] !== className) {
-        t5 = cn('relative isolate grid h-screen overscroll-none [grid-template-areas:"header_header_header""rail_remote_aside"] [grid-template-columns:auto_1fr_auto] [grid-template-rows:auto_1fr] bg-component-app-shell-bg', className);
+        t5 = cn('relative isolate grid h-screen overscroll-none [grid-template-areas:"header_header_header""rail_remote_aside"] [grid-template-columns:auto_1fr_0px] [grid-template-rows:auto_1fr] bg-component-app-shell-bg', "[--app-shell-aside-width:--spacing(480)]", "has-[>[data-slot=app-shell-aside][data-state=open]]:[grid-template-columns:auto_1fr_calc(var(--app-shell-aside-width)+var(--spacing-8)*2)] has-[>[data-slot=app-shell-aside]]:overflow-x-clip", "transition-[grid-template-columns] duration-(--app-shell-aside-duration) ease-(--app-shell-aside-ease) motion-reduce:transition-none", className);
         $[20] = className;
         $[21] = t5;
     } else t5 = $[21];
-    const t6 = expandFrom ? handleExpandTransitionEnd : void 0;
-    let t7;
-    if ($[22] !== ambient) {
-        t7 = ambient && /*#__PURE__*/ jsx(AppShellAmbient, {});
-        $[22] = ambient;
-        $[23] = t7;
-    } else t7 = $[23];
+    let t6;
+    if ($[22] !== expandStyle) {
+        t6 = {
+            ...ASIDE_MOTION,
+            ...expandStyle
+        };
+        $[22] = expandStyle;
+        $[23] = t6;
+    } else t6 = $[23];
+    const t7 = expandFrom ? handleExpandTransitionEnd : void 0;
     let t8;
-    if ($[24] !== expandFrom || $[25] !== phase || $[26] !== targetRect) {
-        t8 = expandFrom && /*#__PURE__*/ jsx(ExpandOverlay, {
+    if ($[24] !== ambient) {
+        t8 = ambient && /*#__PURE__*/ jsx(AppShellAmbient, {});
+        $[24] = ambient;
+        $[25] = t8;
+    } else t8 = $[25];
+    let t9;
+    if ($[26] !== expandFrom || $[27] !== phase || $[28] !== targetRect) {
+        t9 = expandFrom && /*#__PURE__*/ jsx(ExpandOverlay, {
             phase: phase,
             expandFrom: expandFrom,
             targetRect: targetRect
         });
-        $[24] = expandFrom;
-        $[25] = phase;
-        $[26] = targetRect;
-        $[27] = t8;
-    } else t8 = $[27];
-    let t9;
-    if ($[28] !== expandFrom || $[29] !== handleRevealOverlayTransitionEnd || $[30] !== phase || $[31] !== targetRect) {
-        t9 = !expandFrom && /*#__PURE__*/ jsx(RevealOverlay, {
+        $[26] = expandFrom;
+        $[27] = phase;
+        $[28] = targetRect;
+        $[29] = t9;
+    } else t9 = $[29];
+    let t10;
+    if ($[30] !== expandFrom || $[31] !== handleRevealOverlayTransitionEnd || $[32] !== phase || $[33] !== targetRect) {
+        t10 = !expandFrom && /*#__PURE__*/ jsx(RevealOverlay, {
             phase: phase,
             targetRect: targetRect,
             onTransitionEnd: handleRevealOverlayTransitionEnd
         });
-        $[28] = expandFrom;
-        $[29] = handleRevealOverlayTransitionEnd;
-        $[30] = phase;
-        $[31] = targetRect;
-        $[32] = t9;
-    } else t9 = $[32];
-    let t10;
-    if ($[33] !== children || $[34] !== expandStyle || $[35] !== props || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 || $[41] !== t9 || $[42] !== testId) {
-        t10 = /*#__PURE__*/ jsxs("div", {
+        $[30] = expandFrom;
+        $[31] = handleRevealOverlayTransitionEnd;
+        $[32] = phase;
+        $[33] = targetRect;
+        $[34] = t10;
+    } else t10 = $[34];
+    let t11;
+    if ($[35] !== children || $[36] !== props || $[37] !== t10 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9 || $[44] !== testId) {
+        t11 = /*#__PURE__*/ jsxs("div", {
             ...props,
             ref: t4,
             "data-slot": "app-shell",
             "data-testid": testId,
             className: t5,
-            style: expandStyle,
-            onTransitionEnd: t6,
+            style: t6,
+            onTransitionEnd: t7,
             children: [
-                t7,
-                children,
                 t8,
-                t9
+                children,
+                t9,
+                t10
             ]
         });
-        $[33] = children;
-        $[34] = expandStyle;
-        $[35] = props;
-        $[36] = t4;
-        $[37] = t5;
-        $[38] = t6;
-        $[39] = t7;
-        $[40] = t8;
-        $[41] = t9;
-        $[42] = testId;
-        $[43] = t10;
-    } else t10 = $[43];
-    let t11;
-    if ($[44] !== shellContext || $[45] !== t10) {
-        t11 = /*#__PURE__*/ jsx(AppShellContext.Provider, {
-            value: shellContext,
-            children: t10
-        });
-        $[44] = shellContext;
-        $[45] = t10;
-        $[46] = t11;
-    } else t11 = $[46];
+        $[35] = children;
+        $[36] = props;
+        $[37] = t10;
+        $[38] = t4;
+        $[39] = t5;
+        $[40] = t6;
+        $[41] = t7;
+        $[42] = t8;
+        $[43] = t9;
+        $[44] = testId;
+        $[45] = t11;
+    } else t11 = $[45];
     let t12;
-    if ($[47] !== t11 || $[48] !== testId) {
-        t12 = /*#__PURE__*/ jsx(TestIdProvider, {
-            value: testId,
+    if ($[46] !== shellContext || $[47] !== t11) {
+        t12 = /*#__PURE__*/ jsx(AppShellContext.Provider, {
+            value: shellContext,
             children: t11
         });
+        $[46] = shellContext;
         $[47] = t11;
-        $[48] = testId;
+        $[48] = t12;
+    } else t12 = $[48];
+    let t13;
+    if ($[49] !== t12 || $[50] !== testId) {
+        t13 = /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: t12
+        });
         $[49] = t12;
-    } else t12 = $[49];
-    return t12;
+        $[50] = testId;
+        $[51] = t13;
+    } else t13 = $[51];
+    return t13;
 };
 AppShell.displayName = "AppShell";
 export { AppShell };

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

@@ -2,8 +2,10 @@ import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
 export interface AppShellAsideProps extends HTMLAttributes<HTMLElement> {
     ref?: Ref<HTMLElement>;
     /**
-     * Shows the panel. Closed, the region takes no space and is `hidden` and `inert`, but its
-     * children stay mounted, so whatever state they hold survives a close and reopen.
+     * Shows the panel, sliding it in from the right as the canvas narrows. Closing makes it
+     * `hidden` and `inert` at once and slides it back out, after which it takes no space; under
+     * reduced motion both are instant. Its children stay mounted throughout, so whatever state
+     * they hold survives a close and reopen.
      */
     open: boolean;
     children?: ReactNode;
@@ -11,5 +13,13 @@ export interface AppShellAsideProps extends HTMLAttributes<HTMLElement> {
 /**
  * A panel docked right of the content surface, in the shell's `aside` grid area. Render it
  * after `AppShellRemote`: while it is open, the remote turns into a card beside it.
+ *
+ * It is 480px wide. To change that, set `--app-shell-aside-width` on the `AppShell` (for example
+ * `className='[--app-shell-aside-width:400px]'`), not a width class here: the shell sizes its
+ * track from the same variable.
+ *
+ * Desktop-first: while it is open the shell needs room for the rail plus the panel. In a
+ * narrower window the right end (the panel and the header's last actions) is clipped rather
+ * than scrolled to, so keep a min-width on the host or close the panel on narrow viewports.
  */
 export declare const AppShellAside: FC<AppShellAsideProps>;

package/dist/components/AppShell/AppShellAside.js

@@ -30,7 +30,7 @@ const AppShellAside = (t0)=>{
     const t3 = open ? "open" : "closed";
     let t4;
     if ($[6] !== className) {
-        t4 = cn("[grid-area:aside] mx-8 mb-8 data-[state=open]:flex w-480 flex-col overflow-auto overscroll-none rounded-12 border border-border-primary-light bg-bg-page-bg pb-4", className);
+        t4 = cn("[grid-area:aside] mx-8 mb-8 data-[state=open]:flex w-(--app-shell-aside-width) flex-col overflow-auto overscroll-none rounded-12 border border-border-primary-light bg-bg-page-bg pb-4", "transition-[display] transition-discrete duration-(--app-shell-aside-duration) ease-(--app-shell-aside-ease) motion-reduce:transition-none", className);
         $[6] = className;
         $[7] = t4;
     } else t4 = $[7];

package/dist/components/AppShell/AppShellRemote.js

@@ -24,7 +24,7 @@ const AppShellRemote = (t0)=>{
     const testId = useTestId("remote");
     let t1;
     if ($[5] !== className) {
-        t1 = cn("[grid-area:remote] relative overflow-auto overscroll-none rounded-tl-12 border-t border-l border-border-primary-light bg-bg-page-bg", "has-[~[data-slot=app-shell-aside][data-state=open]]:rounded-tr-12 has-[~[data-slot=app-shell-aside][data-state=open]]:border-r", className);
+        t1 = cn("[grid-area:remote] relative overflow-auto overscroll-none rounded-tl-12 border-t border-l border-border-primary-light bg-bg-page-bg", "has-[~[data-slot=app-shell-aside][data-state=open]]:rounded-tr-12 has-[~[data-slot=app-shell-aside][data-state=open]]:border-r", "transition-[border-top-right-radius,border-right-width] duration-(--app-shell-aside-duration) ease-(--app-shell-aside-ease) motion-reduce:transition-none", className);
         $[5] = className;
         $[6] = t1;
     } else t1 = $[6];

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

@@ -4,3 +4,6 @@ export declare const MORPH_MS = 600;
 export declare const EXPAND_MS = 560;
 export declare const EXPAND_BORDER_MS = 400;
 export declare const SKELETON_DELAY = 250;
+/** AppShellAside's slide. Starts on the boot expand's border timing; tune it on its own. */
+export declare const ASIDE_SLIDE_MS = 400;
+export declare const ASIDE_SLIDE_EASE = "cubic-bezier(0.4, 0, 0.2, 1)";

package/dist/components/AppShell/constants.js

@@ -4,4 +4,6 @@ const MORPH_MS = 600;
 const EXPAND_MS = 560;
 const EXPAND_BORDER_MS = 400;
 const SKELETON_DELAY = 250;
-export { EMPHASIZED_DECEL, EXPAND_BORDER_MS, EXPAND_MS, HERO_EASE, MORPH_MS, SKELETON_DELAY };
+const ASIDE_SLIDE_MS = 400;
+const ASIDE_SLIDE_EASE = HERO_EASE;
+export { ASIDE_SLIDE_EASE, ASIDE_SLIDE_MS, EMPHASIZED_DECEL, EXPAND_BORDER_MS, EXPAND_MS, HERO_EASE, MORPH_MS, SKELETON_DELAY };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "3.1.0",
-  "generatedAt": "2026-10-21T12:04:49.932Z",
+  "generatedAt": "2026-10-21T13:45:39.845Z",
   "components": [
     {
       "name": "Accordion",
@@ -4519,7 +4519,7 @@
               "name": "open",
               "type": "boolean",
               "required": true,
-              "description": "Shows the panel. Closed, the region takes no space and is `hidden` and `inert`, but its\nchildren stay mounted, so whatever state they hold survives a close and reopen."
+              "description": "Shows the panel, sliding it in from the right as the canvas narrows. Closing makes it\n`hidden` and `inert` at once and slides it back out, after which it takes no space; under\nreduced motion both are instant. Its children stay mounted throughout, so whatever state\nthey hold survives a close and reopen."
             },
             {
               "name": "defaultChecked",
@@ -5633,7 +5633,7 @@
         {
           "name": "WithAside",
           "code": "({ ambient }) => (\n  <StoryRouter>\n    <Shell ambient={ambient} aside />\n  </StoryRouter>\n)",
-          "description": "`AppShellAside` docks a panel right of the content surface — a stand-in assistant here, toggled from the header — and closing it hides the region without unmounting what is inside, so text typed into the panel survives a close and reopen."
+          "description": "`AppShellAside` docks a panel right of the content surface — a stand-in assistant here, toggled from the header — that slides in as the canvas narrows and back out on close, hiding the region without unmounting what is inside, so text typed into the panel survives a close and reopen."
         },
         {
           "name": "RevealFlow",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "3.2.0-rc-feat-app-shell-aside.1",
+  "version": "3.2.0-rc-feat-app-shell-aside.2",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",