@otfdashkit/ui 0.1.0

package/src/blocks/InviteModal/InviteModal.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { InviteModal } from './InviteModal'
+
+// TODO: add all variants
+const meta: Meta<typeof InviteModal> = {
+  title: 'Blocks/InviteModal',
+  component: InviteModal,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof InviteModal>
+
+export const Default: Story = {}

package/src/blocks/InviteModal/InviteModal.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { InviteModal } from './InviteModal'
+
+// TODO: add full a11y + variant tests
+describe('InviteModal', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<InviteModal />)).not.toThrow()
+  })
+})

package/src/blocks/InviteModal/InviteModal.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>
+  )
+}

package/src/blocks/InviteModal/index.ts

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

package/src/blocks/ManageTagsModal/ManageTagsModal.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ManageTagsModal } from './ManageTagsModal'
+
+// TODO: add all variants
+const meta: Meta<typeof ManageTagsModal> = {
+  title: 'Blocks/ManageTagsModal',
+  component: ManageTagsModal,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof ManageTagsModal>
+
+export const Default: Story = {}

package/src/blocks/ManageTagsModal/ManageTagsModal.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { ManageTagsModal } from './ManageTagsModal'
+
+// TODO: add full a11y + variant tests
+describe('ManageTagsModal', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<ManageTagsModal />)).not.toThrow()
+  })
+})

package/src/blocks/ManageTagsModal/ManageTagsModal.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { X, Pencil } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Input } from '../primitives/input'
+import { Button } from '../primitives/button'
+
+const COLORS = ['bg-blue-500', 'bg-green-500', 'bg-yellow-500', 'bg-purple-500', 'bg-red-500', 'bg-pink-500']
+
+interface Tag { id: string; name: string; color: string }
+
+const INITIAL_TAGS: Tag[] = [
+  { id: '1', name: 'Design', color: 'bg-blue-500' },
+  { id: '2', name: 'Engineering', color: 'bg-green-500' },
+  { id: '3', name: 'Marketing', color: 'bg-yellow-500' },
+  { id: '4', name: 'Research', color: 'bg-purple-500' },
+]
+
+export interface ManageTagsModalProps { className?: string }
+
+export function ManageTagsModal({ className }: ManageTagsModalProps) {
+  const [tags, setTags] = useState<Tag[]>(INITIAL_TAGS)
+  const [newTag, setNewTag] = useState('')
+  const [colorIdx, setColorIdx] = useState(0)
+
+  const addTag = () => {
+    if (!newTag.trim()) return
+    const id = `tag-${Date.now()}`
+    setTags(t => [...t, { id, name: newTag.trim(), color: COLORS[colorIdx % COLORS.length] }])
+    setNewTag('')
+    setColorIdx(i => i + 1)
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-4 p-6', className)}>
+      <div>
+        <h2 className="text-base font-semibold">Manage Tags</h2>
+        <p className="text-sm text-[hsl(var(--muted-foreground))] mt-0.5">Create and organize your tags.</p>
+      </div>
+      <div className="flex gap-2">
+        <div className={cn('h-9 w-9 shrink-0 rounded-md cursor-pointer transition-opacity', COLORS[colorIdx % COLORS.length])}
+          onClick={() => setColorIdx(i => i + 1)} title="Click to change color" />
+        <Input className="flex-1 h-9 text-sm" placeholder="New tag name..." value={newTag}
+          onChange={e => setNewTag(e.target.value)} onKeyDown={e => e.key === 'Enter' && addTag()} />
+        <Button size="sm" className="h-9" onClick={addTag}>Add</Button>
+      </div>
+      <div className="space-y-1.5">
+        {tags.map(tag => (
+          <div key={tag.id} className="flex items-center gap-2 rounded-md border border-[hsl(var(--border))] px-3 py-2">
+            <span className={cn('h-3 w-3 rounded-full shrink-0', tag.color)} />
+            <span className="flex-1 text-sm">{tag.name}</span>
+            <button className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">
+              <Pencil className="h-3.5 w-3.5" />
+            </button>
+            <button onClick={() => setTags(ts => ts.filter(t => t.id !== tag.id))}
+              className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/blocks/ManageTagsModal/index.ts

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

package/src/blocks/MessagesCard/MessagesCard.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { MessagesCard } from './MessagesCard'
+
+// TODO: add all variants
+const meta: Meta<typeof MessagesCard> = {
+  title: 'Blocks/MessagesCard',
+  component: MessagesCard,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof MessagesCard>
+
+export const Default: Story = {}

package/src/blocks/MessagesCard/MessagesCard.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { MessagesCard } from './MessagesCard'
+
+// TODO: add full a11y + variant tests
+describe('MessagesCard', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<MessagesCard />)).not.toThrow()
+  })
+})

package/src/blocks/MessagesCard/MessagesCard.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card'
+
+interface Message {
+  id: string
+  name: string
+  initials: string
+  preview: string
+  time: string
+  unread?: boolean
+}
+
+const MESSAGES: Message[] = [
+  { id: '1', name: 'Alice Chen', initials: 'AC', preview: 'Just pushed the new design files to Figma.', time: '9:41 AM', unread: true },
+  { id: '2', name: 'Bob Smith', initials: 'BS', preview: "I'll take a look and share feedback by EOD.", time: '9:43 AM', unread: true },
+  { id: '3', name: 'Tom Ray', initials: 'TR', preview: 'Can we reschedule the standup to 10am?', time: 'Yesterday' },
+  { id: '4', name: 'Sara Kim', initials: 'SK', preview: 'Shipped the new auth flow. Ready for QA.', time: 'Yesterday' },
+  { id: '5', name: 'Mike Liu', initials: 'ML', preview: 'The latest metrics look promising 📈', time: 'Mon' },
+]
+
+function MessageRow({ msg }: { msg: Message }) {
+  return (
+    <div className="flex items-center gap-3 px-4 py-3 hover:bg-[hsl(var(--accent))] cursor-pointer transition-colors">
+      <div className="relative shrink-0">
+        <Avatar className="h-9 w-9"><AvatarFallback className="text-xs">{msg.initials}</AvatarFallback></Avatar>
+        {msg.unread && <span className="absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full bg-[hsl(var(--primary))] ring-2 ring-[hsl(var(--card))]" />}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between gap-2">
+          <p className={cn('text-sm truncate', msg.unread ? 'font-semibold' : 'font-medium')}>{msg.name}</p>
+          <span className="text-xs text-[hsl(var(--muted-foreground))] shrink-0">{msg.time}</span>
+        </div>
+        <p className={cn('text-xs mt-0.5 truncate', msg.unread ? 'text-[hsl(var(--foreground))]' : 'text-[hsl(var(--muted-foreground))]')}>
+          {msg.preview}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export interface MessagesCardProps { className?: string }
+
+export function MessagesCard({ className }: MessagesCardProps) {
+  return (
+    <Card className={cn('overflow-hidden', className)}>
+      <CardHeader className="px-4 py-3 border-b border-[hsl(var(--border))]">
+        <CardTitle className="text-sm font-semibold flex items-center justify-between">
+          Messages
+          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))] font-medium">2 new</span>
+        </CardTitle>
+      </CardHeader>
+      <div className="divide-y divide-[hsl(var(--border))]">
+        {MESSAGES.map(m => <MessageRow key={m.id} msg={m} />)}
+      </div>
+    </Card>
+  )
+}

package/src/blocks/MessagesCard/index.ts

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

package/src/blocks/MetricCard/MetricCard.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { MetricCard } from './MetricCard'
+
+// TODO: add all variants
+const meta: Meta<typeof MetricCard> = {
+  title: 'Blocks/MetricCard',
+  component: MetricCard,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof MetricCard>
+
+export const Default: Story = {}

package/src/blocks/MetricCard/MetricCard.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { MetricCard } from './MetricCard'
+
+// TODO: add full a11y + variant tests
+describe('MetricCard', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<MetricCard />)).not.toThrow()
+  })
+})

package/src/blocks/MetricCard/MetricCard.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { TrendingUp, TrendingDown } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Card, CardContent } from '../primitives/card'
+import { Button } from '../primitives/button'
+
+export interface MetricCardProps {
+  label?: string
+  value?: string
+  change?: string
+  trend?: 'up' | 'down'
+  className?: string
+}
+
+export function MetricCard({ label = 'Total Revenue', value = '$48,295', change = '+12.5%', trend = 'up', className }: MetricCardProps) {
+  const TrendIcon = trend === 'up' ? TrendingUp : TrendingDown
+  const trendColor = trend === 'up' ? 'text-green-600' : 'text-red-500'
+  return (
+    <Card className={cn('', className)}>
+      <CardContent className="p-4">
+        <p className="text-sm text-[hsl(var(--muted-foreground))]">{label}</p>
+        <p className="text-2xl font-bold mt-1">{value}</p>
+        <p className={cn('flex items-center gap-1 text-sm mt-1', trendColor)}>
+          <TrendIcon className="h-4 w-4" />{change} from last month
+        </p>
+      </CardContent>
+    </Card>
+  )
+}
+
+export interface MetricCardWithIconProps extends MetricCardProps {
+  icon?: React.ReactNode
+  iconColor?: string
+}
+
+export function MetricCardWithIcon({ icon, iconColor = 'bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))]', ...props }: MetricCardWithIconProps) {
+  const TrendIcon = (props.trend ?? 'up') === 'up' ? TrendingUp : TrendingDown
+  const trendColor = (props.trend ?? 'up') === 'up' ? 'text-green-600' : 'text-red-500'
+  return (
+    <Card className={cn('', props.className)}>
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between">
+          <div>
+            <p className="text-sm text-[hsl(var(--muted-foreground))]">{props.label ?? 'Total Revenue'}</p>
+            <p className="text-2xl font-bold mt-1">{props.value ?? '$48,295'}</p>
+            <p className={cn('flex items-center gap-1 text-sm mt-1', trendColor)}>
+              <TrendIcon className="h-4 w-4" />{props.change ?? '+12.5%'}
+            </p>
+          </div>
+          <div className={cn('flex h-10 w-10 items-center justify-center rounded-md', iconColor)}>
+            {icon ?? <TrendingUp className="h-5 w-5" />}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export interface MetricCardWithButtonProps extends MetricCardProps {
+  actionLabel?: string
+  onAction?: () => void
+}
+
+export function MetricCardWithButton({ actionLabel = 'View details', onAction, ...props }: MetricCardWithButtonProps) {
+  const TrendIcon = (props.trend ?? 'up') === 'up' ? TrendingUp : TrendingDown
+  const trendColor = (props.trend ?? 'up') === 'up' ? 'text-green-600' : 'text-red-500'
+  return (
+    <Card className={cn('', props.className)}>
+      <CardContent className="p-4">
+        <p className="text-sm text-[hsl(var(--muted-foreground))]">{props.label ?? 'Total Revenue'}</p>
+        <p className="text-2xl font-bold mt-1">{props.value ?? '$48,295'}</p>
+        <p className={cn('flex items-center gap-1 text-sm mt-1 mb-3', trendColor)}>
+          <TrendIcon className="h-4 w-4" />{props.change ?? '+12.5%'}
+        </p>
+        <Button size="sm" variant="outline" className="w-full" onClick={onAction}>{actionLabel}</Button>
+      </CardContent>
+    </Card>
+  )
+}

package/src/blocks/MetricCard/index.ts

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

package/src/blocks/NotificationSettings/NotificationSettings.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { NotificationSettings } from './NotificationSettings'
+
+// TODO: add all variants
+const meta: Meta<typeof NotificationSettings> = {
+  title: 'Blocks/NotificationSettings',
+  component: NotificationSettings,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof NotificationSettings>
+
+export const Default: Story = {}

package/src/blocks/NotificationSettings/NotificationSettings.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { NotificationSettings } from './NotificationSettings'
+
+// TODO: add full a11y + variant tests
+describe('NotificationSettings', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<NotificationSettings />)).not.toThrow()
+  })
+})

package/src/blocks/NotificationSettings/NotificationSettings.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import { cn } from '../utils/cn'
+import { Switch } from '../primitives/switch'
+import { Separator } from '../primitives/separator'
+
+const NOTIFICATIONS = [
+  { id: 'comments', label: 'Comments', description: 'Get notified when someone comments on your post', default: true },
+  { id: 'mentions', label: 'Mentions', description: 'Get notified when you are mentioned', default: true },
+  { id: 'followers', label: 'New followers', description: 'Get notified when someone follows you', default: false },
+  { id: 'updates', label: 'Product updates', description: 'Receive emails about new features and improvements', default: true },
+  { id: 'digest', label: 'Weekly digest', description: 'A summary of activity from the past week', default: false },
+  { id: 'security', label: 'Security alerts', description: 'Important alerts about your account security', default: true },
+]
+
+interface NotifRow {
+  id: string
+  label: string
+  description: string
+  checked: boolean
+  onChange: (checked: boolean) => void
+}
+
+function NotifRow({ label, description, checked, onChange }: NotifRow) {
+  return (
+    <div className="flex items-center justify-between gap-4 py-4">
+      <div>
+        <p className="text-sm font-medium">{label}</p>
+        <p className="text-xs text-[hsl(var(--muted-foreground))] mt-0.5">{description}</p>
+      </div>
+      <Switch checked={checked} onCheckedChange={onChange} />
+    </div>
+  )
+}
+
+export interface NotificationSettingsProps { className?: string }
+
+export function NotificationSettings({ className }: NotificationSettingsProps) {
+  const [states, setStates] = useState<Record<string, boolean>>(
+    Object.fromEntries(NOTIFICATIONS.map(n => [n.id, n.default]))
+  )
+
+  return (
+    <div className={cn('rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-6', className)}>
+      <div className="mb-4">
+        <h2 className="text-base font-semibold">Email Notifications</h2>
+        <p className="text-sm text-[hsl(var(--muted-foreground))] mt-0.5">Choose what you want to be notified about.</p>
+      </div>
+      <Separator />
+      <div className="divide-y divide-[hsl(var(--border))]">
+        {NOTIFICATIONS.map(n => (
+          <NotifRow
+            key={n.id}
+            {...n}
+            checked={states[n.id]}
+            onChange={val => setStates(s => ({ ...s, [n.id]: val }))}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/blocks/NotificationSettings/index.ts

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

package/src/blocks/OrganizationMenu/OrganizationMenu.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { OrganizationMenu } from './OrganizationMenu'
+
+// TODO: add all variants
+const meta: Meta<typeof OrganizationMenu> = {
+  title: 'Blocks/OrganizationMenu',
+  component: OrganizationMenu,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof OrganizationMenu>
+
+export const Default: Story = {}

package/src/blocks/OrganizationMenu/OrganizationMenu.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { OrganizationMenu } from './OrganizationMenu'
+
+// TODO: add full a11y + variant tests
+describe('OrganizationMenu', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<OrganizationMenu />)).not.toThrow()
+  })
+})

package/src/blocks/OrganizationMenu/OrganizationMenu.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { ChevronDown, Check, Plus } from 'lucide-react'
+import { cn } from '../utils/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../primitives/dropdown-menu'
+
+const ORGS = [
+  { id: '1', name: 'Acme Corp', slug: 'acme', plan: 'Pro' },
+  { id: '2', name: 'Beta Labs', slug: 'beta-labs', plan: 'Starter' },
+  { id: '3', name: 'Gamma Inc', slug: 'gamma', plan: 'Free' },
+]
+
+export interface OrgMenuProps {
+  currentOrgId?: string
+  onSwitch?: (orgId: string) => void
+  onCreateOrg?: () => void
+  className?: string
+}
+
+export function OrgMenu({
+  currentOrgId = '1',
+  onSwitch,
+  onCreateOrg,
+  className,
+}: OrgMenuProps) {
+  const current = ORGS.find(o => o.id === currentOrgId) ?? ORGS[0]
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className={cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-[hsl(var(--accent))] focus:outline-none', className)}>
+          <div className="flex h-6 w-6 items-center justify-center rounded bg-[hsl(var(--primary))] text-[10px] font-bold text-[hsl(var(--primary-foreground))]">
+            {current.name[0]}
+          </div>
+          <span className="font-medium max-w-[120px] truncate">{current.name}</span>
+          <ChevronDown className="h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-52">
+        <DropdownMenuLabel>Organizations</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {ORGS.map(org => (
+          <DropdownMenuItem key={org.id} onClick={() => onSwitch?.(org.id)} className="justify-between">
+            <div className="flex items-center gap-2">
+              <div className="flex h-5 w-5 items-center justify-center rounded bg-[hsl(var(--muted))] text-[10px] font-bold">
+                {org.name[0]}
+              </div>
+              <span>{org.name}</span>
+            </div>
+            {org.id === currentOrgId && <Check className="h-3.5 w-3.5 text-[hsl(var(--primary))]" />}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={onCreateOrg}>
+          <Plus className="h-4 w-4" />Create organization
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/blocks/OrganizationMenu/index.ts

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

package/src/blocks/RolesMenu/RolesMenu.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { RolesMenu } from './RolesMenu'
+
+// TODO: add all variants
+const meta: Meta<typeof RolesMenu> = {
+  title: 'Blocks/RolesMenu',
+  component: RolesMenu,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof RolesMenu>
+
+export const Default: Story = {}

package/src/blocks/RolesMenu/RolesMenu.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { RolesMenu } from './RolesMenu'
+
+// TODO: add full a11y + variant tests
+describe('RolesMenu', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<RolesMenu />)).not.toThrow()
+  })
+})