feat(web): integrate shadcn and enhance data grid styles

- Added `shadcn` dependency to the project for improved styling.
- Updated `kitDataGridTableClassNames` to include a new base class for pinned cells.
- Enhanced global styles by importing `shadcn/tailwind.css`.
- Added tests to verify new class names in the data grid component.

apps/web/package.json

@@ -40,6 +40,7 @@
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.60.0",
     "recharts": "3.8.0",
+    "shadcn": "^4.19.0",
     "sonner": "^1.7.0",
     "zod": "^3.25.0"
   },

apps/web/src/components/reui-kit/data-grid-kit-defaults.test.ts

@@ -15,6 +15,9 @@ describe('kitDataGridTableLayout', () => {
 
   it('kit tableClassNames совпадает с filtering-2 edgeCell', () => {
     expect(kitDataGridTableClassNames.edgeCell).toBe('first:ps-3 last:pe-3')
+    expect(kitDataGridTableClassNames.base).toBe(
+      '[&_[data-pinned]]:bg-(--frame-panel-bg)',
+    )
   })
 
   it('именованные opts: auto + pin', () => {

apps/web/src/components/reui-kit/frame-data-grid.tsx

@@ -81,8 +81,9 @@ export function kitDataGridTableLayout(
   }
 }
 
-/** filtering-2 edge inset — единственный tableClassNames в kit, не в domain. */
+/** filtering-2 edge inset + Frame-surface pinned cells (not page --background). */
 export const kitDataGridTableClassNames = {
+  base: '[&_[data-pinned]]:bg-(--frame-panel-bg)',
   edgeCell: 'first:ps-3 last:pe-3',
 } as const
 

packages/ui/src/styles/globals.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
 @source "../";
 @source "../../../apps/web/src";