KanbanBoard
AppTrello / Linear-style kanban board. M1 ships HTML5-native drag and drop between columns with an inline drop-position indicator (thin line between cards) and full optimistic-UI rewind via window.KuiKanban.get(id).setMover() — throw / reject from the mover to revert. Future milestones: column reorder + collapse + WIP limits (M2), swimlanes + filters + search (M3), inline edit + bulk select + card detail panel (M4), keyboard nav + ARIA announcements (M5), virtualization + auto-archive + dependencies (M6). Pixel-identical React sibling at modules/app/KanbanBoard/index.tsx.
<%- include('modules/app/KanbanBoard', {
id: 'engineering-board',
ariaLabel: 'Engineering board',
columns: [
{ id: 'todo', title: 'To Do' },
{ id: 'doing', title: 'In Progress' },
{ id: 'done', title: 'Done' }
],
cards: [
{ id: 'c1', columnId: 'todo', title: 'Audit dark-mode tokens', priority: 'medium' },
{ id: 'c2', columnId: 'doing', title: 'Refactor Quill toolbar' }
]
}) %>
<%- include('modules/app/KanbanBoard', { id: 'board', columns, cards }) %>
<%- include('modules/app/KanbanBoard', { id: 'board', columns, cards }) %>
<%
// ── KanbanBoard EJS (M1 — Core DnD) ─────────────────────────────────
// Pixel-identical to modules/app/KanbanBoard/index.tsx in 01_NextJS_Components.
// HTML5 native drag-and-drop between columns + thin drop-line insert hint
// + optimistic-UI rewind on rejected onCardMove (rejection signalled by
// a global Promise the caller can attach via window.KuiKanban.setMover).
var _id = locals.id || 'kb-' + Math.random().toString(36).substr(2, 9);
var _columns = locals.columns || [];
var _cards = locals.cards || [];
var _ariaLabel= locals.ariaLabel|| 'Kanban board';
%>
<% _columns.forEach(function (col) {
var colCards = _cards.filter(function (c) { return c.columnId === col.id; });
%>
<%- include('./partials/_column', { _id: _id, col: col, cards: colCards }) %>
<% }); %>
<%# TODO M2: trailing "+ Add column" button (onColumnAdd). %>
<%# TODO M3: filter/search bar + swimlane row wrappers. %>
<%# TODO M5: announcing card moves. %>