docs: Navigation enhanced

docs/docs/about.mdx

@@ -1,4 +1,4 @@
-import { Cards } from '#components/cards/cards.tsx';
+import { MainSectionCards } from '#components/cards/cards.tsx';
 
 export const meta = {
   title: 'About',
@@ -32,4 +32,4 @@ Some utilities are created for training and educational purposes.
 
 ## Sections
 
-<Cards />
+<MainSectionCards />

docs/docs/dom/overview.mdx

@@ -1,3 +1,5 @@
+import { StoryCards } from '#components/cards/cards';
+
 export const meta = {
   title: '',
   category: 'DOM',
@@ -12,50 +14,6 @@ All helpers specific to the [DOM](https://developer.mozilla.org/en-US/docs/Web/A
 import { findAncestor, getPositionedParentOffset, isScrollable } from '@krutoo/utils';
 ```
 
-### `isScrollable`
-
-Checks that element is scrollable.
-
-```ts
-import { isScrollable } from '@krutoo/utils';
-
-const element = document.querySelector('#something');
-
-isScrollable(element); // true or false
-```
-
-### `findAncestor`
-
-Finds closest ancestor element that matches condition.
-
-```ts
-import { findAncestor } from '@krutoo/utils';
-
-const element = document.querySelector('#something');
+### Utils
 
-// element or null returns
-const closestTarget = findAncestor(element, parent => parent.classList.contains('target'));
-```
-
-### `getPositionedParentOffset`
-
-Returns position of top left corner of the parent positioned element relative to viewport origin.
-Useful when you need to visually move element to position relative to viewport.
-
-- It works for elements with any ancestors in any subtrees of your DOM
-- It works for `absolute` and `fixed` positioning
-
-For example when you need to move element to mouse you can do this:
-
-```ts
-import { getPositionedParentOffset } from '@krutoo/utils';
-
-const element = document.querySelector('#something');
-
-window.addEventListener('mousemove', event => {
-  const offset = getPositionedParentOffset(element);
-
-  element.style.top = `${event.clientY - offset.y}px`;
-  element.style.left = `${event.clientX - offset.x}px`;
-});
-```
+<StoryCards category='DOM' />

docs/docs/math/overview.mdx

@@ -1,3 +1,5 @@
+import { StoryCards } from '#components/cards/cards';
+
 export const meta = {
   title: '',
   category: 'Math',
@@ -11,3 +13,7 @@ All utilities specific to the math and geometry available from package root.
 ```ts
 import { clamp, lerp, randomFloat } from '@krutoo/utils';
 ```
+
+### Utils
+
+<StoryCards category='Math' />

docs/docs/misc/overview.mdx

@@ -1,3 +1,5 @@
+import { StoryCards } from '#components/cards/cards.tsx';
+
 export const meta = {
   title: '',
   category: 'Misc',
@@ -17,3 +19,7 @@ await wait(1000);
 
 console.log('One second passed');
 ```
+
+### Utils
+
+<StoryCards category='Misc' />

docs/docs/react/overview.mdx

@@ -1,4 +1,5 @@
 import { Callout } from '#components/callout/callout';
+import { StoryCards } from '#components/cards/cards';
 
 export const meta = {
   title: '',
@@ -21,3 +22,33 @@ import { Portal, mergeRefs, useStableCallback } from '@krutoo/utils/react';
     applications.
   </Callout.Main>
 </Callout>
+
+### Core
+
+Extending core React functionality without depending on browser/Node.js APIs etc.
+
+<StoryCards category='React' />
+
+### React DOM
+
+Browser dependent hooks and components
+
+<StoryCards category='React DOM' />
+
+### React DI
+
+Dependency Injection bindings
+
+<StoryCards category='React DI' />
+
+### React Query
+
+Declarative fetching anything by `fetch`, `axios`, GraphQL or what you want
+
+<StoryCards category='React Query' />
+
+### React Router
+
+Router bindings
+
+<StoryCards category='React Router' />

docs/docs/react/query/use-query.mdx

@@ -1,6 +1,7 @@
 export const meta = {
   category: 'React Query',
   title: 'useQuery',
+  menuPriority: 10,
 };
 
 # `useQuery`

docs/docs/rspack/overview.mdx

@@ -1,3 +1,5 @@
+import { StoryCards } from '#components/cards/cards';
+
 export const meta = {
   title: '',
   category: 'Rspack',
@@ -33,136 +35,6 @@ export default {
 };
 ```
 
-### `pluginTypeScript`
-
-Typescript support.
-
-Features:
-
-- Builtin SWC loader used under the hood so you don't need to add rule for files
-- By default root tsconfig.json will be used for define path aliases so you don't need to add `resolve.alias.tsConfig` option to config
-- By default `js, jsx, ts, tsx, mts, cts` files handled
-
-```js title="rspack.config.js"
-import { pluginTypeScript } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginTypeScript(),
-  ],
-};
-```
-
-### `pluginCSS`
-
-CSS and css-modules support.
-
-```js title="rspack.config.js"
-import { pluginCSS } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginCSS(),
-  ],
-};
-```
-
-### `pluginHTML`
-
-HTML file will be added to bundle.
-By default modern options is applied to builtin HTML plugin.
-
-```js title="rspack.config.js"
-import { pluginHTML } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginHTML(),
-  ],
-};
-```
-
-### `pluginReactSVG`
-
-Allows to import SVG files as React-components.
-
-[@svgr/webpack](https://react-svgr.com/docs/webpack/) must be installed in your project.
-
-> @svgr/webpack is a part of Webpack ecosystem but don't worry - it is compatible with Rspack
-
-```js title="rspack.config.js"
-import { pluginReactSVG } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginReactSVG(),
-  ],
-};
-```
-
-### `pluginPublicFiles`
-
-Folder "public" in project root will be copied to bundle as is.
-
-```js title="rspack.config.js"
-import { pluginPublicFiles } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginPublicFiles(),
-  ],
-};
-```
-
-### `pluginRawImport`
-
-Ability to import source code of file by:
-
-- adding `?raw` query to import specifier
-- or by adding import attribute like `with { type: 'text' }`
-
-```js title="rspack.config.js"
-import { pluginRawImport } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginRawImport(),
-  ],
-};
-```
-
-### `pluginStaticAssets`
-
-Common file types like images, sounds and fonts will be imported as urls to resource so you don't need to add rules for it.
-
-```js title="rspack.config.js"
-import { pluginStaticAssets } from '@krutoo/utils/rspack';
+### Utils
 
-export default {
-  plugins: [
-    // just use plugin function
-    pluginStaticAssets(),
-  ],
-};
-```
-
-### `pluginImportMetaEnv`
-
-Same as builtin [EnvironmentPlugin](https://rspack.rs/plugins/webpack/environment-plugin) but allows to use variables as `import.meta.env.APP_NAME`.
-
-```js title="rspack.config.js"
-import { pluginImportMetaEnv } from '@krutoo/utils/rspack';
-
-export default {
-  plugins: [
-    // just use plugin function
-    pluginImportMetaEnv(['NODE_ENV', 'DEBUG']),
-  ],
-};
-```
+<StoryCards category='Rspack' />

docs/docs/rspack/plugin-css.mdx

@@ -132,4 +132,4 @@ declare module '*.m.css' {
 ```
 
 Or you can use ready declarations from this package as described here:
-[Type declarations](/utils/typings/overview)
+[Type declarations](/utils/typescript/overview)

docs/docs/rspack/plugin-react-svg.mdx

@@ -62,4 +62,4 @@ declare module '*.svg' {
 ```
 
 Or you can use ready declarations from this package as described here:
-[Type declarations](/utils/typings/overview)
+[Type declarations](/utils/typescript/overview)

docs/docs/testing/overview.mdx

@@ -1,7 +1,16 @@
+import { StoryCards } from '#components/cards/cards';
+
 export const meta = {
   title: '',
   category: 'Testing',
   menuPriority: -5,
-  menuHidden: true,
   menuPriority: 100,
 };
+
+# Testing utils
+
+The library provides useful mock implementations for various interfaces, especially for Web APIs.
+
+### Utils
+
+<StoryCards category='Testing' />

docs/package.json

@@ -23,7 +23,7 @@
     "typescript": "^5.9.2"
   },
   "dependencies": {
-    "@krutoo/showcase": "^0.7.2",
+    "@krutoo/showcase": "^0.8.0",
     "@mdx-js/react": "^3.1.0",
     "classnames": "^2.5.1",
     "lucide-react": "^1.17.0",

docs/src/components/cards/cards.m.css

@@ -6,7 +6,6 @@
 
 .item {
   width: 0;
-  flex-grow: 1;
   flex-basis: calc(50% - 6px);
   transition: scale 200ms;
 }