@stll/ui 0.7.0 → 0.9.0

package/dist/kanban/virtual-cell.js

@@ -0,0 +1,58 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { 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 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 internalRef = useRef(null);
+	const scrollRef = containerRef ?? internalRef;
+	const requestedPageKeyRef = useRef(null);
+	const virtualizer = useVirtualizer({
+		count: rows.length,
+		estimateSize: () => estimateSize,
+		getItemKey: (index) => {
+			const row = rows.at(index);
+			return row === void 0 ? index : getRowKey(row);
+		},
+		getScrollElement: () => scrollRef.current,
+		overscan
+	});
+	const handleScroll = ({ currentTarget }) => {
+		if (pagination.type !== "cursor" || !pagination.hasMore || pagination.loading) return;
+		if (currentTarget.scrollHeight - currentTarget.scrollTop - currentTarget.clientHeight > loadMoreThreshold) return;
+		if (requestedPageKeyRef.current === pagination.pageKey) return;
+		requestedPageKeyRef.current = pagination.pageKey;
+		pagination.onRequestMore();
+	};
+	return /* @__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),
+		onScroll: handleScroll,
+		ref: scrollRef,
+		style: backgroundColor ? { backgroundColor } : void 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "relative",
+			style: { height: virtualizer.getTotalSize() },
+			children: virtualizer.getVirtualItems().map((virtualRow) => {
+				const row = rows.at(virtualRow.index);
+				if (row === void 0) return null;
+				return /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-x-0 top-0 pb-2",
+					"data-index": virtualRow.index,
+					ref: virtualizer.measureElement,
+					style: { transform: `translateY(${virtualRow.start}px)` },
+					children: renderRow(row)
+				}, getRowKey(row));
+			})
+		}), footer]
+	});
+};
+//#endregion
+export { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell };

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

@@ -0,0 +1,10 @@
+//#region src/lib/control-size.d.ts
+declare const CONTROL_SIZE: Readonly<{
+  readonly sm: "sm";
+  readonly default: "default";
+  readonly lg: "lg";
+}>;
+type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
+declare const CONTROL_SIZES: readonly ("sm" | "default" | "lg")[];
+//#endregion
+export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/dist/lib/control-size.js

@@ -0,0 +1,9 @@
+//#region src/lib/control-size.ts
+const CONTROL_SIZE = Object.freeze({
+	sm: "sm",
+	default: "default",
+	lg: "lg"
+});
+const CONTROL_SIZES = Object.freeze(Object.values(CONTROL_SIZE));
+//#endregion
+export { CONTROL_SIZE, CONTROL_SIZES };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.7.0",
+  "version": "0.9.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",
@@ -37,6 +37,10 @@
       "types": "./dist/components/accordion.d.ts",
       "import": "./dist/components/accordion.js"
     },
+    "./application-rail": {
+      "types": "./dist/components/application-rail.d.ts",
+      "import": "./dist/components/application-rail.js"
+    },
     "./alert-dialog": {
       "types": "./dist/components/alert-dialog.d.ts",
       "import": "./dist/components/alert-dialog.js"
@@ -85,6 +89,10 @@
       "types": "./dist/components/command.d.ts",
       "import": "./dist/components/command.js"
     },
+    "./control-size": {
+      "types": "./dist/lib/control-size.d.ts",
+      "import": "./dist/lib/control-size.js"
+    },
     "./calendar": {
       "types": "./dist/calendar/index.d.ts",
       "import": "./dist/calendar/index.js"
@@ -314,6 +322,10 @@
       "types": "./dist/components/accordion.d.ts",
       "import": "./dist/components/accordion.js"
     },
+    "./components/application-rail": {
+      "types": "./dist/components/application-rail.d.ts",
+      "import": "./dist/components/application-rail.js"
+    },
     "./components/alert-dialog": {
       "types": "./dist/components/alert-dialog.d.ts",
       "import": "./dist/components/alert-dialog.js"
@@ -545,6 +557,7 @@
     "prepack": "bun run build"
   },
   "dependencies": {
+    "better-result": "3.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "input-otp": "^1.5.0",
@@ -559,6 +572,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@playwright/test": "^1.62.0",
     "@stll/typescript-config": "0.0.0",
+    "@tanstack/react-virtual": "^3.14.10",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "bun-types": "1.4.0",
@@ -574,6 +588,7 @@
     "@base-ui/react": "^1.7.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
+    "@tanstack/react-virtual": "^3.14.10",
     "react": ">=19",
     "react-dom": ">=19",
     "tailwindcss": "^4.3.0"