xertica-ui 2.3.0 → 2.4.0

package/components/pages/home-content/HomeContent.tsx

@@ -1,120 +1,120 @@
-import React from 'react';
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../../ui/card';
-import { Header } from '../../layout/header';
-import { Button } from '../../ui/button';
-import { FileText } from 'lucide-react';
-import { ScrollArea } from '../../ui/scroll-area';
-import { useLocation, useNavigate, Link } from 'react-router-dom';
-import { Badge } from '../../ui/badge';
-import { PageHeader } from '../../ui/page-header';
-import { useOptionalLayout } from '../../../contexts/LayoutContext';
-import { SIDEBAR_EXPANDED_WIDTH, SIDEBAR_COLLAPSED_WIDTH } from '../../shared/layout-constants';
-import { useFeatureCards } from '../../../features/home';
-import { useTranslation } from 'react-i18next';
-import { SectionErrorBoundary } from '../../shared/error-boundary';
-import { FeatureCardSkeleton } from '../../blocks/card-patterns/FeatureCardSkeleton';
-
-/**
- * Main dashboard content area for the landing page.
- *
- * @description
- * Fetches feature cards via `useFeatureCards` (React Query). All UI strings are
- * translated via `useTranslation()` — change language via `LanguageSelector`.
- *
- * @ai-rules
- * 1. Data: Feature cards come from `useFeatureCards()` — never hardcode them here.
- * 2. i18n: Use `t('home.*')` for all UI strings — never hardcode text in JSX.
- * 3. Loading: Renders a skeleton card while the query is in-flight.
- */
-export function HomeContent() {
-  const { t } = useTranslation();
-  const layout = useOptionalLayout();
-  const sidebarExpanded = layout?.sidebarExpanded ?? false;
-  const sidebarWidth = layout?.sidebarWidth ?? 256;
-  const navigate = useNavigate();
-
-  const { data: featureCards = [], isLoading } = useFeatureCards();
-
-  return (
-    <div
-      style={{
-        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : SIDEBAR_COLLAPSED_WIDTH,
-      }}
-      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
-    >
-      <Header
-        showThemeToggle={true}
-        showLanguageSelector={true}
-        breadcrumbs={[
-          { label: t('nav.designSystem'), href: '/home' },
-          { label: t('nav.home') },
-        ]}
-        renderLink={(href, props) => <Link to={href} {...props} />}
-      />
-
-      <main className="flex-1 overflow-hidden bg-muted">
-        <ScrollArea className="h-full">
-          <div className="p-5 sm:p-4 md:p-6">
-            <div className="max-w-6xl mx-auto space-y-8">
-              <PageHeader
-                title={t('home.welcome')}
-                subtitle={t('home.subtitle')}
-              />
-
-              <SectionErrorBoundary>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {isLoading ? (
-                  <>
-                    <FeatureCardSkeleton showAction />
-                    <FeatureCardSkeleton showAction />
-                    <FeatureCardSkeleton showAction />
-                  </>
-                ) : (
-                  featureCards.map(card => (
-                    <Card
-                      key={card.id}
-                      className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full"
-                    >
-                      <CardHeader>
-                        <div className="flex items-center gap-3">
-                          <div className="p-2 bg-[var(--chart-2)]/20 rounded-[var(--radius)]">
-                            <FileText className="w-6 h-6 text-[var(--chart-2)]" />
-                          </div>
-                          <div className="flex items-center gap-2">
-                            <CardTitle className="text-sm">
-                              {t(`home.${card.id.replace(/-/g, '')}Title`, { defaultValue: card.title })}
-                            </CardTitle>
-                            {card.badge && (
-                              <Badge variant="default" className="text-xs">
-                                {t(`home.${card.id.replace(/-/g, '')}badge`, { defaultValue: card.badge })}
-                              </Badge>
-                            )}
-                          </div>
-                        </div>
-                      </CardHeader>
-                      <CardContent className="flex-1">
-                        <p className="text-muted-foreground">
-                          {t(`home.${card.id.replace(/-/g, '')}Description`, { defaultValue: card.description })}
-                        </p>
-                      </CardContent>
-                      <CardFooter>
-                        <Button
-                          variant="outline"
-                          className="w-full"
-                          onClick={() => navigate(card.href)}
-                        >
-                          {t('common.view')}
-                        </Button>
-                      </CardFooter>
-                    </Card>
-                  ))
-                )}
-              </div>
-              </SectionErrorBoundary>
-            </div>
-          </div>
-        </ScrollArea>
-      </main>
-    </div>
-  );
-}
+import React from 'react';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../../ui/card';
+import { Header } from '../../layout/header';
+import { Button } from '../../ui/button';
+import { FileText } from 'lucide-react';
+import { ScrollArea } from '../../ui/scroll-area';
+import { useLocation, useNavigate, Link } from 'react-router-dom';
+import { Badge } from '../../ui/badge';
+import { PageHeader } from '../../ui/page-header';
+import { useOptionalLayout } from '../../../contexts/LayoutContext';
+import { SIDEBAR_EXPANDED_WIDTH, SIDEBAR_COLLAPSED_WIDTH } from '../../shared/layout-constants';
+import { useFeatureCards } from '../../../features/home';
+import { useTranslation } from 'react-i18next';
+import { SectionErrorBoundary } from '../../shared/error-boundary';
+import { FeatureCardSkeleton } from '../../blocks/card-patterns/FeatureCardSkeleton';
+
+/**
+ * Main dashboard content area for the landing page.
+ *
+ * @description
+ * Fetches feature cards via `useFeatureCards` (React Query). All UI strings are
+ * translated via `useTranslation()` — change language via `LanguageSelector`.
+ *
+ * @ai-rules
+ * 1. Data: Feature cards come from `useFeatureCards()` — never hardcode them here.
+ * 2. i18n: Use `t('home.*')` for all UI strings — never hardcode text in JSX.
+ * 3. Loading: Renders a skeleton card while the query is in-flight.
+ */
+export function HomeContent() {
+  const { t } = useTranslation();
+  const layout = useOptionalLayout();
+  const sidebarExpanded = layout?.sidebarExpanded ?? false;
+  const sidebarWidth = layout?.sidebarWidth ?? 256;
+  const navigate = useNavigate();
+
+  const { data: featureCards = [], isLoading } = useFeatureCards();
+
+  return (
+    <div
+      style={{
+        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : SIDEBAR_COLLAPSED_WIDTH,
+      }}
+      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
+    >
+      <Header
+        showThemeToggle={true}
+        showLanguageSelector={true}
+        breadcrumbs={[{ label: t('nav.designSystem'), href: '/home' }, { label: t('nav.home') }]}
+        renderLink={(href, props) => <Link to={href} {...props} />}
+      />
+
+      <main className="flex-1 overflow-hidden bg-muted">
+        <ScrollArea className="h-full">
+          <div className="p-5 sm:p-4 md:p-6">
+            <div className="max-w-6xl mx-auto space-y-8">
+              <PageHeader title={t('home.welcome')} subtitle={t('home.subtitle')} />
+
+              <SectionErrorBoundary>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {isLoading ? (
+                    <>
+                      <FeatureCardSkeleton showAction />
+                      <FeatureCardSkeleton showAction />
+                      <FeatureCardSkeleton showAction />
+                    </>
+                  ) : (
+                    featureCards.map(card => (
+                      <Card
+                        key={card.id}
+                        className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full"
+                      >
+                        <CardHeader>
+                          <div className="flex items-center gap-3">
+                            <div className="p-2 bg-[var(--chart-2)]/20 rounded-[var(--radius)]">
+                              <FileText className="w-6 h-6 text-[var(--chart-2)]" />
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <CardTitle className="text-sm">
+                                {t(`home.${card.id.replace(/-/g, '')}Title`, {
+                                  defaultValue: card.title,
+                                })}
+                              </CardTitle>
+                              {card.badge && (
+                                <Badge variant="default" className="text-xs">
+                                  {t(`home.${card.id.replace(/-/g, '')}badge`, {
+                                    defaultValue: card.badge,
+                                  })}
+                                </Badge>
+                              )}
+                            </div>
+                          </div>
+                        </CardHeader>
+                        <CardContent className="flex-1">
+                          <p className="text-muted-foreground">
+                            {t(`home.${card.id.replace(/-/g, '')}Description`, {
+                              defaultValue: card.description,
+                            })}
+                          </p>
+                        </CardContent>
+                        <CardFooter>
+                          <Button
+                            variant="outline"
+                            className="w-full"
+                            onClick={() => navigate(card.href)}
+                          >
+                            {t('common.view')}
+                          </Button>
+                        </CardFooter>
+                      </Card>
+                    ))
+                  )}
+                </div>
+              </SectionErrorBoundary>
+            </div>
+          </div>
+        </ScrollArea>
+      </main>
+    </div>
+  );
+}

package/components/pages/home-content/home-content.mdx

@@ -1,62 +1,62 @@
-import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
-
-<Meta title="Pages/HomeContent" />
-
-<Title>HomeContent</Title>
-<Subtitle>Main dashboard landing area with breadcrumb header and feature card grid.</Subtitle>
-
----
-
-## Overview
-
-`HomeContent` is the top-level content component for the application's home/dashboard route. It renders:
-
-- A sticky `Header` with breadcrumbs and optional theme/language controls.
-- A `PageHeader` welcoming the user.
-- A responsive card grid for navigating to application features.
-
-It reads sidebar state from `LayoutContext` when available and falls back to safe local defaults when rendered outside `XerticaProvider`.
-
-**Requires:** React Router v6. `XerticaProvider` is recommended for synchronized layout state, but no longer required for rendering.
-
-```tsx
-import { HomeContent } from 'xertica-ui';
-
-<HomeContent user={currentUser} onLogout={handleLogout} />
-```
-
----
-
-## Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `user` | `{ name?: string; email?: string; avatar?: string } \| null` | - | Currently authenticated user. Passed to the header for display. |
-| `onLogout` | `() => void` | - | Called when the user triggers logout from the header. |
-| `onSettings` | `() => void` | - | Called when the user opens account settings from the header. |
-
----
-
-## Layout Dependency
-
-`HomeContent` uses optional layout state. When wrapped in `XerticaProvider`, it synchronizes with the global sidebar width and expanded state. Without the provider, it renders using collapsed-sidebar defaults.
-
-```tsx
-// Recommended - synchronized app layout
-<XerticaProvider>
-  <HomeContent />
-</XerticaProvider>
-
-// Also safe - uses local fallback layout values
-<HomeContent />
-```
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Provider fallback** - `HomeContent` renders without `XerticaProvider`, but the provider is recommended for synchronized sidebar state.
-> - **Feature cards** - The card grid is currently hardcoded to the "Template CLI" feature. To add cards, fork the component and extend the grid section.
-> - **Breadcrumbs** - Breadcrumb labels are resolved via a local `labelTranslations` map and `getRouteByPath`. Ensure your route definitions include a `label` field for correct breadcrumb rendering.
-> - **Background color** - The outer container uses `bg-muted` from the design system tokens. Override with `className` if a different background is needed.
+import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
+
+<Meta title="Pages/HomeContent" />
+
+<Title>HomeContent</Title>
+<Subtitle>Main dashboard landing area with breadcrumb header and feature card grid.</Subtitle>
+
+---
+
+## Overview
+
+`HomeContent` is the top-level content component for the application's home/dashboard route. It renders:
+
+- A sticky `Header` with breadcrumbs and optional theme/language controls.
+- A `PageHeader` welcoming the user.
+- A responsive card grid for navigating to application features.
+
+It reads sidebar state from `LayoutContext` when available and falls back to safe local defaults when rendered outside `XerticaProvider`.
+
+**Requires:** React Router v6. `XerticaProvider` is recommended for synchronized layout state, but no longer required for rendering.
+
+```tsx
+import { HomeContent } from 'xertica-ui';
+
+<HomeContent user={currentUser} onLogout={handleLogout} />
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `user` | `{ name?: string; email?: string; avatar?: string } \| null` | - | Currently authenticated user. Passed to the header for display. |
+| `onLogout` | `() => void` | - | Called when the user triggers logout from the header. |
+| `onSettings` | `() => void` | - | Called when the user opens account settings from the header. |
+
+---
+
+## Layout Dependency
+
+`HomeContent` uses optional layout state. When wrapped in `XerticaProvider`, it synchronizes with the global sidebar width and expanded state. Without the provider, it renders using collapsed-sidebar defaults.
+
+```tsx
+// Recommended - synchronized app layout
+<XerticaProvider>
+  <HomeContent />
+</XerticaProvider>
+
+// Also safe - uses local fallback layout values
+<HomeContent />
+```
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Provider fallback** - `HomeContent` renders without `XerticaProvider`, but the provider is recommended for synchronized sidebar state.
+> - **Feature cards** - The card grid is currently hardcoded to the "Template CLI" feature. To add cards, fork the component and extend the grid section.
+> - **Breadcrumbs** - Breadcrumb labels are resolved via a local `labelTranslations` map and `getRouteByPath`. Ensure your route definitions include a `label` field for correct breadcrumb rendering.
+> - **Background color** - The outer container uses `bg-muted` from the design system tokens. Override with `className` if a different background is needed.

package/components/pages/home-page/HomePage.tsx

@@ -1,74 +1,78 @@
-import React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { Sidebar } from '../../layout/sidebar';
-import { HomeContent } from '../home-content/HomeContent';
-import { XerticaAssistant } from '../../assistant/xertica-assistant/xertica-assistant';
-import { gerarResposta } from '../../shared/assistant-utils';
-import { routes } from '../../shared/navigation';
-import { useOptionalLayout } from '../../../contexts/LayoutContext';
-import { useAuth } from '../../../contexts/AuthContext';
-import { useAssistantConfig, getMockRichSuggestions, getMockFeedbackOptions } from '../../../features/assistant';
-
-/**
- * Root Dashboard page component.
- *
- * @description
- * Assembles Sidebar, HomeContent, and XerticaAssistant. Assistant configuration
- * (suggestions, feedback options) is fetched via `useAssistantConfig` (React Query).
- * To use a real API, replace `fetchAssistantConfig` in `features/assistant/data/mock.ts`.
- *
- * @ai-rules
- * 1. Data: Assistant config comes from `useAssistantConfig()` — never hardcode suggestions here.
- * 2. Composition: Keep this as a thin layout shell; delegate all content to children.
- * 3. State: Relies on `LayoutContext` for sidebar / assistant visibility.
- */
-export function HomePage() {
-  const { user, logout } = useAuth();
-  const layout = useOptionalLayout();
-  const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
-  const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
-  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
-  const sidebarWidth = layout?.sidebarWidth ?? 280;
-  const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
-  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded(value => !value));
-  const toggleAssistente =
-    layout?.toggleAssistente ?? (() => setLocalAssistantExpanded(value => !value));
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const { data: assistantConfig } = useAssistantConfig();
-
-  return (
-    <div className="h-screen flex bg-muted overflow-hidden relative">
-      <Sidebar
-        expanded={sidebarExpanded}
-        width={sidebarWidth}
-        onToggle={toggleSidebar}
-        user={{
-          ...user,
-          name: 'Ariel Santos',
-          avatar: 'https://github.com/shadcn.png',
-        }}
-        onLogout={logout}
-        onSettingsClick={() => navigate('/settings')}
-        location={location}
-        navigate={navigate}
-        routes={routes}
-      />
-      <HomeContent />
-      <XerticaAssistant
-        isExpanded={assistenteExpanded}
-        onToggle={toggleAssistente}
-        defaultTab="chat"
-        demoMode={true}
-        responseGenerator={gerarResposta}
-        suggestions={assistantConfig?.suggestions}
-        richSuggestions={assistantConfig?.richSuggestions ?? getMockRichSuggestions()}
-        feedbackOptions={assistantConfig?.feedbackOptions ?? getMockFeedbackOptions()}
-        onEvaluation={() => {
-          // Wire your feedback persistence logic here
-        }}
-      />
-    </div>
-  );
-}
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Sidebar } from '../../layout/sidebar';
+import { HomeContent } from '../home-content/HomeContent';
+import { XerticaAssistant } from '../../assistant/xertica-assistant/xertica-assistant';
+import { gerarResposta } from '../../shared/assistant-utils';
+import { routes } from '../../shared/navigation';
+import { useOptionalLayout } from '../../../contexts/LayoutContext';
+import { useAuth } from '../../../contexts/AuthContext';
+import {
+  useAssistantConfig,
+  getMockRichSuggestions,
+  getMockFeedbackOptions,
+} from '../../../features/assistant';
+
+/**
+ * Root Dashboard page component.
+ *
+ * @description
+ * Assembles Sidebar, HomeContent, and XerticaAssistant. Assistant configuration
+ * (suggestions, feedback options) is fetched via `useAssistantConfig` (React Query).
+ * To use a real API, replace `fetchAssistantConfig` in `features/assistant/data/mock.ts`.
+ *
+ * @ai-rules
+ * 1. Data: Assistant config comes from `useAssistantConfig()` — never hardcode suggestions here.
+ * 2. Composition: Keep this as a thin layout shell; delegate all content to children.
+ * 3. State: Relies on `LayoutContext` for sidebar / assistant visibility.
+ */
+export function HomePage() {
+  const { user, logout } = useAuth();
+  const layout = useOptionalLayout();
+  const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
+  const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
+  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
+  const sidebarWidth = layout?.sidebarWidth ?? 280;
+  const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
+  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded(value => !value));
+  const toggleAssistente =
+    layout?.toggleAssistente ?? (() => setLocalAssistantExpanded(value => !value));
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const { data: assistantConfig } = useAssistantConfig();
+
+  return (
+    <div className="h-screen flex bg-muted overflow-hidden relative">
+      <Sidebar
+        expanded={sidebarExpanded}
+        width={sidebarWidth}
+        onToggle={toggleSidebar}
+        user={{
+          ...user,
+          name: 'Ariel Santos',
+          avatar: 'https://github.com/shadcn.png',
+        }}
+        onLogout={logout}
+        onSettingsClick={() => navigate('/settings')}
+        location={location}
+        navigate={navigate}
+        routes={routes}
+      />
+      <HomeContent />
+      <XerticaAssistant
+        isExpanded={assistenteExpanded}
+        onToggle={toggleAssistente}
+        defaultTab="chat"
+        demoMode={true}
+        responseGenerator={gerarResposta}
+        suggestions={assistantConfig?.suggestions}
+        richSuggestions={assistantConfig?.richSuggestions ?? getMockRichSuggestions()}
+        feedbackOptions={assistantConfig?.feedbackOptions ?? getMockFeedbackOptions()}
+        onEvaluation={() => {
+          // Wire your feedback persistence logic here
+        }}
+      />
+    </div>
+  );
+}

package/components/pages/home-page/home-page.mdx

@@ -1,53 +1,53 @@
-import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
-import * as HomePageStories from './HomePage.stories';
-
-<Meta of={HomePageStories} />
-
-<Title>HomePage</Title>
-<Subtitle>Full application shell composed from Sidebar, HomeContent, and XerticaAssistant.</Subtitle>
-
----
-
-## Overview
-
-`HomePage` is the root authenticated page. It assembles the three major layout pillars:
-
-- **Sidebar** - Primary navigation.
-- **HomeContent** - Dashboard area with breadcrumb header and feature card grid.
-- **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.
-
----
-
-## Props
-
-| Prop | Type | Required | Description |
-|---|---|---|---|
-| `user` | `{ email: string } \| null` | Yes | Currently authenticated user. Passed to Sidebar and HomeContent for display. |
-| `onLogout` | `() => void` | Yes | Called when the user triggers logout from the Sidebar or Header. |
-
----
-
-## Composition
-
-```tsx
-import { HomePage } from 'xertica-ui';
-
-<Route
-  path="/home"
-  element={<HomePage user={currentUser} onLogout={handleLogout} />}
-/>
-```
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Top-level only** - `HomePage` is a full-screen layout component. Do not nest it inside other layouts.
-> - **No logic here** - Keep business logic in `HomeContent` or lower-level components.
-> - **Provider fallback** - The page renders without `XerticaProvider`, but the provider is recommended for synchronized app layout.
-> - **Extend via HomeContent** - To add dashboard sections, edit `HomeContent`, not `HomePage`.
+import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
+import * as HomePageStories from './HomePage.stories';
+
+<Meta of={HomePageStories} />
+
+<Title>HomePage</Title>
+<Subtitle>Full application shell composed from Sidebar, HomeContent, and XerticaAssistant.</Subtitle>
+
+---
+
+## Overview
+
+`HomePage` is the root authenticated page. It assembles the three major layout pillars:
+
+- **Sidebar** - Primary navigation.
+- **HomeContent** - Dashboard area with breadcrumb header and feature card grid.
+- **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.
+
+---
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `user` | `{ email: string } \| null` | Yes | Currently authenticated user. Passed to Sidebar and HomeContent for display. |
+| `onLogout` | `() => void` | Yes | Called when the user triggers logout from the Sidebar or Header. |
+
+---
+
+## Composition
+
+```tsx
+import { HomePage } from 'xertica-ui';
+
+<Route
+  path="/home"
+  element={<HomePage user={currentUser} onLogout={handleLogout} />}
+/>
+```
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Top-level only** - `HomePage` is a full-screen layout component. Do not nest it inside other layouts.
+> - **No logic here** - Keep business logic in `HomeContent` or lower-level components.
+> - **Provider fallback** - The page renders without `XerticaProvider`, but the provider is recommended for synchronized app layout.
+> - **Extend via HomeContent** - To add dashboard sections, edit `HomeContent`, not `HomePage`.