Board view

import {
  BoardView
} from "@/components/blocks/board-view";

"use client";

import * as React from "react";
import {
  BoardView
} from "@/components/blocks/board-view";

const COLUMNS = [
  { id: "queued", title: "Queued", hex: "#656f7d", showHandle: true, hideStatus: true },
  { id: "received", title: "Received", hex: "#ffcf00", disableDnd: true, showPlayPause: true, hideStatus: true },
];

const INITIAL_CARDS = {
  queued: [
    { id: "c1", href: "/projects/c1", title: "Stewardship brief", draftDate: "2026-03-14T09:00:00+00:00" },
    { id: "c2", href: "/projects/c2", title: "Outreach video",    draftDate: "2026-03-18T09:00:00+00:00" },
  ],
  received: [
    { id: "c5", href: "/projects/c5", title: "Easter graphics",     draftDate: "2026-03-06T09:00:00+00:00" },
    { id: "c7", href: "/projects/c7", title: "Annual report cover", draftDate: "2026-03-09T09:00:00+00:00" },
  ],
};

export function Example() {
  const [cards, setCards] = React.useState(INITIAL_CARDS);
  return (
    <BoardView
      columns={COLUMNS}
      cards={cards}
      onChange={setCards}
      // One rolled-up figure above the board instead of a cap per column.
      countGroup={{ label: "Active projects", columnIds: ["received"], cap: 7 }}
    />
  );
}

BoardView
├── BoardViewColumn[] (props.columns — id, title, tone | hex, cap, showHandle, disableDnd, showPlayPause, hideStatus)
└── Cards record (props.cards — Record<columnId, BoardViewCard[]>)
    └── BoardViewCard
        ├── title / description
        ├── status: { label, tone | hex }
        ├── draftDate / completedDate
        ├── href
        ├── image / imageAlt / images
        ├── assignees: AvatarPerson[]
        └── paused (only meaningful in showPlayPause columns — flips Pause ↔ Play)

Column header
├── collapse caret → shrinks the column to a narrow vertical rail
├── status dot (tone | hex)
└── count pill (graded against the column cap)

Card gutter (left edge, shown when the column opts in)
├── showHandle    → grip + #N position marker (renumbers live mid-drag,
│                    each change replaying the transitions-dev number pop-in)
└── showPlayPause → Play / Pause toggle
    Both together share one gutter, grip first.

Card body
├── cover         (image, or images: one 16:9 frame above the title, object-cover.
│                  Several fade through on hover, with a badge counting them; the
│                  fade needs a real pointer and stops under reduced motion.)
├── title / description
├── date          (footer left, takes the badge's slot when hideStatus is on)
│                  "Draft Mar 14", or "Completed Jan 20" in a column marked
│                  closed. timestamptz in, formatted out.
├── status badge  (suppressed by the column's hideStatus)
└── owner avatars (footer right — Avatar people={…} version="v2-initials", max 3)

Height
├── Columns cap at max-h-[32rem]; past that the card list scrolls.
└── scroll-fade sits on that inner scroller, never on the card-surface root.

Toolbar (countGroup / searchable / filterable) — the grid's own band
│  (.records-shell + .card-surface + .records-toolbar), wrapping the HEADER
│  only; the columns below stay unboxed. Stacks on phones like the grid's.
├── search field  → matches card titles and owner names
├── Filters popover → the filter-builder block (title / status / owner),
│                     nested and/or clauses behind an active-count badge
├── while either is active, dragging is off and #N counts the real queue
└── a column left with no matches is hidden; all empty → "No projects match."

Counts
├── Each column header shows its own count, graded against its own cap.
└── props.countGroup rolls named columns into one figure above the board.

Right-click a card
├── Open project        (when onCardClick is set)
├── Open in new tab     (when the card has an href)
├── Copy link           (when the card has an href)
├── Copy ID             (always)
├── Pause / Resume      (when the column sets showPlayPause)
├── Move to top/bottom  (when the column is orderable)
└── Archive Project     (destructive)

Drag rules
├── Reordering is committed on drop; the array is never mutated mid-drag.
├── #N markers read useSortable's own newIndex, so they show the landing
│   position while you drag rather than jumping on release.
├── Reordering is allowed within a column.
└── Cross-column moves are blocked — cards never leave their source column.