@rebasepro/app 0.0.1-canary.4829d6e

package/src/components/Debug/UIStyleGuide.tsx

@@ -0,0 +1,156 @@
+
+import React from "react";
+import { Button, cls, Container, IconButton, Paper, Separator, Trash2Icon, Typography } from "@rebasepro/ui";
+
+export const UIStyleGuide = () => {
+    const typographyVariants = [
+        "h1", "h2", "h3", "h4", "h5", "h6",
+        "subtitle1", "subtitle2",
+        "body1", "body2",
+        "caption", "label", "button"
+    ] as const;
+
+    const colors = ["primary", "secondary", "disabled", "error"] as const;
+    const buttonVariants = ["filled", "text"] as const;
+    const buttonColors = ["primary", "secondary", "text", "error", "neutral"] as const;
+    const buttonSizes = ["small", "medium", "large", "xl", "2xl"] as const;
+
+    const IconExample = () => (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+        </svg>
+    );
+
+    return (
+        <Container className="py-10 max-w-5xl">
+            <Typography variant="h2" gutterBottom>Rebase UI Style Guide</Typography>
+            <Typography variant="body1" color="secondary" className="mb-8">
+                A showcase of all typography and button variants available in the @rebasepro/ui library.
+            </Typography>
+
+            <section className="mb-12">
+                <Typography variant="h4" gutterBottom className="border-b pb-2 mb-6">Typography Variants</Typography>
+                <Paper className="p-6 space-y-6">
+                    {typographyVariants.map(variant => (
+                        <div key={variant} className="flex items-center gap-4 border-b border-surface-100 dark:border-surface-950 pb-4 last:border-0">
+                            <span className="w-24 text-[10px] uppercase tracking-wider text-text-disabled font-mono">{variant}</span>
+                            <Typography variant={variant}>
+                                The quick brown fox jumps over the lazy dog ({variant})
+                            </Typography>
+                        </div>
+                    ))}
+                </Paper>
+            </section>
+
+            <section className="mb-12">
+                <Typography variant="h4" gutterBottom className="border-b pb-2 mb-6">Typography Colors</Typography>
+                <Paper className="p-6 space-y-4">
+                    {colors.map(color => (
+                        <div key={color} className="flex items-center gap-4">
+                            <span className="w-24 text-[10px] uppercase tracking-wider text-text-disabled font-mono">{color}</span>
+                            <Typography color={color}>
+                                This text is rendered with color=&quot;{color}&quot;
+                            </Typography>
+                        </div>
+                    ))}
+                </Paper>
+            </section>
+
+            <section className="mb-12">
+                <Typography variant="h4" gutterBottom className="border-b pb-2 mb-6">Button Discovery</Typography>
+
+                <div className="space-y-8">
+                    {buttonVariants.map(variant => (
+                        <div key={variant}>
+                            <Typography variant="h6" gutterBottom className="capitalize mb-4">{variant} Buttons</Typography>
+                            <Paper className="p-6">
+                                <div className="flex flex-wrap gap-4">
+                                    {buttonColors.map(color => (
+                                        <div key={color} className="flex flex-col items-center gap-2">
+                                            <Button variant={variant} color={color}>
+                                                {color}
+                                            </Button>
+                                            <span className="text-[10px] text-text-disabled font-mono">{color}</span>
+                                        </div>
+                                    ))}
+                                    <div className="flex flex-col items-center gap-2">
+                                        <Button variant={variant} color="primary" disabled>
+                                            Disabled
+                                        </Button>
+                                        <span className="text-[10px] text-text-disabled font-mono">disabled</span>
+                                    </div>
+                                </div>
+                            </Paper>
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            <section className="mb-12">
+                <Typography variant="h4" gutterBottom className="border-b pb-2 mb-6">Button Sizes</Typography>
+                <Paper className="p-6">
+                    <div className="flex flex-wrap items-end gap-6 text-center">
+                        {buttonSizes.map(size => (
+                            <div key={size} className="flex flex-col items-center gap-4">
+                                <Button size={size} color="primary">
+                                    {size}
+                                </Button>
+                                <span className="text-[10px] text-text-disabled font-mono">{size}</span>
+                            </div>
+                        ))}
+                    </div>
+                </Paper>
+            </section>
+
+            <section className="mb-12">
+                <Typography variant="h4" gutterBottom className="border-b pb-2 mb-6">Icon Buttons</Typography>
+                <Paper className="p-6">
+                    <div className="flex flex-wrap gap-8 items-center">
+                        <div className="flex flex-col items-center gap-2">
+                            <IconButton color="primary">
+                                <IconExample/>
+                            </IconButton>
+                            <span className="text-[10px] text-text-disabled font-mono">primary</span>
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                            <IconButton color="secondary">
+                                <IconExample/>
+                            </IconButton>
+                            <span className="text-[10px] text-text-disabled font-mono">secondary</span>
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                            <IconButton size="small">
+                                <IconExample/>
+                            </IconButton>
+                            <span className="text-[10px] text-text-disabled font-mono">small</span>
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                            <IconButton disabled>
+                                <IconExample/>
+                            </IconButton>
+                            <span className="text-[10px] text-text-disabled font-mono">disabled</span>
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                            <IconButton size="small" color="error">
+                                <Trash2Icon/>
+                            </IconButton>
+                            <span className="text-[10px] text-text-disabled font-mono">delete</span>
+                        </div>
+                    </div>
+                </Paper>
+            </section>
+
+            <section className="mb-12">
+                <div className="flex justify-between items-center bg-surface-100 dark:bg-surface-950 p-8 rounded-xl border border-dashed border-surface-400">
+                    <div>
+                        <Typography variant="h5">Dark Mode Check</Typography>
+                        <Typography variant="body2" color="secondary">Typography and buttons should adapt automatically.</Typography>
+                    </div>
+                    <Button variant="filled" color="neutral" startIcon={<IconExample/>}>
+                        Sample Action
+                    </Button>
+                </div>
+            </section>
+        </Container>
+    );
+};

package/src/components/Debug/collection-views/CardViewDemo.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useMemo } from "react";
+import { Card, Typography, Chip, cls, defaultBorderMixin, SearchBar, ToggleButtonGroup } from "@rebasepro/ui";
+import { LayoutGridIcon, ListIcon, FolderKanbanIcon } from "lucide-react";
+import { SAMPLE_PROJECTS, STATUS_CONFIG, PRIORITY_CONFIG } from "./sample_data";
+import type { SampleProject } from "./sample_data";
+
+type CardSize = "sm" | "md" | "lg";
+
+export function CardViewDemo() {
+    const [searchTerm, setSearchTerm] = useState("");
+    const [cardSize, setCardSize] = useState<CardSize>("md");
+
+    const filtered = useMemo(() => {
+        if (!searchTerm) return SAMPLE_PROJECTS;
+        const lower = searchTerm.toLowerCase();
+        return SAMPLE_PROJECTS.filter(p =>
+            p.name.toLowerCase().includes(lower) || p.assignee.toLowerCase().includes(lower) || p.tags.some(t => t.toLowerCase().includes(lower))
+        );
+    }, [searchTerm]);
+
+    const gridClass = useMemo(() => {
+        switch (cardSize) {
+            case "sm": return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5";
+            case "md": return "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
+            case "lg": return "grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+        }
+    }, [cardSize]);
+
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center gap-3 flex-wrap">
+                <SearchBar onTextSearch={(term) => setSearchTerm(term ?? "")} placeholder="Search cards…" size="small" />
+                <ToggleButtonGroup value={cardSize} onValueChange={setCardSize} options={[
+                    { value: "sm" as const, label: "Small", icon: <LayoutGridIcon size={14} /> },
+                    { value: "md" as const, label: "Medium", icon: <ListIcon size={14} /> },
+                    { value: "lg" as const, label: "Large", icon: <FolderKanbanIcon size={14} /> }
+                ]} />
+                <Typography variant="caption" color="secondary" className="ml-auto">{filtered.length} projects</Typography>
+            </div>
+            <div className={cls("grid gap-4", gridClass)}>
+                {filtered.map(project => <ProjectCard key={project.id} project={project} compact={cardSize === "sm"} />)}
+            </div>
+            {filtered.length === 0 && <div className="flex items-center justify-center py-8"><Typography variant="label" color="secondary">No projects match your search</Typography></div>}
+        </div>
+    );
+}
+
+function ProjectCard({ project, compact }: { project: SampleProject; compact?: boolean }) {
+    const statusCfg = STATUS_CONFIG[project.status];
+    const priorityCfg = PRIORITY_CONFIG[project.priority];
+    const isOverdue = new Date(project.dueDate) < new Date() && project.status !== "done";
+
+    return (
+        <Card className={cls("cursor-pointer overflow-hidden group relative", "transition-all duration-200", "hover:shadow-lg hover:-translate-y-0.5")}>
+            <div className={cls("relative overflow-hidden bg-surface-100 dark:bg-surface-900", compact ? "h-20" : "aspect-[5/2]")}>
+                <div className="absolute inset-0 opacity-20 transition-all duration-300" style={{ background: `linear-gradient(90deg, var(--color-primary) ${project.progress}%, transparent ${project.progress}%)` }} />
+                <div className="absolute inset-0 flex flex-col items-center justify-center gap-1">
+                    <FolderKanbanIcon size={compact ? 20 : 28} className="text-surface-400 dark:text-surface-500" />
+                    {!compact && <Typography variant="caption" color="secondary" className="font-mono text-[10px]">{project.progress}% complete</Typography>}
+                </div>
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-200" />
+                <div className="absolute top-2 right-2"><Chip colorScheme={priorityCfg.color} size="smallest" outlined>{priorityCfg.label}</Chip></div>
+            </div>
+            <div className={compact ? "p-2" : "p-3"}>
+                <Typography variant="caption" color="disabled" className="font-mono truncate block text-[10px]">{project.id}</Typography>
+                <div className="truncate my-1"><Typography variant={compact ? "caption" : "body2"} className="font-medium">{project.name}</Typography></div>
+                {!compact && <Typography variant="caption" color="secondary" className="line-clamp-2 mb-2">{project.description}</Typography>}
+                <div className="flex items-center gap-1.5 flex-wrap">
+                    <Chip colorScheme={statusCfg.color} size="smallest">{statusCfg.label}</Chip>
+                    {!compact && project.tags.slice(0, 2).map(tag => <Chip key={tag} size="smallest" colorScheme="cyan" className="!text-[10px]">{tag}</Chip>)}
+                    {!compact && project.tags.length > 2 && <span className="text-[10px] text-surface-400">+{project.tags.length - 2}</span>}
+                </div>
+                {!compact && (
+                    <div className={cls("flex items-center justify-between mt-2 pt-2 border-t", defaultBorderMixin)}>
+                        <div className="flex items-center gap-1.5">
+                            <div className="w-5 h-5 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center text-[9px] font-bold">{project.assignee[0]}</div>
+                            <Typography variant="caption" color="secondary" className="truncate max-w-[100px]">{project.assignee}</Typography>
+                        </div>
+                        <Typography variant="caption" className={cls("font-mono text-[10px]", isOverdue ? "text-red-500 font-semibold" : "text-surface-400")}>{project.dueDate}</Typography>
+                    </div>
+                )}
+            </div>
+        </Card>
+    );
+}

package/src/components/Debug/collection-views/CollectionTableDemo.tsx

@@ -0,0 +1,107 @@
+import React, { useState, useMemo } from "react";
+import {
+    Typography, Chip, cls, defaultBorderMixin,
+    Table, TableHeader, TableBody, TableRow, TableCell,
+    SearchBar, IconButton, Tooltip, Checkbox, iconSize,
+    Select, SelectItem
+} from "@rebasepro/ui";
+import { Trash2Icon, PencilIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowDownIcon } from "lucide-react";
+import { SAMPLE_PROJECTS, STATUS_CONFIG, PRIORITY_CONFIG } from "./sample_data";
+import type { ProjectStatus } from "./sample_data";
+
+type SortField = "name" | "status" | "priority" | "dueDate";
+type SortDirection = "asc" | "desc";
+
+export function CollectionTableDemo() {
+    const [searchTerm, setSearchTerm] = useState("");
+    const [sortField, setSortField] = useState<SortField>("name");
+    const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
+    const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+    const [statusFilter, setStatusFilter] = useState<string>("all");
+
+    const filteredAndSorted = useMemo(() => {
+        let results = SAMPLE_PROJECTS.filter(p => {
+            const matchesSearch = !searchTerm ||
+                p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                p.assignee.toLowerCase().includes(searchTerm.toLowerCase());
+            const matchesStatus = statusFilter === "all" || p.status === statusFilter;
+            return matchesSearch && matchesStatus;
+        });
+        results = [...results].sort((a, b) => {
+            const cmp = String(a[sortField]).localeCompare(String(b[sortField]));
+            return sortDirection === "asc" ? cmp : -cmp;
+        });
+        return results;
+    }, [searchTerm, sortField, sortDirection, statusFilter]);
+
+    const toggleSort = (field: SortField) => {
+        if (sortField === field) setSortDirection(d => d === "asc" ? "desc" : "asc");
+        else { setSortField(field); setSortDirection("asc"); }
+    };
+
+    const toggleSelect = (id: string) => {
+        setSelectedIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) next.delete(id); else next.add(id);
+            return next;
+        });
+    };
+
+    const toggleSelectAll = (checked: boolean) => {
+        setSelectedIds(checked ? new Set(filteredAndSorted.map(p => p.id)) : new Set());
+    };
+
+    const allSelected = filteredAndSorted.length > 0 && filteredAndSorted.every(p => selectedIds.has(p.id));
+
+    const SortIcon = ({ field }: { field: SortField }) => {
+        if (sortField !== field) return <ArrowUpDownIcon size={12} className="text-surface-400" />;
+        return sortDirection === "asc"
+            ? <ArrowUpIcon size={12} className="text-primary" />
+            : <ArrowDownIcon size={12} className="text-primary" />;
+    };
+
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center gap-3 flex-wrap">
+                <SearchBar onTextSearch={(term) => setSearchTerm(term ?? "")} placeholder="Search projects…" size="small" />
+                <Select value={statusFilter} onValueChange={setStatusFilter} size="small" placeholder="Status">
+                    <SelectItem value="all">All Statuses</SelectItem>
+                    {(Object.entries(STATUS_CONFIG) as [ProjectStatus, { label: string }][]).map(([key, { label }]) => (
+                        <SelectItem key={key} value={key}>{label}</SelectItem>
+                    ))}
+                </Select>
+                {selectedIds.size > 0 && <Typography variant="caption" color="secondary">{selectedIds.size} selected</Typography>}
+            </div>
+            <div className={cls("rounded-lg border overflow-hidden", defaultBorderMixin)}>
+                <Table className="w-full">
+                    <TableHeader>
+                        <TableCell header style={{ width: "40px" }}><Checkbox checked={allSelected} onCheckedChange={toggleSelectAll} size="small" /></TableCell>
+                        <TableCell header><button onClick={() => toggleSort("name")} className="flex items-center gap-1 cursor-pointer"><Typography variant="caption" className="font-semibold">Name</Typography><SortIcon field="name" /></button></TableCell>
+                        <TableCell header><button onClick={() => toggleSort("status")} className="flex items-center gap-1 cursor-pointer"><Typography variant="caption" className="font-semibold">Status</Typography><SortIcon field="status" /></button></TableCell>
+                        <TableCell header><button onClick={() => toggleSort("priority")} className="flex items-center gap-1 cursor-pointer"><Typography variant="caption" className="font-semibold">Priority</Typography><SortIcon field="priority" /></button></TableCell>
+                        <TableCell header><Typography variant="caption" className="font-semibold">Assignee</Typography></TableCell>
+                        <TableCell header><Typography variant="caption" className="font-semibold">Tags</Typography></TableCell>
+                        <TableCell header><button onClick={() => toggleSort("dueDate")} className="flex items-center gap-1 cursor-pointer"><Typography variant="caption" className="font-semibold">Due Date</Typography><SortIcon field="dueDate" /></button></TableCell>
+                        <TableCell header style={{ width: "80px" }}><Typography variant="caption" className="font-semibold">Actions</Typography></TableCell>
+                    </TableHeader>
+                    <TableBody>
+                        {filteredAndSorted.map(project => (
+                            <TableRow key={project.id} className={cls(selectedIds.has(project.id) && "bg-primary/[0.03] dark:bg-primary/[0.06]")}>
+                                <TableCell style={{ width: "40px" }}><Checkbox checked={selectedIds.has(project.id)} onCheckedChange={() => toggleSelect(project.id)} size="small" /></TableCell>
+                                <TableCell><div><Typography variant="body2" className="font-medium">{project.name}</Typography><Typography variant="caption" color="secondary" className="line-clamp-1">{project.description}</Typography></div></TableCell>
+                                <TableCell><Chip colorScheme={STATUS_CONFIG[project.status].color} size="small">{STATUS_CONFIG[project.status].label}</Chip></TableCell>
+                                <TableCell><Chip colorScheme={PRIORITY_CONFIG[project.priority].color} size="smallest" outlined>{PRIORITY_CONFIG[project.priority].label}</Chip></TableCell>
+                                <TableCell><div className="flex items-center gap-2"><div className="w-6 h-6 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center text-[10px] font-bold shrink-0">{project.assignee[0]}</div><Typography variant="body2" className="truncate">{project.assignee}</Typography></div></TableCell>
+                                <TableCell><div className="flex flex-wrap gap-1">{project.tags.map(tag => (<Chip key={tag} size="smallest" colorScheme="cyan">{tag}</Chip>))}</div></TableCell>
+                                <TableCell><Typography variant="body2" className="font-mono text-xs">{project.dueDate}</Typography></TableCell>
+                                <TableCell style={{ width: "80px" }}><div className="flex gap-1"><Tooltip title="Edit" asChild><IconButton size="smallest"><PencilIcon size={iconSize.smallest} /></IconButton></Tooltip><Tooltip title="Delete" asChild><IconButton size="smallest"><Trash2Icon size={iconSize.smallest} /></IconButton></Tooltip></div></TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+                {filteredAndSorted.length === 0 && <div className="flex items-center justify-center py-8"><Typography variant="label" color="secondary">No projects match your filters</Typography></div>}
+            </div>
+            <Typography variant="caption" color="secondary">{filteredAndSorted.length} of {SAMPLE_PROJECTS.length} projects</Typography>
+        </div>
+    );
+}

package/src/components/Debug/collection-views/KanbanBoardDemo.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useCallback, useMemo } from "react";
+import { Typography, Chip, cls, defaultBorderMixin, KanbanView, Alert } from "@rebasepro/ui";
+import type { BoardItem, BoardItemViewProps } from "@rebasepro/ui";
+import { FolderKanbanIcon } from "lucide-react";
+import { SAMPLE_PROJECTS, PRIORITY_CONFIG } from "./sample_data";
+import type { SampleProject, ProjectStatus } from "./sample_data";
+
+const STATUS_COLUMNS: ProjectStatus[] = ["backlog", "in_progress", "in_review", "done"];
+const COLUMN_LABELS: Record<ProjectStatus, string> = { backlog: "Backlog", in_progress: "In Progress", in_review: "In Review", done: "Done" };
+const COLUMN_COLORS: Record<ProjectStatus, string> = { backlog: "#6b7280", in_progress: "#3b82f6", in_review: "#8b5cf6", done: "#22c55e" };
+
+function KanbanProjectCard({ item, isDragging, isGroupedOver, style }: BoardItemViewProps<SampleProject>) {
+    const project = item.data;
+    const priorityCfg = PRIORITY_CONFIG[project.priority];
+    const isOverdue = new Date(project.dueDate) < new Date() && project.status !== "done";
+
+    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]);
+
+    return (
+        <div style={style} className="py-1" data-testid={item.id}>
+            <div className={cls("group/card p-2 flex items-start border rounded-lg cursor-pointer transition-all duration-200", defaultBorderMixin, borderColor, backgroundColor, "hover:shadow-sm")}>
+                <div className="w-10 h-10 rounded-md shrink-0 mr-2 bg-surface-100 dark:bg-surface-900 flex items-center justify-center">
+                    <FolderKanbanIcon size={16} className="text-surface-400" />
+                </div>
+                <div className="flex-1 min-w-0">
+                    <div className="line-clamp-2 text-sm font-medium">{project.name}</div>
+                    <div className="text-xs text-surface-500 mt-1 line-clamp-2 opacity-80">{project.description}</div>
+                    <div className="flex items-center gap-1 mt-1.5 flex-wrap">
+                        <Chip colorScheme={priorityCfg.color} size="smallest" outlined className="!text-[10px] !leading-tight !py-0">{priorityCfg.label}</Chip>
+                        {project.tags.slice(0, 2).map(tag => <Chip key={tag} size="smallest" colorScheme="cyan" className="!text-[10px] !leading-tight !py-0 max-w-[80px] truncate">{tag}</Chip>)}
+                    </div>
+                    <div className="flex items-center justify-between mt-1.5">
+                        <div className="flex items-center gap-1">
+                            <div className="w-4 h-4 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center text-[8px] font-bold">{project.assignee[0]}</div>
+                            <Typography variant="caption" color="secondary" className="truncate max-w-[80px] text-[10px]">{project.assignee}</Typography>
+                        </div>
+                        <Typography variant="caption" className={cls("font-mono text-[10px]", isOverdue ? "text-red-500 font-semibold" : "text-surface-400")}>{project.dueDate}</Typography>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export function KanbanBoardDemo() {
+    const [boardData, setBoardData] = useState<BoardItem<SampleProject>[]>(() => SAMPLE_PROJECTS.map(p => ({ id: p.id, data: p })));
+    const [columns, setColumns] = useState<ProjectStatus[]>(STATUS_COLUMNS);
+
+    const assignColumn = useCallback((item: BoardItem<SampleProject>): ProjectStatus => item.data.status, []);
+
+    const handleItemsReorder = useCallback((items: BoardItem<SampleProject>[], moveInfo?: { itemId: string; sourceColumn: ProjectStatus; targetColumn: ProjectStatus }) => {
+        const updatedItems = items.map(item => {
+            if (moveInfo && item.id === moveInfo.itemId && moveInfo.sourceColumn !== moveInfo.targetColumn) {
+                return { ...item, data: { ...item.data, status: moveInfo.targetColumn, progress: moveInfo.targetColumn === "done" ? 100 : item.data.progress } };
+            }
+            return item;
+        });
+        setBoardData(updatedItems);
+    }, []);
+
+    const handleColumnReorder = useCallback((reordered: ProjectStatus[]) => setColumns(reordered), []);
+
+    const columnLoadingState = useMemo(() => {
+        const state: Record<string, { loading: boolean; hasMore: boolean; itemCount: number; totalCount: number }> = {};
+        for (const col of columns) {
+            const count = boardData.filter(item => item.data.status === col).length;
+            state[col] = { loading: false, hasMore: false, itemCount: count, totalCount: count };
+        }
+        return state;
+    }, [boardData, columns]);
+
+    return (
+        <div className="space-y-3">
+            <Alert color="info" size="small">Drag and drop cards between columns to change status. Columns are also reorderable.</Alert>
+            <div className={cls("rounded-lg border overflow-hidden", defaultBorderMixin)} style={{ height: 520 }}>
+                <KanbanView<SampleProject, ProjectStatus>
+                    data={boardData} columns={columns} columnLabels={COLUMN_LABELS} columnColors={COLUMN_COLORS}
+                    assignColumn={assignColumn} allowColumnReorder={true} onColumnReorder={handleColumnReorder}
+                    onItemsReorder={handleItemsReorder} ItemComponent={KanbanProjectCard} columnLoadingState={columnLoadingState}
+                />
+            </div>
+        </div>
+    );
+}

package/src/components/Debug/collection-views/index.ts

@@ -0,0 +1,3 @@
+export { CollectionTableDemo } from "./CollectionTableDemo";
+export { CardViewDemo } from "./CardViewDemo";
+export { KanbanBoardDemo } from "./KanbanBoardDemo";

package/src/components/Debug/collection-views/sample_data.ts

@@ -0,0 +1,42 @@
+export type ProjectStatus = "backlog" | "in_progress" | "in_review" | "done";
+export type ProjectPriority = "low" | "medium" | "high" | "critical";
+
+export interface SampleProject {
+    id: string;
+    name: string;
+    description: string;
+    status: ProjectStatus;
+    priority: ProjectPriority;
+    assignee: string;
+    tags: string[];
+    dueDate: string;
+    progress: number;
+    createdAt: string;
+}
+
+export const STATUS_CONFIG: Record<ProjectStatus, { label: string; color: string }> = {
+    backlog: { label: "Backlog", color: "gray" },
+    in_progress: { label: "In Progress", color: "blue" },
+    in_review: { label: "In Review", color: "purple" },
+    done: { label: "Done", color: "green" }
+};
+
+export const PRIORITY_CONFIG: Record<ProjectPriority, { label: string; color: string }> = {
+    low: { label: "Low", color: "gray" },
+    medium: { label: "Medium", color: "yellow" },
+    high: { label: "High", color: "orange" },
+    critical: { label: "Critical", color: "red" }
+};
+
+export const SAMPLE_PROJECTS: SampleProject[] = [
+    { id: "proj-1", name: "Website Redesign", description: "Complete overhaul of the marketing website with new brand guidelines", status: "in_progress", priority: "high", assignee: "Alice Johnson", tags: ["frontend", "design"], dueDate: new Date(Date.now() + 7 * 86400000).toISOString().split("T")[0], progress: 65, createdAt: new Date(Date.now() - 14 * 86400000).toISOString() },
+    { id: "proj-2", name: "API Rate Limiting", description: "Implement token-bucket rate limiting across all public endpoints", status: "in_review", priority: "critical", assignee: "Bob Smith", tags: ["backend", "security"], dueDate: new Date(Date.now() + 2 * 86400000).toISOString().split("T")[0], progress: 90, createdAt: new Date(Date.now() - 10 * 86400000).toISOString() },
+    { id: "proj-3", name: "Mobile Push Notifications", description: "Add support for push notifications on iOS and Android clients", status: "backlog", priority: "medium", assignee: "Carol White", tags: ["mobile", "backend"], dueDate: new Date(Date.now() + 21 * 86400000).toISOString().split("T")[0], progress: 0, createdAt: new Date(Date.now() - 3 * 86400000).toISOString() },
+    { id: "proj-4", name: "Dashboard Analytics", description: "Build real-time analytics dashboard with charts and KPI widgets", status: "in_progress", priority: "high", assignee: "David Brown", tags: ["frontend", "data"], dueDate: new Date(Date.now() + 5 * 86400000).toISOString().split("T")[0], progress: 40, createdAt: new Date(Date.now() - 7 * 86400000).toISOString() },
+    { id: "proj-5", name: "User Onboarding Flow", description: "Multi-step onboarding wizard with progress tracking and email triggers", status: "done", priority: "medium", assignee: "Eva Green", tags: ["frontend", "ux"], dueDate: new Date(Date.now() - 2 * 86400000).toISOString().split("T")[0], progress: 100, createdAt: new Date(Date.now() - 21 * 86400000).toISOString() },
+    { id: "proj-6", name: "Database Migration v3", description: "Migrate from PostgreSQL 14 to 16 with zero-downtime strategy", status: "backlog", priority: "low", assignee: "Frank Miller", tags: ["backend", "infrastructure"], dueDate: new Date(Date.now() + 30 * 86400000).toISOString().split("T")[0], progress: 0, createdAt: new Date(Date.now() - 1 * 86400000).toISOString() },
+    { id: "proj-7", name: "SSO Integration", description: "SAML 2.0 and OIDC single sign-on for enterprise customers", status: "in_progress", priority: "critical", assignee: "Alice Johnson", tags: ["backend", "security", "enterprise"], dueDate: new Date(Date.now() + 3 * 86400000).toISOString().split("T")[0], progress: 75, createdAt: new Date(Date.now() - 12 * 86400000).toISOString() },
+    { id: "proj-8", name: "E2E Test Suite", description: "Playwright-based end-to-end tests covering critical user journeys", status: "in_review", priority: "medium", assignee: "Bob Smith", tags: ["testing", "devops"], dueDate: new Date(Date.now() + 1 * 86400000).toISOString().split("T")[0], progress: 85, createdAt: new Date(Date.now() - 8 * 86400000).toISOString() },
+    { id: "proj-9", name: "Billing System Upgrade", description: "Stripe integration upgrade with metered billing and invoice PDF generation", status: "done", priority: "high", assignee: "Carol White", tags: ["backend", "payments"], dueDate: new Date(Date.now() - 5 * 86400000).toISOString().split("T")[0], progress: 100, createdAt: new Date(Date.now() - 28 * 86400000).toISOString() },
+    { id: "proj-10", name: "Dark Mode Polish", description: "Audit and fix all remaining dark mode inconsistencies across the app", status: "backlog", priority: "low", assignee: "David Brown", tags: ["frontend", "design"], dueDate: new Date(Date.now() + 14 * 86400000).toISOString().split("T")[0], progress: 0, createdAt: new Date(Date.now() - 2 * 86400000).toISOString() }
+];