@reinvented/design 1.0.0 → 1.2.0

package/skills/visual/transitions-animations.md

@@ -0,0 +1,66 @@
+# Visual: Transitions & Animations
+
+Motion design for interactive elements.
+
+## Standard Transitions
+
+Apply these to all interactive elements:
+
+```html
+<!-- Color change on hover (buttons, links, list items) -->
+className="transition-colors duration-150"
+
+<!-- Shadow change on hover (cards) -->
+className="transition-shadow duration-150"
+
+<!-- Multi-property transitions -->
+className="transition-all duration-200"
+
+<!-- Opacity reveal (show-on-hover elements) -->
+className="opacity-0 group-hover:opacity-100 transition-opacity"
+```
+
+## Loading Spinner
+
+```tsx
+<Loader2 className="w-4 h-4 animate-spin" />
+```
+
+Always `animate-spin` on `Loader2` icon. Never use custom CSS animations for spinners.
+
+## Hover Effects
+
+| Element | Hover Class | Notes |
+|---------|-------------|-------|
+| Buttons | Built into DS components | No extra classes needed |
+| Cards (clickable) | `hover:bg-accent/50 transition-colors` | Subtle background tint |
+| List items | `hover:bg-accent transition-colors` | Slightly stronger than cards |
+| Table rows | Built into `TableRow` | Hover effect is automatic |
+| Icons/actions | `opacity-0 group-hover:opacity-100` | Reveal-on-hover pattern |
+| Links | `hover:text-foreground transition-colors` | On `text-muted-foreground` elements |
+
+## Animation Principles
+
+1. **Subtle is better** — animations should be felt, not seen
+2. **150ms for color** — fast enough to feel instant, slow enough to be smooth
+3. **200ms for position/size** — slightly longer for spatial changes
+4. **300ms for entrances** — dialogs, sheets, dropdowns
+5. **No animation for data** — text, numbers, and status changes should be instant
+
+## Button Press Effect
+
+For a subtle "pressed" feeling:
+```html
+className="active:scale-[0.98] transition-transform"
+```
+
+## Staggered Animations
+
+For list items appearing on load, use CSS animation delays:
+```html
+<div v-for="(item, i) in items" :key="item.id"
+     className="animate-in fade-in slide-in-from-bottom-2"
+     :style="{ animationDelay: `${i * 50}ms` }">
+```
+
+Only use staggered animations for initial page load, not for content that's already visible.

package/skills/visual/typography-hierarchy.md

@@ -0,0 +1,66 @@
+# Visual: Typography Hierarchy
+
+How to use type scale to create clear information architecture.
+
+## The Hierarchy Stack
+
+Every page should have a clear top-to-bottom reading Order:
+
+| Level | Classes | Use | Example |
+|-------|---------|-----|---------|
+| **1. Page Title** | `text-2xl font-bold` | One per page, topmost heading | "Dashboard", "Team Members" |
+| **2. Page Subtitle** | `text-muted-foreground` (default size or `text-sm`) | Directly below page title | "Overview of your workspace." |
+| **3. Section Heading** | `text-lg font-semibold` | Separates major content areas | "Recent Activity", "Settings" |
+| **4. Card Title** | Varies by `CardTitle` context | Inside cards/panels | "Total Revenue", "Profile" |
+| **5. Body Text** | `text-sm` | Standard content | Table cells, descriptions |
+| **6. Label** | `text-sm font-medium` | Form labels, nav items | "Email", "Projects" |
+| **7. Caption / Meta** | `text-xs text-muted-foreground` | Timestamps, counts, helper text | "Updated 2 hours ago" |
+
+## Rules
+
+1. **One `text-2xl font-bold` per page** — the page title. Never two.
+2. **`text-sm` is the default body size** — not `text-base`. This keeps the UI compact and professional.
+3. **Font weights serve meaning**:
+   - `font-bold` (700): Page titles, large stat values
+   - `font-semibold` (600): Section headings, card titles
+   - `font-medium` (500): Labels, nav items, emphasized body text
+   - Default (400): Body text, descriptions
+4. **Color creates hierarchy too**: `text-foreground` for primary text, `text-muted-foreground` for secondary
+
+## Common Patterns
+
+### Page Header
+```tsx
+<div>
+  <h1 className="text-2xl font-bold">Projects</h1>
+  <p className="text-muted-foreground">Manage and track all your projects.</p>
+</div>
+```
+
+### Section with Content
+```tsx
+<div className="space-y-4">
+  <h2 className="text-lg font-semibold">Recent Activity</h2>
+  <!-- content -->
+</div>
+```
+
+### Stat Display
+```tsx
+<div className="text-2xl font-bold">$45,231</div>
+<p className="text-xs text-muted-foreground">+20.1% from last month</p>
+```
+
+## Anti-Patterns
+
+```html
+<!-- ❌ Too many heading sizes — confusing hierarchy -->
+<h1 className="text-3xl">Page</h1>
+<h2 className="text-2xl">Section</h2>
+<h3 className="text-xl">Subsection</h3>
+<h4 className="text-lg">Sub-subsection</h4>
+
+<!-- ✅ Clean two-level hierarchy -->
+<h1 className="text-2xl font-bold">Page</h1>
+<h2 className="text-lg font-semibold">Section</h2>
+```

package/src/components/blocks/auth/auth-card/AuthCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
+import { cn } from '../../../../lib/utils'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '../../../../components/ui/card'
 
 interface AuthCardProps {
   title: string

package/src/components/blocks/auth/social-login/SocialLoginGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
+import { cn } from '../../../../lib/utils'
+import { Button } from '../../../../components/ui/button'
 import { Github } from 'lucide-react'
 
 interface SocialLoginGroupProps {

package/src/components/blocks/auth/two-factor/TwoFactorForm.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { cn } from '@/lib/utils'
-import { Label } from '@/components/ui/label'
-import { Button } from '@/components/ui/button'
-import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/components/ui/input-otp'
+import { cn } from '../../../../lib/utils'
+import { Label } from '../../../../components/ui/label'
+import { Button } from '../../../../components/ui/button'
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '../../../../components/ui/input-otp'
 
 interface TwoFactorFormProps {
   email?: string

package/src/components/blocks/communication/activity-item/ActivityItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 export function ActivityItem({
   className,

package/src/components/blocks/communication/activity-item/ActivityItemAvatar.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { HTMLAttributes } from 'react'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { cn } from '@/lib/utils'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../../components/ui/avatar'
+import { cn } from '../../../../lib/utils'
 
 interface ActivityItemAvatarProps {
   src?: string

package/src/components/blocks/communication/activity-item/ActivityItemContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 export function ActivityItemContent({
   className,

package/src/components/blocks/communication/chat-bubble/ChatBubble.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
   variant?: 'sent' | 'received'

package/src/components/blocks/communication/chat-bubble/ChatBubbleAvatar.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { HTMLAttributes } from 'react'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { cn } from '@/lib/utils'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../../components/ui/avatar'
+import { cn } from '../../../../lib/utils'
 
 interface ChatBubbleAvatarProps {
   src?: string

package/src/components/blocks/communication/chat-bubble/ChatBubbleMessage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface ChatBubbleMessageProps extends React.HTMLAttributes<HTMLDivElement> {
   variant?: 'sent' | 'received'

package/src/components/blocks/communication/chat-bubble/ChatBubbleTimestamp.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface ChatBubbleTimestampProps extends React.HTMLAttributes<HTMLSpanElement> {
   timestamp: string

package/src/components/blocks/content/article-header/ArticleHeader.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import type { HTMLAttributes } from 'react'
-import { cn } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { cn } from '../../../../lib/utils'
+import { Badge } from '../../../../components/ui/badge'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../../components/ui/avatar'
 
 interface ArticleHeaderProps {
   title: string

package/src/components/blocks/content/author-card/AuthorCard.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import type { HTMLAttributes, ReactNode } from 'react'
-import { Card, CardContent } from '@/components/ui/card'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+import { Card, CardContent } from '../../../../components/ui/card'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../../components/ui/avatar'
+import { Button } from '../../../../components/ui/button'
+import { cn } from '../../../../lib/utils'
 
 interface AuthorCardProps {
   name: string

package/src/components/blocks/content/rich-text/RichTextContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type { HTMLAttributes, ReactNode } from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface RichTextContentProps {
   className?: HTMLAttributes<HTMLElement>['className']

package/src/components/blocks/data-management/kanban/KanbanBoard.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 export function KanbanBoard({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (

package/src/components/blocks/data-management/kanban/KanbanCard.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { Card, CardContent } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { cn } from '../../../../lib/utils'
+import { Card, CardContent } from '../../../../components/ui/card'
+import { Badge } from '../../../../components/ui/badge'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../../components/ui/avatar'
 import { MessageSquare, Paperclip } from 'lucide-react'
 
 interface KanbanCardProps {

package/src/components/blocks/data-management/kanban/KanbanColumn.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
+import { cn } from '../../../../lib/utils'
+import { Badge } from '../../../../components/ui/badge'
 import { MoreHorizontal, Plus } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import { Button } from '../../../../components/ui/button'
 
 interface KanbanColumnProps {
   title: string

package/src/components/blocks/data-management/tree-view/TreeItem.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { ChevronRight, Folder, FolderOpen, File } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { cn } from '../../../../lib/utils'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../../../components/ui/collapsible'
 
 interface TreeItemProps {
   title: string

package/src/components/blocks/data-management/tree-view/TreeView.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 export function TreeView({ class: className, children }: { class?: string; children?: React.ReactNode }) {
   return (

package/src/components/blocks/data-viz/financial-ticker/FinancialTicker.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface FinancialTickerProps {
   symbol: string

package/src/components/blocks/data-viz/kpi-card/KpiCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card'
 import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface KpiCardProps {
   title: string

package/src/components/blocks/data-viz/stat-grid/StatGrid.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface StatGridProps {
   columns?: 2 | 3 | 4

package/src/components/blocks/ecommerce/pricing-tier/PricingFeatureList.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { HTMLAttributes } from 'react'
-import { CardContent } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
+import { CardContent } from '../../../../components/ui/card'
+import { cn } from '../../../../lib/utils'
 import { Check } from 'lucide-react'
 
 interface PricingFeatureListProps {

package/src/components/blocks/ecommerce/pricing-tier/PricingHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { HTMLAttributes } from 'react'
-import { CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
+import { CardHeader, CardTitle, CardDescription } from '../../../../components/ui/card'
+import { cn } from '../../../../lib/utils'
 
 interface PricingHeaderProps {
   title: string

package/src/components/blocks/ecommerce/pricing-tier/PricingTier.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { HTMLAttributes } from 'react'
-import { Card } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
+import { Card } from '../../../../components/ui/card'
+import { cn } from '../../../../lib/utils'
 
 interface PricingTierProps {
   featured?: boolean

package/src/components/blocks/ecommerce/product-card/ProductCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { HTMLAttributes } from 'react'
-import { Card } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
+import { Card } from '../../../../components/ui/card'
+import { cn } from '../../../../lib/utils'
 
 interface ProductCardProps {
   className?: HTMLAttributes<HTMLDivElement>['className']

package/src/components/blocks/ecommerce/product-card/ProductCardContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { CardContent } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
+import { CardContent } from '../../../../components/ui/card'
+import { cn } from '../../../../lib/utils'
 
 export function ProductCardContent({
   className,

package/src/components/blocks/ecommerce/product-card/ProductCardImage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface ProductCardImageProps extends React.HTMLAttributes<HTMLDivElement> {
   src: string

package/src/components/blocks/ecommerce/product-card/ProductCardPrice.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface ProductCardPriceProps extends React.HTMLAttributes<HTMLDivElement> {
   price: string

package/src/components/blocks/ecommerce/rating-summary/RatingStars.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Star, StarHalf } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface RatingStarsProps {
   rating: number

package/src/components/blocks/feedback/empty-state/EmptyState.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
+import { cn } from '../../../../lib/utils'
+import { Button } from '../../../../components/ui/button'
 import { Plus } from 'lucide-react'
 
 interface EmptyStateProps {

package/src/components/blocks/feedback/error-state/ErrorState.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
+import { cn } from '../../../../lib/utils'
+import { Button } from '../../../../components/ui/button'
 import { AlertTriangle, RefreshCcw } from 'lucide-react'
 
 interface ErrorStateProps {

package/src/components/blocks/feedback/not-found/NotFoundState.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
+import { cn } from '../../../../lib/utils'
+import { Button } from '../../../../components/ui/button'
 import { Search, Home, ArrowLeft } from 'lucide-react'
 
 interface NotFoundStateProps {

package/src/components/blocks/filtering/faceted-sidebar/FacetedGroup.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { cn } from '@/lib/utils'
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
+import { cn } from '../../../../lib/utils'
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../../../components/ui/collapsible'
 import { ChevronDown } from 'lucide-react'
 
 interface FacetedGroupProps {

package/src/components/blocks/filtering/faceted-sidebar/FacetedSidebar.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { ScrollArea } from '@/components/ui/scroll-area'
+import { cn } from '../../../../lib/utils'
+import { ScrollArea } from '../../../../components/ui/scroll-area'
 
 interface FacetedSidebarProps {
   title?: string

package/src/components/blocks/filtering/filter-bar/FilterBar.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
+import { Input } from '../../../../components/ui/input'
+import { Button } from '../../../../components/ui/button'
+import { Badge } from '../../../../components/ui/badge'
 import { Search, Filter, X } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface FilterBarProps {
   placeholder?: string

package/src/components/blocks/filtering/search-result/SearchResultItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
+import { cn } from '../../../../lib/utils'
+import { Badge } from '../../../../components/ui/badge'
 
 interface SearchResultItemProps {
   title: string

package/src/components/blocks/marketing/cta-block/CtaBlock.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
+import { cn } from '../../../../lib/utils'
+import { Button } from '../../../../components/ui/button'
 import { ArrowRight } from 'lucide-react'
 
 interface CtaBlockProps {

package/src/components/blocks/marketing/feature-grid/FeatureGrid.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface Feature {
   title: string

package/src/components/blocks/marketing/hero-section/HeroSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
+import { cn } from '../../../../lib/utils'
+import { Button } from '../../../../components/ui/button'
+import { Badge } from '../../../../components/ui/badge'
 import { ArrowRight } from 'lucide-react'
 
 interface HeroSectionProps {

package/src/components/blocks/marketing/testimonial-card/TestimonialCard.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Card, CardContent } from '@/components/ui/card'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Card, CardContent } from '../../../../components/ui/card'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../../components/ui/avatar'
 import { Star } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface TestimonialCardProps {
   quote: string

package/src/components/blocks/media/call-controls/CallControlButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { cn } from '../../../../lib/utils'
+import { Button } from '../../../../components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../../components/ui/tooltip'
 
 interface CallControlButtonProps {
   tooltip?: string

package/src/components/blocks/media/call-controls/CallControls.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 export function CallControls({ className, children }: { className?: string; children?: React.ReactNode }) {
   return (

package/src/components/blocks/media/media-player/MediaPlayer.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 export function MediaPlayer({
   className,

package/src/components/blocks/media/media-player/MediaPlayerControls.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 export function MediaPlayerControls({
   className,

package/src/components/blocks/media/media-player/MediaPlayerScrubber.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Slider } from '@/components/ui/slider'
+import { Slider } from '../../../../components/ui/slider'
 
 interface MediaPlayerScrubberProps {
   defaultValue?: number[]

package/src/components/blocks/media/media-player/MediaPlayerVideo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type { HTMLAttributes } from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 import { Play } from 'lucide-react'
 
 interface MediaPlayerVideoProps {

package/src/components/blocks/navigation/app-sidebar/AppSidebar.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
-import { ScrollArea } from '@/components/ui/scroll-area'
+import { cn } from '../../../../lib/utils'
+import { ScrollArea } from '../../../../components/ui/scroll-area'
 
 interface AppSidebarProps {
   className?: string

package/src/components/blocks/navigation/app-sidebar/NavItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../../lib/utils'
 
 interface NavItemProps {
   href?: string