@stll/ui 0.52.0 → 0.53.0

package/dist/kanban/drag-interactions.js

@@ -1,3 +1,4 @@
+import { panic } from "better-result";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { autoScrollForExternal } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/external";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";
@@ -13,6 +14,15 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/ut
 * reaches those native events; only data attached this way does.
 */
 const KANBAN_CARD_DRAG_MIME = "application/x-stella-kanban-card";
+/** The styled card inside the shell's drag wrapper, at its rendered width. */
+const appendCardClone = (element, container) => {
+	const card = element.firstElementChild;
+	if (!(card instanceof HTMLElement)) return;
+	const clone = card.cloneNode(true);
+	if (!(clone instanceof HTMLElement)) return;
+	clone.style.width = `${card.getBoundingClientRect().width}px`;
+	container.append(clone);
+};
 /**
 * Register the standard kanban card drag source and native preview.
 *
@@ -20,7 +30,7 @@ const KANBAN_CARD_DRAG_MIME = "application/x-stella-kanban-card";
 * or persist a drop. It owns the interaction every card shares, including a
 * pointer-centred preview cloned from the styled card inside the shell.
 */
-const registerKanbanCardDrag = ({ element, getInitialData, canDrag, onDragStart, onDrop }) => draggable({
+const registerKanbanCardDrag = ({ element, getInitialData, canDrag, onDragStart, onDrop, getDragPreview }) => draggable({
 	element,
 	getInitialData,
 	getInitialDataForExternal: () => ({ [KANBAN_CARD_DRAG_MIME]: "" }),
@@ -32,12 +42,14 @@ const registerKanbanCardDrag = ({ element, getInitialData, canDrag, onDragStart,
 			nativeSetDragImage,
 			getOffset: centerUnderPointer,
 			render: ({ container }) => {
-				const card = element.firstElementChild;
-				if (!(card instanceof HTMLElement)) return;
-				const clone = card.cloneNode(true);
-				if (!(clone instanceof HTMLElement)) return;
-				clone.style.width = `${card.getBoundingClientRect().width}px`;
-				container.append(clone);
+				const preview = getDragPreview?.() ?? { type: "card" };
+				switch (preview.type) {
+					case "custom": return preview.render(container);
+					case "card":
+						appendCardClone(element, container);
+						return;
+					default: return panic(`Unhandled kanban drag preview: ${String(preview)}`);
+				}
 			}
 		});
 	}

package/dist/kanban/index.d.ts

@@ -1,5 +1,5 @@
 import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./card-properties.js";
-import { KanbanCardShell, KanbanCardShellProps } from "./card-shell.js";
+import { KanbanCardSelectionModifiers, KanbanCardShell, KanbanCardShellProps } from "./card-shell.js";
 import { KanbanCellAction, KanbanCellActionProps } from "./cell-action.js";
 import { KanbanBandToggleActivation, KanbanColumnBandHeader, KanbanColumnBandHeaderProps } from "./column-band-header.js";
 import { KanbanBuiltInGroup, KanbanColumnBand, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
@@ -7,9 +7,9 @@ import { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOAR
 import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KanbanColumnBandSpan, hasKanbanColumnBands, resolveKanbanColumnBands } from "./column-bands.js";
 import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./column-header.js";
 import { KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX } from "./layout-tokens.js";
-import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
+import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, KanbanCardDragPreview, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
 import { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneColumnActionContext, KanbanSubgroupLaneColumnSummaryContext, KanbanSubgroupLaneIdentityContext } from "./subgroup-board.js";
 import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./band-peek.js";
 import { KANBAN_CARD_STICKY_TOP_VAR, KANBAN_STICKY_TOP_VAR, KanbanCollapsedBandCaption, KanbanCollapsedBandCaptionProps } from "./sticky-lane.js";
 import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps } from "./virtual-cell.js";
-export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_STICKY_TOP_VAR, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, KanbanCollapsedBandCaption, type KanbanCollapsedBandCaptionProps, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanSchema, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneColumnActionContext, type KanbanSubgroupLaneColumnSummaryContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, hasKanbanColumnBands, isKanbanGroupingRenderable, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows };
+export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_STICKY_TOP_VAR, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, type KanbanCardDragPreview, type KanbanCardFieldSelection, type KanbanCardSelectionModifiers, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, KanbanCollapsedBandCaption, type KanbanCollapsedBandCaptionProps, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanSchema, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneColumnActionContext, type KanbanSubgroupLaneColumnSummaryContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, hasKanbanColumnBands, isKanbanGroupingRenderable, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows };

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 ("default" | "sm" | "lg")[];
+declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/dist/lib/matter-colors.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react";
 //#region src/lib/matter-colors.d.ts
 export declare const MATTER_SWATCHES: readonly ["--option-blue", "--option-emerald", "--option-amber", "--option-violet", "--option-red", "--option-cyan", "--option-orange", "--option-teal"];
-export declare const getMatterSwatch: (id: string) => "--option-blue" | "--option-emerald" | "--option-amber" | "--option-violet" | "--option-red" | "--option-cyan" | "--option-orange" | "--option-teal";
+export declare const getMatterSwatch: (id: string) => "--option-amber" | "--option-blue" | "--option-cyan" | "--option-emerald" | "--option-orange" | "--option-red" | "--option-teal" | "--option-violet";
 export declare const getMatterColor: (id: string) => string;
 export declare const getMatterPickerColor: (id: string, color: string | null) => string;
 export declare const toStoredMatterColor: (color: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.52.0",
+  "version": "0.53.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",
@@ -744,16 +744,17 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "input-otp": "^1.5.0",
-    "lucide-react": "1.41.0",
+    "lucide-react": "1.59.0",
     "tailwind-merge": "^3.7.0",
     "temporal-polyfill": "1.0.5"
   },
   "devDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.1",
-    "@base-ui/react": "1.8.0",
+    "@base-ui/react": "1.9.0",
     "@happy-dom/global-registrator": "21.0.4",
     "@playwright/test": "^1.63.0",
+    "@stll/property-testing": "0.0.0",
     "@stll/typescript-config": "0.0.0",
     "@tailwindcss/vite": "4.3.3",
     "@tanstack/react-virtual": "^3.14.21",
@@ -766,6 +767,7 @@
     "react-dom": "^19.3.0",
     "tailwindcss": "4.3.3",
     "tsdown": "0.23.0",
+    "tsrs": "0.18.0-ts7.1.0-dev.20260929",
     "vite": "8.3.4"
   },
   "peerDependencies": {