@otfdashkit/ui 0.1.0

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@otfdashkit/ui",
+  "version": "0.1.0",
+  "description": "OTF UI — production-quality React component library (Radix + Tailwind)",
+  "keywords": [
+    "otf",
+    "ui",
+    "react",
+    "components",
+    "design-system",
+    "tailwind"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles": "./src/styles.css",
+    "./themes/*": "./src/themes/*.css"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.mjs",
+    "dist/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.ts",
+    "src/themes/*.css",
+    "src/styles.css"
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.24",
+    "@tiptap/extension-link": "^3.22.5",
+    "@tiptap/extension-placeholder": "^3.22.5",
+    "@tiptap/extension-table": "^3.22.5",
+    "@tiptap/extension-table-cell": "^3.22.5",
+    "@tiptap/extension-table-header": "^3.22.5",
+    "@tiptap/extension-table-row": "^3.22.5",
+    "@tiptap/extension-typography": "^3.22.5",
+    "@tiptap/pm": "^3.22.5",
+    "@tiptap/react": "^3.22.5",
+    "@tiptap/starter-kit": "^3.22.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.400.0",
+    "motion": "^12.38.0",
+    "qrcode.react": "^4.2.0",
+    "react-colorful": "^5.6.1",
+    "react-day-picker": "^9.14.0",
+    "react-hook-form": "^7.71.2",
+    "react-image-crop": "^11.0.10",
+    "react-resizable-panels": "^4.7.5",
+    "recharts": "^3.8.0",
+    "shiki": "^4.0.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^2.3.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "autoprefixer": "^10.4.27",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tailwindcss": "3",
+    "tailwindcss-animate": "^1.0.7",
+    "tsup": "^8.0.0",
+    "typescript": "^5.6.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": ">=3.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/advanced/BulkActions/BulkActions.stories.tsx

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

package/src/advanced/BulkActions/BulkActions.test.tsx

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

package/src/advanced/BulkActions/BulkActions.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { X } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Button } from '../primitives/button'
+
+interface ActionDef {
+  label: string
+  icon?: React.ReactNode
+  onClick: () => void
+  variant?: 'default' | 'destructive'
+}
+
+interface BulkActionsProps {
+  count: number
+  actions: ActionDef[]
+  onClear: () => void
+  className?: string
+}
+
+export function BulkActions({ count, actions, onClear, className }: BulkActionsProps) {
+  if (count === 0) return null
+  return (
+    <div className={cn('fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--card))] px-4 py-2 shadow-lg', className)}>
+      <span className="text-sm font-medium text-[hsl(var(--foreground))] pr-2 border-r border-[hsl(var(--border))]">
+        {count} selected
+      </span>
+      <div className="flex items-center gap-1">
+        {actions.map((action, i) => (
+          <Button
+            key={i}
+            variant={action.variant === 'destructive' ? 'destructive' : 'ghost'}
+            size="sm"
+            className="h-7 gap-1.5 text-xs rounded-full px-3"
+            onClick={action.onClick}
+          >
+            {action.icon}
+            {action.label}
+          </Button>
+        ))}
+      </div>
+      <button onClick={onClear} className="ml-1 rounded-full p-0.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  )
+}

package/src/advanced/BulkActions/index.ts

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

package/src/advanced/CommandBar/CommandBar.stories.tsx

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

package/src/advanced/CommandBar/CommandBar.test.tsx

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

package/src/advanced/CommandBar/CommandBar.tsx

@@ -0,0 +1,115 @@
+import React from 'react'
+import { Search, X } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Dialog, DialogContent, DialogTitle } from '../primitives/dialog'
+
+interface UseCommandBarReturn { open: boolean; setOpen: (v: boolean) => void }
+
+export function useCommandBar(): UseCommandBarReturn {
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setOpen((o) => !o) }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  return { open, setOpen }
+}
+
+export function CommandBarEmpty({ children = 'No results found.' }: { children?: React.ReactNode }) {
+  return <div className="py-6 text-center text-sm text-[hsl(var(--muted-foreground))]">{children}</div>
+}
+
+export function CommandBarGroup({ heading, children }: { heading: string; children: React.ReactNode }) {
+  return (
+    <div className="px-2 py-1">
+      <p className="mb-1 px-2 text-xs font-semibold text-[hsl(var(--muted-foreground))]">{heading}</p>
+      {children}
+    </div>
+  )
+}
+
+interface CommandBarItemProps {
+  icon?: React.ReactNode
+  label: string
+  shortcut?: string
+  onSelect?: () => void
+  active?: boolean
+  className?: string
+}
+
+export function CommandBarItem({ icon, label, shortcut, onSelect, active, className }: CommandBarItemProps) {
+  return (
+    <button
+      onClick={onSelect}
+      className={cn(
+        'flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm transition-colors',
+        active ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'hover:bg-[hsl(var(--accent)/0.6)]',
+        className
+      )}
+    >
+      {icon && <span className="h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]">{icon}</span>}
+      <span className="flex-1 text-left truncate">{label}</span>
+      {shortcut && (
+        <kbd className="pointer-events-none shrink-0 inline-flex h-5 items-center rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]">
+          {shortcut}
+        </kbd>
+      )}
+    </button>
+  )
+}
+
+interface CommandBarProps {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  children: React.ReactNode
+  placeholder?: string
+  onSearch?: (q: string) => void
+}
+
+export function CommandBar({ open, onOpenChange, children, placeholder = 'Search commands...', onSearch }: CommandBarProps) {
+  const [query, setQuery] = React.useState('')
+
+  const handleSearch = (v: string) => { setQuery(v); onSearch?.(v) }
+
+  const items = React.useRef<HTMLDivElement>(null)
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') { onOpenChange(false); return }
+    const focusable = items.current?.querySelectorAll<HTMLButtonElement>('button')
+    if (!focusable?.length) return
+    const arr = Array.from(focusable)
+    const idx = arr.indexOf(document.activeElement as HTMLButtonElement)
+    if (e.key === 'ArrowDown') { e.preventDefault(); arr[(idx + 1) % arr.length]?.focus() }
+    if (e.key === 'ArrowUp')   { e.preventDefault(); arr[(idx - 1 + arr.length) % arr.length]?.focus() }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="p-0 gap-0 max-w-lg overflow-hidden" onKeyDown={handleKeyDown}>
+        <DialogTitle className="sr-only">Command Bar</DialogTitle>
+        <div className="flex items-center gap-2 border-b border-[hsl(var(--border))] px-4 py-3">
+          <Search className="h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]" />
+          <input
+            autoFocus
+            className="flex-1 bg-transparent text-sm outline-none placeholder:text-[hsl(var(--muted-foreground))]"
+            placeholder={placeholder}
+            value={query}
+            onChange={(e) => handleSearch(e.target.value)}
+          />
+          {query && (
+            <button onClick={() => handleSearch('')} className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]">
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+        <div ref={items} className="max-h-80 overflow-y-auto py-2">
+          {children}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/advanced/CommandBar/index.ts

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

package/src/advanced/Filters/Filters.stories.tsx

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

package/src/advanced/Filters/Filters.test.tsx

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

package/src/advanced/Filters/Filters.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import { Plus, X } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Button } from '../primitives/button'
+import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
+import { Input } from '../primitives/input'
+
+export interface FilterDef {
+  key: string
+  label: string
+  type: 'text' | 'select' | 'date' | 'number'
+  options?: { label: string; value: string }[]
+}
+
+export interface FilterValue {
+  key: string
+  operator: string
+  value: string
+}
+
+const textOps = ['contains', 'equals', 'starts with']
+const numOps = ['=', '>', '<', '>=', '<=']
+
+function AddFilterPopover({ filters, onAdd }: { filters: FilterDef[]; onAdd: (v: FilterValue) => void }) {
+  const [open, setOpen] = React.useState(false)
+  const [key, setKey] = React.useState('')
+  const [op, setOp] = React.useState('')
+  const [val, setVal] = React.useState('')
+
+  const def = filters.find((f) => f.key === key)
+  const ops = def?.type === 'number' ? numOps : textOps
+
+  const handleAdd = () => {
+    if (!key || !val) return
+    onAdd({ key, operator: op || ops[0], value: val })
+    setKey(''); setOp(''); setVal('')
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-7 gap-1 text-xs"><Plus className="h-3.5 w-3.5" />Add Filter</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72 p-3 space-y-2">
+        <Select value={key} onValueChange={setKey}>
+          <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Field" /></SelectTrigger>
+          <SelectContent>{filters.map((f) => <SelectItem key={f.key} value={f.key}>{f.label}</SelectItem>)}</SelectContent>
+        </Select>
+        {key && (
+          <Select value={op || ops[0]} onValueChange={setOp}>
+            <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
+            <SelectContent>{ops.map((o) => <SelectItem key={o} value={o}>{o}</SelectItem>)}</SelectContent>
+          </Select>
+        )}
+        {key && def?.type === 'select' ? (
+          <Select value={val} onValueChange={setVal}>
+            <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Value" /></SelectTrigger>
+            <SelectContent>{def.options?.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}</SelectContent>
+          </Select>
+        ) : key && (
+          <Input type={def?.type === 'number' ? 'number' : def?.type === 'date' ? 'date' : 'text'} className="h-8 text-xs" value={val} onChange={(e) => setVal(e.target.value)} placeholder="Value" />
+        )}
+        <Button size="sm" className="w-full h-7 text-xs" onClick={handleAdd} disabled={!key || !val}>Apply</Button>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export function FilterBadge({ filter, def, onRemove }: { filter: FilterValue; def?: FilterDef; onRemove: () => void }) {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-2.5 py-0.5 text-xs font-medium text-[hsl(var(--foreground))]">
+      <span className="text-[hsl(var(--muted-foreground))]">{def?.label ?? filter.key}</span>
+      <span>{filter.operator}</span>
+      <span className="font-semibold">{filter.value}</span>
+      <button onClick={onRemove} className="ml-0.5 rounded-full hover:text-[hsl(var(--destructive))]"><X className="h-3 w-3" /></button>
+    </span>
+  )
+}
+
+export function FilterItem({ children }: { children: React.ReactNode }) {
+  return <div className="flex items-center gap-1">{children}</div>
+}
+
+interface FiltersProps {
+  filters: FilterDef[]
+  value: FilterValue[]
+  onChange: (v: FilterValue[]) => void
+  className?: string
+}
+
+export function Filters({ filters, value, onChange, className }: FiltersProps) {
+  const remove = (i: number) => onChange(value.filter((_, idx) => idx !== i))
+  return (
+    <div className={cn('flex flex-wrap items-center gap-2', className)}>
+      {value.map((fv, i) => (
+        <FilterBadge key={i} filter={fv} def={filters.find((f) => f.key === fv.key)} onRemove={() => remove(i)} />
+      ))}
+      <AddFilterPopover filters={filters} onAdd={(fv) => onChange([...value, fv])} />
+    </div>
+  )
+}

package/src/advanced/Filters/index.ts

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

package/src/advanced/Kanban/Kanban.stories.tsx

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

package/src/advanced/Kanban/Kanban.test.tsx

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

package/src/advanced/Kanban/Kanban.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import { DndContext, DragEndEvent, DragOverEvent, DragOverlay, DragStartEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { cn } from '../utils/cn'
+
+export interface KanbanCardDef { id: string; title: string; description?: string; badge?: string }
+export interface KanbanColumnDef { id: string; title: string; cards: KanbanCardDef[] }
+
+export function KanbanCard({ card, isDragging }: { card: KanbanCardDef; isDragging?: boolean }) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: card.id })
+  const style = { transform: CSS.Transform.toString(transform), transition }
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}
+      className={cn('rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-3 cursor-grab active:cursor-grabbing select-none', isDragging && 'shadow-lg opacity-80')}>
+      <div className="flex items-start justify-between gap-2">
+        <p className="text-sm font-medium text-[hsl(var(--foreground))] leading-tight">{card.title}</p>
+        {card.badge && (
+          <span className="shrink-0 text-[10px] px-1.5 py-0.5 rounded-full bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))] font-medium">{card.badge}</span>
+        )}
+      </div>
+      {card.description && <p className="mt-1 text-xs text-[hsl(var(--muted-foreground))] line-clamp-2">{card.description}</p>}
+    </div>
+  )
+}
+
+export function KanbanColumn({ column, isOver }: { column: KanbanColumnDef; isOver?: boolean }) {
+  return (
+    <div className={cn('flex w-64 shrink-0 flex-col gap-2 rounded-md bg-[hsl(var(--muted)/0.4)] p-3 transition-colors', isOver && 'bg-[hsl(var(--muted)/0.7)]')}>
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-[hsl(var(--foreground))]">{column.title}</h3>
+        <span className="text-xs text-[hsl(var(--muted-foreground))] bg-[hsl(var(--muted))] rounded-full px-2 py-0.5">{column.cards.length}</span>
+      </div>
+      <SortableContext items={column.cards.map((c) => c.id)} strategy={verticalListSortingStrategy}>
+        <div className="flex flex-col gap-2 min-h-[60px]">
+          {column.cards.map((card) => <KanbanCard key={card.id} card={card} />)}
+        </div>
+      </SortableContext>
+    </div>
+  )
+}
+
+interface KanbanProps {
+  columns: KanbanColumnDef[]
+  onMoveCard?: (cardId: string, fromCol: string, toCol: string) => void
+  className?: string
+}
+
+export function Kanban({ columns: initialColumns, onMoveCard, className }: KanbanProps) {
+  const [cols, setCols] = React.useState<KanbanColumnDef[]>(initialColumns)
+  const [activeCard, setActiveCard] = React.useState<KanbanCardDef | null>(null)
+  const [overColId, setOverColId] = React.useState<string | null>(null)
+
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
+
+  const findColByCard = (cardId: string) => cols.find((c) => c.cards.some((card) => card.id === cardId))
+
+  const onDragStart = ({ active }: DragStartEvent) => {
+    const col = findColByCard(active.id as string)
+    setActiveCard(col?.cards.find((c) => c.id === active.id) ?? null)
+  }
+
+  const onDragOver = ({ over }: DragOverEvent) => {
+    if (!over) { setOverColId(null); return }
+    const colId = cols.find((c) => c.id === over.id)?.id ?? findColByCard(over.id as string)?.id ?? null
+    setOverColId(colId)
+  }
+
+  const onDragEnd = ({ active, over }: DragEndEvent) => {
+    setActiveCard(null); setOverColId(null)
+    if (!over || active.id === over.id) return
+    const fromCol = findColByCard(active.id as string)
+    const toCol = cols.find((c) => c.id === over.id) ?? findColByCard(over.id as string)
+    if (!fromCol || !toCol || fromCol.id === toCol.id) return
+
+    const card = fromCol.cards.find((c) => c.id === active.id)!
+    setCols((prev) => prev.map((c) => {
+      if (c.id === fromCol.id) return { ...c, cards: c.cards.filter((card) => card.id !== active.id) }
+      if (c.id === toCol.id) return { ...c, cards: [...c.cards, card] }
+      return c
+    }))
+    onMoveCard?.(active.id as string, fromCol.id, toCol.id)
+  }
+
+  return (
+    <DndContext sensors={sensors} onDragStart={onDragStart} onDragOver={onDragOver} onDragEnd={onDragEnd}>
+      <div className={cn('flex gap-4 overflow-x-auto pb-4', className)}>
+        {cols.map((col) => <KanbanColumn key={col.id} column={col} isOver={overColId === col.id} />)}
+      </div>
+      <DragOverlay>
+        {activeCard && <KanbanCard card={activeCard} isDragging />}
+      </DragOverlay>
+    </DndContext>
+  )
+}

package/src/advanced/Kanban/index.ts

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

package/src/advanced/ToggleButton/ToggleButton.stories.tsx

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

package/src/advanced/ToggleButton/ToggleButton.test.tsx

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