hazo_ui 6.4.0 → 6.7.0

package/dist/index.js

@@ -15,7 +15,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { DayPicker } from 'react-day-picker';
 import { format } from 'date-fns';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, closestCorners, DragOverlay, useDroppable } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, pointerWithin, rectIntersection, closestCorners, DragOverlay, useDroppable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -9021,10 +9021,15 @@ function KanbanCard({
     isDragging
   } = 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 = {
@@ -9033,6 +9038,12 @@ function KanbanCard({
     backgroundColor: "hsl(var(--hazo-kanban-card-bg))",
     border: `1px solid hsl(var(--hazo-kanban-card-border))`,
     borderLeft: priority_var ? `4px solid hsl(var(${priority_var}))` : `1px solid hsl(var(--hazo-kanban-card-border))`,
+    // Opt-in lift. A card whose background equals the column's (the case for
+    // every palette where --card and --background resolve to the same value)
+    // is separated by nothing but a 1px border, which reads as flat at a
+    // glance. The fallback is `none`, so a consumer that never sets the token
+    // renders exactly as before.
+    boxShadow: "var(--hazo-kanban-card-shadow, none)",
     opacity: isDragging && !dragging ? 0.4 : 1,
     cursor: "grab"
   };
@@ -9041,6 +9052,9 @@ function KanbanCard({
     {
       ref: setNodeRef,
       style,
+      "data-column-key": item.columnKey,
+      "data-lane-key": item.laneKey,
+      "data-section-key": item.sectionKey,
       className: cn(
         "cls_hazo_kanban_card group relative rounded-md p-3 mb-2 select-none",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
@@ -9085,8 +9099,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();
@@ -9104,13 +9126,16 @@ function KanbanColumn({
   items,
   renderCard,
   emptyColumn,
+  footer,
   cardClassName,
   showEdit,
-  onEditRequest
+  onEditRequest,
+  laneKey,
+  treeKey
 }) {
   const { setNodeRef, isOver } = 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.useMemo(
@@ -9147,6 +9172,8 @@ function KanbanColumn({
     "div",
     {
       ref: setNodeRef,
+      "data-column-key": column.key,
+      "data-lane-key": laneKey,
       className: cn(
         "cls_hazo_kanban_column flex flex-col rounded-md p-2",
         isOver && "cls_hazo_kanban_column_over bg-accent/30 ring-2 ring-ring/40"
@@ -9156,6 +9183,8 @@ function KanbanColumn({
           KanbanColumnHead,
           {
             columnKey: column.key,
+            laneKey,
+            treeKey,
             title: column.title,
             count: items.length,
             droppable: sections != null
@@ -9166,49 +9195,66 @@ function KanbanColumn({
           {
             items: ordered.map((i) => i.id),
             strategy: verticalListSortingStrategy,
-            children: /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_body flex-1 min-h-[40px]", children: !sections ? items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_empty text-xs text-muted-foreground py-2 px-1", children: emptyColumn }) : render_cards(items) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              expanded_sections.map((section) => /* @__PURE__ */ jsx(
-                KanbanSectionBand,
-                {
-                  columnKey: column.key,
-                  section,
-                  items: bySection.get(section.key) ?? [],
-                  emptyColumn,
-                  renderCards: render_cards
-                },
-                section.key
-              )),
-              unmatched.length > 0 && /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_section cls_hazo_kanban_section_unmatched", children: render_cards(unmatched) }),
-              collapsed_sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_section_strips mt-2 flex flex-wrap gap-1 border-t border-dashed border-border pt-2", children: collapsed_sections.map((section) => /* @__PURE__ */ jsx(
-                KanbanSectionStrip,
-                {
-                  columnKey: column.key,
-                  section
-                },
-                section.key
-              )) })
-            ] }) })
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-column-key": column.key,
+                "data-lane-key": laneKey,
+                className: "cls_hazo_kanban_column_body flex-1 min-h-[40px]",
+                children: !sections ? items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_empty text-xs text-muted-foreground py-2 px-1", children: emptyColumn }) : render_cards(items) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  expanded_sections.map((section) => /* @__PURE__ */ jsx(
+                    KanbanSectionBand,
+                    {
+                      columnKey: column.key,
+                      laneKey,
+                      treeKey,
+                      section,
+                      items: bySection.get(section.key) ?? [],
+                      emptyColumn,
+                      renderCards: render_cards
+                    },
+                    section.key
+                  )),
+                  unmatched.length > 0 && /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_section cls_hazo_kanban_section_unmatched", children: render_cards(unmatched) }),
+                  collapsed_sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_section_strips mt-2 flex flex-wrap gap-1 border-t border-dashed border-border pt-2", children: collapsed_sections.map((section) => /* @__PURE__ */ jsx(
+                    KanbanSectionStrip,
+                    {
+                      columnKey: column.key,
+                      laneKey,
+                      treeKey,
+                      section
+                    },
+                    section.key
+                  )) })
+                ] })
+              }
+            )
           }
-        )
+        ),
+        footer ? /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_footer mt-1", children: footer }) : null
       ]
     }
   );
 }
 function KanbanColumnHead({
   columnKey,
+  laneKey,
+  treeKey,
   title,
   count,
   droppable
 }) {
   const { setNodeRef, isOver } = 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__ */ jsxs(
     "div",
     {
       ref: droppable ? setNodeRef : void 0,
+      "data-column-key": columnKey,
+      "data-lane-key": laneKey,
       className: cn(
         "cls_hazo_kanban_column_head mb-2 flex items-center justify-between rounded-sm px-1 text-xs uppercase tracking-wider text-muted-foreground",
         droppable && "py-1",
@@ -9223,14 +9269,16 @@ function KanbanColumnHead({
 }
 function KanbanSectionBand({
   columnKey,
+  laneKey,
+  treeKey,
   section,
   items,
   emptyColumn,
   renderCards
 }) {
   const { setNodeRef, isOver } = 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__ */ jsxs(
     "div",
@@ -9253,11 +9301,13 @@ function KanbanSectionBand({
 }
 function KanbanSectionStrip({
   columnKey,
+  laneKey,
+  treeKey,
   section
 }) {
   const { setNodeRef, isOver } = 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__ */ jsx(
     "div",
@@ -9271,6 +9321,58 @@ function KanbanSectionStrip({
     }
   );
 }
+function lane_droppable_id(lane_key, tree_key) {
+  return `lane:${tree_key}::${lane_key}`;
+}
+function KanbanLaneHead({
+  lane,
+  count,
+  treeKey
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: lane_droppable_id(lane.key, treeKey),
+    data: { laneKey: lane.key, isLane: true }
+  });
+  return /* @__PURE__ */ 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__ */ jsx("span", { className: "cls_hazo_kanban_lane_title text-xs font-semibold uppercase tracking-wider text-foreground", children: lane.title }),
+        /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_lane_rule h-px flex-1 bg-border" }),
+        lane.actions ? /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_lane_actions flex items-center gap-1", children: lane.actions }) : null,
+        /* @__PURE__ */ 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 } = useDroppable({
+    id: lane_droppable_id(lane.key, treeKey),
+    data: { laneKey: lane.key, isLane: true }
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        "cls_hazo_kanban_lane_strip mb-2 flex items-center gap-3 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: [
+        /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_lane_title", children: lane.title }),
+        lane.actions ? /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_lane_actions ml-auto flex items-center gap-1", children: lane.actions }) : null
+      ]
+    }
+  );
+}
 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(" ");
@@ -9677,6 +9779,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.`,
@@ -9685,38 +9791,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,
@@ -9724,6 +9842,7 @@ function HazoUiKanban({
   mobileBreakpoint = 640,
   announcements,
   emptyColumn = "\u2014",
+  renderColumnFooter,
   className,
   cardClassName,
   itemLabel,
@@ -9764,7 +9883,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;
         }
@@ -9773,8 +9892,8 @@ function HazoUiKanban({
     });
   }, [items, overlay]);
   const grouped = React27.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.useCallback(
     (id) => items.find((i) => i.id === id),
@@ -9784,6 +9903,13 @@ function HazoUiKanban({
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
+  const collision_detection = React27.useCallback((args) => {
+    const under_pointer = pointerWithin(args);
+    if (under_pointer.length > 0) return under_pointer;
+    const overlapping = rectIntersection(args);
+    if (overlapping.length > 0) return overlapping;
+    return closestCorners(args);
+  }, []);
   const merged_announcements = React27.useMemo(() => {
     const defaults = default_announcements(label_fn);
     return {
@@ -9812,7 +9938,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,
@@ -9827,10 +9953,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,
@@ -9850,7 +9979,7 @@ function HazoUiKanban({
         });
       }
     }),
-    [find_item, columns, grouped, merged_announcements]
+    [find_item, columns, lanes, grouped, merged_announcements]
   );
   const handle_drag_start = React27.useCallback((event) => {
     set_active_id(String(event.active.id));
@@ -9877,31 +10006,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;
@@ -9911,6 +10044,7 @@ function HazoUiKanban({
           item,
           columnKey: dest_column_key,
           sectionKey: dest_section_key,
+          laneKey: dest_lane_key,
           newIndex: new_index,
           revert: handle.revert
         };
@@ -9922,6 +10056,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;
@@ -9933,12 +10068,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.useCallback(() => {
     set_active_id(null);
@@ -9949,13 +10086,57 @@ 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, with_footer = true) {
+    return /* @__PURE__ */ jsx(
+      KanbanColumn,
+      {
+        column: col,
+        laneKey: lane_key,
+        treeKey: tree_key,
+        items: grouped.get(bucket_key(lane_key, col.key)) ?? [],
+        renderCard,
+        emptyColumn,
+        footer: with_footer ? renderColumnFooter?.({ columnKey: col.key, laneKey: lane_key }) ?? null : null,
+        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__ */ jsx(KanbanLaneStrip, { lane, treeKey: tree_key }, lane.key);
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "cls_hazo_kanban_lane", children: [
+      /* @__PURE__ */ jsx(KanbanLaneHead, { lane, count, treeKey: tree_key }),
+      only_column ? render_column(only_column, tree_key, lane.key) : /* @__PURE__ */ 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__ */ jsx("div", { className: "cls_hazo_kanban_lane cls_hazo_kanban_lane_unmatched", children: only_column ? render_column(only_column, tree_key, UNMATCHED_LANE_KEY, false) : /* @__PURE__ */ 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, false)
+    ) }) });
+  }
   return /* @__PURE__ */ jsxs(
     DndContext,
     {
       id: dnd_context_id,
       sensors,
-      collisionDetection: closestCorners,
+      collisionDetection: collision_detection,
       onDragStart: handle_drag_start,
       onDragEnd: handle_drag_end,
       onDragCancel: handle_drag_cancel,
@@ -9964,43 +10145,33 @@ function HazoUiKanban({
         /* @__PURE__ */ jsxs("div", { className: cn("cls_hazo_kanban w-full", className), children: [
           /* @__PURE__ */ jsx("div", { className: cn("cls_hazo_kanban_mobile", mobile_classes), children: /* @__PURE__ */ jsxs(Tabs, { value: active_tab, onValueChange: set_active_tab, children: [
             /* @__PURE__ */ 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__ */ jsxs(TabsTrigger, { value: col.key, className: "flex flex-col gap-0.5", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-xs", children: col.title }),
                 /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: count })
               ] }, col.key);
             }) }),
-            columns.map((col) => /* @__PURE__ */ jsx(TabsContent, { value: col.key, className: "mt-3", children: /* @__PURE__ */ 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__ */ jsx(TabsContent, { value: col.key, className: "mt-3", children: lanes ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(Fragment$1, { children: [
+                lanes.map((lane) => render_lane_row(lane, "d")),
+                render_unmatched_lane("d")
+              ] }) : columns.map((col) => render_column(col, "d"))
             }
           ),
           /* @__PURE__ */ jsx(DragOverlay, { children: active_item ? /* @__PURE__ */ jsx(