@otfdashkit/ui 0.1.0

package/src/blocks/WorkspaceMembers/WorkspaceMembers.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import { Search, X } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Input } from '../primitives/input'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { Badge } from '../primitives/badge'
+import { Button } from '../primitives/button'
+
+const MEMBERS = [
+  { id: '1', name: 'Jane Doe', email: 'jane@acme.com', role: 'Owner', initials: 'JD' },
+  { id: '2', name: 'Bob Smith', email: 'bob@acme.com', role: 'Admin', initials: 'BS' },
+  { id: '3', name: 'Alice Chen', email: 'alice@acme.com', role: 'Member', initials: 'AC' },
+  { id: '4', name: 'Tom Ray', email: 'tom@acme.com', role: 'Member', initials: 'TR' },
+  { id: '5', name: 'Sara Kim', email: 'sara@acme.com', role: 'Viewer', initials: 'SK' },
+]
+
+const roleVariant = (role: string): 'default' | 'secondary' | 'outline' =>
+  role === 'Owner' ? 'default' : role === 'Admin' ? 'secondary' : 'outline'
+
+export interface WorkspaceMembersProps { className?: string }
+
+export function WorkspaceMembers({ className }: WorkspaceMembersProps) {
+  const [query, setQuery] = useState('')
+  const [members, setMembers] = useState(MEMBERS)
+  const filtered = members.filter(m =>
+    m.name.toLowerCase().includes(query.toLowerCase()) ||
+    m.email.toLowerCase().includes(query.toLowerCase())
+  )
+
+  return (
+    <div className={cn('rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))]', className)}>
+      <div className="flex items-center justify-between p-4 border-b border-[hsl(var(--border))]">
+        <div>
+          <h2 className="text-sm font-semibold">Members</h2>
+          <p className="text-xs text-[hsl(var(--muted-foreground))]">{members.length} members</p>
+        </div>
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" />
+          <Input className="h-8 pl-8 text-xs w-48" placeholder="Search members..." value={query} onChange={e => setQuery(e.target.value)} />
+        </div>
+      </div>
+      <div className="divide-y divide-[hsl(var(--border))]">
+        {filtered.map(m => (
+          <div key={m.id} className="flex items-center gap-3 px-4 py-3">
+            <Avatar className="h-8 w-8"><AvatarFallback className="text-xs">{m.initials}</AvatarFallback></Avatar>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">{m.name}</p>
+              <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">{m.email}</p>
+            </div>
+            <Badge variant={roleVariant(m.role)} className="text-[10px] px-1.5 py-0.5 shrink-0">{m.role}</Badge>
+            {m.role !== 'Owner' && (
+              <Button size="icon" variant="ghost" className="h-7 w-7 shrink-0" onClick={() => setMembers(ms => ms.filter(x => x.id !== m.id))}>
+                <X className="h-3.5 w-3.5" />
+              </Button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/blocks/WorkspaceMembers/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './WorkspaceMembers'

package/src/blocks/activity-heatmap.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+import { Card, CardContent } from '../primitives/card'
+import { Heatmap, HeatmapDay } from '../charts/heatmap'
+import { Stat } from '../components/stat'
+import { ToggleGroup, ToggleGroupItem } from '../primitives/toggle-group'
+
+interface FilterOption {
+  value: string
+  label: string
+}
+
+interface SummaryStat {
+  label: string
+  value: string | number
+}
+
+export interface ActivityHeatmapProps {
+  /** The big number above the heatmap (e.g. total events) */
+  total: number | string
+  /** Caption above the total — e.g. "Activity" */
+  caption?: string
+  /** Daily values for the heatmap */
+  data: HeatmapDay[]
+  /** Date the heatmap should end on. Defaults to today. */
+  endDate?: Date
+  /** Number of week columns. Default 53. */
+  weeks?: number
+  /** Cell size in px. Default 11. */
+  cellSize?: number
+  /** Gap between cells in px. Default 3. */
+  gap?: number
+  /** Optional 5-step color scale. Defaults to primary opacity ramp. */
+  colorScale?: string[]
+  /** Optional filter — renders a ToggleGroup at the top right */
+  filters?: FilterOption[]
+  filterValue?: string
+  onFilterChange?: (value: string) => void
+  /** 4 summary stats shown below the heatmap (e.g. Most Active Month / Day / Longest / Current Streak) */
+  stats?: SummaryStat[]
+  /** Tooltip formatter passed to Heatmap */
+  formatTooltip?: (day: HeatmapDay) => string
+  /** Center the heatmap horizontally inside its scroll container. Default true. */
+  centered?: boolean
+  className?: string
+}
+
+const DEFAULT_SCALE = [
+  'hsl(var(--muted))',
+  'hsl(var(--primary) / 0.25)',
+  'hsl(var(--primary) / 0.5)',
+  'hsl(var(--primary) / 0.75)',
+  'hsl(var(--primary))',
+]
+
+export function ActivityHeatmap({
+  total,
+  caption = 'Activity',
+  data,
+  endDate,
+  weeks = 53,
+  cellSize = 11,
+  gap = 3,
+  colorScale = DEFAULT_SCALE,
+  filters,
+  filterValue,
+  onFilterChange,
+  stats,
+  formatTooltip,
+  centered = true,
+  className,
+}: ActivityHeatmapProps) {
+  const totalLabel = typeof total === 'number' ? total.toLocaleString() : total
+
+  return (
+    <Card data-slot="activity-heatmap" className={className}>
+      <CardContent className="p-5">
+        <div className="flex items-baseline justify-between mb-4 flex-wrap gap-3">
+          <div>
+            <p className="text-xs uppercase tracking-wider text-[hsl(var(--muted-foreground))]">{caption}</p>
+            <p className="text-3xl font-bold tabular-nums mt-0.5 text-[hsl(var(--foreground))]">{totalLabel}</p>
+          </div>
+          {filters && filters.length > 0 && (
+            <ToggleGroup
+              type="single"
+              value={filterValue}
+              onValueChange={(v) => v && onFilterChange?.(v)}
+              variant="outline"
+              size="sm"
+            >
+              {filters.map((f) => (
+                <ToggleGroupItem key={f.value} value={f.value}>{f.label}</ToggleGroupItem>
+              ))}
+            </ToggleGroup>
+          )}
+        </div>
+
+        <div className={cn('overflow-x-auto pb-2', centered && 'flex justify-center')}>
+          <Heatmap
+            data={data}
+            endDate={endDate}
+            weeks={weeks}
+            cellSize={cellSize}
+            gap={gap}
+            colorScale={colorScale}
+            formatTooltip={formatTooltip}
+          />
+        </div>
+
+        {stats && stats.length > 0 && (
+          <div
+            className={cn('grid gap-4 mt-5 pt-5 border-t border-[hsl(var(--border))]', `grid-cols-${Math.min(stats.length, 4)}`)}
+          >
+            {stats.map((s) => (
+              <Stat key={s.label} label={s.label} value={s.value} />
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/blocks/bar-list.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export interface BarListItem {
+  label: string
+  value: number
+  color?: string
+  href?: string
+  icon?: React.ReactNode
+  meta?: React.ReactNode
+}
+
+export interface BarListProps {
+  data: BarListItem[]
+  valueFormatter?: (v: number) => string
+  sort?: boolean
+  max?: number
+  className?: string
+  emptyMessage?: string
+}
+
+const DEFAULT_COLOR = 'hsl(var(--primary) / 0.4)'
+
+export function BarList({
+  data,
+  valueFormatter = (v) => v.toLocaleString(),
+  sort = true,
+  max,
+  className,
+  emptyMessage = 'No data',
+}: BarListProps) {
+  const items = sort ? [...data].sort((a, b) => b.value - a.value) : data
+  const peak = max ?? Math.max(1, ...items.map((i) => i.value))
+
+  if (items.length === 0) {
+    return (
+      <div className={cn('text-sm text-[hsl(var(--muted-foreground))] py-6 text-center', className)}>
+        {emptyMessage}
+      </div>
+    )
+  }
+
+  return (
+    <div data-slot="bar-list" className={cn('flex flex-col gap-2', className)}>
+      {items.map((item, i) => {
+        const pct = (item.value / peak) * 100
+        const Wrapper = item.href ? 'a' : 'div'
+        return (
+          <Wrapper
+            key={`${item.label}-${i}`}
+            {...(item.href ? { href: item.href } : {})}
+            className={cn(
+              'group relative flex items-center justify-between gap-3 rounded-md px-2.5 py-1.5 text-sm overflow-hidden',
+              item.href && 'hover:bg-[hsl(var(--accent)/0.4)] transition-colors',
+            )}
+          >
+            <span
+              aria-hidden
+              className="absolute inset-y-0 left-0 rounded-md transition-[width] duration-300"
+              style={{ width: `${pct}%`, background: item.color ?? DEFAULT_COLOR }}
+            />
+            <span className="relative z-10 flex items-center gap-2 min-w-0 flex-1">
+              {item.icon && <span className="shrink-0">{item.icon}</span>}
+              <span className="truncate text-[hsl(var(--foreground))]">{item.label}</span>
+            </span>
+            <span className="relative z-10 flex items-center gap-3 shrink-0 tabular-nums text-[hsl(var(--foreground))]">
+              {item.meta}
+              <span className="font-medium">{valueFormatter(item.value)}</span>
+            </span>
+          </Wrapper>
+        )
+      })}
+    </div>
+  )
+}

package/src/blocks/chat-detail.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { Send } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { Input } from '../primitives/input'
+import { Button } from '../primitives/button'
+
+interface Message { id: string; author: string; initials: string; text: string; time: string; self?: boolean }
+
+const INITIAL_MESSAGES: Message[] = [
+  { id: '1', author: 'Alice Chen', initials: 'AC', text: 'Hey team, just pushed the new design files to Figma.', time: '9:41 AM' },
+  { id: '2', author: 'Bob Smith', initials: 'BS', text: "Awesome! I'll take a look and share feedback by EOD.", time: '9:43 AM' },
+  { id: '3', author: 'You', initials: 'JD', text: 'Looks great, the new color palette really pops!', time: '9:45 AM', self: true },
+  { id: '4', author: 'Alice Chen', initials: 'AC', text: "Thanks! Let's sync tomorrow to go through the comments.", time: '9:47 AM' },
+]
+
+function ChatBubble({ msg }: { msg: Message }) {
+  return (
+    <div className={cn('flex gap-2.5', msg.self && 'flex-row-reverse')}>
+      <Avatar className="h-7 w-7 shrink-0 mt-0.5">
+        <AvatarFallback className="text-xs">{msg.initials}</AvatarFallback>
+      </Avatar>
+      <div className={cn('max-w-[70%]', msg.self && 'items-end flex flex-col')}>
+        <div className="flex items-baseline gap-2 mb-0.5">
+          <span className="text-xs font-medium">{msg.author}</span>
+          <span className="text-[10px] text-[hsl(var(--muted-foreground))]">{msg.time}</span>
+        </div>
+        <div className={cn(
+          'rounded-md px-3 py-2 text-sm',
+          msg.self
+            ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
+            : 'bg-[hsl(var(--muted))]'
+        )}>
+          {msg.text}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export interface ChatDetailProps { className?: string }
+
+export function ChatDetail({ className }: ChatDetailProps) {
+  const [messages, setMessages] = useState(INITIAL_MESSAGES)
+  const [input, setInput] = useState('')
+
+  const send = () => {
+    if (!input.trim()) return
+    const now = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+    setMessages(m => [...m, { id: `${Date.now()}`, author: 'You', initials: 'JD', text: input.trim(), time: now, self: true }])
+    setInput('')
+  }
+
+  return (
+    <div className={cn('flex h-[480px] flex-col overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))]', className)}>
+      <header className="flex items-center gap-3 border-b border-[hsl(var(--border))] px-4 py-3">
+        <Avatar className="h-8 w-8"><AvatarFallback className="text-xs">AC</AvatarFallback></Avatar>
+        <div>
+          <p className="text-sm font-semibold">Design Team</p>
+          <p className="text-xs text-[hsl(var(--muted-foreground))]">4 members</p>
+        </div>
+      </header>
+      <div className="flex-1 overflow-auto p-4 space-y-4">
+        {messages.map(m => <ChatBubble key={m.id} msg={m} />)}
+      </div>
+      <div className="flex items-center gap-2 border-t border-[hsl(var(--border))] p-3">
+        <Input className="flex-1 h-9 text-sm" placeholder="Type a message..." value={input}
+          onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()} />
+        <Button size="icon" className="h-9 w-9 shrink-0" onClick={send}><Send className="h-4 w-4" /></Button>
+      </div>
+    </div>
+  )
+}

package/src/blocks/feedback-modal.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import { cn } from '../utils/cn'
+import { Button } from '../primitives/button'
+import { Textarea } from '../primitives/textarea'
+
+const REACTIONS = ['😊', '😐', '😕', '😡', '🤩']
+
+export interface FeedbackModalProps {
+  onSubmit?: (data: { reaction: string; text: string }) => void
+  className?: string
+}
+
+export function FeedbackModal({ onSubmit, className }: FeedbackModalProps) {
+  const [reaction, setReaction] = useState('')
+  const [text, setText] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = () => {
+    onSubmit?.({ reaction, text })
+    setSubmitted(true)
+  }
+
+  if (submitted) {
+    return (
+      <div className={cn('flex flex-col items-center gap-3 py-8 px-6 text-center', className)}>
+        <span className="text-4xl">🎉</span>
+        <p className="font-semibold">Thanks for your feedback!</p>
+        <p className="text-sm text-[hsl(var(--muted-foreground))]">We'll use it to improve your experience.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-4 p-6', className)}>
+      <div>
+        <h2 className="text-base font-semibold">Send Feedback</h2>
+        <p className="text-sm text-[hsl(var(--muted-foreground))] mt-0.5">How are you feeling about the product?</p>
+      </div>
+      <div className="flex gap-2">
+        {REACTIONS.map(r => (
+          <button
+            key={r}
+            onClick={() => setReaction(r)}
+            className={cn(
+              'flex h-10 w-10 items-center justify-center rounded-md border text-xl transition-colors',
+              reaction === r
+                ? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]'
+                : 'border-[hsl(var(--border))] hover:bg-[hsl(var(--accent))]'
+            )}
+          >
+            {r}
+          </button>
+        ))}
+      </div>
+      <Textarea
+        placeholder="Tell us more (optional)..."
+        value={text}
+        onChange={e => setText(e.target.value)}
+        className="resize-none"
+        rows={4}
+      />
+      <div className="flex justify-end gap-2">
+        <Button variant="outline" size="sm">Cancel</Button>
+        <Button size="sm" onClick={handleSubmit} disabled={!reaction}>Submit</Button>
+      </div>
+    </div>
+  )
+}

package/src/blocks/file-cards.tsx

@@ -0,0 +1,56 @@
+// @ts-nocheck
+import React from 'react'
+import { FileText, Image, FileCode, Film, Archive, File } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Card, CardContent } from '../primitives/card'
+
+interface FileItem { id: string; name: string; type: string; size: string; modified: string }
+
+const FILES: FileItem[] = [
+  { id: '1', name: 'design-system.fig', type: 'figma', size: '14.2 MB', modified: 'Mar 12' },
+  { id: '2', name: 'hero-banner.png', type: 'image', size: '3.8 MB', modified: 'Mar 11' },
+  { id: '3', name: 'api-spec.yaml', type: 'code', size: '42 KB', modified: 'Mar 10' },
+  { id: '4', name: 'demo-video.mp4', type: 'video', size: '128 MB', modified: 'Mar 9' },
+  { id: '5', name: 'assets.zip', type: 'archive', size: '56 MB', modified: 'Mar 8' },
+  { id: '6', name: 'meeting-notes.pdf', type: 'pdf', size: '1.1 MB', modified: 'Mar 7' },
+]
+
+const TYPE_ICON: Record<string, React.ElementType> = {
+  figma: FileText, image: Image, code: FileCode, video: Film, archive: Archive, pdf: FileText,
+}
+
+const TYPE_COLOR: Record<string, string> = {
+  figma: 'text-purple-500', image: 'text-green-500', code: 'text-blue-500',
+  video: 'text-red-500', archive: 'text-yellow-500', pdf: 'text-orange-500',
+}
+
+function FileCard({ file }: { file: FileItem }) {
+  const Icon = TYPE_ICON[file.type] ?? File
+  return (
+    <Card className="cursor-pointer hover:shadow-md transition-shadow">
+      <CardContent className="p-4">
+        <div className={cn('flex h-10 w-10 items-center justify-center rounded-md bg-[hsl(var(--muted))] mb-3', TYPE_COLOR[file.type])}>
+          <Icon className="h-5 w-5" />
+        </div>
+        <p className="text-sm font-medium truncate">{file.name}</p>
+        <div className="flex items-center justify-between mt-1">
+          <span className="text-xs text-[hsl(var(--muted-foreground))]">{file.size}</span>
+          <span className="text-xs text-[hsl(var(--muted-foreground))]">{file.modified}</span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export interface FileCardsProps {
+  files?: FileItem[]
+  className?: string
+}
+
+export function FileCards({ files = FILES, className }: FileCardsProps) {
+  return (
+    <div className={cn('grid gap-3', className)} style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%,160px),1fr))' }}>
+      {files.map(f => <FileCard key={f.id} file={f} />)}
+    </div>
+  )
+}

package/src/blocks/files-list.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React from 'react'
+import { FileText, Image, FileCode, Film, Archive, MoreHorizontal, Download, Trash2 } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Button } from '../primitives/button'
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from '../primitives/dropdown-menu'
+
+interface FileItem { id: string; name: string; type: string; size: string; modified: string }
+
+const FILES: FileItem[] = [
+  { id: '1', name: 'design-system.fig', type: 'Figma', size: '14.2 MB', modified: 'Mar 12, 2024' },
+  { id: '2', name: 'hero-banner.png', type: 'PNG Image', size: '3.8 MB', modified: 'Mar 11, 2024' },
+  { id: '3', name: 'api-spec.yaml', type: 'YAML', size: '42 KB', modified: 'Mar 10, 2024' },
+  { id: '4', name: 'demo-video.mp4', type: 'MP4 Video', size: '128 MB', modified: 'Mar 9, 2024' },
+  { id: '5', name: 'assets.zip', type: 'ZIP Archive', size: '56 MB', modified: 'Mar 8, 2024' },
+]
+
+const TYPE_ICON: Record<string, React.ElementType> = {
+  Figma: FileText, 'PNG Image': Image, YAML: FileCode, 'MP4 Video': Film, 'ZIP Archive': Archive,
+}
+
+function FileRow({ file, onDelete }: { file: FileItem; onDelete: () => void }) {
+  const Icon = TYPE_ICON[file.type] ?? FileText
+  return (
+    <tr className="border-b border-[hsl(var(--border))] last:border-0 hover:bg-[hsl(var(--accent)/0.5)] transition-colors">
+      <td className="px-4 py-3">
+        <div className="flex items-center gap-2.5">
+          <Icon className="h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]" />
+          <span className="text-sm font-medium">{file.name}</span>
+        </div>
+      </td>
+      <td className="px-4 py-3 text-sm text-[hsl(var(--muted-foreground))]">{file.type}</td>
+      <td className="px-4 py-3 text-sm text-[hsl(var(--muted-foreground))]">{file.size}</td>
+      <td className="px-4 py-3 text-sm text-[hsl(var(--muted-foreground))]">{file.modified}</td>
+      <td className="px-4 py-3 text-right">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="icon" variant="ghost" className="h-7 w-7"><MoreHorizontal className="h-4 w-4" /></Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem><Download className="h-4 w-4" />Download</DropdownMenuItem>
+            <DropdownMenuItem onClick={onDelete} className="text-[hsl(var(--destructive))]">
+              <Trash2 className="h-4 w-4" />Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </td>
+    </tr>
+  )
+}
+
+export interface FilesListProps { className?: string }
+
+export function FilesList({ className }: FilesListProps) {
+  const [files, setFiles] = React.useState(FILES)
+  return (
+    <div className={cn('rounded-md border border-[hsl(var(--border))] overflow-hidden', className)}>
+      <table className="w-full">
+        <thead className="bg-[hsl(var(--muted)/0.5)]">
+          <tr>{['Name', 'Type', 'Size', 'Modified', ''].map(h => (
+            <th key={h} className="px-4 py-2.5 text-left text-xs font-medium text-[hsl(var(--muted-foreground))]">{h}</th>
+          ))}</tr>
+        </thead>
+        <tbody>
+          {files.map(f => <FileRow key={f.id} file={f} onDelete={() => setFiles(fs => fs.filter(x => x.id !== f.id))} />)}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/src/blocks/integration-card.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { cn } from '../utils/cn'
+import { Badge } from '../primitives/badge'
+import { Button } from '../primitives/button'
+
+export interface IntegrationCardProps {
+  icon?: React.ReactNode
+  name?: string
+  description?: string
+  connected?: boolean
+  className?: string
+}
+
+export function IntegrationCard({
+  icon,
+  name = 'Slack',
+  description = 'Send notifications and updates to your Slack workspace.',
+  connected = false,
+  className,
+}: IntegrationCardProps) {
+  const [isConnected, setIsConnected] = useState(connected)
+
+  return (
+    <div className={cn('flex items-center gap-4 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4', className)}>
+      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]">
+        {icon ?? <span className="text-base font-bold">{name[0]}</span>}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-semibold">{name}</p>
+          <Badge
+            variant={isConnected ? 'default' : 'outline'}
+            className="text-[10px] px-1.5 py-0.5 shrink-0"
+          >
+            {isConnected ? 'Connected' : 'Not connected'}
+          </Badge>
+        </div>
+        <p className="text-xs text-[hsl(var(--muted-foreground))] mt-0.5 truncate">{description}</p>
+      </div>
+      <Button
+        size="sm"
+        variant={isConnected ? 'outline' : 'default'}
+        className="shrink-0"
+        onClick={() => setIsConnected(v => !v)}
+      >
+        {isConnected ? 'Disconnect' : 'Connect'}
+      </Button>
+    </div>
+  )
+}

package/src/blocks/invite-modal.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Input } from '../primitives/input'
+import { Button } from '../primitives/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { Badge } from '../primitives/badge'
+
+const PENDING = [
+  { email: 'alex@startup.io', role: 'Member' },
+  { email: 'sam@startup.io', role: 'Viewer' },
+]
+
+export interface InviteModalProps { className?: string }
+
+export function InviteModal({ className }: InviteModalProps) {
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState('Member')
+  const [pending, setPending] = useState(PENDING)
+
+  const invite = () => {
+    if (!email.trim()) return
+    setPending(p => [...p, { email: email.trim(), role }])
+    setEmail('')
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-4 p-6', className)}>
+      <div>
+        <h2 className="text-base font-semibold">Invite People</h2>
+        <p className="text-sm text-[hsl(var(--muted-foreground))] mt-0.5">Invite team members to collaborate.</p>
+      </div>
+      <div className="flex gap-2">
+        <Input
+          className="flex-1 h-9 text-sm"
+          placeholder="colleague@company.com"
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && invite()}
+        />
+        <Select value={role} onValueChange={setRole}>
+          <SelectTrigger className="h-9 w-28 text-sm"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            {['Admin', 'Member', 'Viewer'].map(r => <SelectItem key={r} value={r}>{r}</SelectItem>)}
+          </SelectContent>
+        </Select>
+        <Button size="sm" className="h-9" onClick={invite}>Send</Button>
+      </div>
+      {pending.length > 0 && (
+        <div className="space-y-1">
+          <p className="text-xs font-medium text-[hsl(var(--muted-foreground))]">Pending invites</p>
+          <div className="divide-y divide-[hsl(var(--border))] rounded-md border border-[hsl(var(--border))]">
+            {pending.map((p, i) => (
+              <div key={i} className="flex items-center gap-2 px-3 py-2">
+                <Avatar className="h-6 w-6"><AvatarFallback className="text-[10px]">{p.email[0].toUpperCase()}</AvatarFallback></Avatar>
+                <span className="flex-1 text-sm truncate">{p.email}</span>
+                <Badge variant="outline" className="text-[10px] px-1.5 py-0.5 shrink-0">{p.role}</Badge>
+                <button onClick={() => setPending(ps => ps.filter((_, j) => j !== i))}>
+                  <X className="h-3.5 w-3.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]" />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}