@stll/ui 0.5.2 → 0.7.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
 
@@ -19,6 +20,7 @@ so a bundler keeps only what is imported:
 
 ```tsx
 import { Button } from "@stll/ui/button";
+import { ApplicationShell } from "@stll/ui/application-shell";
 import { Dialog, DialogPopup } from "@stll/ui/dialog";
 import { Inspector, InspectorDock } from "@stll/ui/inspector";
 import { cn } from "@stll/ui/utils";
@@ -28,6 +30,25 @@ One flat subpath per module: `@stll/ui/<name>` for components, hooks, and
 helpers alike. `@stll/ui` re-exports all of them under one specifier for
 convenience; the subpaths are the real surface, and in-repo code uses those.
 
+## Application shell
+
+`ApplicationShell` keeps the navigation, page chrome and content, and an
+optional inline-end inspector as sibling columns. Pass the host application's
+surfaces as slots; route state, navigation behavior, and inspector behavior
+remain in the host.
+
+```tsx
+import { ApplicationShell } from "@stll/ui/application-shell";
+
+<ApplicationShell
+  header={<PageHeader />}
+  inspector={<InspectorDock />}
+  sidebar={<Navigation />}
+>
+  <Page />
+</ApplicationShell>;
+```
+
 ### Deprecated grouped subpaths
 
 `@stll/ui/components/<name>`, `@stll/ui/hooks/<name>`, and
@@ -35,6 +56,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 +132,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 +143,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/application-shell.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+//#region src/components/application-shell.d.ts
+type ApplicationShellProps = {
+  /**
+   * The application navigation surface. It stays a direct sibling of the
+   * content column so sidebar implementations can reserve their own width.
+   */
+  sidebar: ReactNode;
+  /** The route chrome rendered above the application content. */
+  header?: ReactNode | undefined;
+  /** An optional dock or rail at the inline-end edge. */
+  inspector?: ReactNode | undefined;
+  /** The active route or page content. */
+  children: ReactNode;
+  className?: string | undefined;
+  mainClassName?: string | undefined;
+};
+/**
+ * The three-column application frame: navigation, page chrome and content,
+ * then an optional inline-end inspector. Product navigation, route state, and
+ * inspector behaviour stay in the host; this primitive only owns the layout
+ * relationship that lets those surfaces share a viewport without nesting one
+ * inside another.
+ */
+declare const ApplicationShell: ({ children, className, header, inspector, mainClassName, sidebar }: ApplicationShellProps) => import("react").JSX.Element;
+//#endregion
+export { ApplicationShell, type ApplicationShellProps };

package/dist/components/application-shell.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/utils.js";
+import { jsxs } from "react/jsx-runtime";
+//#region src/components/application-shell.tsx
+/**
+* The three-column application frame: navigation, page chrome and content,
+* then an optional inline-end inspector. Product navigation, route state, and
+* inspector behaviour stay in the host; this primitive only owns the layout
+* relationship that lets those surfaces share a viewport without nesting one
+* inside another.
+*/
+const ApplicationShell = ({ children, className, header, inspector, mainClassName, sidebar }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("flex min-h-svh w-full", className),
+	"data-slot": "application-shell",
+	children: [
+		sidebar,
+		/* @__PURE__ */ jsxs("main", {
+			className: cn("bg-background relative flex w-full flex-1 flex-col overflow-hidden", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2", mainClassName),
+			"data-slot": "application-shell-main",
+			children: [header, children]
+		}),
+		inspector
+	]
+});
+//#endregion
+export { ApplicationShell };

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

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

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-end" | "block-start" | 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

@@ -5,6 +5,7 @@ import "./calendar/index.js";
 import { Accordion, AccordionContent as AccordionPanel, AccordionItem, AccordionTrigger } from "./components/accordion.js";
 import { OVERLAY_LAYER_CLASS_NAMES, OverlayLayer } from "./lib/overlay-layer.js";
 import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "./components/alert-dialog.js";
+import { ApplicationShell, ApplicationShellProps } from "./components/application-shell.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
 import { BidiDirection, BidiText, BidiTextProps, UserText } from "./components/bidi-text.js";
 import { DiscordLogoIcon, GitHubLogoIcon } from "./components/brand-icons.js";
@@ -66,10 +67,20 @@ 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 { getInitials } from "./lib/initials.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 };
+import { ReviewAuthorAvatar, UNKNOWN_AUTHOR_LABEL } from "./review/review-author-avatar.js";
+import { ReviewCommentAuthor, ReviewCommentCard } from "./review/review-comment-card.js";
+import { ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState } from "./review/review-decision-actions.js";
+import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, reviewDiffSegmentKeys } from "./review/review-diff-text.js";
+import { ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone } from "./review/review-out-of-date-notice.js";
+import { ReviewStatusBadge, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant } from "./review/review-status-badge.js";
+import { ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
+export { 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, ApplicationShell, type ApplicationShellProps, 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, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanSortableOptions, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

package/dist/index.js

@@ -3,6 +3,7 @@ import { Accordion, AccordionContent as AccordionPanel, AccordionItem, Accordion
 import { OVERLAY_LAYER_CLASS_NAMES } from "./lib/overlay-layer.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
 import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "./components/alert-dialog.js";
+import { ApplicationShell } from "./components/application-shell.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
 import { BidiText, UserText } from "./components/bidi-text.js";
 import { DiscordLogoIcon, GitHubLogoIcon } from "./components/brand-icons.js";
@@ -65,7 +66,17 @@ 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 { getInitials } from "./lib/initials.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 };
+import { ReviewAuthorAvatar, UNKNOWN_AUTHOR_LABEL } from "./review/review-author-avatar.js";
+import { ReviewCommentCard } from "./review/review-comment-card.js";
+import { ReviewDecisionActions } from "./review/review-decision-actions.js";
+import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, reviewDiffSegmentKeys } from "./review/review-diff-text.js";
+import { ReviewOutOfDateNotice } from "./review/review-out-of-date-notice.js";
+import { ReviewSeverityDot, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
+import { ReviewStatusBadge } from "./review/review-status-badge.js";
+export { 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, ApplicationShell, 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, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

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 };