@object-ui/plugin-kanban 0.3.0 → 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/{KanbanImpl.d.ts → src/KanbanImpl.d.ts}

@@ -1,3 +1,10 @@
+/**
+ * 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;

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

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanImpl.d.ts","sourceRoot":"","sources":["../../src/KanbanImpl.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAyBH,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;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,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,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAsGD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CA0IvF"}

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

@@ -0,0 +1,31 @@
+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;
+        id?: string;
+        className?: string;
+        columns?: Array<any>;
+        data?: Array<any>;
+        groupBy?: string;
+        onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, newIndex: number) => void;
+    };
+}
+/**
+ * KanbanRenderer - The public API for the kanban board component
+ * This wrapper handles lazy loading internally using React.Suspense
+ */
+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

@@ -0,0 +1 @@
+{"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/{types.d.ts → src/types.d.ts}

@@ -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

@@ -0,0 +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;;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,8 +1,18 @@
 {
   "name": "@object-ui/plugin-kanban",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "license": "MIT",
+  "description": "Kanban board plugin for Object UI, powered by dnd-kit",
+  "homepage": "https://www.objectui.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/plugin-kanban"
+  },
+  "bugs": {
+    "url": "https://github.com/objectstack-ai/objectui/issues"
+  },
   "main": "dist/index.umd.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,22 +27,25 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@object-ui/components": "0.3.0",
-    "@object-ui/core": "0.3.0",
-    "@object-ui/react": "0.3.0",
-    "@object-ui/types": "0.3.0"
+    "@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": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@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/KanbanImpl.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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 {
   DndContext,