@stll/ui 0.16.1 → 0.17.1

package/README.md

@@ -211,6 +211,31 @@ Pointer and touch drops outside registered board targets cancel. Choose an
 explicit `{ type: "handle" }` activation for the 44px handle, or `{ type:
 "item" }` when the whole item is the intended activation surface.
 
+### Column bands
+
+Columns whose options carry a `band` (`KanbanColumnBand`, usually a status
+property's option groups) render under one `KanbanColumnBandHeader` and fold
+as a run. `resolveKanbanColumnBands` derives the bands from the column order
+and rejects a band that resumes after another column, so a header can never
+span two separate runs. A folded band takes one narrow slot in every row;
+render a drop target in `renderCollapsedBandCell` to keep its hidden cells
+reachable, and the slot peeks open while a pointer rests on it. Pass
+`isBandCollapsed` and `onBandCollapsedChange` to persist the fold in a view.
+
+```tsx
+<KanbanSubgroupBoard
+  isBandCollapsed={(band) => collapsedBands.includes(band.id)}
+  matrix={matrix}
+  renderCell={renderCell}
+  renderCollapsedBandCell={({ band, cells, count }) => (
+    <FoldedDropTarget bandId={band.id} cells={cells} count={count} />
+  )}
+  renderColumnHeader={renderColumnHeader}
+  renderLaneIdentity={renderLaneIdentity}
+  onBandCollapsedChange={(band, collapsed) => saveFold(band.id, collapsed)}
+/>
+```
+
 ## Styles
 
 No compiled CSS ships. The components carry Tailwind class names, so the

package/dist/components/button-variants.d.ts

@@ -10,8 +10,8 @@
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "default" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | null | undefined;
+  size?: "sm" | "default" | "lg" | "xs" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "outline" | "destructive-outline" | "ghost" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 export { buttonAccessibleDisabledClass, buttonVariants };

package/dist/index.d.ts

@@ -70,15 +70,17 @@ import "./inspector/index.js";
 import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./kanban/card-properties.js";
 import { KanbanCardShell, KanbanCardShellProps } from "./kanban/card-shell.js";
 import { KanbanCellAction, KanbanCellActionProps } from "./kanban/cell-action.js";
+import { KanbanColumnBandHeader, KanbanColumnBandHeaderProps } from "./kanban/column-band-header.js";
+import { ColorVariants, OptionColor, emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
+import { KanbanBuiltInGroup, KanbanColumnBand, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
+import { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOARD_AXES, KanbanBoardAxis, KanbanBoardCell, KanbanBoardColumn, KanbanBoardCoordinate, KanbanBoardDestination, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./kanban/matrix.js";
+import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KanbanColumnBandSpan, hasKanbanColumnBands, resolveKanbanColumnBands } from "./kanban/column-bands.js";
 import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./kanban/column-header.js";
 import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSortableCellPosition, KanbanVirtualScrollRequest, kanbanKeyboardCoordinates } from "./kanban/sortable-interactions.logic.js";
 import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanCardDragSurfaceProps, KanbanDragCancelEvent, KanbanDragEndEvent, KanbanDragHandle, KanbanDragHandleProps, KanbanDragOverEvent, KanbanDragStartEvent, KanbanSortableActivationMode, KanbanSortableBindings, KanbanSortableBoard, KanbanSortableBoardProps, KanbanSortableColumns, KanbanSortableColumnsProps, KanbanSortableList, KanbanSortableListProps, UseKanbanDropTargetOptions, UseKanbanSortableOptions, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./kanban/sortable-interactions.js";
 import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./kanban/sortable-edge.js";
 import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
-import { ColorVariants, OptionColor, emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
-import { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
-import { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOARD_AXES, KanbanBoardAxis, KanbanBoardCell, KanbanBoardColumn, KanbanBoardCoordinate, KanbanBoardDestination, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./kanban/matrix.js";
-import { KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./kanban/subgroup-board.js";
+import { KANBAN_BAND_PEEK_DELAY_MS, KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./kanban/subgroup-board.js";
 import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext } from "./kanban/virtual-cell.js";
 import "./kanban/index.js";
 import { getInitials } from "./lib/initials.js";
@@ -91,4 +93,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffS
 import { ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone } from "./review/review-out-of-date-notice.js";
 import { ReviewStatusBadge, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant } from "./review/review-status-badge.js";
 import { ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
-export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuildKanbanBoardMatrixParams, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, type ControlSize, type CreateKanbanDropIntentParams, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, type OrderKanbanCellsByColumnsParams, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, UserText, type WorkspaceCompactNavigation, WorkspaceEndRail, type WorkspaceEndRailChatAction, type WorkspaceEndRailProps, type WorkspaceNavigation, WorkspaceShell, type WorkspaceShellProps, type WorkspaceTopBarContext, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
+export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuildKanbanBoardMatrixParams, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, type ControlSize, type CreateKanbanDropIntentParams, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, type OrderKanbanCellsByColumnsParams, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, UserText, type WorkspaceCompactNavigation, WorkspaceEndRail, type WorkspaceEndRailChatAction, type WorkspaceEndRailProps, type WorkspaceNavigation, WorkspaceShell, type WorkspaceShellProps, type WorkspaceTopBarContext, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

package/dist/index.js

@@ -69,14 +69,16 @@ import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parseP
 import { selectKanbanCardFieldIds } from "./kanban/card-properties.js";
 import { KanbanCardShell } from "./kanban/card-shell.js";
 import { KanbanCellAction } from "./kanban/cell-action.js";
+import { KanbanColumnBandHeader } from "./kanban/column-band-header.js";
+import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
+import { KANBAN_BOARD_AXES, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./kanban/matrix.js";
+import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, hasKanbanColumnBands, resolveKanbanColumnBands } from "./kanban/column-bands.js";
 import { KanbanColumnHeader } from "./kanban/column-header.js";
 import { KANBAN_BOARD_COLLISION_DETECTION, kanbanKeyboardCoordinates } from "./kanban/sortable-interactions.logic.js";
 import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./kanban/sortable-interactions.js";
 import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge } from "./kanban/sortable-edge.js";
 import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
-import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
-import { KANBAN_BOARD_AXES, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./kanban/matrix.js";
-import { KanbanSubgroupBoard } from "./kanban/subgroup-board.js";
+import { KANBAN_BAND_PEEK_DELAY_MS, KanbanSubgroupBoard } from "./kanban/subgroup-board.js";
 import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell } from "./kanban/virtual-cell.js";
 import { getInitials } from "./lib/initials.js";
 import { emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
@@ -87,4 +89,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, TRACKED_DELETI
 import { ReviewOutOfDateNotice } from "./review/review-out-of-date-notice.js";
 import { ReviewSeverityDot, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
 import { ReviewStatusBadge } from "./review/review-status-badge.js";
-export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, ResourceCalendar, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, UserText, WorkspaceEndRail, WorkspaceShell, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
+export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, ResourceCalendar, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, UserText, WorkspaceEndRail, WorkspaceShell, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

package/dist/inspector/tabs.d.ts

@@ -8,7 +8,7 @@ import { Tabs } from "@base-ui/react/tabs";
  */
 declare const InspectorTabs: ({ className, ...props }: Omit<Tabs.Root.Props, "orientation">) => React$1.JSX.Element;
 declare const INSPECTOR_RAIL_MEDIA_QUERY: "(min-width: 48rem)";
-declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "horizontal" | "vertical";
+declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "vertical" | "horizontal";
 declare const InspectorTabList: ({ className, ...props }: Tabs.List.Props) => React$1.JSX.Element;
 declare const InspectorTab: ({ className, ...props }: Tabs.Tab.Props) => React$1.JSX.Element;
 declare const InspectorTabPanel: ({ className, ...props }: Tabs.Panel.Props) => React$1.JSX.Element;

package/dist/kanban/column-band-header.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+//#region src/kanban/column-band-header.d.ts
+type KanbanColumnBandHeaderProps = {
+  /** The band name, or the control that has taken its place. */
+  title: ReactNode;
+  /** Colour swatch for the band. */
+  swatch?: ReactNode;
+  /** Short text after the name, such as the band's card count. */
+  meta?: ReactNode;
+  /** The band's persisted state; drives the toggle, its icon, and its label. */
+  collapsed: boolean;
+  /**
+   * Render only the toggle, for the narrow slot of a folded band. Defaults to
+   * `collapsed`; a board that peeks a collapsed band open passes `false` so
+   * the caption shows the name while the toggle still offers to pin it open.
+   */
+  compact?: boolean | undefined;
+  /** Accessible name for the toggle, such as "Collapse To do". */
+  toggleLabel: string;
+  onCollapsedChange: (collapsed: boolean) => void;
+  /** Band menu or other controls, after the toggle. */
+  actions?: ReactNode;
+};
+/**
+ * The band line above a run of columns: one 28px row of toggle, swatch, name,
+ * and count, so a band costs the board a caption's height and nothing more.
+ * Folded, only the toggle remains in this line; the band's name moves down
+ * into the narrow column body, where the height is already there.
+ */
+declare const KanbanColumnBandHeader: ({ title, swatch, meta, collapsed, compact, toggleLabel, onCollapsedChange, actions }: KanbanColumnBandHeaderProps) => import("react").JSX.Element;
+//#endregion
+export { KanbanColumnBandHeader, KanbanColumnBandHeaderProps };

package/dist/kanban/column-band-header.js

@@ -0,0 +1,42 @@
+import { cn } from "../lib/utils.js";
+import { DirectionalIcon } from "../components/directional-icon.js";
+import { ChevronDownIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kanban/column-band-header.tsx
+/**
+* The band line above a run of columns: one 28px row of toggle, swatch, name,
+* and count, so a band costs the board a caption's height and nothing more.
+* Folded, only the toggle remains in this line; the band's name moves down
+* into the narrow column body, where the height is already there.
+*/
+const KanbanColumnBandHeader = ({ title, swatch, meta, collapsed, compact = collapsed, toggleLabel, onCollapsedChange, actions }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("flex h-7 items-center gap-1", compact ? "justify-center" : "pe-1"),
+	"data-collapsed": collapsed ? "" : void 0,
+	"data-compact": compact ? "" : void 0,
+	"data-slot": "kanban-column-band-header",
+	children: [/* @__PURE__ */ jsx("button", {
+		"aria-expanded": !collapsed,
+		"aria-label": toggleLabel,
+		className: "hover:bg-muted/60 text-muted-foreground hover:text-foreground flex size-6 shrink-0 items-center justify-center rounded-md transition-[background-color]",
+		onClick: () => onCollapsedChange(!collapsed),
+		title: toggleLabel,
+		type: "button",
+		children: /* @__PURE__ */ jsx(DirectionalIcon, {
+			className: cn("size-3.5 transition-transform", collapsed && "-rotate-90"),
+			flip: collapsed,
+			icon: ChevronDownIcon
+		})
+	}), compact ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+		swatch,
+		/* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-1 items-baseline gap-1.5 truncate text-xs font-medium",
+			children: [title, meta !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground font-normal tabular-nums",
+				children: meta
+			})]
+		}),
+		actions
+	] })]
+});
+//#endregion
+export { KanbanColumnBandHeader };

package/dist/kanban/column-bands.d.ts

@@ -0,0 +1,41 @@
+import { KanbanColumnBand } from "./grouping.js";
+import { KanbanBoardColumn } from "./matrix.js";
+//#region src/kanban/column-bands.d.ts
+/**
+ * Column bands: named runs of adjacent columns the board shows under one
+ * header and can collapse as a unit.
+ *
+ * A band is presentation over the column order, never a second axis: cards
+ * keep their column, and the matrix stays the placement authority. The board
+ * only needs to know which adjacent columns share a header, which is what
+ * `resolveKanbanColumnBands` derives from the columns' `band` metadata.
+ */
+/** Every board column takes this inline size; a collapsed band takes one lane. */
+declare const KANBAN_COLUMN_WIDTH_CLASS = "w-[300px] shrink-0";
+declare const KANBAN_COLUMN_WIDTH_PX = 300;
+/** The `gap-3` between columns, so a band header can span its columns. */
+declare const KANBAN_COLUMN_GAP_PX = 12;
+/** A collapsed band folds its columns into one narrow lane. */
+declare const KANBAN_COLLAPSED_BAND_WIDTH_CLASS = "w-12 shrink-0";
+declare const KANBAN_COLLAPSED_BAND_WIDTH_PX = 48;
+/**
+ * A run of adjacent columns under one header. `band` is `null` for a column
+ * that belongs to no band, which renders as a run of one without a header.
+ */
+type KanbanColumnBandSpan = {
+  band: KanbanColumnBand | null;
+  columns: KanbanBoardColumn[];
+};
+/**
+ * Group the presented columns into bands, in column order.
+ *
+ * Bands must be contiguous: the same band id appearing again after a column
+ * of another band (or of none) is a programming error in the caller's schema,
+ * not a state to render, because a header that spans two separate runs has no
+ * meaning. The check fails loudly instead of silently drawing a second header.
+ */
+declare const resolveKanbanColumnBands: (columns: readonly KanbanBoardColumn[]) => KanbanColumnBandSpan[];
+/** Whether any presented column carries band metadata. */
+declare const hasKanbanColumnBands: (columns: readonly KanbanBoardColumn[]) => boolean;
+//#endregion
+export { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KanbanColumnBandSpan, hasKanbanColumnBands, resolveKanbanColumnBands };

package/dist/kanban/column-bands.js

@@ -0,0 +1,52 @@
+import { getKanbanBoardColumnIdentity } from "./matrix.js";
+import { panic } from "better-result";
+//#region src/kanban/column-bands.ts
+/**
+* Column bands: named runs of adjacent columns the board shows under one
+* header and can collapse as a unit.
+*
+* A band is presentation over the column order, never a second axis: cards
+* keep their column, and the matrix stays the placement authority. The board
+* only needs to know which adjacent columns share a header, which is what
+* `resolveKanbanColumnBands` derives from the columns' `band` metadata.
+*/
+/** Every board column takes this inline size; a collapsed band takes one lane. */
+const KANBAN_COLUMN_WIDTH_CLASS = "w-[300px] shrink-0";
+const KANBAN_COLUMN_WIDTH_PX = 300;
+/** The `gap-3` between columns, so a band header can span its columns. */
+const KANBAN_COLUMN_GAP_PX = 12;
+/** A collapsed band folds its columns into one narrow lane. */
+const KANBAN_COLLAPSED_BAND_WIDTH_CLASS = "w-12 shrink-0";
+const KANBAN_COLLAPSED_BAND_WIDTH_PX = 48;
+const bandOf = (column) => column.type === "group" ? column.group.band ?? null : null;
+/**
+* Group the presented columns into bands, in column order.
+*
+* Bands must be contiguous: the same band id appearing again after a column
+* of another band (or of none) is a programming error in the caller's schema,
+* not a state to render, because a header that spans two separate runs has no
+* meaning. The check fails loudly instead of silently drawing a second header.
+*/
+const resolveKanbanColumnBands = (columns) => {
+	const spans = [];
+	const closedBandIds = /* @__PURE__ */ new Set();
+	for (const column of columns) {
+		const band = bandOf(column);
+		const last = spans.at(-1);
+		if (band !== null && last?.band?.id === band.id) {
+			last.columns.push(column);
+			continue;
+		}
+		if (last?.band !== null && last?.band !== void 0) closedBandIds.add(last.band.id);
+		if (band !== null && closedBandIds.has(band.id)) return panic(`Kanban column band "${band.id}" is not contiguous: it resumes at column ${getKanbanBoardColumnIdentity(column)}`);
+		spans.push({
+			band,
+			columns: [column]
+		});
+	}
+	return spans;
+};
+/** Whether any presented column carries band metadata. */
+const hasKanbanColumnBands = (columns) => columns.some((column) => bandOf(column) !== null);
+//#endregion
+export { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, hasKanbanColumnBands, resolveKanbanColumnBands };

package/dist/kanban/grouping.d.ts

@@ -1,5 +1,15 @@
 import { OptionColor } from "../lib/option-color.js";
 //#region src/kanban/grouping.d.ts
+/**
+ * The band a column belongs to: a named run of adjacent columns the board
+ * shows under one header and can collapse as a unit. A status property's
+ * option groups ("To do", "In progress", "Done") are the usual source.
+ */
+type KanbanColumnBand = {
+  id: string;
+  label: string;
+  optionColor?: OptionColor | undefined;
+};
 /** One column, before the uncategorized bucket is appended. */
 type KanbanGroupOption = {
   value: string;
@@ -8,6 +18,7 @@ type KanbanGroupOption = {
   color?: string | undefined;
   colorBg?: string | undefined;
   optionColor?: OptionColor | undefined;
+  band?: KanbanColumnBand | undefined;
 };
 /** A column, including the uncategorized bucket (`value: null`). */
 type KanbanGroup = {
@@ -17,6 +28,7 @@ type KanbanGroup = {
   color?: string | undefined;
   colorBg?: string | undefined;
   optionColor?: OptionColor | undefined;
+  band?: KanbanColumnBand | undefined;
 };
 /**
  * A column source that is not a schema property, addressed by a reserved id.
@@ -83,4 +95,4 @@ declare const resolveKanbanGroupOptions: <TRow, TProperty, TGroupId extends stri
 /** Append the uncategorized bucket (null value) after the options. */
 declare const getKanbanGroups: (options: readonly KanbanGroupOption[], uncategorizedLabel: string) => KanbanGroup[];
 //#endregion
-export { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows };
+export { KanbanBuiltInGroup, KanbanColumnBand, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows };

package/dist/kanban/grouping.js

@@ -65,7 +65,8 @@ const getKanbanGroups = (options, uncategorizedLabel) => {
 		image: option.image,
 		color: option.color,
 		colorBg: option.colorBg,
-		optionColor: option.optionColor
+		optionColor: option.optionColor,
+		band: option.band
 	}));
 	result.push({
 		value: null,

package/dist/kanban/index.d.ts

@@ -1,13 +1,15 @@
 import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./card-properties.js";
 import { KanbanCardShell, KanbanCardShellProps } from "./card-shell.js";
 import { KanbanCellAction, KanbanCellActionProps } from "./cell-action.js";
+import { KanbanColumnBandHeader, KanbanColumnBandHeaderProps } from "./column-band-header.js";
+import { KanbanBuiltInGroup, KanbanColumnBand, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
+import { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOARD_AXES, KanbanBoardAxis, KanbanBoardCell, KanbanBoardColumn, KanbanBoardCoordinate, KanbanBoardDestination, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./matrix.js";
+import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KanbanColumnBandSpan, hasKanbanColumnBands, resolveKanbanColumnBands } from "./column-bands.js";
 import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./column-header.js";
 import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSortableCellPosition, KanbanVirtualScrollRequest, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
 import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanCardDragSurfaceProps, KanbanDragCancelEvent, KanbanDragEndEvent, KanbanDragHandle, KanbanDragHandleProps, KanbanDragOverEvent, KanbanDragStartEvent, KanbanSortableActivationMode, KanbanSortableBindings, KanbanSortableBoard, KanbanSortableBoardProps, KanbanSortableColumns, KanbanSortableColumnsProps, KanbanSortableList, KanbanSortableListProps, UseKanbanDropTargetOptions, UseKanbanSortableOptions, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
 import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./sortable-edge.js";
 import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
-import { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
-import { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOARD_AXES, KanbanBoardAxis, KanbanBoardCell, KanbanBoardColumn, KanbanBoardCoordinate, KanbanBoardDestination, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./matrix.js";
-import { KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./subgroup-board.js";
+import { KANBAN_BAND_PEEK_DELAY_MS, KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./subgroup-board.js";
 import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext } from "./virtual-cell.js";
-export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
+export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };

package/dist/kanban/index.js

@@ -1,13 +1,15 @@
 import { selectKanbanCardFieldIds } from "./card-properties.js";
 import { KanbanCardShell } from "./card-shell.js";
 import { KanbanCellAction } from "./cell-action.js";
+import { KanbanColumnBandHeader } from "./column-band-header.js";
+import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
+import { KANBAN_BOARD_AXES, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./matrix.js";
+import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, hasKanbanColumnBands, resolveKanbanColumnBands } from "./column-bands.js";
 import { KanbanColumnHeader } from "./column-header.js";
 import { KANBAN_BOARD_COLLISION_DETECTION, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
 import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
 import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge } from "./sortable-edge.js";
 import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
-import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
-import { KANBAN_BOARD_AXES, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./matrix.js";
-import { KanbanSubgroupBoard } from "./subgroup-board.js";
+import { KANBAN_BAND_PEEK_DELAY_MS, KanbanSubgroupBoard } from "./subgroup-board.js";
 import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell } from "./virtual-cell.js";
-export { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
+export { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };

package/dist/kanban/subgroup-board.d.ts

@@ -1,7 +1,9 @@
-import { KanbanGroup } from "./grouping.js";
+import { KanbanColumnBand, KanbanGroup } from "./grouping.js";
 import { KanbanBoardCell, KanbanBoardColumn, KanbanBoardMatrix } from "./matrix.js";
 import { ReactNode } from "react";
 //#region src/kanban/subgroup-board.d.ts
+/** How long a pointer rests on a collapsed band before it peeks open. */
+declare const KANBAN_BAND_PEEK_DELAY_MS = 400;
 type KanbanSubgroupColumnHeaderContext = {
   column: KanbanBoardColumn;
   count: number;
@@ -16,6 +18,32 @@ type KanbanSubgroupCellContext<TRow> = {
   count: number;
   laneValue: string | null;
 };
+type KanbanSubgroupBandHeaderContext = {
+  band: KanbanColumnBand;
+  columns: KanbanBoardColumn[];
+  /** Rows across the band's columns, every lane included. */
+  count: number;
+  /** The persisted state the toggle reports and flips. */
+  collapsed: boolean;
+  /**
+   * Whether the band renders as one narrow slot right now. False while a
+   * collapsed band peeks open under the pointer, so a caption can show its
+   * name and offer to pin the band open.
+   */
+  folded: boolean;
+  onCollapsedChange: (collapsed: boolean) => void;
+};
+/**
+ * One lane's slot for a collapsed band: the cells it hides, so a host can
+ * register the slot as a drop target that lands in the band's first column
+ * (or asks which), and the count it stands in for.
+ */
+type KanbanSubgroupCollapsedBandCellContext<TRow> = {
+  band: KanbanColumnBand;
+  cells: KanbanBoardCell<TRow>[];
+  count: number;
+  laneValue: string | null;
+};
 type KanbanSubgroupCollapseControl = {
   isLaneCollapsed?: undefined;
   onLaneCollapsedChange?: undefined;
@@ -28,11 +56,41 @@ type KanbanSubgroupBoardProps<TRow> = {
   renderColumnHeader: (context: KanbanSubgroupColumnHeaderContext) => ReactNode;
   renderLaneIdentity: (context: KanbanSubgroupLaneIdentityContext) => ReactNode;
   renderCell: (context: KanbanSubgroupCellContext<TRow>) => ReactNode;
+  /**
+   * The line above a band's columns. Defaults to `KanbanColumnBandHeader`
+   * with the band's label and count.
+   */
+  renderBandHeader?: ((context: KanbanSubgroupBandHeaderContext) => ReactNode) | undefined;
+  /**
+   * A lane's slot while its band is collapsed. Defaults to the band's name
+   * set vertically over the count; a host that accepts drops into a collapsed
+   * band renders its target here.
+   */
+  renderCollapsedBandCell?: ((context: KanbanSubgroupCollapsedBandCellContext<TRow>) => ReactNode) | undefined;
+  /** Accessible name for a band's collapse toggle. */
+  formatBandToggleLabel?: ((band: KanbanColumnBand, collapsed: boolean) => string) | undefined;
+  /**
+   * Controlled band collapse. Omit both and the board keeps the collapsed
+   * bands itself; a persisted view supplies both.
+   */
+  isBandCollapsed?: ((band: KanbanColumnBand) => boolean) | undefined;
+  onBandCollapsedChange?: ((band: KanbanColumnBand, collapsed: boolean) => void) | undefined;
   formatCount?: ((count: number) => ReactNode) | undefined;
   footer?: ReactNode;
   className?: string | undefined;
 } & KanbanSubgroupCollapseControl;
-/** Reusable swimlane layout over the canonical two-axis Kanban matrix. */
-declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, formatCount, isLaneCollapsed, onLaneCollapsedChange, footer, className }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
+/**
+ * Reusable swimlane layout over the canonical two-axis Kanban matrix.
+ *
+ * Columns that carry band metadata render under a one-line band caption and
+ * can be collapsed as a run: the band folds into one narrow slot in every
+ * row, whose cells stay reachable (a host renders its drop target in them),
+ * and peeks open while a pointer rests on it, so a drag can still land on a
+ * specific column inside. Every row is laid out span by span with the same
+ * widths, which is what keeps captions, headers, counts, and cells aligned
+ * in every state; the caption line never grows past its own height, so a
+ * folded band costs no vertical space.
+ */
+declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
 //#endregion
-export { KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext };
+export { KANBAN_BAND_PEEK_DELAY_MS, KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext };

package/dist/kanban/subgroup-board.js

@@ -1,15 +1,34 @@
 import { cn } from "../lib/utils.js";
 import { DirectionalIcon } from "../components/directional-icon.js";
+import { KanbanColumnBandHeader } from "./column-band-header.js";
+import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_CLASS, resolveKanbanColumnBands } from "./column-bands.js";
 import { ChevronDownIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
 //#region src/kanban/subgroup-board.tsx
 const groupValueKey = (value) => value === null ? "null" : `value:${value.length}:${value}`;
 const columnKey = (column) => column.type === "group" ? `group:${groupValueKey(column.group.value)}` : `destination:${column.destination.id}`;
-/** Reusable swimlane layout over the canonical two-axis Kanban matrix. */
-const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, footer, className }) => {
+const spanKey = (span) => span.band === null ? `single:${span.columns.map(columnKey).join("|")}` : `band:${span.band.id}`;
+const rowsIn = (cells) => cells.reduce((sum, cell) => sum + cell.rows.length, 0);
+/** How long a pointer rests on a collapsed band before it peeks open. */
+const KANBAN_BAND_PEEK_DELAY_MS = 400;
+/**
+* Reusable swimlane layout over the canonical two-axis Kanban matrix.
+*
+* Columns that carry band metadata render under a one-line band caption and
+* can be collapsed as a run: the band folds into one narrow slot in every
+* row, whose cells stay reachable (a host renders its drop target in them),
+* and peeks open while a pointer rests on it, so a drag can still land on a
+* specific column inside. Every row is laid out span by span with the same
+* widths, which is what keeps captions, headers, counts, and cells aligned
+* in every state; the caption line never grows past its own height, so a
+* folded band costs no vertical space.
+*/
+const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }) => {
 	const [collapsedLaneValues, setCollapsedLaneValues] = useState(() => /* @__PURE__ */ new Set());
 	const [expandedEmptyLaneValues, setExpandedEmptyLaneValues] = useState(() => /* @__PURE__ */ new Set());
+	const [collapsedBandIds, setCollapsedBandIds] = useState(() => /* @__PURE__ */ new Set());
+	const [peekingBandId, setPeekingBandId] = useState(null);
 	const { cellsByLaneValue, countByColumnValue, ungroupedCells } = useMemo(() => {
 		const laneCells = /* @__PURE__ */ new Map();
 		const columnCounts = /* @__PURE__ */ new Map();
@@ -32,6 +51,8 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 			ungroupedCells: cellsWithoutLane
 		};
 	}, [matrix.cells]);
+	const spans = useMemo(() => resolveKanbanColumnBands(matrix.columns), [matrix.columns]);
+	const hasBands = spans.some((span) => span.band !== null);
 	const setLaneCollapsed = (group, count, collapsed) => {
 		if (onLaneCollapsedChange) {
 			onLaneCollapsedChange(group, collapsed);
@@ -54,39 +75,170 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 			return next;
 		});
 	};
+	/** The band's persisted state: what the toggle reports and flips. */
+	const isBandCollapsedNow = (band) => isBandCollapsed ? isBandCollapsed(band) : collapsedBandIds.has(band.id);
+	/**
+	* Whether the band renders folded right now. A peek opens the layout
+	* without changing the persisted state, so a peeked band still reports
+	* itself collapsed and its toggle pins it open rather than closing it.
+	*/
+	const isBandFolded = (band) => peekingBandId !== band.id && isBandCollapsedNow(band);
+	const setBandCollapsed = (band, collapsed) => {
+		setPeekingBandId(null);
+		if (onBandCollapsedChange) {
+			onBandCollapsedChange(band, collapsed);
+			return;
+		}
+		setCollapsedBandIds((current) => {
+			const next = new Set(current);
+			if (collapsed) next.add(band.id);
+			else next.delete(band.id);
+			return next;
+		});
+	};
+	const endPeek = () => setPeekingBandId(null);
+	const columnCount = (column) => countByColumnValue.get(columnKey(column)) ?? 0;
+	const cellsOf = (span, cells) => span.columns.flatMap((column) => cells.filter((cell) => columnKey(cell.coordinate.column) === columnKey(column)));
+	const spanWidth = (span) => span.columns.length * 300 + (span.columns.length - 1) * 12;
+	/**
+	* One row of the board, span by span. A folded band takes one narrow slot
+	* in every row; an open span lays its columns out at the column width.
+	*/
+	const renderRow = ({ className: rowClassName, label, renderColumn, renderFoldedBand }) => /* @__PURE__ */ jsx("div", {
+		"aria-label": label,
+		className: cn("flex gap-3", rowClassName),
+		children: spans.map((span) => {
+			const band = span.band;
+			if (band !== null && isBandFolded(band)) return /* @__PURE__ */ jsx(FoldedBandSlot, {
+				band,
+				className: KANBAN_COLLAPSED_BAND_WIDTH_CLASS,
+				onPeek: setPeekingBandId,
+				onPeekEnd: endPeek,
+				children: renderFoldedBand(band, span)
+			}, spanKey(span));
+			return /* @__PURE__ */ jsx("div", {
+				className: "flex gap-3",
+				"data-kanban-band": band?.id,
+				onPointerLeave: band !== null && peekingBandId === band.id ? endPeek : void 0,
+				children: span.columns.map((column) => /* @__PURE__ */ jsx("div", {
+					className: KANBAN_COLUMN_WIDTH_CLASS,
+					children: renderColumn(column)
+				}, columnKey(column)))
+			}, spanKey(span));
+		})
+	});
+	const bandHeader = (band, span) => {
+		const collapsed = isBandCollapsedNow(band);
+		const folded = isBandFolded(band);
+		const context = {
+			band,
+			collapsed,
+			columns: span.columns,
+			count: span.columns.reduce((sum, column) => sum + columnCount(column), 0),
+			folded,
+			onCollapsedChange: (next) => setBandCollapsed(band, next)
+		};
+		if (renderBandHeader) return /* @__PURE__ */ jsx(Fragment, { children: renderBandHeader(context) });
+		return /* @__PURE__ */ jsx(KanbanColumnBandHeader, {
+			collapsed,
+			compact: folded,
+			meta: formatCount(context.count),
+			title: band.label,
+			toggleLabel: formatBandToggleLabel ? formatBandToggleLabel(band, collapsed) : band.label,
+			onCollapsedChange: context.onCollapsedChange
+		});
+	};
+	const foldedCell = (band, span, cells, laneValue) => {
+		const bandCells = cellsOf(span, cells);
+		const count = rowsIn(bandCells);
+		if (renderCollapsedBandCell) return /* @__PURE__ */ jsx(Fragment, { children: renderCollapsedBandCell({
+			band,
+			cells: bandCells,
+			count,
+			laneValue
+		}) });
+		return /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex flex-col items-center gap-2 py-2 text-xs",
+			"data-kanban-collapsed-band-count": count,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "max-h-40 truncate font-medium [writing-mode:vertical-rl]",
+				children: band.label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "tabular-nums",
+				children: formatCount(count)
+			})]
+		});
+	};
+	const foldedCount = (span, cells) => {
+		const count = rowsIn(cellsOf(span, cells));
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex justify-center",
+			"data-kanban-lane-column-count": count,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs tabular-nums",
+				children: formatCount(count)
+			})
+		});
+	};
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("h-full overflow-auto px-4 pb-4", className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "min-w-max",
 			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "bg-background sticky top-0 z-20 flex gap-3 pt-4 pb-3",
-					children: matrix.columns.map((column) => /* @__PURE__ */ jsx("div", {
-						className: "w-[300px] shrink-0",
-						children: renderColumnHeader({
-							column,
-							count: countByColumnValue.get(columnKey(column)) ?? 0
+				/* @__PURE__ */ jsxs("div", {
+					className: "bg-background sticky top-0 z-20 pt-4 pb-3",
+					children: [hasBands ? /* @__PURE__ */ jsx("div", {
+						className: "flex items-end gap-3 pb-1.5",
+						"data-kanban-band-row": "",
+						children: spans.map((span) => {
+							const band = span.band;
+							if (band === null) return /* @__PURE__ */ jsx("div", {
+								className: "shrink-0",
+								style: { width: `${String(spanWidth(span))}px` }
+							}, spanKey(span));
+							if (isBandFolded(band)) return /* @__PURE__ */ jsx(FoldedBandSlot, {
+								band,
+								className: cn("border-border/60 border-b", KANBAN_COLLAPSED_BAND_WIDTH_CLASS),
+								onPeek: setPeekingBandId,
+								onPeekEnd: endPeek,
+								children: bandHeader(band, span)
+							}, spanKey(span));
+							return /* @__PURE__ */ jsx("div", {
+								className: "border-border/60 shrink-0 border-b",
+								"data-kanban-band": band.id,
+								style: { width: `${String(spanWidth(span))}px` },
+								onPointerLeave: peekingBandId === band.id ? endPeek : void 0,
+								children: bandHeader(band, span)
+							}, spanKey(span));
 						})
-					}, columnKey(column)))
+					}) : null, renderRow({
+						renderColumn: (column) => /* @__PURE__ */ jsx(Fragment, { children: renderColumnHeader({
+							column,
+							count: columnCount(column)
+						}) }),
+						renderFoldedBand: () => null
+					})]
 				}),
-				ungroupedCells.length === 0 ? null : /* @__PURE__ */ jsx("div", {
-					className: "flex gap-3 pb-1",
-					children: ungroupedCells.map((cell) => /* @__PURE__ */ jsx("div", {
-						className: "w-[300px] shrink-0",
-						children: renderCell({
+				ungroupedCells.length === 0 ? null : renderRow({
+					className: "pb-1",
+					renderColumn: (column) => {
+						const cell = ungroupedCells.find((candidate) => columnKey(candidate.coordinate.column) === columnKey(column));
+						return cell === void 0 ? null : /* @__PURE__ */ jsx(Fragment, { children: renderCell({
 							cell,
 							count: cell.rows.length,
 							laneValue: null
-						})
-					}, columnKey(cell.coordinate.column)))
+						}) });
+					},
+					renderFoldedBand: (band, span) => foldedCell(band, span, ungroupedCells, null)
 				}),
 				matrix.lanes.map((lane) => {
 					if (lane.type === "none") return null;
 					const { group } = lane;
 					const cells = cellsByLaneValue.get(group.value) ?? [];
-					const count = cells.reduce((sum, cell) => sum + cell.rows.length, 0);
+					const count = rowsIn(cells);
 					const defaultCollapsed = count === 0 ? !expandedEmptyLaneValues.has(group.value) : collapsedLaneValues.has(group.value);
 					const collapsed = isLaneCollapsed ? isLaneCollapsed(group, count) : defaultCollapsed;
+					const cellFor = (column) => cells.find((candidate) => columnKey(candidate.coordinate.column) === columnKey(column));
 					return /* @__PURE__ */ jsxs("section", {
 						className: "border-border/60 border-b py-2 first:pt-0 last:border-b-0",
 						children: [
@@ -114,28 +266,32 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 									]
 								})
 							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "flex gap-3",
-								"aria-label": "Lane column counts",
-								children: cells.map((cell) => /* @__PURE__ */ jsx("div", {
-									className: "w-[300px] shrink-0 px-3",
-									"data-kanban-lane-column-count": cell.rows.length,
-									children: /* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-xs tabular-nums",
-										children: formatCount(cell.rows.length)
-									})
-								}, columnKey(cell.coordinate.column)))
+							renderRow({
+								label: "Lane column counts",
+								renderColumn: (column) => {
+									const columnRows = cellFor(column)?.rows.length ?? 0;
+									return /* @__PURE__ */ jsx("div", {
+										className: "px-3",
+										"data-kanban-lane-column-count": columnRows,
+										children: /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground text-xs tabular-nums",
+											children: formatCount(columnRows)
+										})
+									});
+								},
+								renderFoldedBand: (_band, span) => foldedCount(span, cells)
 							}),
-							!collapsed && /* @__PURE__ */ jsx("div", {
-								className: "flex gap-3 pb-1",
-								children: cells.map((cell) => /* @__PURE__ */ jsx("div", {
-									className: "w-[300px] shrink-0",
-									children: renderCell({
+							!collapsed && renderRow({
+								className: "pb-1",
+								renderColumn: (column) => {
+									const cell = cellFor(column);
+									return cell === void 0 ? null : /* @__PURE__ */ jsx(Fragment, { children: renderCell({
 										cell,
 										count: cell.rows.length,
 										laneValue: group.value
-									})
-								}, columnKey(cell.coordinate.column)))
+									}) });
+								},
+								renderFoldedBand: (band, span) => foldedCell(band, span, cells, group.value)
 							})
 						]
 					}, groupValueKey(group.value));
@@ -145,5 +301,38 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 		})
 	});
 };
+/**
+* The narrow slot a folded band occupies in a row. A pointer resting on it
+* for `KANBAN_BAND_PEEK_DELAY_MS` peeks the band open; leaving ends the peek
+* and cancels a pending one, so a drag passing over it does not unfold it.
+* The pointer must enter the slot after it appeared: a band folded under a
+* resting pointer does not peek straight back open.
+*/
+const FoldedBandSlot = ({ band, children, className, onPeek, onPeekEnd }) => {
+	const timer = useRef(null);
+	useEffect(() => () => {
+		if (timer.current !== null) clearTimeout(timer.current);
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		"data-kanban-band": band.id,
+		"data-kanban-band-collapsed": "",
+		onPointerMove: () => {
+			if (timer.current !== null) return;
+			timer.current = setTimeout(() => {
+				timer.current = null;
+				onPeek(band.id);
+			}, 400);
+		},
+		onPointerLeave: () => {
+			if (timer.current !== null) {
+				clearTimeout(timer.current);
+				timer.current = null;
+			}
+			onPeekEnd();
+		},
+		children
+	});
+};
 //#endregion
-export { KanbanSubgroupBoard };
+export { KANBAN_BAND_PEEK_DELAY_MS, KanbanSubgroupBoard };

package/dist/lib/control-size.d.ts

@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
   readonly lg: "lg";
 }>;
 type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
-declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
+declare const CONTROL_SIZES: readonly ("sm" | "default" | "lg")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.16.1",
+  "version": "0.17.1",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",