@stll/ui 0.59.1 → 0.60.0

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

@@ -0,0 +1,39 @@
+import { ClientRect } from "@dnd-kit/core";
+//#region src/kanban/sortable-edge.d.ts
+export declare const KANBAN_HORIZONTAL_EDGES: {
+  readonly before: "before";
+  readonly after: "after";
+};
+export type KanbanHorizontalEdge = (typeof KANBAN_HORIZONTAL_EDGES)[keyof typeof KANBAN_HORIZONTAL_EDGES];
+export declare const KANBAN_DIRECTIONS: {
+  readonly ltr: "ltr";
+  readonly rtl: "rtl";
+};
+export 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;
+};
+export 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.
+ */
+export declare const getKanbanHorizontalEdge: ({ ...options }: KanbanHorizontalEdgeOptions) => KanbanHorizontalEdge;
+//#endregion
+export {};

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,145 @@
+import * as React$1 from "react";
+import { AutoScrollActivator, AutoScrollOptions, CollisionDetection, DndContextProps, DragCancelEvent, DragEndEvent, DragOverEvent, DragOverlayProps, DragStartEvent, KeyboardCoordinateGetter, UniqueIdentifier } from "@dnd-kit/core";
+import { Button } from "../components/button.js";
+import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSortableCellPosition, KanbanVirtualScrollRequest, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
+import { useSortable } from "@dnd-kit/sortable";
+//#region src/kanban/sortable-interactions.d.ts
+export declare const KANBAN_MOUSE_ACTIVATION_DISTANCE = 8;
+/** Above sticky board chrome, below app-level floating surfaces. */
+export declare const KANBAN_DRAG_OVERLAY_Z_INDEX = 75;
+export declare const KANBAN_BOARD_AUTO_SCROLL_OPTIONS: {
+  readonly acceleration: 10;
+  readonly activator: AutoScrollActivator.Pointer;
+  readonly threshold: {
+    readonly x: 0.15;
+    readonly y: 0.15;
+  };
+};
+export declare const KANBAN_SORTABLE_ACTIVATION_MODES: {
+  readonly CARD: "card";
+  readonly HANDLE: "handle";
+  readonly ITEM: "item";
+};
+export declare const KANBAN_TOUCH_ACTIVATION_CONSTRAINT: {
+  readonly delay: 150;
+  readonly tolerance: 8;
+};
+export type KanbanDragCancelEvent = DragCancelEvent;
+export type KanbanDragEndEvent = DragEndEvent;
+export type KanbanDragOverEvent = DragOverEvent;
+export type KanbanDragStartEvent = DragStartEvent;
+export type KanbanSortableBoardProps = {
+  children: React$1.ReactNode;
+  onDragEnd: (event: KanbanDragEndEvent) => void;
+  /** Minimum pointer movement before a mouse drag activates. */
+  mouseActivationDistance?: number | undefined;
+  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;
+  /**
+   * Fires on drag start and on every drag end or cancel; a board over a
+   * `KanbanSubgroupBoard` combines the two into that board's `isDragging`
+   * (`true` here, `false` on `onDragEnd`/`onDragCancel`).
+   */
+  onDragStart?: ((event: KanbanDragStartEvent) => void) | undefined;
+  /**
+   * Fires whenever dnd-kit's collision detection changes the drop target
+   * the drag is over, `event.over` included when it becomes none. A board
+   * over a `KanbanSubgroupBoard` maps `event.over?.id ?? null` to a band id
+   * (via `KanbanSubgroupCellContext.band`, or a droppable registered for a
+   * folded band's slot) to drive that board's `dragOverBandId`.
+   */
+  onDragOver?: ((event: KanbanDragOverEvent) => void) | undefined;
+  onDragCancel?: ((event: KanbanDragCancelEvent) => void) | undefined;
+  /** Called once mounted child drop targets can safely receive input. */
+  onInteractionReady?: (() => void) | undefined;
+  /** Rendered in document.body while an item is active. */
+  overlay?: ((activeId: UniqueIdentifier | null) => React$1.ReactNode) | undefined;
+  overlayProps?: Omit<DragOverlayProps, "children"> | undefined;
+};
+export type UseKanbanDropTargetOptions = {
+  disabled?: boolean | undefined;
+  id: string;
+  itemIds: readonly UniqueIdentifier[];
+  navigation: KanbanCellVirtualNavigation;
+  position: KanbanSortableCellPosition;
+};
+/**
+ * Register a board-level drop target such as an empty cell or terminal lane.
+ *
+ * Board consumers should not need to couple their presentation code to the
+ * underlying drag-and-drop library just to receive an item from a sortable
+ * context.
+ */
+export declare const useKanbanDropTarget: ({ disabled, id, itemIds, navigation, position }: UseKanbanDropTargetOptions) => {
+  isOver: boolean;
+  setNodeRef: (element: HTMLElement | null) => void;
+};
+/**
+ * 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.
+ */
+export declare const KanbanSortableBoard: ({ children, onDragEnd, mouseActivationDistance, collisionDetection, keyboardCoordinates, autoScroll, sensors, accessibility, onDragStart, onDragOver, onDragCancel, onInteractionReady, overlay, overlayProps }: KanbanSortableBoardProps) => React$1.JSX.Element;
+export declare const useKanbanSortableSensors: (keyboardCoordinates?: KeyboardCoordinateGetter, mouseActivationDistance?: number) => import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+export type KanbanSortableBindings = Pick<ReturnType<typeof useSortable>, "attributes" | "listeners" | "setActivatorNodeRef">;
+export type KanbanSortableActivationMode = {
+  type: "card";
+} | {
+  type: "handle";
+} | {
+  type: "item";
+};
+export type UseKanbanSortableOptions = {
+  activation: KanbanSortableActivationMode;
+  id: UniqueIdentifier;
+  disabled?: boolean | undefined;
+};
+type KanbanSortableActivator = {
+  bindings: KanbanSortableBindings;
+  type: typeof KANBAN_SORTABLE_ACTIVATION_MODES.HANDLE;
+} | {
+  bindings: KanbanSortableBindings;
+  type: typeof KANBAN_SORTABLE_ACTIVATION_MODES.CARD;
+} | {
+  attributes: ReturnType<typeof useSortable>["attributes"];
+  listeners: ReturnType<typeof useSortable>["listeners"];
+  type: typeof KANBAN_SORTABLE_ACTIVATION_MODES.ITEM;
+};
+/**
+ * Connect a sortable item and its separate drag handle without making the
+ * item's content a touch-none activation surface.
+ */
+export declare const useKanbanSortable: ({ activation, id, disabled }: UseKanbanSortableOptions) => {
+  activator: KanbanSortableActivator;
+  isDragging: boolean;
+  setNodeRef: (element: HTMLElement | null) => void;
+  style: {
+    touchAction: string | undefined;
+    transform: string | undefined;
+    transition: string | undefined;
+  };
+};
+export 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.
+ */
+export declare const KanbanDragHandle: ({ bindings, label, className, ...props }: KanbanDragHandleProps) => React$1.JSX.Element;
+export type KanbanCardDragSurfaceProps = {
+  bindings: KanbanSortableBindings;
+} & Omit<React$1.ComponentProps<"div">, "ref">;
+/** A whole-card drag activator that preserves descendant controls and scrolling. */
+export declare const KanbanCardDragSurface: ({ bindings, className, ...props }: KanbanCardDragSurfaceProps) => React$1.JSX.Element;
+//#endregion
+export { KANBAN_BOARD_COLLISION_DETECTION, type KanbanCellVirtualNavigation, type KanbanSortableCellPosition, type KanbanVirtualScrollRequest, kanbanKeyboardCoordinates };