@stll/ui 0.2.0 → 0.3.0

package/dist/components/outline-rail.d.ts

@@ -3,9 +3,13 @@ import { ReactNode, RefObject } from "react";
 type OutlineItem = {
   id: string;
   label: string;
+  /** What the entry contains, after the label that names it. The label
+   *  stays whole; the title is what truncates when the row is narrow. */
+  title?: string;
   /** Nesting depth among included items; drives indent + tick taper. */
   level: number;
-  /** Optional trailing annotation in the panel (e.g. a page number). */
+  /** Optional trailing annotation in the panel (e.g. a page number or a
+   *  provision range); never truncated. */
   meta?: string;
   /** Optional CSS custom-property name colouring this entry's tick + chip
    *  (e.g. "--option-blue"). Defaults to the neutral foreground. */

package/dist/components/outline-rail.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region src/components/outline-rail.tsx
 /**
@@ -23,6 +23,8 @@ const TICK_BASE_WIDTH = 6;
 const TICK_LEVEL_STEP = 2;
 const TICK_MAX_LEVEL = 5;
 const RAIL_MAX_TICKS = 40;
+/** The entry as one line of text: label, then its title when it has one. */
+const entryText = (item) => item.title === void 0 ? item.label : `${item.label} ${item.title}`;
 const tickWidth = (level) => {
 	return TICK_BASE_WIDTH + (TICK_MAX_LEVEL - Math.min(Math.max(level, 0), TICK_MAX_LEVEL)) * TICK_LEVEL_STEP;
 };
@@ -199,7 +201,8 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 		}
 		onJumpRef.current(id, container);
 	}, [activeId, scrollContainerRef]);
-	const toggleCollapse = useCallback((id, level, rowEl) => {
+	const toggleCollapse = useCallback((id, rowEl) => {
+		const rowTop = rowEl?.getBoundingClientRect().top;
 		setToggled((prev) => new Set(prev).add(id));
 		setCollapsed((prev) => {
 			const next = new Set(prev);
@@ -209,9 +212,8 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 		});
 		requestAnimationFrame(() => {
 			const panel = panelRef.current;
-			if (!panel || !rowEl) return;
-			const target = panel.getBoundingClientRect().top + level * ROW_H;
-			panel.scrollTop += rowEl.getBoundingClientRect().top - target;
+			if (!panel || !rowEl || rowTop === void 0) return;
+			panel.scrollTop += rowEl.getBoundingClientRect().top - rowTop;
 		});
 	}, []);
 	const openPanel = useCallback(() => {
@@ -261,7 +263,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 					"aria-expanded": !isCollapsed,
 					"aria-label": isCollapsed ? "Expand" : "Collapse",
 					className: "text-muted-foreground hover:text-foreground flex size-5 shrink-0 items-center justify-center",
-					onClick: (event) => toggleCollapse(node.item.id, node.item.level, event.currentTarget.parentElement),
+					onClick: (event) => toggleCollapse(node.item.id, event.currentTarget.parentElement),
 					style: { marginInlineStart: indent - 4 },
 					type: "button",
 					children: /* @__PURE__ */ jsx(Chevron, { open: !isCollapsed })
@@ -277,12 +279,21 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 				}),
 				/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 					render: /* @__PURE__ */ jsx("button", {
-						className: cn("min-w-0 flex-1 truncate py-1.5 text-start text-[13px] leading-snug", rowTextClass(isActive, hasChildren)),
+						className: cn("flex min-w-0 flex-1 items-baseline gap-1.5 py-1.5 text-start text-[13px] leading-snug", rowTextClass(isActive, hasChildren)),
 						onClick: () => jumpTo(node.item.id),
 						type: "button"
 					}),
-					children: node.item.label
-				}), /* @__PURE__ */ jsx(TooltipPopup, { children: node.item.label })] }),
+					children: node.item.title === void 0 ? /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: node.item.label
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "shrink-0 font-medium",
+						children: node.item.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate font-normal",
+						children: node.item.title
+					})] })
+				}), /* @__PURE__ */ jsx(TooltipPopup, { children: entryText(node.item) })] }),
 				node.item.meta !== void 0 && /* @__PURE__ */ jsx("span", {
 					className: "text-foreground-placeholder shrink-0 ps-2 text-[11px] tabular-nums",
 					children: node.item.meta

package/dist/data-table/index.d.ts

@@ -0,0 +1,2 @@
+import { TableColumnCapabilities, TableColumnDescriptor, TableSchema, duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds } from "./schema.js";
+export { type TableColumnCapabilities, type TableColumnDescriptor, type TableSchema, duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds };

package/dist/data-table/index.js

@@ -0,0 +1,2 @@
+import { duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds } from "./schema.js";
+export { duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds };

package/dist/data-table/schema.d.ts

@@ -0,0 +1,70 @@
+//#region src/data-table/schema.d.ts
+/**
+ * A table's schema: which columns exist, what each can do, and how wide it
+ * starts. Not how a cell draws — that is the caller's, and it is the reason
+ * this module holds no React.
+ *
+ * The split matters because "which columns does this view have, and which of
+ * them can be sorted, hidden, resized or pinned" is a question about data, and
+ * a question about data can be answered by a test. It used to be answerable
+ * only by rendering the table and asking TanStack.
+ */
+/** What a reader may do to a column. */
+type TableColumnCapabilities = {
+  sort: boolean;
+  hide: boolean;
+  resize: boolean;
+  pin: boolean;
+};
+/**
+ * One column.
+ *
+ * `render` is whatever the caller needs to draw the column: this module never
+ * looks inside it, which is what keeps the schema free of any idea about what
+ * a row holds.
+ */
+type TableColumnDescriptor<TRender> = {
+  /** Unique within the schema, and stable across renders. */
+  id: string;
+  /** Header text. Empty for a column whose header draws no text. */
+  label: string;
+  render: TRender;
+  /** Starting width, in pixels. */
+  size: number;
+  /** Narrowest this column may be resized to; the schema's default if absent. */
+  minSize?: number | undefined;
+  capabilities: TableColumnCapabilities;
+  /**
+   * Metadata columns read quieter than content ones; a utility column
+   * (a selection checkbox, an add-column affordance) draws no value at all.
+   */
+  emphasis: "content" | "metadata" | "utility";
+};
+type TableSchema<TRender> = {
+  columns: readonly TableColumnDescriptor<TRender>[];
+  /** Narrowest any column may be resized to. */
+  defaultMinSize: number;
+};
+/** Every column a schema declares, in order. */
+declare const tableColumnIds: <TRender>(schema: TableSchema<TRender>) => string[];
+declare const sortableColumnIds: <TRender>(schema: TableSchema<TRender>) => string[];
+declare const hideableColumnIds: <TRender>(schema: TableSchema<TRender>) => string[];
+declare const findTableColumn: <TRender>(schema: TableSchema<TRender>, id: string) => TableColumnDescriptor<TRender> | undefined;
+/**
+ * Which columns a view shows.
+ *
+ * A column that cannot be hidden stays visible whatever the stored hidden list
+ * says, so a stale list — a column that lost its hide capability while it was
+ * hidden — cannot strand the table without its select or name column.
+ */
+declare const visibleColumnIds: <TRender>(schema: TableSchema<TRender>, hiddenColumnIds: readonly string[]) => string[];
+/** The starting width of every column, keyed by id. */
+declare const tableColumnSizing: <TRender>(schema: TableSchema<TRender>) => Record<string, number>;
+/**
+ * A duplicate column id silently drops a column: the table keys by id, so the
+ * second declaration wins and the first disappears with no error anywhere.
+ * Callers that build a schema from user data (a property list) check here.
+ */
+declare const duplicateColumnIds: <TRender>(schema: TableSchema<TRender>) => string[];
+//#endregion
+export { TableColumnCapabilities, TableColumnDescriptor, TableSchema, duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds };

package/dist/data-table/schema.js

@@ -0,0 +1,40 @@
+//#region src/data-table/schema.ts
+/** Every column a schema declares, in order. */
+const tableColumnIds = (schema) => schema.columns.map((column) => column.id);
+const withCapability = (schema, capability) => schema.columns.filter((column) => column.capabilities[capability]).map((column) => column.id);
+const sortableColumnIds = (schema) => withCapability(schema, "sort");
+const hideableColumnIds = (schema) => withCapability(schema, "hide");
+const findTableColumn = (schema, id) => schema.columns.find((column) => column.id === id);
+/**
+* Which columns a view shows.
+*
+* A column that cannot be hidden stays visible whatever the stored hidden list
+* says, so a stale list — a column that lost its hide capability while it was
+* hidden — cannot strand the table without its select or name column.
+*/
+const visibleColumnIds = (schema, hiddenColumnIds) => {
+	const hidden = new Set(hiddenColumnIds);
+	return schema.columns.filter((column) => !column.capabilities.hide || !hidden.has(column.id)).map((column) => column.id);
+};
+/** The starting width of every column, keyed by id. */
+const tableColumnSizing = (schema) => {
+	const sizing = {};
+	for (const column of schema.columns) sizing[column.id] = column.size;
+	return sizing;
+};
+/**
+* A duplicate column id silently drops a column: the table keys by id, so the
+* second declaration wins and the first disappears with no error anywhere.
+* Callers that build a schema from user data (a property list) check here.
+*/
+const duplicateColumnIds = (schema) => {
+	const seen = /* @__PURE__ */ new Set();
+	const duplicates = /* @__PURE__ */ new Set();
+	for (const column of schema.columns) {
+		if (seen.has(column.id)) duplicates.add(column.id);
+		seen.add(column.id);
+	}
+	return [...duplicates];
+};
+//#endregion
+export { duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds };

package/dist/index.d.ts

@@ -45,6 +45,7 @@ import { SortDirection, SortableHead, Table, TableBody, TableCaption, TableCell,
 import { Tabs, TabsContent as TabsPanel, TabsList, TabsTab } from "./components/tabs.js";
 import { AnchoredToastProvider, TOAST_RIGHT_OFFSET_VAR, ToastPosition, ToastProvider, stellaToast } from "./components/toast.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
+import { TableColumnCapabilities, TableColumnDescriptor, TableSchema, duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds } from "./data-table/schema.js";
 import { containedEventHandler, containedHandler } from "./hooks/use-contained-handler.js";
 import { contentDir, isStructuredInputType, useContentDir } from "./hooks/use-content-dir.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
@@ -55,6 +56,12 @@ import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZ
 import { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, shouldForceSidebarCollapsed } from "./inspector/pane-width.js";
 import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parsePersistedPaneWidth, resolveDragWidth, resolveKeyboardWidth, useInspectorPaneWidth } from "./inspector/use-pane-width.js";
 import "./inspector/index.js";
+import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./kanban/card-properties.js";
+import { KanbanCardShell, KanbanCardShellProps } from "./kanban/card-shell.js";
+import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./kanban/column-header.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 "./kanban/index.js";
 import { cn, composeRefs } from "./lib/utils.js";
 import { getFirstWeekday, getLocaleWeekInfo, getWeekendDays } from "./lib/week.js";
-export { 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, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, 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, 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, InspectorTitle, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, 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, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, 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, UserText, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, getFirstWeekday, getLocaleWeekInfo, getWeekendDays, isStructuredInputType, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, stellaToast, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth };
+export { 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, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, 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, DEFAULT_PRESETS, 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, InspectorTitle, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanSchema, 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 ResolveKanbanGroupingParams, 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, 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, UserText, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getLocaleWeekInfo, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, optionColors, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth, visibleColumnIds };

package/dist/index.js

@@ -49,6 +49,7 @@ import { StellaWordmarkLatin } from "./components/stella-wordmark.js";
 import { SortableHead, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/table.js";
 import { Tabs, TabsContent as TabsPanel, TabsList, TabsTab } from "./components/tabs.js";
 import { AnchoredToastProvider, TOAST_RIGHT_OFFSET_VAR, ToastProvider, stellaToast } from "./components/toast.js";
+import { duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds } from "./data-table/schema.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
 import { useViewportWidth } from "./hooks/use-viewport-width.js";
 import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX } from "./inspector/layout-tokens.js";
@@ -56,4 +57,9 @@ import { Inspector, InspectorActions, InspectorContent, InspectorDescription, In
 import { InspectorDock } from "./inspector/dock.js";
 import { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, shouldForceSidebarCollapsed } from "./inspector/pane-width.js";
 import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parsePersistedPaneWidth, resolveDragWidth, resolveKeyboardWidth, useInspectorPaneWidth } from "./inspector/use-pane-width.js";
-export { 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, Avatar, AvatarFallback, AvatarImage, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, 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, 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, InspectorTitle, 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, 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, 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, UserText, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, getFirstWeekday, getLocaleWeekInfo, getWeekendDays, isStructuredInputType, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, stellaToast, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth };
+import { selectKanbanCardFieldIds } from "./kanban/card-properties.js";
+import { KanbanCardShell } from "./kanban/card-shell.js";
+import { KanbanColumnHeader } from "./kanban/column-header.js";
+import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
+import { emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
+export { 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, Avatar, AvatarFallback, AvatarImage, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, 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, 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, InspectorTitle, KanbanCardShell, KanbanColumnHeader, 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, 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, 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, UserText, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getLocaleWeekInfo, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, optionColors, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth, visibleColumnIds };

package/dist/kanban/card-properties.d.ts

@@ -0,0 +1,27 @@
+//#region src/kanban/card-properties.d.ts
+/**
+ * Which properties a kanban card renders as values.
+ *
+ * A card draws some fields itself — a title, a badge row, a footer — and the
+ * rest as generic property values. The split used to be a chain of literal id
+ * comparisons inside the card component, which meant the card knew every id the
+ * board could hold. Here the caller names its reserved ids once and vetoes the
+ * rest through a predicate.
+ */
+type KanbanCardFieldSelection = {
+  /** Field ids the card renders itself, so they are not repeated as values. */
+  reservedFieldIds: readonly string[];
+  /**
+   * Vetoes a field the board could render but this card should not (a
+   * system-computed property whose value the column already conveys, say).
+   * Omit to render every unreserved field.
+   */
+  isRenderable?: ((fieldId: string) => boolean) | undefined;
+};
+/**
+ * The visible field ids a card renders as property values, in view order and
+ * without duplicates.
+ */
+declare const selectKanbanCardFieldIds: (visibleFieldIds: readonly string[], { reservedFieldIds, isRenderable }: KanbanCardFieldSelection) => string[];
+//#endregion
+export { KanbanCardFieldSelection, selectKanbanCardFieldIds };

package/dist/kanban/card-properties.js

@@ -0,0 +1,19 @@
+//#region src/kanban/card-properties.ts
+/**
+* The visible field ids a card renders as property values, in view order and
+* without duplicates.
+*/
+const selectKanbanCardFieldIds = (visibleFieldIds, { reservedFieldIds, isRenderable }) => {
+	const reserved = new Set(reservedFieldIds);
+	const seen = /* @__PURE__ */ new Set();
+	const selected = [];
+	for (const fieldId of visibleFieldIds) {
+		if (reserved.has(fieldId) || seen.has(fieldId)) continue;
+		seen.add(fieldId);
+		if (isRenderable && !isRenderable(fieldId)) continue;
+		selected.push(fieldId);
+	}
+	return selected;
+};
+//#endregion
+export { selectKanbanCardFieldIds };

package/dist/kanban/card-shell.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, RefObject } from "react";
+//#region src/kanban/card-shell.d.ts
+type KanbanCardShellProps = {
+  children: ReactNode;
+  /** Overlay slot pinned to the top-end corner (row actions). */
+  actions?: ReactNode;
+  /** Marks the card whose detail is currently open. */
+  active?: boolean | undefined;
+  /**
+   * Opens the card. Omit for a card with nothing to open: the shell then
+   * renders a plain region instead of a button, so a card that does nothing
+   * never lands in the tab order.
+   */
+  onOpen?: (() => void) | undefined;
+  /** The card body, for callers that measure or flash it. */
+  bodyRef?: RefObject<HTMLDivElement | null> | undefined;
+  /** The drag source the shell wraps the card in. */
+  dragRef?: RefObject<HTMLDivElement | null> | undefined;
+  className?: string | undefined;
+};
+/**
+ * The card chrome: border, hover lift, active ring, drag wrapper, and the
+ * keyboard contract for a card that opens something.
+ *
+ * The shell carries no idea of what a card holds. Every board rendered one of
+ * three near-identical copies of this markup, differing only in whether the
+ * card opened anything, which is why opening is a prop rather than a branch at
+ * each call site.
+ */
+declare const KanbanCardShell: ({ children, actions, active, onOpen, bodyRef, dragRef, className }: KanbanCardShellProps) => import("react").JSX.Element;
+//#endregion
+export { KanbanCardShell, KanbanCardShellProps };

package/dist/kanban/card-shell.js

@@ -0,0 +1,46 @@
+import { cn } from "../lib/utils.js";
+import { containedHandler } from "../hooks/use-contained-handler.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kanban/card-shell.tsx
+/**
+* The card chrome: border, hover lift, active ring, drag wrapper, and the
+* keyboard contract for a card that opens something.
+*
+* The shell carries no idea of what a card holds. Every board rendered one of
+* three near-identical copies of this markup, differing only in whether the
+* card opened anything, which is why opening is a prop rather than a branch at
+* each call site.
+*/
+const KanbanCardShell = ({ children, actions, active, onOpen, bodyRef, dragRef, className }) => {
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [children, actions] });
+	if (!onOpen) return /* @__PURE__ */ jsx("div", {
+		className: "group/card",
+		ref: dragRef,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(CARD_CLASS, active && ACTIVE_CLASS, className),
+			ref: bodyRef,
+			children: body
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "group/card",
+		ref: dragRef,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(CARD_CLASS, "cursor-pointer transition-shadow hover:shadow-md", active && ACTIVE_CLASS, className),
+			onClick: containedHandler(bodyRef, onOpen),
+			onKeyDown: (event) => {
+				if (event.key !== "Enter" && event.key !== " ") return;
+				event.preventDefault();
+				onOpen();
+			},
+			ref: bodyRef,
+			role: "button",
+			tabIndex: 0,
+			children: body
+		})
+	});
+};
+const CARD_CLASS = "bg-card relative block w-full rounded-lg border p-3 text-start shadow-xs";
+const ACTIVE_CLASS = "ring-primary/30 ring-2";
+//#endregion
+export { KanbanCardShell };

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

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+//#region src/kanban/column-header.d.ts
+type KanbanColumnHeaderProps = {
+  /** Colour swatch, or the control that changes it. */
+  swatch?: ReactNode;
+  /** The column name, or the editor that has taken its place. */
+  title: ReactNode;
+  /** Short text after the name, such as the card count the caller formatted. */
+  meta?: ReactNode;
+  /** Column calculation, rendered after the count. */
+  calculation?: ReactNode;
+  /** Drag affordance, revealed on hover over the column. */
+  dragHandle?: ReactNode;
+  /** Column menu. */
+  actions?: ReactNode;
+};
+/**
+ * The column header row: one rhythm for the swatch, the name, the count, the
+ * calculation, and the column's controls, so every board's header lines up.
+ */
+declare const KanbanColumnHeader: ({ swatch, title, meta, calculation, dragHandle, actions }: KanbanColumnHeaderProps) => import("react").JSX.Element;
+//#endregion
+export { KanbanColumnHeader, KanbanColumnHeaderProps };

package/dist/kanban/column-header.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kanban/column-header.tsx
+/**
+* The column header row: one rhythm for the swatch, the name, the count, the
+* calculation, and the column's controls, so every board's header lines up.
+*/
+const KanbanColumnHeader = ({ swatch, title, meta, calculation, dragHandle, actions }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex items-center gap-2 px-3 py-2",
+	children: [
+		swatch,
+		/* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-1 items-center gap-1.5 truncate",
+			children: [title, meta !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: meta
+			})]
+		}),
+		calculation,
+		dragHandle,
+		actions
+	]
+});
+//#endregion
+export { KanbanColumnHeader };

package/dist/kanban/grouping.d.ts

@@ -0,0 +1,84 @@
+import { OptionColor } from "../lib/option-color.js";
+//#region src/kanban/grouping.d.ts
+/** One column, before the uncategorized bucket is appended. */
+type KanbanGroupOption = {
+  value: string;
+  label: string;
+  color?: string | undefined;
+  colorBg?: string | undefined;
+  optionColor?: OptionColor | undefined;
+};
+/** A column, including the uncategorized bucket (`value: null`). */
+type KanbanGroup = {
+  value: string | null;
+  label: string;
+  color?: string | undefined;
+  colorBg?: string | undefined;
+  optionColor?: OptionColor | undefined;
+};
+/**
+ * A column source that is not a schema property, addressed by a reserved id.
+ *
+ * The board's columns are the caller's `options`, in the caller's order, so a
+ * built-in grouping is a data declaration rather than a branch this module has
+ * to know about.
+ */
+type KanbanBuiltInGroup<TRow> = {
+  /** Reserved group id, distinct from any property id. */
+  id: string;
+  /** Ordered columns, without the uncategorized bucket. */
+  options: readonly KanbanGroupOption[];
+  /**
+   * Narrows the board to the rows this grouping can place. Omit when every row
+   * belongs on the board.
+   */
+  selectRows?: ((rows: readonly TRow[]) => TRow[]) | undefined;
+};
+/**
+ * Everything the grouping needs to know about a board.
+ *
+ * `getPropertyOptions` returns `null` for a property that cannot carry columns,
+ * which keeps the decision — and the property model it depends on — with the
+ * caller.
+ */
+type KanbanSchema<TRow, TProperty> = {
+  builtInGroups: readonly KanbanBuiltInGroup<TRow>[];
+  properties: readonly TProperty[];
+  getPropertyId: (property: TProperty) => string;
+  getPropertyOptions: (property: TProperty) => readonly KanbanGroupOption[] | null;
+};
+type KanbanGrouping<TRow, TProperty> = {
+  type: "none";
+} | {
+  type: "built-in";
+  propertyId: string;
+  group: KanbanBuiltInGroup<TRow>;
+} | {
+  type: "property";
+  propertyId: string;
+  property: TProperty;
+  options: readonly KanbanGroupOption[];
+};
+type ResolveKanbanGroupingParams<TRow, TProperty> = {
+  /** The group-by id the view carries; empty means no grouping. */
+  groupBy: string;
+  schema: KanbanSchema<TRow, TProperty>;
+};
+/** Resolve a stored group-by id against a schema. */
+declare const resolveKanbanGrouping: <TRow, TProperty>({ groupBy, schema }: ResolveKanbanGroupingParams<TRow, TProperty>) => KanbanGrouping<TRow, TProperty>;
+declare const getKanbanGroupingPropertyId: <TRow, TProperty>(grouping: KanbanGrouping<TRow, TProperty>) => string | null;
+/**
+ * A grouping with no columns is not a board. A built-in grouping declares its
+ * columns up front, so an empty declaration is the signal that the board cannot
+ * be drawn; a property grouping always draws, even when the property has no
+ * options yet, because rows still land in the uncategorized bucket.
+ */
+declare const isKanbanGroupingRenderable: <TRow, TProperty>(grouping: KanbanGrouping<TRow, TProperty>) => boolean;
+/** The rows a grouping can place on the board, in their incoming order. */
+declare const selectKanbanRows: <TRow, TProperty>(rows: readonly TRow[], grouping: KanbanGrouping<TRow, TProperty>) => TRow[];
+/** The static column options for a grouping, excluding uncategorized. */
+declare const resolveKanbanGroupOptions: <TRow, TProperty>(grouping: KanbanGrouping<TRow, TProperty>) => readonly KanbanGroupOption[];
+/** 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 };

package/dist/kanban/grouping.js

@@ -0,0 +1,76 @@
+//#region src/kanban/grouping.ts
+/** Resolve a stored group-by id against a schema. */
+const resolveKanbanGrouping = ({ groupBy, schema }) => {
+	if (groupBy === "") return { type: "none" };
+	const builtIn = schema.builtInGroups.find((group) => group.id === groupBy);
+	if (builtIn !== void 0) return {
+		type: "built-in",
+		propertyId: groupBy,
+		group: builtIn
+	};
+	const property = schema.properties.find((candidate) => schema.getPropertyId(candidate) === groupBy);
+	if (property === void 0) return { type: "none" };
+	return {
+		type: "property",
+		propertyId: groupBy,
+		property,
+		options: schema.getPropertyOptions(property) ?? []
+	};
+};
+const getKanbanGroupingPropertyId = (grouping) => {
+	switch (grouping.type) {
+		case "none": return null;
+		case "built-in":
+		case "property": return grouping.propertyId;
+		default: return grouping;
+	}
+};
+/**
+* A grouping with no columns is not a board. A built-in grouping declares its
+* columns up front, so an empty declaration is the signal that the board cannot
+* be drawn; a property grouping always draws, even when the property has no
+* options yet, because rows still land in the uncategorized bucket.
+*/
+const isKanbanGroupingRenderable = (grouping) => {
+	switch (grouping.type) {
+		case "none": return false;
+		case "built-in": return grouping.group.options.length > 0;
+		case "property": return true;
+		default: return grouping;
+	}
+};
+/** The rows a grouping can place on the board, in their incoming order. */
+const selectKanbanRows = (rows, grouping) => {
+	switch (grouping.type) {
+		case "none": return [];
+		case "built-in": return grouping.group.selectRows ? grouping.group.selectRows(rows) : [...rows];
+		case "property": return [...rows];
+		default: return grouping;
+	}
+};
+/** The static column options for a grouping, excluding uncategorized. */
+const resolveKanbanGroupOptions = (grouping) => {
+	switch (grouping.type) {
+		case "none": return [];
+		case "built-in": return grouping.group.options;
+		case "property": return grouping.options;
+		default: return grouping;
+	}
+};
+/** Append the uncategorized bucket (null value) after the options. */
+const getKanbanGroups = (options, uncategorizedLabel) => {
+	const result = options.map((option) => ({
+		value: option.value,
+		label: option.label,
+		color: option.color,
+		colorBg: option.colorBg,
+		optionColor: option.optionColor
+	}));
+	result.push({
+		value: null,
+		label: uncategorizedLabel
+	});
+	return result;
+};
+//#endregion
+export { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows };

package/dist/kanban/index.d.ts

@@ -0,0 +1,5 @@
+import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./card-properties.js";
+import { KanbanCardShell, KanbanCardShellProps } from "./card-shell.js";
+import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./column-header.js";
+import { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
+export { type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanSchema, type ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows };

package/dist/kanban/index.js

@@ -0,0 +1,5 @@
+import { selectKanbanCardFieldIds } from "./card-properties.js";
+import { KanbanCardShell } from "./card-shell.js";
+import { KanbanColumnHeader } from "./column-header.js";
+import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
+export { KanbanCardShell, KanbanColumnHeader, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows };

package/dist/lib/option-color.d.ts

@@ -0,0 +1,28 @@
+//#region src/lib/option-color.d.ts
+/**
+ * The kit's colour token for user-chosen option colours.
+ *
+ * A token is either one of the sixteen named presets, which resolve to the
+ * theme's `--option-*` custom properties, or a six-character hex string, which
+ * resolves to a `color-mix` against the current background and foreground. The
+ * indirection is what keeps a stored colour theme-aware: nothing persists a
+ * literal colour the palette cannot re-tint.
+ *
+ * This lives in the kit rather than beside a data model because the resolver is
+ * pure presentation: it maps a token to CSS, and knows nothing about what the
+ * token was chosen for.
+ */
+/** Named preset or arbitrary 6-character hex colour (e.g. "FF0000"). */
+type OptionColor = "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "gray" | (string & Record<never, never>);
+type ColorVariants = {
+  background: string;
+  foreground: string;
+  color: string;
+};
+declare const emptyColor: ColorVariants;
+/** Resolve any OptionColor (named or hex) to CSS color variants. */
+declare const resolveOptionColor: (color: OptionColor) => ColorVariants;
+/** The 16 named preset color keys. */
+declare const optionColors: readonly OptionColor[];
+//#endregion
+export { ColorVariants, OptionColor, emptyColor, optionColors, resolveOptionColor };

package/dist/lib/option-color.js

@@ -0,0 +1,59 @@
+//#region src/lib/option-color.ts
+/** Named preset colors with CSS variable references. */
+const NAMED_COLORS = Object.freeze([
+	"red",
+	"orange",
+	"amber",
+	"yellow",
+	"lime",
+	"green",
+	"emerald",
+	"teal",
+	"cyan",
+	"sky",
+	"blue",
+	"indigo",
+	"violet",
+	"purple",
+	"fuchsia",
+	"gray"
+]);
+const optionVar = (name) => ({
+	background: `var(--option-${name}-bg)`,
+	foreground: `var(--option-${name}-fg)`,
+	color: `var(--option-${name})`
+});
+const hexVar = (hex) => ({
+	background: `color-mix(in srgb, #${hex} 12%, var(--background))`,
+	foreground: `color-mix(in srgb, #${hex} 50%, var(--foreground))`,
+	color: `#${hex}`
+});
+const namedColorsMap = {
+	red: optionVar("red"),
+	orange: optionVar("orange"),
+	amber: optionVar("amber"),
+	yellow: optionVar("yellow"),
+	lime: optionVar("lime"),
+	green: optionVar("green"),
+	emerald: optionVar("emerald"),
+	teal: optionVar("teal"),
+	cyan: optionVar("cyan"),
+	sky: optionVar("sky"),
+	blue: optionVar("blue"),
+	indigo: optionVar("indigo"),
+	violet: optionVar("violet"),
+	purple: optionVar("purple"),
+	fuchsia: optionVar("fuchsia"),
+	gray: optionVar("gray")
+};
+const emptyColor = optionVar("empty");
+/** Resolve any OptionColor (named or hex) to CSS color variants. */
+const resolveOptionColor = (color) => {
+	const namedColor = NAMED_COLORS.find((candidate) => candidate === color);
+	if (namedColor !== void 0) return namedColorsMap[namedColor];
+	return hexVar(color);
+};
+/** The 16 named preset color keys. */
+const optionColors = NAMED_COLORS;
+//#endregion
+export { emptyColor, optionColors, resolveOptionColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.2.0",
+  "version": "0.3.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",
@@ -81,6 +81,10 @@
       "types": "./dist/components/command.d.ts",
       "import": "./dist/components/command.js"
     },
+    "./data-table": {
+      "types": "./dist/data-table/index.d.ts",
+      "import": "./dist/data-table/index.js"
+    },
     "./date-picker-popover": {
       "types": "./dist/components/date-picker-popover.d.ts",
       "import": "./dist/components/date-picker-popover.js"
@@ -137,6 +141,10 @@
       "types": "./dist/components/menu.d.ts",
       "import": "./dist/components/menu.js"
     },
+    "./option-color": {
+      "types": "./dist/lib/option-color.d.ts",
+      "import": "./dist/lib/option-color.js"
+    },
     "./outline-rail": {
       "types": "./dist/components/outline-rail.d.ts",
       "import": "./dist/components/outline-rail.js"
@@ -249,6 +257,10 @@
       "types": "./dist/inspector/index.d.ts",
       "import": "./dist/inspector/index.js"
     },
+    "./kanban": {
+      "types": "./dist/kanban/index.d.ts",
+      "import": "./dist/kanban/index.js"
+    },
     "./theme.css": "./dist/styles/theme.css",
     "./components/accordion": {
       "types": "./dist/components/accordion.d.ts",