@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/lib/components/layout/nav-main.tsx

@@ -1,4 +1,4 @@
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/vdb/components/ui/collapsible.js';
 import {
     SidebarGroup,
     SidebarGroupLabel,
@@ -8,15 +8,16 @@ import {
     SidebarMenuSub,
     SidebarMenuSubButton,
     SidebarMenuSubItem,
-} from '@/components/ui/sidebar.js';
+} from '@/vdb/components/ui/sidebar.js';
 import {
     NavMenuItem,
     NavMenuSection,
     NavMenuSectionPlacement,
-} from '@/framework/nav-menu/nav-menu-extensions.js';
-import { Link, useLocation } from '@tanstack/react-router';
+} from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
+import { Link, useRouter, useRouterState } from '@tanstack/react-router';
 import { ChevronRight } from 'lucide-react';
 import * as React from 'react';
+import { NavItemWrapper } from './nav-item-wrapper.js';
 
 // Utility to sort items & sections by the optional `order` prop (ascending) and then alphabetically by title
 function sortByOrder<T extends { order?: number; title: string }>(a: T, b: T) {
@@ -28,10 +29,73 @@ function sortByOrder<T extends { order?: number; title: string }>(a: T, b: T) {
     return orderA - orderB;
 }
 
-export function NavMain({ items }: { items: Array<NavMenuSection | NavMenuItem> }) {
-    const location = useLocation();
-    // State to track which bottom section is currently open
-    const [openBottomSectionId, setOpenBottomSectionId] = React.useState<string | null>(null);
+/**
+ * Escapes special regex characters in a string to be used as a literal pattern
+ */
+function escapeRegexChars(str: string): string {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavMenuItem> }>) {
+    const router = useRouter();
+    const routerState = useRouterState();
+    const currentPath = routerState.location.pathname;
+    const basePath = router.basepath || '';
+
+    // Helper to check if a path is active
+    const isPathActive = React.useCallback(
+        (itemUrl: string) => {
+            // Remove basepath prefix from current path for comparison
+            const normalizedCurrentPath = basePath ? currentPath.replace(new RegExp(`^${escapeRegexChars(basePath)}`), '') : currentPath;
+            
+            // Ensure normalized path starts with /
+            const cleanPath = normalizedCurrentPath.startsWith('/') ? normalizedCurrentPath : `/${normalizedCurrentPath}`;
+            
+            // Special handling for root path
+            if (itemUrl === '/') {
+                return cleanPath === '/' || cleanPath === '';
+            }
+            
+            // For other paths, check exact match or prefix match
+            return cleanPath === itemUrl || cleanPath.startsWith(`${itemUrl}/`);
+        },
+        [currentPath, basePath],
+    );
+
+    // Helper to find sections containing active routes
+    const findActiveSections = React.useCallback(
+        (sections: Array<NavMenuSection | NavMenuItem>) => {
+            const activeTopSections = new Set<string>();
+            let activeBottomSection: string | null = null;
+
+            for (const section of sections) {
+                if ('items' in section && section.items) {
+                    const hasActiveItem = section.items.some(item => isPathActive(item.url));
+                    if (hasActiveItem) {
+                        if (section.placement === 'top') {
+                            activeTopSections.add(section.id);
+                        } else if (section.placement === 'bottom' && !activeBottomSection) {
+                            activeBottomSection = section.id;
+                        }
+                    }
+                }
+            }
+
+            return { activeTopSections, activeBottomSection };
+        },
+        [isPathActive],
+    );
+
+    // Initialize state with active sections on mount
+    const [openBottomSectionId, setOpenBottomSectionId] = React.useState<string | null>(() => {
+        const { activeBottomSection } = findActiveSections(items);
+        return activeBottomSection;
+    });
+
+    const [openTopSectionIds, setOpenTopSectionIds] = React.useState<Set<string>>(() => {
+        const { activeTopSections } = findActiveSections(items);
+        return activeTopSections;
+    });
 
     // Helper to build a sorted list of sections for a given placement, memoized for stability
     const getSortedSections = React.useCallback(
@@ -52,6 +116,17 @@ export function NavMain({ items }: { items: Array<NavMenuSection | NavMenuItem>
     const topSections = React.useMemo(() => getSortedSections('top'), [getSortedSections]);
     const bottomSections = React.useMemo(() => getSortedSections('bottom'), [getSortedSections]);
 
+    // Handle top section open/close (only one section open at a time)
+    const handleTopSectionToggle = (sectionId: string, isOpen: boolean) => {
+        if (isOpen) {
+            // When opening a section, close all others
+            setOpenTopSectionIds(new Set([sectionId]));
+        } else {
+            // When closing a section, remove it from the set
+            setOpenTopSectionIds(new Set());
+        }
+    };
+
     // Handle bottom section open/close
     const handleBottomSectionToggle = (sectionId: string, isOpen: boolean) => {
         if (isOpen) {
@@ -61,77 +136,81 @@ export function NavMain({ items }: { items: Array<NavMenuSection | NavMenuItem>
         }
     };
 
-    // Auto-open the bottom section that contains the current route
+    // Update open sections when route changes (for client-side navigation)
     React.useEffect(() => {
-        const currentPath = location.pathname;
-
-        // Check if the current path is in any bottom section
-        for (const section of bottomSections) {
-            const matchingItem =
-                'items' in section
-                    ? section.items?.find(
-                          item => currentPath === item.url || currentPath.startsWith(`${item.url}/`),
-                      )
-                    : null;
-
-            if (matchingItem) {
-                setOpenBottomSectionId(section.id);
-                return;
-            }
+        const { activeTopSections, activeBottomSection } = findActiveSections(items);
+
+        // Replace open sections with only the active one
+        setOpenTopSectionIds(activeTopSections);
+
+        if (activeBottomSection) {
+            setOpenBottomSectionId(activeBottomSection);
         }
-    }, [location.pathname, bottomSections]);
+    }, [currentPath, items, findActiveSections]);
 
     // Render a top navigation section
     const renderTopSection = (item: NavMenuSection | NavMenuItem) => {
         if ('url' in item) {
             return (
-                <SidebarMenuItem key={item.title}>
-                    <SidebarMenuButton tooltip={item.title} asChild isActive={location.pathname === item.url}>
-                        <Link to={item.url}>
-                            {item.icon && <item.icon />}
-                            <span>{item.title}</span>
-                        </Link>
-                    </SidebarMenuButton>
-                </SidebarMenuItem>
+                <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton
+                            tooltip={item.title}
+                            asChild
+                            isActive={isPathActive(item.url)}
+                        >
+                            <Link to={item.url}>
+                                {item.icon && <item.icon />}
+                                <span>{item.title}</span>
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </NavItemWrapper>
             );
         }
 
         return (
-            <Collapsible
-                key={item.title}
-                asChild
-                defaultOpen={item.defaultOpen}
-                className="group/collapsible"
-            >
-                <SidebarMenuItem>
-                    <CollapsibleTrigger asChild>
-                        <SidebarMenuButton tooltip={item.title}>
-                            {item.icon && <item.icon />}
-                            <span>{item.title}</span>
-                            <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                        </SidebarMenuButton>
-                    </CollapsibleTrigger>
-                    <CollapsibleContent>
-                        <SidebarMenuSub>
-                            {item.items?.map(subItem => (
-                                <SidebarMenuSubItem key={subItem.title}>
-                                    <SidebarMenuSubButton
-                                        asChild
-                                        isActive={
-                                            location.pathname === subItem.url ||
-                                            location.pathname.startsWith(`${subItem.url}/`)
-                                        }
+            <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
+                <Collapsible
+                    asChild
+                    open={openTopSectionIds.has(item.id)}
+                    onOpenChange={isOpen => handleTopSectionToggle(item.id, isOpen)}
+                    className="group/collapsible"
+                >
+                    <SidebarMenuItem>
+                        <CollapsibleTrigger asChild>
+                            <SidebarMenuButton tooltip={item.title}>
+                                {item.icon && <item.icon />}
+                                <span>{item.title}</span>
+                                <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                            </SidebarMenuButton>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent>
+                            <SidebarMenuSub>
+                                {item.items?.map(subItem => (
+                                    <NavItemWrapper
+                                        key={subItem.title}
+                                        locationId={subItem.id}
+                                        order={subItem.order}
+                                        parentLocationId={item.id}
                                     >
-                                        <Link to={subItem.url}>
-                                            <span>{subItem.title}</span>
-                                        </Link>
-                                    </SidebarMenuSubButton>
-                                </SidebarMenuSubItem>
-                            ))}
-                        </SidebarMenuSub>
-                    </CollapsibleContent>
-                </SidebarMenuItem>
-            </Collapsible>
+                                        <SidebarMenuSubItem>
+                                            <SidebarMenuSubButton
+                                                asChild
+                                                isActive={isPathActive(subItem.url)}
+                                            >
+                                                <Link to={subItem.url}>
+                                                    <span>{subItem.title}</span>
+                                                </Link>
+                                            </SidebarMenuSubButton>
+                                        </SidebarMenuSubItem>
+                                    </NavItemWrapper>
+                                ))}
+                            </SidebarMenuSub>
+                        </CollapsibleContent>
+                    </SidebarMenuItem>
+                </Collapsible>
+            </NavItemWrapper>
         );
     };
 
@@ -139,53 +218,64 @@ export function NavMain({ items }: { items: Array<NavMenuSection | NavMenuItem>
     const renderBottomSection = (item: NavMenuSection | NavMenuItem) => {
         if ('url' in item) {
             return (
-                <SidebarMenuItem key={item.title}>
-                    <SidebarMenuButton tooltip={item.title} asChild isActive={location.pathname === item.url}>
-                        <Link to={item.url}>
-                            {item.icon && <item.icon />}
-                            <span>{item.title}</span>
-                        </Link>
-                    </SidebarMenuButton>
-                </SidebarMenuItem>
+                <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton
+                            tooltip={item.title}
+                            asChild
+                            isActive={isPathActive(item.url)}
+                        >
+                            <Link to={item.url}>
+                                {item.icon && <item.icon />}
+                                <span>{item.title}</span>
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </NavItemWrapper>
             );
         }
         return (
-            <Collapsible
-                key={item.title}
-                asChild
-                open={openBottomSectionId === item.id}
-                onOpenChange={isOpen => handleBottomSectionToggle(item.id, isOpen)}
-                className="group/collapsible"
-            >
-                <SidebarMenuItem>
-                    <CollapsibleTrigger asChild>
-                        <SidebarMenuButton tooltip={item.title}>
-                            {item.icon && <item.icon />}
-                            <span>{item.title}</span>
-                            <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                        </SidebarMenuButton>
-                    </CollapsibleTrigger>
-                    <CollapsibleContent>
-                        <SidebarMenuSub>
-                            {item.items?.map(subItem => (
-                                <SidebarMenuSubItem key={subItem.title}>
-                                    <SidebarMenuSubButton
-                                        asChild
-                                        isActive={
-                                            location.pathname === subItem.url ||
-                                            location.pathname.startsWith(`${subItem.url}/`)
-                                        }
+            <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
+                <Collapsible
+                    asChild
+                    open={openBottomSectionId === item.id}
+                    onOpenChange={isOpen => handleBottomSectionToggle(item.id, isOpen)}
+                    className="group/collapsible"
+                >
+                    <SidebarMenuItem>
+                        <CollapsibleTrigger asChild>
+                            <SidebarMenuButton tooltip={item.title}>
+                                {item.icon && <item.icon />}
+                                <span>{item.title}</span>
+                                <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                            </SidebarMenuButton>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent>
+                            <SidebarMenuSub>
+                                {item.items?.map(subItem => (
+                                    <NavItemWrapper
+                                        key={subItem.title}
+                                        locationId={subItem.id}
+                                        order={subItem.order}
+                                        parentLocationId={item.id}
                                     >
-                                        <Link to={subItem.url}>
-                                            <span>{subItem.title}</span>
-                                        </Link>
-                                    </SidebarMenuSubButton>
-                                </SidebarMenuSubItem>
-                            ))}
-                        </SidebarMenuSub>
-                    </CollapsibleContent>
-                </SidebarMenuItem>
-            </Collapsible>
+                                        <SidebarMenuSubItem>
+                                            <SidebarMenuSubButton
+                                                asChild
+                                                isActive={isPathActive(subItem.url)}
+                                            >
+                                                <Link to={subItem.url}>
+                                                    <span>{subItem.title}</span>
+                                                </Link>
+                                            </SidebarMenuSubButton>
+                                        </SidebarMenuSubItem>
+                                    </NavItemWrapper>
+                                ))}
+                            </SidebarMenuSub>
+                        </CollapsibleContent>
+                    </SidebarMenuItem>
+                </Collapsible>
+            </NavItemWrapper>
         );
     };
 
@@ -193,7 +283,6 @@ export function NavMain({ items }: { items: Array<NavMenuSection | NavMenuItem>
         <>
             {/* Top sections */}
             <SidebarGroup>
-                <SidebarGroupLabel>Platform</SidebarGroupLabel>
                 <SidebarMenu>{topSections.map(renderTopSection)}</SidebarMenu>
             </SidebarGroup>
 

package/src/lib/components/layout/nav-projects.tsx

@@ -6,7 +6,7 @@ import {
     DropdownMenuItem,
     DropdownMenuSeparator,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
 import {
     SidebarGroup,
     SidebarGroupLabel,
@@ -15,7 +15,7 @@ import {
     SidebarMenuButton,
     SidebarMenuItem,
     useSidebar,
-} from '@/components/ui/sidebar.js';
+} from '@/vdb/components/ui/sidebar.js';
 
 export function NavProjects({
     projects,

package/src/lib/components/layout/nav-user.tsx

@@ -1,8 +1,8 @@
-import { useAuth } from '@/hooks/use-auth.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
 import { Link, useNavigate, useRouter } from '@tanstack/react-router';
 import { ChevronsUpDown, LogOut, Monitor, Moon, Sparkles, Sun } from 'lucide-react';
 
-// import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.js';
+// import { Avatar, AvatarFallback, AvatarImage } from '@/vdb/components/ui/avatar.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -17,11 +17,11 @@ import {
     DropdownMenuSubContent,
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
-import { Theme } from '@/providers/theme-provider.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/vdb/components/ui/sidebar.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { Theme } from '@/vdb/providers/theme-provider.js';
 import { useMemo } from 'react';
 import { Dialog, DialogTrigger } from '../ui/dialog.js';
 import { LanguageDialog } from './language-dialog.js';

package/src/lib/components/layout/prerelease-popup.tsx

@@ -1,4 +1,4 @@
-import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { useState } from 'react';
 import { toast } from 'sonner';
 

package/src/lib/components/login/login-form.tsx

@@ -1,8 +1,8 @@
-import { Button } from '@/components/ui/button.js';
-import { Card, CardContent } from '@/components/ui/card.js';
-import { Input } from '@/components/ui/input.js';
-import { Trans } from '@/lib/trans.js';
-import { cn } from '@/lib/utils.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Card, CardContent } from '@/vdb/components/ui/card.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2 } from 'lucide-react';
 import * as React from 'react';
@@ -10,8 +10,10 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { uiConfig } from 'virtual:vendure-ui-config';
 import { z } from 'zod';
+import { useLoginExtensions } from '../../framework/extension-api/use-login-extensions.js';
 import { LogoMark } from '../shared/logo-mark.js';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form.js';
+import { Separator } from '../ui/separator.js';
 
 export interface LoginFormProps extends React.ComponentProps<'div'> {
     loginError?: string;
@@ -19,7 +21,7 @@ export interface LoginFormProps extends React.ComponentProps<'div'> {
     onFormSubmit?: (username: string, password: string) => void;
 }
 
-type RemoteLoginImage = {
+export type RemoteLoginImage = {
     urls: { regular: string };
     location: { name: string };
     user: { name: string; links: { html: string } };
@@ -32,6 +34,7 @@ const formSchema = z.object({
 
 export function LoginForm({ className, onFormSubmit, isVerifying, loginError, ...props }: LoginFormProps) {
     const [remoteLoginImage, setRemoteLoginImage] = React.useState<RemoteLoginImage | null>(null);
+    const loginExtensions = useLoginExtensions();
 
     React.useEffect(() => {
         if (!uiConfig.loginImageUrl) {
@@ -66,17 +69,39 @@ export function LoginForm({ className, onFormSubmit, isVerifying, loginError, ..
                         >
                             <div className="flex flex-col gap-6">
                                 <div className="flex flex-col items-start  space-y-4">
-                                    {!uiConfig.hideVendureBranding && (
-                                        <LogoMark className="text-vendure-brand h-6 w-auto" />
+                                    {loginExtensions.logo ? (
+                                        <>
+                                            <loginExtensions.logo.component />
+                                            {loginExtensions.beforeForm && (
+                                                <>
+                                                    <loginExtensions.beforeForm.component />
+                                                    <Separator className="w-full" />
+                                                </>
+                                            )}
+                                        </>
+                                    ) : (
+                                        <>
+                                            {!uiConfig.hideVendureBranding && (
+                                                <LogoMark className="text-vendure-brand h-6 w-auto" />
+                                            )}
+                                            <div>
+                                                <h1 className="text-2xl font-medium">
+                                                    <Trans>Welcome back!</Trans>
+                                                </h1>
+                                                <p className="text-muted-foreground text-balance">
+                                                    Login to your Vendure store
+                                                </p>
+                                            </div>
+                                            {loginExtensions.beforeForm && (
+                                                <>
+                                                    <Separator className="w-full" />
+                                                    <div className="w-full">
+                                                        <loginExtensions.beforeForm.component />
+                                                    </div>
+                                                </>
+                                            )}
+                                        </>
                                     )}
-                                    <div>
-                                        <h1 className="text-2xl font-medium">
-                                            <Trans>Welcome back!</Trans>
-                                        </h1>
-                                        <p className="text-muted-foreground text-balance">
-                                            Login to your Vendure store
-                                        </p>
-                                    </div>
                                 </div>
                                 <FormField
                                     control={form.control}
@@ -117,7 +142,6 @@ export function LoginForm({ className, onFormSubmit, isVerifying, loginError, ..
                                         </FormItem>
                                     )}
                                 />
-
                                 <Button type="submit" disabled={isVerifying}>
                                     {isVerifying && (
                                         <>
@@ -128,44 +152,55 @@ export function LoginForm({ className, onFormSubmit, isVerifying, loginError, ..
                                     {!isVerifying && <span>Login</span>}
                                 </Button>
                             </div>
+                            {loginExtensions.afterForm && (
+                                <>
+                                    <Separator className="w-full my-4" />
+
+                                    <loginExtensions.afterForm.component />
+                                </>
+                            )}
                         </form>
                     </Form>
-                    <div className="bg-muted relative hidden md:block lg:min-h-[500px]">
-                        {remoteLoginImage && (
-                            <>
+                    {loginExtensions.loginImage ? (
+                        <loginExtensions.loginImage.component />
+                    ) : (
+                        <div className="bg-muted relative hidden md:block lg:min-h-[500px]">
+                            {remoteLoginImage && (
+                                <>
+                                    <img
+                                        src={remoteLoginImage.urls.regular}
+                                        alt="Image"
+                                        className="absolute inset-0 h-full w-full object-cover"
+                                    />
+                                    <div className="absolute h-full w-full top-0 left-0 flex items-end justify-start bg-gradient-to-b from-transparent to-black/80 p-4 ">
+                                        <div>
+                                            <p className="text-lg font-medium text-white">
+                                                {remoteLoginImage.location.name}
+                                            </p>
+                                            <p className="text-sm text-white/80">
+                                                By
+                                                <a
+                                                    className="mx-1 underline"
+                                                    href={remoteLoginImage.user.links.html}
+                                                    target="_blank"
+                                                >
+                                                    {remoteLoginImage.user.name}
+                                                </a>
+                                                on Unsplash
+                                            </p>
+                                        </div>
+                                    </div>
+                                </>
+                            )}
+                            {uiConfig.loginImageUrl && (
                                 <img
-                                    src={remoteLoginImage.urls.regular}
-                                    alt="Image"
+                                    src={uiConfig.loginImageUrl}
+                                    alt="Login image"
                                     className="absolute inset-0 h-full w-full object-cover"
                                 />
-                                <div className="absolute h-full w-full top-0 left-0 flex items-end justify-start bg-gradient-to-b from-transparent to-black/80 p-4 ">
-                                    <div>
-                                        <p className="text-lg font-medium text-white">
-                                            {remoteLoginImage.location.name}
-                                        </p>
-                                        <p className="text-sm text-white/80">
-                                            By
-                                            <a
-                                                className="mx-1 underline"
-                                                href={remoteLoginImage.user.links.html}
-                                                target="_blank"
-                                            >
-                                                {remoteLoginImage.user.name}
-                                            </a>
-                                            on Unsplash
-                                        </p>
-                                    </div>
-                                </div>
-                            </>
-                        )}
-                        {uiConfig.loginImageUrl && (
-                            <img
-                                src={uiConfig.loginImageUrl}
-                                alt="Login image"
-                                className="absolute inset-0 h-full w-full object-cover"
-                            />
-                        )}
-                    </div>
+                            )}
+                        </div>
+                    )}
                 </CardContent>
             </Card>
         </div>

package/src/lib/components/shared/alerts.tsx

@@ -1,10 +1,10 @@
+import { useAlerts } from '@/vdb/framework/alert/alert-extensions.js';
+import { AlertItem } from '@/vdb/framework/alert/alert-item.js';
+import { AlertsIndicator } from '@/vdb/framework/alert/alerts-indicator.js';
 import { BellIcon } from 'lucide-react';
 import { Button } from '../ui/button.js';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog.js';
-import { useAlerts } from '../../framework/alert/alert-extensions.js';
-import { AlertItem } from '../../framework/alert/alert-item.js';
 import { ScrollArea } from '../ui/scroll-area.js';
-import { AlertsIndicator } from '../../framework/alert/alerts-indicator.js';
 
 export function Alerts() {
     const { alerts } = useAlerts();

package/src/lib/components/shared/animated-number.tsx

@@ -1,5 +1,5 @@
-import { useChannel } from '@/index.js';
-import { useLocalFormat } from '@/index.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { motion, useSpring, useTransform } from 'motion/react';
 import { useEffect } from 'react';