@stll/ui 0.5.2 → 0.6.0

package/README.md

@@ -10,7 +10,8 @@ be rendered and tested without a surrounding application — and a change to one
 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).
+Peer dependencies: `react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4),
+`@dnd-kit/core`, and `@dnd-kit/sortable`.
 
 ## Import
 
@@ -35,6 +36,50 @@ convenience; the subpaths are the real surface, and in-repo code uses those.
 minor. They will be removed after that; the export guard checks that both
 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`.
+
+```tsx
+import {
+  KanbanDragHandle,
+  KanbanSortableBoard,
+  KanbanSortableList,
+  useKanbanSortable,
+} from "@stll/ui/kanban";
+
+const Card = ({ id }: { id: string }) => {
+  const { dragHandle, setNodeRef } = useKanbanSortable({ id });
+  return (
+    <article ref={setNodeRef}>
+      <KanbanDragHandle bindings={dragHandle} label="Move card" />
+    </article>
+  );
+};
+
+<KanbanSortableBoard onDragEnd={handleDragEnd}>
+  <KanbanSortableList items={cardIds}>
+    {cardIds.map((id) => (
+      <Card id={id} key={id} />
+    ))}
+  </KanbanSortableList>
+</KanbanSortableBoard>;
+```
+
+The default sensors are mouse (8px movement), touch (150ms delay with 8px
+tolerance), and keyboard. Scroll containers retain `touch-action: auto`; only
+`KanbanDragHandle` disables touch panning. `KanbanSortableBoard` also accepts
+custom `sensors`, `accessibility`, collision detection, keyboard coordinates,
+auto-scroll options, and an `overlay` render function.
+
+`getKanbanHorizontalEdge` takes `input: "pointer"` with a current client-x and
+`direction: "ltr" | "rtl"` for mouse and touch input. Keyboard calls use
+`input: "keyboard"` and require source and target indices, so every move has a
+logical edge without relying on ambiguous geometry.
+
 ## Styles
 
 No compiled CSS ships. The components carry Tailwind class names, so the
@@ -67,7 +112,9 @@ and bidi isolation.
 
 ```sh
 bun run build       # tsdown, one output module per source module, with .d.ts
-bun run test        # bun test src
+bun run test        # unit tests
+bun run test:unit   # unit tests only
+bun run test:browser # Chromium mobile-input tests
 bun run typecheck
 bun run lint
 ```
@@ -76,6 +123,8 @@ bun run lint
 runs the publish path end to end: build, `prepare-publish`, `bun pm pack`, then
 resolves and imports every declared subpath from the built `dist`.
 
+`bun run pack:check` runs that published-package check for this package.
+
 This package is published, so a change here needs a changeset:
 
 ```sh

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

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

package/dist/components/input-group.d.ts

@@ -5,7 +5,7 @@ import * as React$1 from "react";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "block-end" | "block-start" | "inline-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/components/loader.d.ts

@@ -0,0 +1,36 @@
+import { ComponentProps } from "react";
+//#region src/components/loader.d.ts
+/**
+ * The one indeterminate loading indicator: the Stella mark breathing. Inline
+ * (`sm`) next to a control that is busy, `md` in a row, `lg` for a region.
+ * Content with a known shape gets a `Skeleton` instead, never a loader.
+ */
+declare const Loader: ({ label, size, className, ...props }: LoaderProps) => import("react").JSX.Element;
+/**
+ * A region whose content has no shape yet (a job running, a first fetch): the
+ * mark, one line saying what is happening, and at most one line of detail.
+ * Progress is stated in the detail text, never drawn as a bar that guesses.
+ */
+declare const LoaderState: ({ label, detail, hint, className }: LoaderStateProps) => import("react").JSX.Element;
+declare const LOADER_SIZE: {
+  readonly sm: "size-4";
+  readonly md: "size-6";
+  readonly lg: "size-8";
+};
+type LoaderSize = keyof typeof LOADER_SIZE;
+type LoaderProps = Omit<ComponentProps<"span">, "children"> & {
+  /** What is pending, for assistive technology ("Loading matters"). */
+  label: string;
+  size?: LoaderSize;
+};
+type LoaderStateProps = {
+  /** What is happening, shown as the title and announced. */
+  label: string;
+  /** A short line under the title: a name, a fraction, a percentage. */
+  detail?: string | undefined;
+  /** Expectation-setting copy, kept small. */
+  hint?: string | undefined;
+  className?: string | undefined;
+};
+//#endregion
+export { Loader, LoaderState };

package/dist/components/loader.js

@@ -0,0 +1,54 @@
+import { cn } from "../lib/utils.js";
+import { StellaMark } from "./stella-mark.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/loader.tsx
+/**
+* The one indeterminate loading indicator: the Stella mark breathing. Inline
+* (`sm`) next to a control that is busy, `md` in a row, `lg` for a region.
+* Content with a known shape gets a `Skeleton` instead, never a loader.
+*/
+const Loader = ({ label, size = "md", className, ...props }) => /* @__PURE__ */ jsx("span", {
+	"aria-busy": "true",
+	"aria-label": label,
+	className: cn("inline-flex shrink-0 items-center justify-center", className),
+	"data-slot": "loader",
+	role: "status",
+	...props,
+	children: /* @__PURE__ */ jsx(LoaderMark, { size })
+});
+/**
+* A region whose content has no shape yet (a job running, a first fetch): the
+* mark, one line saying what is happening, and at most one line of detail.
+* Progress is stated in the detail text, never drawn as a bar that guesses.
+*/
+const LoaderState = ({ label, detail, hint, className }) => /* @__PURE__ */ jsxs("div", {
+	"aria-busy": "true",
+	className: cn("flex h-full flex-col items-center justify-center gap-3 px-6 text-center", className),
+	"data-slot": "loader-state",
+	role: "status",
+	children: [/* @__PURE__ */ jsx(LoaderMark, { size: "lg" }), /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-foreground text-sm font-medium",
+				children: label
+			}),
+			detail !== void 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground truncate text-xs tabular-nums",
+				children: detail
+			}),
+			hint !== void 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-[11px] text-pretty",
+				children: hint
+			})
+		]
+	})]
+});
+const LOADER_SIZE = {
+	sm: "size-4",
+	md: "size-6",
+	lg: "size-8"
+};
+const LoaderMark = ({ size }) => /* @__PURE__ */ jsx(StellaMark, { className: cn("animate-loader text-muted-foreground motion-reduce:animate-none motion-reduce:opacity-70", LOADER_SIZE[size]) });
+//#endregion
+export { Loader, LoaderState };

package/dist/index.d.ts

@@ -66,10 +66,12 @@ 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 { KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanDragHandle, KanbanDragHandleProps, KanbanSortableBindings, KanbanSortableBoard, KanbanSortableBoardProps, KanbanSortableColumns, KanbanSortableColumnsProps, KanbanSortableList, KanbanSortableListProps, UseKanbanSortableOptions, useKanbanSortable, useKanbanSortableSensors } from "./kanban/sortable-interactions.js";
+import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./kanban/sortable-edge.js";
 import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
 import { ColorVariants, OptionColor, emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
 import { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
 import "./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, 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, 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, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, 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 RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, 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, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useLatest, useViewportWidth, visibleColumnIds };
+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, 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, 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, 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, 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, type UseKanbanSortableOptions, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

package/dist/index.js

@@ -65,7 +65,9 @@ import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parseP
 import { selectKanbanCardFieldIds } from "./kanban/card-properties.js";
 import { KanbanCardShell } from "./kanban/card-shell.js";
 import { KanbanColumnHeader } from "./kanban/column-header.js";
+import { KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, useKanbanSortable, useKanbanSortableSensors } from "./kanban/sortable-interactions.js";
+import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge } from "./kanban/sortable-edge.js";
 import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
 import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
 import { 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, 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, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, 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, ResourceCalendar, 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, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useLatest, useViewportWidth, visibleColumnIds };
+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, 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, 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, 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, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

package/dist/inspector/chrome.d.ts

@@ -30,7 +30,12 @@ declare const InspectorRail: ({ className, ...props }: React$1.ComponentProps<"n
 /** A rail cell: same height as every header strip and property row. */
 declare const InspectorRailCell: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const InspectorRailIconButton: ({ className, ...props }: React$1.ComponentProps<"button">) => React$1.JSX.Element;
-/** A square rail chip. Active state uses the same filled box in every dock. */
+/**
+ * A rail tab: one full-width row, bordered like every other rail cell, so
+ * the stack reads as boxes in every dock. The active tab carries a 2px spine
+ * on the rail's inline-start edge — the same affordance the workspace rail
+ * uses to say "this pane is showing that tab".
+ */
 declare const InspectorRailTab: ({ active, className, ...props }: React$1.ComponentProps<"button"> & {
   active?: boolean;
 }) => React$1.JSX.Element;

package/dist/inspector/chrome.js

@@ -1,5 +1,5 @@
 import { cn } from "../lib/utils.js";
-import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_HIT_TARGET_SIZE, TOOLBAR_ROW_HEIGHT } from "./layout-tokens.js";
+import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, TOOLBAR_ROW_HEIGHT } from "./layout-tokens.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/inspector/chrome.tsx
 /**
@@ -49,10 +49,15 @@ const InspectorRailIconButton = ({ className, ...props }) => /* @__PURE__ */ jsx
 	type: "button",
 	...props
 });
-/** A square rail chip. Active state uses the same filled box in every dock. */
+/**
+* A rail tab: one full-width row, bordered like every other rail cell, so
+* the stack reads as boxes in every dock. The active tab carries a 2px spine
+* on the rail's inline-start edge — the same affordance the workspace rail
+* uses to say "this pane is showing that tab".
+*/
 const InspectorRailTab = ({ active = false, className, ...props }) => /* @__PURE__ */ jsx("button", {
 	"aria-current": active ? "true" : void 0,
-	className: cn("group/tab relative flex items-center justify-center rounded-md transition-colors before:pointer-events-none before:absolute before:inset-2 before:rounded-md before:transition-colors before:content-[''] [&>*]:relative [&>*]:z-10", SIDE_RAIL_TAB_HIT_TARGET_SIZE, active ? "text-foreground before:bg-accent" : "text-muted-foreground hover:text-foreground hover:before:bg-accent", className),
+	className: cn("group/tab relative flex w-full shrink-0 items-center justify-center border-b transition-colors", TOOLBAR_ROW_HEIGHT, active ? "bg-background text-foreground before:bg-primary before:absolute before:inset-y-0 before:inset-s-0 before:w-0.5" : "text-muted-foreground hover:bg-accent hover:text-foreground", className),
 	"data-active": active ? "" : void 0,
 	"data-slot": "inspector-rail-tab",
 	type: "button",

package/dist/inspector/layout-tokens.d.ts

@@ -21,9 +21,8 @@ declare const SIDE_RAIL_WIDTH: "w-12";
  */
 declare const SIDE_RAIL_CONTAINER_CLASS: "bg-sidebar flex shrink-0 flex-col border-s border-e w-12";
 declare const SIDE_RAIL_ICON_BUTTON_SIZE: "size-8";
-declare const SIDE_RAIL_TAB_HIT_TARGET_SIZE: "size-12";
 declare const SIDE_RAIL_TAB_ICON_SIZE: "size-3.5";
 /** Two-column grid the key/value rows share. */
 declare const PROPERTY_ROW_GRID: "grid-cols-[8rem_minmax(0,1fr)]";
 //#endregion
-export { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_HIT_TARGET_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX };
+export { 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 };

package/dist/inspector/layout-tokens.js

@@ -21,9 +21,8 @@ const SIDE_RAIL_WIDTH = "w-12";
 */
 const SIDE_RAIL_CONTAINER_CLASS = `bg-sidebar flex shrink-0 flex-col border-s border-e ${SIDE_RAIL_WIDTH}`;
 const SIDE_RAIL_ICON_BUTTON_SIZE = "size-8";
-const SIDE_RAIL_TAB_HIT_TARGET_SIZE = "size-12";
 const SIDE_RAIL_TAB_ICON_SIZE = "size-3.5";
 /** Two-column grid the key/value rows share. */
 const PROPERTY_ROW_GRID = "grid-cols-[8rem_minmax(0,1fr)]";
 //#endregion
-export { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_HIT_TARGET_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX };
+export { 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 };

package/dist/kanban/index.d.ts

@@ -1,6 +1,8 @@
 import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./card-properties.js";
 import { KanbanCardShell, KanbanCardShellProps } from "./card-shell.js";
 import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./column-header.js";
+import { KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanDragHandle, KanbanDragHandleProps, KanbanSortableBindings, KanbanSortableBoard, KanbanSortableBoardProps, KanbanSortableColumns, KanbanSortableColumnsProps, KanbanSortableList, KanbanSortableListProps, UseKanbanSortableOptions, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
+import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./sortable-edge.js";
 import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
 import { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
-export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanSchema, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows };
+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 };

package/dist/kanban/index.js

@@ -1,6 +1,8 @@
 import { selectKanbanCardFieldIds } from "./card-properties.js";
 import { KanbanCardShell } from "./card-shell.js";
 import { KanbanColumnHeader } from "./column-header.js";
+import { KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
+import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge } from "./sortable-edge.js";
 import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
 import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
-export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KanbanCardShell, KanbanColumnHeader, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows };
+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 };

package/dist/kanban/sortable-edge.d.ts

@@ -0,0 +1,39 @@
+import { ClientRect } from "@dnd-kit/core";
+//#region src/kanban/sortable-edge.d.ts
+declare const KANBAN_HORIZONTAL_EDGES: {
+  readonly before: "before";
+  readonly after: "after";
+};
+type KanbanHorizontalEdge = (typeof KANBAN_HORIZONTAL_EDGES)[keyof typeof KANBAN_HORIZONTAL_EDGES];
+declare const KANBAN_DIRECTIONS: {
+  readonly ltr: "ltr";
+  readonly rtl: "rtl";
+};
+type KanbanDirection = (typeof KANBAN_DIRECTIONS)[keyof typeof KANBAN_DIRECTIONS];
+type KanbanPointerHorizontalEdgeOptions = {
+  input: "pointer";
+  /** The drag's current viewport x coordinate for mouse or touch input. */
+  currentClientX: number;
+  overRect: ClientRect;
+  /** Maps physical mouse and touch positions to the board's logical order. */
+  direction?: KanbanDirection | undefined;
+};
+type KanbanKeyboardHorizontalEdgeOptions = {
+  input: "keyboard";
+  /** The source item's position in logical board order. */
+  sourceIndex: number;
+  /** The target item's position in logical board order. */
+  targetIndex: number;
+};
+type KanbanHorizontalEdgeOptions = KanbanPointerHorizontalEdgeOptions | KanbanKeyboardHorizontalEdgeOptions;
+/**
+ * Resolves a horizontal insertion edge without consulting application data.
+ *
+ * Mouse and touch callers pass their current viewport coordinate. Keyboard
+ * callers pass source and target indices, making every logical move
+ * unambiguous. This deliberately avoids drag deltas, which include scroll
+ * reconciliation and are not viewport coordinates.
+ */
+declare const getKanbanHorizontalEdge: ({ ...options }: KanbanHorizontalEdgeOptions) => KanbanHorizontalEdge;
+//#endregion
+export { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, KanbanHorizontalEdgeOptions, getKanbanHorizontalEdge };

package/dist/kanban/sortable-edge.js

@@ -0,0 +1,27 @@
+//#region src/kanban/sortable-edge.ts
+const KANBAN_HORIZONTAL_EDGES = {
+	before: "before",
+	after: "after"
+};
+const KANBAN_DIRECTIONS = {
+	ltr: "ltr",
+	rtl: "rtl"
+};
+/**
+* Resolves a horizontal insertion edge without consulting application data.
+*
+* Mouse and touch callers pass their current viewport coordinate. Keyboard
+* callers pass source and target indices, making every logical move
+* unambiguous. This deliberately avoids drag deltas, which include scroll
+* reconciliation and are not viewport coordinates.
+*/
+const getKanbanHorizontalEdge = ({ ...options }) => {
+	if (options.input === "keyboard") return options.sourceIndex < options.targetIndex ? KANBAN_HORIZONTAL_EDGES.after : KANBAN_HORIZONTAL_EDGES.before;
+	const { currentClientX, direction = KANBAN_DIRECTIONS.ltr, overRect } = options;
+	const physicalEdge = currentClientX < getRectCenterX(overRect) ? KANBAN_HORIZONTAL_EDGES.before : KANBAN_HORIZONTAL_EDGES.after;
+	if (direction === KANBAN_DIRECTIONS.rtl) return physicalEdge === KANBAN_HORIZONTAL_EDGES.before ? KANBAN_HORIZONTAL_EDGES.after : KANBAN_HORIZONTAL_EDGES.before;
+	return physicalEdge;
+};
+const getRectCenterX = ({ left, width }) => left + width / 2;
+//#endregion
+export { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge };

package/dist/kanban/sortable-interactions.d.ts

@@ -0,0 +1,75 @@
+import { Button } from "../components/button.js";
+import * as React$1 from "react";
+import { AutoScrollOptions, CollisionDetection, DndContextProps, DragCancelEvent, DragEndEvent, DragOverlayProps, DragStartEvent, KeyboardCoordinateGetter, UniqueIdentifier } from "@dnd-kit/core";
+import { SortableContextProps, useSortable } from "@dnd-kit/sortable";
+//#region src/kanban/sortable-interactions.d.ts
+declare const KANBAN_MOUSE_ACTIVATION_DISTANCE = 8;
+declare const KANBAN_TOUCH_ACTIVATION_CONSTRAINT: {
+  readonly delay: 150;
+  readonly tolerance: 8;
+};
+type KanbanSortableBoardProps = {
+  children: React$1.ReactNode;
+  onDragEnd: (event: DragEndEvent) => void;
+  collisionDetection?: CollisionDetection | undefined;
+  keyboardCoordinates?: KeyboardCoordinateGetter | undefined;
+  autoScroll?: boolean | AutoScrollOptions | undefined;
+  /** Replaces the default mouse, touch, and keyboard sensors when supplied. */
+  sensors?: DndContextProps["sensors"] | undefined;
+  /** Overrides dnd-kit's screen-reader announcements when supplied. */
+  accessibility?: DndContextProps["accessibility"] | undefined;
+  onDragStart?: ((event: DragStartEvent) => void) | undefined;
+  onDragCancel?: ((event: DragCancelEvent) => void) | undefined;
+  /** Rendered in document.body while an item is active. */
+  overlay?: ((activeId: UniqueIdentifier | null) => React$1.ReactNode) | undefined;
+  overlayProps?: Omit<DragOverlayProps, "children"> | undefined;
+};
+/**
+ * Input-complete drag context for sortable boards.
+ *
+ * The consumer owns identifiers and the result of a drop; this component owns
+ * the sensor activation rules, keyboard navigation, auto-scroll configuration,
+ * and overlay lifecycle shared by sortable board UIs.
+ */
+declare const KanbanSortableBoard: ({ children, onDragEnd, collisionDetection, keyboardCoordinates, autoScroll, sensors, accessibility, onDragStart, onDragCancel, overlay, overlayProps }: KanbanSortableBoardProps) => React$1.JSX.Element;
+declare const useKanbanSortableSensors: (keyboardCoordinates?: KeyboardCoordinateGetter) => import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+type KanbanSortableListProps = SortableContextProps & React$1.ComponentProps<"div">;
+/** A vertical card list that preserves native vertical touch scrolling. */
+declare const KanbanSortableList: ({ className, children, id, items, strategy, disabled, ...props }: KanbanSortableListProps) => React$1.JSX.Element;
+type KanbanSortableColumnsProps = SortableContextProps & React$1.ComponentProps<"div">;
+/** A horizontal column list that keeps the board pan gesture available. */
+declare const KanbanSortableColumns: ({ className, children, id, items, strategy, disabled, ...props }: KanbanSortableColumnsProps) => React$1.JSX.Element;
+type KanbanSortableBindings = Pick<ReturnType<typeof useSortable>, "attributes" | "listeners" | "setActivatorNodeRef">;
+type UseKanbanSortableOptions = {
+  id: UniqueIdentifier;
+  disabled?: boolean | undefined;
+};
+/**
+ * Connect a sortable item and its separate drag handle without making the
+ * item's content a touch-none activation surface.
+ */
+declare const useKanbanSortable: ({ id, disabled }: UseKanbanSortableOptions) => {
+  isDragging: boolean;
+  setNodeRef: (node: HTMLElement | null) => void;
+  style: {
+    transform: string | undefined;
+    transition: string | undefined;
+  };
+  dragHandle: {
+    attributes: import("@dnd-kit/core").DraggableAttributes;
+    listeners: import("@dnd-kit/core/dist/hooks/utilities").SyntheticListenerMap | undefined;
+    setActivatorNodeRef: (element: HTMLElement | null) => void;
+  };
+};
+type KanbanDragHandleProps = {
+  bindings: KanbanSortableBindings;
+  label: string;
+} & Omit<React$1.ComponentProps<typeof Button>, "aria-label" | "children" | "ref" | "tooltip" | "type">;
+/**
+ * A 44px keyboard-accessible drag activator. The handle is the only board
+ * surface that disables touch panning, leaving cards and scroll regions free
+ * for ordinary scrolling.
+ */
+declare const KanbanDragHandle: ({ bindings, label, className, ...props }: KanbanDragHandleProps) => React$1.JSX.Element;
+//#endregion
+export { KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanDragHandle, KanbanDragHandleProps, KanbanSortableBindings, KanbanSortableBoard, KanbanSortableBoardProps, KanbanSortableColumns, KanbanSortableColumnsProps, KanbanSortableList, KanbanSortableListProps, UseKanbanSortableOptions, useKanbanSortable, useKanbanSortableSensors };

package/dist/kanban/sortable-interactions.js

@@ -0,0 +1,210 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Button } from "../components/button.js";
+import { isActiveTouchChange } from "./touch-identity.js";
+import { GripVerticalIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { createPortal } from "react-dom";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
+//#region src/kanban/sortable-interactions.tsx
+const KANBAN_MOUSE_ACTIVATION_DISTANCE = 8;
+const KANBAN_TOUCH_ACTIVATION_CONSTRAINT = {
+	delay: 150,
+	tolerance: 8
+};
+const hasTouchLists = (event) => "changedTouches" in event && "touches" in event;
+const getTouchIdentifier = (event) => {
+	if (!hasTouchLists(event)) return null;
+	return event.changedTouches.item(0)?.identifier ?? event.touches.item(0)?.identifier ?? null;
+};
+const getTouchIdentifiers = (touches) => {
+	const identifiers = [];
+	for (let index = 0; index < touches.length; index += 1) {
+		const identifier = touches.item(index)?.identifier;
+		if (identifier !== void 0) identifiers.push(identifier);
+	}
+	return identifiers;
+};
+/**
+* Keeps a delayed touch drag bound to the finger that activated it.
+*
+* dnd-kit's stock touch sensor attaches document-level lifecycle listeners,
+* so a second finger can otherwise move, end, or cancel the active drag. The
+* capture listeners below suppress only secondary touch changes before those
+* listeners receive them; browser scrolling remains native because no default
+* action is prevented here.
+*/
+var KanbanTouchSensor = class extends TouchSensor {
+	identityListeners;
+	ownerDocument;
+	touchIdentifier;
+	constructor(props) {
+		const identityListeners = new AbortController();
+		super({
+			...props,
+			onAbort: (active) => {
+				identityListeners.abort();
+				props.onAbort(active);
+			},
+			onCancel: () => {
+				identityListeners.abort();
+				props.onCancel();
+			},
+			onEnd: () => {
+				identityListeners.abort();
+				props.onEnd();
+			}
+		});
+		this.identityListeners = identityListeners;
+		this.ownerDocument = getTouchDocument(props.event);
+		this.touchIdentifier = getTouchIdentifier(props.event);
+		this.ownerDocument.addEventListener("touchmove", this.handleTouchMove, {
+			capture: true,
+			passive: false,
+			signal: identityListeners.signal
+		});
+		this.ownerDocument.addEventListener("touchend", this.handleTouchEnd, {
+			capture: true,
+			signal: identityListeners.signal
+		});
+		this.ownerDocument.addEventListener("touchcancel", this.handleTouchCancel, {
+			capture: true,
+			signal: identityListeners.signal
+		});
+	}
+	handleTouchMove = (event) => {
+		if (this.isPrimaryTouchChange(event)) return;
+		event.stopImmediatePropagation();
+	};
+	handleTouchEnd = (event) => {
+		if (!this.isPrimaryTouchChange(event)) {
+			event.stopImmediatePropagation();
+			return;
+		}
+		this.detachIdentityListeners();
+	};
+	handleTouchCancel = (event) => {
+		if (!this.isPrimaryTouchChange(event)) {
+			event.stopImmediatePropagation();
+			return;
+		}
+		this.detachIdentityListeners();
+	};
+	isPrimaryTouchChange = (event) => isActiveTouchChange({
+		activeTouchIdentifier: this.touchIdentifier,
+		changedTouchIdentifiers: getTouchIdentifiers(event.changedTouches)
+	});
+	detachIdentityListeners = () => {
+		this.identityListeners.abort();
+	};
+};
+const getTouchDocument = (event) => {
+	if (event.target instanceof Node && event.target.ownerDocument) return event.target.ownerDocument;
+	return document;
+};
+/**
+* Input-complete drag context for sortable boards.
+*
+* The consumer owns identifiers and the result of a drop; this component owns
+* the sensor activation rules, keyboard navigation, auto-scroll configuration,
+* and overlay lifecycle shared by sortable board UIs.
+*/
+const KanbanSortableBoard = ({ children, onDragEnd, collisionDetection, keyboardCoordinates, autoScroll, sensors, accessibility, onDragStart, onDragCancel, overlay, overlayProps }) => {
+	const [activeId, setActiveId] = React$1.useState(null);
+	const defaultSensors = useKanbanSortableSensors(keyboardCoordinates);
+	const handleDragStart = (event) => {
+		setActiveId(event.active.id);
+		onDragStart?.(event);
+	};
+	const handleDragEnd = (event) => {
+		setActiveId(null);
+		onDragEnd(event);
+	};
+	const handleDragCancel = (event) => {
+		setActiveId(null);
+		onDragCancel?.(event);
+	};
+	return /* @__PURE__ */ jsxs(DndContext, {
+		...autoScroll === void 0 ? {} : { autoScroll },
+		...accessibility === void 0 ? {} : { accessibility },
+		...collisionDetection === void 0 ? {} : { collisionDetection },
+		onDragCancel: handleDragCancel,
+		onDragEnd: handleDragEnd,
+		onDragStart: handleDragStart,
+		sensors: sensors ?? defaultSensors,
+		children: [children, overlay && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx(DragOverlay, {
+			...overlayProps,
+			children: overlay(activeId)
+		}), document.body) : null]
+	});
+};
+const useKanbanSortableSensors = (keyboardCoordinates = sortableKeyboardCoordinates) => useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 8 } }), useSensor(KanbanTouchSensor, { activationConstraint: KANBAN_TOUCH_ACTIVATION_CONSTRAINT }), useSensor(KeyboardSensor, { coordinateGetter: keyboardCoordinates }));
+/** A vertical card list that preserves native vertical touch scrolling. */
+const KanbanSortableList = ({ className, children, id, items, strategy, disabled, ...props }) => /* @__PURE__ */ jsx(SortableContext, {
+	...disabled === void 0 ? {} : { disabled },
+	...id === void 0 ? {} : { id },
+	items,
+	...strategy === void 0 ? {} : { strategy },
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("min-h-0 touch-auto overflow-y-auto overscroll-y-contain", className),
+		...props,
+		children
+	})
+});
+/** A horizontal column list that keeps the board pan gesture available. */
+const KanbanSortableColumns = ({ className, children, id, items, strategy, disabled, ...props }) => /* @__PURE__ */ jsx(SortableContext, {
+	...disabled === void 0 ? {} : { disabled },
+	...id === void 0 ? {} : { id },
+	items,
+	...strategy === void 0 ? {} : { strategy },
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-h-0 touch-auto overflow-x-auto overscroll-x-contain", className),
+		...props,
+		children
+	})
+});
+/**
+* Connect a sortable item and its separate drag handle without making the
+* item's content a touch-none activation surface.
+*/
+const useKanbanSortable = ({ id, disabled }) => {
+	const sortable = useSortable({
+		id,
+		...disabled === void 0 ? {} : { disabled }
+	});
+	return {
+		isDragging: sortable.isDragging,
+		setNodeRef: sortable.setNodeRef,
+		style: {
+			transform: sortable.transform ? `translate3d(${sortable.transform.x}px, ${sortable.transform.y}px, 0)` : void 0,
+			transition: sortable.transition
+		},
+		dragHandle: {
+			attributes: sortable.attributes,
+			listeners: sortable.listeners,
+			setActivatorNodeRef: sortable.setActivatorNodeRef
+		}
+	};
+};
+/**
+* A 44px keyboard-accessible drag activator. The handle is the only board
+* surface that disables touch panning, leaving cards and scroll regions free
+* for ordinary scrolling.
+*/
+const KanbanDragHandle = ({ bindings, label, className, ...props }) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	...bindings.attributes,
+	...bindings.listeners,
+	"aria-label": label,
+	className: cn("size-11 touch-none sm:size-11", className),
+	ref: (element) => bindings.setActivatorNodeRef(element),
+	size: "icon-xl",
+	tooltip: false,
+	type: "button",
+	variant: "ghost",
+	children: /* @__PURE__ */ jsx(GripVerticalIcon, { "aria-hidden": "true" })
+});
+//#endregion
+export { KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, useKanbanSortable, useKanbanSortableSensors };

package/dist/kanban/touch-identity.d.ts

@@ -0,0 +1,8 @@
+//#region src/kanban/touch-identity.d.ts
+type ActiveTouchChangeOptions = {
+  activeTouchIdentifier: number | null;
+  changedTouchIdentifiers: readonly number[];
+};
+declare const isActiveTouchChange: ({ activeTouchIdentifier, changedTouchIdentifiers }: ActiveTouchChangeOptions) => boolean;
+//#endregion
+export { isActiveTouchChange };

package/dist/kanban/touch-identity.js

@@ -0,0 +1,4 @@
+//#region src/kanban/touch-identity.ts
+const isActiveTouchChange = ({ activeTouchIdentifier, changedTouchIdentifiers }) => activeTouchIdentifier === null || changedTouchIdentifiers.includes(activeTouchIdentifier);
+//#endregion
+export { isActiveTouchChange };

package/dist/styles/theme.css

@@ -69,6 +69,32 @@
      affordance the user has to notice, not merely acknowledge. */
   --animate-attention-flash: attention-flash 700ms ease-out;
   --animate-attention-flash-twice: attention-flash 700ms ease-out 2;
+  /* The Stella mark breathing: the one indeterminate loading motion.
+     Opacity and scale only, so it never triggers layout. */
+  --animate-loader: loader 1.8s ease-in-out infinite;
+  /* A list item settling into place; callers stagger it by index. */
+  --animate-rise: rise 240ms ease-out both;
+  @keyframes loader {
+    0%,
+    100% {
+      opacity: 0.35;
+      transform: scale(0.94);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes rise {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
   @keyframes skeleton {
     to {
       background-position: -200% 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.5.2",
+  "version": "0.6.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",
@@ -201,6 +201,10 @@
       "types": "./dist/components/sheet.d.ts",
       "import": "./dist/components/sheet.js"
     },
+    "./loader": {
+      "types": "./dist/components/loader.d.ts",
+      "import": "./dist/components/loader.js"
+    },
     "./skeleton": {
       "types": "./dist/components/skeleton.d.ts",
       "import": "./dist/components/skeleton.js"
@@ -490,7 +494,10 @@
     "clean": "git clean -xdf dist .cache .turbo node_modules",
     "build": "tsdown",
     "pack:dry-run": "bun pm pack --dry-run",
-    "test": "bun test src",
+    "test": "bun run test:unit",
+    "test:unit": "bun test src --path-ignore-patterns '**/*.playwright.spec.ts'",
+    "test:browser": "playwright test --config playwright.config.ts",
+    "pack:check": "cd ../.. && bun scripts/check-published-exports.ts packages/ui",
     "typecheck": "bun ../../packages/scripts/src/tsc-native.ts --noEmit",
     "lint": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --report-unused-disable-directives-severity=error --deny-warnings --type-aware packages/ui",
     "lint:fix": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --type-aware --fix packages/ui",
@@ -506,8 +513,11 @@
   },
   "devDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.1.0",
     "@base-ui/react": "1.7.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@playwright/test": "^1.62.0",
     "@stll/typescript-config": "0.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
@@ -515,12 +525,15 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwindcss": "4.3.3",
-    "tsdown": "0.22.14"
+    "tsdown": "0.22.14",
+    "vite": "8.2.1"
   },
   "peerDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.1.0",
     "@base-ui/react": "^1.7.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "react": ">=19",
     "react-dom": ">=19",
     "tailwindcss": "^4.3.0"