import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
import * as ShowcasePageStories from './ShowcasePage.stories';

<Meta of={ShowcasePageStories} />

<Title>ShowcasePage</Title>
<Subtitle>Full application shell wrapping the brand-system showcase in the `xertica` theme.</Subtitle>

---

## Overview

`ShowcasePage` is the reference implementation of a full application layout dedicated to the Xertica brand system. It assembles:

- **Sidebar** - Primary navigation.
- **ShowcaseContent** - Brand-system showcase (typography, colors, isotypes, buttons, forms, cards), defaulted into the `xertica` (IDXERTICA-compliant) theme.
- **XerticaAssistant** - Floating AI assistant panel.

When `XerticaProvider` is present, the page synchronizes sidebar width, sidebar expansion, and assistant visibility through `LayoutContext`. Without the provider, it renders with local fallback layout state.

**Requires:** React Router v6. `XerticaProvider` is recommended for app-level synchronization.

---

## Composition

```tsx
import { ShowcasePage } from 'xertica-ui';

<Route path="/showcase" element={<ShowcasePage />} />
```

---

## AI Best Practices

> [!IMPORTANT]
> - **Brand reference implementation** - Use `ShowcasePage` as the primary reference for the `xertica` theme's visual identity.
> - **Top-level only** - This is a full-screen layout component. Do not nest it inside other layouts.
> - **Provider fallback** - The page renders without `XerticaProvider`, but the provider is recommended for synchronized app layout.
> - **Extend via ShowcaseContent** - To change what's showcased, edit `ShowcaseContent` rather than this shell.