hazo_ui 6.4.0 → 6.5.0

package/CHANGE_LOG.md

@@ -5,6 +5,49 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v6.5.0 (2026-08-02)
+
+### Added — swimlanes for `HazoUiKanban`
+
+A board can now declare `lanes`, rendering one full-width row per lane —
+a wide lane heading, then that lane's own copy of the whole column grid. Where
+`sections` (v6.4.0) group *within* a column, lanes group *across* all of them,
+so the second axis can be the row axis instead of the inner one.
+
+- `HazoUiKanbanProps.lanes?: KanbanLane[]` — `{ key, title, accepts?,
+  collapseWhenEmpty? }`. Cards are placed by the new `KanbanItem.laneKey`.
+  Omit `lanes` and nothing changes: existing boards render exactly as before.
+- `KanbanMoveEvent` gained `fromLane`/`toLane`; `KanbanReorderEvent` gained
+  `laneKey`. Move-vs-reorder is now decided on all three axes — same column,
+  section *and* lane is a reorder; changing any one is a move.
+- **A lane heading is the lane-only drop target.** It carries a lane but no
+  column, read as "change the lane, keep the card's column" — the mirror of a
+  sectioned column's head ("change the column, keep the section").
+- `collapseWhenEmpty` renders a lane with no cards as a thin full-width dashed
+  strip, which is what makes "declare every lane" affordable for a long
+  vocabulary. A card whose `laneKey` matches no declared lane renders in an
+  unlabelled trailing lane rather than disappearing.
+- The optimistic overlay tracks the destination lane too, so a cross-lane drop
+  moves immediately instead of snapping back until the consumer's async commit
+  lands.
+
+### Fixed — drops landed in the wrong column on tall or scrolled boards
+
+Two long-standing defects in drop resolution, both of which lanes made
+impossible to miss:
+
+- **Collision detection is now pointer-first** (`pointerWithin`, falling back
+  to `rectIntersection`, then `closestCorners`). `closestCorners` alone
+  averages the distance to all four corners, so a column stretched tall by a
+  neighbour's card stack scored *worse* than a short, far-away column — a drop
+  well inside the right column could resolve to a different one entirely.
+  Keyboard drags have no pointer and take the same fallbacks as before.
+- **Droppable ids are scoped per layout tree.** The mobile tab strip and the
+  desktop grid both always render (CSS hides one), so every column previously
+  registered twice under one id. dnd-kit keys its registry by id, so one node
+  won and collisions were measured against the CSS-hidden copy's 0×0 rect.
+  Ids now carry the tree ("m"/"d") and, on a laned board, the lane.
+
 ## v6.4.0 (2026-08-01)
 
 ### Added — in-column sections for `HazoUiKanban`

package/README.md

@@ -3677,6 +3677,48 @@ function Actions({ initial }) {
 event carries `revert()` — call it when your API request fails and the
 overlay snaps back to whatever `items` says.
 
+### Grouping: sections (v6.4.0) and swimlanes (v6.5.0)
+
+A board can group on a second axis, either *inside* each column or *across*
+all of them. Both are opt-in; omit them and the board is a plain column grid.
+
+```tsx
+// Sections: separator-headed bands inside each column, keyed by item.sectionKey
+<HazoUiKanban
+  columns={COLUMNS.map(col => ({
+    ...col,
+    sections: TAGS.map(t => ({ key: t, title: t, collapseWhenEmpty: true })),
+  }))}
+  items={items.map(it => ({ ...it, sectionKey: it.tag }))}
+  onMove={(e) => save(e.itemId, { column: e.toColumn, tag: e.toSection })}
+  renderCard={renderCard}
+/>
+
+// Swimlanes: one full-width row per lane, each with its own column grid,
+// keyed by item.laneKey
+<HazoUiKanban
+  columns={COLUMNS}
+  lanes={TAGS.map(t => ({ key: t, title: t, collapseWhenEmpty: true }))}
+  items={items.map(it => ({ ...it, laneKey: it.tag }))}
+  onMove={(e) => save(e.itemId, { column: e.toColumn, tag: e.toLane })}
+  renderCard={renderCard}
+/>
+```
+
+| | Sections | Lanes |
+|---|---|---|
+| Declared on | `KanbanColumn.sections` | `HazoUiKanbanProps.lanes` |
+| Card placed by | `KanbanItem.sectionKey` | `KanbanItem.laneKey` |
+| Renders as | bands stacked inside one column | full-width rows, each with the whole column grid |
+| Move event carries | `fromSection`/`toSection` | `fromLane`/`toLane` |
+| "Keep the other axis" drop target | the column head | the lane heading |
+| `collapseWhenEmpty` | thin drop strip at the column's foot | full-width drop strip |
+
+A drop expresses both axes at once, so one gesture can change status and tag
+together. `accepts(item)` on a column, section or lane rejects a drop into it.
+Cards whose key matches nothing declared render in an unlabelled trailing
+group (sections) or lane row (lanes) rather than disappearing.
+
 ### Theming (CSS custom properties)
 
 | Variable | Default | Purpose |

package/dist/index.cjs

@@ -9091,10 +9091,15 @@ function KanbanCard({
     isDragging
   } = sortable.useSortable({
     id: item.id,
-    // sectionKey rides along so a drop *onto a card* resolves to that card's
-    // section, not just its column (kanban_column.tsx's section bands cover
-    // the gaps between cards, but the cards themselves are the sortable).
-    data: { columnKey: item.columnKey, sectionKey: item.sectionKey }
+    // sectionKey and laneKey ride along so a drop *onto a card* resolves to
+    // that card's section and lane, not just its column (the section bands
+    // and lane rows cover the gaps between cards, but the cards themselves
+    // are the sortable).
+    data: {
+      columnKey: item.columnKey,
+      sectionKey: item.sectionKey,
+      laneKey: item.laneKey
+    }
   });
   const priority_var = item.priority ? `--hazo-kanban-priority-${String(item.priority).toLowerCase()}` : null;
   const style = {
@@ -9155,8 +9160,16 @@ function KanbanCard({
     }
   );
 }
-function section_droppable_id(column_key, section_key) {
-  return `section:${column_key}::${section_key}`;
+function tree_droppable_id(prefix, tree_key, lane_key, rest) {
+  return lane_key == null ? `${prefix}:${tree_key}::${rest}` : `${prefix}:${tree_key}::${lane_key}::${rest}`;
+}
+function section_droppable_id(column_key, section_key, tree_key, lane_key) {
+  return tree_droppable_id(
+    "section",
+    tree_key,
+    lane_key,
+    `${column_key}::${section_key}`
+  );
 }
 function group_items_by_section(items, sections) {
   const bySection = /* @__PURE__ */ new Map();
@@ -9176,11 +9189,13 @@ function KanbanColumn({
   emptyColumn,
   cardClassName,
   showEdit,
-  onEditRequest
+  onEditRequest,
+  laneKey,
+  treeKey
 }) {
   const { setNodeRef, isOver } = core$1.useDroppable({
-    id: `column:${column.key}`,
-    data: { columnKey: column.key, isColumn: true }
+    id: tree_droppable_id("column", treeKey, laneKey, column.key),
+    data: { columnKey: column.key, laneKey, isColumn: true }
   });
   const sections = column.sections;
   const { bySection, unmatched } = React27__namespace.useMemo(
@@ -9226,6 +9241,8 @@ function KanbanColumn({
           KanbanColumnHead,
           {
             columnKey: column.key,
+            laneKey,
+            treeKey,
             title: column.title,
             count: items.length,
             droppable: sections != null
@@ -9241,6 +9258,8 @@ function KanbanColumn({
                 KanbanSectionBand,
                 {
                   columnKey: column.key,
+                  laneKey,
+                  treeKey,
                   section,
                   items: bySection.get(section.key) ?? [],
                   emptyColumn,
@@ -9253,6 +9272,8 @@ function KanbanColumn({
                 KanbanSectionStrip,
                 {
                   columnKey: column.key,
+                  laneKey,
+                  treeKey,
                   section
                 },
                 section.key
@@ -9266,13 +9287,15 @@ function KanbanColumn({
 }
 function KanbanColumnHead({
   columnKey,
+  laneKey,
+  treeKey,
   title,
   count,
   droppable
 }) {
   const { setNodeRef, isOver } = core$1.useDroppable({
-    id: `columnhead:${columnKey}`,
-    data: { columnKey, isColumn: true },
+    id: tree_droppable_id("columnhead", treeKey, laneKey, columnKey),
+    data: { columnKey, laneKey, isColumn: true },
     disabled: !droppable
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9293,14 +9316,16 @@ function KanbanColumnHead({
 }
 function KanbanSectionBand({
   columnKey,
+  laneKey,
+  treeKey,
   section,
   items,
   emptyColumn,
   renderCards
 }) {
   const { setNodeRef, isOver } = core$1.useDroppable({
-    id: section_droppable_id(columnKey, section.key),
-    data: { columnKey, sectionKey: section.key, isSection: true }
+    id: section_droppable_id(columnKey, section.key, treeKey, laneKey),
+    data: { columnKey, laneKey, sectionKey: section.key, isSection: true }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -9323,11 +9348,13 @@ function KanbanSectionBand({
 }
 function KanbanSectionStrip({
   columnKey,
+  laneKey,
+  treeKey,
   section
 }) {
   const { setNodeRef, isOver } = core$1.useDroppable({
-    id: section_droppable_id(columnKey, section.key),
-    data: { columnKey, sectionKey: section.key, isSection: true }
+    id: section_droppable_id(columnKey, section.key, treeKey, laneKey),
+    data: { columnKey, laneKey, sectionKey: section.key, isSection: true }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -9341,6 +9368,54 @@ function KanbanSectionStrip({
     }
   );
 }
+function lane_droppable_id(lane_key, tree_key) {
+  return `lane:${tree_key}::${lane_key}`;
+}
+function KanbanLaneHead({
+  lane,
+  count,
+  treeKey
+}) {
+  const { setNodeRef, isOver } = core$1.useDroppable({
+    id: lane_droppable_id(lane.key, treeKey),
+    data: { laneKey: lane.key, isLane: true }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        "cls_hazo_kanban_lane_head mb-2 flex items-center gap-3 rounded-sm px-1 py-1",
+        isOver && "cls_hazo_kanban_lane_head_over bg-accent/30 ring-1 ring-ring/40"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_lane_title text-xs font-semibold uppercase tracking-wider text-foreground", children: lane.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_lane_rule h-px flex-1 bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_lane_count rounded-full bg-muted px-2 py-0.5 text-[11px] tabular-nums text-foreground", children: count })
+      ]
+    }
+  );
+}
+function KanbanLaneStrip({
+  lane,
+  treeKey
+}) {
+  const { setNodeRef, isOver } = core$1.useDroppable({
+    id: lane_droppable_id(lane.key, treeKey),
+    data: { laneKey: lane.key, isLane: true }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        "cls_hazo_kanban_lane_strip mb-2 rounded-md border border-dashed border-border px-2 py-1 text-[11px] uppercase tracking-wider text-muted-foreground",
+        isOver && "cls_hazo_kanban_lane_strip_over border-solid bg-accent/30 text-foreground ring-1 ring-ring/30"
+      ),
+      children: lane.title
+    }
+  );
+}
 var DEFAULT_PRIORITIES = ["P0", "P1", "P2", "P3"];
 function humanize(key) {
   return key.replace(/[_\-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\s+/g, " ").trim().split(" ").map((w) => w ? w[0].toUpperCase() + w.slice(1) : w).join(" ");
@@ -9747,6 +9822,10 @@ function applyKanbanFilter(items, filter) {
     return true;
   });
 }
+var UNMATCHED_LANE_KEY = "__hazo_lane_unmatched__";
+function bucket_key(lane_key, column_key) {
+  return lane_key == null ? column_key : `${lane_key}\0${column_key}`;
+}
 function default_announcements(itemLabel) {
   return {
     onDragStart: ({ item, fromColumn }) => `Picked up ${itemLabel(item)}. Currently in ${fromColumn}. Use arrow keys to choose a different column. Press space to drop, escape to cancel.`,
@@ -9755,38 +9834,50 @@ function default_announcements(itemLabel) {
     onDragCancel: ({ item, fromColumn }) => `Movement cancelled. ${itemLabel(item)} returned to ${fromColumn}.`
   };
 }
-function group_items_by_column(items, overlay, columns) {
+function group_items_by_column(items, overlay, columns, lanes) {
   const out = /* @__PURE__ */ new Map();
-  for (const col of columns) out.set(col.key, []);
+  const lane_keys = lanes ? [...lanes.map((l) => l.key), UNMATCHED_LANE_KEY] : [void 0];
+  for (const lane_key of lane_keys)
+    for (const col of columns) out.set(bucket_key(lane_key, col.key), []);
   const overlay_inserts = /* @__PURE__ */ new Map();
-  for (const col of columns) overlay_inserts.set(col.key, []);
+  for (const key of out.keys()) overlay_inserts.set(key, []);
+  const declared = lanes ? new Set(lanes.map((l) => l.key)) : null;
+  function resolve_lane(lane_key) {
+    if (!declared) return void 0;
+    return lane_key != null && declared.has(lane_key) ? lane_key : UNMATCHED_LANE_KEY;
+  }
   for (const item of items) {
     const ov = overlay.get(item.id);
     if (ov) {
-      const bucket = overlay_inserts.get(ov.columnKey);
+      const bucket = overlay_inserts.get(
+        bucket_key(resolve_lane(ov.laneKey), ov.columnKey)
+      );
       if (bucket) {
-        const placed = ov.sectionKey === item.sectionKey ? item : { ...item, sectionKey: ov.sectionKey };
+        const placed = ov.sectionKey === item.sectionKey && ov.laneKey === item.laneKey ? item : { ...item, sectionKey: ov.sectionKey, laneKey: ov.laneKey };
         bucket.push({ item: placed, index: ov.index });
       }
     } else {
-      const bucket = out.get(item.columnKey);
+      const bucket = out.get(
+        bucket_key(resolve_lane(item.laneKey), item.columnKey)
+      );
       if (bucket) bucket.push(item);
     }
   }
-  for (const col of columns) {
-    const inserts = overlay_inserts.get(col.key) ?? [];
+  for (const [key, inserts] of overlay_inserts) {
+    if (inserts.length === 0) continue;
     inserts.sort((a, b) => a.index - b.index);
-    const arr = out.get(col.key) ?? [];
+    const arr = out.get(key) ?? [];
     for (const { item, index } of inserts) {
       const at = Math.max(0, Math.min(index, arr.length));
       arr.splice(at, 0, item);
     }
-    out.set(col.key, arr);
+    out.set(key, arr);
   }
   return out;
 }
 function HazoUiKanban({
   columns,
+  lanes,
   items,
   renderCard,
   onMove,
@@ -9834,7 +9925,7 @@ function HazoUiKanban({
       const next = new Map(prev);
       for (const [item_id, pos] of prev.entries()) {
         const item = items.find((i) => i.id === item_id);
-        if (item && item.columnKey === pos.columnKey && item.sectionKey === pos.sectionKey) {
+        if (item && item.columnKey === pos.columnKey && item.sectionKey === pos.sectionKey && item.laneKey === pos.laneKey) {
           next.delete(item_id);
           changed = true;
         }
@@ -9843,8 +9934,8 @@ function HazoUiKanban({
     });
   }, [items, overlay]);
   const grouped = React27__namespace.useMemo(
-    () => group_items_by_column(items, overlay, columns),
-    [items, overlay, columns]
+    () => group_items_by_column(items, overlay, columns, lanes),
+    [items, overlay, columns, lanes]
   );
   const find_item = React27__namespace.useCallback(
     (id) => items.find((i) => i.id === id),
@@ -9854,6 +9945,13 @@ function HazoUiKanban({
     core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
     core$1.useSensor(core$1.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
+  const collision_detection = React27__namespace.useCallback((args) => {
+    const under_pointer = core$1.pointerWithin(args);
+    if (under_pointer.length > 0) return under_pointer;
+    const overlapping = core$1.rectIntersection(args);
+    if (overlapping.length > 0) return overlapping;
+    return core$1.closestCorners(args);
+  }, []);
   const merged_announcements = React27__namespace.useMemo(() => {
     const defaults = default_announcements(label_fn);
     return {
@@ -9882,7 +9980,7 @@ function HazoUiKanban({
         const id = String(active.id);
         const item = find_item(id);
         if (!item) return "";
-        const over_col_key = over ? over.data?.current?.columnKey ?? String(over.id).replace(/^column:/, "") : null;
+        const over_col_key = over ? over.data?.current?.columnKey ?? item.columnKey : null;
         const col = over_col_key ? columns.find((c) => c.key === over_col_key) : null;
         return merged_announcements.onDragOver({
           item,
@@ -9897,10 +9995,13 @@ function HazoUiKanban({
         const item = find_item(id);
         if (!item) return "";
         const from_col = columns.find((c) => c.key === item.columnKey);
-        const over_col_key = over ? over.data?.current?.columnKey ?? String(over.id).replace(/^column:/, "") : null;
+        const over_col_key = over?.data?.current?.columnKey ?? item.columnKey;
+        const over_lane_key = lanes ? over?.data?.current?.laneKey ?? item.laneKey : void 0;
         const to_col = over_col_key ? columns.find((c) => c.key === over_col_key) ?? from_col : from_col;
-        const target = over_col_key ? grouped.get(over_col_key) ?? [] : grouped.get(item.columnKey) ?? [];
-        const on_shell = !over || String(over.id).startsWith("column:") || String(over.id).startsWith("columnhead:") || String(over.id).startsWith("section:");
+        const target = grouped.get(
+          bucket_key(over_lane_key, over_col_key ?? item.columnKey)
+        ) ?? [];
+        const on_shell = !over || String(over.id).startsWith("column:") || String(over.id).startsWith("columnhead:") || String(over.id).startsWith("section:") || String(over.id).startsWith("lane:");
         const new_index = on_shell ? target.length : target.findIndex((it) => it.id === String(over.id));
         return merged_announcements.onDragEnd({
           item,
@@ -9920,7 +10021,7 @@ function HazoUiKanban({
         });
       }
     }),
-    [find_item, columns, grouped, merged_announcements]
+    [find_item, columns, lanes, grouped, merged_announcements]
   );
   const handle_drag_start = React27__namespace.useCallback((event) => {
     set_active_id(String(event.active.id));
@@ -9947,31 +10048,35 @@ function HazoUiKanban({
       if (!event.over) return;
       const over_id = String(event.over.id);
       const over_data = event.over.data?.current;
-      const dest_column_key = over_data?.columnKey ?? over_id.replace(/^column:/, "");
+      const dest_column_key = over_data?.columnKey ?? item.columnKey;
       const dest_column = columns.find((c) => c.key === dest_column_key);
       if (!dest_column) return;
+      const dest_lane_key = lanes ? over_data?.laneKey ?? item.laneKey : void 0;
+      const dest_lane = lanes?.find((l) => l.key === dest_lane_key);
+      if (lanes && dest_lane?.accepts && !dest_lane.accepts(item)) return;
       const dest_section_key = dest_column.sections ? over_data?.sectionKey ?? item.sectionKey : void 0;
       const dest_section = dest_column.sections?.find(
         (s) => s.key === dest_section_key
       );
       if (dest_column.accepts && !dest_column.accepts(item)) return;
       if (dest_section?.accepts && !dest_section.accepts(item)) return;
-      const dest_items_pre_overlay = grouped.get(dest_column_key) ?? [];
+      const dest_items_pre_overlay = grouped.get(bucket_key(dest_lane_key, dest_column_key)) ?? [];
       let new_index;
-      if (over_data?.isColumn || over_data?.isSection) {
+      if (over_data?.isColumn || over_data?.isSection || over_data?.isLane) {
         new_index = dest_items_pre_overlay.length;
       } else {
         const idx = dest_items_pre_overlay.findIndex((i) => i.id === over_id);
         new_index = idx === -1 ? dest_items_pre_overlay.length : idx;
       }
       const handle = make_revert_handle(active_id_str);
-      if (item.columnKey === dest_column_key && item.sectionKey === dest_section_key) {
+      if (item.columnKey === dest_column_key && item.sectionKey === dest_section_key && item.laneKey === dest_lane_key) {
         if (active_id_str === over_id) return;
         set_overlay((prev) => {
           const next = new Map(prev);
           next.set(active_id_str, {
             columnKey: dest_column_key,
             sectionKey: dest_section_key,
+            laneKey: dest_lane_key,
             index: new_index
           });
           return next;
@@ -9981,6 +10086,7 @@ function HazoUiKanban({
           item,
           columnKey: dest_column_key,
           sectionKey: dest_section_key,
+          laneKey: dest_lane_key,
           newIndex: new_index,
           revert: handle.revert
         };
@@ -9992,6 +10098,7 @@ function HazoUiKanban({
         next.set(active_id_str, {
           columnKey: dest_column_key,
           sectionKey: dest_section_key,
+          laneKey: dest_lane_key,
           index: new_index
         });
         return next;
@@ -10003,12 +10110,14 @@ function HazoUiKanban({
         toColumn: dest_column_key,
         fromSection: item.sectionKey,
         toSection: dest_section_key,
+        fromLane: item.laneKey,
+        toLane: dest_lane_key,
         newIndex: new_index,
         revert: handle.revert
       };
       onMove?.(move_event);
     },
-    [find_item, columns, grouped, onMove, onReorder, make_revert_handle]
+    [find_item, columns, lanes, grouped, onMove, onReorder, make_revert_handle]
   );
   const handle_drag_cancel = React27__namespace.useCallback(() => {
     set_active_id(null);
@@ -10019,13 +10128,56 @@ function HazoUiKanban({
     `(max-width: ${Math.max(0, mobileBreakpoint - 1)}px)`
   );
   const mobile_classes = is_custom_breakpoint ? is_mobile_via_query ? "block" : "hidden" : "sm:hidden";
-  const desktop_classes = is_custom_breakpoint ? is_mobile_via_query ? "hidden" : "grid" : "hidden sm:grid";
+  const desktop_classes = is_custom_breakpoint ? is_mobile_via_query ? "hidden" : lanes ? "block" : "grid" : lanes ? "hidden sm:block" : "hidden sm:grid";
+  const grid_style = {
+    gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))`
+  };
+  function lane_total(lane_key) {
+    let total = 0;
+    for (const col of columns)
+      total += (grouped.get(bucket_key(lane_key, col.key)) ?? []).length;
+    return total;
+  }
+  function render_column(col, tree_key, lane_key) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      KanbanColumn,
+      {
+        column: col,
+        laneKey: lane_key,
+        treeKey: tree_key,
+        items: grouped.get(bucket_key(lane_key, col.key)) ?? [],
+        renderCard,
+        emptyColumn,
+        cardClassName,
+        showEdit: show_edit,
+        onEditRequest: handle_edit_request
+      },
+      col.key
+    );
+  }
+  function render_lane_row(lane, tree_key, only_column) {
+    const count = only_column ? (grouped.get(bucket_key(lane.key, only_column.key)) ?? []).length : lane_total(lane.key);
+    if (lane.collapseWhenEmpty && count === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx(KanbanLaneStrip, { lane, treeKey: tree_key }, lane.key);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_hazo_kanban_lane", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(KanbanLaneHead, { lane, count, treeKey: tree_key }),
+      only_column ? render_column(only_column, tree_key, lane.key) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_lane_grid grid gap-3", style: grid_style, children: columns.map((col) => render_column(col, tree_key, lane.key)) })
+    ] }, lane.key);
+  }
+  function render_unmatched_lane(tree_key, only_column) {
+    const count = only_column ? (grouped.get(bucket_key(UNMATCHED_LANE_KEY, only_column.key)) ?? []).length : lane_total(UNMATCHED_LANE_KEY);
+    if (count === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_lane cls_hazo_kanban_lane_unmatched", children: only_column ? render_column(only_column, tree_key, UNMATCHED_LANE_KEY) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_lane_grid grid gap-3", style: grid_style, children: columns.map(
+      (col) => render_column(col, tree_key, UNMATCHED_LANE_KEY)
+    ) }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core$1.DndContext,
     {
       id: dnd_context_id,
       sensors,
-      collisionDetection: core$1.closestCorners,
+      collisionDetection: collision_detection,
       onDragStart: handle_drag_start,
       onDragEnd: handle_drag_end,
       onDragCancel: handle_drag_cancel,
@@ -10034,43 +10186,33 @@ function HazoUiKanban({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cls_hazo_kanban w-full", className), children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cls_hazo_kanban_mobile", mobile_classes), children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: active_tab, onValueChange: set_active_tab, children: [
             /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "grid w-full", style: { gridTemplateColumns: `repeat(${columns.length}, 1fr)` }, children: columns.map((col) => {
-              const count = (grouped.get(col.key) ?? []).length;
+              const count = lanes ? lanes.reduce(
+                (n, lane) => n + (grouped.get(bucket_key(lane.key, col.key)) ?? []).length,
+                (grouped.get(bucket_key(UNMATCHED_LANE_KEY, col.key)) ?? []).length
+              ) : (grouped.get(col.key) ?? []).length;
               return /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: col.key, className: "flex flex-col gap-0.5", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: col.title }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: count })
               ] }, col.key);
             }) }),
-            columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: col.key, className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-              KanbanColumn,
-              {
-                column: col,
-                items: grouped.get(col.key) ?? [],
-                renderCard,
-                emptyColumn,
-                cardClassName,
-                showEdit: show_edit,
-                onEditRequest: handle_edit_request
-              }
-            ) }, col.key))
+            columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: col.key, className: "mt-3", children: lanes ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_hazo_kanban_lanes flex flex-col gap-4", children: [
+              lanes.map((lane) => render_lane_row(lane, "m", col)),
+              render_unmatched_lane("m", col)
+            ] }) : render_column(col, "m") }, col.key))
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: cn("cls_hazo_kanban_desktop gap-3", desktop_classes),
-              style: { gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))` },
-              children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
-                KanbanColumn,
-                {
-                  column: col,
-                  items: grouped.get(col.key) ?? [],
-                  renderCard,
-                  emptyColumn,
-                  cardClassName,
-                  showEdit: show_edit,
-                  onEditRequest: handle_edit_request
-                },
-                col.key
-              ))
+              className: cn(
+                "cls_hazo_kanban_desktop",
+                lanes ? "space-y-4" : "gap-3",
+                desktop_classes
+              ),
+              style: lanes ? void 0 : grid_style,
+              children: lanes ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                lanes.map((lane) => render_lane_row(lane, "d")),
+                render_unmatched_lane("d")
+              ] }) : columns.map((col) => render_column(col, "d"))
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: active_item ? /* @__PURE__ */ jsxRuntime.jsx(