hazo_ui 6.3.1 → 6.5.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';
@@ -9019,7 +9019,18 @@ function KanbanCard({
     transform,
     transition,
     isDragging
-  } = useSortable({ id: item.id, data: { columnKey: item.columnKey } });
+  } = useSortable({
+    id: item.id,
+    // 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 = {
     transform: CSS.Transform.toString(transform),
@@ -9079,6 +9090,28 @@ function KanbanCard({
     }
   );
 }
+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();
+  for (const section of sections) bySection.set(section.key, []);
+  const unmatched = [];
+  for (const item of items) {
+    const bucket = item.sectionKey != null ? bySection.get(item.sectionKey) : void 0;
+    if (bucket) bucket.push(item);
+    else unmatched.push(item);
+  }
+  return { bySection, unmatched };
+}
 function KanbanColumn({
   column,
   items,
@@ -9086,12 +9119,45 @@ function KanbanColumn({
   emptyColumn,
   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(
+    () => sections ? group_items_by_section(items, sections) : { bySection: /* @__PURE__ */ new Map(), unmatched: items },
+    [items, sections]
+  );
+  const ordered = React27.useMemo(() => {
+    if (!sections) return items;
+    const out = [];
+    for (const section of sections) out.push(...bySection.get(section.key) ?? []);
+    out.push(...unmatched);
+    return out;
+  }, [items, sections, bySection, unmatched]);
+  function render_cards(list) {
+    return list.map((item) => /* @__PURE__ */ jsx(
+      KanbanCard,
+      {
+        item,
+        renderCard,
+        cardClassName,
+        showEdit,
+        onEditRequest
+      },
+      item.id
+    ));
+  }
+  const expanded_sections = (sections ?? []).filter(
+    (s) => !(s.collapseWhenEmpty && (bySection.get(s.key) ?? []).length === 0)
+  );
+  const collapsed_sections = (sections ?? []).filter(
+    (s) => s.collapseWhenEmpty && (bySection.get(s.key) ?? []).length === 0
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -9101,32 +9167,185 @@ function KanbanColumn({
         isOver && "cls_hazo_kanban_column_over bg-accent/30 ring-2 ring-ring/40"
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "cls_hazo_kanban_column_head flex items-center justify-between mb-2 px-1 text-xs uppercase tracking-wider text-muted-foreground", children: [
-          /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_column_title", children: column.title }),
-          /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_column_count rounded-full bg-muted px-2 py-0.5 text-foreground", children: items.length })
-        ] }),
+        /* @__PURE__ */ jsx(
+          KanbanColumnHead,
+          {
+            columnKey: column.key,
+            laneKey,
+            treeKey,
+            title: column.title,
+            count: items.length,
+            droppable: sections != null
+          }
+        ),
         /* @__PURE__ */ jsx(
           SortableContext,
           {
-            items: items.map((i) => i.id),
+            items: ordered.map((i) => i.id),
             strategy: verticalListSortingStrategy,
-            children: /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_body flex-1 min-h-[40px]", children: items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_column_empty text-xs text-muted-foreground py-2 px-1", children: emptyColumn }) : items.map((item) => /* @__PURE__ */ jsx(
-              KanbanCard,
-              {
-                item,
-                renderCard,
-                cardClassName,
-                showEdit,
-                onEditRequest
-              },
-              item.id
-            )) })
+            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,
+                  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
+              )) })
+            ] }) })
           }
         )
       ]
     }
   );
 }
+function KanbanColumnHead({
+  columnKey,
+  laneKey,
+  treeKey,
+  title,
+  count,
+  droppable
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: tree_droppable_id("columnhead", treeKey, laneKey, columnKey),
+    data: { columnKey, laneKey, isColumn: true },
+    disabled: !droppable
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: droppable ? setNodeRef : void 0,
+      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",
+        isOver && "cls_hazo_kanban_column_head_over bg-accent/30 text-foreground ring-1 ring-ring/40"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_column_title", children: title }),
+        /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_column_count rounded-full bg-muted px-2 py-0.5 text-foreground", children: count })
+      ]
+    }
+  );
+}
+function KanbanSectionBand({
+  columnKey,
+  laneKey,
+  treeKey,
+  section,
+  items,
+  emptyColumn,
+  renderCards
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: section_droppable_id(columnKey, section.key, treeKey, laneKey),
+    data: { columnKey, laneKey, sectionKey: section.key, isSection: true }
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        "cls_hazo_kanban_section rounded-sm",
+        isOver && "cls_hazo_kanban_section_over bg-accent/20 ring-1 ring-ring/30"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "cls_hazo_kanban_section_head mt-2 mb-1 flex items-center gap-2 px-1 first:mt-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_section_title text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: section.title }),
+          /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_section_rule h-px flex-1 bg-border" }),
+          /* @__PURE__ */ jsx("span", { className: "cls_hazo_kanban_section_count text-[11px] tabular-nums text-muted-foreground", children: items.length })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_section_body min-h-[32px]", children: items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cls_hazo_kanban_section_empty px-1 py-1 text-xs text-muted-foreground", children: emptyColumn }) : renderCards(items) })
+      ]
+    }
+  );
+}
+function KanbanSectionStrip({
+  columnKey,
+  laneKey,
+  treeKey,
+  section
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: section_droppable_id(columnKey, section.key, treeKey, laneKey),
+    data: { columnKey, laneKey, sectionKey: section.key, isSection: true }
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        "cls_hazo_kanban_section_strip rounded-full border border-dashed border-border px-2 py-0.5 text-[11px] text-muted-foreground",
+        isOver && "cls_hazo_kanban_section_strip_over border-solid bg-accent/30 text-foreground ring-1 ring-ring/30"
+      ),
+      children: section.title
+    }
+  );
+}
+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" }),
+        /* @__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__ */ 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(" ");
@@ -9533,6 +9752,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.`,
@@ -9541,37 +9764,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) {
-        bucket.push({ item, index: ov.index });
+        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,
@@ -9619,7 +9855,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) {
+        if (item && item.columnKey === pos.columnKey && item.sectionKey === pos.sectionKey && item.laneKey === pos.laneKey) {
           next.delete(item_id);
           changed = true;
         }
@@ -9628,8 +9864,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),
@@ -9639,6 +9875,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 {
@@ -9667,7 +9910,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,
@@ -9682,10 +9925,14 @@ 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 new_index = over && String(over.id) !== `column:${over_col_key}` ? target.findIndex((it) => it.id === String(over.id)) : target.length;
+        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,
           fromColumn: from_col?.title ?? item.columnKey,
@@ -9704,7 +9951,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));
@@ -9731,25 +9978,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;
-      const dest_items_pre_overlay = grouped.get(dest_column_key) ?? [];
+      if (dest_section?.accepts && !dest_section.accepts(item)) return;
+      const dest_items_pre_overlay = grouped.get(bucket_key(dest_lane_key, dest_column_key)) ?? [];
       let new_index;
-      if (over_data?.isColumn) {
+      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) {
+      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;
@@ -9758,6 +10015,8 @@ function HazoUiKanban({
           itemId: active_id_str,
           item,
           columnKey: dest_column_key,
+          sectionKey: dest_section_key,
+          laneKey: dest_lane_key,
           newIndex: new_index,
           revert: handle.revert
         };
@@ -9768,6 +10027,8 @@ function HazoUiKanban({
         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;
@@ -9777,12 +10038,16 @@ function HazoUiKanban({
         item,
         fromColumn: item.columnKey,
         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);
@@ -9793,13 +10058,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__ */ 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__ */ 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) : /* @__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)
+    ) }) });
+  }
   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,
@@ -9808,43 +10116,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(