@mmapp/react-compiler 0.1.0-alpha.1

package/examples/invoice-approval/models/invoice.ts

@@ -0,0 +1,46 @@
+/**
+ * Invoice — data model interface.
+ *
+ * Auto-generated from workflow definition "invoice-approval".
+ * Fields: 8
+ */
+
+export interface Invoice {
+  /** Invoice amount in dollars */
+  amount: number;
+  /** Vendor or supplier name */
+  vendor: string;
+  /** Invoice date */
+  date: Date;
+  /** Current approval status */
+  status: string;
+  /** Optional notes or comments */
+  notes?: string;
+  /** Department the invoice belongs to */
+  department?: string;
+  /** Purchase order reference */
+  poNumber?: string;
+  /** Line items breakdown */
+  lineItems?: InvoiceLineItem[];
+}
+
+export interface InvoiceLineItem {
+  description: string;
+  quantity: number;
+  unitPrice: number;
+  total: number;
+}
+
+export enum InvoiceState {
+  Draft = 'draft',
+  Submitted = 'submitted',
+  Approved = 'approved',
+  Rejected = 'rejected',
+}
+
+export enum InvoicePriority {
+  Low = 'low',
+  Normal = 'normal',
+  High = 'high',
+  Urgent = 'urgent',
+}

package/examples/invoice-approval/pages/InvoiceDetailPage.tsx

@@ -0,0 +1,175 @@
+/**
+ * InvoiceDetailPage — detail view for a single invoice.
+ *
+ * Shows invoice data, approval history, and action buttons
+ * for approvers (approve/reject) and submitters (revise).
+ */
+import {
+  Stack,
+  Row,
+  Heading,
+  Text,
+  Button,
+  Badge,
+  Card,
+  Section,
+  Show,
+  Each,
+  Divider,
+  useQuery,
+} from '@mindmatrix/react';
+import type { Invoice, InvoiceLineItem } from '../models/invoice';
+
+interface InvoiceDetailPageProps {
+  invoiceId: string;
+  isApprover: boolean;
+  onApprove: () => void;
+  onReject: () => void;
+  onRevise: () => void;
+  onBack: () => void;
+}
+
+export function InvoiceDetailPage({
+  invoiceId,
+  isApprover,
+  onApprove,
+  onReject,
+  onRevise,
+  onBack,
+}: InvoiceDetailPageProps) {
+  // Fetch the specific invoice
+  const { data: invoice, loading } = useQuery('invoice-approval', {
+    filter: { id: invoiceId },
+    limit: 1,
+  });
+
+  const inv = invoice?.[0] as (Invoice & { id: string }) | undefined;
+
+  const statusColor = (status: string) => {
+    switch (status) {
+      case 'draft': return 'gray';
+      case 'submitted': return 'blue';
+      case 'approved': return 'green';
+      case 'rejected': return 'red';
+      default: return 'gray';
+    }
+  };
+
+  return (
+    <Stack sx={{ p: 24, gap: 16, flex: 1, maxWidth: 800, mx: 'auto' }}>
+      {/* Back button */}
+      <Button onClick={onBack} sx={{ variant: 'ghost', alignSelf: 'start' }}>
+        ← Back to Invoices
+      </Button>
+
+      <Show when={loading}>
+        <Text sx={{ color: 'gray.400', textAlign: 'center', py: 16 }}>Loading invoice...</Text>
+      </Show>
+
+      <Show when={!loading && !!inv}>
+        {/* Invoice header */}
+        <Card sx={{ p: 20 }}>
+          <Row sx={{ alignItems: 'start', justifyContent: 'space-between', mb: 16 }}>
+            <Stack sx={{ gap: 4 }}>
+              <Heading sx={{ fontSize: 22, fontWeight: 'bold' }}>
+                Invoice #{invoiceId.slice(0, 8)}
+              </Heading>
+              <Text sx={{ color: 'gray.500', fontSize: 13 }}>
+                {inv?.vendor}
+              </Text>
+            </Stack>
+            <Badge variant={statusColor(inv?.status ?? 'draft')} sx={{ fontSize: 14, px: 12, py: 4 }}>
+              {inv?.status}
+            </Badge>
+          </Row>
+
+          <Divider sx={{ my: 16 }} />
+
+          {/* Invoice details grid */}
+          <Section title="Details">
+            <Row sx={{ gap: 24, flexWrap: 'wrap' }}>
+              <Stack sx={{ gap: 2, minWidth: 150 }}>
+                <Text sx={{ fontSize: 11, color: 'gray.500', textTransform: 'uppercase' }}>Amount</Text>
+                <Text sx={{ fontSize: 28, fontWeight: 'bold', color: 'gray.900' }}>
+                  ${inv?.amount?.toLocaleString() ?? '0'}
+                </Text>
+              </Stack>
+
+              <Stack sx={{ gap: 2, minWidth: 150 }}>
+                <Text sx={{ fontSize: 11, color: 'gray.500', textTransform: 'uppercase' }}>Date</Text>
+                <Text sx={{ fontSize: 16 }}>
+                  {inv?.date ? new Date(inv.date).toLocaleDateString() : '—'}
+                </Text>
+              </Stack>
+
+              <Stack sx={{ gap: 2, minWidth: 150 }}>
+                <Text sx={{ fontSize: 11, color: 'gray.500', textTransform: 'uppercase' }}>Department</Text>
+                <Text sx={{ fontSize: 16 }}>{inv?.department ?? '—'}</Text>
+              </Stack>
+
+              <Stack sx={{ gap: 2, minWidth: 150 }}>
+                <Text sx={{ fontSize: 11, color: 'gray.500', textTransform: 'uppercase' }}>PO Number</Text>
+                <Text sx={{ fontSize: 16 }}>{inv?.poNumber ?? '—'}</Text>
+              </Stack>
+            </Row>
+          </Section>
+
+          {/* Line items */}
+          <Show when={inv?.lineItems && inv.lineItems.length > 0}>
+            <Section title="Line Items">
+              <Stack sx={{ gap: 4 }}>
+                <Row sx={{ fontWeight: 'semibold', fontSize: 12, color: 'gray.500', p: 8 }}>
+                  <Text sx={{ flex: 3 }}>Description</Text>
+                  <Text sx={{ flex: 1, textAlign: 'right' }}>Qty</Text>
+                  <Text sx={{ flex: 1, textAlign: 'right' }}>Unit Price</Text>
+                  <Text sx={{ flex: 1, textAlign: 'right' }}>Total</Text>
+                </Row>
+                <Each items={inv?.lineItems ?? []}>
+                  {(item: InvoiceLineItem) => (
+                    <Row sx={{ p: 8, borderBottom: '1px solid', borderColor: 'gray.50' }}>
+                      <Text sx={{ flex: 3 }}>{item.description}</Text>
+                      <Text sx={{ flex: 1, textAlign: 'right' }}>{item.quantity}</Text>
+                      <Text sx={{ flex: 1, textAlign: 'right' }}>${item.unitPrice}</Text>
+                      <Text sx={{ flex: 1, textAlign: 'right', fontWeight: 'medium' }}>
+                        ${item.total}
+                      </Text>
+                    </Row>
+                  )}
+                </Each>
+              </Stack>
+            </Section>
+          </Show>
+
+          {/* Notes */}
+          <Show when={!!inv?.notes}>
+            <Section title="Notes">
+              <Text sx={{ color: 'gray.700', lineHeight: 1.6 }}>{inv?.notes}</Text>
+            </Section>
+          </Show>
+        </Card>
+
+        {/* Action buttons */}
+        <Card sx={{ p: 16 }}>
+          <Row sx={{ justifyContent: 'end', gap: 8 }}>
+            {/* Approver actions */}
+            <Show when={isApprover && inv?.status === 'submitted'}>
+              <Button onClick={onReject} sx={{ variant: 'outline', colorScheme: 'red' }}>
+                Reject
+              </Button>
+              <Button onClick={onApprove} sx={{ colorScheme: 'green' }}>
+                Approve
+              </Button>
+            </Show>
+
+            {/* Submitter: revise rejected invoice */}
+            <Show when={inv?.status === 'rejected'}>
+              <Button onClick={onRevise} sx={{ colorScheme: 'blue' }}>
+                Revise & Resubmit
+              </Button>
+            </Show>
+          </Row>
+        </Card>
+      </Show>
+    </Stack>
+  );
+}

package/examples/invoice-approval/pages/InvoiceFormPage.tsx

@@ -0,0 +1,198 @@
+/**
+ * InvoiceFormPage — form view for creating/editing an invoice.
+ *
+ * Provides validated input fields for all invoice data,
+ * line item management, and submit/cancel actions.
+ */
+import {
+  Stack,
+  Row,
+  Heading,
+  Text,
+  Button,
+  TextInput,
+  Select,
+  Card,
+  Section,
+  Show,
+  Each,
+  Divider,
+} from '@mindmatrix/react';
+import { useState } from 'react';
+import type { InvoiceLineItem } from '../models/invoice';
+
+interface InvoiceFormPageProps {
+  onSubmit: () => void;
+  onCancel: () => void;
+}
+
+export function InvoiceFormPage({ onSubmit, onCancel }: InvoiceFormPageProps) {
+  // Form state
+  const [vendor, setVendor] = useState('');
+  const [amount, setAmount] = useState(0);
+  const [date, setDate] = useState('');
+  const [department, setDepartment] = useState('');
+  const [poNumber, setPoNumber] = useState('');
+  const [notes, setNotes] = useState('');
+  const [lineItems, setLineItems] = useState<InvoiceLineItem[]>([]);
+  const [errors, setErrors] = useState<string[]>([]);
+
+  // Computed total from line items
+  const lineItemTotal = lineItems.reduce((sum, item) => sum + item.total, 0);
+  const displayAmount = lineItems.length > 0 ? lineItemTotal : amount;
+
+  // Validation
+  const validate = (): boolean => {
+    const errs: string[] = [];
+    if (!vendor.trim()) errs.push('Vendor name is required');
+    if (displayAmount <= 0) errs.push('Amount must be greater than zero');
+    if (!date) errs.push('Invoice date is required');
+    setErrors(errs);
+    return errs.length === 0;
+  };
+
+  const handleSubmit = () => {
+    if (validate()) {
+      onSubmit();
+    }
+  };
+
+  // Line item management
+  const addLineItem = () => {
+    setLineItems([...lineItems, { description: '', quantity: 1, unitPrice: 0, total: 0 }]);
+  };
+
+  const removeLineItem = (index: number) => {
+    setLineItems(lineItems.filter((_, i) => i !== index));
+  };
+
+  return (
+    <Stack sx={{ p: 24, gap: 16, flex: 1, maxWidth: 700, mx: 'auto' }}>
+      <Heading sx={{ fontSize: 22, fontWeight: 'bold' }}>New Invoice</Heading>
+
+      {/* Validation errors */}
+      <Show when={errors.length > 0}>
+        <Card sx={{ p: 12, bg: 'red.50', borderColor: 'red.200' }}>
+          <Each items={errors}>
+            {(error: string) => (
+              <Text sx={{ color: 'red.700', fontSize: 13 }}>• {error}</Text>
+            )}
+          </Each>
+        </Card>
+      </Show>
+
+      {/* Basic Info */}
+      <Card sx={{ p: 20 }}>
+        <Section title="Invoice Details">
+          <Stack sx={{ gap: 16 }}>
+            <Stack sx={{ gap: 4 }}>
+              <Text sx={{ fontSize: 13, fontWeight: 'medium' }}>Vendor *</Text>
+              <TextInput
+                bind="vendor"
+                placeholder="Enter vendor name"
+                sx={{ width: '100%' }}
+              />
+            </Stack>
+
+            <Row sx={{ gap: 16 }}>
+              <Stack sx={{ gap: 4, flex: 1 }}>
+                <Text sx={{ fontSize: 13, fontWeight: 'medium' }}>Amount *</Text>
+                <TextInput
+                  bind="amount"
+                  placeholder="0.00"
+                  sx={{ width: '100%' }}
+                />
+              </Stack>
+              <Stack sx={{ gap: 4, flex: 1 }}>
+                <Text sx={{ fontSize: 13, fontWeight: 'medium' }}>Date *</Text>
+                <TextInput
+                  bind="date"
+                  placeholder="YYYY-MM-DD"
+                  sx={{ width: '100%' }}
+                />
+              </Stack>
+            </Row>
+
+            <Row sx={{ gap: 16 }}>
+              <Stack sx={{ gap: 4, flex: 1 }}>
+                <Text sx={{ fontSize: 13, fontWeight: 'medium' }}>Department</Text>
+                <Select
+                  bind="department"
+                  options={['Engineering', 'Marketing', 'Sales', 'Operations', 'Finance', 'HR']}
+                  sx={{ width: '100%' }}
+                />
+              </Stack>
+              <Stack sx={{ gap: 4, flex: 1 }}>
+                <Text sx={{ fontSize: 13, fontWeight: 'medium' }}>PO Number</Text>
+                <TextInput
+                  bind="poNumber"
+                  placeholder="PO-XXXX"
+                  sx={{ width: '100%' }}
+                />
+              </Stack>
+            </Row>
+          </Stack>
+        </Section>
+      </Card>
+
+      {/* Line Items */}
+      <Card sx={{ p: 20 }}>
+        <Section title="Line Items">
+          <Stack sx={{ gap: 8 }}>
+            <Show when={lineItems.length > 0}>
+              <Row sx={{ fontWeight: 'semibold', fontSize: 12, color: 'gray.500', px: 4 }}>
+                <Text sx={{ flex: 3 }}>Description</Text>
+                <Text sx={{ flex: 1 }}>Qty</Text>
+                <Text sx={{ flex: 1 }}>Unit Price</Text>
+                <Text sx={{ flex: 1 }}>Total</Text>
+                <Text sx={{ width: 32 }} />
+              </Row>
+              <Each items={lineItems}>
+                {(item: InvoiceLineItem, index: number) => (
+                  <Row sx={{ gap: 8, alignItems: 'center' }}>
+                    <TextInput bind={`lineItems[${index}].description`} placeholder="Description" sx={{ flex: 3 }} />
+                    <TextInput bind={`lineItems[${index}].quantity`} placeholder="1" sx={{ flex: 1 }} />
+                    <TextInput bind={`lineItems[${index}].unitPrice`} placeholder="0.00" sx={{ flex: 1 }} />
+                    <Text sx={{ flex: 1, fontWeight: 'medium' }}>${item.total}</Text>
+                    <Button onClick={() => removeLineItem(index)} sx={{ variant: 'ghost', size: 'sm', color: 'red.500' }}>
+                      ✕
+                    </Button>
+                  </Row>
+                )}
+              </Each>
+              <Divider sx={{ my: 8 }} />
+              <Row sx={{ justifyContent: 'end', px: 4 }}>
+                <Text sx={{ fontWeight: 'bold' }}>Total: ${lineItemTotal.toLocaleString()}</Text>
+              </Row>
+            </Show>
+
+            <Button onClick={addLineItem} sx={{ variant: 'outline', size: 'sm', alignSelf: 'start' }}>
+              + Add Line Item
+            </Button>
+          </Stack>
+        </Section>
+      </Card>
+
+      {/* Notes */}
+      <Card sx={{ p: 20 }}>
+        <Section title="Notes">
+          <TextInput
+            bind="notes"
+            placeholder="Add any notes or context for the approver..."
+            sx={{ width: '100%', minHeight: 80 }}
+          />
+        </Section>
+      </Card>
+
+      {/* Actions */}
+      <Row sx={{ justifyContent: 'end', gap: 8, pt: 8 }}>
+        <Button onClick={onCancel} sx={{ variant: 'outline' }}>
+          Cancel
+        </Button>
+        <Button onClick={handleSubmit} sx={{ colorScheme: 'blue' }}>
+          Submit for Approval
+        </Button>
+      </Row>
+    </Stack>
+  );
+}

package/examples/invoice-approval/pages/InvoiceListPage.tsx

@@ -0,0 +1,141 @@
+/**
+ * InvoiceListPage — list view of all invoices with filtering.
+ *
+ * Displays a data grid of invoices with status filtering,
+ * search, and click-to-select for detail navigation.
+ */
+import {
+  Stack,
+  Row,
+  Heading,
+  Text,
+  Button,
+  Select,
+  TextInput,
+  DataGrid,
+  Badge,
+  Show,
+  Each,
+  Card,
+  useQuery,
+} from '@mindmatrix/react';
+import { useState } from 'react';
+import type { Invoice, InvoiceState } from '../models/invoice';
+
+interface InvoiceListPageProps {
+  filterStatus: string;
+  onFilterChange: (status: string) => void;
+  onSelect: (id: string) => void;
+}
+
+export function InvoiceListPage({ filterStatus, onFilterChange, onSelect }: InvoiceListPageProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Query invoices from the data API
+  const { data: invoices, loading } = useQuery('invoice-approval', {
+    limit: 50,
+    orderBy: 'date',
+    order: 'desc',
+    filter: filterStatus !== 'all' ? { status: filterStatus } : undefined,
+  });
+
+  // Status badge color mapping
+  const statusColor = (status: string) => {
+    switch (status) {
+      case 'draft': return 'gray';
+      case 'submitted': return 'blue';
+      case 'approved': return 'green';
+      case 'rejected': return 'red';
+      default: return 'gray';
+    }
+  };
+
+  return (
+    <Stack sx={{ p: 24, gap: 16, flex: 1 }}>
+      {/* Toolbar */}
+      <Row sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+        <Heading sx={{ fontSize: 18, fontWeight: 'semibold' }}>All Invoices</Heading>
+        <Row sx={{ gap: 8 }}>
+          <TextInput
+            bind="searchQuery"
+            placeholder="Search vendor..."
+            sx={{ width: 200 }}
+          />
+          <Select
+            bind="filterStatus"
+            options={['all', 'draft', 'submitted', 'approved', 'rejected']}
+            sx={{ width: 140 }}
+          />
+        </Row>
+      </Row>
+
+      {/* Summary cards */}
+      <Row sx={{ gap: 12 }}>
+        <Card sx={{ flex: 1, p: 12 }}>
+          <Text sx={{ fontSize: 11, color: 'gray.500', textTransform: 'uppercase' }}>Total</Text>
+          <Text sx={{ fontSize: 24, fontWeight: 'bold' }}>{invoices?.length ?? 0}</Text>
+        </Card>
+        <Card sx={{ flex: 1, p: 12 }}>
+          <Text sx={{ fontSize: 11, color: 'gray.500', textTransform: 'uppercase' }}>Pending</Text>
+          <Text sx={{ fontSize: 24, fontWeight: 'bold', color: 'blue.600' }}>
+            {invoices?.filter((i: Invoice) => i.status === 'submitted').length ?? 0}
+          </Text>
+        </Card>
+        <Card sx={{ flex: 1, p: 12 }}>
+          <Text sx={{ fontSize: 11, color: 'gray.500', textTransform: 'uppercase' }}>Approved</Text>
+          <Text sx={{ fontSize: 24, fontWeight: 'bold', color: 'green.600' }}>
+            {invoices?.filter((i: Invoice) => i.status === 'approved').length ?? 0}
+          </Text>
+        </Card>
+      </Row>
+
+      {/* Invoice list */}
+      <Show when={loading}>
+        <Text sx={{ color: 'gray.400', textAlign: 'center', py: 16 }}>Loading invoices...</Text>
+      </Show>
+
+      <Show when={!loading}>
+        <Stack sx={{ gap: 4, bg: 'white', rounded: 8, border: '1px solid', borderColor: 'gray.200' }}>
+          {/* Header row */}
+          <Row sx={{ p: 12, borderBottom: '1px solid', borderColor: 'gray.100', fontWeight: 'semibold', fontSize: 12, color: 'gray.500' }}>
+            <Text sx={{ flex: 2 }}>Vendor</Text>
+            <Text sx={{ flex: 1 }}>Amount</Text>
+            <Text sx={{ flex: 1 }}>Date</Text>
+            <Text sx={{ flex: 1 }}>Status</Text>
+            <Text sx={{ width: 80 }}>Action</Text>
+          </Row>
+
+          {/* Data rows */}
+          <Each items={invoices}>
+            {(invoice: Invoice & { id: string }) => (
+              <Row
+                sx={{
+                  p: 12,
+                  borderBottom: '1px solid',
+                  borderColor: 'gray.50',
+                  alignItems: 'center',
+                  cursor: 'pointer',
+                }}
+              >
+                <Text sx={{ flex: 2, fontWeight: 'medium' }}>{invoice.vendor}</Text>
+                <Text sx={{ flex: 1 }}>${invoice.amount.toLocaleString()}</Text>
+                <Text sx={{ flex: 1, color: 'gray.600', fontSize: 13 }}>
+                  {new Date(invoice.date).toLocaleDateString()}
+                </Text>
+                <Stack sx={{ flex: 1 }}>
+                  <Badge variant={statusColor(invoice.status)}>{invoice.status}</Badge>
+                </Stack>
+                <Button
+                  onClick={() => onSelect(invoice.id)}
+                  sx={{ variant: 'ghost', size: 'sm', width: 80 }}
+                >
+                  View
+                </Button>
+              </Row>
+            )}
+          </Each>
+        </Stack>
+      </Show>
+    </Stack>
+  );
+}

package/examples/todo-app.workflow.tsx

@@ -0,0 +1,131 @@
+/**
+ * @workflow slug="todo-app" version="1.0.0" category="data"
+ * @description Todo list with add, remove, toggle — demonstrates data source binding,
+ *   conditional rendering, list mapping, and role-based guards.
+ */
+import { useState } from 'react';
+import {
+  useTransition,
+  useOnEnter,
+  useOnExit,
+  useQuery,
+  useMutation,
+  useRole,
+  useWhileIn,
+} from '@mindmatrix/react';
+
+export function TodoApp() {
+  const [title, setTitle] = useState('');
+  const [filter, setFilter] = useState('all');
+  const [itemCount, setItemCount] = useState(0);
+
+  // --- Data Bindings ---
+
+  // Query todo items from the 'todo-item' data workflow, paginated, sorted by created_at
+  const { data: todos } = useQuery('todo-item', {
+    limit: 100,
+    orderBy: 'created_at',
+    filter: { status: 'active' },
+  });
+
+  // Query completed items separately for the "Done" tab
+  const { data: completedTodos } = useQuery('todo-item', {
+    limit: 50,
+    filter: { status: 'completed' },
+    orderBy: 'completed_at',
+  });
+
+  // Mutation target for creating/updating todo items
+  const todoMutation = useMutation('todo-item');
+
+  // --- Role Guard ---
+
+  // Only 'editor' and 'admin' roles can modify todos
+  const canEdit = useRole('editor');
+  const isAdmin = useRole('admin');
+
+  // --- States & Hooks ---
+
+  // When entering the 'active' state, refresh the item count
+  useOnEnter('active', () => {
+    setItemCount(0);
+  });
+
+  // When leaving 'active', clear the input
+  useOnExit('active', () => {
+    setTitle('');
+  });
+
+  // Auto-refresh while in 'active' state (every 30s)
+  useWhileIn('active', 30000, () => {
+    // Poll for updates
+  });
+
+  // --- Transitions ---
+
+  useTransition('activate', { from: 'draft', to: 'active' });
+  useTransition('archive', { from: 'active', to: 'archived' });
+  useTransition('restore', { from: 'archived', to: 'active' });
+
+  // --- UI ---
+
+  return (
+    <Stack className="todo-app" sx={{ p: 6, maxWidth: '600px', mx: 'auto' }}>
+      <Heading sx={{ fontSize: '2xl', fontWeight: 'bold', mb: 4 }}>
+        Todo List ({itemCount})
+      </Heading>
+
+      {/* Add new todo — only shown if user has editor role */}
+      {canEdit && (
+        <Stack sx={{ direction: 'row', gap: 2, mb: 4 }}>
+          <Input
+            value={title}
+            onChange={(e: any) => setTitle(e.target.value)}
+            placeholder="What needs to be done?"
+            sx={{ flex: 1 }}
+          />
+          <Button onClick={() => setTitle('')} sx={{ colorScheme: 'blue' }}>
+            Add
+          </Button>
+        </Stack>
+      )}
+
+      {/* Filter tabs */}
+      <Stack sx={{ direction: 'row', gap: 2, mb: 4 }}>
+        <Button onClick={() => setFilter('all')} sx={{ variant: filter === 'all' ? 'solid' : 'outline' }}>
+          All
+        </Button>
+        <Button onClick={() => setFilter('active')} sx={{ variant: filter === 'active' ? 'solid' : 'outline' }}>
+          Active
+        </Button>
+        <Button onClick={() => setFilter('done')} sx={{ variant: filter === 'done' ? 'solid' : 'outline' }}>
+          Done
+        </Button>
+      </Stack>
+
+      {/* Todo items list */}
+      <Each items={todos}>
+        {(todo: any) => (
+          <Stack sx={{ direction: 'row', alignItems: 'center', gap: 2, py: 2, borderBottom: '1px solid', borderColor: 'gray.200' }}>
+            <Checkbox checked={todo.completed} sx={{ mr: 2 }} />
+            <Text sx={{ flex: 1, textDecoration: todo.completed ? 'line-through' : 'none' }}>
+              {todo.title}
+            </Text>
+            {isAdmin && (
+              <Button sx={{ size: 'sm', colorScheme: 'red', variant: 'ghost' }}>
+                Delete
+              </Button>
+            )}
+          </Stack>
+        )}
+      </Each>
+
+      {/* Empty state */}
+      {!todos && (
+        <Text sx={{ color: 'gray.400', textAlign: 'center', py: 8 }}>
+          No todos yet. Add one above!
+        </Text>
+      )}
+    </Stack>
+  );
+}