hazo_ui 6.5.0 → 6.7.0

package/CHANGE_LOG.md

@@ -5,6 +5,81 @@ 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.7.0 (2026-08-02)
+
+### Added — `data-column-key` / `data-lane-key` on the kanban DOM
+
+`cls_hazo_kanban_column` is one class shared by every column, so a consumer
+whose columns carry meaning — an inbox is not a done pile — had no way to
+style one differently. The only lever available was `:nth-child`, which
+silently mis-paints the moment columns are reordered, filtered, or a lane
+renders a subset. These attributes make the identity the component already
+knows about addressable from CSS:
+
+| Element | Attributes |
+|---|---|
+| `.cls_hazo_kanban_column` | `data-column-key`, `data-lane-key` |
+| `.cls_hazo_kanban_column_head` | `data-column-key`, `data-lane-key` |
+| `.cls_hazo_kanban_column_body` | `data-column-key`, `data-lane-key` |
+| `.cls_hazo_kanban_card` | `data-column-key`, `data-lane-key`, `data-section-key` |
+
+`data-lane-key` is absent (not empty) on an unlaned board, so
+`[data-lane-key]` is a usable "is this board laned" test. Both layout trees
+always render — pair with the ancestor `.cls_hazo_kanban_desktop` /
+`.cls_hazo_kanban_mobile` when a rule must apply to only one.
+
+Purely additive: no class, layout, or default paint changed.
+
+### Added — `--hazo-kanban-card-shadow`
+
+Cards drew `background: hsl(var(--hazo-kanban-card-bg))` with a 1px border
+and nothing else. Under any palette where `--card` and `--background` resolve
+to the same value (the shadcn-derived default in `hazo_theme`, in both light
+and dark), that border is the *only* thing separating a card from the column
+behind it, and the board reads as flat.
+
+The card's `box-shadow` now resolves `var(--hazo-kanban-card-shadow, none)`.
+The fallback is `none`, so a consumer that never declares the token renders
+byte-identically to v6.6.0. Set it (e.g. to `var(--shadow-sm)`) to give cards
+a real lift.
+
+## v6.6.0 (2026-08-02)
+
+### Added — consumer slots on a laned `HazoUiKanban`
+
+v6.5.0 gave the board a second, outer axis but no way to hang anything off
+it. A lane could be dropped into and counted, and that was all — there was no
+supported place to put "add an item to this lane", a per-lane overflow menu,
+or an inline composer at the foot of a column. Both slots below are additive
+and default to rendering nothing, so existing boards are byte-identical.
+
+- **`KanbanLane.actions?: React.ReactNode`** — rendered in the lane heading
+  between the rule and the count, and right-aligned on a `collapseWhenEmpty`
+  lane's drop strip so a lane's controls do not vanish the moment it empties.
+  No `stopPropagation` is needed on controls placed here: a lane heading is a
+  `useDroppable` node, which registers a rect but attaches no pointer
+  handlers, unlike the `useSortable` card shell.
+- **`HazoUiKanbanProps.renderColumnFooter?: (ctx) => React.ReactNode`** —
+  rendered under a column body, below the cards or the `emptyColumn`
+  placeholder. `ctx` is `{ columnKey, laneKey }` and the function is called
+  once per rendered copy of a column, so on a laned board it fires once per
+  (lane, column) pair — enough to build a composer scoped to one lane's
+  Inbox. Return `null` for the columns that should not have one.
+  - The footer sits inside the column's droppable but **outside** its
+    `SortableContext`, so it never joins the sort order or becomes a drop
+    target of its own.
+  - The unmatched-lane row is deliberately skipped: its lane key is the
+    private `__hazo_lane_unmatched__` sentinel, never a lane the consumer
+    declared, so a footer there would both leak an internal constant and ask
+    for controls scoped to a lane that does not exist.
+
+New class hooks: `cls_hazo_kanban_lane_actions`,
+`cls_hazo_kanban_column_footer`. The lane strip's title is now wrapped in its
+own `cls_hazo_kanban_lane_title` span (it was a bare text node) so the
+right-aligned actions have something to sit beside.
+
+See `test-app/app/kanban/` §12.
+
 ## v6.5.0 (2026-08-02)
 
 ### Added — swimlanes for `HazoUiKanban`

package/dist/index.cjs

@@ -9108,6 +9108,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"
   };
@@ -9116,6 +9122,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",
@@ -9187,6 +9196,7 @@ function KanbanColumn({
   items,
   renderCard,
   emptyColumn,
+  footer,
   cardClassName,
   showEdit,
   onEditRequest,
@@ -9232,6 +9242,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"
@@ -9253,34 +9265,43 @@ function KanbanColumn({
           {
             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: !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,
-                  laneKey,
-                  treeKey,
-                  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,
-                  laneKey,
-                  treeKey,
-                  section
-                },
-                section.key
-              )) })
-            ] }) })
+            children: /* @__PURE__ */ jsxRuntime.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__ */ 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,
+                      laneKey,
+                      treeKey,
+                      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,
+                      laneKey,
+                      treeKey,
+                      section
+                    },
+                    section.key
+                  )) })
+                ] })
+              }
+            )
           }
-        )
+        ),
+        footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_hazo_kanban_column_footer mt-1", children: footer }) : null
       ]
     }
   );
@@ -9302,6 +9323,8 @@ function KanbanColumnHead({
     "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",
@@ -9391,6 +9414,7 @@ function KanbanLaneHead({
       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" }),
+        lane.actions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_lane_actions flex items-center gap-1", children: lane.actions }) : null,
         /* @__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 })
       ]
     }
@@ -9404,15 +9428,18 @@ function KanbanLaneStrip({
     id: lane_droppable_id(lane.key, treeKey),
     data: { laneKey: lane.key, isLane: true }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "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",
+        "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: lane.title
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_lane_title", children: lane.title }),
+        lane.actions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_lane_actions ml-auto flex items-center gap-1", children: lane.actions }) : null
+      ]
     }
   );
 }
@@ -9885,6 +9912,7 @@ function HazoUiKanban({
   mobileBreakpoint = 640,
   announcements,
   emptyColumn = "\u2014",
+  renderColumnFooter,
   className,
   cardClassName,
   itemLabel,
@@ -10138,7 +10166,7 @@ function HazoUiKanban({
       total += (grouped.get(bucket_key(lane_key, col.key)) ?? []).length;
     return total;
   }
-  function render_column(col, tree_key, lane_key) {
+  function render_column(col, tree_key, lane_key, with_footer = true) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       KanbanColumn,
       {
@@ -10148,6 +10176,7 @@ function HazoUiKanban({
         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
@@ -10168,8 +10197,8 @@ function HazoUiKanban({
   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.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__ */ 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, false)
     ) }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(