@actuate-media/cms-admin 0.1.4 → 0.2.0

package/src/styles/theme.css

@@ -1,181 +1,182 @@
-@custom-variant dark (&:is(.dark *));
-
-.actuate-admin {
-  --font-size: 16px;
-  --background: #ffffff;
-  --foreground: oklch(0.145 0 0);
-  --card: #ffffff;
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: #030213;
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.95 0.0058 264.53);
-  --secondary-foreground: #030213;
-  --muted: #ececf0;
-  --muted-foreground: #717182;
-  --accent: #e9ebef;
-  --accent-foreground: #030213;
-  --destructive: #d4183d;
-  --destructive-foreground: #ffffff;
-  --border: rgba(0, 0, 0, 0.1);
-  --input: transparent;
-  --input-background: #f3f3f5;
-  --switch-background: #cbced4;
-  --font-weight-medium: 500;
-  --font-weight-normal: 400;
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: #030213;
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark .actuate-admin,
-.actuate-admin.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.185 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.185 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --input-background: oklch(0.205 0 0);
-  --switch-background: oklch(0.35 0 0);
-  --ring: oklch(0.439 0 0);
-  --font-weight-medium: 500;
-  --font-weight-normal: 400;
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-input-background: var(--input-background);
-  --color-switch-background: var(--switch-background);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-  .actuate-admin * {
-    @apply border-border outline-ring/50;
-  }
-
-  .actuate-admin {
-    @apply bg-background text-foreground;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
-    font-size: var(--font-size);
-    line-height: 1.5;
-    isolation: isolate;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  .actuate-admin h1 {
-    font-size: var(--text-2xl);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.5;
-  }
-
-  .actuate-admin h2 {
-    font-size: var(--text-xl);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.5;
-  }
-
-  .actuate-admin h3 {
-    font-size: var(--text-lg);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.5;
-  }
-
-  .actuate-admin h4 {
-    font-size: var(--text-base);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.5;
-  }
-
-  .actuate-admin label {
-    font-size: var(--text-base);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.5;
-  }
-
-  .actuate-admin button {
-    font-size: var(--text-base);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.5;
-  }
-
-  .actuate-admin input {
-    font-size: var(--text-base);
-    font-weight: var(--font-weight-normal);
-    line-height: 1.5;
-  }
-}
+@custom-variant dark (&:is(.dark *));
+
+.actuate-admin {
+  --font-size: 16px;
+  --background: #ffffff;
+  --foreground: oklch(0.145 0 0);
+  --card: #ffffff;
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: #030213;
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.95 0.0058 264.53);
+  --secondary-foreground: #030213;
+  --muted: #ececf0;
+  --muted-foreground: #717182;
+  --accent: #e9ebef;
+  --accent-foreground: #030213;
+  --destructive: #d4183d;
+  --destructive-foreground: #ffffff;
+  --border: rgba(0, 0, 0, 0.1);
+  --input: transparent;
+  --input-background: #f3f3f5;
+  --switch-background: #cbced4;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: #030213;
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark .actuate-admin,
+.actuate-admin.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.185 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.185 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --input-background: oklch(0.205 0 0);
+  --switch-background: oklch(0.35 0 0);
+  --ring: oklch(0.439 0 0);
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-switch-background: var(--switch-background);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  .actuate-admin * {
+    @apply border-border outline-ring/50;
+  }
+
+  .actuate-admin {
+    @apply bg-background text-foreground;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+    font-size: var(--font-size);
+    line-height: 1.5;
+    isolation: isolate;
+    contain: layout style;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .actuate-admin h1 {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  .actuate-admin h2 {
+    font-size: var(--text-xl);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  .actuate-admin h3 {
+    font-size: var(--text-lg);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  .actuate-admin h4 {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  .actuate-admin label {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  .actuate-admin button {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  .actuate-admin input {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5;
+  }
+}

package/src/views/CollectionList.tsx

@@ -0,0 +1,270 @@
+'use client';
+
+import { Search, Plus, Trash2, ChevronLeft, ChevronRight, Loader2, FileText, MoreHorizontal } from 'lucide-react';
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { toast } from 'sonner';
+import { cmsApi } from '../lib/api.js';
+import { useApiData } from '../lib/useApiData.js';
+
+export interface CollectionListProps {
+  collectionSlug: string;
+  config: any;
+  onNavigate: (path: string) => void;
+}
+
+type SortField = 'title' | 'status' | 'updatedAt';
+type SortOrder = 'asc' | 'desc';
+
+function resolveLabel(config: any, slug: string): { singular: string; plural: string } {
+  const fallback = { singular: slug, plural: slug };
+  if (!config?.collections) return fallback;
+  const list = Array.isArray(config.collections)
+    ? config.collections
+    : Object.values(config.collections);
+  const match = (list as any[]).find((c: any) => c.slug === slug);
+  return match?.labels ?? fallback;
+}
+
+function statusColor(status: string): string {
+  switch (status?.toUpperCase()) {
+    case 'PUBLISHED': return 'var(--actuate-success-bg, #dcfce7)';
+    case 'DRAFT': return 'var(--actuate-muted-bg, #f3f4f6)';
+    case 'ARCHIVED': return 'var(--actuate-warning-bg, #fef9c3)';
+    case 'SCHEDULED': return 'var(--actuate-info-bg, #dbeafe)';
+    default: return 'var(--actuate-muted-bg, #f3f4f6)';
+  }
+}
+
+function statusText(status: string): string {
+  switch (status?.toUpperCase()) {
+    case 'PUBLISHED': return 'var(--actuate-success-text, #166534)';
+    case 'DRAFT': return 'var(--actuate-muted-text, #374151)';
+    case 'ARCHIVED': return 'var(--actuate-warning-text, #854d0e)';
+    case 'SCHEDULED': return 'var(--actuate-info-text, #1e40af)';
+    default: return 'var(--actuate-muted-text, #374151)';
+  }
+}
+
+function formatDate(d: string | undefined): string {
+  if (!d) return '—';
+  return new Date(d).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+export function CollectionList({ collectionSlug, config, onNavigate }: CollectionListProps) {
+  const labels = useMemo(() => resolveLabel(config, collectionSlug), [config, collectionSlug]);
+
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [sort, setSort] = useState<SortField | null>(null);
+  const [order, setOrder] = useState<SortOrder>('asc');
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const searchTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => {
+    clearTimeout(searchTimer.current);
+    searchTimer.current = setTimeout(() => {
+      setDebouncedSearch(search);
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(searchTimer.current);
+  }, [search]);
+
+  const endpoint = useMemo(() => {
+    let url = `/collections/${collectionSlug}?page=${page}&pageSize=25`;
+    if (debouncedSearch) url += `&search=${encodeURIComponent(debouncedSearch)}`;
+    if (sort) url += `&sort=${sort}&order=${order}`;
+    return url;
+  }, [collectionSlug, page, debouncedSearch, sort, order]);
+
+  const { data, loading, error, refetch } = useApiData<{ docs: any[]; total: number }>(endpoint);
+  const docs = data?.docs ?? [];
+  const total = data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / 25));
+
+  useEffect(() => { setPage(1); setSelected(new Set()); setSearch(''); }, [collectionSlug]);
+
+  const toggleSort = useCallback((field: SortField) => {
+    setSort(prev => {
+      if (prev === field) {
+        setOrder(o => o === 'asc' ? 'desc' : 'asc');
+        return field;
+      }
+      setOrder('asc');
+      return field;
+    });
+  }, []);
+
+  const toggleSelect = (id: string) =>
+    setSelected(prev => { const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s; });
+
+  const toggleAll = (checked: boolean) =>
+    setSelected(checked ? new Set(docs.map((d: any) => String(d.id))) : new Set());
+
+  const bulkAction = async (action: 'delete' | 'publish' | 'unpublish') => {
+    const ids = [...selected];
+    for (const id of ids) {
+      if (action === 'delete') {
+        await cmsApi(`/collections/${collectionSlug}/${id}`, { method: 'DELETE' });
+      } else {
+        await cmsApi(`/collections/${collectionSlug}/${id}`, {
+          method: 'PUT',
+          body: JSON.stringify({ status: action === 'publish' ? 'PUBLISHED' : 'DRAFT' }),
+        });
+      }
+    }
+    const verb = action === 'delete' ? 'deleted' : action === 'publish' ? 'published' : 'unpublished';
+    toast.success(`${ids.length} ${ids.length === 1 ? labels.singular : labels.plural} ${verb}`);
+    setSelected(new Set());
+    refetch();
+  };
+
+  const SortCol = ({ field, children }: { field: SortField; children: string }) => (
+    <button type="button" onClick={() => toggleSort(field)}
+      className="flex items-center gap-1 text-xs font-medium hover:opacity-80 transition-opacity"
+      style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}>
+      {children}
+      {sort === field && <span>{order === 'asc' ? '↑' : '↓'}</span>}
+    </button>
+  );
+
+  if (loading && docs.length === 0) {
+    return (
+      <div className="p-4 flex items-center justify-center h-64">
+        <Loader2 className="w-6 h-6 animate-spin" style={{ color: 'var(--actuate-primary, #2563eb)' }} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8 h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4 gap-3 flex-wrap">
+        <div>
+          <h1 className="text-xl sm:text-2xl font-semibold" style={{ color: 'var(--actuate-text, #111827)' }}>
+            {labels.plural}
+          </h1>
+          <p className="text-sm" style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}>{total} total</p>
+        </div>
+        <button onClick={() => onNavigate(`/${collectionSlug}/new`)}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-colors"
+          style={{ background: 'var(--actuate-primary, #2563eb)' }}>
+          <Plus className="w-4 h-4" /> New {labels.singular}
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="relative mb-4">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: 'var(--actuate-text-muted, #9ca3af)' }} />
+        <input type="text" placeholder={`Search ${labels.plural.toLowerCase()}...`} value={search}
+          onChange={e => setSearch(e.target.value)}
+          className="w-full pl-9 pr-3 py-2 text-sm rounded-lg border focus:outline-none focus:ring-2"
+          style={{ borderColor: 'var(--actuate-border, #d1d5db)', color: 'var(--actuate-text, #111827)' }} />
+      </div>
+
+      {/* Bulk actions */}
+      {selected.size > 0 && (
+        <div className="rounded-lg p-3 mb-4 flex flex-wrap items-center justify-between gap-2"
+          style={{ background: 'var(--actuate-info-bg, #eff6ff)', borderColor: 'var(--actuate-info-border, #bfdbfe)', borderWidth: 1, borderStyle: 'solid' }}>
+          <span className="text-sm" style={{ color: 'var(--actuate-info-text, #1e40af)' }}>
+            {selected.size} selected
+          </span>
+          <div className="flex gap-2">
+            <button onClick={() => bulkAction('publish')} className="px-3 py-1.5 text-sm text-white rounded-lg" style={{ background: 'var(--actuate-success, #16a34a)' }}>Publish</button>
+            <button onClick={() => bulkAction('unpublish')} className="px-3 py-1.5 text-sm text-white rounded-lg" style={{ background: 'var(--actuate-warning, #ca8a04)' }}>Unpublish</button>
+            <button onClick={() => bulkAction('delete')} className="px-3 py-1.5 text-sm text-white rounded-lg" style={{ background: 'var(--actuate-danger, #dc2626)' }}>
+              <Trash2 className="w-3.5 h-3.5 inline -mt-0.5 mr-1" />Delete
+            </button>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="rounded-lg p-3 mb-4 text-sm" style={{ background: 'var(--actuate-danger-bg, #fef2f2)', color: 'var(--actuate-danger-text, #991b1b)' }}>
+          {error} — <button onClick={refetch} className="underline">retry</button>
+        </div>
+      )}
+
+      {/* Table */}
+      {docs.length === 0 && !loading ? (
+        <div className="flex-1 flex flex-col items-center justify-center rounded-lg border p-8"
+          style={{ borderColor: 'var(--actuate-border, #d1d5db)', color: 'var(--actuate-text-secondary, #6b7280)' }}>
+          <FileText className="w-10 h-10 mb-3 opacity-40" />
+          <p className="text-sm mb-3">No {labels.plural.toLowerCase()} found</p>
+          <button onClick={() => onNavigate(`/${collectionSlug}/new`)}
+            className="px-4 py-2 text-sm text-white rounded-lg" style={{ background: 'var(--actuate-primary, #2563eb)' }}>
+            Create {labels.singular}
+          </button>
+        </div>
+      ) : (
+        <div className="flex-1 rounded-lg border overflow-auto" style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}>
+          <table className="w-full text-sm">
+            <thead className="sticky top-0" style={{ background: 'var(--actuate-surface-alt, #f9fafb)', borderBottom: '1px solid var(--actuate-border, #d1d5db)' }}>
+              <tr>
+                <th className="w-10 px-3 py-2 text-left">
+                  <input type="checkbox" checked={selected.size === docs.length && docs.length > 0}
+                    onChange={e => toggleAll(e.target.checked)} className="rounded" />
+                </th>
+                <th className="px-3 py-2 text-left"><SortCol field="title">Title</SortCol></th>
+                <th className="px-3 py-2 text-left"><SortCol field="status">Status</SortCol></th>
+                <th className="px-3 py-2 text-left"><SortCol field="updatedAt">Updated</SortCol></th>
+                <th className="px-3 py-2 text-left text-xs font-medium" style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {docs.map((doc: any) => (
+                <tr key={doc.id} className="transition-colors hover:opacity-95"
+                  style={{ borderBottom: '1px solid var(--actuate-border, #e5e7eb)' }}>
+                  <td className="px-3 py-2">
+                    <input type="checkbox" checked={selected.has(String(doc.id))}
+                      onChange={() => toggleSelect(String(doc.id))} className="rounded" />
+                  </td>
+                  <td className="px-3 py-2">
+                    <button type="button" onClick={() => onNavigate(`/${collectionSlug}/${doc.id}`)}
+                      className="font-medium text-left hover:underline" style={{ color: 'var(--actuate-text, #111827)' }}>
+                      {doc.title || doc.name || `#${doc.id}`}
+                    </button>
+                  </td>
+                  <td className="px-3 py-2">
+                    <span className="inline-block px-2 py-0.5 rounded-full text-xs font-medium"
+                      style={{ background: statusColor(doc.status), color: statusText(doc.status) }}>
+                      {doc.status ?? 'DRAFT'}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2" style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}>
+                    {formatDate(doc.updatedAt)}
+                  </td>
+                  <td className="px-3 py-2">
+                    <button type="button" onClick={() => onNavigate(`/${collectionSlug}/${doc.id}`)}
+                      className="p-1.5 rounded hover:opacity-75 transition-opacity" title="Edit">
+                      <MoreHorizontal className="w-4 h-4" style={{ color: 'var(--actuate-text-secondary, #6b7280)' }} />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between mt-4 text-sm" style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}>
+          <span>Page {page} of {totalPages}</span>
+          <div className="flex gap-2">
+            <button disabled={page <= 1} onClick={() => setPage(p => p - 1)}
+              className="flex items-center gap-1 px-3 py-1.5 rounded-lg border disabled:opacity-40 transition-opacity"
+              style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}>
+              <ChevronLeft className="w-4 h-4" /> Previous
+            </button>
+            <button disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}
+              className="flex items-center gap-1 px-3 py-1.5 rounded-lg border disabled:opacity-40 transition-opacity"
+              style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}>
+              Next <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}