hazo_ui 6.3.1 → 6.4.0

package/CHANGE_LOG.md

@@ -5,6 +5,48 @@ 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.4.0 (2026-08-01)
+
+### Added — in-column sections for `HazoUiKanban`
+
+A kanban column can now declare `sections`, splitting its body into
+separator-headed bands so a board can group on two axes at once (e.g. status
+across, tag down) without a mode toggle between them.
+
+- `KanbanColumn.sections?: KanbanSection[]` — `{ key, title, accepts?,
+  collapseWhenEmpty? }`. Cards are placed by the new
+  `KanbanItem.sectionKey`. Omit `sections` and nothing changes: existing
+  boards render exactly as before.
+- Each band is its own droppable, so a single drop expresses both column and
+  section. `KanbanMoveEvent` gained `fromSection`/`toSection`, and
+  `KanbanReorderEvent` gained `sectionKey`.
+- Move-vs-reorder is now decided on both axes — same column *and* same
+  section is a reorder; changing either is a move. Unsectioned boards have
+  `undefined` on both sides, so this collapses to the previous behaviour.
+- On a sectioned column the **header becomes a droppable** carrying the
+  column but no section — the status-only drop target ("move column, keep
+  section"). Required, not cosmetic: section bands cover the column body and
+  win every `closestCorners` contest, so without it a sectioned column has no
+  reachable spot that isn't a band. Unsectioned columns keep an inert header.
+- `collapseWhenEmpty` renders a section with no cards as a thin dashed drop
+  strip at the foot of the column. This is what makes "declare every section
+  in every column" practical for a long vocabulary: every section stays a
+  drop target without filling the column with empty headers.
+- The optimistic overlay tracks the destination section too, so a
+  same-column cross-section drop moves immediately rather than snapping back
+  until the consumer's async commit lands.
+- Dropping on a column's own padding leaves the card's section alone; a card
+  whose `sectionKey` matches no declared section renders in an unlabelled
+  trailing group rather than disappearing.
+
+New styling hooks (no new CSS variables): `cls_hazo_kanban_section`,
+`_section_head`, `_section_title`, `_section_rule`, `_section_count`,
+`_section_body`, `_section_empty`, `_section_over`, `_section_strips`,
+`cls_hazo_kanban_column_head_over`,
+`_section_strip`, `_section_strip_over`, `_section_unmatched`.
+
+Demo: test-app `/kanban` §10.
+
 ## v6.3.1 (2026-07-29)
 
 ### Fixed — test-app builds again

package/dist/index.cjs

@@ -9089,7 +9089,13 @@ function KanbanCard({
     transform,
     transition,
     isDragging
-  } = sortable.useSortable({ id: item.id, data: { columnKey: item.columnKey } });
+  } = 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 }
+  });
   const priority_var = item.priority ? `--hazo-kanban-priority-${String(item.priority).toLowerCase()}` : null;
   const style = {
     transform: utilities.CSS.Transform.toString(transform),
@@ -9149,6 +9155,20 @@ function KanbanCard({
     }
   );
 }
+function section_droppable_id(column_key, section_key) {
+  return `section:${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,
@@ -9162,6 +9182,37 @@ function KanbanColumn({
     id: `column:${column.key}`,
     data: { columnKey: column.key, isColumn: true }
   });
+  const sections = column.sections;
+  const { bySection, unmatched } = React27__namespace.useMemo(
+    () => sections ? group_items_by_section(items, sections) : { bySection: /* @__PURE__ */ new Map(), unmatched: items },
+    [items, sections]
+  );
+  const ordered = React27__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -9171,32 +9222,125 @@ function KanbanColumn({
         isOver && "cls_hazo_kanban_column_over bg-accent/30 ring-2 ring-ring/40"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_column_title", children: column.title }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_column_count rounded-full bg-muted px-2 py-0.5 text-foreground", children: items.length })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          KanbanColumnHead,
+          {
+            columnKey: column.key,
+            title: column.title,
+            count: items.length,
+            droppable: sections != null
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           sortable.SortableContext,
           {
-            items: items.map((i) => i.id),
+            items: ordered.map((i) => i.id),
             strategy: sortable.verticalListSortingStrategy,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_column_body flex-1 min-h-[40px]", children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_column_empty text-xs text-muted-foreground py-2 px-1", children: emptyColumn }) : items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-              KanbanCard,
-              {
-                item,
-                renderCard,
-                cardClassName,
-                showEdit,
-                onEditRequest
-              },
-              item.id
-            )) })
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_column_body flex-1 min-h-[40px]", children: !sections ? items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_column_empty text-xs text-muted-foreground py-2 px-1", children: emptyColumn }) : render_cards(items) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              expanded_sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(
+                KanbanSectionBand,
+                {
+                  columnKey: column.key,
+                  section,
+                  items: bySection.get(section.key) ?? [],
+                  emptyColumn,
+                  renderCards: render_cards
+                },
+                section.key
+              )),
+              unmatched.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_section cls_hazo_kanban_section_unmatched", children: render_cards(unmatched) }),
+              collapsed_sections.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                KanbanSectionStrip,
+                {
+                  columnKey: column.key,
+                  section
+                },
+                section.key
+              )) })
+            ] }) })
           }
         )
       ]
     }
   );
 }
+function KanbanColumnHead({
+  columnKey,
+  title,
+  count,
+  droppable
+}) {
+  const { setNodeRef, isOver } = core$1.useDroppable({
+    id: `columnhead:${columnKey}`,
+    data: { columnKey, isColumn: true },
+    disabled: !droppable
+  });
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_column_title", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_column_count rounded-full bg-muted px-2 py-0.5 text-foreground", children: count })
+      ]
+    }
+  );
+}
+function KanbanSectionBand({
+  columnKey,
+  section,
+  items,
+  emptyColumn,
+  renderCards
+}) {
+  const { setNodeRef, isOver } = core$1.useDroppable({
+    id: section_droppable_id(columnKey, section.key),
+    data: { columnKey, sectionKey: section.key, isSection: true }
+  });
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "cls_hazo_kanban_section_head mt-2 mb-1 flex items-center gap-2 px-1 first:mt-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_section_title text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: section.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_section_rule h-px flex-1 bg-border" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_section_count text-[11px] tabular-nums text-muted-foreground", children: items.length })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_section_body min-h-[32px]", children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_section_empty px-1 py-1 text-xs text-muted-foreground", children: emptyColumn }) : renderCards(items) })
+      ]
+    }
+  );
+}
+function KanbanSectionStrip({
+  columnKey,
+  section
+}) {
+  const { setNodeRef, isOver } = core$1.useDroppable({
+    id: section_droppable_id(columnKey, section.key),
+    data: { columnKey, sectionKey: section.key, isSection: true }
+  });
+  return /* @__PURE__ */ jsxRuntime.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
+    }
+  );
+}
 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(" ");
@@ -9621,7 +9765,8 @@ function group_items_by_column(items, overlay, columns) {
     if (ov) {
       const bucket = overlay_inserts.get(ov.columnKey);
       if (bucket) {
-        bucket.push({ item, index: ov.index });
+        const placed = ov.sectionKey === item.sectionKey ? item : { ...item, sectionKey: ov.sectionKey };
+        bucket.push({ item: placed, index: ov.index });
       }
     } else {
       const bucket = out.get(item.columnKey);
@@ -9689,7 +9834,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) {
           next.delete(item_id);
           changed = true;
         }
@@ -9755,7 +9900,8 @@ function HazoUiKanban({
         const over_col_key = over ? over.data?.current?.columnKey ?? String(over.id).replace(/^column:/, "") : null;
         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 on_shell = !over || String(over.id).startsWith("column:") || String(over.id).startsWith("columnhead:") || String(over.id).startsWith("section:");
+        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,
@@ -9804,22 +9950,28 @@ function HazoUiKanban({
       const dest_column_key = over_data?.columnKey ?? over_id.replace(/^column:/, "");
       const dest_column = columns.find((c) => c.key === dest_column_key);
       if (!dest_column) 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) ?? [];
       let new_index;
-      if (over_data?.isColumn) {
+      if (over_data?.isColumn || over_data?.isSection) {
         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) {
         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,
             index: new_index
           });
           return next;
@@ -9828,6 +9980,7 @@ function HazoUiKanban({
           itemId: active_id_str,
           item,
           columnKey: dest_column_key,
+          sectionKey: dest_section_key,
           newIndex: new_index,
           revert: handle.revert
         };
@@ -9838,6 +9991,7 @@ function HazoUiKanban({
         const next = new Map(prev);
         next.set(active_id_str, {
           columnKey: dest_column_key,
+          sectionKey: dest_section_key,
           index: new_index
         });
         return next;
@@ -9847,6 +10001,8 @@ function HazoUiKanban({
         item,
         fromColumn: item.columnKey,
         toColumn: dest_column_key,
+        fromSection: item.sectionKey,
+        toSection: dest_section_key,
         newIndex: new_index,
         revert: handle.revert
       };