@stll/ui 0.8.0 → 0.9.0

package/README.md

@@ -11,7 +11,7 @@ cannot reach into product code by accident. Lint enforces that boundary; the
 export map below is what "part of the design system" means.
 
 Peer dependencies: `react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4),
-`@dnd-kit/core`, and `@dnd-kit/sortable`.
+`@dnd-kit/core`, `@dnd-kit/sortable`, and `@tanstack/react-virtual`.
 
 ## Import
 
@@ -58,10 +58,11 @@ spellings land on the same module for as long as they both exist.
 
 ## Sortable boards
 
-`@stll/ui/kanban` provides input and accessibility primitives only; the caller
-keeps item identifiers, order changes, and persisted mutations. Wrap the board
-in `KanbanSortableBoard`, render sortable items through `useKanbanSortable`,
-and attach the returned bindings to `KanbanDragHandle`.
+`@stll/ui/kanban` provides board matrices, subgroup swimlanes, bounded virtual
+cells, and input/accessibility primitives. The caller keeps domain identifiers,
+card rendering, permissions, and persisted mutations. Wrap sortable boards in
+`KanbanSortableBoard`, render items through `useKanbanSortable`, and attach the
+returned bindings to `KanbanDragHandle`.
 
 ```tsx
 import {
@@ -100,6 +101,41 @@ auto-scroll options, and an `overlay` render function.
 `input: "keyboard"` and require source and target indices, so every move has a
 logical edge without relying on ambiguous geometry.
 
+For Group/Sub-group boards, build one canonical matrix and render it with the
+installable layout and virtual cell:
+
+```tsx
+import {
+  KanbanSubgroupBoard,
+  KanbanVirtualCell,
+  buildKanbanBoardMatrix,
+} from "@stll/ui/kanban";
+
+const matrix = buildKanbanBoardMatrix({
+  group,
+  subgroup,
+  rows,
+  resolveGroupValue,
+  uncategorizedLabel: "No value",
+});
+
+<KanbanSubgroupBoard
+  matrix={matrix}
+  renderColumnHeader={({ column, count }) => (
+    <ColumnHeader column={column} count={count} />
+  )}
+  renderLaneIdentity={({ group: lane }) => <Lane group={lane} />}
+  renderCell={({ cell }) => (
+    <KanbanVirtualCell
+      getRowKey={(row) => row.id}
+      pagination={{ type: "none" }}
+      renderRow={(row) => <Card row={row} />}
+      rows={cell.rows}
+    />
+  )}
+/>;
+```
+
 ## Styles
 
 No compiled CSS ships. The components carry Tailwind class names, so the

package/dist/index.d.ts

@@ -75,6 +75,9 @@ import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHori
 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, KanbanBoardCoordinate, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, orderKanbanCellsByColumns } from "./kanban/matrix.js";
+import { KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./kanban/subgroup-board.js";
+import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps } from "./kanban/virtual-cell.js";
 import "./kanban/index.js";
 import { getInitials } from "./lib/initials.js";
 import { cn, composeRefs } from "./lib/utils.js";
@@ -86,4 +89,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, ApplicationShell, type ApplicationShellProps, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, 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, 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_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, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, KanbanDragHandle, type KanbanDragHandleProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, 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 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 UseKanbanSortableOptions, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, 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, 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, ApplicationShell, type ApplicationShellProps, Avatar, AvatarFallback, AvatarImage, 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_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, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardCoordinate, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, 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 UseKanbanSortableOptions, UserText, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, 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, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

package/dist/index.js

@@ -73,6 +73,9 @@ import { KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, K
 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, orderKanbanCellsByColumns } from "./kanban/matrix.js";
+import { 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";
 import { ReviewAuthorAvatar, UNKNOWN_AUTHOR_LABEL } from "./review/review-author-avatar.js";
@@ -82,4 +85,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, ApplicationShell, Avatar, AvatarFallback, AvatarImage, 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_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, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardShell, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, 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, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, 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, 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, ApplicationShell, Avatar, AvatarFallback, AvatarImage, 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_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, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardShell, 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, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, 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, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

package/dist/kanban/grouping.d.ts

@@ -4,6 +4,7 @@ import { OptionColor } from "../lib/option-color.js";
 type KanbanGroupOption = {
   value: string;
   label: string;
+  image?: string | null | undefined;
   color?: string | undefined;
   colorBg?: string | undefined;
   optionColor?: OptionColor | undefined;
@@ -12,6 +13,7 @@ type KanbanGroupOption = {
 type KanbanGroup = {
   value: string | null;
   label: string;
+  image?: string | null | undefined;
   color?: string | undefined;
   colorBg?: string | undefined;
   optionColor?: OptionColor | undefined;

package/dist/kanban/grouping.js

@@ -62,6 +62,7 @@ const getKanbanGroups = (options, uncategorizedLabel) => {
 	const result = options.map((option) => ({
 		value: option.value,
 		label: option.label,
+		image: option.image,
 		color: option.color,
 		colorBg: option.colorBg,
 		optionColor: option.optionColor

package/dist/kanban/index.d.ts

@@ -5,4 +5,7 @@ import { KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, K
 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";
-export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, KanbanDragHandle, type KanbanDragHandleProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupingParams, type UseKanbanSortableOptions, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, isKanbanGroupingRenderable, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanSortable, useKanbanSortableSensors };
+import { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOARD_AXES, KanbanBoardAxis, KanbanBoardCell, KanbanBoardCoordinate, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, orderKanbanCellsByColumns } from "./matrix.js";
+import { KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./subgroup-board.js";
+import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps } from "./virtual-cell.js";
+export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardCoordinate, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, type UseKanbanSortableOptions, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, isKanbanGroupingRenderable, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanSortable, useKanbanSortableSensors };

package/dist/kanban/index.js

@@ -5,4 +5,7 @@ import { KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, K
 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";
-export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardShell, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, isKanbanGroupingRenderable, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanSortable, useKanbanSortableSensors };
+import { KANBAN_BOARD_AXES, buildKanbanBoardMatrix, createKanbanDropIntent, orderKanbanCellsByColumns } from "./matrix.js";
+import { KanbanSubgroupBoard } from "./subgroup-board.js";
+import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell } from "./virtual-cell.js";
+export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardShell, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, isKanbanGroupingRenderable, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanSortable, useKanbanSortableSensors };

package/dist/kanban/matrix.d.ts

@@ -0,0 +1,85 @@
+import { KanbanGroup, KanbanGrouping } from "./grouping.js";
+//#region src/kanban/matrix.d.ts
+/** Which axis of a board a grouping controls. */
+declare const KANBAN_BOARD_AXES: {
+  readonly group: "group";
+  readonly subgroup: "subgroup";
+};
+type KanbanBoardAxis = (typeof KANBAN_BOARD_AXES)[keyof typeof KANBAN_BOARD_AXES];
+/** The optional horizontal swimlane dimension is intentionally explicit. */
+type KanbanBoardLane = {
+  type: "none";
+} | {
+  group: KanbanGroup;
+  type: "group";
+};
+type KanbanBoardCoordinate = {
+  column: KanbanGroup;
+  lane: KanbanBoardLane;
+};
+type KanbanBoardCell<TRow> = {
+  coordinate: KanbanBoardCoordinate;
+  rows: TRow[];
+};
+/**
+ * The full, ordered cartesian board. Presentation may hide or collapse parts
+ * of it, but it must not derive cards independently: every board row is in
+ * exactly one cell here before that presentation step.
+ */
+type KanbanBoardMatrix<TRow> = {
+  cells: KanbanBoardCell<TRow>[];
+  columns: KanbanGroup[];
+  lanes: KanbanBoardLane[];
+  rows: TRow[];
+};
+type ResolveKanbanGroupValueParams<TRow, TProperty> = {
+  grouping: KanbanGrouping<TRow, TProperty>;
+  row: TRow;
+};
+type BuildKanbanBoardMatrixParams<TRow, TProperty> = {
+  /** The vertical board columns. This must be a renderable grouping. */
+  group: KanbanGrouping<TRow, TProperty>;
+  /** Optional horizontal swimlanes. `none` makes this a one-lane board. */
+  subgroup: KanbanGrouping<TRow, TProperty>;
+  rows: readonly TRow[];
+  uncategorizedLabel: string;
+  resolveGroupValue: (params: ResolveKanbanGroupValueParams<TRow, TProperty>) => string | null;
+};
+type OrderKanbanCellsByColumnsParams<TRow> = {
+  cells: readonly KanbanBoardCell<TRow>[];
+  columns: readonly KanbanGroup[];
+};
+/** Apply the visible header order to any lane's cells. */
+declare const orderKanbanCellsByColumns: <TRow>({ cells, columns }: OrderKanbanCellsByColumnsParams<TRow>) => KanbanBoardCell<TRow>[];
+/**
+ * Resolve the board's one source of placement truth.
+ *
+ * A subgroup never filters the primary board scope. A row outside a subgroup's
+ * declared values goes to its explicit No value lane, rather than disappearing.
+ */
+declare const buildKanbanBoardMatrix: <TRow, TProperty>({ group, subgroup, rows, uncategorizedLabel, resolveGroupValue }: BuildKanbanBoardMatrixParams<TRow, TProperty>) => KanbanBoardMatrix<TRow>;
+type KanbanDropAxisChange = {
+  groupBy: string;
+  value: string | null;
+};
+/** A complete, atomic move request for a domain mutation adapter. */
+type KanbanDropIntent<TCardId> = {
+  cardId: TCardId;
+  changes: readonly KanbanDropAxisChange[];
+  type: "move";
+};
+type CreateKanbanDropIntentParams<TRow, TProperty, TCardId> = {
+  cardId: TCardId;
+  group: KanbanGrouping<TRow, TProperty>;
+  source: KanbanBoardCoordinate;
+  subgroup: KanbanGrouping<TRow, TProperty>;
+  target: KanbanBoardCoordinate;
+};
+/**
+ * Builds a single mutation payload for a pointer, touch, or keyboard drop.
+ * Diagonal drops carry both changes together; an adapter must commit this
+ * intent atomically or reject it as a whole.
+ */
+declare const createKanbanDropIntent: <TRow, TProperty, TCardId>({ cardId, group, source, subgroup, target }: CreateKanbanDropIntentParams<TRow, TProperty, TCardId>) => KanbanDropIntent<TCardId> | null;
+//#endregion
+export { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOARD_AXES, KanbanBoardAxis, KanbanBoardCell, KanbanBoardCoordinate, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, orderKanbanCellsByColumns };

package/dist/kanban/matrix.js

@@ -0,0 +1,121 @@
+import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, selectKanbanRows } from "./grouping.js";
+import { panic } from "better-result";
+//#region src/kanban/matrix.ts
+/** Which axis of a board a grouping controls. */
+const KANBAN_BOARD_AXES = {
+	group: "group",
+	subgroup: "subgroup"
+};
+const optionValueKey = (value) => value === null ? "null" : `string:${value.length}:${value}`;
+/** Apply the visible header order to any lane's cells. */
+const orderKanbanCellsByColumns = ({ cells, columns }) => {
+	const orderByValue = new Map(columns.map((column, index) => [optionValueKey(column.value), index]));
+	const getColumnOrder = (cell) => {
+		return orderByValue.get(optionValueKey(cell.coordinate.column.value)) ?? panic("Visible Kanban cell has no column order");
+	};
+	return cells.filter((cell) => orderByValue.has(optionValueKey(cell.coordinate.column.value))).toSorted((left, right) => getColumnOrder(left) - getColumnOrder(right));
+};
+const cellKey = ({ column, lane }) => `${optionValueKey(column.value)}|${lane.type === "none" ? "none" : optionValueKey(lane.group.value)}`;
+const groupContainsValue = (groups, value) => groups.some((group) => group.value === value);
+const normalizeGroupValue = (groups, value) => groupContainsValue(groups, value) ? value : null;
+const getRenderableGroups = (grouping, uncategorizedLabel) => {
+	if (!isKanbanGroupingRenderable(grouping)) return [];
+	return getKanbanGroups(resolveKanbanGroupOptions(grouping), uncategorizedLabel);
+};
+const makeLanes = (subgroup, uncategorizedLabel) => {
+	if (subgroup.type === "none") return [{ type: "none" }];
+	return getRenderableGroups(subgroup, uncategorizedLabel).map((group) => ({
+		group,
+		type: "group"
+	}));
+};
+/**
+* Resolve the board's one source of placement truth.
+*
+* A subgroup never filters the primary board scope. A row outside a subgroup's
+* declared values goes to its explicit No value lane, rather than disappearing.
+*/
+const buildKanbanBoardMatrix = ({ group, subgroup, rows, uncategorizedLabel, resolveGroupValue }) => {
+	if (!isKanbanGroupingRenderable(group)) return {
+		cells: [],
+		columns: [],
+		lanes: [],
+		rows: []
+	};
+	const columns = getRenderableGroups(group, uncategorizedLabel);
+	const scopedRows = selectKanbanRows(rows, group);
+	const hasRenderableSubgroup = isKanbanGroupingRenderable(subgroup);
+	const lanes = hasRenderableSubgroup ? makeLanes(subgroup, uncategorizedLabel) : [{ type: "none" }];
+	const cells = [];
+	const cellsByKey = /* @__PURE__ */ new Map();
+	for (const lane of lanes) for (const column of columns) {
+		const coordinate = {
+			column,
+			lane
+		};
+		const cell = {
+			coordinate,
+			rows: []
+		};
+		cells.push(cell);
+		cellsByKey.set(cellKey(coordinate), cell);
+	}
+	for (const row of scopedRows) {
+		const columnValue = normalizeGroupValue(columns, resolveGroupValue({
+			grouping: group,
+			row
+		}));
+		const lane = !hasRenderableSubgroup ? { type: "none" } : {
+			group: {
+				value: normalizeGroupValue(lanes.filter((candidate) => candidate.type === "group").map((candidate) => candidate.group), resolveGroupValue({
+					grouping: subgroup,
+					row
+				})),
+				label: ""
+			},
+			type: "group"
+		};
+		const column = columns.find((candidate) => candidate.value === columnValue);
+		const resolvedLane = lane.type === "none" ? lane : lanes.find((candidate) => candidate.type === "group" && candidate.group.value === lane.group.value);
+		if (column === void 0 || resolvedLane === void 0) return panic("Kanban matrix cannot place a row in a declared cell");
+		const cell = cellsByKey.get(cellKey({
+			column,
+			lane: resolvedLane
+		}));
+		if (cell === void 0) return panic("Kanban matrix cell declaration is incomplete");
+		cell.rows.push(row);
+	}
+	return {
+		cells,
+		columns,
+		lanes,
+		rows: scopedRows
+	};
+};
+/**
+* Builds a single mutation payload for a pointer, touch, or keyboard drop.
+* Diagonal drops carry both changes together; an adapter must commit this
+* intent atomically or reject it as a whole.
+*/
+const createKanbanDropIntent = ({ cardId, group, source, subgroup, target }) => {
+	const groupBy = getKanbanGroupingPropertyId(group);
+	const subgroupBy = getKanbanGroupingPropertyId(subgroup);
+	if (groupBy === null || subgroupBy !== null && subgroupBy === groupBy) return null;
+	const changes = [];
+	if (source.column.value !== target.column.value) changes.push({
+		groupBy,
+		value: target.column.value
+	});
+	if (subgroupBy !== null && source.lane.type === "group" && target.lane.type === "group" && source.lane.group.value !== target.lane.group.value) changes.push({
+		groupBy: subgroupBy,
+		value: target.lane.group.value
+	});
+	if (changes.length === 0) return null;
+	return {
+		cardId,
+		changes,
+		type: "move"
+	};
+};
+//#endregion
+export { KANBAN_BOARD_AXES, buildKanbanBoardMatrix, createKanbanDropIntent, orderKanbanCellsByColumns };

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

@@ -0,0 +1,36 @@
+import { KanbanGroup } from "./grouping.js";
+import { KanbanBoardCell, KanbanBoardMatrix } from "./matrix.js";
+import { ReactNode } from "react";
+//#region src/kanban/subgroup-board.d.ts
+type KanbanSubgroupColumnHeaderContext = {
+  column: KanbanGroup;
+  count: number;
+};
+type KanbanSubgroupLaneIdentityContext = {
+  group: KanbanGroup;
+  count: number;
+};
+type KanbanSubgroupCellContext<TRow> = {
+  cell: KanbanBoardCell<TRow>;
+  laneValue: string | null;
+};
+type KanbanSubgroupCollapseControl = {
+  isLaneCollapsed?: undefined;
+  onLaneCollapsedChange?: undefined;
+} | {
+  isLaneCollapsed: (group: KanbanGroup, count: number) => boolean;
+  onLaneCollapsedChange: (group: KanbanGroup, collapsed: boolean) => void;
+};
+type KanbanSubgroupBoardProps<TRow> = {
+  matrix: KanbanBoardMatrix<TRow>;
+  renderColumnHeader: (context: KanbanSubgroupColumnHeaderContext) => ReactNode;
+  renderLaneIdentity: (context: KanbanSubgroupLaneIdentityContext) => ReactNode;
+  renderCell: (context: KanbanSubgroupCellContext<TRow>) => ReactNode;
+  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;
+//#endregion
+export { KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext };

package/dist/kanban/subgroup-board.js

@@ -0,0 +1,115 @@
+import { cn } from "../lib/utils.js";
+import { DirectionalIcon } from "../components/directional-icon.js";
+import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+//#region src/kanban/subgroup-board.tsx
+const groupValueKey = (value) => value === null ? "null" : `value:${value.length}:${value}`;
+/** Reusable swimlane layout over the canonical two-axis Kanban matrix. */
+const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, footer, className }) => {
+	const [collapsedLaneValues, setCollapsedLaneValues] = useState(() => /* @__PURE__ */ new Set());
+	const [expandedEmptyLaneValues, setExpandedEmptyLaneValues] = useState(() => /* @__PURE__ */ new Set());
+	const { cellsByLaneValue, countByColumnValue } = useMemo(() => {
+		const laneCells = /* @__PURE__ */ new Map();
+		const columnCounts = /* @__PURE__ */ new Map();
+		for (const cell of matrix.cells) {
+			columnCounts.set(cell.coordinate.column.value, (columnCounts.get(cell.coordinate.column.value) ?? 0) + cell.rows.length);
+			if (cell.coordinate.lane.type === "none") continue;
+			const laneValue = cell.coordinate.lane.group.value;
+			const currentLaneCells = laneCells.get(laneValue);
+			if (currentLaneCells) currentLaneCells.push(cell);
+			else laneCells.set(laneValue, [cell]);
+		}
+		return {
+			cellsByLaneValue: laneCells,
+			countByColumnValue: columnCounts
+		};
+	}, [matrix.cells]);
+	const setLaneCollapsed = (group, count, collapsed) => {
+		if (onLaneCollapsedChange) {
+			onLaneCollapsedChange(group, collapsed);
+			return;
+		}
+		const value = group.value;
+		if (count === 0) {
+			setExpandedEmptyLaneValues((current) => {
+				const next = new Set(current);
+				if (collapsed) next.delete(value);
+				else next.add(value);
+				return next;
+			});
+			return;
+		}
+		setCollapsedLaneValues((current) => {
+			const next = new Set(current);
+			if (collapsed) next.add(value);
+			else next.delete(value);
+			return next;
+		});
+	};
+	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(column.value) ?? 0
+						})
+					}, groupValueKey(column.value)))
+				}),
+				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 defaultCollapsed = count === 0 ? !expandedEmptyLaneValues.has(group.value) : collapsedLaneValues.has(group.value);
+					const collapsed = isLaneCollapsed ? isLaneCollapsed(group, count) : defaultCollapsed;
+					return /* @__PURE__ */ jsxs("section", {
+						className: "border-border/60 border-b py-2 first:pt-0 last:border-b-0",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "bg-background/95 sticky start-0 z-10 flex min-h-11 items-center backdrop-blur-sm",
+							children: /* @__PURE__ */ jsxs("button", {
+								"aria-expanded": !collapsed,
+								className: "hover:bg-muted/60 flex min-h-11 items-center gap-2 rounded-lg px-2 text-start transition-[background-color]",
+								onClick: () => setLaneCollapsed(group, count, !collapsed),
+								type: "button",
+								children: [
+									/* @__PURE__ */ jsx(DirectionalIcon, {
+										className: cn("text-muted-foreground size-4 shrink-0 transition-transform", collapsed && "-rotate-90"),
+										flip: collapsed,
+										icon: ChevronDownIcon
+									}),
+									renderLaneIdentity({
+										group,
+										count
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-xs tabular-nums",
+										children: formatCount(count)
+									})
+								]
+							})
+						}), !collapsed && /* @__PURE__ */ jsx("div", {
+							className: "flex gap-3 pb-1",
+							children: cells.map((cell) => /* @__PURE__ */ jsx("div", {
+								className: "w-[300px] shrink-0",
+								children: renderCell({
+									cell,
+									laneValue: group.value
+								})
+							}, groupValueKey(cell.coordinate.column.value)))
+						})]
+					}, groupValueKey(group.value));
+				}),
+				footer
+			]
+		})
+	});
+};
+//#endregion
+export { KanbanSubgroupBoard };

package/dist/kanban/virtual-cell.d.ts

@@ -0,0 +1,33 @@
+import { Key, ReactNode, RefObject } from "react";
+//#region src/kanban/virtual-cell.d.ts
+declare const KANBAN_VIRTUAL_CELL_PAGINATION: {
+  readonly NONE: "none";
+  readonly CURSOR: "cursor";
+};
+type KanbanVirtualCellPagination = {
+  type: "none";
+} | {
+  type: "cursor";
+  hasMore: boolean;
+  loading: boolean;
+  pageKey: string | number;
+  onRequestMore: () => void;
+};
+type KanbanVirtualCellProps<TRow> = {
+  rows: readonly TRow[];
+  getRowKey: (row: TRow) => Key;
+  renderRow: (row: TRow) => ReactNode;
+  pagination: KanbanVirtualCellPagination;
+  containerRef?: RefObject<HTMLDivElement | null> | undefined;
+  active?: boolean | undefined;
+  backgroundColor?: string | undefined;
+  footer?: ReactNode;
+  estimateSize?: number | undefined;
+  overscan?: number | undefined;
+  loadMoreThreshold?: number | undefined;
+  className?: string | undefined;
+};
+/** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
+declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, containerRef, active, backgroundColor, footer, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
+//#endregion
+export { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps };

package/dist/kanban/virtual-cell.js

@@ -0,0 +1,58 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/kanban/virtual-cell.tsx
+const DEFAULT_ESTIMATE_SIZE_PX = 128;
+const DEFAULT_OVERSCAN = 8;
+const DEFAULT_LOAD_MORE_THRESHOLD_PX = 200;
+const KANBAN_VIRTUAL_CELL_PAGINATION = {
+	NONE: "none",
+	CURSOR: "cursor"
+};
+/** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
+const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, containerRef, active = false, backgroundColor, footer, estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
+	const internalRef = useRef(null);
+	const scrollRef = containerRef ?? internalRef;
+	const requestedPageKeyRef = useRef(null);
+	const virtualizer = useVirtualizer({
+		count: rows.length,
+		estimateSize: () => estimateSize,
+		getItemKey: (index) => {
+			const row = rows.at(index);
+			return row === void 0 ? index : getRowKey(row);
+		},
+		getScrollElement: () => scrollRef.current,
+		overscan
+	});
+	const handleScroll = ({ currentTarget }) => {
+		if (pagination.type !== "cursor" || !pagination.hasMore || pagination.loading) return;
+		if (currentTarget.scrollHeight - currentTarget.scrollTop - currentTarget.clientHeight > loadMoreThreshold) return;
+		if (requestedPageKeyRef.current === pagination.pageKey) return;
+		requestedPageKeyRef.current = pagination.pageKey;
+		pagination.onRequestMore();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("bg-muted/20 max-h-[min(60vh,40rem)] min-h-20 overflow-y-auto overscroll-y-contain rounded-xl p-2 transition-[background-color,outline-color]", active && "bg-primary/5 ring-primary/50 ring-2", className),
+		onScroll: handleScroll,
+		ref: scrollRef,
+		style: backgroundColor ? { backgroundColor } : void 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "relative",
+			style: { height: virtualizer.getTotalSize() },
+			children: virtualizer.getVirtualItems().map((virtualRow) => {
+				const row = rows.at(virtualRow.index);
+				if (row === void 0) return null;
+				return /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-x-0 top-0 pb-2",
+					"data-index": virtualRow.index,
+					ref: virtualizer.measureElement,
+					style: { transform: `translateY(${virtualRow.start}px)` },
+					children: renderRow(row)
+				}, getRowKey(row));
+			})
+		}), footer]
+	});
+};
+//#endregion
+export { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "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",
@@ -557,6 +557,7 @@
     "prepack": "bun run build"
   },
   "dependencies": {
+    "better-result": "3.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "input-otp": "^1.5.0",
@@ -571,6 +572,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@playwright/test": "^1.62.0",
     "@stll/typescript-config": "0.0.0",
+    "@tanstack/react-virtual": "^3.14.10",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "bun-types": "1.4.0",
@@ -586,6 +588,7 @@
     "@base-ui/react": "^1.7.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
+    "@tanstack/react-virtual": "^3.14.10",
     "react": ">=19",
     "react-dom": ">=19",
     "tailwindcss": "^4.3.0"