@svgrid/grid 2.1.22 → 2.2.0

package/dist/SvGridBoard.svelte

@@ -1,2339 +1,2339 @@
-<script
-  lang="ts"
-  generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData"
->
-  // Kanban board renderer for SvGrid. Rendered in place of the table when the
-  // `board` prop is set. Everything a board needs is built in here:
-  //   - buckets rows into lanes by a field (explicit lanes or derived)
-  //   - renders each row as a card (default template or a `card` snippet)
-  //   - mouse drag-and-drop between and within lanes, with a live insertion
-  //     marker, AND keyboard drag-and-drop (grab with Space, move with arrows)
-  //   - the move itself (lane reassign + reorder) is computed and applied here
-  //     as a per-row overlay keyed by row id, so consumers write no move code;
-  //     `onCardMove` fires purely as a notification for persistence / mirroring
-  // Themes entirely from the grid's `--sg-*` tokens.
-  import { tick } from "svelte";
-  import type { ColumnDef, RowData, TableFeatures } from "./index";
-  import type { BoardConfig, BoardLane, BoardSubtask, BoardComment } from "./SvGrid.types";
-  import SvMenuList, { type MenuItem } from "./SvMenuList.svelte";
-  import SvForm, { type FormField, type FormFieldType } from "./SvForm.svelte";
-  import SvDrawer from "./SvDrawer.svelte";
-  import { portalToBody, popIn } from "./popover";
-  import { createDismissableLayer } from "./a11y/dismissable";
-
-  let {
-    data,
-    columns,
-    board,
-    getRowId,
-  }: {
-    data: ReadonlyArray<TData>;
-    columns: Array<ColumnDef<TFeatures, TData>>;
-    board: BoardConfig<TFeatures, TData>;
-    getRowId?: (row: TData, index: number) => string;
-  } = $props();
-
-  const groupBy = $derived(board.groupBy);
-
-  // --- value access (casts live here, never in the template) ---
-  function fieldValue(row: TData, field: string): unknown {
-    // Saved edits show immediately without mutating the consumer's rows.
-    const e = edits[key(row)];
-    if (e && field in e) return e[field];
-    return (row as Record<string, unknown>)[field];
-  }
-  function rawLane(row: TData): string {
-    const v = fieldValue(row, groupBy);
-    return v == null ? "" : String(v);
-  }
-  function fmt(value: unknown): string {
-    if (value == null) return "";
-    if (value instanceof Date) return value.toLocaleDateString();
-    return String(value);
-  }
-
-  // --- stable per-row key (getRowId, else a synthetic id pinned to the row
-  // object) so the move overlay survives data adds/removes and re-sorts ---
-  const indexOf = $derived(new Map<TData, number>(data.map((r, i) => [r, i])));
-  const synthetic = new WeakMap<object, string>();
-  let synthSeq = 0;
-  function key(row: TData): string {
-    if (getRowId) return getRowId(row, indexOf.get(row) ?? 0);
-    const obj = row as unknown as object;
-    let id = synthetic.get(obj);
-    if (!id) {
-      id = `__b${++synthSeq}`;
-      synthetic.set(obj, id);
-    }
-    return id;
-  }
-
-  // --- the move overlay: rowKey -> lane and rowKey -> sort order. Applied on
-  // top of the data; never mutates the consumer's rows. The edit overlay does
-  // the same for saved field values. ---
-  let laneOf = $state<Record<string, string>>({});
-  let orderOf = $state<Record<string, number>>({});
-  let swimOf = $state<Record<string, string>>({});
-  let edits = $state<Record<string, Record<string, unknown>>>({});
-  let subDone = $state<Record<string, Record<string, boolean>>>({});
-  let subAdded = $state<Record<string, BoardSubtask[]>>({});
-  let laneOrder = $state<string[]>([]);
-  let collapsedSwim = $state<Record<string, boolean>>({});
-
-  function effectiveLane(row: TData): string {
-    return laneOf[key(row)] ?? rawLane(row);
-  }
-  function ord(row: TData): number {
-    return orderOf[key(row)] ?? (indexOf.get(row) ?? 0);
-  }
-
-  // --- swimlanes: an optional second axis (board.swimlaneBy). ---
-  const swimField = $derived(board.swimlaneBy);
-  function rawSwim(row: TData): string {
-    if (!swimField) return "";
-    const v = fieldValue(row, swimField);
-    return v == null ? "" : String(v);
-  }
-  function effectiveSwim(row: TData): string {
-    return swimOf[key(row)] ?? rawSwim(row);
-  }
-  const swimlanes = $derived.by<Array<{ id: string; title: string }>>(() => {
-    if (!swimField) return [];
-    const seen = new Set<string>();
-    const out: Array<{ id: string; title: string }> = [];
-    for (const row of data) {
-      const k = rawSwim(row);
-      if (!seen.has(k)) {
-        seen.add(k);
-        out.push({ id: k, title: k === "" ? "(none)" : k });
-      }
-    }
-    return out;
-  });
-
-  // --- lane collapse ---
-  let collapsed = $state<Record<string, boolean>>({});
-  function toggleCollapse(laneId: string) {
-    if (board.collapsibleLanes) collapsed[laneId] = !collapsed[laneId];
-  }
-  function toggleSwim(swimId: string) {
-    if (board.collapsibleSwimlanes) collapsedSwim[swimId] = !collapsedSwim[swimId];
-  }
-
-  // --- inline lane rename (board.onLaneRename) ---
-  let renamingLane = $state<string | null>(null);
-  let renameText = $state("");
-  function startRename(lane: BoardLane) {
-    if (!board.onLaneRename) return;
-    renamingLane = lane.id;
-    renameText = laneTitle(lane);
-  }
-  function commitRename(laneId: string) {
-    const t = renameText.trim();
-    renamingLane = null;
-    if (t) board.onLaneRename?.(laneId, t);
-  }
-
-  // --- layout persistence: the overlay + collapse state, saved to
-  // localStorage (persistKey) and/or emitted via onLayoutChange. Needs a
-  // stable getRowId so the keys survive a reload. ---
-  const canPersist = $derived(!!board.persistKey && !!getRowId);
-  function serializeLayout() {
-    return {
-      laneOf: { ...laneOf },
-      orderOf: { ...orderOf },
-      swimOf: { ...swimOf },
-      edits: { ...edits },
-      collapsed: { ...collapsed },
-      subDone: { ...subDone },
-      subAdded: { ...subAdded },
-      laneOrder: [...laneOrder],
-      collapsedSwim: { ...collapsedSwim },
-    };
-  }
-  // Restore once at init (before first paint).
-  if (board.persistKey && getRowId && typeof localStorage !== "undefined") {
-    try {
-      const raw = localStorage.getItem(board.persistKey);
-      if (raw) {
-        const s = JSON.parse(raw);
-        laneOf = s.laneOf ?? {};
-        orderOf = s.orderOf ?? {};
-        swimOf = s.swimOf ?? {};
-        edits = s.edits ?? {};
-        collapsed = s.collapsed ?? {};
-        subDone = s.subDone ?? {};
-        subAdded = s.subAdded ?? {};
-        laneOrder = s.laneOrder ?? [];
-        collapsedSwim = s.collapsedSwim ?? {};
-      }
-    } catch {
-      /* ignore corrupt/blocked storage */
-    }
-  }
-  let layoutLoaded = false;
-  $effect(() => {
-    const layout = serializeLayout(); // reads every map -> tracks changes
-    // Skip the initial run so we don't rewrite what we just restored.
-    if (!layoutLoaded) {
-      layoutLoaded = true;
-      return;
-    }
-    if (canPersist && typeof localStorage !== "undefined") {
-      try {
-        localStorage.setItem(board.persistKey as string, JSON.stringify(layout));
-      } catch {
-        /* ignore */
-      }
-    }
-    board.onLayoutChange?.(layout);
-  });
-
-  // --- per-lane virtualization (fixed-height windowing) ---
-  const virtualized = $derived(board.virtualized === true);
-  const cardH = $derived(board.cardHeight ?? 76);
-  const VOVERSCAN = 4;
-  const VGAP = 8;
-  let laneScroll = $state<Record<string, number>>({});
-  let laneVh = $state<Record<string, number>>({});
-  const laneBodyEl = new Map<string, HTMLElement>();
-  function cellKey(laneId: string, swimId: string | null): string {
-    return `${swimId ?? ""}::${laneId}`;
-  }
-  function laneWindow(laneId: string, swimId: string | null, count: number) {
-    if (!virtualized) return { start: 0, end: count, top: 0, bottom: 0 };
-    const ck = cellKey(laneId, swimId);
-    const stride = cardH + VGAP;
-    const scroll = laneScroll[ck] ?? 0;
-    const vh = laneVh[ck] || 400;
-    const start = Math.max(0, Math.floor(scroll / stride) - VOVERSCAN);
-    const end = Math.min(count, Math.ceil((scroll + vh) / stride) + VOVERSCAN);
-    return { start, end, top: start * stride, bottom: Math.max(0, (count - end) * stride) };
-  }
-  // Svelte action: track a lane body's scroll + height so windowing follows it.
-  function trackLane(node: HTMLElement, ck: string) {
-    laneBodyEl.set(ck, node);
-    const update = () => {
-      laneScroll[ck] = node.scrollTop;
-      laneVh[ck] = node.clientHeight;
-    };
-    update();
-    node.addEventListener("scroll", update, { passive: true });
-    let ro: ResizeObserver | undefined;
-    if (typeof ResizeObserver !== "undefined") {
-      ro = new ResizeObserver(update);
-      ro.observe(node);
-    }
-    return {
-      update(nextCk: string) {
-        laneBodyEl.delete(ck);
-        ck = nextCk;
-        laneBodyEl.set(ck, node);
-        update();
-      },
-      destroy() {
-        laneBodyEl.delete(ck);
-        node.removeEventListener("scroll", update);
-        ro?.disconnect();
-      },
-    };
-  }
-
-  // --- columns lookup + default title/meta fields ---
-  const fieldColumns = $derived(
-    columns.filter((c) => typeof c.field === "string"),
-  );
-  function headerLabel(field: string): string {
-    const col = fieldColumns.find((c) => c.field === field);
-    return col && typeof col.header === "string" ? col.header : field;
-  }
-  const titleField = $derived(
-    board.titleField ?? (fieldColumns[0]?.field as string | undefined),
-  );
-  const metaFields = $derived.by(() => {
-    if (board.cardFields) return board.cardFields.slice(0, 4);
-    return fieldColumns
-      .map((c) => c.field as string)
-      .filter((f) => f !== titleField && f !== groupBy)
-      .slice(0, 3);
-  });
-
-  // --- built-in card editor: fields come from columns with an editorType (or
-  // all fields if none declare one). Edits go to the overlay + `onCardCommit`.
-  const editable = $derived(board.editable === true);
-  const editColumns = $derived.by(() => {
-    const typed = fieldColumns.filter((c) => c.editorType);
-    return (typed.length ? typed : fieldColumns).filter(
-      (c) => c.field !== groupBy,
-    );
-  });
-  function editorKind(col: (typeof editColumns)[number]): string {
-    const t = col.editorType;
-    if (t === "number") return "number";
-    if (t === "checkbox") return "checkbox";
-    if (t === "date") return "date";
-    return "text";
-  }
-
-  let editingKey = $state<string | null>(null);
-  let draft = $state<Record<string, unknown>>({});
-
-  function openEditor(row: TData) {
-    if (board.onCardEdit) {
-      board.onCardEdit(row);
-      return;
-    }
-    if (board.drawer) {
-      drawerRow = row;
-      return;
-    }
-    if (!editable) return;
-    const next: Record<string, unknown> = {};
-    for (const col of editColumns) {
-      const f = col.field as string;
-      next[f] = fieldValue(row, f);
-    }
-    draft = next;
-    editingKey = key(row);
-  }
-  function saveEditor(row: TData) {
-    const k = key(row);
-    const changes: Record<string, unknown> = {};
-    for (const col of editColumns) {
-      const f = col.field as string;
-      if (draft[f] !== fieldValue(row, f)) changes[f] = draft[f];
-    }
-    edits[k] = { ...(edits[k] ?? {}), ...draft };
-    editingKey = null;
-    board.onCardCommit?.({ row, changes, values: { ...draft } });
-  }
-  function cancelEditor() {
-    editingKey = null;
-    draft = {};
-  }
-  function onDraftInput(field: string, kind: string, e: Event) {
-    const el = e.currentTarget as HTMLInputElement;
-    draft[field] =
-      kind === "checkbox"
-        ? el.checked
-        : kind === "number"
-          ? el.value === ""
-            ? null
-            : Number(el.value)
-          : el.value;
-  }
-
-  // --- built-in detail drawer (board.drawer): an SvDrawer + SvForm of the
-  // card's fields, rendered with the UI-kit editors. ---
-  let drawerRow = $state.raw<TData | null>(null);
-  const drawerCfg = $derived(
-    board.drawer && typeof board.drawer === "object" ? board.drawer : null,
-  );
-  type DrawerCol = ColumnDef<TFeatures, TData>;
-  const drawerFieldCols = $derived.by<DrawerCol[]>(() => {
-    const wanted = drawerCfg?.fields;
-    if (wanted && wanted.length) {
-      return wanted
-        .map((f) => fieldColumns.find((c) => c.field === f))
-        .filter((c): c is DrawerCol => !!c);
-    }
-    return fieldColumns;
-  });
-  function formType(t: string | undefined): FormFieldType {
-    switch (t) {
-      case "number":
-        return "number";
-      case "checkbox":
-        return "checkbox";
-      case "date":
-      case "date-native":
-      case "datetime":
-      case "datetime-native":
-        return "date";
-      case "textarea":
-        return "textarea";
-      case "password":
-        return "password";
-      case "color":
-        return "color";
-      case "list":
-      case "select":
-      case "rich-select":
-        return "select";
-      default:
-        return "text";
-    }
-  }
-  function drawerOptions(col: DrawerCol, row: TData) {
-    const raw =
-      typeof col.editorOptions === "function" ? col.editorOptions(row) : col.editorOptions;
-    if (!raw) return undefined;
-    return raw.map((o) =>
-      typeof o === "object"
-        ? { value: o.value, label: o.label ?? String(o.value) }
-        : { value: o, label: String(o) },
-    );
-  }
-  function drawerForm(row: TData): FormField[] {
-    return drawerFieldCols.map((col) => {
-      const f = col.field as string;
-      const type = formType(col.editorType);
-      return {
-        name: f,
-        label: typeof col.header === "string" ? col.header : f,
-        type,
-        options: type === "select" ? drawerOptions(col, row) : undefined,
-      };
-    });
-  }
-  function drawerInitial(row: TData): Record<string, unknown> {
-    const out: Record<string, unknown> = {};
-    for (const col of drawerFieldCols) {
-      const f = col.field as string;
-      out[f] = fieldValue(row, f);
-    }
-    return out;
-  }
-  function drawerTitleOf(row: TData): string {
-    const t = drawerCfg?.title;
-    if (typeof t === "function") return t(row);
-    if (typeof t === "string") return t;
-    return titleField ? fmt(fieldValue(row, titleField)) : "Details";
-  }
-  function onDrawerSubmit(row: TData, values: Record<string, unknown>) {
-    const k = key(row);
-    const changes: Record<string, unknown> = {};
-    for (const [f, v] of Object.entries(values)) {
-      if (v !== fieldValue(row, f)) changes[f] = v;
-    }
-    edits[k] = { ...(edits[k] ?? {}), ...values };
-    board.onCardCommit?.({ row, changes, values });
-    drawerRow = null;
-  }
-
-  // --- sub-tasks (checklist on a card). Toggles/adds live in an overlay so the
-  // consumer's data is never mutated; callbacks notify. subDone/subAdded are
-  // declared with the other overlays above (so persistence can read them). ---
-  let subOpen = $state<Record<string, boolean>>({});
-  let subSeq = 0;
-  function baseSubtasks(row: TData): BoardSubtask[] {
-    if (!board.subtasks) return [];
-    const v = fieldValue(row, board.subtasks);
-    return Array.isArray(v) ? (v as BoardSubtask[]) : [];
-  }
-  function subtasksOf(row: TData): BoardSubtask[] {
-    const k = key(row);
-    const overrides = subDone[k] ?? {};
-    const base = baseSubtasks(row).map((s) =>
-      String(s.id) in overrides ? { ...s, done: overrides[String(s.id)]! } : s,
-    );
-    return [...base, ...(subAdded[k] ?? [])];
-  }
-  function subProgress(row: TData): { done: number; total: number } {
-    const list = subtasksOf(row);
-    return { done: list.filter((s) => s.done).length, total: list.length };
-  }
-  function toggleSubtask(row: TData, sub: BoardSubtask) {
-    const k = key(row);
-    const next = !sub.done;
-    const added = subAdded[k];
-    const inAdded = added?.find((s) => String(s.id) === String(sub.id));
-    if (inAdded) inAdded.done = next;
-    else subDone[k] = { ...(subDone[k] ?? {}), [String(sub.id)]: next };
-    board.onSubtaskToggle?.(row, sub.id, next);
-  }
-  function addSubtask(row: TData, title: string) {
-    const t = title.trim();
-    if (!t) return;
-    const k = key(row);
-    subAdded[k] = [...(subAdded[k] ?? []), { id: `s${++subSeq}`, title: t, done: false }];
-    board.onSubtaskAdd?.(row, t);
-  }
-
-  // --- card badges (default card): labels, due date, assignees ---
-  function labelsOf(row: TData): Array<{ text: string; color?: string }> {
-    if (!board.labelsField) return [];
-    const v = fieldValue(row, board.labelsField);
-    if (!Array.isArray(v)) return [];
-    return v.map((l) =>
-      typeof l === "string" ? { text: l } : (l as { text: string; color?: string }),
-    );
-  }
-  function assigneesOf(row: TData): string[] {
-    if (!board.assigneesField) return [];
-    const v = fieldValue(row, board.assigneesField);
-    if (Array.isArray(v)) return v.map(String);
-    return v == null ? [] : [String(v)];
-  }
-  function dueOf(row: TData): { label: string; overdue: boolean } | null {
-    if (!board.dueField) return null;
-    const v = fieldValue(row, board.dueField);
-    if (v == null || v === "") return null;
-    const d = v instanceof Date ? v : new Date(String(v));
-    if (Number.isNaN(d.getTime())) return { label: String(v), overdue: false };
-    const overdue = d.getTime() < todayStart;
-    return { label: d.toLocaleDateString(undefined, { month: "short", day: "numeric" }), overdue };
-  }
-  function initials(name: string): string {
-    return name.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase();
-  }
-  function countOf(row: TData, field: string | undefined): number {
-    if (!field) return 0;
-    const v = fieldValue(row, field);
-    if (Array.isArray(v)) return v.length;
-    if (typeof v === "number") return v;
-    return 0;
-  }
-  function coverColorOf(row: TData): string | null {
-    if (!board.coverField) return null;
-    const v = fieldValue(row, board.coverField);
-    return v == null || v === "" ? null : String(v);
-  }
-  const todayStart = (() => {
-    const n = new Date();
-    return new Date(n.getFullYear(), n.getMonth(), n.getDate()).getTime();
-  })();
-  function isFlagged(row: TData): boolean {
-    return board.flagField ? !!fieldValue(row, board.flagField) : false;
-  }
-  function flagReason(row: TData): string | null {
-    if (!board.flagField) return null;
-    const v = fieldValue(row, board.flagField);
-    return typeof v === "string" && v.trim() ? v : null;
-  }
-  // A blocked card is locked from moving unless flagBlocksMoves is false.
-  const flagBlocksMoves = $derived(board.flagBlocksMoves !== false);
-  function movable(row: TData): boolean {
-    return !(flagBlocksMoves && isFlagged(row));
-  }
-
-  // --- comments (read / write / delete) ---
-  let commentsOpen = $state<Record<string, boolean>>({});
-  function commentsOf(row: TData): BoardComment[] {
-    if (!board.commentsField) return [];
-    const v = fieldValue(row, board.commentsField);
-    if (!Array.isArray(v)) return [];
-    return v.map((c, i) =>
-      typeof c === "string"
-        ? { id: i, text: c }
-        : (c as BoardComment),
-    );
-  }
-  function addComment(row: TData, text: string) {
-    const t = text.trim();
-    if (t) board.onCommentAdd?.(row, t);
-  }
-  function deleteComment(row: TData, id: string | number) {
-    board.onCommentDelete?.(row, id);
-  }
-  function ageOf(row: TData): string | null {
-    if (!board.ageField) return null;
-    const v = fieldValue(row, board.ageField);
-    if (v == null || v === "") return null;
-    const d = v instanceof Date ? v : new Date(String(v));
-    if (Number.isNaN(d.getTime())) return null;
-    const days = Math.floor((todayStart - d.getTime()) / 86400000);
-    if (days <= 0) return "today";
-    if (days < 7) return `${days}d`;
-    if (days < 30) return `${Math.floor(days / 7)}w`;
-    return `${Math.floor(days / 30)}mo`;
-  }
-
-  // --- facet filter bar (board.facets) ---
-  let facetSel = $state<Record<string, string[]>>({});
-  function rowFacetValues(row: TData, field: string): string[] {
-    const v = fieldValue(row, field);
-    if (Array.isArray(v))
-      return v.map((el) =>
-        typeof el === "string" ? el : String((el as { text?: unknown }).text ?? el),
-      );
-    return v == null || v === "" ? [] : [String(v)];
-  }
-  function facetOptions(field: string): Array<{ value: string; count: number }> {
-    const counts = new Map<string, number>();
-    for (const row of data)
-      for (const val of rowFacetValues(row, field)) counts.set(val, (counts.get(val) ?? 0) + 1);
-    return [...counts.entries()].map(([value, count]) => ({ value, count }));
-  }
-  function toggleFacet(field: string, value: string) {
-    const cur = facetSel[field] ?? [];
-    facetSel[field] = cur.includes(value) ? cur.filter((v) => v !== value) : [...cur, value];
-  }
-  function clearFacets() {
-    facetSel = {};
-  }
-  const anyFacet = $derived(Object.values(facetSel).some((a) => a.length > 0));
-  function matchesFacets(row: TData): boolean {
-    for (const [field, sel] of Object.entries(facetSel)) {
-      if (!sel.length) continue;
-      const vals = rowFacetValues(row, field);
-      if (!sel.some((s) => vals.includes(s))) return false;
-    }
-    return true;
-  }
-
-  // --- multi-select (board.selectable) ---
-  let selected = $state<Record<string, boolean>>({});
-  function selectedRows(): TData[] {
-    return data.filter((r) => selected[key(r)]);
-  }
-  function emitSelection() {
-    board.onSelectionChange?.(selectedRows());
-  }
-  function onCardClick(e: MouseEvent, row: TData) {
-    if (!board.selectable) return;
-    const k = key(row);
-    if (e.ctrlKey || e.metaKey) {
-      selected[k] = !selected[k];
-    } else {
-      selected = { [k]: true };
-    }
-    emitSelection();
-  }
-
-  // --- child cards (board.childrenField) - epic -> stories ---
-  let childOpen = $state<Record<string, boolean>>({});
-  function childrenOf(row: TData): TData[] {
-    if (!board.childrenField) return [];
-    const v = fieldValue(row, board.childrenField);
-    return Array.isArray(v) ? (v as TData[]) : [];
-  }
-
-  // --- quick-add composer (per lane) ---
-  let composerOpen = $state<Record<string, boolean>>({});
-  let composerText = $state<Record<string, string>>({});
-  function submitComposer(laneId: string) {
-    const t = (composerText[laneId] ?? "").trim();
-    if (t) board.onCardAdd?.(laneId, t);
-    composerText[laneId] = "";
-  }
-  function focusNode(node: HTMLElement) {
-    node.focus();
-  }
-
-  // --- lane model: explicit lanes, else distinct field values (first-seen).
-  // Derived from the RAW field, not the move overlay, so the lane order stays
-  // stable when a card is moved. (Pass `lanes` to pin the order explicitly.) ---
-  const lanes = $derived.by<BoardLane[]>(() => {
-    let base: BoardLane[];
-    if (board.lanes && board.lanes.length) {
-      base = [...board.lanes];
-    } else {
-      const seen = new Set<string>();
-      base = [];
-      for (const row of data) {
-        const k = rawLane(row);
-        if (!seen.has(k)) {
-          seen.add(k);
-          base.push({ id: k, title: k === "" ? "(empty)" : k });
-        }
-      }
-    }
-    if (!laneOrder.length) return base;
-    // Apply the drag-reorder overlay: ordered ids first, then any new lanes.
-    const byId = new Map(base.map((l) => [l.id, l]));
-    const ordered = laneOrder.map((id) => byId.get(id)).filter((l): l is BoardLane => !!l);
-    const rest = base.filter((l) => !laneOrder.includes(l.id));
-    return [...ordered, ...rest];
-  });
-
-  // --- lane drag-reorder (drag lane headers) ---
-  let dragLaneId = $state<string | null>(null);
-  let overLaneId = $state<string | null>(null);
-  function onLaneHeaderDragStart(e: DragEvent, laneId: string) {
-    dragLaneId = laneId;
-    if (e.dataTransfer) {
-      e.dataTransfer.effectAllowed = "move";
-      e.dataTransfer.setData("text/plain", `lane:${laneId}`);
-    }
-  }
-  function onLaneHeaderDragOver(e: DragEvent, laneId: string) {
-    if (dragLaneId == null || laneId === dragLaneId) return;
-    e.preventDefault();
-    overLaneId = laneId;
-  }
-  function onLaneHeaderDrop(e: DragEvent, laneId: string) {
-    if (dragLaneId == null) return;
-    e.preventDefault();
-    const ids = lanes.map((l) => l.id);
-    const to = ids.indexOf(laneId);
-    if (to > -1) reorderLaneTo(dragLaneId, to);
-    dragLaneId = null;
-    overLaneId = null;
-  }
-  function onLaneHeaderDragEnd() {
-    dragLaneId = null;
-    overLaneId = null;
-  }
-
-  // Shared by mouse drag-drop (above) and keyboard reorder (below): moves
-  // `fromId` to `toIndex` in the lane order, persists it, and notifies.
-  // Returns the new ordered ids, or null if the move was a no-op / invalid.
-  function reorderLaneTo(fromId: string, toIndex: number): string[] | null {
-    const ids = lanes.map((l) => l.id);
-    const from = ids.indexOf(fromId);
-    if (from < 0 || toIndex < 0 || toIndex >= ids.length || from === toIndex) return null;
-    ids.splice(toIndex, 0, ids.splice(from, 1)[0]!);
-    laneOrder = ids;
-    board.onLaneReorder?.(ids);
-    return ids;
-  }
-  // Keyboard lane reorder: Ctrl/Cmd+ArrowLeft/Right shifts the focused lane
-  // header by one position, mirroring the drag-reorder above.
-  function onLaneHeaderKeydown(e: KeyboardEvent, laneId: string) {
-    if (!board.reorderableLanes) return;
-    if ((e.key !== "ArrowLeft" && e.key !== "ArrowRight") || !(e.ctrlKey || e.metaKey)) return;
-    e.preventDefault();
-    const ids = lanes.map((l) => l.id);
-    const from = ids.indexOf(laneId);
-    if (from < 0) return;
-    const to = from + (e.key === "ArrowRight" ? 1 : -1);
-    const moved = reorderLaneTo(laneId, to);
-    if (moved) {
-      const pos = moved.indexOf(laneId) + 1;
-      announce(`Moved ${laneTitleById(laneId)} to position ${pos} of ${moved.length}.`);
-    }
-  }
-
-  // Runtime group-by change: the position overlay (laneOf/orderOf/laneOrder) is
-  // keyed to the old field, so reset it when `groupBy` changes. Edits and
-  // sub-tasks (keyed by row) are kept. Skips the initial run so a restored
-  // layout isn't wiped on mount.
-  let gbInitialized = false;
-  let prevGroupBy: string | undefined;
-  $effect(() => {
-    const g = groupBy;
-    if (!gbInitialized) {
-      gbInitialized = true;
-      prevGroupBy = g;
-      return;
-    }
-    if (g !== prevGroupBy) {
-      prevGroupBy = g;
-      laneOf = {};
-      orderOf = {};
-      laneOrder = [];
-    }
-  });
-
-  function laneCards(laneId: string, swimId: string | null = null): TData[] {
-    return data
-      .filter(
-        (r) =>
-          effectiveLane(r) === laneId &&
-          (swimId == null || effectiveSwim(r) === swimId) &&
-          matchesFacets(r),
-      )
-      .sort((a, b) => ord(a) - ord(b));
-  }
-  function laneTitle(lane: BoardLane): string {
-    return lane.title ?? (lane.id === "" ? "(empty)" : lane.id);
-  }
-  function laneWip(laneId: string): number | undefined {
-    return lanes.find((l) => l.id === laneId)?.wipLimit ?? undefined;
-  }
-  function swimRows(swimId: string): TData[] {
-    return data.filter((r) => effectiveSwim(r) === swimId && matchesFacets(r));
-  }
-  function swimCount(swimId: string): number {
-    return swimRows(swimId).length;
-  }
-
-  // --- the one place a move is applied: compute the new order slot and record
-  // it in the overlay, then notify. `pos` is the insertion index within the
-  // destination lane (excluding the moved card). Returns false if rejected. ---
-  function applyMove(
-    row: TData,
-    fromLane: string,
-    toLane: string,
-    pos: number,
-    toSwim: string | null = null,
-    fromSwim: string | null = null,
-  ): boolean {
-    const sameCell = fromLane === toLane && (toSwim == null || toSwim === fromSwim);
-    // WIP enforcement: reject a move INTO a different lane past its limit.
-    if (board.enforceWip && !sameCell) {
-      const lim = laneWip(toLane);
-      if (lim != null && laneCards(toLane, toSwim).filter((r) => r !== row).length >= lim) {
-        announce(`${laneTitleById(toLane)} is at its WIP limit (${lim}).`);
-        return false;
-      }
-    }
-    const list = laneCards(toLane, toSwim).filter((r) => r !== row);
-    const clamped = Math.max(0, Math.min(pos, list.length));
-    if (sameCell) {
-      const currentPos = laneCards(fromLane, toSwim).indexOf(row);
-      if (currentPos === clamped) return false;
-    }
-    const before = list[clamped - 1];
-    const after = list[clamped];
-    let newOrd: number;
-    if (before && after) newOrd = (ord(before) + ord(after)) / 2;
-    else if (before) newOrd = ord(before) + 1;
-    else if (after) newOrd = ord(after) - 1;
-    else newOrd = 0;
-    const k = key(row);
-    laneOf[k] = toLane;
-    orderOf[k] = newOrd;
-    if (swimField && toSwim != null) swimOf[k] = toSwim;
-    board.onCardMove?.({
-      row,
-      fromLane,
-      toLane,
-      toIndex: clamped,
-      ...(swimField ? { fromSwimlane: fromSwim ?? undefined, toSwimlane: toSwim ?? undefined } : {}),
-    });
-    return true;
-  }
-
-  // --- mouse drag & drop ---
-  // Row-holding state is `$state.raw` so the stored object keeps its identity
-  // (plain `$state` would proxy it and break `row === dragRow` comparisons).
-  let dragRow = $state.raw<TData | null>(null);
-  let dragFromLane = $state<string | null>(null);
-  let dragFromSwim = $state<string | null>(null);
-  let overLane = $state<string | null>(null);
-  let overSwim = $state<string | null>(null);
-  let overRow = $state.raw<TData | null>(null);
-  let overAfter = $state(false);
-
-  function markerIndex(laneId: string, swimId: string | null, cards: TData[]): number {
-    if (!dragRow || overLane !== laneId || overSwim !== swimId) return -1;
-    if (!overRow) return cards.length;
-    const i = cards.indexOf(overRow);
-    if (i < 0) return cards.length;
-    return overAfter ? i + 1 : i;
-  }
-
-  function onCardDragStart(e: DragEvent, row: TData, fromLane: string, fromSwim: string | null) {
-    if (!movable(row)) {
-      e.preventDefault();
-      return;
-    }
-    // Dragging an unselected card (with multi-select on) reduces the selection
-    // to just it, so the drag moves what the user grabbed.
-    if (board.selectable && !selected[key(row)]) {
-      selected = { [key(row)]: true };
-      emitSelection();
-    }
-    dragRow = row;
-    dragFromLane = fromLane;
-    dragFromSwim = fromSwim;
-    if (e.dataTransfer) {
-      e.dataTransfer.effectAllowed = "move";
-      e.dataTransfer.setData("text/plain", key(row));
-    }
-  }
-  function onCardDragOver(e: DragEvent, row: TData, laneId: string, swimId: string | null) {
-    if (!dragRow) return;
-    e.preventDefault();
-    e.stopPropagation();
-    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    overLane = laneId;
-    overSwim = swimId;
-    overRow = row;
-    overAfter = e.clientY - rect.top > rect.height / 2;
-  }
-  function onLaneDragOver(e: DragEvent, laneId: string, swimId: string | null) {
-    if (!dragRow) return;
-    e.preventDefault();
-    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-    // Only claim the append slot when the pointer is over empty lane space
-    // (a card's own handler stops propagation for the over-a-card case).
-    if (e.target === e.currentTarget) {
-      overLane = laneId;
-      overSwim = swimId;
-      overRow = null;
-    }
-  }
-  function onLaneDrop(e: DragEvent, laneId: string, swimId: string | null) {
-    e.preventDefault();
-    const row = dragRow;
-    const fromLane = dragFromLane;
-    const fromSwim = dragFromSwim;
-    const target = overRow;
-    const after = overAfter;
-    resetDrag();
-    if (!row || fromLane == null) return;
-    // Multi-select: dragging a selected card moves the whole selection.
-    const multi = board.selectable && selected[key(row)] && selectedRows().length > 1;
-    const movers = multi ? selectedRows() : [row];
-    const moverKeys = new Set(movers.map((r) => key(r)));
-    const rest = laneCards(laneId, swimId).filter((r) => !moverKeys.has(key(r)));
-    let pos: number;
-    if (!target || moverKeys.has(key(target))) pos = rest.length;
-    else {
-      const i = rest.indexOf(target);
-      pos = i < 0 ? rest.length : after ? i + 1 : i;
-    }
-    movers.forEach((r, i) => applyMove(r, effectiveLane(r), laneId, pos + i, swimId, fromSwim));
-  }
-  function resetDrag() {
-    dragRow = null;
-    dragFromLane = null;
-    dragFromSwim = null;
-    overLane = null;
-    overSwim = null;
-    overRow = null;
-    overAfter = false;
-  }
-
-  // --- keyboard drag & drop (grab with Space/Enter, move with arrows) ---
-  let grabbed = $state.raw<TData | null>(null);
-  let grabInfo: { lane: string; order: number; swim: string } | null = null;
-  let liveMsg = $state("");
-
-  function announce(msg: string) {
-    liveMsg = msg;
-  }
-
-  function laneIndex(laneId: string): number {
-    return lanes.findIndex((l) => l.id === laneId);
-  }
-
-  function onCardKeydown(e: KeyboardEvent, row: TData, laneId: string) {
-    if (e.key === "F2" && (editable || board.onCardEdit || board.drawer)) {
-      e.preventDefault();
-      openEditor(row);
-      return;
-    }
-    // Keyboard multi-select: Ctrl/Cmd+Space toggles this card's selection,
-    // mirroring onCardClick's ctrl/meta-click branch. Kept on a modifier so it
-    // never collides with plain Space, which grabs the card for a move.
-    if (board.selectable && e.key === " " && (e.ctrlKey || e.metaKey) && grabbed == null) {
-      e.preventDefault();
-      const k = key(row);
-      selected[k] = !selected[k];
-      emitSelection();
-      announce(
-        `${selected[k] ? "Selected" : "Deselected"} ${cardLabel(row)}. ${selectedRows().length} selected.`,
-      );
-      return;
-    }
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
-      if (grabbed === row) {
-        announce(`Dropped ${cardLabel(row)} in ${laneTitleById(laneId)}.`);
-        grabbed = null;
-        grabInfo = null;
-      } else if (!movable(row)) {
-        announce(`${cardLabel(row)} is blocked and can't be moved.`);
-      } else {
-        grabbed = row;
-        grabInfo = { lane: effectiveLane(row), order: ord(row), swim: effectiveSwim(row) };
-        announce(
-          `Grabbed ${cardLabel(row)}. Use arrow keys to move, Space to drop, Escape to cancel.`,
-        );
-      }
-      return;
-    }
-    if (e.key === "Escape" && grabbed === row) {
-      e.preventDefault();
-      if (grabInfo) {
-        const k = key(row);
-        laneOf[k] = grabInfo.lane;
-        orderOf[k] = grabInfo.order;
-        if (swimField) swimOf[k] = grabInfo.swim;
-      }
-      grabbed = null;
-      grabInfo = null;
-      announce("Cancelled.");
-      return;
-    }
-    const li = laneIndex(laneId);
-    // Keyboard move/nav stays within the card's own swimlane band.
-    const swim = swimField ? effectiveSwim(row) : null;
-    if (grabbed === row) {
-      // Grabbed: arrow keys MOVE the card (within its swimlane band).
-      if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
-        e.preventDefault();
-        const dest = lanes[e.key === "ArrowRight" ? li + 1 : li - 1];
-        if (!dest) return;
-        const pos = laneCards(dest.id, swim).filter((r) => r !== row).length;
-        if (applyMove(row, laneId, dest.id, pos, swim, swim)) {
-          announce(`Moved to ${laneTitle(dest)}.`);
-          focusCardSoon(row);
-        }
-      } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-        e.preventDefault();
-        const cards = laneCards(laneId, swim);
-        const idx = cards.indexOf(row);
-        const target = idx + (e.key === "ArrowDown" ? 1 : -1);
-        if (target < 0 || target >= cards.length) return;
-        // In the list excluding the moved card, `target` is the insertion slot
-        // for both directions (indices shift by the card's own removal).
-        applyMove(row, laneId, laneId, target, swim, swim);
-        announce(`Moved ${e.key === "ArrowDown" ? "down" : "up"}.`);
-        focusCardSoon(row);
-      }
-      return;
-    }
-    // Not grabbed: arrow keys MOVE FOCUS between cards and lanes.
-    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-      e.preventDefault();
-      const cards = laneCards(laneId, swim);
-      const idx = cards.indexOf(row);
-      const next = cards[idx + (e.key === "ArrowDown" ? 1 : -1)];
-      if (next) focusCardEl(next);
-    } else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
-      e.preventDefault();
-      const dest = lanes[e.key === "ArrowRight" ? li + 1 : li - 1];
-      if (!dest) return;
-      const idx = Math.max(0, laneCards(laneId, swim).indexOf(row));
-      const destCards = laneCards(dest.id, swim);
-      const targetCard = destCards[Math.min(idx, destCards.length - 1)];
-      if (targetCard) focusCardEl(targetCard);
-    }
-  }
-
-  function cardLabel(row: TData): string {
-    return titleField ? fmt(fieldValue(row, titleField)) : "card";
-  }
-  function laneTitleById(laneId: string): string {
-    const l = lanes.find((x) => x.id === laneId);
-    return l ? laneTitle(l) : laneId;
-  }
-  async function focusCardEl(row: TData) {
-    let el = rootEl?.querySelector<HTMLElement>(
-      `[data-card-key="${cssEscape(key(row))}"]`,
-    );
-    if (!el && virtualized) {
-      // Off-screen in a virtualized lane: scroll it into view, then focus.
-      const laneId = effectiveLane(row);
-      const swimId = swimField ? effectiveSwim(row) : null;
-      const idx = laneCards(laneId, swimId).indexOf(row);
-      const body = laneBodyEl.get(cellKey(laneId, swimId));
-      if (body && idx >= 0) {
-        body.scrollTop = idx * (cardH + VGAP);
-        laneScroll[cellKey(laneId, swimId)] = body.scrollTop;
-        await tick();
-        el = rootEl?.querySelector<HTMLElement>(
-          `[data-card-key="${cssEscape(key(row))}"]`,
-        );
-      }
-    }
-    el?.focus();
-  }
-  async function focusCardSoon(row: TData) {
-    // Re-focus the card after the DOM re-sorts so keyboard flow continues.
-    await tick();
-    focusCardEl(row);
-  }
-  function cssEscape(s: string): string {
-    return s.replace(/["\\]/g, "\\$&");
-  }
-
-  let rootEl: HTMLDivElement | undefined;
-
-  // --- card context menu (board.cardMenu) ---
-  let menuOpen = $state(false);
-  let menuPos = $state({ x: 0, y: 0 });
-  let menuItems = $state.raw<ReadonlyArray<MenuItem>>([]);
-  let menuPanel = $state<HTMLDivElement | null>(null);
-  const MENU_W = 200;
-  function showMenuAt(e: MouseEvent, items: ReadonlyArray<MenuItem>) {
-    if (!items.length) return;
-    e.preventDefault();
-    e.stopPropagation();
-    const estH = Math.min(items.length, 12) * 34 + 8;
-    const x = Math.min(e.clientX, window.innerWidth - MENU_W - 6);
-    const y = Math.min(e.clientY, window.innerHeight - estH - 6);
-    menuPos = { x: Math.max(6, x), y: Math.max(6, y) };
-    menuItems = items;
-    menuOpen = true;
-  }
-  function openCardMenu(e: MouseEvent, row: TData) {
-    if (!board.cardMenu) return;
-    const swim = swimField ? effectiveSwim(row) : null;
-    const items = board.cardMenu(row, {
-      lanes,
-      moveTo: (laneId: string) => {
-        const pos = laneCards(laneId, swim).filter((r) => r !== row).length;
-        applyMove(row, effectiveLane(row), laneId, pos, swim, swim);
-      },
-      edit: () => openEditor(row),
-    });
-    if (items) showMenuAt(e, items);
-  }
-  function openLaneMenu(e: MouseEvent, laneId: string, cards: TData[]) {
-    if (!board.laneMenu) return;
-    const items = board.laneMenu(laneId, {
-      laneId,
-      cards,
-      collapsed: collapsed[laneId] === true,
-      toggleCollapse: () => toggleCollapse(laneId),
-      addCard: (title?: string) => board.onCardAdd?.(laneId, title),
-    });
-    if (items) showMenuAt(e, items);
-  }
-  $effect(() => {
-    if (!menuOpen) return;
-    queueMicrotask(() =>
-      menuPanel?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus(),
-    );
-    const layer = createDismissableLayer({
-      element: () => menuPanel,
-      onDismiss: () => (menuOpen = false),
-    });
-    layer.activate();
-    const onScroll = () => (menuOpen = false);
-    window.addEventListener("scroll", onScroll, true);
-    return () => {
-      layer.release();
-      window.removeEventListener("scroll", onScroll, true);
-    };
-  });
-</script>
-
-<div
-  class="sv-board"
-  class:is-swim={!!swimField}
-  role="group"
-  aria-label="Board"
-  bind:this={rootEl}
->
-  {#if board.facets && board.facets.length}
-    <div class="sv-board-facets">
-      {#each board.facets as field (field)}
-        {#each facetOptions(field) as opt (field + ":" + opt.value)}
-          <button
-            type="button"
-            class="sv-board-facet"
-            class:is-active={(facetSel[field] ?? []).includes(opt.value)}
-            onclick={() => toggleFacet(field, opt.value)}
-          >
-            {opt.value}<span class="sv-board-facet-count">{opt.count}</span>
-          </button>
-        {/each}
-      {/each}
-      {#if anyFacet}
-        <button type="button" class="sv-board-facet-clear" onclick={clearFacets}>Clear filters</button>
-      {/if}
-    </div>
-  {/if}
-
-  {#if swimField}
-    {#each swimlanes as swim (swim.id)}
-      {@const swimCollapsed = collapsedSwim[swim.id] === true}
-      <section class="sv-board-swim" aria-label={swim.title}>
-        <header class="sv-board-swim-head">
-          {#if board.collapsibleSwimlanes}
-            <button
-              type="button"
-              class="sv-board-swim-toggle"
-              aria-expanded={!swimCollapsed}
-              aria-label={swimCollapsed ? `Expand ${swim.title}` : `Collapse ${swim.title}`}
-              onclick={() => toggleSwim(swim.id)}>{swimCollapsed ? "▸" : "▾"}</button
-            >
-          {/if}
-          <span class="sv-board-swim-title">{swim.title}</span>
-          <span class="sv-board-swim-count">{swimCount(swim.id)}</span>
-          {#if board.swimlaneSummary}
-            <span class="sv-board-swim-summary">{board.swimlaneSummary(swimRows(swim.id), swim.id)}</span>
-          {/if}
-        </header>
-        {#if !swimCollapsed}
-          <div class="sv-board-lanes">
-            {#each lanes as lane (lane.id)}
-              {@render laneCol(lane, swim.id)}
-            {/each}
-          </div>
-        {/if}
-      </section>
-    {/each}
-  {:else}
-    <div class="sv-board-lanes">
-      {#each lanes as lane (lane.id)}
-        {@render laneCol(lane, null)}
-      {/each}
-    </div>
-  {/if}
-
-  <div class="sv-board-sr" aria-live="polite" role="status">{liveMsg}</div>
-</div>
-
-{#if menuOpen}
-  <div
-    bind:this={menuPanel}
-    class="sv-board-ctx"
-    use:portalToBody
-    use:popIn={{}}
-    style:position="fixed"
-    style:top={`${menuPos.y}px`}
-    style:left={`${menuPos.x}px`}
-    aria-label="Card actions"
-  >
-    <SvMenuList items={menuItems} onclose={() => (menuOpen = false)} onselect={() => (menuOpen = false)} />
-  </div>
-{/if}
-
-{#if drawerRow}
-  {@const dr = drawerRow}
-  <SvDrawer
-    open
-    onClose={() => (drawerRow = null)}
-    side={drawerCfg?.side ?? "right"}
-    size={drawerCfg?.size ?? "380px"}
-    title={drawerTitleOf(dr)}
-    closeOnBackdrop={false}
-  >
-    {#key key(dr)}
-      <SvForm
-        fields={drawerForm(dr)}
-        initial={drawerInitial(dr)}
-        columns={drawerCfg?.columns ?? 1}
-        submitLabel={drawerCfg?.submitLabel ?? "Save"}
-        onSubmit={(values) => onDrawerSubmit(dr, values)}
-      />
-      {#if board.commentsField}
-        <div class="sv-board-drawer-comments">
-          <div class="sv-board-drawer-h">Comments</div>
-          {@render commentThread(dr)}
-        </div>
-      {/if}
-    {/key}
-  </SvDrawer>
-{/if}
-
-{#snippet commentThread(row: TData)}
-  {@const cmts = commentsOf(row)}
-  {#each cmts as c (c.id)}
-    <div class="sv-board-comment">
-      <div class="sv-board-comment-body">
-        {#if c.author}<span class="sv-board-comment-author">{c.author}</span>{/if}
-        <span class="sv-board-comment-text">{c.text}</span>
-        {#if c.at}<span class="sv-board-comment-at">{c.at}</span>{/if}
-      </div>
-      {#if board.onCommentDelete}
-        <button
-          type="button"
-          class="sv-board-comment-del"
-          aria-label="Delete comment"
-          onclick={() => deleteComment(row, c.id)}>×</button
-        >
-      {/if}
-    </div>
-  {/each}
-  {#if !cmts.length}
-    <div class="sv-board-comment-empty">No comments yet.</div>
-  {/if}
-  {#if board.onCommentAdd}
-    <input
-      class="sv-board-comment-add"
-      placeholder="Write a comment..."
-      onkeydown={(e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          const el = e.currentTarget;
-          addComment(row, el.value);
-          el.value = "";
-        }
-      }}
-    />
-  {/if}
-{/snippet}
-
-{#snippet laneCol(lane: BoardLane, swimId: string | null)}
-  {@const cards = laneCards(lane.id, swimId)}
-  {@const over = lane.wipLimit != null && cards.length > lane.wipLimit}
-  {@const mark = markerIndex(lane.id, swimId, cards)}
-  {@const isCollapsed = collapsed[lane.id] === true}
-  <section
-    class="sv-board-lane"
-    class:is-collapsed={isCollapsed}
-    style={lane.color ? `--sv-board-accent: ${lane.color};` : undefined}
-    aria-label={laneTitle(lane)}
-  >
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <header
-      class="sv-board-lane-head"
-      class:is-reorderable={board.reorderableLanes}
-      class:is-lane-dropover={overLaneId === lane.id && dragLaneId !== lane.id}
-      draggable={board.reorderableLanes ? true : undefined}
-      tabindex={board.reorderableLanes ? 0 : undefined}
-      role={board.reorderableLanes ? "group" : undefined}
-      aria-roledescription={board.reorderableLanes ? "Reorderable lane" : undefined}
-      title={board.reorderableLanes ? "Ctrl+Left/Right arrow to reorder this lane" : undefined}
-      ondragstart={board.reorderableLanes ? (e) => onLaneHeaderDragStart(e, lane.id) : undefined}
-      ondragover={board.reorderableLanes ? (e) => onLaneHeaderDragOver(e, lane.id) : undefined}
-      ondrop={board.reorderableLanes ? (e) => onLaneHeaderDrop(e, lane.id) : undefined}
-      ondragend={board.reorderableLanes ? onLaneHeaderDragEnd : undefined}
-      onkeydown={board.reorderableLanes ? (e) => onLaneHeaderKeydown(e, lane.id) : undefined}
-      oncontextmenu={board.laneMenu ? (e) => openLaneMenu(e, lane.id, cards) : undefined}
-    >
-      {#if board.collapsibleLanes}
-        <button
-          type="button"
-          class="sv-board-lane-toggle"
-          aria-expanded={!isCollapsed}
-          aria-label={isCollapsed ? `Expand ${laneTitle(lane)}` : `Collapse ${laneTitle(lane)}`}
-          onclick={() => toggleCollapse(lane.id)}>{isCollapsed ? "▸" : "▾"}</button
-        >
-      {/if}
-      {#if renamingLane === lane.id}
-        <!-- svelte-ignore a11y_autofocus -->
-        <input
-          class="sv-board-lane-rename"
-          bind:value={renameText}
-          use:focusNode
-          onkeydown={(e) => {
-            if (e.key === "Enter") { e.preventDefault(); commitRename(lane.id); }
-            else if (e.key === "Escape") { renamingLane = null; }
-          }}
-          onblur={() => commitRename(lane.id)}
-        />
-      {:else if board.onLaneRename}
-        <button
-          type="button"
-          class="sv-board-lane-title is-renamable"
-          ondblclick={() => startRename(lane)}
-          onkeydown={(e) => {
-            if (e.key === "Enter" || e.key === "F2") {
-              e.preventDefault();
-              startRename(lane);
-            }
-          }}
-          title="Double-click, Enter, or F2 to rename"
-        >{laneTitle(lane)}</button>
-      {:else}
-        <span class="sv-board-lane-title">{laneTitle(lane)}</span>
-      {/if}
-      <span
-        class="sv-board-lane-count"
-        class:is-over={over}
-        title={lane.wipLimit != null ? `WIP limit ${lane.wipLimit}` : undefined}
-      >
-        {cards.length}{#if lane.wipLimit != null}/{lane.wipLimit}{/if}
-      </span>
-      {#if board.laneSummary && !isCollapsed}
-        <span class="sv-board-lane-summary">{board.laneSummary(cards, lane.id)}</span>
-      {/if}
-      {#if board.onCardAdd && !isCollapsed}
-        <button
-          type="button"
-          class="sv-board-lane-add"
-          aria-label={`Add card to ${laneTitle(lane)}`}
-          onclick={() => board.onCardAdd?.(lane.id)}>+</button
-        >
-      {/if}
-    </header>
-
-    {#if !isCollapsed}
-      {@const win = laneWindow(lane.id, swimId, cards.length)}
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div
-        class="sv-board-lane-body"
-        class:is-virtual={virtualized}
-        role="list"
-        class:is-dropover={overLane === lane.id && overSwim === swimId}
-        use:trackLane={cellKey(lane.id, swimId)}
-        ondragover={(e) => onLaneDragOver(e, lane.id, swimId)}
-        ondrop={(e) => onLaneDrop(e, lane.id, swimId)}
-      >
-        {#if win.top > 0}
-          <div style={`height:${win.top}px`} aria-hidden="true"></div>
-        {/if}
-        {#each cards.slice(win.start, win.end) as row, i (key(row))}
-          {@const index = win.start + i}
-          {#if mark === index}
-            <div class="sv-board-drop-marker" aria-hidden="true"></div>
-          {/if}
-          {@const isEditing = editingKey === key(row)}
-          <article
-            class="sv-board-card"
-            class:is-dragging={dragRow === row}
-            class:is-grabbed={grabbed === row}
-            class:is-editing={isEditing}
-            class:is-flagged={isFlagged(row)}
-            class:is-locked={!movable(row)}
-            class:is-selected={board.selectable && selected[key(row)]}
-            role="listitem"
-            tabindex="0"
-            data-card-key={key(row)}
-            aria-roledescription="Draggable card"
-            aria-grabbed={grabbed === row}
-            aria-selected={board.selectable ? !!selected[key(row)] : undefined}
-            draggable={!isEditing && movable(row)}
-            ondragstart={(e) => onCardDragStart(e, row, lane.id, swimId)}
-            ondragover={(e) => onCardDragOver(e, row, lane.id, swimId)}
-            ondragend={resetDrag}
-            onclick={board.selectable ? (e) => onCardClick(e, row) : undefined}
-            ondblclick={() => openEditor(row)}
-            oncontextmenu={board.cardMenu ? (e) => openCardMenu(e, row) : undefined}
-            onkeydown={(e) => onCardKeydown(e, row, lane.id)}
-          >
-            {#if isFlagged(row)}<span class="sv-board-card-flag" aria-label="Blocked"></span>{/if}
-            {#if isEditing}
-              <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-              <form
-                class="sv-board-card-edit"
-                onsubmit={(e) => {
-                  e.preventDefault();
-                  saveEditor(row);
-                }}
-                onkeydown={(e) => {
-                  if (e.key === "Escape") {
-                    e.stopPropagation();
-                    cancelEditor();
-                  }
-                }}
-              >
-                {#each editColumns as col (col.field)}
-                  {@const kind = editorKind(col)}
-                  <label class="sv-board-field">
-                    <span>{headerLabel(col.field ?? "")}</span>
-                    {#if kind === "checkbox"}
-                      <input
-                        type="checkbox"
-                        checked={draft[col.field ?? ""] === true}
-                        oninput={(e) => onDraftInput(col.field ?? "", kind, e)}
-                      />
-                    {:else}
-                      <!-- svelte-ignore a11y_autofocus -->
-                      <input
-                        type={kind}
-                        value={draft[col.field ?? ""] ?? ""}
-                        oninput={(e) => onDraftInput(col.field ?? "", kind, e)}
-                      />
-                    {/if}
-                  </label>
-                {/each}
-                <div class="sv-board-card-edit-actions">
-                  <button type="button" class="sv-board-btn" onclick={cancelEditor}>Cancel</button>
-                  <button type="submit" class="sv-board-btn is-primary">Save</button>
-                </div>
-              </form>
-            {:else if board.card}
-              {@render board.card(row)}
-              {@render cardBadges(row)}
-            {:else}
-              {@const cover = coverColorOf(row)}
-              {#if cover}
-                <div class="sv-board-card-cover" style={`background:${cover}`} aria-hidden="true"></div>
-              {/if}
-              {#if titleField}
-                <div class="sv-board-card-title">
-                  {fmt(fieldValue(row, titleField))}
-                </div>
-              {/if}
-              {@render cardBadges(row)}
-              {#if metaFields.length}
-                <dl class="sv-board-card-meta">
-                  {#each metaFields as field (field)}
-                    {@const v = fmt(fieldValue(row, field))}
-                    {#if v !== ""}
-                      <div class="sv-board-card-metarow">
-                        <dt>{headerLabel(field)}</dt>
-                        <dd>{v}</dd>
-                      </div>
-                    {/if}
-                  {/each}
-                </dl>
-              {/if}
-            {/if}
-
-            {#if !isEditing && board.subtasks}
-              {@const prog = subProgress(row)}
-              {@const opened = subOpen[key(row)] === true}
-              <div class="sv-board-subs">
-                <button
-                  type="button"
-                  class="sv-board-subs-head"
-                  aria-expanded={opened}
-                  onclick={() => (subOpen[key(row)] = !opened)}
-                >
-                  <span class="sv-board-subs-chev">{opened ? "▾" : "▸"}</span>
-                  <span class="sv-board-subs-count">{prog.done}/{prog.total}</span>
-                  <span class="sv-board-subs-bar" aria-hidden="true">
-                    <span style={`width:${prog.total ? (prog.done / prog.total) * 100 : 0}%`}></span>
-                  </span>
-                </button>
-                {#if opened}
-                  <ul class="sv-board-subs-list">
-                    {#each subtasksOf(row) as st (st.id)}
-                      <li>
-                        <label class:is-done={st.done}>
-                          <input type="checkbox" checked={st.done} onchange={() => toggleSubtask(row, st)} />
-                          <span>{st.title}</span>
-                        </label>
-                      </li>
-                    {/each}
-                  </ul>
-                  <input
-                    class="sv-board-subs-add"
-                    placeholder="Add subtask..."
-                    onkeydown={(e) => {
-                      if (e.key === "Enter") {
-                        e.preventDefault();
-                        const el = e.currentTarget;
-                        addSubtask(row, el.value);
-                        el.value = "";
-                      }
-                    }}
-                  />
-                {/if}
-              </div>
-            {/if}
-
-            {#if !isEditing && board.childrenField}
-              {@const kids = childrenOf(row)}
-              {#if kids.length}
-                {@const kidsOpen = childOpen[key(row)] === true}
-                <div class="sv-board-kids">
-                  <button
-                    type="button"
-                    class="sv-board-kids-head"
-                    aria-expanded={kidsOpen}
-                    onclick={() => (childOpen[key(row)] = !kidsOpen)}
-                  >
-                    <span class="sv-board-subs-chev">{kidsOpen ? "▾" : "▸"}</span>
-                    {kids.length}
-                    {kids.length === 1 ? "subtask" : "subtasks"}
-                  </button>
-                  {#if kidsOpen}
-                    <ul class="sv-board-kids-list">
-                      {#each kids as kid, ki (key(kid) + ":" + ki)}
-                        <li class="sv-board-kid">
-                          <span class="sv-board-kid-title"
-                            >{titleField ? fmt(fieldValue(kid, titleField)) : ""}</span
-                          >
-                          <span class="sv-board-kid-lane">{rawLane(kid)}</span>
-                        </li>
-                      {/each}
-                    </ul>
-                  {/if}
-                </div>
-              {/if}
-            {/if}
-
-            {#if !isEditing && board.commentsField && commentsOpen[key(row)]}
-              <div class="sv-board-comments">
-                {@render commentThread(row)}
-              </div>
-            {/if}
-          </article>
-        {/each}
-        {#if win.bottom > 0}
-          <div style={`height:${win.bottom}px`} aria-hidden="true"></div>
-        {:else if mark === cards.length}
-          <div class="sv-board-drop-marker" aria-hidden="true"></div>
-        {/if}
-        {#if cards.length === 0}
-          <div class="sv-board-lane-empty">No cards</div>
-        {/if}
-      </div>
-      {#if board.composer && board.onCardAdd}
-        {#if composerOpen[lane.id]}
-          <input
-            class="sv-board-composer-input"
-            placeholder="Card title..."
-            bind:value={composerText[lane.id]}
-            use:focusNode
-            onkeydown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                submitComposer(lane.id);
-              } else if (e.key === "Escape") {
-                composerOpen[lane.id] = false;
-              }
-            }}
-            onblur={() => {
-              submitComposer(lane.id);
-              composerOpen[lane.id] = false;
-            }}
-          />
-        {:else}
-          <button
-            type="button"
-            class="sv-board-composer-btn"
-            onclick={() => (composerOpen[lane.id] = true)}>+ Add a card</button
-          >
-        {/if}
-      {/if}
-    {/if}
-  </section>
-{/snippet}
-
-{#snippet cardBadges(row: TData)}
-  {@const labels = labelsOf(row)}
-  {@const due = dueOf(row)}
-  {@const asg = assigneesOf(row)}
-  {@const comments = countOf(row, board.commentsField)}
-  {@const attachments = countOf(row, board.attachmentsField)}
-  {@const age = ageOf(row)}
-  {@const blocked = isFlagged(row)}
-  {#if blocked || labels.length || due || asg.length || comments || attachments || age}
-    <div class="sv-board-badges">
-      {#if blocked}
-        <span class="sv-board-badge is-blocked" title={flagReason(row) ?? "Blocked"}>Blocked</span>
-      {/if}
-      {#each labels as lb (lb.text)}
-        <span class="sv-board-badge is-label" style={lb.color ? `--b:${lb.color}` : undefined}
-          >{lb.text}</span
-        >
-      {/each}
-      {#if due}
-        <span class="sv-board-badge is-due" class:is-overdue={due.overdue}>{due.label}</span>
-      {/if}
-      {#if age}
-        <span class="sv-board-badge is-meta" title="Age">{age}</span>
-      {/if}
-      {#if comments || board.onCommentAdd}
-        <button
-          type="button"
-          class="sv-board-badge is-meta is-btn"
-          title="Comments"
-          onclick={(e) => {
-            e.stopPropagation();
-            commentsOpen[key(row)] = !commentsOpen[key(row)];
-          }}
-        >
-          <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true"><path d="M2 3h12v8H8l-3 2v-2H2z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
-          {comments}
-        </button>
-      {/if}
-      {#if attachments}
-        <span class="sv-board-badge is-meta" title={`${attachments} attachments`}>
-          <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true"><path d="M11 5.5 6.5 10a2 2 0 0 1-3-3l5-5a3 3 0 0 1 4 4l-5 5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
-          {attachments}
-        </span>
-      {/if}
-      {#if asg.length}
-        <span class="sv-board-avatars">
-          {#each asg.slice(0, 3) as name (name)}
-            <span class="sv-board-avatar" title={name}>{initials(name)}</span>
-          {/each}
-        </span>
-      {/if}
-    </div>
-  {/if}
-{/snippet}
-
-<style>
-  .sv-board {
-    height: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    background: var(--sg-bg, #fff);
-    color: var(--sg-fg, #101828);
-    font-family: var(--sg-font, inherit);
-  }
-  .sv-board.is-swim {
-    overflow-y: auto;
-    gap: 14px;
-  }
-  .sv-board-lanes {
-    display: flex;
-    gap: 12px;
-    align-items: flex-start;
-    overflow-x: auto;
-    padding: 4px;
-    flex: 1 1 auto;
-    min-height: 0;
-    scrollbar-color: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #101828) 28%, transparent))
-      transparent;
-  }
-  .sv-board.is-swim .sv-board-lanes {
-    flex: none;
-  }
-  .sv-board.is-swim .sv-board-lane {
-    max-height: 340px;
-  }
-  .sv-board-swim {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    flex: none;
-  }
-  .sv-board-swim-head {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 8px;
-    font-weight: 700;
-    font-size: 0.78rem;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 78%, transparent);
-    position: sticky;
-    left: 0;
-  }
-  .sv-board-swim-count {
-    font-size: 0.7rem;
-    font-weight: 600;
-    padding: 0 7px;
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
-    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
-  }
-  .sv-board-swim-summary {
-    font-size: 0.7rem;
-    font-weight: 600;
-    color: color-mix(in srgb, var(--sg-accent, #3b82f6) 85%, var(--sg-fg, #101828));
-  }
-  .sv-board-swim-toggle {
-    all: unset;
-    cursor: pointer;
-    font-size: 0.7rem;
-    padding: 2px;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
-  }
-  .sv-board-lane-title.is-renamable {
-    all: unset;
-    cursor: text;
-    font-weight: 600;
-    font-size: 0.82rem;
-    flex: 1 1 auto;
-    min-width: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: left;
-  }
-  .sv-board-lane-rename {
-    flex: 1 1 auto;
-    min-width: 0;
-    font: inherit;
-    font-weight: 600;
-    font-size: 0.82rem;
-    padding: 1px 4px;
-    border: 1px solid var(--sv-board-accent);
-    border-radius: 5px;
-    background: var(--sg-bg, #fff);
-    color: var(--sg-fg, #101828);
-  }
-  .sv-board-swim-toggle:hover {
-    color: var(--sg-fg, #101828);
-  }
-  .sv-board-lane {
-    flex: 0 0 var(--sg-board-lane-w, 272px);
-    max-width: var(--sg-board-lane-w, 272px);
-    display: flex;
-    flex-direction: column;
-    max-height: 100%;
-    border: 1px solid var(--sg-border, #e4e7ec);
-    border-radius: var(--sg-radius, 8px);
-    background: var(--sg-header-bg, color-mix(in srgb, var(--sg-fg, #101828) 3%, var(--sg-bg, #fff)));
-    --sv-board-accent: var(--sg-accent, #3b82f6);
-  }
-  .sv-board-lane-head {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 10px;
-    border-bottom: 1px solid var(--sg-border, #e4e7ec);
-    border-top: 3px solid var(--sv-board-accent);
-    border-radius: var(--sg-radius, 8px) var(--sg-radius, 8px) 0 0;
-  }
-  .sv-board-lane-head.is-reorderable {
-    cursor: grab;
-  }
-  .sv-board-lane-head.is-lane-dropover {
-    box-shadow: inset 3px 0 0 var(--sv-board-accent);
-  }
-  .sv-board-lane-title {
-    font-weight: 600;
-    font-size: 0.82rem;
-    flex: 1 1 auto;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .sv-board-lane-toggle {
-    all: unset;
-    cursor: pointer;
-    font-size: 0.7rem;
-    line-height: 1;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 55%, transparent);
-    padding: 2px;
-  }
-  .sv-board-lane-toggle:hover {
-    color: var(--sg-fg, #101828);
-  }
-  .sv-board-lane.is-collapsed {
-    flex: 0 0 auto;
-    max-width: none;
-  }
-  .sv-board-lane.is-collapsed .sv-board-lane-head {
-    writing-mode: vertical-rl;
-    height: 180px;
-    border-top: none;
-    border-left: 3px solid var(--sv-board-accent);
-    border-radius: 0 var(--sg-radius, 8px) var(--sg-radius, 8px) 0;
-    gap: 6px;
-  }
-  .sv-board-lane-count {
-    font-size: 0.72rem;
-    font-variant-numeric: tabular-nums;
-    padding: 1px 7px;
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
-    color: color-mix(in srgb, var(--sg-fg, #101828) 70%, transparent);
-  }
-  .sv-board-lane-count.is-over {
-    background: color-mix(in srgb, var(--sg-danger, #ef4444) 16%, transparent);
-    color: var(--sg-danger, #ef4444);
-    font-weight: 700;
-  }
-  .sv-board-lane-summary {
-    font-size: 0.72rem;
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    color: color-mix(in srgb, var(--sv-board-accent) 85%, var(--sg-fg, #101828));
-  }
-  .sv-board-lane-add {
-    all: unset;
-    cursor: pointer;
-    width: 20px;
-    height: 20px;
-    display: grid;
-    place-items: center;
-    border-radius: 5px;
-    font-size: 1rem;
-    line-height: 1;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
-  }
-  .sv-board-lane-add:hover {
-    background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
-    color: var(--sg-fg, #101828);
-  }
-  .sv-board-lane-body {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 8px;
-    overflow-y: auto;
-    flex: 1 1 auto;
-    min-height: 48px;
-    transition: background 0.12s ease;
-  }
-  .sv-board-lane-body.is-dropover {
-    background: color-mix(in srgb, var(--sv-board-accent) 8%, transparent);
-  }
-  /* Virtualized lanes use block flow + per-card margin (not flex gap) so the
-     spacer heights match the windowing math exactly. */
-  .sv-board-lane-body.is-virtual {
-    display: block;
-    gap: 0;
-  }
-  .sv-board-lane-body.is-virtual .sv-board-card {
-    margin-bottom: 8px;
-  }
-  .sv-board-card {
-    background: var(--sg-bg, #fff);
-    border: 1px solid var(--sg-border, #e4e7ec);
-    border-radius: var(--sg-radius, 8px);
-    padding: 9px 11px;
-    cursor: grab;
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-    transition:
-      box-shadow 0.12s ease,
-      opacity 0.12s ease,
-      transform 0.12s ease;
-  }
-  .sv-board-card:hover {
-    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
-    border-color: color-mix(in srgb, var(--sv-board-accent) 45%, var(--sg-border, #e4e7ec));
-  }
-  .sv-board-card:focus-visible {
-    outline: none;
-    border-color: var(--sv-board-accent);
-    box-shadow: var(--sg-focus-ring, 0 0 0 2px color-mix(in srgb, var(--sv-board-accent) 45%, transparent));
-  }
-  .sv-board-card.is-dragging {
-    opacity: 0.45;
-  }
-  .sv-board-card.is-grabbed {
-    border-color: var(--sv-board-accent);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sv-board-accent) 55%, transparent);
-    cursor: grabbing;
-  }
-  .sv-board-card.is-editing {
-    cursor: default;
-    border-color: var(--sv-board-accent);
-  }
-  .sv-board-card-edit {
-    display: flex;
-    flex-direction: column;
-    gap: 7px;
-  }
-  .sv-board-field {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    font-size: 0.72rem;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
-  }
-  .sv-board-field input[type="text"],
-  .sv-board-field input[type="number"],
-  .sv-board-field input[type="date"] {
-    font: inherit;
-    font-size: 0.8rem;
-    padding: 4px 7px;
-    border: 1px solid var(--sg-border, #e4e7ec);
-    border-radius: var(--sg-radius, 6px);
-    background: var(--sg-bg, #fff);
-    color: var(--sg-fg, #101828);
-  }
-  .sv-board-field input:focus-visible {
-    outline: none;
-    border-color: var(--sv-board-accent);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sv-board-accent) 35%, transparent);
-  }
-  .sv-board-field input[type="checkbox"] {
-    align-self: flex-start;
-    width: 15px;
-    height: 15px;
-    accent-color: var(--sv-board-accent);
-  }
-  .sv-board-card-edit-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 6px;
-    margin-top: 2px;
-  }
-  .sv-board-btn {
-    font: inherit;
-    font-size: 0.74rem;
-    padding: 3px 10px;
-    border-radius: var(--sg-radius, 6px);
-    border: 1px solid var(--sg-border, #e4e7ec);
-    background: var(--sg-bg, #fff);
-    color: var(--sg-fg, #101828);
-    cursor: pointer;
-  }
-  .sv-board-btn:hover {
-    background: color-mix(in srgb, var(--sg-fg, #101828) 6%, transparent);
-  }
-  .sv-board-btn.is-primary {
-    background: var(--sv-board-accent);
-    border-color: var(--sv-board-accent);
-    color: #fff;
-  }
-  .sv-board-btn.is-primary:hover {
-    filter: brightness(0.95);
-  }
-  .sv-board-card-title {
-    font-weight: 600;
-    font-size: 0.84rem;
-    line-height: 1.3;
-  }
-  .sv-board-card-meta {
-    margin: 6px 0 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .sv-board-card-metarow {
-    display: flex;
-    gap: 6px;
-    font-size: 0.74rem;
-  }
-  .sv-board-card-metarow dt {
-    color: color-mix(in srgb, var(--sg-fg, #101828) 55%, transparent);
-    margin: 0;
-  }
-  .sv-board-card-metarow dd {
-    margin: 0;
-    font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .sv-board-lane-empty {
-    text-align: center;
-    font-size: 0.76rem;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 42%, transparent);
-    padding: 14px 0;
-    border: 1px dashed var(--sg-border, #e4e7ec);
-    border-radius: var(--sg-radius, 8px);
-  }
-  .sv-board-drop-marker {
-    height: 2px;
-    border-radius: 2px;
-    background: var(--sv-board-accent);
-    margin: -3px 0;
-  }
-  :global(.sv-board-ctx) {
-    z-index: 2147483646;
-    min-width: 200px;
-    background: var(--sg-bg, #fff);
-    color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-border, #e2e8f0);
-    border-radius: 10px;
-    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35);
-    font-size: 13px;
-  }
-  .sv-board-sr {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    white-space: nowrap;
-    border: 0;
-  }
-  /* Card badges */
-  .sv-board-badges {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 4px;
-    margin-top: 6px;
-  }
-  .sv-board-badge {
-    font-size: 0.66rem;
-    font-weight: 600;
-    padding: 1px 6px;
-    border-radius: 4px;
-    line-height: 1.5;
-    white-space: nowrap;
-  }
-  .sv-board-badge.is-label {
-    --b: var(--sv-board-accent);
-    background: color-mix(in srgb, var(--b) 16%, transparent);
-    color: color-mix(in srgb, var(--b) 80%, var(--sg-fg, #101828));
-  }
-  .sv-board-badge.is-due {
-    background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
-    color: color-mix(in srgb, var(--sg-fg, #101828) 65%, transparent);
-  }
-  .sv-board-badge.is-due.is-overdue {
-    background: color-mix(in srgb, var(--sg-danger, #ef4444) 15%, transparent);
-    color: var(--sg-danger, #ef4444);
-  }
-  .sv-board-badge.is-meta {
-    display: inline-flex;
-    align-items: center;
-    gap: 3px;
-    background: transparent;
-    padding: 1px 3px;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 55%, transparent);
-  }
-  .sv-board-badge.is-btn {
-    border: 0;
-    cursor: pointer;
-    font: inherit;
-    font-size: 0.66rem;
-    font-weight: 600;
-    border-radius: 5px;
-  }
-  .sv-board-badge.is-btn:hover {
-    background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
-    color: var(--sg-fg, #101828);
-  }
-  .sv-board-badge.is-blocked {
-    background: var(--sg-danger, #ef4444);
-    color: #fff;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-    font-size: 0.6rem;
-  }
-  /* Comments thread */
-  .sv-board-comments {
-    margin-top: 7px;
-    border-top: 1px solid color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
-    padding-top: 7px;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-  }
-  .sv-board-drawer-comments {
-    margin-top: 16px;
-    padding-top: 12px;
-    border-top: 1px solid var(--sg-border, #e4e7ec);
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-  .sv-board-drawer-h {
-    font-weight: 600;
-    font-size: 0.82rem;
-    margin-bottom: 2px;
-  }
-  .sv-board-comment {
-    display: flex;
-    align-items: flex-start;
-    gap: 6px;
-    font-size: 0.74rem;
-  }
-  .sv-board-comment-body {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-  .sv-board-comment-author {
-    font-weight: 600;
-    margin-right: 5px;
-  }
-  .sv-board-comment-at {
-    margin-left: 6px;
-    font-size: 0.66rem;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 45%, transparent);
-  }
-  .sv-board-comment-del {
-    all: unset;
-    cursor: pointer;
-    font-size: 0.9rem;
-    line-height: 1;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 40%, transparent);
-    padding: 0 2px;
-  }
-  .sv-board-comment-del:hover {
-    color: var(--sg-danger, #ef4444);
-  }
-  .sv-board-comment-empty {
-    font-size: 0.72rem;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 42%, transparent);
-  }
-  .sv-board-comment-add {
-    width: 100%;
-    box-sizing: border-box;
-    font: inherit;
-    font-size: 0.74rem;
-    padding: 4px 7px;
-    border: 1px solid var(--sg-border, #e4e7ec);
-    border-radius: 5px;
-    background: var(--sg-bg, #fff);
-    color: var(--sg-fg, #101828);
-  }
-  .sv-board-card-cover {
-    height: 6px;
-    border-radius: 4px;
-    margin: -2px 0 7px;
-  }
-  .sv-board-avatars {
-    display: inline-flex;
-    margin-left: auto;
-  }
-  .sv-board-avatar {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    font-size: 0.6rem;
-    font-weight: 700;
-    color: #fff;
-    background: var(--sv-board-accent);
-    border: 1.5px solid var(--sg-bg, #fff);
-    margin-left: -6px;
-  }
-  .sv-board-avatar:first-child {
-    margin-left: 0;
-  }
-  /* Sub-tasks */
-  .sv-board-subs {
-    margin-top: 7px;
-    border-top: 1px solid color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
-    padding-top: 6px;
-  }
-  .sv-board-subs-head {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    width: 100%;
-    font-size: 0.7rem;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
-  }
-  .sv-board-subs-chev {
-    font-size: 0.6rem;
-  }
-  .sv-board-subs-count {
-    font-variant-numeric: tabular-nums;
-    font-weight: 600;
-  }
-  .sv-board-subs-bar {
-    flex: 1 1 auto;
-    height: 4px;
-    border-radius: 2px;
-    background: color-mix(in srgb, var(--sg-fg, #101828) 10%, transparent);
-    overflow: hidden;
-  }
-  .sv-board-subs-bar span {
-    display: block;
-    height: 100%;
-    background: var(--sv-board-accent);
-    transition: width 0.15s ease;
-  }
-  .sv-board-subs-list {
-    list-style: none;
-    margin: 6px 0 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-  }
-  .sv-board-subs-list label {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 0.74rem;
-    cursor: pointer;
-  }
-  .sv-board-subs-list label.is-done span {
-    text-decoration: line-through;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 45%, transparent);
-  }
-  .sv-board-subs-list input {
-    accent-color: var(--sv-board-accent);
-  }
-  .sv-board-subs-add {
-    margin-top: 5px;
-    width: 100%;
-    box-sizing: border-box;
-    font: inherit;
-    font-size: 0.74rem;
-    padding: 3px 6px;
-    border: 1px solid var(--sg-border, #e4e7ec);
-    border-radius: 5px;
-    background: var(--sg-bg, #fff);
-    color: var(--sg-fg, #101828);
-  }
-  /* Quick-add composer */
-  .sv-board-composer-btn {
-    all: unset;
-    cursor: pointer;
-    display: block;
-    margin: 6px 8px 8px;
-    padding: 5px 8px;
-    border-radius: var(--sg-radius, 6px);
-    font-size: 0.76rem;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 55%, transparent);
-  }
-  .sv-board-composer-btn:hover {
-    background: color-mix(in srgb, var(--sg-fg, #101828) 6%, transparent);
-    color: var(--sg-fg, #101828);
-  }
-  .sv-board-composer-input {
-    margin: 6px 8px 8px;
-    width: calc(100% - 16px);
-    box-sizing: border-box;
-    font: inherit;
-    font-size: 0.8rem;
-    padding: 6px 8px;
-    border: 1px solid var(--sv-board-accent);
-    border-radius: var(--sg-radius, 6px);
-    background: var(--sg-bg, #fff);
-    color: var(--sg-fg, #101828);
-  }
-  /* Facet filter bar */
-  .sv-board-facets {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    padding: 4px 4px 8px;
-    align-items: center;
-  }
-  .sv-board-facet {
-    all: unset;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 0.73rem;
-    padding: 2px 9px;
-    border-radius: 999px;
-    border: 1px solid var(--sg-border, #e4e7ec);
-    color: color-mix(in srgb, var(--sg-fg, #101828) 70%, transparent);
-  }
-  .sv-board-facet:hover {
-    border-color: var(--sg-accent, #3b82f6);
-  }
-  .sv-board-facet.is-active {
-    background: var(--sg-accent, #3b82f6);
-    border-color: var(--sg-accent, #3b82f6);
-    color: #fff;
-  }
-  .sv-board-facet-count {
-    font-size: 0.66rem;
-    opacity: 0.7;
-    font-variant-numeric: tabular-nums;
-  }
-  .sv-board-facet-clear {
-    all: unset;
-    cursor: pointer;
-    font-size: 0.72rem;
-    color: var(--sg-accent, #3b82f6);
-    padding: 2px 6px;
-  }
-  /* Blocked flag + selection */
-  .sv-board-card {
-    position: relative;
-  }
-  .sv-board-card-flag {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 0;
-    height: 0;
-    border-top: 14px solid var(--sg-danger, #ef4444);
-    border-left: 14px solid transparent;
-    border-top-right-radius: var(--sg-radius, 8px);
-  }
-  .sv-board-card.is-selected {
-    border-color: var(--sv-board-accent);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sv-board-accent) 55%, transparent);
-  }
-  .sv-board-card.is-locked {
-    cursor: default;
-  }
-  /* Child cards (epic -> stories) */
-  .sv-board-kids {
-    margin-top: 7px;
-    border-top: 1px solid color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
-    padding-top: 6px;
-  }
-  .sv-board-kids-head {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 0.7rem;
-    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
-  }
-  .sv-board-kids-list {
-    list-style: none;
-    margin: 6px 0 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-  .sv-board-kid {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 0.74rem;
-    padding: 4px 7px;
-    border: 1px solid var(--sg-border, #e4e7ec);
-    border-radius: 6px;
-    background: var(--sg-bg, #fff);
-  }
-  .sv-board-kid-title {
-    flex: 1 1 auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .sv-board-kid-lane {
-    font-size: 0.64rem;
-    font-weight: 600;
-    padding: 0 6px;
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--sv-board-accent) 15%, transparent);
-    color: color-mix(in srgb, var(--sv-board-accent) 85%, var(--sg-fg, #101828));
-    text-transform: capitalize;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .sv-board-card,
-    .sv-board-lane-body,
-    .sv-board-subs-bar span {
-      transition: none;
-    }
-  }
-</style>
+<script
+  lang="ts"
+  generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData"
+>
+  // Kanban board renderer for SvGrid. Rendered in place of the table when the
+  // `board` prop is set. Everything a board needs is built in here:
+  //   - buckets rows into lanes by a field (explicit lanes or derived)
+  //   - renders each row as a card (default template or a `card` snippet)
+  //   - mouse drag-and-drop between and within lanes, with a live insertion
+  //     marker, AND keyboard drag-and-drop (grab with Space, move with arrows)
+  //   - the move itself (lane reassign + reorder) is computed and applied here
+  //     as a per-row overlay keyed by row id, so consumers write no move code;
+  //     `onCardMove` fires purely as a notification for persistence / mirroring
+  // Themes entirely from the grid's `--sg-*` tokens.
+  import { tick } from "svelte";
+  import type { ColumnDef, RowData, TableFeatures } from "./index";
+  import type { BoardConfig, BoardLane, BoardSubtask, BoardComment } from "./SvGrid.types";
+  import SvMenuList, { type MenuItem } from "./SvMenuList.svelte";
+  import SvForm, { type FormField, type FormFieldType } from "./SvForm.svelte";
+  import SvDrawer from "./SvDrawer.svelte";
+  import { portalToBody, popIn } from "./popover";
+  import { createDismissableLayer } from "./a11y/dismissable";
+
+  let {
+    data,
+    columns,
+    board,
+    getRowId,
+  }: {
+    data: ReadonlyArray<TData>;
+    columns: Array<ColumnDef<TFeatures, TData>>;
+    board: BoardConfig<TFeatures, TData>;
+    getRowId?: (row: TData, index: number) => string;
+  } = $props();
+
+  const groupBy = $derived(board.groupBy);
+
+  // --- value access (casts live here, never in the template) ---
+  function fieldValue(row: TData, field: string): unknown {
+    // Saved edits show immediately without mutating the consumer's rows.
+    const e = edits[key(row)];
+    if (e && field in e) return e[field];
+    return (row as Record<string, unknown>)[field];
+  }
+  function rawLane(row: TData): string {
+    const v = fieldValue(row, groupBy);
+    return v == null ? "" : String(v);
+  }
+  function fmt(value: unknown): string {
+    if (value == null) return "";
+    if (value instanceof Date) return value.toLocaleDateString();
+    return String(value);
+  }
+
+  // --- stable per-row key (getRowId, else a synthetic id pinned to the row
+  // object) so the move overlay survives data adds/removes and re-sorts ---
+  const indexOf = $derived(new Map<TData, number>(data.map((r, i) => [r, i])));
+  const synthetic = new WeakMap<object, string>();
+  let synthSeq = 0;
+  function key(row: TData): string {
+    if (getRowId) return getRowId(row, indexOf.get(row) ?? 0);
+    const obj = row as unknown as object;
+    let id = synthetic.get(obj);
+    if (!id) {
+      id = `__b${++synthSeq}`;
+      synthetic.set(obj, id);
+    }
+    return id;
+  }
+
+  // --- the move overlay: rowKey -> lane and rowKey -> sort order. Applied on
+  // top of the data; never mutates the consumer's rows. The edit overlay does
+  // the same for saved field values. ---
+  let laneOf = $state<Record<string, string>>({});
+  let orderOf = $state<Record<string, number>>({});
+  let swimOf = $state<Record<string, string>>({});
+  let edits = $state<Record<string, Record<string, unknown>>>({});
+  let subDone = $state<Record<string, Record<string, boolean>>>({});
+  let subAdded = $state<Record<string, BoardSubtask[]>>({});
+  let laneOrder = $state<string[]>([]);
+  let collapsedSwim = $state<Record<string, boolean>>({});
+
+  function effectiveLane(row: TData): string {
+    return laneOf[key(row)] ?? rawLane(row);
+  }
+  function ord(row: TData): number {
+    return orderOf[key(row)] ?? (indexOf.get(row) ?? 0);
+  }
+
+  // --- swimlanes: an optional second axis (board.swimlaneBy). ---
+  const swimField = $derived(board.swimlaneBy);
+  function rawSwim(row: TData): string {
+    if (!swimField) return "";
+    const v = fieldValue(row, swimField);
+    return v == null ? "" : String(v);
+  }
+  function effectiveSwim(row: TData): string {
+    return swimOf[key(row)] ?? rawSwim(row);
+  }
+  const swimlanes = $derived.by<Array<{ id: string; title: string }>>(() => {
+    if (!swimField) return [];
+    const seen = new Set<string>();
+    const out: Array<{ id: string; title: string }> = [];
+    for (const row of data) {
+      const k = rawSwim(row);
+      if (!seen.has(k)) {
+        seen.add(k);
+        out.push({ id: k, title: k === "" ? "(none)" : k });
+      }
+    }
+    return out;
+  });
+
+  // --- lane collapse ---
+  let collapsed = $state<Record<string, boolean>>({});
+  function toggleCollapse(laneId: string) {
+    if (board.collapsibleLanes) collapsed[laneId] = !collapsed[laneId];
+  }
+  function toggleSwim(swimId: string) {
+    if (board.collapsibleSwimlanes) collapsedSwim[swimId] = !collapsedSwim[swimId];
+  }
+
+  // --- inline lane rename (board.onLaneRename) ---
+  let renamingLane = $state<string | null>(null);
+  let renameText = $state("");
+  function startRename(lane: BoardLane) {
+    if (!board.onLaneRename) return;
+    renamingLane = lane.id;
+    renameText = laneTitle(lane);
+  }
+  function commitRename(laneId: string) {
+    const t = renameText.trim();
+    renamingLane = null;
+    if (t) board.onLaneRename?.(laneId, t);
+  }
+
+  // --- layout persistence: the overlay + collapse state, saved to
+  // localStorage (persistKey) and/or emitted via onLayoutChange. Needs a
+  // stable getRowId so the keys survive a reload. ---
+  const canPersist = $derived(!!board.persistKey && !!getRowId);
+  function serializeLayout() {
+    return {
+      laneOf: { ...laneOf },
+      orderOf: { ...orderOf },
+      swimOf: { ...swimOf },
+      edits: { ...edits },
+      collapsed: { ...collapsed },
+      subDone: { ...subDone },
+      subAdded: { ...subAdded },
+      laneOrder: [...laneOrder],
+      collapsedSwim: { ...collapsedSwim },
+    };
+  }
+  // Restore once at init (before first paint).
+  if (board.persistKey && getRowId && typeof localStorage !== "undefined") {
+    try {
+      const raw = localStorage.getItem(board.persistKey);
+      if (raw) {
+        const s = JSON.parse(raw);
+        laneOf = s.laneOf ?? {};
+        orderOf = s.orderOf ?? {};
+        swimOf = s.swimOf ?? {};
+        edits = s.edits ?? {};
+        collapsed = s.collapsed ?? {};
+        subDone = s.subDone ?? {};
+        subAdded = s.subAdded ?? {};
+        laneOrder = s.laneOrder ?? [];
+        collapsedSwim = s.collapsedSwim ?? {};
+      }
+    } catch {
+      /* ignore corrupt/blocked storage */
+    }
+  }
+  let layoutLoaded = false;
+  $effect(() => {
+    const layout = serializeLayout(); // reads every map -> tracks changes
+    // Skip the initial run so we don't rewrite what we just restored.
+    if (!layoutLoaded) {
+      layoutLoaded = true;
+      return;
+    }
+    if (canPersist && typeof localStorage !== "undefined") {
+      try {
+        localStorage.setItem(board.persistKey as string, JSON.stringify(layout));
+      } catch {
+        /* ignore */
+      }
+    }
+    board.onLayoutChange?.(layout);
+  });
+
+  // --- per-lane virtualization (fixed-height windowing) ---
+  const virtualized = $derived(board.virtualized === true);
+  const cardH = $derived(board.cardHeight ?? 76);
+  const VOVERSCAN = 4;
+  const VGAP = 8;
+  let laneScroll = $state<Record<string, number>>({});
+  let laneVh = $state<Record<string, number>>({});
+  const laneBodyEl = new Map<string, HTMLElement>();
+  function cellKey(laneId: string, swimId: string | null): string {
+    return `${swimId ?? ""}::${laneId}`;
+  }
+  function laneWindow(laneId: string, swimId: string | null, count: number) {
+    if (!virtualized) return { start: 0, end: count, top: 0, bottom: 0 };
+    const ck = cellKey(laneId, swimId);
+    const stride = cardH + VGAP;
+    const scroll = laneScroll[ck] ?? 0;
+    const vh = laneVh[ck] || 400;
+    const start = Math.max(0, Math.floor(scroll / stride) - VOVERSCAN);
+    const end = Math.min(count, Math.ceil((scroll + vh) / stride) + VOVERSCAN);
+    return { start, end, top: start * stride, bottom: Math.max(0, (count - end) * stride) };
+  }
+  // Svelte action: track a lane body's scroll + height so windowing follows it.
+  function trackLane(node: HTMLElement, ck: string) {
+    laneBodyEl.set(ck, node);
+    const update = () => {
+      laneScroll[ck] = node.scrollTop;
+      laneVh[ck] = node.clientHeight;
+    };
+    update();
+    node.addEventListener("scroll", update, { passive: true });
+    let ro: ResizeObserver | undefined;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(update);
+      ro.observe(node);
+    }
+    return {
+      update(nextCk: string) {
+        laneBodyEl.delete(ck);
+        ck = nextCk;
+        laneBodyEl.set(ck, node);
+        update();
+      },
+      destroy() {
+        laneBodyEl.delete(ck);
+        node.removeEventListener("scroll", update);
+        ro?.disconnect();
+      },
+    };
+  }
+
+  // --- columns lookup + default title/meta fields ---
+  const fieldColumns = $derived(
+    columns.filter((c) => typeof c.field === "string"),
+  );
+  function headerLabel(field: string): string {
+    const col = fieldColumns.find((c) => c.field === field);
+    return col && typeof col.header === "string" ? col.header : field;
+  }
+  const titleField = $derived(
+    board.titleField ?? (fieldColumns[0]?.field as string | undefined),
+  );
+  const metaFields = $derived.by(() => {
+    if (board.cardFields) return board.cardFields.slice(0, 4);
+    return fieldColumns
+      .map((c) => c.field as string)
+      .filter((f) => f !== titleField && f !== groupBy)
+      .slice(0, 3);
+  });
+
+  // --- built-in card editor: fields come from columns with an editorType (or
+  // all fields if none declare one). Edits go to the overlay + `onCardCommit`.
+  const editable = $derived(board.editable === true);
+  const editColumns = $derived.by(() => {
+    const typed = fieldColumns.filter((c) => c.editorType);
+    return (typed.length ? typed : fieldColumns).filter(
+      (c) => c.field !== groupBy,
+    );
+  });
+  function editorKind(col: (typeof editColumns)[number]): string {
+    const t = col.editorType;
+    if (t === "number") return "number";
+    if (t === "checkbox") return "checkbox";
+    if (t === "date") return "date";
+    return "text";
+  }
+
+  let editingKey = $state<string | null>(null);
+  let draft = $state<Record<string, unknown>>({});
+
+  function openEditor(row: TData) {
+    if (board.onCardEdit) {
+      board.onCardEdit(row);
+      return;
+    }
+    if (board.drawer) {
+      drawerRow = row;
+      return;
+    }
+    if (!editable) return;
+    const next: Record<string, unknown> = {};
+    for (const col of editColumns) {
+      const f = col.field as string;
+      next[f] = fieldValue(row, f);
+    }
+    draft = next;
+    editingKey = key(row);
+  }
+  function saveEditor(row: TData) {
+    const k = key(row);
+    const changes: Record<string, unknown> = {};
+    for (const col of editColumns) {
+      const f = col.field as string;
+      if (draft[f] !== fieldValue(row, f)) changes[f] = draft[f];
+    }
+    edits[k] = { ...(edits[k] ?? {}), ...draft };
+    editingKey = null;
+    board.onCardCommit?.({ row, changes, values: { ...draft } });
+  }
+  function cancelEditor() {
+    editingKey = null;
+    draft = {};
+  }
+  function onDraftInput(field: string, kind: string, e: Event) {
+    const el = e.currentTarget as HTMLInputElement;
+    draft[field] =
+      kind === "checkbox"
+        ? el.checked
+        : kind === "number"
+          ? el.value === ""
+            ? null
+            : Number(el.value)
+          : el.value;
+  }
+
+  // --- built-in detail drawer (board.drawer): an SvDrawer + SvForm of the
+  // card's fields, rendered with the UI-kit editors. ---
+  let drawerRow = $state.raw<TData | null>(null);
+  const drawerCfg = $derived(
+    board.drawer && typeof board.drawer === "object" ? board.drawer : null,
+  );
+  type DrawerCol = ColumnDef<TFeatures, TData>;
+  const drawerFieldCols = $derived.by<DrawerCol[]>(() => {
+    const wanted = drawerCfg?.fields;
+    if (wanted && wanted.length) {
+      return wanted
+        .map((f) => fieldColumns.find((c) => c.field === f))
+        .filter((c): c is DrawerCol => !!c);
+    }
+    return fieldColumns;
+  });
+  function formType(t: string | undefined): FormFieldType {
+    switch (t) {
+      case "number":
+        return "number";
+      case "checkbox":
+        return "checkbox";
+      case "date":
+      case "date-native":
+      case "datetime":
+      case "datetime-native":
+        return "date";
+      case "textarea":
+        return "textarea";
+      case "password":
+        return "password";
+      case "color":
+        return "color";
+      case "list":
+      case "select":
+      case "rich-select":
+        return "select";
+      default:
+        return "text";
+    }
+  }
+  function drawerOptions(col: DrawerCol, row: TData) {
+    const raw =
+      typeof col.editorOptions === "function" ? col.editorOptions(row) : col.editorOptions;
+    if (!raw) return undefined;
+    return raw.map((o) =>
+      typeof o === "object"
+        ? { value: o.value, label: o.label ?? String(o.value) }
+        : { value: o, label: String(o) },
+    );
+  }
+  function drawerForm(row: TData): FormField[] {
+    return drawerFieldCols.map((col) => {
+      const f = col.field as string;
+      const type = formType(col.editorType);
+      return {
+        name: f,
+        label: typeof col.header === "string" ? col.header : f,
+        type,
+        options: type === "select" ? drawerOptions(col, row) : undefined,
+      };
+    });
+  }
+  function drawerInitial(row: TData): Record<string, unknown> {
+    const out: Record<string, unknown> = {};
+    for (const col of drawerFieldCols) {
+      const f = col.field as string;
+      out[f] = fieldValue(row, f);
+    }
+    return out;
+  }
+  function drawerTitleOf(row: TData): string {
+    const t = drawerCfg?.title;
+    if (typeof t === "function") return t(row);
+    if (typeof t === "string") return t;
+    return titleField ? fmt(fieldValue(row, titleField)) : "Details";
+  }
+  function onDrawerSubmit(row: TData, values: Record<string, unknown>) {
+    const k = key(row);
+    const changes: Record<string, unknown> = {};
+    for (const [f, v] of Object.entries(values)) {
+      if (v !== fieldValue(row, f)) changes[f] = v;
+    }
+    edits[k] = { ...(edits[k] ?? {}), ...values };
+    board.onCardCommit?.({ row, changes, values });
+    drawerRow = null;
+  }
+
+  // --- sub-tasks (checklist on a card). Toggles/adds live in an overlay so the
+  // consumer's data is never mutated; callbacks notify. subDone/subAdded are
+  // declared with the other overlays above (so persistence can read them). ---
+  let subOpen = $state<Record<string, boolean>>({});
+  let subSeq = 0;
+  function baseSubtasks(row: TData): BoardSubtask[] {
+    if (!board.subtasks) return [];
+    const v = fieldValue(row, board.subtasks);
+    return Array.isArray(v) ? (v as BoardSubtask[]) : [];
+  }
+  function subtasksOf(row: TData): BoardSubtask[] {
+    const k = key(row);
+    const overrides = subDone[k] ?? {};
+    const base = baseSubtasks(row).map((s) =>
+      String(s.id) in overrides ? { ...s, done: overrides[String(s.id)]! } : s,
+    );
+    return [...base, ...(subAdded[k] ?? [])];
+  }
+  function subProgress(row: TData): { done: number; total: number } {
+    const list = subtasksOf(row);
+    return { done: list.filter((s) => s.done).length, total: list.length };
+  }
+  function toggleSubtask(row: TData, sub: BoardSubtask) {
+    const k = key(row);
+    const next = !sub.done;
+    const added = subAdded[k];
+    const inAdded = added?.find((s) => String(s.id) === String(sub.id));
+    if (inAdded) inAdded.done = next;
+    else subDone[k] = { ...(subDone[k] ?? {}), [String(sub.id)]: next };
+    board.onSubtaskToggle?.(row, sub.id, next);
+  }
+  function addSubtask(row: TData, title: string) {
+    const t = title.trim();
+    if (!t) return;
+    const k = key(row);
+    subAdded[k] = [...(subAdded[k] ?? []), { id: `s${++subSeq}`, title: t, done: false }];
+    board.onSubtaskAdd?.(row, t);
+  }
+
+  // --- card badges (default card): labels, due date, assignees ---
+  function labelsOf(row: TData): Array<{ text: string; color?: string }> {
+    if (!board.labelsField) return [];
+    const v = fieldValue(row, board.labelsField);
+    if (!Array.isArray(v)) return [];
+    return v.map((l) =>
+      typeof l === "string" ? { text: l } : (l as { text: string; color?: string }),
+    );
+  }
+  function assigneesOf(row: TData): string[] {
+    if (!board.assigneesField) return [];
+    const v = fieldValue(row, board.assigneesField);
+    if (Array.isArray(v)) return v.map(String);
+    return v == null ? [] : [String(v)];
+  }
+  function dueOf(row: TData): { label: string; overdue: boolean } | null {
+    if (!board.dueField) return null;
+    const v = fieldValue(row, board.dueField);
+    if (v == null || v === "") return null;
+    const d = v instanceof Date ? v : new Date(String(v));
+    if (Number.isNaN(d.getTime())) return { label: String(v), overdue: false };
+    const overdue = d.getTime() < todayStart;
+    return { label: d.toLocaleDateString(undefined, { month: "short", day: "numeric" }), overdue };
+  }
+  function initials(name: string): string {
+    return name.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase();
+  }
+  function countOf(row: TData, field: string | undefined): number {
+    if (!field) return 0;
+    const v = fieldValue(row, field);
+    if (Array.isArray(v)) return v.length;
+    if (typeof v === "number") return v;
+    return 0;
+  }
+  function coverColorOf(row: TData): string | null {
+    if (!board.coverField) return null;
+    const v = fieldValue(row, board.coverField);
+    return v == null || v === "" ? null : String(v);
+  }
+  const todayStart = (() => {
+    const n = new Date();
+    return new Date(n.getFullYear(), n.getMonth(), n.getDate()).getTime();
+  })();
+  function isFlagged(row: TData): boolean {
+    return board.flagField ? !!fieldValue(row, board.flagField) : false;
+  }
+  function flagReason(row: TData): string | null {
+    if (!board.flagField) return null;
+    const v = fieldValue(row, board.flagField);
+    return typeof v === "string" && v.trim() ? v : null;
+  }
+  // A blocked card is locked from moving unless flagBlocksMoves is false.
+  const flagBlocksMoves = $derived(board.flagBlocksMoves !== false);
+  function movable(row: TData): boolean {
+    return !(flagBlocksMoves && isFlagged(row));
+  }
+
+  // --- comments (read / write / delete) ---
+  let commentsOpen = $state<Record<string, boolean>>({});
+  function commentsOf(row: TData): BoardComment[] {
+    if (!board.commentsField) return [];
+    const v = fieldValue(row, board.commentsField);
+    if (!Array.isArray(v)) return [];
+    return v.map((c, i) =>
+      typeof c === "string"
+        ? { id: i, text: c }
+        : (c as BoardComment),
+    );
+  }
+  function addComment(row: TData, text: string) {
+    const t = text.trim();
+    if (t) board.onCommentAdd?.(row, t);
+  }
+  function deleteComment(row: TData, id: string | number) {
+    board.onCommentDelete?.(row, id);
+  }
+  function ageOf(row: TData): string | null {
+    if (!board.ageField) return null;
+    const v = fieldValue(row, board.ageField);
+    if (v == null || v === "") return null;
+    const d = v instanceof Date ? v : new Date(String(v));
+    if (Number.isNaN(d.getTime())) return null;
+    const days = Math.floor((todayStart - d.getTime()) / 86400000);
+    if (days <= 0) return "today";
+    if (days < 7) return `${days}d`;
+    if (days < 30) return `${Math.floor(days / 7)}w`;
+    return `${Math.floor(days / 30)}mo`;
+  }
+
+  // --- facet filter bar (board.facets) ---
+  let facetSel = $state<Record<string, string[]>>({});
+  function rowFacetValues(row: TData, field: string): string[] {
+    const v = fieldValue(row, field);
+    if (Array.isArray(v))
+      return v.map((el) =>
+        typeof el === "string" ? el : String((el as { text?: unknown }).text ?? el),
+      );
+    return v == null || v === "" ? [] : [String(v)];
+  }
+  function facetOptions(field: string): Array<{ value: string; count: number }> {
+    const counts = new Map<string, number>();
+    for (const row of data)
+      for (const val of rowFacetValues(row, field)) counts.set(val, (counts.get(val) ?? 0) + 1);
+    return [...counts.entries()].map(([value, count]) => ({ value, count }));
+  }
+  function toggleFacet(field: string, value: string) {
+    const cur = facetSel[field] ?? [];
+    facetSel[field] = cur.includes(value) ? cur.filter((v) => v !== value) : [...cur, value];
+  }
+  function clearFacets() {
+    facetSel = {};
+  }
+  const anyFacet = $derived(Object.values(facetSel).some((a) => a.length > 0));
+  function matchesFacets(row: TData): boolean {
+    for (const [field, sel] of Object.entries(facetSel)) {
+      if (!sel.length) continue;
+      const vals = rowFacetValues(row, field);
+      if (!sel.some((s) => vals.includes(s))) return false;
+    }
+    return true;
+  }
+
+  // --- multi-select (board.selectable) ---
+  let selected = $state<Record<string, boolean>>({});
+  function selectedRows(): TData[] {
+    return data.filter((r) => selected[key(r)]);
+  }
+  function emitSelection() {
+    board.onSelectionChange?.(selectedRows());
+  }
+  function onCardClick(e: MouseEvent, row: TData) {
+    if (!board.selectable) return;
+    const k = key(row);
+    if (e.ctrlKey || e.metaKey) {
+      selected[k] = !selected[k];
+    } else {
+      selected = { [k]: true };
+    }
+    emitSelection();
+  }
+
+  // --- child cards (board.childrenField) - epic -> stories ---
+  let childOpen = $state<Record<string, boolean>>({});
+  function childrenOf(row: TData): TData[] {
+    if (!board.childrenField) return [];
+    const v = fieldValue(row, board.childrenField);
+    return Array.isArray(v) ? (v as TData[]) : [];
+  }
+
+  // --- quick-add composer (per lane) ---
+  let composerOpen = $state<Record<string, boolean>>({});
+  let composerText = $state<Record<string, string>>({});
+  function submitComposer(laneId: string) {
+    const t = (composerText[laneId] ?? "").trim();
+    if (t) board.onCardAdd?.(laneId, t);
+    composerText[laneId] = "";
+  }
+  function focusNode(node: HTMLElement) {
+    node.focus();
+  }
+
+  // --- lane model: explicit lanes, else distinct field values (first-seen).
+  // Derived from the RAW field, not the move overlay, so the lane order stays
+  // stable when a card is moved. (Pass `lanes` to pin the order explicitly.) ---
+  const lanes = $derived.by<BoardLane[]>(() => {
+    let base: BoardLane[];
+    if (board.lanes && board.lanes.length) {
+      base = [...board.lanes];
+    } else {
+      const seen = new Set<string>();
+      base = [];
+      for (const row of data) {
+        const k = rawLane(row);
+        if (!seen.has(k)) {
+          seen.add(k);
+          base.push({ id: k, title: k === "" ? "(empty)" : k });
+        }
+      }
+    }
+    if (!laneOrder.length) return base;
+    // Apply the drag-reorder overlay: ordered ids first, then any new lanes.
+    const byId = new Map(base.map((l) => [l.id, l]));
+    const ordered = laneOrder.map((id) => byId.get(id)).filter((l): l is BoardLane => !!l);
+    const rest = base.filter((l) => !laneOrder.includes(l.id));
+    return [...ordered, ...rest];
+  });
+
+  // --- lane drag-reorder (drag lane headers) ---
+  let dragLaneId = $state<string | null>(null);
+  let overLaneId = $state<string | null>(null);
+  function onLaneHeaderDragStart(e: DragEvent, laneId: string) {
+    dragLaneId = laneId;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", `lane:${laneId}`);
+    }
+  }
+  function onLaneHeaderDragOver(e: DragEvent, laneId: string) {
+    if (dragLaneId == null || laneId === dragLaneId) return;
+    e.preventDefault();
+    overLaneId = laneId;
+  }
+  function onLaneHeaderDrop(e: DragEvent, laneId: string) {
+    if (dragLaneId == null) return;
+    e.preventDefault();
+    const ids = lanes.map((l) => l.id);
+    const to = ids.indexOf(laneId);
+    if (to > -1) reorderLaneTo(dragLaneId, to);
+    dragLaneId = null;
+    overLaneId = null;
+  }
+  function onLaneHeaderDragEnd() {
+    dragLaneId = null;
+    overLaneId = null;
+  }
+
+  // Shared by mouse drag-drop (above) and keyboard reorder (below): moves
+  // `fromId` to `toIndex` in the lane order, persists it, and notifies.
+  // Returns the new ordered ids, or null if the move was a no-op / invalid.
+  function reorderLaneTo(fromId: string, toIndex: number): string[] | null {
+    const ids = lanes.map((l) => l.id);
+    const from = ids.indexOf(fromId);
+    if (from < 0 || toIndex < 0 || toIndex >= ids.length || from === toIndex) return null;
+    ids.splice(toIndex, 0, ids.splice(from, 1)[0]!);
+    laneOrder = ids;
+    board.onLaneReorder?.(ids);
+    return ids;
+  }
+  // Keyboard lane reorder: Ctrl/Cmd+ArrowLeft/Right shifts the focused lane
+  // header by one position, mirroring the drag-reorder above.
+  function onLaneHeaderKeydown(e: KeyboardEvent, laneId: string) {
+    if (!board.reorderableLanes) return;
+    if ((e.key !== "ArrowLeft" && e.key !== "ArrowRight") || !(e.ctrlKey || e.metaKey)) return;
+    e.preventDefault();
+    const ids = lanes.map((l) => l.id);
+    const from = ids.indexOf(laneId);
+    if (from < 0) return;
+    const to = from + (e.key === "ArrowRight" ? 1 : -1);
+    const moved = reorderLaneTo(laneId, to);
+    if (moved) {
+      const pos = moved.indexOf(laneId) + 1;
+      announce(`Moved ${laneTitleById(laneId)} to position ${pos} of ${moved.length}.`);
+    }
+  }
+
+  // Runtime group-by change: the position overlay (laneOf/orderOf/laneOrder) is
+  // keyed to the old field, so reset it when `groupBy` changes. Edits and
+  // sub-tasks (keyed by row) are kept. Skips the initial run so a restored
+  // layout isn't wiped on mount.
+  let gbInitialized = false;
+  let prevGroupBy: string | undefined;
+  $effect(() => {
+    const g = groupBy;
+    if (!gbInitialized) {
+      gbInitialized = true;
+      prevGroupBy = g;
+      return;
+    }
+    if (g !== prevGroupBy) {
+      prevGroupBy = g;
+      laneOf = {};
+      orderOf = {};
+      laneOrder = [];
+    }
+  });
+
+  function laneCards(laneId: string, swimId: string | null = null): TData[] {
+    return data
+      .filter(
+        (r) =>
+          effectiveLane(r) === laneId &&
+          (swimId == null || effectiveSwim(r) === swimId) &&
+          matchesFacets(r),
+      )
+      .sort((a, b) => ord(a) - ord(b));
+  }
+  function laneTitle(lane: BoardLane): string {
+    return lane.title ?? (lane.id === "" ? "(empty)" : lane.id);
+  }
+  function laneWip(laneId: string): number | undefined {
+    return lanes.find((l) => l.id === laneId)?.wipLimit ?? undefined;
+  }
+  function swimRows(swimId: string): TData[] {
+    return data.filter((r) => effectiveSwim(r) === swimId && matchesFacets(r));
+  }
+  function swimCount(swimId: string): number {
+    return swimRows(swimId).length;
+  }
+
+  // --- the one place a move is applied: compute the new order slot and record
+  // it in the overlay, then notify. `pos` is the insertion index within the
+  // destination lane (excluding the moved card). Returns false if rejected. ---
+  function applyMove(
+    row: TData,
+    fromLane: string,
+    toLane: string,
+    pos: number,
+    toSwim: string | null = null,
+    fromSwim: string | null = null,
+  ): boolean {
+    const sameCell = fromLane === toLane && (toSwim == null || toSwim === fromSwim);
+    // WIP enforcement: reject a move INTO a different lane past its limit.
+    if (board.enforceWip && !sameCell) {
+      const lim = laneWip(toLane);
+      if (lim != null && laneCards(toLane, toSwim).filter((r) => r !== row).length >= lim) {
+        announce(`${laneTitleById(toLane)} is at its WIP limit (${lim}).`);
+        return false;
+      }
+    }
+    const list = laneCards(toLane, toSwim).filter((r) => r !== row);
+    const clamped = Math.max(0, Math.min(pos, list.length));
+    if (sameCell) {
+      const currentPos = laneCards(fromLane, toSwim).indexOf(row);
+      if (currentPos === clamped) return false;
+    }
+    const before = list[clamped - 1];
+    const after = list[clamped];
+    let newOrd: number;
+    if (before && after) newOrd = (ord(before) + ord(after)) / 2;
+    else if (before) newOrd = ord(before) + 1;
+    else if (after) newOrd = ord(after) - 1;
+    else newOrd = 0;
+    const k = key(row);
+    laneOf[k] = toLane;
+    orderOf[k] = newOrd;
+    if (swimField && toSwim != null) swimOf[k] = toSwim;
+    board.onCardMove?.({
+      row,
+      fromLane,
+      toLane,
+      toIndex: clamped,
+      ...(swimField ? { fromSwimlane: fromSwim ?? undefined, toSwimlane: toSwim ?? undefined } : {}),
+    });
+    return true;
+  }
+
+  // --- mouse drag & drop ---
+  // Row-holding state is `$state.raw` so the stored object keeps its identity
+  // (plain `$state` would proxy it and break `row === dragRow` comparisons).
+  let dragRow = $state.raw<TData | null>(null);
+  let dragFromLane = $state<string | null>(null);
+  let dragFromSwim = $state<string | null>(null);
+  let overLane = $state<string | null>(null);
+  let overSwim = $state<string | null>(null);
+  let overRow = $state.raw<TData | null>(null);
+  let overAfter = $state(false);
+
+  function markerIndex(laneId: string, swimId: string | null, cards: TData[]): number {
+    if (!dragRow || overLane !== laneId || overSwim !== swimId) return -1;
+    if (!overRow) return cards.length;
+    const i = cards.indexOf(overRow);
+    if (i < 0) return cards.length;
+    return overAfter ? i + 1 : i;
+  }
+
+  function onCardDragStart(e: DragEvent, row: TData, fromLane: string, fromSwim: string | null) {
+    if (!movable(row)) {
+      e.preventDefault();
+      return;
+    }
+    // Dragging an unselected card (with multi-select on) reduces the selection
+    // to just it, so the drag moves what the user grabbed.
+    if (board.selectable && !selected[key(row)]) {
+      selected = { [key(row)]: true };
+      emitSelection();
+    }
+    dragRow = row;
+    dragFromLane = fromLane;
+    dragFromSwim = fromSwim;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", key(row));
+    }
+  }
+  function onCardDragOver(e: DragEvent, row: TData, laneId: string, swimId: string | null) {
+    if (!dragRow) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    overLane = laneId;
+    overSwim = swimId;
+    overRow = row;
+    overAfter = e.clientY - rect.top > rect.height / 2;
+  }
+  function onLaneDragOver(e: DragEvent, laneId: string, swimId: string | null) {
+    if (!dragRow) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    // Only claim the append slot when the pointer is over empty lane space
+    // (a card's own handler stops propagation for the over-a-card case).
+    if (e.target === e.currentTarget) {
+      overLane = laneId;
+      overSwim = swimId;
+      overRow = null;
+    }
+  }
+  function onLaneDrop(e: DragEvent, laneId: string, swimId: string | null) {
+    e.preventDefault();
+    const row = dragRow;
+    const fromLane = dragFromLane;
+    const fromSwim = dragFromSwim;
+    const target = overRow;
+    const after = overAfter;
+    resetDrag();
+    if (!row || fromLane == null) return;
+    // Multi-select: dragging a selected card moves the whole selection.
+    const multi = board.selectable && selected[key(row)] && selectedRows().length > 1;
+    const movers = multi ? selectedRows() : [row];
+    const moverKeys = new Set(movers.map((r) => key(r)));
+    const rest = laneCards(laneId, swimId).filter((r) => !moverKeys.has(key(r)));
+    let pos: number;
+    if (!target || moverKeys.has(key(target))) pos = rest.length;
+    else {
+      const i = rest.indexOf(target);
+      pos = i < 0 ? rest.length : after ? i + 1 : i;
+    }
+    movers.forEach((r, i) => applyMove(r, effectiveLane(r), laneId, pos + i, swimId, fromSwim));
+  }
+  function resetDrag() {
+    dragRow = null;
+    dragFromLane = null;
+    dragFromSwim = null;
+    overLane = null;
+    overSwim = null;
+    overRow = null;
+    overAfter = false;
+  }
+
+  // --- keyboard drag & drop (grab with Space/Enter, move with arrows) ---
+  let grabbed = $state.raw<TData | null>(null);
+  let grabInfo: { lane: string; order: number; swim: string } | null = null;
+  let liveMsg = $state("");
+
+  function announce(msg: string) {
+    liveMsg = msg;
+  }
+
+  function laneIndex(laneId: string): number {
+    return lanes.findIndex((l) => l.id === laneId);
+  }
+
+  function onCardKeydown(e: KeyboardEvent, row: TData, laneId: string) {
+    if (e.key === "F2" && (editable || board.onCardEdit || board.drawer)) {
+      e.preventDefault();
+      openEditor(row);
+      return;
+    }
+    // Keyboard multi-select: Ctrl/Cmd+Space toggles this card's selection,
+    // mirroring onCardClick's ctrl/meta-click branch. Kept on a modifier so it
+    // never collides with plain Space, which grabs the card for a move.
+    if (board.selectable && e.key === " " && (e.ctrlKey || e.metaKey) && grabbed == null) {
+      e.preventDefault();
+      const k = key(row);
+      selected[k] = !selected[k];
+      emitSelection();
+      announce(
+        `${selected[k] ? "Selected" : "Deselected"} ${cardLabel(row)}. ${selectedRows().length} selected.`,
+      );
+      return;
+    }
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      if (grabbed === row) {
+        announce(`Dropped ${cardLabel(row)} in ${laneTitleById(laneId)}.`);
+        grabbed = null;
+        grabInfo = null;
+      } else if (!movable(row)) {
+        announce(`${cardLabel(row)} is blocked and can't be moved.`);
+      } else {
+        grabbed = row;
+        grabInfo = { lane: effectiveLane(row), order: ord(row), swim: effectiveSwim(row) };
+        announce(
+          `Grabbed ${cardLabel(row)}. Use arrow keys to move, Space to drop, Escape to cancel.`,
+        );
+      }
+      return;
+    }
+    if (e.key === "Escape" && grabbed === row) {
+      e.preventDefault();
+      if (grabInfo) {
+        const k = key(row);
+        laneOf[k] = grabInfo.lane;
+        orderOf[k] = grabInfo.order;
+        if (swimField) swimOf[k] = grabInfo.swim;
+      }
+      grabbed = null;
+      grabInfo = null;
+      announce("Cancelled.");
+      return;
+    }
+    const li = laneIndex(laneId);
+    // Keyboard move/nav stays within the card's own swimlane band.
+    const swim = swimField ? effectiveSwim(row) : null;
+    if (grabbed === row) {
+      // Grabbed: arrow keys MOVE the card (within its swimlane band).
+      if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+        e.preventDefault();
+        const dest = lanes[e.key === "ArrowRight" ? li + 1 : li - 1];
+        if (!dest) return;
+        const pos = laneCards(dest.id, swim).filter((r) => r !== row).length;
+        if (applyMove(row, laneId, dest.id, pos, swim, swim)) {
+          announce(`Moved to ${laneTitle(dest)}.`);
+          focusCardSoon(row);
+        }
+      } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        e.preventDefault();
+        const cards = laneCards(laneId, swim);
+        const idx = cards.indexOf(row);
+        const target = idx + (e.key === "ArrowDown" ? 1 : -1);
+        if (target < 0 || target >= cards.length) return;
+        // In the list excluding the moved card, `target` is the insertion slot
+        // for both directions (indices shift by the card's own removal).
+        applyMove(row, laneId, laneId, target, swim, swim);
+        announce(`Moved ${e.key === "ArrowDown" ? "down" : "up"}.`);
+        focusCardSoon(row);
+      }
+      return;
+    }
+    // Not grabbed: arrow keys MOVE FOCUS between cards and lanes.
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const cards = laneCards(laneId, swim);
+      const idx = cards.indexOf(row);
+      const next = cards[idx + (e.key === "ArrowDown" ? 1 : -1)];
+      if (next) focusCardEl(next);
+    } else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      e.preventDefault();
+      const dest = lanes[e.key === "ArrowRight" ? li + 1 : li - 1];
+      if (!dest) return;
+      const idx = Math.max(0, laneCards(laneId, swim).indexOf(row));
+      const destCards = laneCards(dest.id, swim);
+      const targetCard = destCards[Math.min(idx, destCards.length - 1)];
+      if (targetCard) focusCardEl(targetCard);
+    }
+  }
+
+  function cardLabel(row: TData): string {
+    return titleField ? fmt(fieldValue(row, titleField)) : "card";
+  }
+  function laneTitleById(laneId: string): string {
+    const l = lanes.find((x) => x.id === laneId);
+    return l ? laneTitle(l) : laneId;
+  }
+  async function focusCardEl(row: TData) {
+    let el = rootEl?.querySelector<HTMLElement>(
+      `[data-card-key="${cssEscape(key(row))}"]`,
+    );
+    if (!el && virtualized) {
+      // Off-screen in a virtualized lane: scroll it into view, then focus.
+      const laneId = effectiveLane(row);
+      const swimId = swimField ? effectiveSwim(row) : null;
+      const idx = laneCards(laneId, swimId).indexOf(row);
+      const body = laneBodyEl.get(cellKey(laneId, swimId));
+      if (body && idx >= 0) {
+        body.scrollTop = idx * (cardH + VGAP);
+        laneScroll[cellKey(laneId, swimId)] = body.scrollTop;
+        await tick();
+        el = rootEl?.querySelector<HTMLElement>(
+          `[data-card-key="${cssEscape(key(row))}"]`,
+        );
+      }
+    }
+    el?.focus();
+  }
+  async function focusCardSoon(row: TData) {
+    // Re-focus the card after the DOM re-sorts so keyboard flow continues.
+    await tick();
+    focusCardEl(row);
+  }
+  function cssEscape(s: string): string {
+    return s.replace(/["\\]/g, "\\$&");
+  }
+
+  let rootEl: HTMLDivElement | undefined;
+
+  // --- card context menu (board.cardMenu) ---
+  let menuOpen = $state(false);
+  let menuPos = $state({ x: 0, y: 0 });
+  let menuItems = $state.raw<ReadonlyArray<MenuItem>>([]);
+  let menuPanel = $state<HTMLDivElement | null>(null);
+  const MENU_W = 200;
+  function showMenuAt(e: MouseEvent, items: ReadonlyArray<MenuItem>) {
+    if (!items.length) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const estH = Math.min(items.length, 12) * 34 + 8;
+    const x = Math.min(e.clientX, window.innerWidth - MENU_W - 6);
+    const y = Math.min(e.clientY, window.innerHeight - estH - 6);
+    menuPos = { x: Math.max(6, x), y: Math.max(6, y) };
+    menuItems = items;
+    menuOpen = true;
+  }
+  function openCardMenu(e: MouseEvent, row: TData) {
+    if (!board.cardMenu) return;
+    const swim = swimField ? effectiveSwim(row) : null;
+    const items = board.cardMenu(row, {
+      lanes,
+      moveTo: (laneId: string) => {
+        const pos = laneCards(laneId, swim).filter((r) => r !== row).length;
+        applyMove(row, effectiveLane(row), laneId, pos, swim, swim);
+      },
+      edit: () => openEditor(row),
+    });
+    if (items) showMenuAt(e, items);
+  }
+  function openLaneMenu(e: MouseEvent, laneId: string, cards: TData[]) {
+    if (!board.laneMenu) return;
+    const items = board.laneMenu(laneId, {
+      laneId,
+      cards,
+      collapsed: collapsed[laneId] === true,
+      toggleCollapse: () => toggleCollapse(laneId),
+      addCard: (title?: string) => board.onCardAdd?.(laneId, title),
+    });
+    if (items) showMenuAt(e, items);
+  }
+  $effect(() => {
+    if (!menuOpen) return;
+    queueMicrotask(() =>
+      menuPanel?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus(),
+    );
+    const layer = createDismissableLayer({
+      element: () => menuPanel,
+      onDismiss: () => (menuOpen = false),
+    });
+    layer.activate();
+    const onScroll = () => (menuOpen = false);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      layer.release();
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  });
+</script>
+
+<div
+  class="sv-board"
+  class:is-swim={!!swimField}
+  role="group"
+  aria-label="Board"
+  bind:this={rootEl}
+>
+  {#if board.facets && board.facets.length}
+    <div class="sv-board-facets">
+      {#each board.facets as field (field)}
+        {#each facetOptions(field) as opt (field + ":" + opt.value)}
+          <button
+            type="button"
+            class="sv-board-facet"
+            class:is-active={(facetSel[field] ?? []).includes(opt.value)}
+            onclick={() => toggleFacet(field, opt.value)}
+          >
+            {opt.value}<span class="sv-board-facet-count">{opt.count}</span>
+          </button>
+        {/each}
+      {/each}
+      {#if anyFacet}
+        <button type="button" class="sv-board-facet-clear" onclick={clearFacets}>Clear filters</button>
+      {/if}
+    </div>
+  {/if}
+
+  {#if swimField}
+    {#each swimlanes as swim (swim.id)}
+      {@const swimCollapsed = collapsedSwim[swim.id] === true}
+      <section class="sv-board-swim" aria-label={swim.title}>
+        <header class="sv-board-swim-head">
+          {#if board.collapsibleSwimlanes}
+            <button
+              type="button"
+              class="sv-board-swim-toggle"
+              aria-expanded={!swimCollapsed}
+              aria-label={swimCollapsed ? `Expand ${swim.title}` : `Collapse ${swim.title}`}
+              onclick={() => toggleSwim(swim.id)}>{swimCollapsed ? "▸" : "▾"}</button
+            >
+          {/if}
+          <span class="sv-board-swim-title">{swim.title}</span>
+          <span class="sv-board-swim-count">{swimCount(swim.id)}</span>
+          {#if board.swimlaneSummary}
+            <span class="sv-board-swim-summary">{board.swimlaneSummary(swimRows(swim.id), swim.id)}</span>
+          {/if}
+        </header>
+        {#if !swimCollapsed}
+          <div class="sv-board-lanes">
+            {#each lanes as lane (lane.id)}
+              {@render laneCol(lane, swim.id)}
+            {/each}
+          </div>
+        {/if}
+      </section>
+    {/each}
+  {:else}
+    <div class="sv-board-lanes">
+      {#each lanes as lane (lane.id)}
+        {@render laneCol(lane, null)}
+      {/each}
+    </div>
+  {/if}
+
+  <div class="sv-board-sr" aria-live="polite" role="status">{liveMsg}</div>
+</div>
+
+{#if menuOpen}
+  <div
+    bind:this={menuPanel}
+    class="sv-board-ctx"
+    use:portalToBody
+    use:popIn={{}}
+    style:position="fixed"
+    style:top={`${menuPos.y}px`}
+    style:left={`${menuPos.x}px`}
+    aria-label="Card actions"
+  >
+    <SvMenuList items={menuItems} onclose={() => (menuOpen = false)} onselect={() => (menuOpen = false)} />
+  </div>
+{/if}
+
+{#if drawerRow}
+  {@const dr = drawerRow}
+  <SvDrawer
+    open
+    onClose={() => (drawerRow = null)}
+    side={drawerCfg?.side ?? "right"}
+    size={drawerCfg?.size ?? "380px"}
+    title={drawerTitleOf(dr)}
+    closeOnBackdrop={false}
+  >
+    {#key key(dr)}
+      <SvForm
+        fields={drawerForm(dr)}
+        initial={drawerInitial(dr)}
+        columns={drawerCfg?.columns ?? 1}
+        submitLabel={drawerCfg?.submitLabel ?? "Save"}
+        onSubmit={(values) => onDrawerSubmit(dr, values)}
+      />
+      {#if board.commentsField}
+        <div class="sv-board-drawer-comments">
+          <div class="sv-board-drawer-h">Comments</div>
+          {@render commentThread(dr)}
+        </div>
+      {/if}
+    {/key}
+  </SvDrawer>
+{/if}
+
+{#snippet commentThread(row: TData)}
+  {@const cmts = commentsOf(row)}
+  {#each cmts as c (c.id)}
+    <div class="sv-board-comment">
+      <div class="sv-board-comment-body">
+        {#if c.author}<span class="sv-board-comment-author">{c.author}</span>{/if}
+        <span class="sv-board-comment-text">{c.text}</span>
+        {#if c.at}<span class="sv-board-comment-at">{c.at}</span>{/if}
+      </div>
+      {#if board.onCommentDelete}
+        <button
+          type="button"
+          class="sv-board-comment-del"
+          aria-label="Delete comment"
+          onclick={() => deleteComment(row, c.id)}>×</button
+        >
+      {/if}
+    </div>
+  {/each}
+  {#if !cmts.length}
+    <div class="sv-board-comment-empty">No comments yet.</div>
+  {/if}
+  {#if board.onCommentAdd}
+    <input
+      class="sv-board-comment-add"
+      placeholder="Write a comment..."
+      onkeydown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          const el = e.currentTarget;
+          addComment(row, el.value);
+          el.value = "";
+        }
+      }}
+    />
+  {/if}
+{/snippet}
+
+{#snippet laneCol(lane: BoardLane, swimId: string | null)}
+  {@const cards = laneCards(lane.id, swimId)}
+  {@const over = lane.wipLimit != null && cards.length > lane.wipLimit}
+  {@const mark = markerIndex(lane.id, swimId, cards)}
+  {@const isCollapsed = collapsed[lane.id] === true}
+  <section
+    class="sv-board-lane"
+    class:is-collapsed={isCollapsed}
+    style={lane.color ? `--sv-board-accent: ${lane.color};` : undefined}
+    aria-label={laneTitle(lane)}
+  >
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <header
+      class="sv-board-lane-head"
+      class:is-reorderable={board.reorderableLanes}
+      class:is-lane-dropover={overLaneId === lane.id && dragLaneId !== lane.id}
+      draggable={board.reorderableLanes ? true : undefined}
+      tabindex={board.reorderableLanes ? 0 : undefined}
+      role={board.reorderableLanes ? "group" : undefined}
+      aria-roledescription={board.reorderableLanes ? "Reorderable lane" : undefined}
+      title={board.reorderableLanes ? "Ctrl+Left/Right arrow to reorder this lane" : undefined}
+      ondragstart={board.reorderableLanes ? (e) => onLaneHeaderDragStart(e, lane.id) : undefined}
+      ondragover={board.reorderableLanes ? (e) => onLaneHeaderDragOver(e, lane.id) : undefined}
+      ondrop={board.reorderableLanes ? (e) => onLaneHeaderDrop(e, lane.id) : undefined}
+      ondragend={board.reorderableLanes ? onLaneHeaderDragEnd : undefined}
+      onkeydown={board.reorderableLanes ? (e) => onLaneHeaderKeydown(e, lane.id) : undefined}
+      oncontextmenu={board.laneMenu ? (e) => openLaneMenu(e, lane.id, cards) : undefined}
+    >
+      {#if board.collapsibleLanes}
+        <button
+          type="button"
+          class="sv-board-lane-toggle"
+          aria-expanded={!isCollapsed}
+          aria-label={isCollapsed ? `Expand ${laneTitle(lane)}` : `Collapse ${laneTitle(lane)}`}
+          onclick={() => toggleCollapse(lane.id)}>{isCollapsed ? "▸" : "▾"}</button
+        >
+      {/if}
+      {#if renamingLane === lane.id}
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          class="sv-board-lane-rename"
+          bind:value={renameText}
+          use:focusNode
+          onkeydown={(e) => {
+            if (e.key === "Enter") { e.preventDefault(); commitRename(lane.id); }
+            else if (e.key === "Escape") { renamingLane = null; }
+          }}
+          onblur={() => commitRename(lane.id)}
+        />
+      {:else if board.onLaneRename}
+        <button
+          type="button"
+          class="sv-board-lane-title is-renamable"
+          ondblclick={() => startRename(lane)}
+          onkeydown={(e) => {
+            if (e.key === "Enter" || e.key === "F2") {
+              e.preventDefault();
+              startRename(lane);
+            }
+          }}
+          title="Double-click, Enter, or F2 to rename"
+        >{laneTitle(lane)}</button>
+      {:else}
+        <span class="sv-board-lane-title">{laneTitle(lane)}</span>
+      {/if}
+      <span
+        class="sv-board-lane-count"
+        class:is-over={over}
+        title={lane.wipLimit != null ? `WIP limit ${lane.wipLimit}` : undefined}
+      >
+        {cards.length}{#if lane.wipLimit != null}/{lane.wipLimit}{/if}
+      </span>
+      {#if board.laneSummary && !isCollapsed}
+        <span class="sv-board-lane-summary">{board.laneSummary(cards, lane.id)}</span>
+      {/if}
+      {#if board.onCardAdd && !isCollapsed}
+        <button
+          type="button"
+          class="sv-board-lane-add"
+          aria-label={`Add card to ${laneTitle(lane)}`}
+          onclick={() => board.onCardAdd?.(lane.id)}>+</button
+        >
+      {/if}
+    </header>
+
+    {#if !isCollapsed}
+      {@const win = laneWindow(lane.id, swimId, cards.length)}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="sv-board-lane-body"
+        class:is-virtual={virtualized}
+        role="list"
+        class:is-dropover={overLane === lane.id && overSwim === swimId}
+        use:trackLane={cellKey(lane.id, swimId)}
+        ondragover={(e) => onLaneDragOver(e, lane.id, swimId)}
+        ondrop={(e) => onLaneDrop(e, lane.id, swimId)}
+      >
+        {#if win.top > 0}
+          <div style={`height:${win.top}px`} aria-hidden="true"></div>
+        {/if}
+        {#each cards.slice(win.start, win.end) as row, i (key(row))}
+          {@const index = win.start + i}
+          {#if mark === index}
+            <div class="sv-board-drop-marker" aria-hidden="true"></div>
+          {/if}
+          {@const isEditing = editingKey === key(row)}
+          <article
+            class="sv-board-card"
+            class:is-dragging={dragRow === row}
+            class:is-grabbed={grabbed === row}
+            class:is-editing={isEditing}
+            class:is-flagged={isFlagged(row)}
+            class:is-locked={!movable(row)}
+            class:is-selected={board.selectable && selected[key(row)]}
+            role="listitem"
+            tabindex="0"
+            data-card-key={key(row)}
+            aria-roledescription="Draggable card"
+            aria-grabbed={grabbed === row}
+            aria-selected={board.selectable ? !!selected[key(row)] : undefined}
+            draggable={!isEditing && movable(row)}
+            ondragstart={(e) => onCardDragStart(e, row, lane.id, swimId)}
+            ondragover={(e) => onCardDragOver(e, row, lane.id, swimId)}
+            ondragend={resetDrag}
+            onclick={board.selectable ? (e) => onCardClick(e, row) : undefined}
+            ondblclick={() => openEditor(row)}
+            oncontextmenu={board.cardMenu ? (e) => openCardMenu(e, row) : undefined}
+            onkeydown={(e) => onCardKeydown(e, row, lane.id)}
+          >
+            {#if isFlagged(row)}<span class="sv-board-card-flag" aria-label="Blocked"></span>{/if}
+            {#if isEditing}
+              <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+              <form
+                class="sv-board-card-edit"
+                onsubmit={(e) => {
+                  e.preventDefault();
+                  saveEditor(row);
+                }}
+                onkeydown={(e) => {
+                  if (e.key === "Escape") {
+                    e.stopPropagation();
+                    cancelEditor();
+                  }
+                }}
+              >
+                {#each editColumns as col (col.field)}
+                  {@const kind = editorKind(col)}
+                  <label class="sv-board-field">
+                    <span>{headerLabel(col.field ?? "")}</span>
+                    {#if kind === "checkbox"}
+                      <input
+                        type="checkbox"
+                        checked={draft[col.field ?? ""] === true}
+                        oninput={(e) => onDraftInput(col.field ?? "", kind, e)}
+                      />
+                    {:else}
+                      <!-- svelte-ignore a11y_autofocus -->
+                      <input
+                        type={kind}
+                        value={draft[col.field ?? ""] ?? ""}
+                        oninput={(e) => onDraftInput(col.field ?? "", kind, e)}
+                      />
+                    {/if}
+                  </label>
+                {/each}
+                <div class="sv-board-card-edit-actions">
+                  <button type="button" class="sv-board-btn" onclick={cancelEditor}>Cancel</button>
+                  <button type="submit" class="sv-board-btn is-primary">Save</button>
+                </div>
+              </form>
+            {:else if board.card}
+              {@render board.card(row)}
+              {@render cardBadges(row)}
+            {:else}
+              {@const cover = coverColorOf(row)}
+              {#if cover}
+                <div class="sv-board-card-cover" style={`background:${cover}`} aria-hidden="true"></div>
+              {/if}
+              {#if titleField}
+                <div class="sv-board-card-title">
+                  {fmt(fieldValue(row, titleField))}
+                </div>
+              {/if}
+              {@render cardBadges(row)}
+              {#if metaFields.length}
+                <dl class="sv-board-card-meta">
+                  {#each metaFields as field (field)}
+                    {@const v = fmt(fieldValue(row, field))}
+                    {#if v !== ""}
+                      <div class="sv-board-card-metarow">
+                        <dt>{headerLabel(field)}</dt>
+                        <dd>{v}</dd>
+                      </div>
+                    {/if}
+                  {/each}
+                </dl>
+              {/if}
+            {/if}
+
+            {#if !isEditing && board.subtasks}
+              {@const prog = subProgress(row)}
+              {@const opened = subOpen[key(row)] === true}
+              <div class="sv-board-subs">
+                <button
+                  type="button"
+                  class="sv-board-subs-head"
+                  aria-expanded={opened}
+                  onclick={() => (subOpen[key(row)] = !opened)}
+                >
+                  <span class="sv-board-subs-chev">{opened ? "▾" : "▸"}</span>
+                  <span class="sv-board-subs-count">{prog.done}/{prog.total}</span>
+                  <span class="sv-board-subs-bar" aria-hidden="true">
+                    <span style={`width:${prog.total ? (prog.done / prog.total) * 100 : 0}%`}></span>
+                  </span>
+                </button>
+                {#if opened}
+                  <ul class="sv-board-subs-list">
+                    {#each subtasksOf(row) as st (st.id)}
+                      <li>
+                        <label class:is-done={st.done}>
+                          <input type="checkbox" checked={st.done} onchange={() => toggleSubtask(row, st)} />
+                          <span>{st.title}</span>
+                        </label>
+                      </li>
+                    {/each}
+                  </ul>
+                  <input
+                    class="sv-board-subs-add"
+                    placeholder="Add subtask..."
+                    onkeydown={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        const el = e.currentTarget;
+                        addSubtask(row, el.value);
+                        el.value = "";
+                      }
+                    }}
+                  />
+                {/if}
+              </div>
+            {/if}
+
+            {#if !isEditing && board.childrenField}
+              {@const kids = childrenOf(row)}
+              {#if kids.length}
+                {@const kidsOpen = childOpen[key(row)] === true}
+                <div class="sv-board-kids">
+                  <button
+                    type="button"
+                    class="sv-board-kids-head"
+                    aria-expanded={kidsOpen}
+                    onclick={() => (childOpen[key(row)] = !kidsOpen)}
+                  >
+                    <span class="sv-board-subs-chev">{kidsOpen ? "▾" : "▸"}</span>
+                    {kids.length}
+                    {kids.length === 1 ? "subtask" : "subtasks"}
+                  </button>
+                  {#if kidsOpen}
+                    <ul class="sv-board-kids-list">
+                      {#each kids as kid, ki (key(kid) + ":" + ki)}
+                        <li class="sv-board-kid">
+                          <span class="sv-board-kid-title"
+                            >{titleField ? fmt(fieldValue(kid, titleField)) : ""}</span
+                          >
+                          <span class="sv-board-kid-lane">{rawLane(kid)}</span>
+                        </li>
+                      {/each}
+                    </ul>
+                  {/if}
+                </div>
+              {/if}
+            {/if}
+
+            {#if !isEditing && board.commentsField && commentsOpen[key(row)]}
+              <div class="sv-board-comments">
+                {@render commentThread(row)}
+              </div>
+            {/if}
+          </article>
+        {/each}
+        {#if win.bottom > 0}
+          <div style={`height:${win.bottom}px`} aria-hidden="true"></div>
+        {:else if mark === cards.length}
+          <div class="sv-board-drop-marker" aria-hidden="true"></div>
+        {/if}
+        {#if cards.length === 0}
+          <div class="sv-board-lane-empty">No cards</div>
+        {/if}
+      </div>
+      {#if board.composer && board.onCardAdd}
+        {#if composerOpen[lane.id]}
+          <input
+            class="sv-board-composer-input"
+            placeholder="Card title..."
+            bind:value={composerText[lane.id]}
+            use:focusNode
+            onkeydown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                submitComposer(lane.id);
+              } else if (e.key === "Escape") {
+                composerOpen[lane.id] = false;
+              }
+            }}
+            onblur={() => {
+              submitComposer(lane.id);
+              composerOpen[lane.id] = false;
+            }}
+          />
+        {:else}
+          <button
+            type="button"
+            class="sv-board-composer-btn"
+            onclick={() => (composerOpen[lane.id] = true)}>+ Add a card</button
+          >
+        {/if}
+      {/if}
+    {/if}
+  </section>
+{/snippet}
+
+{#snippet cardBadges(row: TData)}
+  {@const labels = labelsOf(row)}
+  {@const due = dueOf(row)}
+  {@const asg = assigneesOf(row)}
+  {@const comments = countOf(row, board.commentsField)}
+  {@const attachments = countOf(row, board.attachmentsField)}
+  {@const age = ageOf(row)}
+  {@const blocked = isFlagged(row)}
+  {#if blocked || labels.length || due || asg.length || comments || attachments || age}
+    <div class="sv-board-badges">
+      {#if blocked}
+        <span class="sv-board-badge is-blocked" title={flagReason(row) ?? "Blocked"}>Blocked</span>
+      {/if}
+      {#each labels as lb (lb.text)}
+        <span class="sv-board-badge is-label" style={lb.color ? `--b:${lb.color}` : undefined}
+          >{lb.text}</span
+        >
+      {/each}
+      {#if due}
+        <span class="sv-board-badge is-due" class:is-overdue={due.overdue}>{due.label}</span>
+      {/if}
+      {#if age}
+        <span class="sv-board-badge is-meta" title="Age">{age}</span>
+      {/if}
+      {#if comments || board.onCommentAdd}
+        <button
+          type="button"
+          class="sv-board-badge is-meta is-btn"
+          title="Comments"
+          onclick={(e) => {
+            e.stopPropagation();
+            commentsOpen[key(row)] = !commentsOpen[key(row)];
+          }}
+        >
+          <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true"><path d="M2 3h12v8H8l-3 2v-2H2z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
+          {comments}
+        </button>
+      {/if}
+      {#if attachments}
+        <span class="sv-board-badge is-meta" title={`${attachments} attachments`}>
+          <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true"><path d="M11 5.5 6.5 10a2 2 0 0 1-3-3l5-5a3 3 0 0 1 4 4l-5 5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          {attachments}
+        </span>
+      {/if}
+      {#if asg.length}
+        <span class="sv-board-avatars">
+          {#each asg.slice(0, 3) as name (name)}
+            <span class="sv-board-avatar" title={name}>{initials(name)}</span>
+          {/each}
+        </span>
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+<style>
+  .sv-board {
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #101828);
+    font-family: var(--sg-font, inherit);
+  }
+  .sv-board.is-swim {
+    overflow-y: auto;
+    gap: 14px;
+  }
+  .sv-board-lanes {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    overflow-x: auto;
+    padding: 4px;
+    flex: 1 1 auto;
+    min-height: 0;
+    scrollbar-color: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #101828) 28%, transparent))
+      transparent;
+  }
+  .sv-board.is-swim .sv-board-lanes {
+    flex: none;
+  }
+  .sv-board.is-swim .sv-board-lane {
+    max-height: 340px;
+  }
+  .sv-board-swim {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: none;
+  }
+  .sv-board-swim-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 8px;
+    font-weight: 700;
+    font-size: 0.78rem;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 78%, transparent);
+    position: sticky;
+    left: 0;
+  }
+  .sv-board-swim-count {
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 0 7px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
+    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
+  }
+  .sv-board-swim-summary {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: color-mix(in srgb, var(--sg-accent, #3b82f6) 85%, var(--sg-fg, #101828));
+  }
+  .sv-board-swim-toggle {
+    all: unset;
+    cursor: pointer;
+    font-size: 0.7rem;
+    padding: 2px;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
+  }
+  .sv-board-lane-title.is-renamable {
+    all: unset;
+    cursor: text;
+    font-weight: 600;
+    font-size: 0.82rem;
+    flex: 1 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+  }
+  .sv-board-lane-rename {
+    flex: 1 1 auto;
+    min-width: 0;
+    font: inherit;
+    font-weight: 600;
+    font-size: 0.82rem;
+    padding: 1px 4px;
+    border: 1px solid var(--sv-board-accent);
+    border-radius: 5px;
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #101828);
+  }
+  .sv-board-swim-toggle:hover {
+    color: var(--sg-fg, #101828);
+  }
+  .sv-board-lane {
+    flex: 0 0 var(--sg-board-lane-w, 272px);
+    max-width: var(--sg-board-lane-w, 272px);
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    border: 1px solid var(--sg-border, #e4e7ec);
+    border-radius: var(--sg-radius, 8px);
+    background: var(--sg-header-bg, color-mix(in srgb, var(--sg-fg, #101828) 3%, var(--sg-bg, #fff)));
+    --sv-board-accent: var(--sg-accent, #3b82f6);
+  }
+  .sv-board-lane-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--sg-border, #e4e7ec);
+    border-top: 3px solid var(--sv-board-accent);
+    border-radius: var(--sg-radius, 8px) var(--sg-radius, 8px) 0 0;
+  }
+  .sv-board-lane-head.is-reorderable {
+    cursor: grab;
+  }
+  .sv-board-lane-head.is-lane-dropover {
+    box-shadow: inset 3px 0 0 var(--sv-board-accent);
+  }
+  .sv-board-lane-title {
+    font-weight: 600;
+    font-size: 0.82rem;
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .sv-board-lane-toggle {
+    all: unset;
+    cursor: pointer;
+    font-size: 0.7rem;
+    line-height: 1;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 55%, transparent);
+    padding: 2px;
+  }
+  .sv-board-lane-toggle:hover {
+    color: var(--sg-fg, #101828);
+  }
+  .sv-board-lane.is-collapsed {
+    flex: 0 0 auto;
+    max-width: none;
+  }
+  .sv-board-lane.is-collapsed .sv-board-lane-head {
+    writing-mode: vertical-rl;
+    height: 180px;
+    border-top: none;
+    border-left: 3px solid var(--sv-board-accent);
+    border-radius: 0 var(--sg-radius, 8px) var(--sg-radius, 8px) 0;
+    gap: 6px;
+  }
+  .sv-board-lane-count {
+    font-size: 0.72rem;
+    font-variant-numeric: tabular-nums;
+    padding: 1px 7px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
+    color: color-mix(in srgb, var(--sg-fg, #101828) 70%, transparent);
+  }
+  .sv-board-lane-count.is-over {
+    background: color-mix(in srgb, var(--sg-danger, #ef4444) 16%, transparent);
+    color: var(--sg-danger, #ef4444);
+    font-weight: 700;
+  }
+  .sv-board-lane-summary {
+    font-size: 0.72rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: color-mix(in srgb, var(--sv-board-accent) 85%, var(--sg-fg, #101828));
+  }
+  .sv-board-lane-add {
+    all: unset;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    display: grid;
+    place-items: center;
+    border-radius: 5px;
+    font-size: 1rem;
+    line-height: 1;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
+  }
+  .sv-board-lane-add:hover {
+    background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
+    color: var(--sg-fg, #101828);
+  }
+  .sv-board-lane-body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    overflow-y: auto;
+    flex: 1 1 auto;
+    min-height: 48px;
+    transition: background 0.12s ease;
+  }
+  .sv-board-lane-body.is-dropover {
+    background: color-mix(in srgb, var(--sv-board-accent) 8%, transparent);
+  }
+  /* Virtualized lanes use block flow + per-card margin (not flex gap) so the
+     spacer heights match the windowing math exactly. */
+  .sv-board-lane-body.is-virtual {
+    display: block;
+    gap: 0;
+  }
+  .sv-board-lane-body.is-virtual .sv-board-card {
+    margin-bottom: 8px;
+  }
+  .sv-board-card {
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #e4e7ec);
+    border-radius: var(--sg-radius, 8px);
+    padding: 9px 11px;
+    cursor: grab;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+    transition:
+      box-shadow 0.12s ease,
+      opacity 0.12s ease,
+      transform 0.12s ease;
+  }
+  .sv-board-card:hover {
+    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
+    border-color: color-mix(in srgb, var(--sv-board-accent) 45%, var(--sg-border, #e4e7ec));
+  }
+  .sv-board-card:focus-visible {
+    outline: none;
+    border-color: var(--sv-board-accent);
+    box-shadow: var(--sg-focus-ring, 0 0 0 2px color-mix(in srgb, var(--sv-board-accent) 45%, transparent));
+  }
+  .sv-board-card.is-dragging {
+    opacity: 0.45;
+  }
+  .sv-board-card.is-grabbed {
+    border-color: var(--sv-board-accent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sv-board-accent) 55%, transparent);
+    cursor: grabbing;
+  }
+  .sv-board-card.is-editing {
+    cursor: default;
+    border-color: var(--sv-board-accent);
+  }
+  .sv-board-card-edit {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+  }
+  .sv-board-field {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    font-size: 0.72rem;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
+  }
+  .sv-board-field input[type="text"],
+  .sv-board-field input[type="number"],
+  .sv-board-field input[type="date"] {
+    font: inherit;
+    font-size: 0.8rem;
+    padding: 4px 7px;
+    border: 1px solid var(--sg-border, #e4e7ec);
+    border-radius: var(--sg-radius, 6px);
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #101828);
+  }
+  .sv-board-field input:focus-visible {
+    outline: none;
+    border-color: var(--sv-board-accent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sv-board-accent) 35%, transparent);
+  }
+  .sv-board-field input[type="checkbox"] {
+    align-self: flex-start;
+    width: 15px;
+    height: 15px;
+    accent-color: var(--sv-board-accent);
+  }
+  .sv-board-card-edit-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+    margin-top: 2px;
+  }
+  .sv-board-btn {
+    font: inherit;
+    font-size: 0.74rem;
+    padding: 3px 10px;
+    border-radius: var(--sg-radius, 6px);
+    border: 1px solid var(--sg-border, #e4e7ec);
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #101828);
+    cursor: pointer;
+  }
+  .sv-board-btn:hover {
+    background: color-mix(in srgb, var(--sg-fg, #101828) 6%, transparent);
+  }
+  .sv-board-btn.is-primary {
+    background: var(--sv-board-accent);
+    border-color: var(--sv-board-accent);
+    color: #fff;
+  }
+  .sv-board-btn.is-primary:hover {
+    filter: brightness(0.95);
+  }
+  .sv-board-card-title {
+    font-weight: 600;
+    font-size: 0.84rem;
+    line-height: 1.3;
+  }
+  .sv-board-card-meta {
+    margin: 6px 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .sv-board-card-metarow {
+    display: flex;
+    gap: 6px;
+    font-size: 0.74rem;
+  }
+  .sv-board-card-metarow dt {
+    color: color-mix(in srgb, var(--sg-fg, #101828) 55%, transparent);
+    margin: 0;
+  }
+  .sv-board-card-metarow dd {
+    margin: 0;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sv-board-lane-empty {
+    text-align: center;
+    font-size: 0.76rem;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 42%, transparent);
+    padding: 14px 0;
+    border: 1px dashed var(--sg-border, #e4e7ec);
+    border-radius: var(--sg-radius, 8px);
+  }
+  .sv-board-drop-marker {
+    height: 2px;
+    border-radius: 2px;
+    background: var(--sv-board-accent);
+    margin: -3px 0;
+  }
+  :global(.sv-board-ctx) {
+    z-index: 2147483646;
+    min-width: 200px;
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 10px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35);
+    font-size: 13px;
+  }
+  .sv-board-sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  /* Card badges */
+  .sv-board-badges {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 6px;
+  }
+  .sv-board-badge {
+    font-size: 0.66rem;
+    font-weight: 600;
+    padding: 1px 6px;
+    border-radius: 4px;
+    line-height: 1.5;
+    white-space: nowrap;
+  }
+  .sv-board-badge.is-label {
+    --b: var(--sv-board-accent);
+    background: color-mix(in srgb, var(--b) 16%, transparent);
+    color: color-mix(in srgb, var(--b) 80%, var(--sg-fg, #101828));
+  }
+  .sv-board-badge.is-due {
+    background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
+    color: color-mix(in srgb, var(--sg-fg, #101828) 65%, transparent);
+  }
+  .sv-board-badge.is-due.is-overdue {
+    background: color-mix(in srgb, var(--sg-danger, #ef4444) 15%, transparent);
+    color: var(--sg-danger, #ef4444);
+  }
+  .sv-board-badge.is-meta {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    background: transparent;
+    padding: 1px 3px;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 55%, transparent);
+  }
+  .sv-board-badge.is-btn {
+    border: 0;
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.66rem;
+    font-weight: 600;
+    border-radius: 5px;
+  }
+  .sv-board-badge.is-btn:hover {
+    background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
+    color: var(--sg-fg, #101828);
+  }
+  .sv-board-badge.is-blocked {
+    background: var(--sg-danger, #ef4444);
+    color: #fff;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    font-size: 0.6rem;
+  }
+  /* Comments thread */
+  .sv-board-comments {
+    margin-top: 7px;
+    border-top: 1px solid color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
+    padding-top: 7px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  .sv-board-drawer-comments {
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid var(--sg-border, #e4e7ec);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .sv-board-drawer-h {
+    font-weight: 600;
+    font-size: 0.82rem;
+    margin-bottom: 2px;
+  }
+  .sv-board-comment {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    font-size: 0.74rem;
+  }
+  .sv-board-comment-body {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .sv-board-comment-author {
+    font-weight: 600;
+    margin-right: 5px;
+  }
+  .sv-board-comment-at {
+    margin-left: 6px;
+    font-size: 0.66rem;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 45%, transparent);
+  }
+  .sv-board-comment-del {
+    all: unset;
+    cursor: pointer;
+    font-size: 0.9rem;
+    line-height: 1;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 40%, transparent);
+    padding: 0 2px;
+  }
+  .sv-board-comment-del:hover {
+    color: var(--sg-danger, #ef4444);
+  }
+  .sv-board-comment-empty {
+    font-size: 0.72rem;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 42%, transparent);
+  }
+  .sv-board-comment-add {
+    width: 100%;
+    box-sizing: border-box;
+    font: inherit;
+    font-size: 0.74rem;
+    padding: 4px 7px;
+    border: 1px solid var(--sg-border, #e4e7ec);
+    border-radius: 5px;
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #101828);
+  }
+  .sv-board-card-cover {
+    height: 6px;
+    border-radius: 4px;
+    margin: -2px 0 7px;
+  }
+  .sv-board-avatars {
+    display: inline-flex;
+    margin-left: auto;
+  }
+  .sv-board-avatar {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    font-size: 0.6rem;
+    font-weight: 700;
+    color: #fff;
+    background: var(--sv-board-accent);
+    border: 1.5px solid var(--sg-bg, #fff);
+    margin-left: -6px;
+  }
+  .sv-board-avatar:first-child {
+    margin-left: 0;
+  }
+  /* Sub-tasks */
+  .sv-board-subs {
+    margin-top: 7px;
+    border-top: 1px solid color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
+    padding-top: 6px;
+  }
+  .sv-board-subs-head {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    font-size: 0.7rem;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
+  }
+  .sv-board-subs-chev {
+    font-size: 0.6rem;
+  }
+  .sv-board-subs-count {
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+  }
+  .sv-board-subs-bar {
+    flex: 1 1 auto;
+    height: 4px;
+    border-radius: 2px;
+    background: color-mix(in srgb, var(--sg-fg, #101828) 10%, transparent);
+    overflow: hidden;
+  }
+  .sv-board-subs-bar span {
+    display: block;
+    height: 100%;
+    background: var(--sv-board-accent);
+    transition: width 0.15s ease;
+  }
+  .sv-board-subs-list {
+    list-style: none;
+    margin: 6px 0 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+  .sv-board-subs-list label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.74rem;
+    cursor: pointer;
+  }
+  .sv-board-subs-list label.is-done span {
+    text-decoration: line-through;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 45%, transparent);
+  }
+  .sv-board-subs-list input {
+    accent-color: var(--sv-board-accent);
+  }
+  .sv-board-subs-add {
+    margin-top: 5px;
+    width: 100%;
+    box-sizing: border-box;
+    font: inherit;
+    font-size: 0.74rem;
+    padding: 3px 6px;
+    border: 1px solid var(--sg-border, #e4e7ec);
+    border-radius: 5px;
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #101828);
+  }
+  /* Quick-add composer */
+  .sv-board-composer-btn {
+    all: unset;
+    cursor: pointer;
+    display: block;
+    margin: 6px 8px 8px;
+    padding: 5px 8px;
+    border-radius: var(--sg-radius, 6px);
+    font-size: 0.76rem;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 55%, transparent);
+  }
+  .sv-board-composer-btn:hover {
+    background: color-mix(in srgb, var(--sg-fg, #101828) 6%, transparent);
+    color: var(--sg-fg, #101828);
+  }
+  .sv-board-composer-input {
+    margin: 6px 8px 8px;
+    width: calc(100% - 16px);
+    box-sizing: border-box;
+    font: inherit;
+    font-size: 0.8rem;
+    padding: 6px 8px;
+    border: 1px solid var(--sv-board-accent);
+    border-radius: var(--sg-radius, 6px);
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #101828);
+  }
+  /* Facet filter bar */
+  .sv-board-facets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 4px 4px 8px;
+    align-items: center;
+  }
+  .sv-board-facet {
+    all: unset;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 0.73rem;
+    padding: 2px 9px;
+    border-radius: 999px;
+    border: 1px solid var(--sg-border, #e4e7ec);
+    color: color-mix(in srgb, var(--sg-fg, #101828) 70%, transparent);
+  }
+  .sv-board-facet:hover {
+    border-color: var(--sg-accent, #3b82f6);
+  }
+  .sv-board-facet.is-active {
+    background: var(--sg-accent, #3b82f6);
+    border-color: var(--sg-accent, #3b82f6);
+    color: #fff;
+  }
+  .sv-board-facet-count {
+    font-size: 0.66rem;
+    opacity: 0.7;
+    font-variant-numeric: tabular-nums;
+  }
+  .sv-board-facet-clear {
+    all: unset;
+    cursor: pointer;
+    font-size: 0.72rem;
+    color: var(--sg-accent, #3b82f6);
+    padding: 2px 6px;
+  }
+  /* Blocked flag + selection */
+  .sv-board-card {
+    position: relative;
+  }
+  .sv-board-card-flag {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    border-top: 14px solid var(--sg-danger, #ef4444);
+    border-left: 14px solid transparent;
+    border-top-right-radius: var(--sg-radius, 8px);
+  }
+  .sv-board-card.is-selected {
+    border-color: var(--sv-board-accent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sv-board-accent) 55%, transparent);
+  }
+  .sv-board-card.is-locked {
+    cursor: default;
+  }
+  /* Child cards (epic -> stories) */
+  .sv-board-kids {
+    margin-top: 7px;
+    border-top: 1px solid color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
+    padding-top: 6px;
+  }
+  .sv-board-kids-head {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 0.7rem;
+    color: color-mix(in srgb, var(--sg-fg, #101828) 60%, transparent);
+  }
+  .sv-board-kids-list {
+    list-style: none;
+    margin: 6px 0 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .sv-board-kid {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.74rem;
+    padding: 4px 7px;
+    border: 1px solid var(--sg-border, #e4e7ec);
+    border-radius: 6px;
+    background: var(--sg-bg, #fff);
+  }
+  .sv-board-kid-title {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sv-board-kid-lane {
+    font-size: 0.64rem;
+    font-weight: 600;
+    padding: 0 6px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--sv-board-accent) 15%, transparent);
+    color: color-mix(in srgb, var(--sv-board-accent) 85%, var(--sg-fg, #101828));
+    text-transform: capitalize;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sv-board-card,
+    .sv-board-lane-body,
+    .sv-board-subs-bar span {
+      transition: none;
+    }
+  }
+</style>