@anymux/ui-kit 0.1.0

package/src/calendar/MonthView.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { CalendarModel } from './CalendarModel';
+import { EventCard } from './EventCard';
+
+export interface MonthViewProps {
+  model: CalendarModel;
+  className?: string;
+}
+
+const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+export const MonthView = observer<MonthViewProps>(({ model, className = '' }) => {
+  const d = model.currentDate;
+  const year = d.getFullYear();
+  const month = d.getMonth();
+  const today = new Date();
+
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+  const weeks: (number | null)[][] = [];
+  let week: (number | null)[] = [];
+  for (let i = 0; i < firstDay; i++) week.push(null);
+  for (let day = 1; day <= daysInMonth; day++) {
+    week.push(day);
+    if (week.length === 7) { weeks.push(week); week = []; }
+  }
+  if (week.length > 0) {
+    while (week.length < 7) week.push(null);
+    weeks.push(week);
+  }
+
+  const isToday = (day: number) =>
+    day === today.getDate() && month === today.getMonth() && year === today.getFullYear();
+
+  return (
+    <div className={`flex flex-col h-full ${className}`}>
+      <div className="grid grid-cols-7 border-b border-gray-200">
+        {DAYS.map(day => (
+          <div key={day} className="px-2 py-2 text-xs font-medium text-gray-500 text-center">{day.slice(0, 3)}</div>
+        ))}
+      </div>
+      <div className="flex-1 grid grid-rows-[repeat(auto-fill,1fr)]">
+        {weeks.map((week, wi) => (
+          <div key={wi} className="grid grid-cols-7 border-b border-gray-100 min-h-[80px]">
+            {week.map((day, di) => {
+              const dateKey = day ? `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}` : null;
+              const events = dateKey ? (model.eventsByDay.get(dateKey) ?? []) : [];
+              return (
+                <div key={di} className={`border-r border-gray-100 p-1 ${day === null ? 'bg-gray-50' : ''}`}>
+                  {day !== null && (
+                    <>
+                      <div className={`text-xs mb-0.5 w-6 h-6 flex items-center justify-center rounded-full ${
+                        isToday(day) ? 'bg-blue-500 text-white font-bold' : 'text-gray-700'
+                      }`}>
+                        {day}
+                      </div>
+                      <div className="space-y-0.5">
+                        {events.slice(0, 3).map(ev => (
+                          <EventCard key={ev.id} event={ev} compact onClick={() => model.selectEvent(ev)} />
+                        ))}
+                        {events.length > 3 && (
+                          <p className="text-[10px] text-gray-400 pl-1">+{events.length - 3} more</p>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

package/src/calendar/WeekView.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { CalendarModel } from './CalendarModel';
+
+export interface WeekViewProps {
+  model: CalendarModel;
+  className?: string;
+}
+
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+
+export const WeekView = observer<WeekViewProps>(({ model, className = '' }) => {
+  const { start } = model.visibleDateRange;
+  const days = Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(start);
+    d.setDate(start.getDate() + i);
+    return d;
+  });
+
+  const now = new Date();
+  const isToday = (d: Date) => d.toDateString() === now.toDateString();
+  const currentHour = now.getHours();
+  const currentMinute = now.getMinutes();
+
+  // Collect all-day events for the visible week
+  const allDayEventsByDay = days.map(d => {
+    const dateKey = d.toISOString().slice(0, 10);
+    return (model.eventsByDay.get(dateKey) ?? []).filter(e => e.allDay);
+  });
+  const hasAllDay = allDayEventsByDay.some(events => events.length > 0);
+
+  return (
+    <div className={`flex flex-col h-full overflow-auto ${className}`}>
+      {/* Day headers */}
+      <div className="sticky top-0 bg-white z-10 border-b border-gray-200">
+        <div className="grid" style={{ gridTemplateColumns: '60px repeat(7, 1fr)' }}>
+          <div />
+          {days.map((d, i) => (
+            <div key={i} className={`text-center py-2 border-l border-gray-100 ${isToday(d) ? 'bg-blue-50' : ''}`}>
+              <div className="text-xs text-gray-500">{d.toLocaleDateString(undefined, { weekday: 'short' })}</div>
+              <div className={`text-lg font-medium ${isToday(d) ? 'text-blue-600' : 'text-gray-900'}`}>{d.getDate()}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* All-day events row */}
+        {hasAllDay && (
+          <div className="grid border-t border-gray-100" style={{ gridTemplateColumns: '60px repeat(7, 1fr)' }}>
+            <div className="text-[10px] text-gray-400 text-right pr-2 py-1">all-day</div>
+            {allDayEventsByDay.map((events, i) => (
+              <div key={i} className="border-l border-gray-100 px-0.5 py-0.5 space-y-0.5">
+                {events.map(ev => (
+                  <button
+                    key={ev.id}
+                    onClick={() => model.selectEvent(ev)}
+                    className="w-full text-left text-[10px] px-1 py-0.5 rounded truncate"
+                    style={{
+                      backgroundColor: `${ev.color ?? '#3b82f6'}20`,
+                      color: ev.color ?? '#3b82f6',
+                      borderLeft: `2px solid ${ev.color ?? '#3b82f6'}`,
+                    }}
+                    title={ev.title}
+                  >
+                    {ev.title}
+                  </button>
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Time grid */}
+      <div className="flex-1 relative">
+        {HOURS.map(hour => (
+          <div key={hour} className="grid border-b border-gray-50" style={{ gridTemplateColumns: '60px repeat(7, 1fr)', height: '48px' }}>
+            <div className="text-[10px] text-gray-400 text-right pr-2 -mt-2">
+              {hour === 0 ? '' : `${hour % 12 || 12} ${hour < 12 ? 'AM' : 'PM'}`}
+            </div>
+            {days.map((d, i) => {
+              const dateKey = d.toISOString().slice(0, 10);
+              const events = (model.eventsByDay.get(dateKey) ?? []).filter(e =>
+                !e.allDay && e.startDate.getHours() === hour
+              );
+              const showTimeLine = isToday(d) && hour === currentHour;
+              return (
+                <div key={i} className="border-l border-gray-100 relative">
+                  {/* Current time indicator */}
+                  {showTimeLine && (
+                    <div
+                      className="absolute left-0 right-0 z-10 pointer-events-none"
+                      style={{ top: `${(currentMinute / 60) * 48}px` }}
+                    >
+                      <div className="w-2 h-2 bg-red-500 rounded-full absolute -left-1 -top-1" />
+                      <div className="h-px bg-red-500 w-full" />
+                    </div>
+                  )}
+                  {events.map((ev, ei) => {
+                    const durationHours = Math.max(0.5, (ev.endDate.getTime() - ev.startDate.getTime()) / 3600000);
+                    const topOffset = (ev.startDate.getMinutes() / 60) * 48;
+                    return (
+                      <button
+                        key={ev.id}
+                        onClick={() => model.selectEvent(ev)}
+                        className="absolute text-xs px-1 py-0.5 rounded truncate z-[1]"
+                        title={ev.title}
+                        style={{
+                          backgroundColor: `${ev.color ?? '#3b82f6'}20`,
+                          color: ev.color ?? '#3b82f6',
+                          borderLeft: `2px solid ${ev.color ?? '#3b82f6'}`,
+                          height: `${durationHours * 48}px`,
+                          top: `${topOffset}px`,
+                          left: `${ei * 4 + 2}px`,
+                          right: '2px',
+                        }}
+                      >
+                        {ev.title}
+                      </button>
+                    );
+                  })}
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

package/src/calendar/index.ts

@@ -0,0 +1,18 @@
+// Types
+export type { CalendarEvent, CalendarInfo, ICalendarProvider } from './types';
+
+// Model
+export { CalendarModel } from './CalendarModel';
+export type { CalendarViewMode } from './CalendarModel';
+
+// Components
+export { CalendarBrowser, type CalendarBrowserProps } from './CalendarBrowser';
+export { MonthView, type MonthViewProps } from './MonthView';
+export { WeekView, type WeekViewProps } from './WeekView';
+export { DayView, type DayViewProps } from './DayView';
+export { AgendaView, type AgendaViewProps } from './AgendaView';
+export { EventCard, type EventCardProps } from './EventCard';
+export { CalendarSidebar, type CalendarSidebarProps } from './CalendarSidebar';
+
+// Mock Provider
+export { MockCalendarProvider } from './MockCalendarProvider';

package/src/calendar/types.ts

@@ -0,0 +1,25 @@
+import type { ObjectMetadata, IObjectProvider } from '../types-common';
+
+export interface CalendarEvent extends ObjectMetadata {
+  type: 'calendar-event';
+  startDate: Date;
+  endDate: Date;
+  allDay: boolean;
+  location?: string;
+  attendees?: string[];
+  recurrence?: string;
+  color?: string;
+  calendarId: string;
+}
+
+export interface CalendarInfo {
+  id: string;
+  name: string;
+  color: string;
+}
+
+export interface ICalendarProvider extends IObjectProvider<CalendarEvent> {
+  getCalendars(): Promise<CalendarInfo[]>;
+  getEventsByRange(start: Date, end: Date): Promise<CalendarEvent[]>;
+  getEventsByCalendar(calendarId: string): Promise<CalendarEvent[]>;
+}

package/src/contacts/ContactAvatar.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export interface ContactAvatarProps {
+  firstName: string;
+  lastName: string;
+  avatar?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'w-8 h-8 text-xs',
+  md: 'w-10 h-10 text-sm',
+  lg: 'w-16 h-16 text-xl',
+};
+
+const bgColors = [
+  'bg-blue-500', 'bg-green-500', 'bg-purple-500', 'bg-pink-500',
+  'bg-indigo-500', 'bg-teal-500', 'bg-orange-500', 'bg-red-500',
+];
+
+export const ContactAvatar = ({ firstName, lastName, avatar, size = 'md', className = '' }: ContactAvatarProps) => {
+  const initials = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+  const colorIdx = (firstName.charCodeAt(0) + lastName.charCodeAt(0)) % bgColors.length;
+
+  if (avatar) {
+    return <img src={avatar} alt={`${firstName} ${lastName}`} className={`${sizeClasses[size]} rounded-full object-cover ${className}`} />;
+  }
+
+  return (
+    <div className={`${sizeClasses[size]} ${bgColors[colorIdx]} rounded-full flex items-center justify-center text-white font-medium ${className}`}>
+      {initials}
+    </div>
+  );
+};

package/src/contacts/ContactBrowser.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Search, Loader2 } from 'lucide-react';
+import { BrowserError } from '@anymux/ui/components/browser-error';
+import type { ContactListModel } from './ContactListModel';
+import { ContactList } from './ContactList';
+import { ContactDetail } from './ContactDetail';
+import { ContactGroupSidebar } from './ContactGroupSidebar';
+
+export interface ContactBrowserProps {
+  model: ContactListModel;
+  className?: string;
+  showSidebar?: boolean;
+}
+
+export const ContactBrowser = observer<ContactBrowserProps>(({ model, className = '', showSidebar = true }) => {
+  useEffect(() => { model.loadContacts(); }, [model]);
+
+  return (
+    <div className={`flex h-full bg-white rounded-xl border border-gray-200 overflow-hidden ${className}`}>
+      {showSidebar && <ContactGroupSidebar model={model} />}
+
+      <div className="flex-1 flex flex-col min-w-0 border-r border-gray-200" style={{ maxWidth: '380px' }}>
+        {/* Search */}
+        <div className="px-4 py-2 border-b border-gray-200">
+          <div className="relative">
+            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Search contacts..."
+              value={model.searchQuery}
+              onChange={e => model.setSearch(e.target.value)}
+              className="w-full pl-9 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        {model.loading ? (
+          <div className="flex items-center justify-center h-64">
+            <Loader2 size={24} className="animate-spin text-gray-400" />
+          </div>
+        ) : model.error ? (
+          <BrowserError
+            error={model.error}
+            context="Contacts"
+            onRetry={() => model.loadContacts()}
+          />
+        ) : (
+          <ContactList model={model} className="flex-1" />
+        )}
+      </div>
+
+      <ContactDetail model={model} className="flex-1" />
+    </div>
+  );
+});

package/src/contacts/ContactCard.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Mail, Phone, Building } from 'lucide-react';
+import type { ContactItem } from './types';
+import { ContactAvatar } from './ContactAvatar';
+
+export interface ContactCardProps {
+  contact: ContactItem;
+  selected?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+export const ContactCard = ({ contact, selected = false, onClick, className = '' }: ContactCardProps) => (
+  <button
+    onClick={onClick}
+    className={`flex items-center gap-3 px-4 py-3 w-full text-left transition-colors ${
+      selected ? 'bg-blue-50 border-l-2 border-blue-500' : 'hover:bg-gray-50 border-l-2 border-transparent'
+    } ${className}`}
+  >
+    <ContactAvatar firstName={contact.firstName} lastName={contact.lastName} avatar={contact.avatar} />
+    <div className="flex-1 min-w-0">
+      <p className="text-sm font-medium text-gray-900 truncate" title={`${contact.firstName} ${contact.lastName}`}>
+        {contact.firstName} {contact.lastName}
+      </p>
+      {contact.company && (
+        <p className="text-xs text-gray-500 flex items-center gap-1 truncate" title={contact.company}>
+          <Building size={12} />
+          {contact.company}
+        </p>
+      )}
+    </div>
+    <div className="flex items-center gap-1.5 text-gray-400">
+      {contact.email && <Mail size={14} />}
+      {contact.phone && <Phone size={14} />}
+    </div>
+  </button>
+);

package/src/contacts/ContactDetail.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Mail, Phone, MapPin, Building, Calendar, Tag } from 'lucide-react';
+import type { ContactListModel } from './ContactListModel';
+import { ContactAvatar } from './ContactAvatar';
+
+export interface ContactDetailProps {
+  model: ContactListModel;
+  className?: string;
+}
+
+const DetailRow = ({ icon: Icon, label, value }: { icon: React.ElementType; label: string; value: string }) => (
+  <div className="flex items-start gap-3 py-2">
+    <Icon size={16} className="text-gray-400 mt-0.5 flex-shrink-0" />
+    <div>
+      <p className="text-xs text-gray-500">{label}</p>
+      <p className="text-sm text-gray-900">{value}</p>
+    </div>
+  </div>
+);
+
+export const ContactDetail = observer<ContactDetailProps>(({ model, className = '' }) => {
+  const contact = model.selectedContact;
+
+  if (!contact) {
+    return (
+      <div className={`flex items-center justify-center h-full text-gray-400 text-sm ${className}`}>
+        Select a contact to view details
+      </div>
+    );
+  }
+
+  return (
+    <div className={`p-6 overflow-y-auto ${className}`}>
+      <div className="flex flex-col items-center mb-6">
+        <ContactAvatar firstName={contact.firstName} lastName={contact.lastName} avatar={contact.avatar} size="lg" />
+        <h2 className="mt-3 text-lg font-semibold text-gray-900">{contact.firstName} {contact.lastName}</h2>
+        {contact.company && <p className="text-sm text-gray-500">{contact.company}</p>}
+      </div>
+
+      <div className="divide-y divide-gray-100">
+        {contact.email && <DetailRow icon={Mail} label="Email" value={contact.email} />}
+        {contact.phone && <DetailRow icon={Phone} label="Phone" value={contact.phone} />}
+        {contact.company && <DetailRow icon={Building} label="Company" value={contact.company} />}
+        {contact.address && <DetailRow icon={MapPin} label="Address" value={contact.address} />}
+        {contact.birthday && <DetailRow icon={Calendar} label="Birthday" value={contact.birthday.toLocaleDateString()} />}
+        {contact.groups && contact.groups.length > 0 && (
+          <div className="flex items-start gap-3 py-2">
+            <Tag size={16} className="text-gray-400 mt-0.5 flex-shrink-0" />
+            <div>
+              <p className="text-xs text-gray-500">Groups</p>
+              <div className="flex flex-wrap gap-1 mt-1">
+                {contact.groups.map(g => (
+                  <span key={g} className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{g}</span>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/contacts/ContactGroupSidebar.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Users, User } from 'lucide-react';
+import type { ContactListModel } from './ContactListModel';
+
+export interface ContactGroupSidebarProps {
+  model: ContactListModel;
+  className?: string;
+}
+
+export const ContactGroupSidebar = observer<ContactGroupSidebarProps>(({ model, className = '' }) => (
+  <div className={`w-56 border-r border-gray-200 bg-gray-50 overflow-y-auto ${className}`}>
+    <div className="p-3">
+      <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Groups</h3>
+      <button
+        onClick={() => model.setGroup(null)}
+        className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${
+          model.currentGroup === null ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'
+        }`}
+      >
+        <Users size={16} />
+        <span>All Contacts</span>
+        <span className="ml-auto text-xs text-gray-400">{model.contacts.length}</span>
+      </button>
+      {model.groups.map(group => (
+        <button
+          key={group.id}
+          onClick={() => model.setGroup(group.id)}
+          className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${
+            model.currentGroup === group.id ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'
+          }`}
+        >
+          <User size={16} />
+          <span className="truncate" title={group.name}>{group.name}</span>
+          <span className="ml-auto text-xs text-gray-400">{group.count}</span>
+        </button>
+      ))}
+    </div>
+  </div>
+));

package/src/contacts/ContactList.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { ContactListModel } from './ContactListModel';
+import { ContactCard } from './ContactCard';
+
+export interface ContactListProps {
+  model: ContactListModel;
+  className?: string;
+}
+
+export const ContactList = observer<ContactListProps>(({ model, className = '' }) => (
+  <div className={`overflow-y-auto ${className}`}>
+    {Array.from(model.groupedByLetter.entries()).map(([letter, contacts]) => (
+      <div key={letter}>
+        <div className="sticky top-0 bg-gray-50/90 backdrop-blur-sm px-4 py-1 border-b border-gray-100">
+          <span className="text-xs font-semibold text-gray-500">{letter}</span>
+        </div>
+        {contacts.map(contact => (
+          <ContactCard
+            key={contact.id}
+            contact={contact}
+            selected={model.selectedContact?.id === contact.id}
+            onClick={() => model.selectContact(contact)}
+          />
+        ))}
+      </div>
+    ))}
+    {model.filteredContacts.length === 0 && (
+      <div className="flex items-center justify-center h-32 text-gray-400 text-sm">No contacts found</div>
+    )}
+  </div>
+));

package/src/contacts/ContactListModel.ts

@@ -0,0 +1,120 @@
+import { makeAutoObservable, runInAction } from 'mobx';
+import type { IContactProvider, ContactItem, ContactGroup } from './types';
+
+export type ContactSortBy = 'firstName' | 'lastName' | 'company';
+
+export class ContactListModel {
+  contacts: ContactItem[] = [];
+  selectedContact: ContactItem | null = null;
+  groups: ContactGroup[] = [];
+  currentGroup: string | null = null;
+  searchQuery = '';
+  sortBy: ContactSortBy = 'lastName';
+  loading = false;
+  error: string | null = null;
+
+  constructor(private provider: IContactProvider) {
+    makeAutoObservable(this);
+  }
+
+  get filteredContacts(): ContactItem[] {
+    let result = this.contacts;
+    if (this.searchQuery) {
+      const q = this.searchQuery.toLowerCase();
+      result = result.filter(c =>
+        c.firstName.toLowerCase().includes(q) ||
+        c.lastName.toLowerCase().includes(q) ||
+        c.email?.toLowerCase().includes(q) ||
+        c.company?.toLowerCase().includes(q)
+      );
+    }
+    return this.sortContacts(result);
+  }
+
+  get groupedByLetter(): Map<string, ContactItem[]> {
+    const groups = new Map<string, ContactItem[]>();
+    for (const contact of this.filteredContacts) {
+      const letter = (this.sortBy === 'firstName' ? contact.firstName : contact.lastName)
+        .charAt(0).toUpperCase();
+      const group = groups.get(letter) ?? [];
+      group.push(contact);
+      groups.set(letter, group);
+    }
+    return groups;
+  }
+
+  get groupedByGroup(): Map<string, ContactItem[]> {
+    const groups = new Map<string, ContactItem[]>();
+    for (const contact of this.filteredContacts) {
+      for (const groupName of contact.groups ?? ['Ungrouped']) {
+        const group = groups.get(groupName) ?? [];
+        group.push(contact);
+        groups.set(groupName, group);
+      }
+    }
+    return groups;
+  }
+
+  async loadContacts() {
+    this.loading = true;
+    this.error = null;
+    try {
+      const [contacts, groups] = await Promise.all([
+        this.currentGroup
+          ? this.provider.getByGroup(this.currentGroup)
+          : this.provider.listItems(),
+        this.provider.getGroups()
+      ]);
+      runInAction(() => {
+        this.contacts = contacts;
+        this.groups = groups;
+      });
+    } catch (err: any) {
+      runInAction(() => { this.error = err?.message || 'Failed to load contacts'; });
+    } finally {
+      runInAction(() => { this.loading = false; });
+    }
+  }
+
+  selectContact(contact: ContactItem | null) {
+    this.selectedContact = contact;
+  }
+
+  setGroup(groupId: string | null) {
+    this.currentGroup = groupId;
+    this.loadContacts();
+  }
+
+  setSearch(query: string) {
+    this.searchQuery = query;
+  }
+
+  setSort(sortBy: ContactSortBy) {
+    this.sortBy = sortBy;
+  }
+
+  async addContact(contact: Omit<ContactItem, 'id' | 'createdAt' | 'updatedAt'>) {
+    const created = await this.provider.createItem(contact);
+    runInAction(() => { this.contacts.push(created); });
+    return created;
+  }
+
+  async deleteContact(id: string) {
+    await this.provider.deleteItem(id);
+    runInAction(() => {
+      this.contacts = this.contacts.filter(c => c.id !== id);
+      if (this.selectedContact?.id === id) this.selectedContact = null;
+    });
+  }
+
+  private sortContacts(contacts: ContactItem[]): ContactItem[] {
+    return [...contacts].sort((a, b) => {
+      switch (this.sortBy) {
+        case 'firstName': return a.firstName.localeCompare(b.firstName);
+        case 'lastName': return a.lastName.localeCompare(b.lastName);
+        case 'company': return (a.company ?? '').localeCompare(b.company ?? '');
+        default: return 0;
+      }
+    });
+  }
+}