@otfdashkit/ui 0.1.0

package/src/blocks/FilesList/FilesList.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/FilesList/index.ts

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

package/src/blocks/FloatingActionButton/FloatingActionButton.stories.tsx

@@ -0,0 +1,223 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Bell, Settings, Sliders } from 'lucide-react'
+import { Switch } from '../../primitives/switch'
+import { Slider } from '../../primitives/slider'
+import { FloatingActionButton, FloatingThemePicker, DEFAULT_THEME_OPTIONS } from './FloatingActionButton'
+
+// ── Generic FloatingActionButton stories ─────────────────────────────────────
+
+const fabMeta: Meta<typeof FloatingActionButton> = {
+  title: 'Blocks/FloatingActionButton',
+  component: FloatingActionButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A generic fixed floating action button that opens a popover panel. ' +
+          'Accepts any icon, title, description, and an array of `FabSection` objects — ' +
+          'each section has a `label` and arbitrary `content: ReactNode`. ' +
+          '`FloatingThemePicker` is a pre-wired convenience wrapper on top of this component.',
+      },
+    },
+  },
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['bottom-right', 'bottom-left', 'top-right', 'top-left'],
+      description: 'Which corner the FAB is anchored to.',
+    },
+  },
+}
+
+export default fabMeta
+type FabStory = StoryObj<typeof FloatingActionButton>
+
+/** Minimal FAB — custom icon and a single section with arbitrary React content */
+export const GenericFAB: FabStory = {
+  name: 'Generic — custom icon + sections',
+  args: {
+    icon: <Settings className="h-[18px] w-[18px]" />,
+    label: 'Open settings',
+    title: 'Quick Settings',
+    description: 'Adjust your preferences.',
+    position: 'bottom-right',
+    sections: [
+      {
+        label: 'Notifications',
+        content: (
+          <div className="space-y-2.5">
+            {['Email alerts', 'Push notifications', 'Digest'].map(item => (
+              <div key={item} className="flex items-center justify-between">
+                <span className="text-sm text-foreground">{item}</span>
+                <Switch />
+              </div>
+            ))}
+          </div>
+        ),
+      },
+      {
+        label: 'Volume',
+        content: (
+          <div className="py-1">
+            <Slider defaultValue={[60]} max={100} step={1} className="w-full" />
+          </div>
+        ),
+      },
+    ],
+  },
+  render: args => (
+    <div className="relative w-full h-[400px] bg-background flex items-center justify-center">
+      <div className="text-center space-y-1">
+        <p className="text-base font-semibold text-foreground">Generic FAB</p>
+        <p className="text-sm text-muted-foreground">Custom icon, sections, and content</p>
+      </div>
+      <FloatingActionButton {...args} />
+    </div>
+  ),
+}
+
+/** FAB with a single section and no title/description */
+export const MinimalFAB: FabStory = {
+  name: 'Minimal — no header',
+  args: {
+    icon: <Bell className="h-[18px] w-[18px]" />,
+    label: 'Notification filter',
+    position: 'bottom-right',
+    sections: [
+      {
+        label: 'Filter',
+        content: (
+          <div className="space-y-2">
+            {['All', 'Unread', 'Mentions', 'Assigned'].map(f => (
+              <button
+                key={f}
+                type="button"
+                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+              >
+                {f}
+              </button>
+            ))}
+          </div>
+        ),
+      },
+    ],
+  },
+  render: args => (
+    <div className="relative w-full h-[400px] bg-background flex items-center justify-center">
+      <div className="text-center space-y-1">
+        <p className="text-base font-semibold text-foreground">Minimal FAB</p>
+        <p className="text-sm text-muted-foreground">No header, single section</p>
+      </div>
+      <FloatingActionButton {...args} />
+    </div>
+  ),
+}
+
+/** All four corner positions */
+export const CornerPositions: FabStory = {
+  name: 'All corner positions',
+  render: () => {
+    const positions = ['bottom-right', 'bottom-left', 'top-right', 'top-left'] as const
+    return (
+      <div className="relative w-full h-[400px] bg-background flex items-center justify-center">
+        <div className="text-center space-y-1">
+          <p className="text-base font-semibold text-foreground">Four corners</p>
+          <p className="text-sm text-muted-foreground">Each FAB anchors to a different corner</p>
+        </div>
+        {positions.map(pos => (
+          <FloatingActionButton
+            key={pos}
+            icon={<Sliders className="h-[18px] w-[18px]" />}
+            label={`FAB ${pos}`}
+            title={pos}
+            position={pos}
+            sections={[{ label: 'Position', content: <p className="text-sm text-muted-foreground">{pos}</p> }]}
+          />
+        ))}
+      </div>
+    )
+  },
+  parameters: { layout: 'fullscreen' },
+}
+
+// ── FloatingThemePicker (pre-wired convenience) ───────────────────────────────
+
+export const ThemePicker: FabStory = {
+  name: 'FloatingThemePicker — default',
+  render: () => (
+    <div className="relative w-full h-[400px] bg-background flex items-center justify-center">
+      <div className="text-center space-y-1">
+        <p className="text-base font-semibold text-foreground">Click the palette button</p>
+        <p className="text-sm text-muted-foreground">Pre-wired mode + palette sections</p>
+      </div>
+      <FloatingThemePicker />
+    </div>
+  ),
+}
+
+export const ThemePickerCustomPalette: FabStory = {
+  name: 'FloatingThemePicker — custom palette',
+  render: () => (
+    <div className="relative w-full h-[400px] bg-background flex items-center justify-center">
+      <div className="text-center space-y-1">
+        <p className="text-base font-semibold text-foreground">Three palettes only</p>
+        <p className="text-sm text-muted-foreground">Pass your own options array</p>
+      </div>
+      <FloatingThemePicker
+        position="bottom-right"
+        options={[
+          { value: '__brand__',    label: 'Default', color: '#F97316' },
+          { value: 'theme-slate',  label: 'Slate',   color: '#6366F1' },
+          { value: 'theme-cosmic', label: 'Cosmic',  color: '#7C3AED' },
+        ]}
+      />
+    </div>
+  ),
+}
+
+/** Static panel preview for documentation */
+export const PanelPreview: FabStory = {
+  name: 'Panel preview (static layout)',
+  render: () => (
+    <div className="w-64 rounded-lg border border-border bg-card shadow-lg overflow-hidden">
+      <div className="px-4 pt-3.5 pb-3">
+        <p className="text-sm font-semibold leading-none">Appearance</p>
+        <p className="text-[11px] text-muted-foreground mt-1">Customize your experience.</p>
+      </div>
+      <div className="h-px bg-border" />
+      <div className="px-4 py-3 space-y-4">
+        <div>
+          <p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground mb-2">Mode</p>
+          <div className="inline-flex rounded-md border border-border bg-background p-0.5">
+            {['Light', 'Dark', 'System'].map((m, i) => (
+              <span
+                key={m}
+                className={`inline-flex items-center px-2.5 h-7 text-xs rounded ${
+                  i === 2 ? 'bg-foreground text-background' : 'text-muted-foreground'
+                }`}
+              >
+                {m}
+              </span>
+            ))}
+          </div>
+        </div>
+        <div>
+          <p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground mb-2.5">Palette</p>
+          <div className="flex items-center gap-2.5">
+            {DEFAULT_THEME_OPTIONS.map((opt, i) => (
+              <span
+                key={opt.value}
+                className={`h-7 w-7 rounded-full block ${i === 0 ? 'ring-2 ring-offset-2 ring-offset-card scale-110' : 'opacity-60'}`}
+                style={{ background: opt.color, ['--tw-ring-color' as string]: opt.color }}
+              />
+            ))}
+          </div>
+          <p className="text-[11px] text-muted-foreground mt-2 font-medium">Brand</p>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: { layout: 'centered' },
+}

package/src/blocks/FloatingActionButton/FloatingActionButton.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { FloatingActionButton, FloatingThemePicker } from './FloatingActionButton'
+
+describe('FloatingActionButton', () => {
+  it('renders the FAB trigger without throwing', () => {
+    expect(() =>
+      render(<FloatingActionButton label="Open panel" sections={[]} />)
+    ).not.toThrow()
+  })
+
+  it('shows the FAB button with aria-label', () => {
+    render(<FloatingActionButton label="Open panel" sections={[]} />)
+    expect(screen.getByRole('button', { name: /open panel/i })).toBeInTheDocument()
+  })
+
+  it('opens the panel when FAB is clicked', () => {
+    render(
+      <FloatingActionButton
+        label="Open panel"
+        title="My Panel"
+        sections={[{ label: 'Section', content: <span>Hello</span> }]}
+      />
+    )
+    fireEvent.click(screen.getByRole('button', { name: /open panel/i }))
+    expect(screen.getByText('My Panel')).toBeInTheDocument()
+    expect(screen.getByText('Hello')).toBeInTheDocument()
+  })
+})
+
+describe('FloatingThemePicker', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<FloatingThemePicker />)).not.toThrow()
+  })
+
+  it('shows the FAB button with aria-label', () => {
+    render(<FloatingThemePicker />)
+    expect(screen.getByRole('button', { name: /open theme picker/i })).toBeInTheDocument()
+  })
+
+  it('opens the appearance panel when FAB is clicked', () => {
+    render(<FloatingThemePicker />)
+    fireEvent.click(screen.getByRole('button', { name: /open theme picker/i }))
+    expect(screen.getByText('Appearance')).toBeInTheDocument()
+  })
+
+  // TODO: add tests for palette switching, mode switching, localStorage persistence
+})

package/src/blocks/FloatingActionButton/FloatingActionButton.tsx

@@ -0,0 +1,253 @@
+'use client'
+import React from 'react'
+import { Palette } from 'lucide-react'
+import { cn } from '../../utils/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
+import { Separator } from '../../primitives/separator'
+import { ThemeSwitch } from '../../theme/ThemeSwitch'
+
+// ── Generic FAB types ─────────────────────────────────────────────────────────
+
+export type FabPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+
+export interface FabSection {
+  /** Section heading shown in small-caps above the items. */
+  label: string
+  /** The content to render inside this section. */
+  content: React.ReactNode
+}
+
+export interface FloatingActionButtonProps {
+  /** Icon rendered inside the FAB. Defaults to a palette icon. */
+  icon?: React.ReactNode
+  /** Tooltip / aria-label for the FAB button. */
+  label?: string
+  /** Panel title shown at the top of the popover. */
+  title?: string
+  /** Panel subtitle shown below the title. */
+  description?: string
+  /** Sections of content to render inside the popover panel. */
+  sections?: FabSection[]
+  /** Which corner to anchor the FAB. @default 'bottom-right' */
+  position?: FabPosition
+  /** Extra className on the root wrapper. */
+  className?: string
+}
+
+const POSITION_CLASSES: Record<FabPosition, string> = {
+  'bottom-right': 'bottom-5 right-5',
+  'bottom-left':  'bottom-5 left-5',
+  'top-right':    'top-5 right-5',
+  'top-left':     'top-5 left-5',
+}
+
+const POPOVER_ALIGN: Record<FabPosition, 'start' | 'end'> = {
+  'bottom-right': 'end',
+  'bottom-left':  'start',
+  'top-right':    'end',
+  'top-left':     'start',
+}
+
+const POPOVER_SIDE: Record<FabPosition, 'top' | 'bottom'> = {
+  'bottom-right': 'top',
+  'bottom-left':  'top',
+  'top-right':    'bottom',
+  'top-left':     'bottom',
+}
+
+// ── Generic FloatingActionButton ─────────────────────────────────────────────
+
+export function FloatingActionButton({
+  icon = <Palette className="h-[18px] w-[18px]" />,
+  label = 'Open panel',
+  title,
+  description,
+  sections = [],
+  position = 'bottom-right',
+  className,
+}: FloatingActionButtonProps) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div
+      data-slot="floating-action-button"
+      className={cn('fixed z-50', POSITION_CLASSES[position], className)}
+    >
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            aria-label={label}
+            aria-expanded={open}
+            className={cn(
+              'h-11 w-11 rounded-full shadow-lg',
+              'flex items-center justify-center',
+              'bg-primary text-primary-foreground',
+              'border border-primary/20',
+              'hover:opacity-90 active:scale-95',
+              'transition-all duration-150',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            )}
+          >
+            {icon}
+          </button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          side={POPOVER_SIDE[position]}
+          align={POPOVER_ALIGN[position]}
+          sideOffset={10}
+          className="w-60 p-0 overflow-hidden"
+        >
+          {(title || description) && (
+            <>
+              <div className="px-3 pt-3 pb-2">
+                {title && <p className="text-xs font-semibold leading-none">{title}</p>}
+                {description && (
+                  <p className="text-[10px] text-muted-foreground mt-0.5">{description}</p>
+                )}
+              </div>
+              {sections.length > 0 && <Separator />}
+            </>
+          )}
+
+          {sections.length > 0 && (
+            <div className="px-3 py-2.5 space-y-3">
+              {sections.map((section, i) => (
+                <React.Fragment key={section.label}>
+                  <div>
+                    <p className="text-[9px] font-semibold uppercase tracking-widest text-muted-foreground mb-1.5">
+                      {section.label}
+                    </p>
+                    {section.content}
+                  </div>
+                  {i < sections.length - 1 && <Separator />}
+                </React.Fragment>
+              ))}
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+// ── Theme-picker helpers ──────────────────────────────────────────────────────
+
+const STORAGE_KEY = 'otf-theme'
+const BRAND_SENTINEL = '__brand__'
+
+export interface ThemePickerOption {
+  /** CSS class applied to <html>. Use '__brand__' for the default brand palette (no class). */
+  value: string
+  /** Display label shown as tooltip and below the active swatch. */
+  label: string
+  /** Hex or CSS color used to render the swatch circle. */
+  color: string
+}
+
+export const DEFAULT_THEME_OPTIONS: ThemePickerOption[] = [
+  { value: 'theme-minimal',  label: 'Minimal',  color: '#F97316' },
+  { value: 'theme-linear',   label: 'Linear',   color: '#171717' },
+  { value: 'theme-glass',    label: 'Glass',    color: '#3B82F6' },
+  { value: 'theme-midnight', label: 'Midnight', color: '#7C3AED' },
+]
+
+function readStoredTheme(): string {
+  if (typeof window === 'undefined') return BRAND_SENTINEL
+  try { return localStorage.getItem(STORAGE_KEY) || BRAND_SENTINEL } catch { return BRAND_SENTINEL }
+}
+
+function applyTheme(val: string) {
+  if (typeof document === 'undefined') return
+  const themeClass = val === BRAND_SENTINEL ? '' : val
+  const root = document.documentElement
+  const preserved = Array.from(root.classList).filter(c => !c.startsWith('theme-'))
+  root.className = [...preserved, ...(themeClass ? [themeClass] : [])].join(' ').trim()
+  try { localStorage.setItem(STORAGE_KEY, themeClass) } catch {}
+}
+
+// ── PaletteSwatches (section content for the theme FAB) ──────────────────────
+
+export interface PaletteSwatchesProps {
+  options?: ThemePickerOption[]
+}
+
+export function PaletteSwatches({ options = DEFAULT_THEME_OPTIONS }: PaletteSwatchesProps) {
+  const [activeValue, setActiveValue] = React.useState<string>(readStoredTheme)
+  const activeOption = options.find(o => o.value === activeValue) ?? options[0]
+
+  const handleSelect = (value: string) => {
+    setActiveValue(value)
+    applyTheme(value)
+  }
+
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        {options.map(opt => {
+          const isActive = activeValue === opt.value
+          return (
+            <button
+              key={opt.value}
+              type="button"
+              title={opt.label}
+              aria-label={opt.label}
+              aria-pressed={isActive}
+              onClick={() => handleSelect(opt.value)}
+              className={cn(
+                'h-5 w-5 rounded-full transition-all duration-150',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
+                isActive
+                  ? 'ring-2 ring-offset-1 ring-offset-card scale-110'
+                  : 'opacity-50 hover:opacity-80 hover:scale-105',
+              )}
+              style={{
+                background: opt.color,
+                ['--tw-ring-color' as string]: opt.color,
+              }}
+            />
+          )
+        })}
+      </div>
+      <p className="text-[10px] text-muted-foreground mt-1.5 font-medium">
+        {activeOption?.label ?? ''}
+      </p>
+    </div>
+  )
+}
+
+// ── FloatingThemePicker (pre-wired convenience export) ────────────────────────
+
+export interface FloatingThemePickerProps {
+  options?: ThemePickerOption[]
+  position?: FabPosition
+  className?: string
+}
+
+export function FloatingThemePicker({
+  options = DEFAULT_THEME_OPTIONS,
+  position = 'bottom-right',
+  className,
+}: FloatingThemePickerProps) {
+  return (
+    <FloatingActionButton
+      icon={<Palette className="h-[18px] w-[18px]" />}
+      label="Open theme picker"
+      title="Appearance"
+      position={position}
+      className={className}
+      sections={[
+        {
+          label: 'Mode',
+          content: <ThemeSwitch variant="segmented" className="w-full" />,
+        },
+        {
+          label: 'Palette',
+          content: <PaletteSwatches options={options} />,
+        },
+      ]}
+    />
+  )
+}

package/src/blocks/FloatingActionButton/index.ts

@@ -0,0 +1 @@
+export * from './FloatingActionButton'

package/src/blocks/IntegrationCard/IntegrationCard.stories.tsx

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

package/src/blocks/IntegrationCard/IntegrationCard.test.tsx

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

package/src/blocks/IntegrationCard/IntegrationCard.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/IntegrationCard/index.ts

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