@object-ui/plugin-kanban 0.3.1 → 0.5.0

package/dist/src/KanbanEnhanced.d.ts

@@ -0,0 +1,36 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    badges?: Array<{
+        label: string;
+        variant?: "default" | "secondary" | "destructive" | "outline";
+    }>;
+    [key: string]: any;
+}
+export interface KanbanColumn {
+    id: string;
+    title: string;
+    cards: KanbanCard[];
+    limit?: number;
+    className?: string;
+    collapsed?: boolean;
+}
+export interface KanbanEnhancedProps {
+    columns: KanbanColumn[];
+    onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, newIndex: number) => void;
+    onColumnToggle?: (columnId: string, collapsed: boolean) => void;
+    enableVirtualScrolling?: boolean;
+    virtualScrollThreshold?: number;
+    className?: string;
+}
+export declare function KanbanEnhanced({ columns, onCardMove, onColumnToggle, enableVirtualScrolling, virtualScrollThreshold, className, }: KanbanEnhancedProps): import("react/jsx-runtime").JSX.Element;
+export default KanbanEnhanced;
+//# sourceMappingURL=KanbanEnhanced.d.ts.map

package/dist/src/KanbanEnhanced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanEnhanced.d.ts","sourceRoot":"","sources":["../../src/KanbanEnhanced.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA0BH,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,CAAA;KAAE,CAAC,CAAA;IAChG,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACjG,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAC/D,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAsLD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,UAAU,EACV,cAAc,EACd,sBAA8B,EAC9B,sBAA2B,EAC3B,SAAS,GACV,EAAE,mBAAmB,2CAkJrB;AAED,eAAe,cAAc,CAAC"}

package/dist/src/ObjectKanban.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { DataSource } from '../../types/src';
+import { KanbanSchema } from './types';
+export interface ObjectKanbanProps {
+    schema: KanbanSchema;
+    dataSource?: DataSource;
+    className?: string;
+}
+export declare const ObjectKanban: React.FC<ObjectKanbanProps>;
+//# sourceMappingURL=ObjectKanban.d.ts.map

package/dist/src/ObjectKanban.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectKanban.d.ts","sourceRoot":"","sources":["../../src/ObjectKanban.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuKpD,CAAA"}

package/dist/src/index.d.ts

@@ -1,5 +1,8 @@
 import { default as React } from 'react';
+import { ObjectKanban } from './ObjectKanban';
 export type { KanbanSchema, KanbanCard, KanbanColumn } from './types';
+export { ObjectKanban };
+export type { ObjectKanbanProps } from './ObjectKanban';
 export interface KanbanRendererProps {
     schema: {
         type: string;
@@ -18,5 +21,11 @@ export interface KanbanRendererProps {
 export declare const KanbanRenderer: React.FC<KanbanRendererProps>;
 export declare const kanbanComponents: {
     kanban: React.FC<KanbanRendererProps>;
+    'kanban-enhanced': React.LazyExoticComponent<typeof import('./KanbanEnhanced').KanbanEnhanced>;
+    'object-kanban': React.FC<import('./ObjectKanban').ObjectKanbanProps>;
 };
+export declare const ObjectKanbanRenderer: React.FC<{
+    schema: any;
+    [key: string]: any;
+}>;
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMtE,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;KACnG,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsCxD,CAAC;AAoGF,eAAO,MAAM,gBAAgB;;CAE5B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAMxD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;KACnG,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsCxD,CAAC;AAqGF,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AA2DF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,MAAM,EAAE,GAAG,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAG9E,CAAC"}

package/dist/src/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseSchema } from '@object-ui/types';
+import { BaseSchema } from '../../types/src';
 /**
  * Kanban card interface.
  */
@@ -28,6 +28,26 @@ export interface KanbanColumn {
  */
 export interface KanbanSchema extends BaseSchema {
     type: 'kanban';
+    /**
+     * Object name to fetch data from.
+     */
+    objectName?: string;
+    /**
+     * Field to group records by (maps to column IDs).
+     */
+    groupBy?: string;
+    /**
+     * Field to use as the card title.
+     */
+    cardTitle?: string;
+    /**
+     * Fields to display on the card.
+     */
+    cardFields?: string[];
+    /**
+     * Static data or bound data.
+     */
+    data?: any[];
     /**
      * Array of columns to display in the kanban board.
      * Each column contains an array of cards.

package/dist/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,CAAA;KAAE,CAAC,CAAC;IACjG,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,IAAI,EAAE,QAAQ,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAElG;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,CAAA;KAAE,CAAC,CAAC;IACjG,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,IAAI,EAAE,QAAQ,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAElG;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-kanban",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "type": "module",
   "license": "MIT",
   "description": "Kanban board plugin for Object UI, powered by dnd-kit",
@@ -27,22 +27,25 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@object-ui/react": "0.3.1",
-    "@object-ui/types": "0.3.1",
-    "@object-ui/core": "0.3.1",
-    "@object-ui/components": "0.3.1"
+    "@tanstack/react-virtual": "^3.10.8",
+    "lucide-react": "^0.563.0",
+    "@object-ui/components": "0.5.0",
+    "@object-ui/core": "0.5.0",
+    "@object-ui/react": "0.5.0",
+    "@object-ui/types": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.9",
+    "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^5.1.3",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "@object-ui/data-objectstack": "0.5.0"
   },
   "scripts": {
     "build": "vite build",

package/src/KanbanEnhanced.tsx

@@ -0,0 +1,394 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from "react"
+import { useVirtualizer } from "@tanstack/react-virtual"
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  closestCorners,
+} from "@dnd-kit/core"
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, Button } from "@object-ui/components"
+import { ChevronDown, ChevronRight, AlertTriangle } from "lucide-react"
+
+const cn = (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ')
+
+export interface KanbanCard {
+  id: string
+  title: string
+  description?: string
+  badges?: Array<{ label: string; variant?: "default" | "secondary" | "destructive" | "outline" }>
+  [key: string]: any
+}
+
+export interface KanbanColumn {
+  id: string
+  title: string
+  cards: KanbanCard[]
+  limit?: number
+  className?: string
+  collapsed?: boolean
+}
+
+export interface KanbanEnhancedProps {
+  columns: KanbanColumn[]
+  onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, newIndex: number) => void
+  onColumnToggle?: (columnId: string, collapsed: boolean) => void
+  enableVirtualScrolling?: boolean
+  virtualScrollThreshold?: number
+  className?: string
+}
+
+function SortableCard({ card }: { card: KanbanCard }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: card.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : undefined,
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <Card className="mb-2 cursor-grab active:cursor-grabbing border-border bg-card/60 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 group">
+        <CardHeader className="p-4">
+          <CardTitle className="text-sm font-medium font-mono tracking-tight text-foreground group-hover:text-primary transition-colors">{card.title}</CardTitle>
+          {card.description && (
+            <CardDescription className="text-xs text-muted-foreground font-mono">
+              {card.description}
+            </CardDescription>
+          )}
+        </CardHeader>
+        {card.badges && card.badges.length > 0 && (
+          <CardContent className="p-4 pt-0">
+            <div className="flex flex-wrap gap-1">
+              {card.badges.map((badge, index) => (
+                <Badge key={index} variant={badge.variant || "default"} className="text-xs">
+                  {badge.label}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        )}
+      </Card>
+    </div>
+  )
+}
+
+function VirtualizedCardList({ cards, parentRef }: { cards: KanbanCard[]; parentRef: React.RefObject<HTMLDivElement | null> }) {
+  const rowVirtualizer = useVirtualizer({
+    count: cards.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 120,
+    overscan: 5,
+  })
+
+  return (
+    <div
+      style={{
+        height: `${rowVirtualizer.getTotalSize()}px`,
+        width: '100%',
+        position: 'relative',
+      }}
+    >
+      {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+        const card = cards[virtualItem.index]
+        return (
+          <div
+            key={card.id}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              transform: `translateY(${virtualItem.start}px)`,
+            }}
+          >
+            <SortableCard card={card} />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function KanbanColumnEnhanced({
+  column,
+  cards,
+  onToggle,
+  enableVirtual,
+}: {
+  column: KanbanColumn
+  cards: KanbanCard[]
+  onToggle: (collapsed: boolean) => void
+  enableVirtual: boolean
+}) {
+  const safeCards = cards || []
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const { setNodeRef } = useSortable({
+    id: column.id,
+    data: {
+      type: "column",
+    },
+  })
+
+  const isLimitExceeded = column.limit && safeCards.length >= column.limit
+  const isNearLimit = column.limit && safeCards.length >= column.limit * 0.8
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        "flex flex-col flex-shrink-0 rounded-lg border border-border bg-card/20 backdrop-blur-sm shadow-xl transition-all",
+        column.collapsed ? "w-16" : "w-80",
+        column.className
+      )}
+    >
+      <div className="p-4 border-b border-border/50 bg-muted/20 flex items-center justify-between">
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 w-6 p-0"
+            onClick={() => onToggle(!column.collapsed)}
+          >
+            {column.collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+          </Button>
+          {!column.collapsed && (
+            <>
+              <h3 className="font-mono text-sm font-semibold tracking-wider text-primary/90 uppercase truncate">
+                {column.title}
+              </h3>
+              <div className="flex items-center gap-2">
+                <span className={cn(
+                  "font-mono text-xs",
+                  isLimitExceeded ? "text-destructive" : isNearLimit ? "text-yellow-500" : "text-muted-foreground"
+                )}>
+                  {safeCards.length}
+                  {column.limit && ` / ${column.limit}`}
+                </span>
+                {isLimitExceeded && (
+                  <Badge variant="destructive" className="text-xs">
+                    Full
+                  </Badge>
+                )}
+                {isNearLimit && !isLimitExceeded && (
+                  <AlertTriangle className="h-3 w-3 text-yellow-500" />
+                )}
+              </div>
+            </>
+          )}
+        </div>
+        {column.collapsed && (
+          <div className="flex flex-col items-center gap-1">
+            <span className="font-mono text-xs font-bold text-primary/90 [writing-mode:vertical-rl] rotate-180">
+              {column.title}
+            </span>
+            <Badge variant="secondary" className="text-xs">
+              {safeCards.length}
+            </Badge>
+          </div>
+        )}
+      </div>
+      {!column.collapsed && (
+        <div ref={scrollRef} className="flex-1 p-4 overflow-y-auto" style={{ maxHeight: '600px' }}>
+          <SortableContext
+            items={safeCards.map((c) => c.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            {enableVirtual ? (
+              <VirtualizedCardList cards={safeCards} parentRef={scrollRef} />
+            ) : (
+              <div className="space-y-2">
+                {safeCards.map((card) => (
+                  <SortableCard key={card.id} card={card} />
+                ))}
+              </div>
+            )}
+          </SortableContext>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function KanbanEnhanced({
+  columns,
+  onCardMove,
+  onColumnToggle,
+  enableVirtualScrolling = false,
+  virtualScrollThreshold = 50,
+  className,
+}: KanbanEnhancedProps) {
+  const [activeCard, setActiveCard] = React.useState<KanbanCard | null>(null)
+  
+  const safeColumns = React.useMemo(() => {
+    return (columns || []).map(col => ({
+      ...col,
+      cards: col.cards || []
+    }));
+  }, [columns]);
+
+  const [boardColumns, setBoardColumns] = React.useState<KanbanColumn[]>(safeColumns)
+
+  React.useEffect(() => {
+    setBoardColumns(safeColumns)
+  }, [safeColumns])
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  )
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event
+    const card = findCard(active.id as string)
+    setActiveCard(card)
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+    setActiveCard(null)
+
+    if (!over) return
+
+    const activeId = active.id as string
+    const overId = over.id as string
+
+    if (activeId === overId) return
+
+    const activeColumn = findColumnByCardId(activeId)
+    const overColumn = findColumnByCardId(overId) || findColumnById(overId)
+
+    if (!activeColumn || !overColumn) return
+
+    if (activeColumn.id === overColumn.id) {
+      const cards = [...activeColumn.cards]
+      const oldIndex = cards.findIndex((c) => c.id === activeId)
+      const newIndex = cards.findIndex((c) => c.id === overId)
+
+      const newCards = arrayMove(cards, oldIndex, newIndex)
+      setBoardColumns((prev) =>
+        prev.map((col) =>
+          col.id === activeColumn.id ? { ...col, cards: newCards } : col
+        )
+      )
+    } else {
+      const activeCards = [...activeColumn.cards]
+      const overCards = [...overColumn.cards]
+      const activeIndex = activeCards.findIndex((c) => c.id === activeId)
+      
+      const isDroppingOnColumn = overId === overColumn.id
+      const overIndex = isDroppingOnColumn 
+        ? overCards.length 
+        : overCards.findIndex((c) => c.id === overId)
+
+      const [movedCard] = activeCards.splice(activeIndex, 1)
+      overCards.splice(overIndex, 0, movedCard)
+
+      setBoardColumns((prev) =>
+        prev.map((col) => {
+          if (col.id === activeColumn.id) {
+            return { ...col, cards: activeCards }
+          }
+          if (col.id === overColumn.id) {
+            return { ...col, cards: overCards }
+          }
+          return col
+        })
+      )
+
+      if (onCardMove) {
+        onCardMove(activeId, activeColumn.id, overColumn.id, overIndex)
+      }
+    }
+  }
+
+  const findCard = React.useCallback(
+    (cardId: string): KanbanCard | null => {
+      for (const column of boardColumns) {
+        const card = column.cards.find((c) => c.id === cardId)
+        if (card) return card
+      }
+      return null
+    },
+    [boardColumns]
+  )
+
+  const findColumnByCardId = React.useCallback(
+    (cardId: string): KanbanColumn | null => {
+      return boardColumns.find((col) => col.cards.some((c) => c.id === cardId)) || null
+    },
+    [boardColumns]
+  )
+
+  const findColumnById = React.useCallback(
+    (columnId: string): KanbanColumn | null => {
+      return boardColumns.find((col) => col.id === columnId) || null
+    },
+    [boardColumns]
+  )
+
+  const handleColumnToggle = React.useCallback((columnId: string, collapsed: boolean) => {
+    setBoardColumns(prev => 
+      prev.map(col => col.id === columnId ? { ...col, collapsed } : col)
+    )
+    onColumnToggle?.(columnId, collapsed)
+  }, [onColumnToggle])
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <div className={cn("flex gap-4 overflow-x-auto p-4", className)}>
+        {boardColumns.map((column) => {
+          const shouldUseVirtual = enableVirtualScrolling && column.cards.length > virtualScrollThreshold
+          return (
+            <KanbanColumnEnhanced
+              key={column.id}
+              column={column}
+              cards={column.cards}
+              onToggle={(collapsed) => handleColumnToggle(column.id, collapsed)}
+              enableVirtual={shouldUseVirtual}
+            />
+          )
+        })}
+      </div>
+      <DragOverlay>
+        {activeCard ? <SortableCard card={activeCard} /> : null}
+      </DragOverlay>
+    </DndContext>
+  )
+}
+
+export default KanbanEnhanced;

package/src/ObjectKanban.msw.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeAll, afterAll, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ObjectKanban } from './ObjectKanban';
+import { ObjectStackAdapter } from '@object-ui/data-objectstack';
+import { setupServer } from 'msw/node';
+import { http, HttpResponse } from 'msw';
+import React from 'react';
+
+// Register layout components (if needed by cards)
+// registerLayout();
+
+const BASE_URL = 'http://localhost';
+
+// --- Mock Data ---
+
+const mockTasks = {
+  value: [
+    { _id: '1', title: 'Task 1', status: 'todo', description: 'Description 1' },
+    { _id: '2', title: 'Task 2', status: 'done', description: 'Description 2' },
+    { _id: '3', title: 'Task 3', status: 'todo', description: 'Description 3' }
+  ]
+};
+
+// --- MSW Setup ---
+
+const handlers = [
+  // OPTIONS handler for CORS preflight checks
+  http.options('*', () => {
+    return new HttpResponse(null, { status: 200 });
+  }),
+
+  // Health check
+  http.get(`${BASE_URL}/api/v1`, () => {
+    return HttpResponse.json({ status: 'ok', version: '1.0.0' });
+  }),
+
+  // Data Query: GET /api/v1/data/tasks
+  http.get(`${BASE_URL}/api/v1/data/tasks`, () => {
+    return HttpResponse.json(mockTasks);
+  })
+];
+
+const server = setupServer(...handlers);
+
+// --- Test Suite ---
+
+describe('ObjectKanban with MSW', () => {
+  if (!process.env.OBJECTSTACK_API_URL) {
+    beforeAll(() => server.listen());
+    afterEach(() => server.resetHandlers());
+    afterAll(() => server.close());
+  }
+
+  const dataSource = new ObjectStackAdapter({
+    baseUrl: BASE_URL,
+  });
+
+  it('fetches tasks and renders them in columns based on groupBy', async () => {
+    render(
+      <ObjectKanban
+        schema={{
+          type: 'kanban',
+          objectName: 'tasks',
+          groupBy: 'status',
+          columns: [
+            { id: 'todo', title: 'To Do', cards: [] },
+            { id: 'done', title: 'Done', cards: [] }
+          ]
+        }}
+        dataSource={dataSource}
+      />
+    );
+
+    // Initial state might show Skeleton, wait for data
+    await waitFor(() => {
+        expect(screen.getByText('Task 1')).toBeInTheDocument();
+    }, { timeout: 10000 });
+
+    // Check classification
+    // Task 1 (todo) and Task 3 (todo) should be in To Do column.
+    // Task 2 (done) should be in Done column.
+    
+    // We can verify "Task 1" is present.
+    expect(screen.getByText('Task 2')).toBeInTheDocument();
+    expect(screen.getByText('Task 3')).toBeInTheDocument();
+    
+    // Check descriptions
+    expect(screen.getByText('Description 1')).toBeInTheDocument();
+  });
+});