@object-ui/plugin-timeline 3.0.3 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-timeline",
-  "version": "3.0.3",
+  "version": "3.1.1",
   "type": "module",
   "license": "MIT",
   "description": "Timeline component plugin for Object UI",
@@ -24,26 +24,27 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^3.0.4",
+    "@objectstack/spec": "^3.2.1",
+    "class-variance-authority": "^0.7.1",
     "zod": "^4.3.6",
-    "@object-ui/core": "3.0.3",
-    "@object-ui/components": "3.0.3",
-    "@object-ui/mobile": "3.0.3",
-    "@object-ui/react": "3.0.3",
-    "@object-ui/types": "3.0.3"
+    "@object-ui/components": "3.1.1",
+    "@object-ui/core": "3.1.1",
+    "@object-ui/mobile": "3.1.1",
+    "@object-ui/types": "3.1.1",
+    "@object-ui/react": "3.1.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "19.2.13",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "@object-ui/data-objectstack": "3.0.3"
+    "@object-ui/data-objectstack": "3.1.1"
   },
   "scripts": {
     "build": "vite build",

package/src/ObjectTimeline.test.tsx

@@ -15,6 +15,7 @@ vi.mock('@object-ui/react', () => ({
     close: vi.fn(),
     setIsOpen: vi.fn(),
     mode: 'overlay',
+    view: undefined,
   }),
 }));
 
@@ -66,7 +67,7 @@ describe('ObjectTimeline', () => {
             type: 'timeline',
             objectName: 'events',
             titleField: 'name',
-            dateField: 'date' // Mapping needs to be correct in logic
+            dateField: 'date' // Backward-compat: legacy dateField still works
         };
 
         render(<ObjectTimeline schema={schema} dataSource={mockDataSource} />);
@@ -79,4 +80,59 @@ describe('ObjectTimeline', () => {
             expect(screen.getByText('Event 1')).toBeDefined();
         });
     });
+
+    it('uses spec-compliant startDateField property', async () => {
+        const dataWithDates = [
+            { id: '1', name: 'Sprint 1', start_date: '2024-01-01', end_date: '2024-01-14', team: 'Alpha' },
+        ];
+        (mockDataSource.find as any).mockResolvedValue(dataWithDates);
+
+        const schema: any = {
+            type: 'timeline',
+            objectName: 'sprints',
+            titleField: 'name',
+            startDateField: 'start_date',
+            endDateField: 'end_date',
+        };
+
+        render(<ObjectTimeline schema={schema} dataSource={mockDataSource} />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Sprint 1')).toBeDefined();
+        });
+    });
+
+    it('supports groupByField and colorField properties', async () => {
+        const dataWithGroups = [
+            { id: '1', name: 'Task A', start_date: '2024-01-01', team: 'Alpha', priority: 'high' },
+        ];
+        (mockDataSource.find as any).mockResolvedValue(dataWithGroups);
+
+        const schema: any = {
+            type: 'timeline',
+            objectName: 'tasks',
+            titleField: 'name',
+            startDateField: 'start_date',
+            groupByField: 'team',
+            colorField: 'priority',
+        };
+
+        render(<ObjectTimeline schema={schema} dataSource={mockDataSource} />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Task A')).toBeDefined();
+        });
+    });
+
+    it('supports scale property', () => {
+        const schema: any = {
+            type: 'timeline',
+            items: [
+                { title: 'Weekly Event', date: '2024-01-01' }
+            ],
+            scale: 'week',
+        };
+        render(<ObjectTimeline schema={schema} />);
+        expect(screen.getByText('Weekly Event')).toBeDefined();
+    });
 });

package/src/ObjectTimeline.tsx

@@ -7,9 +7,10 @@
  */
 
 import React, { useEffect, useState, useCallback } from 'react';
-import type { DataSource, TimelineSchema } from '@object-ui/types';
+import type { DataSource, TimelineSchema, TimelineConfig } from '@object-ui/types';
 import { useDataScope, useNavigationOverlay } from '@object-ui/react';
 import { NavigationOverlay } from '@object-ui/components';
+import { extractRecords, buildExpandFields } from '@object-ui/core';
 import { usePullToRefresh } from '@object-ui/mobile';
 import { z } from 'zod';
 import { TimelineRenderer } from './renderer';
@@ -25,16 +26,36 @@ const TimelineExtensionSchema = z.object({
    mapping: TimelineMappingSchema.optional(),
    objectName: z.string().optional(),
    titleField: z.string().optional(),
+   /** @deprecated Use startDateField instead */
    dateField: z.string().optional(),
+   startDateField: z.string().optional(),
+   endDateField: z.string().optional(),
    descriptionField: z.string().optional(),
+   groupByField: z.string().optional(),
+   colorField: z.string().optional(),
+   scale: z.enum(['hour', 'day', 'week', 'month', 'quarter', 'year']).optional(),
 });
 
 export interface ObjectTimelineProps {
   schema: TimelineSchema & {
     objectName?: string;
+    /** Spec-compliant nested timeline config */
+    timeline?: TimelineConfig;
+    /** @deprecated Use timeline.titleField instead */
     titleField?: string;
+    /** @deprecated Use timeline.startDateField instead */
     dateField?: string;
+    /** @deprecated Use timeline.startDateField instead */
+    startDateField?: string;
+    /** @deprecated Use timeline.endDateField instead */
+    endDateField?: string;
     descriptionField?: string;
+    /** @deprecated Use timeline.groupByField instead */
+    groupByField?: string;
+    /** @deprecated Use timeline.colorField instead */
+    colorField?: string;
+    /** @deprecated Use timeline.scale instead */
+    scale?: 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
     // Map data fields to timeline item properties
     mapping?: {
       title?: string;
@@ -61,6 +82,10 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
   const [refreshKey, setRefreshKey] = useState(0);
+  const [objectDef, setObjectDef] = useState<any>(null);
+
+  // Resolve nested TimelineConfig (spec-compliant)
+  const timelineConfig = schema.timeline;
 
   useEffect(() => {
     const result = TimelineExtensionSchema.safeParse(schema);
@@ -71,24 +96,35 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
 
   const boundData = useDataScope(schema.bind);
 
+  // Fetch object definition for metadata
+  useEffect(() => {
+    let isMounted = true;
+    const fetchMeta = async () => {
+      if (!dataSource || typeof dataSource.getObjectSchema !== 'function' || !schema.objectName) return;
+      try {
+        const def = await dataSource.getObjectSchema(schema.objectName);
+        if (isMounted) setObjectDef(def);
+      } catch (e) {
+        console.warn('Failed to fetch object def for ObjectTimeline', e);
+      }
+    };
+    fetchMeta();
+    return () => { isMounted = false; };
+  }, [schema.objectName, dataSource]);
+
   useEffect(() => {
     const fetchData = async () => {
-        if (!dataSource || !schema.objectName) return;
+        if (!dataSource || typeof dataSource.find !== 'function' || !schema.objectName) return;
         setLoading(true);
         try {
+            // Auto-inject $expand for lookup/master_detail fields
+            const expand = buildExpandFields(objectDef?.fields);
             const results = await dataSource.find(schema.objectName, {
-                options: { $top: 100 }
+                options: { $top: 100 },
+                ...(expand.length > 0 ? { $expand: expand } : {}),
             });
-            let data = results;
-            if ((results as any).records) {
-                data = (results as any).records;
-            } else if ((results as any).data) {
-                data = (results as any).data;
-            }
-
-            if (Array.isArray(data)) {
-                setFetchedData(data);
-            }
+            const data = extractRecords(results);
+            setFetchedData(data);
         } catch (e) {
             console.error(e);
             setError(e as Error);
@@ -100,7 +136,7 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
     if (schema.objectName && !boundData && !schema.items && !(props as any).data) {
         fetchData();
     }
-  }, [schema.objectName, dataSource, boundData, schema.items, (props as any).data, refreshKey]);
+  }, [schema.objectName, dataSource, boundData, schema.items, (props as any).data, refreshKey, objectDef]);
 
   const rawData = (props as any).data || boundData || fetchedData;
 
@@ -108,19 +144,27 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
   let effectiveItems = schema.items;
   
   if (!effectiveItems && rawData && Array.isArray(rawData)) {
-      const titleField = schema.mapping?.title || schema.titleField || 'name';
-      const dateField = schema.mapping?.date || schema.dateField || 'date';
-      const descField = schema.mapping?.description || schema.descriptionField || 'description';
-      const variantField = schema.mapping?.variant || 'variant';
+      // Resolve TimelineConfig with backwards-compatible fallbacks
+      const titleField = timelineConfig?.titleField ?? schema.mapping?.title ?? schema.titleField ?? 'name';
+      // Spec-compliant: prefer timeline.startDateField, fallback to flat props
+      const startDateField = timelineConfig?.startDateField ?? schema.mapping?.date ?? schema.startDateField ?? schema.dateField ?? 'date';
+      const endDateField = timelineConfig?.endDateField ?? schema.endDateField ?? startDateField;
+      const descField = schema.mapping?.description ?? schema.descriptionField ?? 'description';
+      const variantField = schema.mapping?.variant ?? 'variant';
+      const groupByField = timelineConfig?.groupByField ?? schema.groupByField;
+      const colorField = timelineConfig?.colorField ?? schema.colorField;
 
       effectiveItems = rawData.map(item => ({
           title: item[titleField],
           // Support both 'time' (vertical) and 'startDate' (gantt)
-          time: item[dateField],
-          startDate: item[dateField], 
-          endDate: item[dateField], // Default single point
+          time: item[startDateField],
+          startDate: item[startDateField], 
+          endDate: item[endDateField],
           description: item[descField],
           variant: item[variantField] || 'default',
+          // Spec-compliant: group and color support
+          ...(groupByField ? { group: item[groupByField] } : {}),
+          ...(colorField ? { color: item[colorField] } : {}),
           // Pass original item for click handlers
           _data: item
       }));
@@ -141,10 +185,15 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
     onRowClick: onRowClick ?? onItemClick,
   });
 
+  // Resolve scale: spec timeline.scale takes priority over flat schema.scale
+  const resolvedScale = timelineConfig?.scale ?? schema.scale;
+
   const effectiveSchema = {
       ...schema,
       items: effectiveItems || [],
       className: className || schema.className,
+      // Map spec 'scale' to renderer 'timeScale' (used by gantt variant)
+      ...(resolvedScale ? { timeScale: resolvedScale } : {}),
       onItemClick: (item: any) => {
         const record = item._data || item;
         navigation.handleClick(record);
@@ -161,7 +210,7 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
   }
 
   return (
-    <div ref={pullRef} className="relative overflow-auto h-full">
+    <div ref={pullRef} className="relative overflow-auto h-full min-w-0">
       {pullDistance > 0 && (
         <div
           className="flex items-center justify-center text-xs text-muted-foreground"

package/src/__tests__/ObjectTimeline.spec-config.test.tsx

@@ -0,0 +1,232 @@
+/**
+ * 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 { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ObjectTimeline } from '../ObjectTimeline';
+
+// Mock dependencies
+vi.mock('@object-ui/react', () => ({
+  useDataScope: () => undefined,
+  useNavigationOverlay: () => ({
+    isOverlay: false,
+    handleClick: vi.fn(),
+    selectedRecord: null,
+    isOpen: false,
+    close: vi.fn(),
+    setIsOpen: vi.fn(),
+    mode: 'page' as const,
+    width: undefined,
+    view: undefined,
+    open: vi.fn(),
+  }),
+}));
+
+vi.mock('@object-ui/components', () => ({
+  NavigationOverlay: () => null,
+}));
+
+vi.mock('@object-ui/mobile', () => ({
+  usePullToRefresh: () => ({
+    ref: { current: null },
+    isRefreshing: false,
+    pullDistance: 0,
+  }),
+}));
+
+// Mock the TimelineRenderer to inspect the schema it receives
+const mockTimelineRenderer = vi.fn(() => <div data-testid="timeline-renderer" />);
+vi.mock('../renderer', () => ({
+  TimelineRenderer: (props: any) => mockTimelineRenderer(props),
+}));
+
+describe('ObjectTimeline Spec Config', () => {
+  beforeEach(() => {
+    mockTimelineRenderer.mockClear();
+  });
+
+  const mockData = [
+    { id: '1', name: 'Event A', start_date: '2024-01-01', end_date: '2024-01-15', category: 'work', priority_color: 'red' },
+    { id: '2', name: 'Event B', start_date: '2024-02-01', end_date: '2024-02-28', category: 'personal', priority_color: 'blue' },
+  ];
+
+  describe('nested timeline config', () => {
+    it('uses timeline.startDateField to resolve start dates', () => {
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        timeline: { startDateField: 'start_date', titleField: 'name' },
+      };
+      render(<ObjectTimeline schema={schema} data={mockData} />);
+      expect(mockTimelineRenderer).toHaveBeenCalled();
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.items[0].time).toBe('2024-01-01');
+      expect(renderedSchema.items[0].startDate).toBe('2024-01-01');
+    });
+
+    it('uses timeline.titleField to resolve titles', () => {
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        timeline: { startDateField: 'start_date', titleField: 'name' },
+      };
+      render(<ObjectTimeline schema={schema} data={mockData} />);
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.items[0].title).toBe('Event A');
+      expect(renderedSchema.items[1].title).toBe('Event B');
+    });
+
+    it('uses timeline.endDateField to resolve end dates', () => {
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        timeline: { startDateField: 'start_date', endDateField: 'end_date', titleField: 'name' },
+      };
+      render(<ObjectTimeline schema={schema} data={mockData} />);
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.items[0].endDate).toBe('2024-01-15');
+    });
+
+    it('uses timeline.groupByField to add group property', () => {
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        timeline: { startDateField: 'start_date', titleField: 'name', groupByField: 'category' },
+      };
+      render(<ObjectTimeline schema={schema} data={mockData} />);
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.items[0].group).toBe('work');
+      expect(renderedSchema.items[1].group).toBe('personal');
+    });
+
+    it('uses timeline.colorField to add color property', () => {
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        timeline: { startDateField: 'start_date', titleField: 'name', colorField: 'priority_color' },
+      };
+      render(<ObjectTimeline schema={schema} data={mockData} />);
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.items[0].color).toBe('red');
+      expect(renderedSchema.items[1].color).toBe('blue');
+    });
+
+    it('uses timeline.scale to set timeScale on rendered schema', () => {
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        timeline: { startDateField: 'start_date', titleField: 'name', scale: 'month' },
+      };
+      render(<ObjectTimeline schema={schema} data={mockData} />);
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.timeScale).toBe('month');
+    });
+
+    it('timeline.scale supports all valid values', () => {
+      const scales = ['hour', 'day', 'week', 'month', 'quarter', 'year'] as const;
+      scales.forEach((scale) => {
+        mockTimelineRenderer.mockClear();
+        const schema: any = {
+          type: 'timeline' as const,
+          objectName: 'events',
+          timeline: { startDateField: 'start_date', titleField: 'name', scale },
+        };
+        render(<ObjectTimeline schema={schema} data={mockData} />);
+        const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+        expect(renderedSchema.timeScale).toBe(scale);
+      });
+    });
+  });
+
+  describe('backward compatibility', () => {
+    it('falls back to flat startDateField when timeline config is not set', () => {
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        startDateField: 'start_date',
+        titleField: 'name',
+      };
+      render(<ObjectTimeline schema={schema} data={mockData} />);
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.items[0].time).toBe('2024-01-01');
+    });
+
+    it('falls back to legacy dateField when startDateField is not set', () => {
+      const data = [{ id: '1', name: 'Event', legacy_date: '2024-03-15' }];
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        dateField: 'legacy_date',
+        titleField: 'name',
+      };
+      render(<ObjectTimeline schema={schema} data={data} />);
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.items[0].time).toBe('2024-03-15');
+    });
+
+    it('falls back to flat groupByField when timeline.groupByField is not set', () => {
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        startDateField: 'start_date',
+        titleField: 'name',
+        groupByField: 'category',
+      };
+      render(<ObjectTimeline schema={schema} data={mockData} />);
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.items[0].group).toBe('work');
+    });
+
+    it('falls back to flat colorField when timeline.colorField is not set', () => {
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        startDateField: 'start_date',
+        titleField: 'name',
+        colorField: 'priority_color',
+      };
+      render(<ObjectTimeline schema={schema} data={mockData} />);
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.items[0].color).toBe('red');
+    });
+
+    it('falls back to flat scale when timeline.scale is not set', () => {
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        startDateField: 'start_date',
+        titleField: 'name',
+        scale: 'week',
+      };
+      render(<ObjectTimeline schema={schema} data={mockData} />);
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.timeScale).toBe('week');
+    });
+
+    it('spec timeline config takes priority over flat props', () => {
+      const schema: any = {
+        type: 'timeline' as const,
+        objectName: 'events',
+        startDateField: 'end_date',      // flat — should be overridden
+        titleField: 'id',                 // flat — should be overridden
+        groupByField: 'priority_color',   // flat — should be overridden
+        timeline: {
+          startDateField: 'start_date',   // spec — takes priority
+          titleField: 'name',             // spec — takes priority
+          groupByField: 'category',       // spec — takes priority
+        },
+      };
+      render(<ObjectTimeline schema={schema} data={mockData} />);
+      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
+      expect(renderedSchema.items[0].time).toBe('2024-01-01');
+      expect(renderedSchema.items[0].title).toBe('Event A');
+      expect(renderedSchema.items[0].group).toBe('work');
+    });
+  });
+});

package/src/__tests__/timeline-variants.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * 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 React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  Timeline,
+  TimelineItem,
+  TimelineMarker,
+  timelineItemVariants,
+  timelineMarkerVariants,
+} from '../index';
+
+describe('TimelineItem density variants', () => {
+  it('renders with default density (mb-10)', () => {
+    const { container } = render(
+      <Timeline>
+        <TimelineItem data-testid="item">Content</TimelineItem>
+      </Timeline>
+    );
+    const item = container.querySelector('li');
+    expect(item?.className).toContain('mb-10');
+    expect(item?.className).toContain('ml-6');
+  });
+
+  it('renders with compact density (mb-3)', () => {
+    const { container } = render(
+      <Timeline>
+        <TimelineItem density="compact">Content</TimelineItem>
+      </Timeline>
+    );
+    const item = container.querySelector('li');
+    expect(item?.className).toContain('mb-3');
+    expect(item?.className).toContain('ml-6');
+  });
+
+  it('renders with comfortable density (mb-6)', () => {
+    const { container } = render(
+      <Timeline>
+        <TimelineItem density="comfortable">Content</TimelineItem>
+      </Timeline>
+    );
+    const item = container.querySelector('li');
+    expect(item?.className).toContain('mb-6');
+    expect(item?.className).toContain('ml-6');
+  });
+
+  it('allows className override', () => {
+    const { container } = render(
+      <Timeline>
+        <TimelineItem density="compact" className="custom-class">Content</TimelineItem>
+      </Timeline>
+    );
+    const item = container.querySelector('li');
+    expect(item?.className).toContain('custom-class');
+    expect(item?.className).toContain('mb-3');
+  });
+
+  it('cva function produces expected classes', () => {
+    expect(timelineItemVariants({ density: 'default' })).toContain('mb-10');
+    expect(timelineItemVariants({ density: 'compact' })).toContain('mb-3');
+    expect(timelineItemVariants({ density: 'comfortable' })).toContain('mb-6');
+  });
+});
+
+describe('TimelineMarker semantic color variants', () => {
+  it('renders with default variant', () => {
+    const { container } = render(<TimelineMarker />);
+    const marker = container.firstChild as HTMLElement;
+    expect(marker.className).toContain('bg-blue-200');
+    expect(marker.className).toContain('border-blue-400');
+  });
+
+  it('renders with success variant', () => {
+    const { container } = render(<TimelineMarker variant="success" />);
+    const marker = container.firstChild as HTMLElement;
+    expect(marker.className).toContain('bg-emerald-200');
+    expect(marker.className).toContain('border-emerald-500');
+  });
+
+  it('renders with warning variant', () => {
+    const { container } = render(<TimelineMarker variant="warning" />);
+    const marker = container.firstChild as HTMLElement;
+    expect(marker.className).toContain('bg-amber-200');
+    expect(marker.className).toContain('border-amber-500');
+  });
+
+  it('renders with danger variant', () => {
+    const { container } = render(<TimelineMarker variant="danger" />);
+    const marker = container.firstChild as HTMLElement;
+    expect(marker.className).toContain('bg-red-200');
+    expect(marker.className).toContain('border-red-500');
+  });
+
+  it('renders with info variant', () => {
+    const { container } = render(<TimelineMarker variant="info" />);
+    const marker = container.firstChild as HTMLElement;
+    expect(marker.className).toContain('bg-purple-200');
+    expect(marker.className).toContain('border-purple-500');
+  });
+
+  it('renders with todo status variant', () => {
+    const { container } = render(<TimelineMarker variant="todo" />);
+    const marker = container.firstChild as HTMLElement;
+    expect(marker.className).toContain('bg-slate-200');
+    expect(marker.className).toContain('border-slate-400');
+  });
+
+  it('renders with in-progress status variant', () => {
+    const { container } = render(<TimelineMarker variant="in-progress" />);
+    const marker = container.firstChild as HTMLElement;
+    expect(marker.className).toContain('bg-blue-200');
+    expect(marker.className).toContain('border-blue-500');
+  });
+
+  it('renders with done status variant', () => {
+    const { container } = render(<TimelineMarker variant="done" />);
+    const marker = container.firstChild as HTMLElement;
+    expect(marker.className).toContain('bg-emerald-200');
+    expect(marker.className).toContain('border-emerald-500');
+  });
+
+  it('cva function produces expected classes for status variants', () => {
+    expect(timelineMarkerVariants({ variant: 'todo' })).toContain('bg-slate-200');
+    expect(timelineMarkerVariants({ variant: 'in-progress' })).toContain('bg-blue-200');
+    expect(timelineMarkerVariants({ variant: 'done' })).toContain('bg-emerald-200');
+  });
+
+  it('applies common base classes', () => {
+    const { container } = render(<TimelineMarker variant="default" />);
+    const marker = container.firstChild as HTMLElement;
+    expect(marker.className).toContain('rounded-full');
+    expect(marker.className).toContain('border-2');
+    expect(marker.className).toContain('absolute');
+  });
+
+  it('allows className override', () => {
+    const { container } = render(<TimelineMarker variant="success" className="extra-class" />);
+    const marker = container.firstChild as HTMLElement;
+    expect(marker.className).toContain('extra-class');
+    expect(marker.className).toContain('bg-emerald-200');
+  });
+});