@rebasepro/admin 0.0.1-canary.4f204c2

package/src/components/EntityCollectionView/BoardSortableList.tsx

@@ -0,0 +1,177 @@
+import React, { memo, useEffect, useMemo, useRef } from "react";
+import { useDroppable } from "@dnd-kit/core";
+import { useSortable, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { CircularProgress, cls } from "@rebasepro/ui";
+import { BoardItem, BoardItemViewProps } from "./board_types";
+
+interface BoardSortableListProps<M extends Record<string, unknown>> {
+    columnId: string;
+    items: BoardItem<M>[];
+    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
+    isDragging: boolean;
+    isDragOverColumn: boolean;
+    loading?: boolean;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+}
+
+export function BoardSortableList<M extends Record<string, unknown>>({
+    columnId,
+    items,
+    ItemComponent,
+    isDragging,
+    isDragOverColumn,
+    loading = false,
+    hasMore = false,
+    onLoadMore
+}: BoardSortableListProps<M>) {
+    const {
+        setNodeRef
+    } = useDroppable({
+        id: columnId,
+        data: { type: "ITEM-LIST" }
+    });
+
+    // Infinite scroll sentinel ref - must be inside scrollable container
+    const sentinelRef = useRef<HTMLDivElement>(null);
+    const isLoadingRef = useRef(false);
+    isLoadingRef.current = loading;
+    const lastLoadTimeRef = useRef(0);
+
+    // Set up IntersectionObserver for infinite scroll
+    useEffect(() => {
+        if (!sentinelRef.current || !hasMore || !onLoadMore) return;
+
+        const sentinel = sentinelRef.current;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                const now = Date.now();
+                if (
+                    entries[0].isIntersecting &&
+                    hasMore &&
+                    !isLoadingRef.current &&
+                    now - lastLoadTimeRef.current > 500
+                ) {
+                    lastLoadTimeRef.current = now;
+                    onLoadMore();
+                }
+            },
+            { threshold: 0.1 }
+        );
+
+        observer.observe(sentinel);
+
+        // Check if sentinel is already visible when effect runs
+        // This handles the case where the sentinel was visible before the observer was created
+        const rect = sentinel.getBoundingClientRect();
+        const containerRect = sentinel.parentElement?.getBoundingClientRect();
+        if (containerRect && rect.top < containerRect.bottom && rect.bottom > containerRect.top) {
+            const now = Date.now();
+            if (hasMore && !isLoadingRef.current && now - lastLoadTimeRef.current > 500) {
+                lastLoadTimeRef.current = now;
+                onLoadMore();
+            }
+        }
+
+        return () => observer.disconnect();
+    }, [hasMore, onLoadMore]);
+
+    // Memoize className to avoid recomputation on every render
+    const containerClassName = useMemo(() => cls(
+        "flex flex-col p-2 transition-opacity duration-100 transition-bg ease-linear w-full overflow-y-auto no-scrollbar flex-1 rounded-md",
+        isDragging && isDragOverColumn
+            ? "bg-surface-accent-200 dark:bg-surface-900"
+            : isDragging
+                ? "bg-surface-50 dark:bg-surface-900 hover:bg-surface-accent-100 dark:hover:bg-surface-800"
+                : "bg-surface-50 dark:bg-surface-900"
+    ), [isDragging, isDragOverColumn]);
+
+    return (
+        <div
+            ref={setNodeRef}
+            className={containerClassName}
+            style={{ minHeight: 80 }}
+        >
+            <SortableContext 
+                items={items.map(i => i.id)} 
+                strategy={verticalListSortingStrategy}
+            >
+                {items.length === 0 && !loading ? (
+                    <div className="flex-1 flex items-center justify-center">
+                        <span className="text-xs text-surface-400 dark:text-surface-500">
+                            No items
+                        </span>
+                    </div>
+                ) : (
+                    <>
+                        {items.map((item, index) => (
+                            <SortableItem
+                                key={item.id}
+                                item={item}
+                                index={index}
+                                columnId={columnId}
+                                ItemComponent={ItemComponent}
+                            />
+                        ))}
+                        {/* Infinite scroll sentinel - inside scrollable container */}
+                        {(loading || hasMore) && (
+                            <div ref={sentinelRef} className="flex items-center justify-center py-2 min-h-6">
+                                {loading && <CircularProgress size="smallest"/>}
+                            </div>
+                        )}
+                    </>
+                )}
+            </SortableContext>
+        </div>
+    );
+}
+
+interface SortableItemProps<M extends Record<string, unknown>> {
+    item: BoardItem<M>;
+    index: number;
+    columnId: string;
+    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
+}
+
+// Memoized to prevent unnecessary re-renders when other items in the list change
+const SortableItem = memo(function SortableItem<M extends Record<string, unknown>>({
+    item,
+    index,
+    columnId,
+    ItemComponent
+}: SortableItemProps<M>) {
+    const {
+        setNodeRef,
+        attributes,
+        listeners,
+        isDragging: isItemBeingDragged,
+        transform,
+        transition
+    } = useSortable({
+        id: item.id,
+        data: {
+            type: "ITEM",
+            columnId
+        }
+    });
+
+    // Memoize style object to prevent object recreation on each render
+    const sortableStyle = useMemo(() => ({
+        transform: CSS.Transform.toString(transform),
+        transition,
+        zIndex: isItemBeingDragged ? 2 : 1,
+        opacity: isItemBeingDragged ? 0 : 1
+    }), [transform, transition, isItemBeingDragged]);
+
+    return (
+        <div ref={setNodeRef} style={sortableStyle} {...attributes} {...listeners}>
+            <ItemComponent
+                item={item}
+                isDragging={isItemBeingDragged}
+                index={index}
+            />
+        </div>
+    );
+}) as <M extends Record<string, unknown>>(props: SortableItemProps<M>) => React.ReactElement;

package/src/components/EntityCollectionView/EntityBoardCard.tsx

@@ -0,0 +1,264 @@
+import type { EntityCollection } from "@rebasepro/types";
+import React, { memo, useCallback, useMemo } from "react";
+import { Entity } from "@rebasepro/types";
+import { Checkbox, Chip, cls, defaultBorderMixin, Markdown } from "@rebasepro/ui";
+import { PropertyPreview } from "../../preview";
+import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/core";
+import { BoardItemViewProps } from "./board_types";
+import { useCollectionSlotKeys, resolveEntitySlots } from "./useEntityPreviewSlots";
+
+export type EntityBoardCardProps<M extends Record<string, unknown> = Record<string, unknown>> = BoardItemViewProps<M> & {
+    collection: EntityCollection<M>;
+    onClick?: (entity: Entity<M>) => void;
+    selected?: boolean;
+    onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
+    selectionEnabled?: boolean;
+};
+
+/**
+ * Compact card component for displaying an entity in a Kanban board.
+ * Uses the shared slot system for consistent preview rendering.
+ *
+ * Selection UX: The checkbox overlays on top of the image/icon thumbnail area,
+ * revealed on card hover or when the card is selected. This keeps the card
+ * layout clean while providing intuitive selection affordance.
+ */
+function EntityBoardCardInner<M extends Record<string, unknown> = Record<string, unknown>>({
+    item,
+    isDragging,
+    isGroupedOver,
+    style,
+    collection,
+    onClick,
+    selected,
+    onSelectionChange,
+    selectionEnabled = false
+}: EntityBoardCardProps<M>) {
+    const entity = item.entity;
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    const slotKeys = useCollectionSlotKeys(
+        collection as EntityCollection<Record<string, unknown>>,
+        authController,
+        customizationController.propertyConfigs
+    );
+
+    const slots = useMemo(
+        () => resolveEntitySlots(
+            entity as Entity<Record<string, unknown>>,
+            collection as EntityCollection<Record<string, unknown>>,
+            slotKeys
+        ),
+        [entity, collection, slotKeys]
+    );
+
+    const handleClick = useCallback((e: React.MouseEvent) => {
+        // Cmd+click (Mac) or Ctrl+click (Windows) toggles selection
+        if ((e.metaKey || e.ctrlKey) && selectionEnabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            onSelectionChange?.(entity, !selected);
+            return;
+        }
+        if (onClick) {
+            e.stopPropagation();
+            onClick(entity);
+        }
+    }, [entity, onClick, onSelectionChange, selected, selectionEnabled]);
+
+    const handleThumbnailClick = useCallback((e: React.MouseEvent) => {
+        if (!selectionEnabled) return;
+        e.stopPropagation();
+        e.preventDefault();
+        onSelectionChange?.(entity, !selected);
+    }, [entity, onSelectionChange, selected, selectionEnabled]);
+
+    const handleSelectionChange = useCallback((checked: boolean) => {
+        onSelectionChange?.(entity, checked);
+    }, [entity, onSelectionChange]);
+
+    // Memoize className computations
+    const backgroundColor = useMemo((): string => {
+        if (isDragging) {
+            return "bg-surface-100 dark:bg-surface-800";
+        }
+        if (isGroupedOver) {
+            return "bg-surface-200 dark:bg-surface-700";
+        }
+        return "bg-white dark:bg-surface-800 hover:bg-surface-50 dark:hover:bg-surface-700";
+    }, [isDragging, isGroupedOver]);
+
+    const borderColor = useMemo((): string =>
+        isDragging ? "ring-2 ring-primary" : "", [isDragging]);
+
+    // Memoize the card className — use CSS group for hover-reveal of checkbox
+    const cardClassName = useMemo(() => cls(
+        "group/card p-2 flex items-start border rounded-lg cursor-pointer transition-all duration-200",
+        defaultBorderMixin,
+        borderColor,
+        backgroundColor,
+        selected
+            ? "ring-2 ring-primary bg-primary/[0.03] dark:bg-primary/[0.06]"
+            : "hover:shadow-sm"
+    ), [borderColor, backgroundColor, selected]);
+
+    return (
+        <div
+            style={style}
+            className="py-1"
+            data-is-dragging={isDragging}
+            data-testid={item.id}
+            onClick={handleClick}
+        >
+            <div className={cardClassName}>
+                {/* Thumbnail area with selection overlay */}
+                <div
+                    className="relative w-10 h-10 rounded-md shrink-0 mr-2"
+                    onClick={handleThumbnailClick}
+                >
+                    {/* Image or fallback icon */}
+                    {slots.image ? (
+                        <div className={cls(
+                            "w-10 h-10 rounded-md overflow-hidden transition-opacity duration-200",
+                            selectionEnabled && "group-hover/card:opacity-30",
+                            selected && "opacity-0"
+                        )}>
+                            <PropertyPreview
+                                property={slots.image.property}
+                                propertyKey={slots.image.propertyKey}
+                                size="small"
+                                value={slots.image.value}
+                                fill={true}
+                            />
+                        </div>
+                    ) : (
+                        <div className={cls(
+                            "w-10 h-10 rounded-md bg-surface-100 dark:bg-surface-900 flex items-center justify-center transition-opacity duration-200",
+                            selectionEnabled && "group-hover/card:opacity-30",
+                            selected && "opacity-0"
+                        )}>
+                            <IconForView
+                                collectionOrView={collection}
+                                color="disabled"
+                                size="small"
+                            />
+                        </div>
+                    )}
+
+                    {/* Selection checkbox overlay — visible on hover or when selected */}
+                    {selectionEnabled && (
+                        <div className={cls(
+                            "absolute inset-0 flex items-center justify-center rounded-md transition-all duration-200",
+                            selected
+                                ? "opacity-100 bg-primary/10 dark:bg-primary/20"
+                                : "opacity-0 group-hover/card:opacity-100"
+                        )}>
+                            <div className={cls(
+                                "transition-transform duration-200",
+                                selected
+                                    ? "scale-100"
+                                    : "scale-75 group-hover/card:scale-100"
+                            )}>
+                                <Checkbox
+                                    checked={selected ?? false}
+                                    onCheckedChange={handleSelectionChange}
+                                    size="small"
+                                    padding={false}
+                                />
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                    {/* Title slot */}
+                    <div className="line-clamp-2 text-sm font-medium">
+                        {slots.title ? (
+                            <PropertyPreview
+                                propertyKey={slots.title.propertyKey}
+                                value={slots.title.value}
+                                property={slots.title.property}
+                                size="small"
+                            />
+                        ) : (
+                            <span className="text-surface-500">{entity.id}</span>
+                        )}
+                    </div>
+                    {/* Subtitle / Description */}
+                    {slots.subtitle ? (
+                        <div className="text-xs text-surface-500 mt-1 line-clamp-3 opacity-80">
+                            {typeof slots.subtitle.value === "string" ? (
+                                <Markdown source={slots.subtitle.value} size="small" />
+                            ) : (
+                                <PropertyPreview
+                                    propertyKey={slots.subtitle.propertyKey}
+                                    value={slots.subtitle.value}
+                                    property={slots.subtitle.property}
+                                    size="small"
+                                />
+                            )}
+                        </div>
+                    ) : (
+                        <div className="text-xs text-surface-500 font-mono truncate mt-1">
+                            {entity.id}
+                        </div>
+                    )}
+                    {/* Relation chips slot */}
+                    {slots.relations.length > 0 && (
+                        <div className="flex items-center gap-1 mt-1 overflow-hidden max-w-full flex-wrap">
+                            {slots.relations.map((rel) => (
+                                rel.items.map((item) => (
+                                    <Chip
+                                        key={`${rel.propertyKey}-${item.id}`}
+                                        size="smallest"
+                                        colorScheme={rel.colorScheme}
+                                        className="!text-[10px] !leading-tight !py-0 shrink-0 max-w-[90px] truncate"
+                                    >
+                                        {item.displayName}
+                                    </Chip>
+                                ))
+                            ))}
+                            {slots.relations.some(r => r.totalCount > r.items.length) && (
+                                <span className="text-[10px] text-surface-400 dark:text-surface-500 shrink-0">
+                                    +{slots.relations.reduce((acc, r) => acc + Math.max(0, r.totalCount - r.items.length), 0)}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// Memoized to prevent unnecessary re-renders when other cards in the board change
+export const EntityBoardCard = memo(EntityBoardCardInner) as typeof EntityBoardCardInner;
+
+/**
+ * Wrapper component that adapts EntityBoardCard to BoardItemViewProps interface
+ */
+export function createEntityBoardCardComponent<M extends Record<string, unknown>>(
+    collection: EntityCollection<M>,
+    options: {
+        onClick?: (entity: Entity<M>) => void;
+        isEntitySelected?: (entity: Entity<M>) => boolean;
+        onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
+        selectionEnabled?: boolean;
+    }
+): React.ComponentType<BoardItemViewProps<M>> {
+    return function EntityBoardCardWrapper(props: BoardItemViewProps<M>) {
+        return (
+            <EntityBoardCard
+                {...props}
+                collection={collection}
+                onClick={options.onClick}
+                selected={options.isEntitySelected?.(props.item.entity)}
+                onSelectionChange={options.onSelectionChange}
+                selectionEnabled={options.selectionEnabled}
+            />
+        );
+    };
+}

package/src/components/EntityCollectionView/EntityCard.tsx

@@ -0,0 +1,224 @@
+import type { EntityCollection } from "@rebasepro/types";
+import React, { useMemo } from "react";
+import { CollectionSize, Entity } from "@rebasepro/types";
+import {
+    Card,
+    Checkbox,
+    Chip,
+    cls,
+    Typography
+} from "@rebasepro/ui";
+import { PropertyPreview } from "../../preview";
+import {
+    useAuthController,
+    useCustomizationController
+} from "@rebasepro/core";
+import { useAnalyticsController } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/core";
+import { useCollectionSlotKeys, resolveEntitySlots } from "./useEntityPreviewSlots";
+
+export type EntityCardProps<M extends Record<string, unknown> = Record<string, unknown>> = {
+    entity: Entity<M>;
+    collection: EntityCollection<M>;
+    onClick?: (entity: Entity<M>) => void;
+    selected?: boolean;
+    highlighted?: boolean;
+    onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
+    selectionEnabled?: boolean;
+    /**
+     * Size of the card - affects checkbox styling
+     */
+    size?: CollectionSize;
+};
+
+/**
+ * Card component for displaying an entity in a grid view.
+ * Shows thumbnail, title, and preview properties via the shared slot system.
+ */
+export function EntityCard<M extends Record<string, unknown> = Record<string, unknown>>({
+    entity,
+    collection,
+    onClick,
+    selected,
+    highlighted,
+    onSelectionChange,
+    selectionEnabled,
+    size = "m"
+}: EntityCardProps<M>) {
+    const authController = useAuthController();
+    const analyticsController = useAnalyticsController();
+    const customizationController = useCustomizationController();
+
+    const slotKeys = useCollectionSlotKeys(
+        collection as EntityCollection<Record<string, unknown>>,
+        authController,
+        customizationController.propertyConfigs
+    );
+
+    const slots = useMemo(
+        () => resolveEntitySlots(
+            entity as Entity<Record<string, unknown>>,
+            collection as EntityCollection<Record<string, unknown>>,
+            slotKeys
+        ),
+        [entity, collection, slotKeys]
+    );
+
+    const handleClick = (e?: React.MouseEvent) => {
+        // Cmd+click (Mac) or Ctrl+click (Windows) toggles selection
+        if (e && (e.metaKey || e.ctrlKey) && selectionEnabled) {
+            e.preventDefault();
+            onSelectionChange?.(entity, !selected);
+            return;
+        }
+        if (onClick) {
+            analyticsController.onAnalyticsEvent?.("card_view_entity_click", {
+                path: entity.path,
+                entityId: entity.id
+            });
+            onClick(entity);
+        }
+    };
+
+    const handleCheckboxClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+    };
+
+    const handleSelectionChange = (checked: boolean) => {
+        onSelectionChange?.(entity, checked);
+    };
+
+    return (
+        <Card
+            className={cls(
+                "cursor-pointer overflow-hidden group relative",
+                "transition-all duration-200",
+                "hover:shadow-lg hover:-translate-y-0.5",
+                selected && "ring-2 ring-primary",
+                highlighted && !selected && "ring-2 ring-primary ring-opacity-50"
+            )}
+            onClick={handleClick}
+        >
+            {/* Thumbnail area — image slot */}
+            <div className="aspect-[4/3] relative overflow-hidden bg-surface-100 dark:bg-surface-900">
+                {slots.image ? (
+                    <div className="w-full h-full">
+                        <PropertyPreview
+                            property={slots.image.property}
+                            propertyKey={slots.image.propertyKey}
+                            size="medium"
+                            value={slots.image.value}
+                            fill={true}
+                        />
+                    </div>
+                ) : (
+                    <div className="w-full h-full flex items-center justify-center">
+                        <IconForView
+                            collectionOrView={collection}
+                            color="disabled"
+                        />
+                    </div>
+                )}
+
+                {/* Hover overlay */}
+                <div className={cls(
+                    "absolute inset-0 bg-black/0 group-hover:bg-black/10",
+                    "transition-colors duration-200"
+                )}/>
+
+                {/* Selection checkbox */}
+                {selectionEnabled && (
+                    <div
+                        className={cls(
+                            "absolute",
+                            size === "xs" || size === "s" ? "top-1 left-1" : "top-2 left-2"
+                        )}
+                        onClick={handleCheckboxClick}
+                    >
+                        <Checkbox
+                            checked={selected ?? false}
+                            onCheckedChange={handleSelectionChange}
+                            size={size === "xs" ? "smallest" : "small"}
+                        />
+                    </div>
+                )}
+
+            </div>
+
+            {/* Content area */}
+            <div className="p-3">
+                {/* Entity ID */}
+                <Typography
+                    variant="caption"
+                    color="disabled"
+                    className="font-mono truncate block"
+                >
+                    {entity.id}
+                </Typography>
+
+                {/* Title slot */}
+                <div className="truncate my-1 text-sm font-medium min-h-[20px]">
+                    {slots.title ? (
+                        <PropertyPreview
+                            propertyKey={slots.title.propertyKey}
+                            value={slots.title.value}
+                            property={slots.title.property}
+                            size="small"
+                        />
+                    ) : (
+                        <Typography variant="body2" className="text-surface-500">
+                            {entity.id}
+                        </Typography>
+                    )}
+                </div>
+
+                {/* Subtitle slot */}
+                {slots.subtitle && (
+                    <div className="line-clamp-3 [&_div]:line-clamp-3 text-xs text-surface-600 dark:text-surface-400 [&_p]:!my-1 [&_p:first-child]:!mt-0 [&_p:last-child]:!mb-0">
+                        <PropertyPreview
+                            propertyKey={slots.subtitle.propertyKey}
+                            value={slots.subtitle.value}
+                            property={slots.subtitle.property}
+                            size="small"
+                        />
+                    </div>
+                )}
+
+                {/* Relation chips slot */}
+                {slots.relations.length > 0 && (
+                    <div className="flex items-center gap-1 mt-1 overflow-hidden max-w-full flex-wrap">
+                        {slots.relations.map((rel) => (
+                            rel.items.map((item) => (
+                                <Chip
+                                    key={`${rel.propertyKey}-${item.id}`}
+                                    size="smallest"
+                                    colorScheme={rel.colorScheme}
+                                    className="!text-[10px] !leading-tight !py-0 shrink-0 max-w-[100px] truncate"
+                                >
+                                    {item.displayName}
+                                </Chip>
+                            ))
+                        ))}
+                        {slots.relations.some(r => r.totalCount > r.items.length) && (
+                            <span className="text-[10px] text-surface-400 dark:text-surface-500 shrink-0">
+                                +{slots.relations.reduce((acc, r) => acc + Math.max(0, r.totalCount - r.items.length), 0)}
+                            </span>
+                        )}
+                    </div>
+                )}
+
+                {/* Status slot */}
+                {slots.status && (
+                    <div className="mt-1">
+                        <PropertyPreview
+                            propertyKey={slots.status.propertyKey}
+                            value={slots.status.value}
+                            property={slots.status.property}
+                            size="small"
+                        />
+                    </div>
+                )}
+            </div>
+        </Card>
+    );
+}