xertica-ui 2.1.2 → 2.1.3

package/components/layout/sidebar/use-sidebar.ts

@@ -0,0 +1,113 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { RouteGroup } from "./sidebar";
+
+export interface UseSidebarProps {
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    navigationGroups?: RouteGroup[];
+}
+
+export function useSidebar({
+    defaultExpanded = true,
+    expanded: controlledExpanded,
+    onExpandedChange,
+    navigationGroups = [],
+}: UseSidebarProps = {}) {
+    const [localExpanded, setLocalExpanded] = useState(defaultExpanded);
+    const isControlled = controlledExpanded !== undefined;
+    const expanded = isControlled ? controlledExpanded : localExpanded;
+
+    const [isMobileViewport, setIsMobileViewport] = useState(false);
+    const [hasOverflow, setHasOverflow] = useState(false);
+    const [visibleItems, setVisibleItems] = useState<RouteGroup[]>([]);
+    const [overflowItems, setOverflowItems] = useState<RouteGroup[]>([]);
+    const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);
+    const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+    const navRef = useRef<HTMLElement>(null);
+
+    const setExpanded = useCallback(
+        (value: boolean | ((prev: boolean) => boolean)) => {
+            const newValue = typeof value === "function" ? value(expanded) : value;
+            if (!isControlled) {
+                setLocalExpanded(newValue);
+            }
+            onExpandedChange?.(newValue);
+        },
+        [expanded, isControlled, onExpandedChange]
+    );
+
+    const toggleExpanded = useCallback(() => {
+        setExpanded((prev) => !prev);
+    }, [setExpanded]);
+
+    // Mobile viewport detection
+    useEffect(() => {
+        const checkViewport = () => {
+            setIsMobileViewport(window.innerWidth < 768);
+        };
+        checkViewport();
+        window.addEventListener("resize", checkViewport);
+        return () => window.removeEventListener("resize", checkViewport);
+    }, []);
+
+    // Overflow detection
+    useEffect(() => {
+        const checkOverflow = () => {
+            if (!navRef.current || navigationGroups.length === 0) return;
+
+            const containerHeight = navRef.current.clientHeight;
+            let currentHeight = 0;
+            let visibleCount = 0;
+
+            // Approximate heights
+            const itemHeight = 40;
+            const groupHeaderHeight = 32;
+            const padding = 32;
+
+            currentHeight += padding;
+
+            for (let i = 0; i < navigationGroups.length; i++) {
+                const group = navigationGroups[i];
+                if (group.label) currentHeight += groupHeaderHeight;
+                currentHeight += group.items.length * itemHeight;
+
+                if (currentHeight > containerHeight) {
+                    break;
+                }
+                visibleCount++;
+            }
+
+            if (visibleCount < navigationGroups.length) {
+                setHasOverflow(true);
+                setVisibleItems(navigationGroups.slice(0, visibleCount));
+                setOverflowItems(navigationGroups.slice(visibleCount));
+            } else {
+                setHasOverflow(false);
+                setVisibleItems(navigationGroups);
+                setOverflowItems([]);
+            }
+        };
+
+        checkOverflow();
+        window.addEventListener("resize", checkOverflow);
+        return () => window.removeEventListener("resize", checkOverflow);
+    }, [navigationGroups, expanded]);
+
+    return {
+        expanded,
+        setExpanded,
+        toggleExpanded,
+        isMobileViewport,
+        hasOverflow,
+        visibleItems,
+        overflowItems,
+        openSubmenu,
+        setOpenSubmenu,
+        isFilterOpen,
+        setIsFilterOpen,
+        navRef,
+        navigationGroups,
+    };
+}

package/components/media/FloatingMediaWrapper.tsx

@@ -118,11 +118,11 @@ function FloatingContainer({
   const containerRef = useRef<HTMLDivElement>(null);
   const resizeHandleRef = useRef<string | null>(null);
   
-  const getInitialState = useCallback(() => {
-    const storageKey = `xertica-media-player-${playerId}`;
-    const stored = typeof window !== 'undefined'
-      ? window.localStorage?.getItem(storageKey)
-      : null;
+  const getInitialState = useCallback(() => {
+    const storageKey = `xertica-media-player-${playerId}`;
+    const stored = typeof window !== 'undefined'
+      ? window.localStorage?.getItem(storageKey)
+      : null;
     if (stored) {
       try {
         return JSON.parse(stored);
@@ -155,11 +155,11 @@ function FloatingContainer({
   const dragStartOffset = useRef({ x: 0, y: 0 });
   const resizeStartState = useRef({ position: { x: 0, y: 0 }, size: { width: 0, height: 0 } });
 
-  const saveState = useCallback((newPosition: { x: number; y: number }, newSize: { width: number; height: number }) => {
-    if (typeof window === 'undefined') return;
-    const storageKey = `xertica-media-player-${playerId}`;
-    window.localStorage?.setItem(storageKey, JSON.stringify({ position: newPosition, size: newSize }));
-  }, [playerId]);
+  const saveState = useCallback((newPosition: { x: number; y: number }, newSize: { width: number; height: number }) => {
+    if (typeof window === 'undefined') return;
+    const storageKey = `xertica-media-player-${playerId}`;
+    window.localStorage?.setItem(storageKey, JSON.stringify({ position: newPosition, size: newSize }));
+  }, [playerId]);
 
   const handleMouseDown = (e: React.MouseEvent) => {
     setIsDragging(true);
@@ -313,4 +313,4 @@ function FloatingContainer({
       </div>
     </div>
   );
-}
+}

package/components/media/audio-player/AudioPlayer.tsx

@@ -36,7 +36,7 @@ import {
 } from "../../ui/dropdown-menu";
 import { FloatingMediaWrapper } from '../FloatingMediaWrapper';
 import { cn } from '../../shared/utils';
-import { useOptionalLayout } from '../../../contexts/LayoutContext';
+import { useOptionalLayout } from '../../../contexts/LayoutContext';
 
 export interface AudioPlayerProps {
   /** Source URL of the audio file */
@@ -90,12 +90,12 @@ export function AudioPlayer({
   enableAutoFloat = true,
   onCloseFloating
 }: AudioPlayerProps) {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const layout = useOptionalLayout();
-  const sidebarExpanded = layout?.sidebarExpanded ?? false;
-  const sidebarWidth = layout?.sidebarWidth ?? 256;
-  const assistenteExpanded = layout?.assistenteExpanded ?? false;
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const layout = useOptionalLayout();
+  const sidebarExpanded = layout?.sidebarExpanded ?? false;
+  const sidebarWidth = layout?.sidebarWidth ?? 256;
+  const assistenteExpanded = layout?.assistenteExpanded ?? false;
 
   const [isPlaying, setIsPlaying] = useState(false);
   const [volume, setVolume] = useState(0.8);
@@ -109,10 +109,10 @@ export function AudioPlayer({
   const [isMobile, setIsMobile] = useState(false);
   const [playbackSpeed, setPlaybackSpeed] = useState(1);
 
-  // Mobile detection
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+  // Mobile detection
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
     checkMobile();
     window.addEventListener('resize', checkMobile);
     return () => window.removeEventListener('resize', checkMobile);
@@ -290,11 +290,11 @@ export function AudioPlayer({
       {/* Right: Actions */}
       <div className="flex items-center gap-2 shrink-0 relative z-10">
         <div className="hidden lg:flex items-center gap-2 w-28 mr-2 group">
-          <button
-            onClick={toggleMute}
-            className="text-muted-foreground hover:text-foreground"
-            aria-label={isMuted || volume === 0 ? "Ativar som" : "Desativar som"}
-          >
+          <button
+            onClick={toggleMute}
+            className="text-muted-foreground hover:text-foreground"
+            aria-label={isMuted || volume === 0 ? "Ativar som" : "Desativar som"}
+          >
             {isMuted || volume === 0 ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
           </button>
           <Slider
@@ -310,7 +310,7 @@ export function AudioPlayer({
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" className="rounded-full h-9 w-9" onClick={() => { if (audioRef.current) audioRef.current.currentTime = 0; }} aria-label="Recomecar audio">
+                  <Button variant="ghost" size="icon" className="rounded-full h-9 w-9" onClick={() => { if (audioRef.current) audioRef.current.currentTime = 0; }} aria-label="Recomecar audio">
                     <RotateCcw className="w-4 h-4" />
                   </Button>
                 </TooltipTrigger>
@@ -321,7 +321,7 @@ export function AudioPlayer({
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" className="text-[var(--chart-3)] hover:bg-accent rounded-full h-9 w-9" aria-label="Informacoes do audio">
+                  <Button variant="ghost" size="icon" className="text-[var(--chart-3)] hover:bg-accent rounded-full h-9 w-9" aria-label="Informacoes do audio">
                     <Info className="w-4 h-4 fill-current" />
                   </Button>
                 </TooltipTrigger>
@@ -333,7 +333,7 @@ export function AudioPlayer({
           <div className="hidden xl:flex items-center gap-1">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="rounded-full h-9 w-9" aria-label="Selecionar velocidade">
+                <Button variant="ghost" size="icon" className="rounded-full h-9 w-9" aria-label="Selecionar velocidade">
                   <Gauge className="w-4 h-4" />
                 </Button>
               </DropdownMenuTrigger>
@@ -353,7 +353,7 @@ export function AudioPlayer({
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" className="rounded-full h-9 w-9" aria-label="Baixar audio">
+                  <Button variant="ghost" size="icon" className="rounded-full h-9 w-9" aria-label="Baixar audio">
                     <Download className="w-4 h-4" />
                   </Button>
                 </TooltipTrigger>
@@ -365,7 +365,7 @@ export function AudioPlayer({
           <div className="xl:hidden">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="rounded-full h-9 w-9" aria-label="Mais opcoes">
+                <Button variant="ghost" size="icon" className="rounded-full h-9 w-9" aria-label="Mais opcoes">
                   <MoreHorizontal className="w-5 h-5" />
                 </Button>
               </DropdownMenuTrigger>
@@ -475,7 +475,7 @@ export function AudioPlayer({
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-9 w-9 rounded-full" aria-label="Mais opcoes">
+            <Button variant="ghost" size="icon" className="h-9 w-9 rounded-full" aria-label="Mais opcoes">
               <MoreVertical className="w-5 h-5" />
             </Button>
           </DropdownMenuTrigger>

package/components/media/index.ts

@@ -1,3 +1,3 @@
-export * from './video-player';
-export * from './audio-player';
-export { FloatingMediaWrapper } from './FloatingMediaWrapper';
+export * from './video-player';
+export * from './audio-player';
+export { FloatingMediaWrapper } from './FloatingMediaWrapper';

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

@@ -11,7 +11,7 @@ import { LanguageSelector } from '../../brand/language-selector';
 import { Badge } from '../../ui/badge';
 import { PageHeader } from '../../ui/page-header';
 
-import { useOptionalLayout } from '../../../contexts/LayoutContext';
+import { useOptionalLayout } from '../../../contexts/LayoutContext';
 import {
   SIDEBAR_EXPANDED_WIDTH,
   SIDEBAR_COLLAPSED_WIDTH
@@ -39,11 +39,11 @@ interface HomeContentProps {
  * 2. Navigation: Use the `navigate` function for routing between dashboard features.
  * 3. i18n: Currently uses a local `labelTranslations` map for breadcrumbs.
  */
-export function HomeContent({ user, onLogout, onSettings }: HomeContentProps) {
-  const layout = useOptionalLayout();
-  const sidebarExpanded = layout?.sidebarExpanded ?? false;
-  const sidebarWidth = layout?.sidebarWidth ?? 256;
-  const location = useLocation();
+export function HomeContent({ user, onLogout, onSettings }: HomeContentProps) {
+  const layout = useOptionalLayout();
+  const sidebarExpanded = layout?.sidebarExpanded ?? false;
+  const sidebarWidth = layout?.sidebarWidth ?? 256;
+  const location = useLocation();
   const navigate = useNavigate();
 
   // Direct translation for interface labels
@@ -124,4 +124,4 @@ export function HomeContent({ user, onLogout, onSettings }: HomeContentProps) {
       </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.stories.tsx

@@ -1,39 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { HomePage } from './HomePage';
-import { MemoryRouter } from 'react-router-dom';
-import { LayoutProvider } from '../../../contexts/LayoutContext';
-import React from 'react';
-
-const meta: Meta<typeof HomePage> = {
-  title: 'Pages/HomePage',
-  component: HomePage,
-  decorators: [
-    (Story) => (
-      <MemoryRouter initialEntries={['/home']}>
-        <LayoutProvider>
-          <Story />
-        </LayoutProvider>
-      </MemoryRouter>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof HomePage>;
-
-export const Default: Story = {
-  args: {
-    user: { email: 'ariel@xertica.com' },
-    onLogout: () => {},
-  },
-};
-
-export const NoUser: Story = {
-  args: {
-    user: null,
-    onLogout: () => {},
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { HomePage } from './HomePage';
+import { MemoryRouter } from 'react-router-dom';
+import { LayoutProvider } from '../../../contexts/LayoutContext';
+import React from 'react';
+
+const meta: Meta<typeof HomePage> = {
+  title: 'Pages/HomePage',
+  component: HomePage,
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={['/home']}>
+        <LayoutProvider>
+          <Story />
+        </LayoutProvider>
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HomePage>;
+
+export const Default: Story = {
+  args: {
+    user: { email: 'ariel@xertica.com' },
+    onLogout: () => {},
+  },
+};
+
+export const NoUser: Story = {
+  args: {
+    user: null,
+    onLogout: () => {},
+  },
+};

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

@@ -48,7 +48,7 @@ export function HomePage({ user, onLogout }: HomePageProps) {
   const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
   const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
   const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
-  const sidebarWidth = layout?.sidebarWidth ?? 256;
+  const sidebarWidth = layout?.sidebarWidth ?? 280;
   const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
   const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded((value) => !value));
   const toggleAssistente = layout?.toggleAssistente ?? (() => setLocalAssistantExpanded((value) => !value));

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`.

package/components/pages/index.ts

@@ -1,8 +1,8 @@
-export * from './forgot-password-page';
-export * from './home-content';
-export * from './home-page';
-export * from './login-page';
-export * from './reset-password-page';
-export * from './template-content';
-export * from './template-page';
-export * from './verify-email-page';
+export * from './forgot-password-page';
+export * from './home-content';
+export * from './home-page';
+export * from './login-page';
+export * from './reset-password-page';
+export * from './template-content';
+export * from './template-page';
+export * from './verify-email-page';