@reinvented/design 1.0.0 → 1.1.0

package/README.md

@@ -154,7 +154,7 @@ examples/           Full skeleton examples
 - **[Components](docs/components/index.md)** — Component usage guides
 - **[Patterns](docs/patterns/index.md)** — Reusable UI patterns
 - **[Layouts](docs/layouts/index.md)** — Page layout recipes
-- **[Design Guide](DESIGN_GUIDE.md)** — Tokens, typography, colors, spacing
+- **[AI Agent Guide](SKILL.md)** — Full design system skill guide for AI agents
 
 ## Contributing
 

package/SKILL.md

@@ -0,0 +1,214 @@
+# Reinvented Design System — AI Agent Guide
+
+You are building a UI using the Reinvented design system, which is a React + Radix UI + shadcn + Tailwind CSS system. Your output must be indistinguishable from something the shadcn team would build: clean, precise, professional, and intuitive in both light and dark mode.
+
+## Before You Write Any Code
+
+**Stop and plan.** Read this entire file first. Then follow the structured journey below to determine exactly what to build.
+
+---
+
+## Step 1: Understand the Constraints
+
+Read these foundation docs before anything else:
+
+| Doc | What it tells you |
+|-----|-------------------|
+| `skills/foundation/rules.md` | Non-negotiable constraints — read first |
+| `skills/foundation/design-principles.md` | The aesthetic philosophy — what "good" means |
+| `skills/foundation/design-tokens.md` | Exact color values, spacing scale, typography |
+| `skills/foundation/tailwind-usage.md` | How to use Tailwind classes with this system |
+
+> **Mockup mode?** If you're generating a standalone mockup (not production code), also read `skills/foundation/mockup-generation.md` for output format, dummy data, and placeholder components.
+
+## Step 2: Determine the Context
+
+From the user's prompt, determine:
+
+### 2a. Device Target
+What viewport is primary? Read the relevant doc:
+
+```
+Desktop (default if unspecified) → skills/devices/desktop.md
+Mobile                           → skills/devices/mobile.md
+```
+
+Desktop is the default. It covers laptops, large monitors, and tablets (which behave like small desktops). Only read `skills/devices/mobile.md` if the prompt explicitly targets phones or mobile-first.
+
+### 2b. Target Persona
+Who is the end user? Read the relevant doc:
+
+```
+General consumer / casual user → skills/personas/consumer-casual.md
+Power user / developer         → skills/personas/consumer-power-user.md
+Business operator / back-office → skills/personas/business-operator.md
+Creative / designer type       → skills/personas/creative-professional.md
+Enterprise admin / compliance  → skills/personas/enterprise-admin.md
+```
+
+If the prompt doesn't specify a persona, default to **consumer-casual** for B2C apps and **business-operator** for B2B apps.
+
+### 2c. App Category
+What type of application is this? Read the relevant doc:
+
+```
+Admin panel, SaaS dashboard    → skills/apps/saas-dashboard.md
+Online store, product catalog  → skills/apps/e-commerce.md
+Tasks, boards, sprints         → skills/apps/project-management.md
+Chat, conversations            → skills/apps/messaging.md
+Blog, CMS, publishing          → skills/apps/content-management.md
+Feed, profiles, social         → skills/apps/social-platform.md
+Charts, reports, data viz      → skills/apps/analytics.md
+Listings, buyers & sellers     → skills/apps/marketplace.md
+Appointments, calendar         → skills/apps/booking-scheduling.md
+Banking, budgets, transactions → skills/apps/finance.md
+Workouts, health tracking      → skills/apps/health-fitness.md
+Courses, learning              → skills/apps/education.md
+Contacts, deals, pipeline      → skills/apps/crm.md
+Personal site, portfolio       → skills/apps/portfolio-personal.md
+```
+
+If the prompt doesn't match any category, skip this step — the patterns and layouts docs will be sufficient.
+
+## Step 3: Choose a Layout
+
+Based on your analysis, select a page layout. Read the relevant doc:
+
+```
+Sidebar navigation + content area → skills/layouts/sidebar.md
+Top navigation + content area     → skills/layouts/topbar.md
+Stats + charts + tables           → skills/layouts/dashboard.md
+List on left, detail on right     → skills/layouts/list-detail.md
+Settings with section nav         → skills/layouts/settings-page.md
+Landing page / marketing          → skills/layouts/marketing.md
+Centered form or wizard           → skills/layouts/full-page-form.md
+```
+
+Also read `skills/layouts/responsive.md` if targeting multiple devices.
+
+## Step 4: Identify Patterns
+
+Which UI patterns does your view need? Read each relevant doc:
+
+```
+Table with search/filter/sort     → skills/patterns/data-tables.md
+Create/edit forms                 → skills/patterns/forms.md
+Navigation structure              → skills/patterns/navigation.md
+Card grids, list views            → skills/patterns/content-display.md
+Stats + KPI cards + overview      → skills/patterns/dashboards.md
+Empty state (no data yet)         → skills/patterns/empty-states.md
+Loading / skeleton states         → skills/patterns/loading-states.md
+Error handling UI                 → skills/patterns/error-states.md
+Login / signup / auth             → skills/patterns/auth.md
+First-run / setup wizard          → skills/patterns/onboarding.md
+Settings / preferences            → skills/patterns/settings.md
+Global search / command palette   → skills/patterns/search.md
+Alerts, notification center       → skills/patterns/notifications.md
+User profile / account            → skills/patterns/user-profiles.md
+```
+
+## Step 4.5: Check for Blocks
+
+Before assembling primitives from scratch, check if a composite **Block** already exists for your domain. If one exists, you MUST use it instead of rebuilding the pattern manually. Read the relevant doc:
+
+```
+Communication & Chat         → skills/blocks/communication.md
+Media & Realtime             → skills/blocks/media.md
+E-Commerce & Catalog         → skills/blocks/ecommerce.md
+Knowledge & Content          → skills/blocks/content.md
+Data Visualization           → skills/blocks/data-viz.md
+Data Management              → skills/blocks/data-management.md
+Identity & Auth              → skills/blocks/auth.md
+User Profiles                → skills/blocks/profiles.md
+Settings & Config            → skills/blocks/settings.md
+Onboarding & Walkthroughs    → skills/blocks/onboarding.md
+Feedback & Status            → skills/blocks/feedback.md
+Filtering & Search           → skills/blocks/search.md
+Scheduling & Calendaring     → skills/blocks/scheduling.md
+Navigation & Shells          → skills/blocks/navigation.md
+Marketing & Landing          → skills/blocks/marketing.md
+```
+
+## Component Cheat Sheet
+
+Use this mapping to select the right component for your intent. Once selected, proceed to Step 5 to read its documentation.
+
+| Need | Use Component |
+|------|---------------|
+| **Button/action** | `Button` with appropriate variant |
+| **Form inputs** | `Input`, `Select`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `Slider` |
+| **Toggle 2–5 choices** | `ToggleGroup` + `ToggleGroupItem` |
+| **Data display** | `Table`, `Card`, `Badge`, `Avatar` |
+| **Charts/Data viz** | `DonutChart`, `BarChart`, `LineChart`, `AreaChart` |
+| **Overlays** | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation) |
+| **Feedback** | `Alert`, `Progress`, `Skeleton`, `Toast` (via sonner plugin) |
+| **Layout/Structure** | `PageHeader`, `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible` |
+| **Empty states** | `Empty` |
+| **Menus** | `DropdownMenu`, `ContextMenu`, `Menubar` |
+| **Tooltips/info** | `Tooltip`, `HoverCard`, `Popover` |
+
+## Step 5: Look Up Components
+
+**CRITICAL RULE: DO NOT GUESS COMPONENT PROPS.** 
+Unlike generic HTML elements, Shadcn components have highly specific prop structures. 
+For each primitive component you plan to use, **you must read its doc file**:
+
+
+```
+components/button.md         — Button variants, sizes, icons, loading
+components/card.md           — Card, CardHeader, CardContent, etc.
+components/input.md          — Input, Textarea, Label
+components/badge.md          — Badge variants and usage
+components/avatar.md         — Avatar sizes and fallbacks
+components/dialog.md         — Dialog, AlertDialog
+components/select.md         — Select, Checkbox, Switch, RadioGroup, Slider
+components/dropdown-menu.md  — DropdownMenu, ContextMenu, Menubar
+components/table.md          — Table and all subcomponents
+components/tabs.md           — Tabs, Accordion, Collapsible
+components/navigation.md     — Breadcrumb, Pagination
+components/page-header.md    — PageHeader, PageHeaderTitle, PageHeaderActions
+components/feedback.md       — Alert, Tooltip, Popover, HoverCard, Progress, Toast
+components/overlay.md        — Sheet, ScrollArea
+components/form.md           — Form validation components
+components/utilities.md      — Separator, Skeleton, Toggle, ToggleGroup, Command, ComponentPlaceholder (Mockup Mode Only)
+components/chart.md          — DonutChart, BarChart, LineChart, AreaChart and data visualizations
+components/map.md            — InteractiveMap for rendering mapping bounds, locations, and vectors
+components/advanced-components.md  — Complex interactive tools (Accordion, Calendar, Carousel, Drawer, Resizable)
+components/extended-components.md  — Catch-all for additional UI elements not covered above
+```
+
+## Step 6: Apply Visual Polish
+
+Read the relevant visual docs for finishing touches:
+
+```
+visual/spacing-composition.md     — Page rhythm, spacing hierarchy
+visual/color-usage.md             — Semantic color application
+visual/typography-hierarchy.md    — Type scale in context
+visual/transitions-animations.md  — Motion and hover effects
+visual/dark-mode.md               — Dark mode considerations
+visual/polish-techniques.md       — Subtle effects that elevate quality
+```
+
+## Step 7: Write the Code
+
+Now — and only now — write the code. Your plan should be:
+
+1. **Declare your structure**: Top-level layout → sections → component composition
+2. **Apply spacing hierarchy**: Tight within groups, loose between sections
+3. **Handle all states**: Loading skeletons, empty states, error handling
+4. **Polish**: Hover effects, transitions, consistent icon usage
+
+---
+
+## Quality Bar
+
+Your output **passes** if a designer would look at it and say "that's clean shadcn." It **fails** if:
+
+- There are raw HTML elements where DS components exist
+- Spacing is inconsistent or arbitrary
+- Colors are hardcoded instead of using tokens
+- The layout feels cramped or excessively sparse
+- It wouldn't work in dark mode
+- Interactive elements lack hover/focus states
+- The visual hierarchy is flat (everything the same size/weight)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reinvented/design",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "main": "./src/index.ts",
   "exports": {
@@ -17,9 +17,10 @@
   "files": [
     "src/",
     "docs/",
+    "skills/",
+    "SKILL.md",
     "tailwind.config.js",
-    "tsconfig.json",
-    "DESIGN_GUIDE.md"
+    "tsconfig.json"
   ],
   "scripts": {
     "build": "tsc --noEmit",

package/skills/apps/analytics.md

@@ -0,0 +1,103 @@
+# App Type: Analytics
+
+Charts, reports, data visualization, and filtered data views.
+
+## Layout
+Use `layouts/sidebar.md` as the root wrapper with a prominent date range filter in the topbar header. Analytics apps require maximum horizontal space, so the sidebar should be collapsible if possible.
+
+## Key Screens
+
+1. **Overview Dashboard** — High-level metrics, 4 KPI cards, small sparkline charts.
+2. **Detailed Report** — Full-width interactive chart area + granular data table below.
+3. **Custom Report Builder** — Deep filter panel on the left/top + chart configuration.
+
+## Component Composition Example
+
+```tsx
+<!-- Analytics Dashboard Layout -->
+<div className="space-y-6">
+  <!-- Interactive Header -->
+  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+    <div>
+      <h1 className="text-2xl font-bold tracking-tight">Audience Overview</h1>
+      <p className="text-muted-foreground">Traffic and engagement metrics.</p>
+    </div>
+    <div className="flex items-center gap-2">
+      <!-- Filter Bar -->
+      <Select>
+        <SelectTrigger className="w-32">
+          <SelectValue placeholder="All Users" />
+        </SelectTrigger>
+      </Select>
+      <Button variant="outline" className="w-60 justify-start text-left font-normal">
+        <CalendarIcon className="mr-2 h-4 w-4" />
+        <span>Last 30 Days</span>
+      </Button>
+      <Button variant="outline" size="icon">
+        <Download className="w-4 h-4" />
+      </Button>
+    </div>
+  </div>
+
+  <!-- KPI Grid -->
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+    <Card v-for="metric in metrics" :key="metric.label">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{{ metric.label }}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-3xl font-bold">{{ metric.value }}</div>
+        <div className="flex items-center gap-1 mt-1" className={metric.trend > 0 ? 'text-success' : 'text-destructive'}>
+          <TrendingUp v-if="metric.trend > 0" className="w-4 h-4" />
+          <TrendingDown v-else className="w-4 h-4" />
+          <span className="text-xs font-medium">{{ Math.abs(metric.trend) }}% vs prior</span>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+
+  <!-- Primary Chart Area -->
+  <Card>
+    <CardHeader className="flex flex-row items-center justify-between">
+      <div>
+        <CardTitle>Traffic Sources</CardTitle>
+        <CardDescription>Daily active users by acquisition channel.</CardDescription>
+      </div>
+      <div className="flex items-center gap-2">
+        <!-- Chart Controls -->
+        <Button variant="ghost" size="sm" className="h-8">Daily</Button>
+        <Button variant="secondary" size="sm" className="h-8">Weekly</Button>
+        <Button variant="ghost" size="sm" className="h-8">Monthly</Button>
+      </div>
+    </CardHeader>
+    <CardContent>
+      <!-- In mockups, use ComponentPlaceholder here -->
+      <ComponentPlaceholder name="StackedBarChart" description="Stacked bar chart showing Daily Active Users by Channel (Organic, Direct, Social, Paid)" height="350px" /> <!-- (Mockup Mode Only) -->
+    </CardContent>
+  </Card>
+
+  <!-- Data Table Section -->
+  <Card>
+    <CardHeader>
+      <CardTitle>Top Referrers</CardTitle>
+    </CardHeader>
+    <CardContent className="p-0">
+      <!-- Insert Table component here -->
+    </CardContent>
+  </Card>
+</div>
+```
+
+## Anti-Patterns (DO NOT DO)
+
+- ❌ **Do not bury the date selector**: It must be visible at all times on the top right of the dashboard view.
+- ❌ **Do not use pie charts for more than 5 categories**: If there are many segments, use a horizontal bar chart or a data table.
+- ❌ **Do not use heavy colors for charts**: Maintain quiet confidence. Charts should use `primary` and `secondary` token variants, not arbitrary hex codes.
+- ❌ **Do not show naked numbers**: All stats must have a context (e.g., "+12.5% vs last month" or "Target: 50k").
+
+## Design Notes
+
+- **Charts**: In mockups, use `ComponentPlaceholder` (Mockup Mode Only) with deeply descriptive text. In production, use a real chart library and wrap it in a `<Card>` with a descriptive `CardTitle`.
+- **Comparison**: Show period-over-period changes in stat cards ("+12.5% vs last month").
+- **Export**: Always include a "Download" or "Export" `<Button variant="outline">` near the primary data view.
+- **Empty States**: If a metric has no data for a period, show an empty state inside the card using `text-muted-foreground` and a simple icon, not a broken chart.

package/skills/apps/booking-scheduling.md

@@ -0,0 +1,97 @@
+# App Type: Booking & Scheduling
+
+Calendars, time slot selection, appointment management, and confirmations. 
+
+## Layout
+- **Customer Side**: Use `layouts/topbar.md` or `layouts/full-page-form.md`. Keep distractions to a minimum so they convert (book).
+- **Business/Admin Side**: Use `layouts/sidebar.md` to navigate between Calendar, Staff, Services, and Settings.
+
+## Key Screens
+1. **Calendar View** — Month/week grid showing staff availability and scheduled events.
+2. **Time Slot Picker** — Date selection + interactive grid of available time slots.
+3. **Booking Form** — Information gathering (Name, Email, Service Notes).
+4. **Booking Confirmation** — Clean card summarizing the booked details with an "Add to Calendar" CTA.
+
+## Component Composition Example
+
+```tsx
+<!-- Interactive Booking Flow Layout -->
+<div className="max-w-4xl mx-auto py-12 px-4">
+  <div className="mb-8 text-center space-y-2">
+    <h1 className="text-3xl font-bold tracking-tight">Book an Appointment</h1>
+    <p className="text-muted-foreground text-lg">Select a date and time that works for you.</p>
+  </div>
+
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
+    <!-- Left: Service Details & Date Picker Placeholder -->
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <div className="flex justify-between items-start">
+            <div className="space-y-1">
+              <CardTitle>Initial Consultation</CardTitle>
+              <CardDescription>Video Call</CardDescription>
+            </div>
+            <Badge variant="secondary">30 min</Badge>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            A quick introductory call to discuss your needs and how we can help before committing to a full project.
+          </p>
+        </CardContent>
+      </Card>
+
+      <!-- Calendar Placeholder (Actual DS doesn't have a complex calendar component) -->
+      <Card>
+        <CardHeader>
+          <CardTitle>Select Date</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <!-- In mockups, use ComponentPlaceholder here -->
+          <ComponentPlaceholder name="Calendar" description="Monthly Date Picker" height="300px" /> <!-- (Mockup Mode Only) -->
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Right: Time Slots Grid -->
+    <Card>
+      <CardHeader>
+        <CardTitle>Available Times</CardTitle>
+        <CardDescription>October 24, 2023</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 gap-3">
+          <Button 
+            v-for="time in ['09:00 AM', '09:30 AM', '10:00 AM', '11:30 AM', '01:00 PM', '02:30 PM']" 
+            :key="time"
+            variant="outline" 
+            className="w-full justify-center hover:bg-primary hover:text-primary-foreground hover:border-primary transition-colors text-sm"
+          >
+            {{ time }}
+          </Button>
+          
+          <!-- Disabled State Example -->
+          <Button variant="outline" className="w-full justify-center text-muted-foreground opacity-50 cursor-not-allowed" disabled>
+            03:00 PM
+          </Button>
+        </div>
+      </CardContent>
+      <CardFooter className="pt-6 border-t mt-6">
+        <Button className="w-full" size="lg" disabled>Continue</Button>
+      </CardFooter>
+    </Card>
+  </div>
+</div>
+```
+
+## Anti-Patterns (DO NOT DO)
+
+- ❌ **Do not build complex raw HTML `<table>` elements for responsive calendars**: They will break on mobile. Always use `ComponentPlaceholder` (Mockup Mode Only) for the monthly view calendar grid.
+- ❌ **Do not use dropdowns (`<Select>`) for time slots**: Dropdowns hide availability. Use a visible grid of `<Button>` elements so the user sees all options at a glance (as shown in the example above).
+- ❌ **Do not make the user guess the duration**: Always include a `Badge` indicating the duration (e.g., `variant="secondary"`, "30 min").
+- ❌ **Do not overload the booking screen**: Do not include the payment form, personal details form, and time-picker on the same view. Use progressive disclosure.
+
+## Design Notes
+- **Selected State**: When a time slot is selected, shift the button to `variant="default"`.
+- **Time Zones**: If building a remote-service booking UI, ensure a time zone selector (`<Select>`) is placed right above the time slots grid.

package/skills/apps/content-management.md

@@ -0,0 +1,52 @@
+# App Type: Content Management
+
+Blog editors, CMS dashboards, media libraries, and publishing workflows.
+
+## Layout
+Use `layouts/sidebar.md` with content types in nav (Posts, Pages, Media, Categories).
+
+## Key Screens
+1. **Content list** — Table with title, status (Draft/Published/Scheduled), author, date, actions
+2. **Content editor** — Full-width editor area with toolbar, side panel for metadata
+3. **Media library** — Card grid of thumbnails with file info
+
+## Content List
+Use `patterns/data-tables.md` with status badges:
+- Published → `Badge variant="default"`
+- Draft → `Badge variant="secondary"`
+- Scheduled → `Badge variant="outline"`
+
+## Editor Layout
+```tsx
+<div className="flex h-full">
+  <div className="flex-1 max-w-3xl mx-auto px-6 py-8">
+    <Input className="text-2xl font-bold border-0 px-0 focus-visible:ring-0 placeholder:text-muted-foreground"
+           placeholder="Post title..." defaultValue="title" />
+    <!-- In mockups: ComponentPlaceholder. In production: use a real editor -->
+    <ComponentPlaceholder name="RichTextEditor" description="Full WYSIWYG editor with formatting toolbar" height="500px" /> <!-- (Mockup Mode Only) -->
+  </div>
+  <aside className="w-72 border-l p-4 space-y-4 shrink-0">
+    <div className="space-y-2">
+      <Label>Status</Label>
+      <Select defaultValue="status">
+        <SelectTrigger><SelectValue /></SelectTrigger>
+        <SelectContent>
+          <SelectItem value="draft">Draft</SelectItem>
+          <SelectItem value="published">Published</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+    <div className="space-y-2">
+      <Label>Category</Label>
+      <Select defaultValue="category">
+        <SelectTrigger><SelectValue placeholder="Select" /></SelectTrigger>
+        <SelectContent>
+          <SelectItem value="tech">Technology</SelectItem>
+          <SelectItem value="design">Design</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+    <Button className="w-full">Publish</Button>
+  </aside>
+</div>
+```

package/skills/apps/crm.md

@@ -0,0 +1,80 @@
+# App Type: CRM
+
+Contact management, deal pipelines, and sales activity tracking.
+
+## Layout
+Use `layouts/sidebar.md`. Nav items: Dashboard, Contacts, Deals, Activities, Reports.
+
+## Key Screens
+
+### 1. Pipeline View (Kanban)
+
+```tsx
+<div className="flex gap-4 overflow-x-auto pb-4">
+  <div v-for="stage in stages" :key="stage.name" className="w-72 shrink-0 space-y-3">
+    <div className="flex items-center justify-between">
+      <h3 className="text-sm font-semibold">{{ stage.name }}</h3>
+      <Badge variant="secondary">{{ stage.deals.length }}</Badge>
+    </div>
+    <div className="space-y-2">
+      <Card v-for="deal in stage.deals" :key="deal.id"
+            className="cursor-pointer hover:bg-accent/50 transition-colors">
+        <CardContent className="p-3 space-y-2">
+          <p className="text-sm font-medium">{{ deal.company }}</p>
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-bold">${{ deal.value.toLocaleString() }}</span>
+            <Badge variant="outline" className="text-xs">{{ deal.probability }}%</Badge>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-5 h-5 rounded-full bg-muted shrink-0" />
+            <span className="text-xs text-muted-foreground">{{ deal.owner }}</span>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</div>
+```
+
+Pipeline stages: Lead → Qualified → Proposal → Negotiation → Closed Won / Closed Lost.
+
+### 2. Contact List
+Standard data table (see `patterns/data-tables.md`) with columns:
+- Name + company (avatar + name pattern)
+- Email
+- Phone
+- Last contacted (relative time, `text-muted-foreground`)
+- Deal value (right-aligned, `font-bold`)
+- Actions (three-dot menu)
+
+### 3. Contact Detail
+- Profile header: Avatar + name + company + role
+- Stats row: Total deal value, Open deals count, Last contact date
+- Tabbed content: Activity timeline, Associated deals, Notes, Files
+
+### 4. Activity Timeline
+
+```tsx
+<div className="space-y-4">
+  <div v-for="event in events" :key="event.id" className="flex gap-3">
+    <div className="flex flex-col items-center">
+      <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0">
+        <component :is="event.icon" className="w-4 h-4 text-muted-foreground" />
+      </div>
+      <div className="w-px flex-1 bg-border" />
+    </div>
+    <div className="pb-4">
+      <p className="text-sm"><span className="font-medium">{{ event.user }}</span> {{ event.action }}</p>
+      <p className="text-xs text-muted-foreground">{{ event.time }}</p>
+    </div>
+  </div>
+</div>
+```
+
+Use icons per type: `Phone` for calls, `Mail` for emails, `Calendar` for meetings, `FileText` for notes.
+
+## Design Notes
+- **Deal values**: Right-aligned in tables, `font-bold`, formatted as currency
+- **Pipeline card colors**: Use `border-l-4` with different border colors per stage if desired (use token-based: `border-primary`, `border-warning`, `border-success`)
+- **Quick actions**: Contact cards should have icon buttons for Call (`Phone`), Email (`Mail`), Schedule (`Calendar`)
+- **Search**: Global search should cover contacts, deals, and activities