onUpdate({ title: e.target.value.replace(/\n/g, " ") })}
          onKeyDown={(e) => {
            if (e.key === "Enter") e.preventDefault();
          }}
          rows={1}
          value={task.title}
        />

<fieldset>
          <legend className="mb-2 font-medium text-muted-foreground text-xs">Status</legend>
          <div className="flex flex-wrap gap-1 rounded-xl bg-muted p-1">
            {columns.map((col) => {
              const active = col.id === task.column;
              return (
                <button
                  aria-pressed={active}
                  className={cn(
                    "relative flex-1 cursor-pointer whitespace-nowrap rounded-lg px-2 py-1.5 font-medium text-xs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
                    active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
                  )}
                  key={col.id}
                  onClick={() => onMove(col.id)}
                  type="button"
                >
                  {active && (
                    <motion.span
                      className="absolute inset-0 rounded-lg bg-background shadow-xs/5"
                      layoutId="status-pill"
                      transition={reduce ? { duration: 0 } : spring}
                    />
                  )}
                  <span className="relative">{col.title}</span>
                </button>
              );
            })}
          </div>
        </fieldset>

<fieldset>
          <legend className="mb-2 font-medium text-muted-foreground text-xs">Priority</legend>
          <div className="flex gap-1.5">
            {priorities.map((p) => (
              <button
                aria-pressed={task.priority === p}
                className={cn(
                  "inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs capitalize outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
                  task.priority === p ? "border-foreground/24 bg-accent font-medium" : "text-muted-foreground hover:bg-accent/60",
                )}
                key={p}
                onClick={() => onUpdate({ priority: p })}
                type="button"
              >
                <PriorityBars priority={p} />
                {p}
              </button>
            ))}
          </div>
        </fieldset>

<fieldset>
          <legend className="mb-2 font-medium text-muted-foreground text-xs">Labels</legend>
          <div className="flex flex-wrap gap-1.5">
            {labels.map((l) => {
              const on = task.labels.includes(l.id);
              return (
                <button
                  aria-pressed={on}
                  className={cn(
                    "inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
                    on ? cn("border-transparent font-medium", toneSoft[l.tone]) : "text-muted-foreground hover:bg-accent/60",
                  )}
                  key={l.id}
                  onClick={() =>
                    onUpdate({ labels: on ? task.labels.filter((id) => id !== l.id) : [...task.labels, l.id] })
                  }
                  type="button"
                >
                  <span className={cn("size-2 rounded-full", toneBg[l.tone])} />
                  {l.name}
                </button>
              );
            })}
          </div>
        </fieldset>

<dl className="grid grid-cols-2 gap-3 text-sm">
          <div className="rounded-xl border p-3">
            <dt className="text-muted-foreground text-xs">Assignee</dt>
            <dd className="mt-1.5 flex items-center gap-2 font-medium">
              {task.assignee ? (
                <>
                  <Avatar name={task.assignee} />
                  <span className="truncate">{task.assignee}</span>
                </>
              ) : (
                <span className="text-muted-foreground">Unassigned</span>
              )}
            </dd>
          </div>
          <div className="rounded-xl border p-3">
            <dt className="text-muted-foreground text-xs">Due</dt>
            <dd className="mt-1.5 flex items-center gap-2 font-medium">
              <CalendarIcon className="size-4 text-muted-foreground" />
              {task.due ?? "No date"}
            </dd>
          </div>
        </dl>

<div>
          <label className="mb-2 block font-medium text-muted-foreground text-xs" htmlFor={`${task.id}-desc`}>
            Description
          </label>
          <Textarea
            id={`${task.id}-desc`}
            onChange={(e) => onUpdate({ description: e.target.value })}
            placeholder="Add more detail…"
            value={task.description ?? ""}
          />
        </div>

<div>
          <div className="mb-2 flex items-center justify-between text-xs">
            <span className="font-medium text-muted-foreground">Checklist</span>
            {checklist.length > 0 && (
              <span className="text-muted-foreground tabular-nums">
                {done}/{checklist.length}
              </span>
            )}
          </div>
          {checklist.length > 0 && (
            <div className="mb-3 h-1.5 overflow-hidden rounded-full bg-muted">
              <motion.div
                animate={{ scaleX: done / checklist.length }}
                className="h-full origin-left rounded-full bg-success"
                initial={false}
                transition={reduce ? { duration: 0 } : spring}
              />
            </div>
          )}
          <ul className="space-y-1">
            {checklist.map((item) => (
              <li key={item.id}>
                <label className="flex cursor-pointer items-center gap-2.5 rounded-lg px-1.5 py-1 text-sm hover:bg-accent/50">
                  <Checkbox
                    checked={item.done}
                    onCheckedChange={(checked) =>
                      onUpdate({
                        checklist: checklist.map((c) => (c.id === item.id ? { ...c, done: Boolean(checked) } : c)),
                      })
                    }
                  />
                  <span className={cn("transition-colors", item.done && "text-muted-foreground line-through")}>
                    {item.text}
                  </span>
                </label>
              </li>
            ))}
          </ul>
          <form className="mt-2" onSubmit={addItem}>
            <InputGroup>
              <InputGroupAddon>
                <PlusIcon />
              </InputGroupAddon>
              <InputGroupInput
                aria-label="Add checklist item"
                onChange={(e) => setNewItem(e.target.value)}
                placeholder="Add an item"
                size="sm"
                value={newItem}
              />
            </InputGroup>
          </form>
        </div>
      </div>
    </motion.aside>
  );
}

interface DragState {
  id: string;
  width: number;
  height: number;
  over: string;
  dropping: boolean;
}

export function KanbanBoard({ columns, labels, tasks: initialTasks, onTasksChange, className }: KanbanBoardProps) {
  const groupId = useId();
  const reduce = useReducedMotion();
  const [tasks, setTasks] = useState(initialTasks);
  const [query, setQuery] = useState("");
  const [activeLabels, setActiveLabels] = useState<string[]>([]);
  const [compact, setCompact] = useState(false);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [addingTo, setAddingTo] = useState<string | null>(null);
  const [draft, setDraft] = useState("");
  const [announcement, setAnnouncement] = useState("");
  const [drag, setDrag] = useState<DragState | null>(null);

useEffect(() => {
    if (firstRender.current) {
      firstRender.current = false;
      return;
    }
    onTasksChangeRef.current?.(tasks);
  }, [tasks]);

const q = query.trim().toLowerCase();
  const matches = (t: BoardTask) =>
    (!q || t.title.toLowerCase().includes(q) || (t.description ?? "").toLowerCase().includes(q)) &&
    (activeLabels.length === 0 || t.labels.some((l) => activeLabels.includes(l)));
  const visible = (t: BoardTask) => matches(t) || t.id === drag?.id;

const updateTask = (id: string, patch: Partial<BoardTask>) =>
    setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, ...patch } : t)));

const columnTitle = (id: string) => columns.find((c) => c.id === id)?.title ?? id;

const refocus = (id: string) =>
    requestAnimationFrame(() =>
      rootRef.current?.querySelector<HTMLElement>(`[data-task-id="${id}"] [data-card]`)?.focus(),
    );

const onCardPointerDown = (event: PointerEvent<HTMLElement>, id: string) => {
    if (event.button !== 0 || dragRef.current) return;
    const fromHandle = (event.target as HTMLElement).closest("[data-drag-handle]");
    if (event.pointerType !== "mouse" && !fromHandle) return;
    const el = (event.currentTarget as HTMLElement).closest<HTMLElement>("[data-task-id]");
    if (!el) return;
    pending.current = { id, x: event.clientX, y: event.clientY, el, pointerId: event.pointerId };
    if (fromHandle) beginDrag(event.clientX, event.clientY);
  };

const selected = tasks.find((t) => t.id === selectedId) ?? null;
  const dragged = drag ? tasks.find((t) => t.id === drag.id) : null;

return (
    <LayoutGroup id={groupId}>
      <div
        className={cn(
          "relative isolate mx-auto flex h-[680px] w-full max-w-[1100px] flex-col overflow-hidden rounded-2xl border bg-card",
          drag && "cursor-grabbing select-none",
          className,
        )}
        onPointerCancel={endDrag}
        onPointerMove={onRootPointerMove}
        onPointerUp={endDrag}
        ref={rootRef}
      >
        <div className="flex flex-wrap items-center gap-2 border-b p-3">
          <InputGroup className="min-w-0 flex-1 sm:w-56 sm:flex-none">
            <InputGroupAddon>
              <SearchIcon />
            </InputGroupAddon>
            <InputGroupInput
              aria-label="Search tasks"
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Search tasks"
              type="search"
              value={query}
            />
          </InputGroup>
          <div aria-label="Filter by label" className="order-last flex w-full gap-1.5 overflow-x-auto py-0.5 sm:order-none sm:w-auto sm:flex-1" role="group">
            {labels.map((l) => {
              const on = activeLabels.includes(l.id);
              return (
                <button
                  aria-pressed={on}
                  className={cn(
                    "inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
                    hit,
                    on ? cn("border-transparent font-medium text-foreground", toneSoft[l.tone]) : "text-muted-foreground hover:bg-accent/60",
                  )}
                  key={l.id}
                  onClick={() => setActiveLabels((prev) => (on ? prev.filter((id) => id !== l.id) : [...prev, l.id]))}
                  type="button"
                >
                  <span className={cn("size-2 rounded-full", toneBg[l.tone])} />
                  {l.name}
                </button>
              );
            })}
            <AnimatePresence>
              {(activeLabels.length > 0 || q) && (
                <motion.button
                  animate={{ opacity: 1, scale: 1 }}
                  className="inline-flex shrink-0 cursor-pointer items-center gap-1 rounded-full px-2 py-1 text-muted-foreground text-xs outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
                  exit={{ opacity: 0, scale: 0.95 }}
                  initial={{ opacity: 0, scale: 0.95 }}
                  transition={{ duration: 0.15, ease: "easeOut" }}
                  onClick={() => {
                    setActiveLabels([]);
                    setQuery("");
                  }}
                  type="button"
                >
                  <XIcon className="size-3" />
                  Clear
                </motion.button>
              )}
            </AnimatePresence>
          </div>
          <label className="ms-auto flex shrink-0 cursor-pointer items-center gap-2 text-muted-foreground text-xs">
            Compact
            <Switch checked={compact} onCheckedChange={setCompact} />
          </label>
        </div>

<motion.div
          className="flex min-h-0 flex-1 snap-x snap-mandatory scroll-px-2 gap-2 overflow-x-auto p-2 lg:snap-none"
          layoutScroll
          ref={scrollerRef}
        >
          {columns.map((col) => {
            const colTasks = tasks.filter((t) => t.column === col.id && visible(t));
            const total = tasks.filter((t) => t.column === col.id).length;
            const isOver = drag?.over === col.id;
            return (
              <section
                aria-label={col.title}
                className={cn(
                  "flex h-full w-[min(280px,82vw)] shrink-0 snap-start flex-col rounded-xl border bg-muted/60 transition-colors duration-150 lg:w-auto lg:min-w-0 lg:flex-1",
                  isOver && "border-foreground/16 bg-accent",
                )}
                key={col.id}
                ref={(el) => {
                  columnRefs.current[col.id] = el;
                }}
              >
                <header className="flex items-center gap-2 ps-3 pe-2 pt-2.5 pb-2">
                  <span className={cn("size-2 rounded-full", toneBg[col.tone ?? "gray"])} />
                  <h3 className="font-medium text-sm">{col.title}</h3>
                  <span className="rounded-full bg-background px-1.5 font-medium text-muted-foreground text-xs tabular-nums">
                    {colTasks.length === total ? total : `${colTasks.length}/${total}`}
                  </span>
                  <button
                    aria-label={`Add task to ${col.title}`}
                    className="relative ms-auto -me-1 inline-flex size-7 cursor-pointer items-center justify-center rounded-lg text-muted-foreground outline-none transition-[color,background-color,transform] duration-150 ease-out after:absolute after:-inset-0.5 after:content-[''] hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.97]"
                    onClick={() => {
                      setAddingTo(addingTo === col.id ? null : col.id);
                      setDraft("");
                    }}
                    type="button"
                  >
                    <PlusIcon className="size-4" />
                  </button>
                </header>
                <motion.div
                  className="relative min-h-0 flex-1 overflow-y-auto px-1.5 pb-1.5"
                  layoutScroll
                  ref={(el) => {
                    listRefs.current[col.id] = el;
                  }}
                >
                  <AnimatePresence initial={false}>
                    {addingTo === col.id && (
                      <motion.form
                        animate={{ opacity: 1, height: "auto" }}
                        className="overflow-hidden"
                        exit={{ opacity: 0, height: 0 }}
                        initial={{ opacity: 0, height: 0 }}
                        onSubmit={(e) => submitDraft(e, col.id)}
                        transition={glide}
                      >
                        <div className="mb-1.5 rounded-md border bg-card p-2">
                          <input
                            aria-label={`New task in ${col.title}`}
                            autoFocus
                            className="w-full bg-transparent px-1 py-1 text-sm outline-none placeholder:text-muted-foreground/72"
                            onChange={(e) => setDraft(e.target.value)}
                            onKeyDown={(e) => {
                              if (e.key === "Escape") setAddingTo(null);
                            }}
                            placeholder="Task title, then Enter"
                            value={draft}
                          />
                          <div className="mt-1 flex justify-end gap-1">
                            <button
                              className="h-7 cursor-pointer rounded-md px-2.5 text-muted-foreground text-xs outline-none transition-[color,background-color,transform] duration-150 ease-out hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.97]"
                              onClick={() => setAddingTo(null)}
                              type="button"
                            >
                              Cancel
                            </button>
                            <button
                              className="h-7 cursor-pointer rounded-md bg-primary px-2.5 font-medium text-primary-foreground text-xs outline-none transition-[opacity,transform] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.97] disabled:cursor-default disabled:opacity-50 disabled:active:scale-100"
                              disabled={!draft.trim()}
                              type="submit"
                            >
                              Add
                            </button>
                          </div>
                        </div>
                      </motion.form>
                    )}
                  </AnimatePresence>
                  <div className={cn("flex flex-col", compact ? "gap-1.5" : "gap-2")}>
                    {colTasks.map((task) =>
                      task.id === drag?.id ? (
                        <motion.div
                          className="rounded-md border-2 border-foreground/16 border-dashed bg-background/50"
                          data-placeholder=""
                          data-task-id={task.id}
                          key={task.id}
                          layout="position"
                          layoutId={task.id}
                          style={{ height: drag.height }}
                          transition={reduce ? { duration: 0 } : spring}
                        />
                      ) : (
                        <motion.div
                          animate={{ opacity: 1, scale: 1 }}
                          className="group relative"
                          data-task-id={task.id}
                          initial={{ opacity: 0, scale: 0.96 }}
                          key={task.id}
                          layout="position"
                          layoutId={task.id}
                          transition={reduce ? { duration: 0 } : spring}
                        >
                          <button
                            aria-describedby={`${groupId}-dnd-help`}
                            className={cn(
                              "block w-full cursor-pointer rounded-md border bg-card text-start shadow-xs/5 outline-none transition-[border-color,box-shadow,transform] duration-150 ease-out hover:border-foreground/16 focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.97] motion-reduce:active:scale-100",
                              compact ? "px-2.5 py-2 ps-3" : "p-3 ps-3.5",
                              selectedId === task.id && "border-foreground/24 ring-2 ring-ring/24",
                            )}
                            data-card=""
                            onClick={() => {
                              if (!justDragged.current) setSelectedId(task.id);
                            }}
                            onKeyDown={(e) => onCardKeyDown(e, task)}
                            onPointerDown={(e) => onCardPointerDown(e, task.id)}
                            type="button"
                          >
                            <CardBody compact={compact} labels={labels} task={task} />
                          </button>
                          <span
                            aria-hidden
                            className="absolute top-1/2 -left-1 flex h-7 w-4 -translate-y-1/2 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 pointer-coarse:opacity-70"
                            data-drag-handle=""
                            onPointerDown={(e) => onCardPointerDown(e, task.id)}
                          >
                            <GripVerticalIcon className="size-3.5" />
                          </span>
                        </motion.div>
                      ),
                    )}
                  </div>
                  {colTasks.length === 0 && (
                    <div className="flex h-24 items-center justify-center rounded-md border border-dashed text-muted-foreground text-xs">
                      {total > 0 ? "No matching tasks" : drag ? "Drop here" : "Nothing here yet"}
                    </div>
                  )}
                </motion.div>
              </section>
            );
          })}
        </motion.div>

{drag && dragged && (
          <motion.div
            animate={drag.dropping ? { rotate: 0, scale: 1 } : { rotate: 2.5, scale: 1.03 }}
            className="pointer-events-none absolute top-0 left-0 z-40"
            initial={{ rotate: 0, scale: 1 }}
            style={{ x: ox, y: oy, width: drag.width }}
            transition={reduce ? { duration: 0 } : spring}
          >
            <div
              className={cn(
                "rounded-md border border-foreground/16 bg-card shadow-lg/8 ring-4 ring-foreground/4",
                compact ? "px-2.5 py-2 ps-3" : "p-3 ps-3.5",
              )}
            >
              <CardBody compact={compact} labels={labels} task={dragged} />
            </div>
          </motion.div>
        )}

<AnimatePresence>
          {selected && (
            <motion.div
              animate={{ opacity: 1 }}
              className="absolute inset-0 z-20 bg-background/40"
              exit={{ opacity: 0 }}
              initial={{ opacity: 0 }}
              key="scrim"
              onClick={() => setSelectedId(null)}
            />
          )}
          {selected && (
            <TaskDetail
              columns={columns}
              key="detail"
              labels={labels}
              onClose={() => {
                const id = selected.id;
                setSelectedId(null);
                refocus(id);
              }}
              onMove={(column) => moveToColumn(selected.id, column)}
              onUpdate={(patch) => updateTask(selected.id, patch)}
              task={selected}
            />
          )}
        </AnimatePresence>

<p className="sr-only" id={`${groupId}-dnd-help`}>
          Press Enter to open. Shift plus arrow keys moves the task between columns or up and down.
        </p>
        <p aria-live="polite" className="sr-only">
          {announcement}
        </p>
      </div>
    </LayoutGroup>
  );
}
```