@matteoaliano/forest-ui 1.2.3 → 1.2.4

package/dist/index.d.ts

@@ -558,6 +558,12 @@ interface AppShellProps {
  * sticky AppBar (brand / search / actions + the color-mode toggle) over a
  * SidebarNav and a main content area. Render a <Page> as children.
  *
+ * The AppBar and the sidebar read as one continuous L-shaped chrome — they
+ * already share `bg.primary`, so the shell drops the borders that used to cut
+ * them apart. The main region is then a lifted surface tucked into the corner
+ * they form: rounded at the top-left only, flush with the right and bottom
+ * window edges.
+ *
  * Below the "sm" breakpoint the sidebar becomes a temporary overlay drawer
  * opened by a hamburger button in the AppBar.
  */

package/dist/index.js

@@ -1389,7 +1389,13 @@ function buildComponents(tokens2) {
             borderBottomLeftRadius: radius4.md,
             borderBottomRightRadius: radius4.md,
             opacity: 0.75,
-            boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.3)",
+            // The pressed-in cue is carried by the flattened bevel (bottom
+            // border 4px -> 1px) alone in light mode. On the dark-mode face
+            // that geometry reads too faintly, so it keeps the inner shadow.
+            boxShadow: "none",
+            ...theme.applyStyles("dark", {
+              boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.3)"
+            }),
             "&::before": { display: "none" },
             // Stays pressed on hover — no bevel re-raise, no brightness lift.
             "&:hover": {
@@ -3425,7 +3431,12 @@ var display = {
 var container = {
   maxWidthDesktop: 1280,
   paddingDesktop: 32,
-  paddingMobile: 16
+  paddingMobile: 16,
+  // Corner radius of the App Shell's content surface where it meets the
+  // chrome. Deliberately a layout value rather than a step on the `radius`
+  // scale: that scale governs components (and the sharper alkemy+ preset caps
+  // it at 12), so a 24 sitting in it would misread as a component radius.
+  shellRadius: 24
 };
 var widths = {
   xxs: 320,
@@ -5513,7 +5524,13 @@ function SidebarNav({
         // Match the drawer paper's width animation so the absolutely-
         // positioned toggle (pinned to this box's right edge) glides with the
         // sidebar instead of jumping. Constant in hover mode → no-op there.
-        transition: "width 200ms ease-in-out"
+        transition: "width 200ms ease-in-out",
+        // A hover-expanded sidebar has to overlay the content, which in
+        // AppShell sits at drawer + 1. This lives on the wrapper rather than
+        // on `& .MuiDrawer-paper` because a consumer's `sx` replaces that
+        // nested key wholesale (AppShell does). Only while expanded, so the
+        // resting rail still takes the content surface's shadow.
+        ...isHover && open && { zIndex: (theme) => theme.zIndex.drawer + 2 }
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -5529,8 +5546,7 @@ function SidebarNav({
                 width: drawerWidth,
                 transition: "width 200ms ease-in-out",
                 overflowX: "hidden",
-                boxSizing: "border-box",
-                ...isHover && { zIndex: (theme) => theme.zIndex.drawer + 2 }
+                boxSizing: "border-box"
               },
               ...sx
             },
@@ -5545,7 +5561,19 @@ function SidebarNav({
                 },
                 children: [
                   header && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box.default, { sx: { flexShrink: 0 }, children: header }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box.default, { sx: { flexGrow: 1, overflowY: "auto", overflowX: "hidden" }, children }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    import_Box.default,
+                    {
+                      sx: {
+                        flexGrow: 1,
+                        overflowY: "auto",
+                        overflowX: "hidden",
+                        px: 1,
+                        "& > .MuiList-root": { paddingInline: 0 }
+                      },
+                      children
+                    }
+                  ),
                   footer && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box.default, { sx: { flexShrink: 0 }, children: footer })
                 ]
               }
@@ -5566,7 +5594,11 @@ function SidebarNav({
               top: "50%",
               right: 0,
               transform: "translate(50%, -50%)",
-              zIndex: theme.zIndex.drawer + 1,
+              // Above both the AppShell content surface (drawer + 1, which
+              // paints its shadow over the sidebar) and the hover-expanded
+              // drawer (drawer + 2) — the toggle straddles the seam and has
+              // to stay clickable and whole on top of both.
+              zIndex: theme.zIndex.drawer + 3,
               minWidth: 0,
               width: 28,
               height: 28,
@@ -5601,6 +5633,10 @@ function SidebarNav({
 var itemSx = {
   // Preset radius.md (4px) — same corner radius as buttons and inputs.
   borderRadius: "4px",
+  // The MuiListItemButton override sets 12px; 8px here absorbs the container's
+  // new 8px gutter so the icon column stays exactly 16px from the sidebar edge,
+  // where it has always been.
+  paddingInline: "8px",
   // 4px gap between stacked items, independent of the container (List/flex).
   marginBottom: "4px",
   "&:last-of-type": { marginBottom: 0 },
@@ -5728,63 +5764,135 @@ function AppShell({
   )) });
   const brandEl = brand != null ? brand : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ShellBrand, { product, logoVariant });
   const wrapLogomark = !brand && logoVariant === "logomark" && !isMobile;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { display: "flex", flexDirection: "column", height: "100vh" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_AppBar.default,
+  return (
+    // Clipping lives here rather than on the body row below, so the content
+    // surface's shadow can spill up over the AppBar instead of being cut off
+    // at the row's top edge.
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      import_Box2.default,
       {
-        position: "sticky",
-        elevation: 0,
-        sx: { zIndex: theme.zIndex.drawer + 1 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Toolbar.default, { variant: "dense", sx: { px: { xs: "16px", sm: "16px" } }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", gap: 1 }, children: [
-            isMobile && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              IconButton2,
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100vh",
+          overflow: "hidden",
+          // The chrome fill belongs here, not only on the AppBar and Drawer.
+          // `main`'s rounded top-left corner clips its own background, and the
+          // notch between that arc and the square box corner is reached by
+          // neither the bar nor the sidebar — so without this, whatever sits
+          // behind the shell shows through it. Storybook's docs container is
+          // white, which is exactly how it surfaced.
+          backgroundColor: "background.default"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            import_AppBar.default,
+            {
+              position: "sticky",
+              elevation: 0,
+              sx: { zIndex: theme.zIndex.drawer + 1, borderBottom: "none" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Toolbar.default, { variant: "dense", sx: { px: { xs: "16px", sm: "16px" } }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", gap: 1 }, children: [
+                  isMobile && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    IconButton2,
+                    {
+                      variant: "icon",
+                      size: "small",
+                      color: "inherit",
+                      "aria-label": "Open navigation",
+                      onClick: () => setMobileOpen(true),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_MenuOutlined.default, { fontSize: "small" })
+                    }
+                  ),
+                  wrapLogomark ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box2.default, { sx: { width: 48, ml: "-16px", display: "flex", justifyContent: "center" }, children: brandEl }) : brandEl
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box2.default, { sx: { flex: 1, display: "flex", justifyContent: "center" }, children: search === true ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Search, { size: "small", placeholder: "Search\u2026", sx: { width: "100%", maxWidth: 480 } }) : search || null }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ColorModeToggle, {}),
+                  actions
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { display: "flex", flexGrow: 1, minHeight: 0 }, children: [
+            !isMobile && navContent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              SidebarNav,
               {
-                variant: "icon",
-                size: "small",
-                color: "inherit",
-                "aria-label": "Open navigation",
-                onClick: () => setMobileOpen(true),
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_MenuOutlined.default, { fontSize: "small" })
+                open: sidebarOpen,
+                onOpenChange: setSidebarOpen,
+                behavior: sidebarBehavior,
+                sx: {
+                  height: "100%",
+                  "& .MuiDrawer-paper": {
+                    position: "relative",
+                    height: "100%",
+                    // Same reason as the AppBar's border: the chrome is one piece.
+                    borderRight: "none"
+                  }
+                },
+                children: navContent
               }
             ),
-            wrapLogomark ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box2.default, { sx: { width: 48, ml: "-16px", display: "flex", justifyContent: "center" }, children: brandEl }) : brandEl
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              import_Box2.default,
+              {
+                component: "main",
+                sx: (t) => ({
+                  flexGrow: 1,
+                  overflow: "auto",
+                  backgroundColor: "background.paper",
+                  // Lift the surface above the chrome so its shadow lands ON the
+                  // sidebar and the AppBar rather than under them. Level with the
+                  // AppBar and later in the DOM, so it wins there; the hover
+                  // sidebar sits a level higher still and keeps overlaying content.
+                  position: "relative",
+                  zIndex: t.zIndex.drawer + 1,
+                  // Longhands, not `borderTop: "1px solid"` — the shorthand resets
+                  // border-*-color to currentColor and the hairline renders as text
+                  // black however `borderColor` is ordered around it.
+                  borderStyle: "solid",
+                  borderColor: "divider",
+                  borderTopWidth: "1px",
+                  borderRightWidth: 0,
+                  borderBottomWidth: 0,
+                  borderTopLeftRadius: `${container.shellRadius}px`,
+                  // With no sidebar below "sm" a single left corner reads lopsided,
+                  // so the surface rounds both top corners and drops the left edge.
+                  borderLeftWidth: { xs: 0, sm: "1px" },
+                  borderTopRightRadius: { xs: `${container.shellRadius}px`, sm: 0 },
+                  // Up-and-left, so the lift falls onto the chrome. In dark the
+                  // surface is already a step lighter than the chrome and does most
+                  // of the lifting itself, so the shadow only has to seat the edge.
+                  // Wide and low-contrast rather than tight and dark — a diffuse
+                  // falloff reads as lift without drawing a line.
+                  boxShadow: "-2px -2px 20px -16px #1018281a, -1px -1px 6px -3px #1018281c",
+                  // Dark keeps the same `divider` hairline as light — gray-900 on
+                  // gray-950 is only a ~15-level tonal step, so the line still does
+                  // the work of defining the edge. Only the shadow changes: one
+                  // contact layer, since the surface being lighter than the chrome
+                  // already reads as raised.
+                  ...t.applyStyles("dark", {
+                    boxShadow: "-1px -1px 6px -3px #00000059"
+                  })
+                }),
+                children
+              }
+            )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box2.default, { sx: { flex: 1, display: "flex", justifyContent: "center" }, children: search === true ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Search, { size: "small", placeholder: "Search\u2026", sx: { width: "100%", maxWidth: 480 } }) : search || null }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ColorModeToggle, {}),
-            actions
-          ] })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Box2.default, { sx: { display: "flex", flexGrow: 1, overflow: "hidden" }, children: [
-      !isMobile && navContent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        SidebarNav,
-        {
-          open: sidebarOpen,
-          onOpenChange: setSidebarOpen,
-          behavior: sidebarBehavior,
-          sx: {
-            height: "100%",
-            "& .MuiDrawer-paper": { position: "relative", height: "100%" }
-          },
-          children: navContent
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box2.default, { component: "main", sx: { flexGrow: 1, overflow: "auto" }, children })
-    ] }),
-    isMobile && navContent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_Drawer3.default,
-      {
-        open: mobileOpen,
-        onClose: () => setMobileOpen(false),
-        onClick: () => setMobileOpen(false),
-        sx: { "& .MuiDrawer-paper": { width: 240 } },
-        children: navContent
+          isMobile && navContent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            import_Drawer3.default,
+            {
+              open: mobileOpen,
+              onClose: () => setMobileOpen(false),
+              onClick: () => setMobileOpen(false),
+              sx: { "& .MuiDrawer-paper": { width: 240 } },
+              children: navContent
+            }
+          )
+        ]
       }
     )
-  ] });
+  );
 }
 
 // src/components/Page/index.tsx