@stll/ui 0.9.0 → 0.12.0

package/dist/kanban/sortable-interactions.logic.js

@@ -0,0 +1,205 @@
+import { closestCorners, getFirstCollision, pointerWithin } from "@dnd-kit/core";
+//#region src/kanban/sortable-interactions.logic.ts
+const KANBAN_DROP_TARGET_TYPES = {
+	CELL: "kanban-cell",
+	ITEM: "kanban-item"
+};
+const isRecord = (value) => typeof value === "object" && value !== null;
+const isUniqueIdentifier = (value) => typeof value === "string" || typeof value === "number";
+const isCellPosition = (value) => isRecord(value) && typeof value["column"] === "number" && typeof value["lane"] === "number" && Number.isInteger(value["column"]) && Number.isInteger(value["lane"]) && value["column"] >= 0 && value["lane"] >= 0;
+const isKanbanCellVirtualNavigation = (value) => isRecord(value) && (value["type"] === "static" || value["type"] === "virtual" && typeof value["requestScroll"] === "function");
+const isKanbanCellDropData = (value) => isRecord(value) && value["type"] === KANBAN_DROP_TARGET_TYPES.CELL && Array.isArray(value["itemIds"]) && value["itemIds"].every(isUniqueIdentifier) && isKanbanCellVirtualNavigation(value["navigation"]) && isCellPosition(value["position"]);
+const isKanbanItemDropData = (value) => {
+	if (!isRecord(value) || value["type"] !== KANBAN_DROP_TARGET_TYPES.ITEM) return false;
+	const navigation = value["navigation"];
+	const current = isRecord(navigation) ? navigation["current"] : void 0;
+	return isRecord(navigation) && isRecord(current) && (current["type"] === "idle" || (current["type"] === "ready" || current["type"] === "pending") && isUniqueIdentifier(current["targetId"]));
+};
+const getKanbanKeyboardTargetState = (value) => isKanbanItemDropData(value) ? value.navigation.current : void 0;
+/**
+* dnd-kit computes collisions while rendering but publishes the resulting drop
+* target to its sensor context a render later, and resolves a drop from that
+* published value. A drag that ends before the two agree, which every input
+* can do because a single move produces a single render, drops the item on the
+* previously published target.
+*
+* Keyboard navigation names its target outright, so it is compared directly: a
+* pending target is still waiting for a virtual cell to mount an offscreen row
+* and has produced no collision at all, and a ready one is only settled once it
+* is the published target. Until then both the collisions and the published
+* target still describe where the board was before the user navigated away.
+*/
+const isKanbanDropSettled = ({ active, collisions, over }) => {
+	const target = getKanbanKeyboardTargetState(active?.data.current);
+	if (target?.type === "pending") return false;
+	if (target?.type === "ready") return over?.id === target.targetId;
+	return getFirstCollision(collisions, "id") === (over?.id ?? null);
+};
+const clearKanbanKeyboardTarget = (value) => {
+	if (isKanbanItemDropData(value) && value.navigation.current.type !== "idle") value.navigation.current = { type: "idle" };
+};
+const getSortableData = (value) => {
+	if (!isRecord(value)) return null;
+	const sortable = value["sortable"];
+	if (!isRecord(sortable) || !isUniqueIdentifier(sortable["containerId"]) || typeof sortable["index"] !== "number" || !Number.isInteger(sortable["index"]) || !Array.isArray(sortable["items"]) || !sortable["items"].every(isUniqueIdentifier)) return null;
+	return {
+		containerId: sortable["containerId"],
+		index: sortable["index"],
+		items: sortable["items"]
+	};
+};
+const isKanbanDroppable = ({ data }) => {
+	const value = data.current;
+	return isKanbanCellDropData(value) || isKanbanItemDropData(value);
+};
+/**
+* Pointer and touch input must be inside a registered board target. Once that
+* boundary is established, closest corners gives stable ranking across cells.
+*/
+const KANBAN_BOARD_COLLISION_DETECTION = (args) => {
+	const boardContainers = args.droppableContainers.filter(isKanbanDroppable);
+	if (args.pointerCoordinates === null) {
+		const activeData = args.active.data.current;
+		if (isKanbanItemDropData(activeData)) {
+			if (activeData.navigation.current.type === "pending") return [];
+			if (activeData.navigation.current.type !== "ready") return closestCorners({
+				...args,
+				droppableContainers: boardContainers
+			});
+			const { targetId } = activeData.navigation.current;
+			return boardContainers.some(({ id }) => id === targetId) ? [{ id: targetId }] : [];
+		}
+		return closestCorners({
+			...args,
+			droppableContainers: boardContainers
+		});
+	}
+	const intersections = pointerWithin({
+		...args,
+		droppableContainers: boardContainers
+	});
+	if (intersections.length === 0) return [];
+	const intersectingIds = new Set(intersections.map((intersection) => intersection.id));
+	return closestCorners({
+		...args,
+		droppableContainers: boardContainers.filter(({ id }) => intersectingIds.has(id))
+	});
+};
+const getAdjacentCell = (cells, current, direction) => {
+	let columnOffset = 0;
+	let laneOffset = 0;
+	switch (direction) {
+		case "down":
+			laneOffset = 1;
+			break;
+		case "left":
+			columnOffset = -1;
+			break;
+		case "right":
+			columnOffset = 1;
+			break;
+		case "up": laneOffset = -1;
+	}
+	return cells.find(({ position }) => position.column === current.position.column + columnOffset && position.lane === current.position.lane + laneOffset);
+};
+const getKanbanKeyboardTarget = ({ activeId, cells, currentCellId, currentOverId, direction }) => {
+	const currentCell = cells.find(({ id }) => id === currentCellId);
+	if (currentCell === void 0) return;
+	const overIndex = currentCell.itemIds.indexOf(currentOverId);
+	const activeIndex = currentCell.itemIds.indexOf(activeId);
+	const currentIndex = overIndex !== -1 ? overIndex : activeIndex;
+	if (direction === "down" && currentIndex >= 0) {
+		const nextItem = currentCell.itemIds.at(currentIndex + 1);
+		if (nextItem !== void 0) return nextItem;
+	}
+	if (direction === "up" && currentIndex > 0) return currentCell.itemIds.at(currentIndex - 1);
+	const adjacentCell = getAdjacentCell(cells, currentCell, direction);
+	if (adjacentCell === void 0) return;
+	if (adjacentCell.itemIds.length === 0) return adjacentCell.id;
+	if (direction === "down") return adjacentCell.itemIds.at(0);
+	if (direction === "up") return adjacentCell.itemIds.at(-1);
+	const targetIndex = Math.max(currentIndex, 0);
+	return adjacentCell.itemIds.at(Math.min(targetIndex, adjacentCell.itemIds.length - 1)) ?? adjacentCell.id;
+};
+const getDirection = (code) => {
+	switch (code) {
+		case "ArrowDown": return "down";
+		case "ArrowLeft": return "left";
+		case "ArrowRight": return "right";
+		case "ArrowUp": return "up";
+		default: return null;
+	}
+};
+const getCellId = (container) => {
+	const data = container.data.current;
+	if (isKanbanCellDropData(data)) return container.id;
+	if (!isKanbanItemDropData(data)) return null;
+	return getSortableData(data)?.containerId ?? null;
+};
+/** Ordered two-dimensional navigation over item and empty-cell targets. */
+const kanbanKeyboardCoordinates = (event, { active, context }) => {
+	const direction = getDirection(event.code);
+	if (direction === null) return;
+	event.preventDefault();
+	const cells = context.droppableContainers.getEnabled().filter(({ data }) => {
+		const value = data.current;
+		return isKanbanCellDropData(value);
+	}).flatMap((container) => {
+		const data = container.data.current;
+		return isKanbanCellDropData(data) ? [{
+			...data,
+			id: container.id
+		}] : [];
+	});
+	const activeData = context.active?.data.current;
+	const keyboardTarget = getKanbanKeyboardTargetState(activeData);
+	const overId = keyboardTarget?.type === "ready" ? keyboardTarget.targetId : context.over?.id ?? active;
+	const overContainer = context.droppableContainers.get(overId);
+	const activeContainer = context.droppableContainers.get(active);
+	const currentCellId = (overContainer && getCellId(overContainer)) ?? (activeContainer && getCellId(activeContainer));
+	if (currentCellId === null || currentCellId === void 0) return;
+	const targetId = getKanbanKeyboardTarget({
+		activeId: active,
+		cells,
+		currentCellId,
+		currentOverId: overId,
+		direction
+	});
+	if (targetId === void 0) return;
+	const targetNode = context.droppableContainers.get(targetId)?.node.current;
+	if (targetNode === null || targetNode === void 0) {
+		const targetCell = cells.find(({ itemIds }) => itemIds.includes(targetId));
+		if (isKanbanItemDropData(activeData) && targetCell?.navigation.type === "virtual") {
+			activeData.navigation.current = {
+				targetId,
+				type: "pending"
+			};
+			targetCell.navigation.requestScroll({
+				itemId: targetId,
+				type: "item"
+			});
+		}
+		return;
+	}
+	const targetRect = context.droppableRects.get(targetId);
+	if (targetRect === void 0) return;
+	if (isKanbanItemDropData(activeData)) activeData.navigation.current = {
+		targetId,
+		type: "ready"
+	};
+	requestAnimationFrame(() => {
+		requestAnimationFrame(() => {
+			targetNode.scrollIntoView({
+				behavior: "instant",
+				block: "nearest",
+				inline: "nearest"
+			});
+		});
+	});
+	return {
+		x: targetRect.left,
+		y: targetRect.top
+	};
+};
+//#endregion
+export { KANBAN_BOARD_COLLISION_DETECTION, KANBAN_DROP_TARGET_TYPES, clearKanbanKeyboardTarget, getKanbanKeyboardTarget, getKanbanKeyboardTargetState, isKanbanCellDropData, isKanbanDropSettled, kanbanKeyboardCoordinates };

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

@@ -1,4 +1,7 @@
+import { UseKanbanDropTargetOptions } from "./sortable-interactions.js";
 import { Key, ReactNode, RefObject } from "react";
+import { UniqueIdentifier } from "@dnd-kit/core";
+import { SortableContextProps, SortingStrategy } from "@dnd-kit/sortable";
 //#region src/kanban/virtual-cell.d.ts
 declare const KANBAN_VIRTUAL_CELL_PAGINATION: {
   readonly NONE: "none";
@@ -13,11 +16,25 @@ type KanbanVirtualCellPagination = {
   pageKey: string | number;
   onRequestMore: () => void;
 };
+/**
+ * Makes a virtual cell the canonical sortable context for its rendered rows.
+ *
+ * `getRowKey` remains responsible for React and virtualizer identity. A
+ * separate sortable identifier avoids narrowing an existing React key contract
+ * merely to support dnd-kit consumers.
+ */
+type KanbanVirtualCellSortableContext<TRow> = {
+  dropTarget: Omit<UseKanbanDropTargetOptions, "itemIds" | "navigation">;
+  getRowId: (row: TRow) => UniqueIdentifier;
+  disabled?: SortableContextProps["disabled"] | undefined;
+  strategy?: SortingStrategy | undefined;
+};
 type KanbanVirtualCellProps<TRow> = {
   rows: readonly TRow[];
   getRowKey: (row: TRow) => Key;
   renderRow: (row: TRow) => ReactNode;
   pagination: KanbanVirtualCellPagination;
+  sortable?: KanbanVirtualCellSortableContext<TRow> | undefined;
   containerRef?: RefObject<HTMLDivElement | null> | undefined;
   active?: boolean | undefined;
   backgroundColor?: string | undefined;
@@ -28,6 +45,6 @@ type KanbanVirtualCellProps<TRow> = {
   className?: string | undefined;
 };
 /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
-declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, containerRef, active, backgroundColor, footer, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
+declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active, backgroundColor, footer, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
 //#endregion
-export { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps };
+export { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext };

package/dist/kanban/virtual-cell.js

@@ -1,20 +1,34 @@
 import { cn } from "../lib/utils.js";
+import { useKanbanDropTarget } from "./sortable-interactions.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { useId, useRef } from "react";
+import { useDndContext } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 //#region src/kanban/virtual-cell.tsx
 const DEFAULT_ESTIMATE_SIZE_PX = 128;
 const DEFAULT_OVERSCAN = 8;
 const DEFAULT_LOAD_MORE_THRESHOLD_PX = 200;
+const retainActiveSortableIndex = (range, activeIndex) => {
+	const indexes = defaultRangeExtractor(range);
+	if (activeIndex < 0 || indexes.includes(activeIndex)) return indexes;
+	indexes.push(activeIndex);
+	indexes.sort((left, right) => left - right);
+	return indexes;
+};
 const KANBAN_VIRTUAL_CELL_PAGINATION = {
 	NONE: "none",
 	CURSOR: "cursor"
 };
 /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
-const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, containerRef, active = false, backgroundColor, footer, estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
+const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active = false, backgroundColor, footer, estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
 	const internalRef = useRef(null);
-	const scrollRef = containerRef ?? internalRef;
+	const fallbackDropTargetId = useId();
+	const scrollRef = internalRef;
 	const requestedPageKeyRef = useRef(null);
+	const itemIds = sortable ? rows.map(sortable.getRowId) : [];
+	const { active: activeDrag } = useDndContext();
+	const activeSortableIndex = activeDrag === null ? -1 : itemIds.indexOf(activeDrag.id);
 	const virtualizer = useVirtualizer({
 		count: rows.length,
 		estimateSize: () => estimateSize,
@@ -23,7 +37,25 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, containerRe
 			return row === void 0 ? index : getRowKey(row);
 		},
 		getScrollElement: () => scrollRef.current,
-		overscan
+		overscan,
+		rangeExtractor: (range) => retainActiveSortableIndex(range, activeSortableIndex)
+	});
+	const requestScroll = ({ itemId }) => {
+		const index = itemIds.indexOf(itemId);
+		if (index !== -1) virtualizer.scrollToIndex(index, { align: "auto" });
+	};
+	const dropTarget = useKanbanDropTarget({
+		disabled: sortable?.dropTarget.disabled ?? sortable === void 0,
+		id: sortable?.dropTarget.id ?? fallbackDropTargetId,
+		itemIds,
+		navigation: sortable === void 0 ? { type: "static" } : {
+			requestScroll,
+			type: "virtual"
+		},
+		position: sortable?.dropTarget.position ?? {
+			column: -1,
+			lane: -1
+		}
 	});
 	const handleScroll = ({ currentTarget }) => {
 		if (pagination.type !== "cursor" || !pagination.hasMore || pagination.loading) return;
@@ -32,10 +64,16 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, containerRe
 		requestedPageKeyRef.current = pagination.pageKey;
 		pagination.onRequestMore();
 	};
-	return /* @__PURE__ */ jsxs("div", {
+	const setScrollElement = (element) => {
+		internalRef.current = element;
+		if (containerRef) containerRef.current = element;
+		dropTarget.setNodeRef(element);
+	};
+	const content = /* @__PURE__ */ jsxs("div", {
 		className: cn("bg-muted/20 max-h-[min(60vh,40rem)] min-h-20 overflow-y-auto overscroll-y-contain rounded-xl p-2 transition-[background-color,outline-color]", active && "bg-primary/5 ring-primary/50 ring-2", className),
+		"data-kanban-cell": sortable?.dropTarget.id,
 		onScroll: handleScroll,
-		ref: scrollRef,
+		ref: setScrollElement,
 		style: backgroundColor ? { backgroundColor } : void 0,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "relative",
@@ -53,6 +91,14 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, containerRe
 			})
 		}), footer]
 	});
+	if (sortable === void 0) return content;
+	return /* @__PURE__ */ jsx(SortableContext, {
+		...sortable.disabled === void 0 ? {} : { disabled: sortable.disabled },
+		id: sortable.dropTarget.id,
+		items: itemIds,
+		strategy: sortable.strategy ?? verticalListSortingStrategy,
+		children: content
+	});
 };
 //#endregion
 export { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell };

package/dist/lib/control-size.d.ts

@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
   readonly lg: "lg";
 }>;
 type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
-declare const CONTROL_SIZES: readonly ("sm" | "default" | "lg")[];
+declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/dist/lib/overlay-layer.d.ts

@@ -1,4 +1,5 @@
 //#region src/lib/overlay-layer.d.ts
+declare const BOARD_DRAG_OVERLAY_Z_INDEX = 75;
 declare const OVERLAY_LAYER_CLASS_NAMES: {
   /** Docked composer, suggestion chips, and other in-pane floating chrome. */
   readonly chrome: "z-[80]";
@@ -19,4 +20,4 @@ declare const OVERLAY_LAYER_CLASS_NAMES: {
 };
 type OverlayLayer = keyof typeof OVERLAY_LAYER_CLASS_NAMES;
 //#endregion
-export { OVERLAY_LAYER_CLASS_NAMES, OverlayLayer };
+export { BOARD_DRAG_OVERLAY_Z_INDEX, OVERLAY_LAYER_CLASS_NAMES, OverlayLayer };

package/dist/lib/overlay-layer.js

@@ -1,4 +1,5 @@
 //#region src/lib/overlay-layer.ts
+const BOARD_DRAG_OVERLAY_Z_INDEX = 75;
 const OVERLAY_LAYER_CLASS_NAMES = {
 	/** Docked composer, suggestion chips, and other in-pane floating chrome. */
 	chrome: "z-[80]",
@@ -18,4 +19,4 @@ const OVERLAY_LAYER_CLASS_NAMES = {
 	"search-child": "z-[100]"
 };
 //#endregion
-export { OVERLAY_LAYER_CLASS_NAMES };
+export { BOARD_DRAG_OVERLAY_Z_INDEX, OVERLAY_LAYER_CLASS_NAMES };

package/dist/review/review-comment-card.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
-import { BidiText } from "../components/bidi-text.js";
 import { Button } from "../components/button.js";
+import { BidiText } from "../components/bidi-text.js";
 import { ReviewAuthorAvatar } from "./review-author-avatar.js";
 import { CheckIcon, RotateCcwIcon, Trash2Icon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.9.0",
+  "version": "0.12.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",
@@ -45,9 +45,9 @@
       "types": "./dist/components/alert-dialog.d.ts",
       "import": "./dist/components/alert-dialog.js"
     },
-    "./application-shell": {
-      "types": "./dist/components/application-shell.d.ts",
-      "import": "./dist/components/application-shell.js"
+    "./workspace-shell": {
+      "types": "./dist/components/workspace-shell.d.ts",
+      "import": "./dist/components/workspace-shell.js"
     },
     "./avatar": {
       "types": "./dist/components/avatar.d.ts",
@@ -330,9 +330,9 @@
       "types": "./dist/components/alert-dialog.d.ts",
       "import": "./dist/components/alert-dialog.js"
     },
-    "./components/application-shell": {
-      "types": "./dist/components/application-shell.d.ts",
-      "import": "./dist/components/application-shell.js"
+    "./components/workspace-shell": {
+      "types": "./dist/components/workspace-shell.d.ts",
+      "import": "./dist/components/workspace-shell.js"
     },
     "./components/avatar": {
       "types": "./dist/components/avatar.d.ts",

package/dist/components/application-shell.d.ts

@@ -1,27 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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 min-w-0 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 };