@anymux/ui-kit 0.1.0

package/dist/calendar-DSlrbHoj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-DSlrbHoj.js","names":["provider: ICalendarProvider","err: any","event: Omit<CalendarEvent, 'id' | 'createdAt' | 'updatedAt'>","id: string","event: CalendarEvent | null","date: Date","mode: CalendarViewMode","d: Date","weeks: (number | null)[][]","week: (number | null)[]","day: number","d: Date","cells: (number | null)[]","day: number","VIEW_LABELS: Record<CalendarViewMode, string>","CALENDARS: CalendarInfo[]","events: CalendarEvent[]","id: string","item: Omit<CalendarEvent, 'id' | 'createdAt' | 'updatedAt'>","created: CalendarEvent","updates: Partial<CalendarEvent>","query: string","start: Date","end: Date","calendarId: string"],"sources":["../src/calendar/CalendarModel.ts","../src/calendar/EventCard.tsx","../src/calendar/MonthView.tsx","../src/calendar/WeekView.tsx","../src/calendar/DayView.tsx","../src/calendar/AgendaView.tsx","../src/calendar/CalendarSidebar.tsx","../src/calendar/CalendarBrowser.tsx","../src/calendar/MockCalendarProvider.ts"],"sourcesContent":["import { makeAutoObservable, flow } from 'mobx';\nimport type { ICalendarProvider, CalendarEvent, CalendarInfo } from './types';\n\nexport type CalendarViewMode = 'month' | 'week' | 'day' | 'agenda';\n\nexport class CalendarModel {\n  events: CalendarEvent[] = [];\n  calendars: CalendarInfo[] = [];\n  currentDate: Date = new Date();\n  viewMode: CalendarViewMode = 'month';\n  selectedEvent: CalendarEvent | null = null;\n  loading = false;\n  error: string | null = null;\n\n  constructor(private provider: ICalendarProvider) {\n    makeAutoObservable(this);\n  }\n\n  get visibleDateRange(): { start: Date; end: Date } {\n    const d = this.currentDate;\n    switch (this.viewMode) {\n      case 'month': {\n        const start = new Date(d.getFullYear(), d.getMonth(), 1);\n        start.setDate(start.getDate() - start.getDay());\n        const end = new Date(d.getFullYear(), d.getMonth() + 1, 0);\n        end.setDate(end.getDate() + (6 - end.getDay()));\n        return { start, end };\n      }\n      case 'week': {\n        const start = new Date(d);\n        start.setDate(d.getDate() - d.getDay());\n        start.setHours(0, 0, 0, 0);\n        const end = new Date(start);\n        end.setDate(start.getDate() + 6);\n        end.setHours(23, 59, 59, 999);\n        return { start, end };\n      }\n      case 'day': {\n        const start = new Date(d);\n        start.setHours(0, 0, 0, 0);\n        const end = new Date(d);\n        end.setHours(23, 59, 59, 999);\n        return { start, end };\n      }\n      case 'agenda': {\n        const start = new Date(d);\n        start.setHours(0, 0, 0, 0);\n        const end = new Date(d);\n        end.setDate(end.getDate() + 30);\n        return { start, end };\n      }\n    }\n  }\n\n  get eventsForCurrentView(): CalendarEvent[] {\n    const { start, end } = this.visibleDateRange;\n    return this.events.filter(e =>\n      e.endDate >= start && e.startDate <= end\n    );\n  }\n\n  get eventsByDay(): Map<string, CalendarEvent[]> {\n    const map = new Map<string, CalendarEvent[]>();\n    for (const event of this.eventsForCurrentView) {\n      const key = event.startDate.toISOString().slice(0, 10);\n      const list = map.get(key) ?? [];\n      list.push(event);\n      map.set(key, list);\n    }\n    return map;\n  }\n\n  loadEvents = flow(function* (this: CalendarModel) {\n    this.loading = true;\n    this.error = null;\n    try {\n      const { start, end } = this.visibleDateRange;\n      const [events, calendars] = yield Promise.all([\n        this.provider.getEventsByRange(start, end),\n        this.provider.getCalendars()\n      ]);\n      this.events = events;\n      this.calendars = calendars;\n    } catch (err: any) {\n      this.error = err?.message || 'Failed to load calendar events';\n    } finally {\n      this.loading = false;\n    }\n  });\n\n  selectEvent(event: CalendarEvent | null) {\n    this.selectedEvent = event;\n  }\n\n  setDate(date: Date) {\n    this.currentDate = date;\n    this.loadEvents();\n  }\n\n  setViewMode(mode: CalendarViewMode) {\n    this.viewMode = mode;\n    this.loadEvents();\n  }\n\n  navigateForward() {\n    const d = new Date(this.currentDate);\n    switch (this.viewMode) {\n      case 'month': d.setMonth(d.getMonth() + 1); break;\n      case 'week': d.setDate(d.getDate() + 7); break;\n      case 'day': d.setDate(d.getDate() + 1); break;\n      case 'agenda': d.setDate(d.getDate() + 30); break;\n    }\n    this.setDate(d);\n  }\n\n  navigateBack() {\n    const d = new Date(this.currentDate);\n    switch (this.viewMode) {\n      case 'month': d.setMonth(d.getMonth() - 1); break;\n      case 'week': d.setDate(d.getDate() - 7); break;\n      case 'day': d.setDate(d.getDate() - 1); break;\n      case 'agenda': d.setDate(d.getDate() - 30); break;\n    }\n    this.setDate(d);\n  }\n\n  today() {\n    this.setDate(new Date());\n  }\n\n  createEvent = flow(function* (this: CalendarModel, event: Omit<CalendarEvent, 'id' | 'createdAt' | 'updatedAt'>) {\n    const created = yield this.provider.createItem(event);\n    this.events.push(created);\n    return created;\n  });\n\n  deleteEvent = flow(function* (this: CalendarModel, id: string) {\n    yield this.provider.deleteItem(id);\n    this.events = this.events.filter(e => e.id !== id);\n    if (this.selectedEvent?.id === id) this.selectedEvent = null;\n  });\n}\n","import React from 'react';\nimport { Clock, MapPin } from 'lucide-react';\nimport type { CalendarEvent } from './types';\n\nexport interface EventCardProps {\n  event: CalendarEvent;\n  compact?: boolean;\n  onClick?: () => void;\n  className?: string;\n}\n\nconst formatTime = (d: Date) => d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n\nexport const EventCard = ({ event, compact = false, onClick, className = '' }: EventCardProps) => {\n  const color = event.color ?? '#3b82f6';\n\n  if (compact) {\n    return (\n      <button\n        onClick={onClick}\n        className={`text-left text-xs px-1.5 py-0.5 rounded truncate w-full hover:opacity-80 transition-opacity ${className}`}\n        style={{ backgroundColor: `${color}20`, color, borderLeft: `2px solid ${color}` }}\n        title={event.title}\n      >\n        {event.title}\n      </button>\n    );\n  }\n\n  return (\n    <button\n      onClick={onClick}\n      className={`text-left w-full p-3 rounded-lg border border-gray-200 hover:shadow-sm transition-shadow ${className}`}\n      style={{ borderLeftWidth: '3px', borderLeftColor: color }}\n    >\n      <p className=\"text-sm font-medium text-gray-900 truncate\" title={event.title}>{event.title}</p>\n      <div className=\"mt-1 flex items-center gap-3 text-xs text-gray-500\">\n        <span className=\"flex items-center gap-1\">\n          <Clock size={12} />\n          {event.allDay ? 'All day' : `${formatTime(event.startDate)} - ${formatTime(event.endDate)}`}\n        </span>\n        {event.location && (\n          <span className=\"flex items-center gap-1\">\n            <MapPin size={12} />\n            {event.location}\n          </span>\n        )}\n      </div>\n    </button>\n  );\n};\n","import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport type { CalendarModel } from './CalendarModel';\nimport { EventCard } from './EventCard';\n\nexport interface MonthViewProps {\n  model: CalendarModel;\n  className?: string;\n}\n\nconst DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n\nexport const MonthView = observer<MonthViewProps>(({ model, className = '' }) => {\n  const d = model.currentDate;\n  const year = d.getFullYear();\n  const month = d.getMonth();\n  const today = new Date();\n\n  const firstDay = new Date(year, month, 1).getDay();\n  const daysInMonth = new Date(year, month + 1, 0).getDate();\n\n  const weeks: (number | null)[][] = [];\n  let week: (number | null)[] = [];\n  for (let i = 0; i < firstDay; i++) week.push(null);\n  for (let day = 1; day <= daysInMonth; day++) {\n    week.push(day);\n    if (week.length === 7) { weeks.push(week); week = []; }\n  }\n  if (week.length > 0) {\n    while (week.length < 7) week.push(null);\n    weeks.push(week);\n  }\n\n  const isToday = (day: number) =>\n    day === today.getDate() && month === today.getMonth() && year === today.getFullYear();\n\n  return (\n    <div className={`flex flex-col h-full ${className}`}>\n      <div className=\"grid grid-cols-7 border-b border-gray-200\">\n        {DAYS.map(day => (\n          <div key={day} className=\"px-2 py-2 text-xs font-medium text-gray-500 text-center\">{day.slice(0, 3)}</div>\n        ))}\n      </div>\n      <div className=\"flex-1 grid grid-rows-[repeat(auto-fill,1fr)]\">\n        {weeks.map((week, wi) => (\n          <div key={wi} className=\"grid grid-cols-7 border-b border-gray-100 min-h-[80px]\">\n            {week.map((day, di) => {\n              const dateKey = day ? `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}` : null;\n              const events = dateKey ? (model.eventsByDay.get(dateKey) ?? []) : [];\n              return (\n                <div key={di} className={`border-r border-gray-100 p-1 ${day === null ? 'bg-gray-50' : ''}`}>\n                  {day !== null && (\n                    <>\n                      <div className={`text-xs mb-0.5 w-6 h-6 flex items-center justify-center rounded-full ${\n                        isToday(day) ? 'bg-blue-500 text-white font-bold' : 'text-gray-700'\n                      }`}>\n                        {day}\n                      </div>\n                      <div className=\"space-y-0.5\">\n                        {events.slice(0, 3).map(ev => (\n                          <EventCard key={ev.id} event={ev} compact onClick={() => model.selectEvent(ev)} />\n                        ))}\n                        {events.length > 3 && (\n                          <p className=\"text-[10px] text-gray-400 pl-1\">+{events.length - 3} more</p>\n                        )}\n                      </div>\n                    </>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n","import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport type { CalendarModel } from './CalendarModel';\n\nexport interface WeekViewProps {\n  model: CalendarModel;\n  className?: string;\n}\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i);\n\nexport const WeekView = observer<WeekViewProps>(({ model, className = '' }) => {\n  const { start } = model.visibleDateRange;\n  const days = Array.from({ length: 7 }, (_, i) => {\n    const d = new Date(start);\n    d.setDate(start.getDate() + i);\n    return d;\n  });\n\n  const now = new Date();\n  const isToday = (d: Date) => d.toDateString() === now.toDateString();\n  const currentHour = now.getHours();\n  const currentMinute = now.getMinutes();\n\n  // Collect all-day events for the visible week\n  const allDayEventsByDay = days.map(d => {\n    const dateKey = d.toISOString().slice(0, 10);\n    return (model.eventsByDay.get(dateKey) ?? []).filter(e => e.allDay);\n  });\n  const hasAllDay = allDayEventsByDay.some(events => events.length > 0);\n\n  return (\n    <div className={`flex flex-col h-full overflow-auto ${className}`}>\n      {/* Day headers */}\n      <div className=\"sticky top-0 bg-white z-10 border-b border-gray-200\">\n        <div className=\"grid\" style={{ gridTemplateColumns: '60px repeat(7, 1fr)' }}>\n          <div />\n          {days.map((d, i) => (\n            <div key={i} className={`text-center py-2 border-l border-gray-100 ${isToday(d) ? 'bg-blue-50' : ''}`}>\n              <div className=\"text-xs text-gray-500\">{d.toLocaleDateString(undefined, { weekday: 'short' })}</div>\n              <div className={`text-lg font-medium ${isToday(d) ? 'text-blue-600' : 'text-gray-900'}`}>{d.getDate()}</div>\n            </div>\n          ))}\n        </div>\n\n        {/* All-day events row */}\n        {hasAllDay && (\n          <div className=\"grid border-t border-gray-100\" style={{ gridTemplateColumns: '60px repeat(7, 1fr)' }}>\n            <div className=\"text-[10px] text-gray-400 text-right pr-2 py-1\">all-day</div>\n            {allDayEventsByDay.map((events, i) => (\n              <div key={i} className=\"border-l border-gray-100 px-0.5 py-0.5 space-y-0.5\">\n                {events.map(ev => (\n                  <button\n                    key={ev.id}\n                    onClick={() => model.selectEvent(ev)}\n                    className=\"w-full text-left text-[10px] px-1 py-0.5 rounded truncate\"\n                    style={{\n                      backgroundColor: `${ev.color ?? '#3b82f6'}20`,\n                      color: ev.color ?? '#3b82f6',\n                      borderLeft: `2px solid ${ev.color ?? '#3b82f6'}`,\n                    }}\n                    title={ev.title}\n                  >\n                    {ev.title}\n                  </button>\n                ))}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n\n      {/* Time grid */}\n      <div className=\"flex-1 relative\">\n        {HOURS.map(hour => (\n          <div key={hour} className=\"grid border-b border-gray-50\" style={{ gridTemplateColumns: '60px repeat(7, 1fr)', height: '48px' }}>\n            <div className=\"text-[10px] text-gray-400 text-right pr-2 -mt-2\">\n              {hour === 0 ? '' : `${hour % 12 || 12} ${hour < 12 ? 'AM' : 'PM'}`}\n            </div>\n            {days.map((d, i) => {\n              const dateKey = d.toISOString().slice(0, 10);\n              const events = (model.eventsByDay.get(dateKey) ?? []).filter(e =>\n                !e.allDay && e.startDate.getHours() === hour\n              );\n              const showTimeLine = isToday(d) && hour === currentHour;\n              return (\n                <div key={i} className=\"border-l border-gray-100 relative\">\n                  {/* Current time indicator */}\n                  {showTimeLine && (\n                    <div\n                      className=\"absolute left-0 right-0 z-10 pointer-events-none\"\n                      style={{ top: `${(currentMinute / 60) * 48}px` }}\n                    >\n                      <div className=\"w-2 h-2 bg-red-500 rounded-full absolute -left-1 -top-1\" />\n                      <div className=\"h-px bg-red-500 w-full\" />\n                    </div>\n                  )}\n                  {events.map((ev, ei) => {\n                    const durationHours = Math.max(0.5, (ev.endDate.getTime() - ev.startDate.getTime()) / 3600000);\n                    const topOffset = (ev.startDate.getMinutes() / 60) * 48;\n                    return (\n                      <button\n                        key={ev.id}\n                        onClick={() => model.selectEvent(ev)}\n                        className=\"absolute text-xs px-1 py-0.5 rounded truncate z-[1]\"\n                        title={ev.title}\n                        style={{\n                          backgroundColor: `${ev.color ?? '#3b82f6'}20`,\n                          color: ev.color ?? '#3b82f6',\n                          borderLeft: `2px solid ${ev.color ?? '#3b82f6'}`,\n                          height: `${durationHours * 48}px`,\n                          top: `${topOffset}px`,\n                          left: `${ei * 4 + 2}px`,\n                          right: '2px',\n                        }}\n                      >\n                        {ev.title}\n                      </button>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n","import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport type { CalendarModel } from './CalendarModel';\n\nexport interface DayViewProps {\n  model: CalendarModel;\n  className?: string;\n}\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i);\n\nexport const DayView = observer<DayViewProps>(({ model, className = '' }) => {\n  const d = model.currentDate;\n  const dateKey = d.toISOString().slice(0, 10);\n  const dayEvents = model.eventsByDay.get(dateKey) ?? [];\n  const allDayEvents = dayEvents.filter(e => e.allDay);\n  const timedEvents = dayEvents.filter(e => !e.allDay);\n\n  return (\n    <div className={`flex flex-col h-full overflow-auto ${className}`}>\n      {/* Header */}\n      <div className=\"border-b border-gray-200 px-4 py-2 sticky top-0 bg-white z-10\">\n        <h2 className=\"text-lg font-medium text-gray-900\">\n          {d.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}\n        </h2>\n        {allDayEvents.length > 0 && (\n          <div className=\"flex gap-1 mt-1\">\n            {allDayEvents.map(ev => (\n              <button\n                key={ev.id}\n                onClick={() => model.selectEvent(ev)}\n                className=\"text-xs px-2 py-0.5 rounded\"\n                style={{ backgroundColor: `${ev.color ?? '#3b82f6'}20`, color: ev.color ?? '#3b82f6' }}\n              >\n                {ev.title}\n              </button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      {/* Time slots */}\n      <div className=\"flex-1\">\n        {HOURS.map(hour => {\n          const hourEvents = timedEvents.filter(e => e.startDate.getHours() === hour);\n          return (\n            <div key={hour} className=\"grid grid-cols-[60px_1fr] border-b border-gray-50 min-h-[48px]\">\n              <div className=\"text-[10px] text-gray-400 text-right pr-2 -mt-2\">\n                {hour === 0 ? '' : `${hour % 12 || 12} ${hour < 12 ? 'AM' : 'PM'}`}\n              </div>\n              <div className=\"border-l border-gray-100 relative pl-1\">\n                {hourEvents.map(ev => (\n                  <button\n                    key={ev.id}\n                    onClick={() => model.selectEvent(ev)}\n                    className=\"w-full text-left text-xs p-1.5 rounded mb-0.5\"\n                    style={{\n                      backgroundColor: `${ev.color ?? '#3b82f6'}15`,\n                      color: ev.color ?? '#3b82f6',\n                      borderLeft: `2px solid ${ev.color ?? '#3b82f6'}`\n                    }}\n                  >\n                    <span className=\"font-medium\">{ev.title}</span>\n                    <span className=\"ml-2 opacity-70\">\n                      {ev.startDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n                    </span>\n                  </button>\n                ))}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n});\n","import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport type { CalendarModel } from './CalendarModel';\nimport { EventCard } from './EventCard';\n\nexport interface AgendaViewProps {\n  model: CalendarModel;\n  className?: string;\n}\n\nexport const AgendaView = observer<AgendaViewProps>(({ model, className = '' }) => {\n  const sortedEntries = Array.from(model.eventsByDay.entries())\n    .sort(([a], [b]) => a.localeCompare(b));\n\n  return (\n    <div className={`overflow-y-auto p-4 space-y-4 ${className}`}>\n      {sortedEntries.length === 0 && (\n        <div className=\"flex items-center justify-center h-32 text-gray-400 text-sm\">No upcoming events</div>\n      )}\n      {sortedEntries.map(([dateKey, events]) => {\n        const date = new Date(dateKey + 'T00:00:00');\n        return (\n          <div key={dateKey}>\n            <h3 className=\"text-sm font-semibold text-gray-700 mb-2 sticky top-0 bg-white/90 backdrop-blur-sm py-1\">\n              {date.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}\n            </h3>\n            <div className=\"space-y-1.5\">\n              {events.map(ev => (\n                <EventCard key={ev.id} event={ev} onClick={() => model.selectEvent(ev)} />\n              ))}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n});\n","import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport type { CalendarModel } from './CalendarModel';\n\nexport interface CalendarSidebarProps {\n  model: CalendarModel;\n  className?: string;\n}\n\nconst DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n\nexport const CalendarSidebar = observer<CalendarSidebarProps>(({ model, className = '' }) => {\n  const d = model.currentDate;\n  const year = d.getFullYear();\n  const month = d.getMonth();\n\n  const firstDay = new Date(year, month, 1).getDay();\n  const daysInMonth = new Date(year, month + 1, 0).getDate();\n  const today = new Date();\n\n  const cells: (number | null)[] = [];\n  for (let i = 0; i < firstDay; i++) cells.push(null);\n  for (let i = 1; i <= daysInMonth; i++) cells.push(i);\n\n  const isToday = (day: number) =>\n    day === today.getDate() && month === today.getMonth() && year === today.getFullYear();\n\n  const isSelected = (day: number) =>\n    day === d.getDate();\n\n  return (\n    <div className={`w-56 border-r border-gray-200 bg-gray-50 p-3 ${className}`}>\n      {/* Mini month */}\n      <div className=\"mb-4\">\n        <div className=\"flex items-center justify-between mb-2\">\n          <button onClick={() => model.navigateBack()} className=\"p-1 hover:bg-gray-200 rounded\">\n            <ChevronLeft size={14} />\n          </button>\n          <span className=\"text-sm font-medium\">\n            {d.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })}\n          </span>\n          <button onClick={() => model.navigateForward()} className=\"p-1 hover:bg-gray-200 rounded\">\n            <ChevronRight size={14} />\n          </button>\n        </div>\n        <div className=\"grid grid-cols-7 gap-0.5 text-center\">\n          {DAYS.map(day => (\n            <div key={day} className=\"text-[10px] text-gray-400 font-medium py-0.5\">{day}</div>\n          ))}\n          {cells.map((day, i) => (\n            <button\n              key={i}\n              disabled={day === null}\n              onClick={() => day && model.setDate(new Date(year, month, day))}\n              className={`text-xs py-0.5 rounded ${\n                day === null ? '' :\n                isSelected(day) ? 'bg-blue-500 text-white' :\n                isToday(day) ? 'bg-blue-100 text-blue-700 font-bold' :\n                'text-gray-700 hover:bg-gray-200'\n              }`}\n            >\n              {day}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Calendar list */}\n      <div>\n        <h3 className=\"text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2\">Calendars</h3>\n        {model.calendars.map(cal => (\n          <div key={cal.id} className=\"flex items-center gap-2 px-2 py-1.5 text-sm text-gray-700\">\n            <div className=\"w-3 h-3 rounded-full\" style={{ backgroundColor: cal.color }} />\n            <span className=\"truncate\" title={cal.name}>{cal.name}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n","import React, { useEffect } from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';\nimport { BrowserError } from '@anymux/ui/components/browser-error';\nimport type { CalendarModel, CalendarViewMode } from './CalendarModel';\nimport { MonthView } from './MonthView';\nimport { WeekView } from './WeekView';\nimport { DayView } from './DayView';\nimport { AgendaView } from './AgendaView';\nimport { CalendarSidebar } from './CalendarSidebar';\n\nexport interface CalendarBrowserProps {\n  model: CalendarModel;\n  className?: string;\n  showSidebar?: boolean;\n}\n\nconst VIEW_LABELS: Record<CalendarViewMode, string> = {\n  month: 'Month',\n  week: 'Week',\n  day: 'Day',\n  agenda: 'Agenda',\n};\n\nexport const CalendarBrowser = observer<CalendarBrowserProps>(({ model, className = '', showSidebar = true }) => {\n  useEffect(() => { model.loadEvents(); }, [model]);\n\n  return (\n    <div className={`flex h-full bg-white rounded-xl border border-gray-200 overflow-hidden ${className}`}>\n      {showSidebar && <CalendarSidebar model={model} />}\n\n      <div className=\"flex-1 flex flex-col min-w-0\">\n        {/* Toolbar */}\n        <div className=\"flex items-center gap-2 px-4 py-2 border-b border-gray-200\">\n          <button onClick={() => model.today()} className=\"text-sm px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50\">\n            Today\n          </button>\n          <button onClick={() => model.navigateBack()} className=\"p-1.5 hover:bg-gray-100 rounded-lg\">\n            <ChevronLeft size={16} />\n          </button>\n          <button onClick={() => model.navigateForward()} className=\"p-1.5 hover:bg-gray-100 rounded-lg\">\n            <ChevronRight size={16} />\n          </button>\n          <h2 className=\"text-sm font-medium text-gray-900 ml-2\">\n            {model.currentDate.toLocaleDateString(undefined, {\n              month: 'long',\n              year: 'numeric',\n              ...(model.viewMode === 'day' ? { day: 'numeric', weekday: 'long' } : {})\n            })}\n          </h2>\n          <div className=\"ml-auto flex items-center border border-gray-200 rounded-lg overflow-hidden\">\n            {(Object.keys(VIEW_LABELS) as CalendarViewMode[]).map(mode => (\n              <button\n                key={mode}\n                onClick={() => model.setViewMode(mode)}\n                className={`px-3 py-1.5 text-xs font-medium ${\n                  model.viewMode === mode ? 'bg-blue-50 text-blue-600' : 'text-gray-500 hover:bg-gray-50'\n                }`}\n              >\n                {VIEW_LABELS[mode]}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Content */}\n        <div className=\"flex-1 overflow-hidden\">\n          {model.loading ? (\n            <div className=\"flex items-center justify-center h-64\">\n              <Loader2 size={24} className=\"animate-spin text-gray-400\" />\n            </div>\n          ) : model.error ? (\n            <BrowserError\n              error={model.error}\n              context=\"Calendar\"\n              onRetry={() => model.loadEvents()}\n            />\n          ) : (\n            <>\n              {model.viewMode === 'month' && <MonthView model={model} />}\n              {model.viewMode === 'week' && <WeekView model={model} />}\n              {model.viewMode === 'day' && <DayView model={model} />}\n              {model.viewMode === 'agenda' && <AgendaView model={model} />}\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n","import type { ICalendarProvider, CalendarEvent, CalendarInfo } from './types';\n\nconst CALENDARS: CalendarInfo[] = [\n  { id: 'personal', name: 'Personal', color: '#3b82f6' },\n  { id: 'work', name: 'Work', color: '#10b981' },\n  { id: 'family', name: 'Family', color: '#f59e0b' },\n];\n\nconst EVENT_TITLES = [\n  'Team standup', 'Lunch with Sarah', 'Design review', 'Gym session',\n  'Doctor appointment', 'Code review', 'Sprint planning', 'Movie night',\n  'Grocery shopping', 'Piano lesson', 'Board meeting', 'Yoga class',\n  'Project deadline', 'Coffee with Alex', 'Dentist', 'Book club',\n];\n\nconst LOCATIONS = ['Office', 'Zoom', 'Conference Room A', 'Downtown Cafe', 'Home', undefined];\n\nfunction generateEvents(): CalendarEvent[] {\n  const events: CalendarEvent[] = [];\n  const now = new Date();\n  const baseDate = new Date(now.getFullYear(), now.getMonth(), 1);\n\n  for (let i = 0; i < 40; i++) {\n    const day = Math.floor(Math.random() * 35) - 5;\n    const hour = 8 + Math.floor(Math.random() * 10);\n    const duration = 1 + Math.floor(Math.random() * 3);\n    const allDay = i % 8 === 0;\n    const calendar = CALENDARS[i % CALENDARS.length];\n\n    const startDate = new Date(baseDate);\n    startDate.setDate(startDate.getDate() + day);\n    startDate.setHours(hour, 0, 0, 0);\n\n    const endDate = new Date(startDate);\n    if (allDay) {\n      endDate.setHours(23, 59, 59, 999);\n    } else {\n      endDate.setHours(hour + duration);\n    }\n\n    events.push({\n      id: `event-${i}`,\n      type: 'calendar-event',\n      title: EVENT_TITLES[i % EVENT_TITLES.length],\n      startDate,\n      endDate,\n      allDay,\n      location: LOCATIONS[i % LOCATIONS.length],\n      attendees: i % 3 === 0 ? ['alice@example.com', 'bob@example.com'] : undefined,\n      color: calendar.color,\n      calendarId: calendar.id,\n      createdAt: now,\n      updatedAt: now,\n    });\n  }\n  return events;\n}\n\nexport class MockCalendarProvider implements ICalendarProvider {\n  private events = generateEvents();\n\n  async listItems() { return this.events; }\n\n  async getItem(id: string) { return this.events.find(e => e.id === id) ?? null; }\n\n  async createItem(item: Omit<CalendarEvent, 'id' | 'createdAt' | 'updatedAt'>) {\n    const now = new Date();\n    const created: CalendarEvent = { ...item, id: `event-${Date.now()}`, createdAt: now, updatedAt: now } as CalendarEvent;\n    this.events.push(created);\n    return created;\n  }\n\n  async updateItem(id: string, updates: Partial<CalendarEvent>) {\n    const idx = this.events.findIndex(e => e.id === id);\n    if (idx === -1) throw new Error('Not found');\n    this.events[idx] = { ...this.events[idx], ...updates, updatedAt: new Date() };\n    return this.events[idx];\n  }\n\n  async deleteItem(id: string) {\n    this.events = this.events.filter(e => e.id !== id);\n  }\n\n  async search(query: string) {\n    const q = query.toLowerCase();\n    return this.events.filter(e => e.title.toLowerCase().includes(q));\n  }\n\n  async getCalendars() { return CALENDARS; }\n\n  async getEventsByRange(start: Date, end: Date) {\n    return this.events.filter(e => e.endDate >= start && e.startDate <= end);\n  }\n\n  async getEventsByCalendar(calendarId: string) {\n    return this.events.filter(e => e.calendarId === calendarId);\n  }\n}\n"],"mappings":"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"}

package/dist/calendar.d.ts

@@ -0,0 +1,3 @@
+import "./types-common-CB3kRek8.js";
+import { AgendaView$1 as AgendaView, AgendaViewProps, CalendarBrowser$1 as CalendarBrowser, CalendarBrowserProps, CalendarEvent, CalendarInfo, CalendarModel$1 as CalendarModel, CalendarSidebar$1 as CalendarSidebar, CalendarSidebarProps, CalendarViewMode, DayView$1 as DayView, DayViewProps, EventCard$1 as EventCard, EventCardProps, ICalendarProvider, MockCalendarProvider$1 as MockCalendarProvider, MonthView$1 as MonthView, MonthViewProps, WeekView$1 as WeekView, WeekViewProps } from "./index-DSu19mq0.js";
+export { AgendaView, AgendaViewProps, CalendarBrowser, CalendarBrowserProps, CalendarEvent, CalendarInfo, CalendarModel, CalendarSidebar, CalendarSidebarProps, CalendarViewMode, DayView, DayViewProps, EventCard, EventCardProps, ICalendarProvider, MockCalendarProvider, MonthView, MonthViewProps, WeekView, WeekViewProps };

package/dist/calendar.js

@@ -0,0 +1,3 @@
+import { AgendaView, CalendarBrowser, CalendarModel, CalendarSidebar, DayView, EventCard, MockCalendarProvider, MonthView, WeekView } from "./calendar-DSlrbHoj.js";
+
+export { AgendaView, CalendarBrowser, CalendarModel, CalendarSidebar, DayView, EventCard, MockCalendarProvider, MonthView, WeekView };

package/dist/contacts-DQXTZzHc.js

@@ -0,0 +1,539 @@
+import React, { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { Building, Calendar, Loader2, Mail, MapPin, Phone, Search, Tag, User, Users } from "lucide-react";
+import { BrowserError } from "@anymux/ui/components/browser-error";
+import { makeAutoObservable, runInAction } from "mobx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/contacts/ContactListModel.ts
+var ContactListModel = class {
+	constructor(provider) {
+		this.provider = provider;
+		this.contacts = [];
+		this.selectedContact = null;
+		this.groups = [];
+		this.currentGroup = null;
+		this.searchQuery = "";
+		this.sortBy = "lastName";
+		this.loading = false;
+		this.error = null;
+		makeAutoObservable(this);
+	}
+	get filteredContacts() {
+		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() {
+		const groups = new Map();
+		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() {
+		const groups = new Map();
+		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) {
+			runInAction(() => {
+				this.error = err?.message || "Failed to load contacts";
+			});
+		} finally {
+			runInAction(() => {
+				this.loading = false;
+			});
+		}
+	}
+	selectContact(contact) {
+		this.selectedContact = contact;
+	}
+	setGroup(groupId) {
+		this.currentGroup = groupId;
+		this.loadContacts();
+	}
+	setSearch(query) {
+		this.searchQuery = query;
+	}
+	setSort(sortBy) {
+		this.sortBy = sortBy;
+	}
+	async addContact(contact) {
+		const created = await this.provider.createItem(contact);
+		runInAction(() => {
+			this.contacts.push(created);
+		});
+		return created;
+	}
+	async deleteContact(id) {
+		await this.provider.deleteItem(id);
+		runInAction(() => {
+			this.contacts = this.contacts.filter((c) => c.id !== id);
+			if (this.selectedContact?.id === id) this.selectedContact = null;
+		});
+	}
+	sortContacts(contacts) {
+		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;
+			}
+		});
+	}
+};
+
+//#endregion
+//#region src/contacts/ContactAvatar.tsx
+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"
+];
+const ContactAvatar = ({ firstName, lastName, avatar, size = "md", className = "" }) => {
+	const initials = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+	const colorIdx = (firstName.charCodeAt(0) + lastName.charCodeAt(0)) % bgColors.length;
+	if (avatar) return /* @__PURE__ */ jsx("img", {
+		src: avatar,
+		alt: `${firstName} ${lastName}`,
+		className: `${sizeClasses[size]} rounded-full object-cover ${className}`
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: `${sizeClasses[size]} ${bgColors[colorIdx]} rounded-full flex items-center justify-center text-white font-medium ${className}`,
+		children: initials
+	});
+};
+
+//#endregion
+//#region src/contacts/ContactCard.tsx
+const ContactCard = ({ contact, selected = false, onClick, className = "" }) => /* @__PURE__ */ jsxs("button", {
+	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}`,
+	children: [
+		/* @__PURE__ */ jsx(ContactAvatar, {
+			firstName: contact.firstName,
+			lastName: contact.lastName,
+			avatar: contact.avatar
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-w-0",
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: "text-sm font-medium text-gray-900 truncate",
+				title: `${contact.firstName} ${contact.lastName}`,
+				children: [
+					contact.firstName,
+					" ",
+					contact.lastName
+				]
+			}), contact.company && /* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-gray-500 flex items-center gap-1 truncate",
+				title: contact.company,
+				children: [/* @__PURE__ */ jsx(Building, { size: 12 }), contact.company]
+			})]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5 text-gray-400",
+			children: [contact.email && /* @__PURE__ */ jsx(Mail, { size: 14 }), contact.phone && /* @__PURE__ */ jsx(Phone, { size: 14 })]
+		})
+	]
+});
+
+//#endregion
+//#region src/contacts/ContactList.tsx
+const ContactList = observer(({ model, className = "" }) => /* @__PURE__ */ jsxs("div", {
+	className: `overflow-y-auto ${className}`,
+	children: [Array.from(model.groupedByLetter.entries()).map(([letter, contacts]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+		className: "sticky top-0 bg-gray-50/90 backdrop-blur-sm px-4 py-1 border-b border-gray-100",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "text-xs font-semibold text-gray-500",
+			children: letter
+		})
+	}), contacts.map((contact) => /* @__PURE__ */ jsx(ContactCard, {
+		contact,
+		selected: model.selectedContact?.id === contact.id,
+		onClick: () => model.selectContact(contact)
+	}, contact.id))] }, letter)), model.filteredContacts.length === 0 && /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center h-32 text-gray-400 text-sm",
+		children: "No contacts found"
+	})]
+}));
+
+//#endregion
+//#region src/contacts/ContactDetail.tsx
+const DetailRow = ({ icon: Icon, label, value }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex items-start gap-3 py-2",
+	children: [/* @__PURE__ */ jsx(Icon, {
+		size: 16,
+		className: "text-gray-400 mt-0.5 flex-shrink-0"
+	}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+		className: "text-xs text-gray-500",
+		children: label
+	}), /* @__PURE__ */ jsx("p", {
+		className: "text-sm text-gray-900",
+		children: value
+	})] })]
+});
+const ContactDetail = observer(({ model, className = "" }) => {
+	const contact = model.selectedContact;
+	if (!contact) return /* @__PURE__ */ jsx("div", {
+		className: `flex items-center justify-center h-full text-gray-400 text-sm ${className}`,
+		children: "Select a contact to view details"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: `p-6 overflow-y-auto ${className}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center mb-6",
+			children: [
+				/* @__PURE__ */ jsx(ContactAvatar, {
+					firstName: contact.firstName,
+					lastName: contact.lastName,
+					avatar: contact.avatar,
+					size: "lg"
+				}),
+				/* @__PURE__ */ jsxs("h2", {
+					className: "mt-3 text-lg font-semibold text-gray-900",
+					children: [
+						contact.firstName,
+						" ",
+						contact.lastName
+					]
+				}),
+				contact.company && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-gray-500",
+					children: contact.company
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "divide-y divide-gray-100",
+			children: [
+				contact.email && /* @__PURE__ */ jsx(DetailRow, {
+					icon: Mail,
+					label: "Email",
+					value: contact.email
+				}),
+				contact.phone && /* @__PURE__ */ jsx(DetailRow, {
+					icon: Phone,
+					label: "Phone",
+					value: contact.phone
+				}),
+				contact.company && /* @__PURE__ */ jsx(DetailRow, {
+					icon: Building,
+					label: "Company",
+					value: contact.company
+				}),
+				contact.address && /* @__PURE__ */ jsx(DetailRow, {
+					icon: MapPin,
+					label: "Address",
+					value: contact.address
+				}),
+				contact.birthday && /* @__PURE__ */ jsx(DetailRow, {
+					icon: Calendar,
+					label: "Birthday",
+					value: contact.birthday.toLocaleDateString()
+				}),
+				contact.groups && contact.groups.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-3 py-2",
+					children: [/* @__PURE__ */ jsx(Tag, {
+						size: 16,
+						className: "text-gray-400 mt-0.5 flex-shrink-0"
+					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "text-xs text-gray-500",
+						children: "Groups"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-1 mt-1",
+						children: contact.groups.map((g) => /* @__PURE__ */ jsx("span", {
+							className: "text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full",
+							children: g
+						}, g))
+					})] })]
+				})
+			]
+		})]
+	});
+});
+
+//#endregion
+//#region src/contacts/ContactGroupSidebar.tsx
+const ContactGroupSidebar = observer(({ model, className = "" }) => /* @__PURE__ */ jsx("div", {
+	className: `w-56 border-r border-gray-200 bg-gray-50 overflow-y-auto ${className}`,
+	children: /* @__PURE__ */ jsxs("div", {
+		className: "p-3",
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2",
+				children: "Groups"
+			}),
+			/* @__PURE__ */ jsxs("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"}`,
+				children: [
+					/* @__PURE__ */ jsx(Users, { size: 16 }),
+					/* @__PURE__ */ jsx("span", { children: "All Contacts" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "ml-auto text-xs text-gray-400",
+						children: model.contacts.length
+					})
+				]
+			}),
+			model.groups.map((group) => /* @__PURE__ */ jsxs("button", {
+				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"}`,
+				children: [
+					/* @__PURE__ */ jsx(User, { size: 16 }),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						title: group.name,
+						children: group.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "ml-auto text-xs text-gray-400",
+						children: group.count
+					})
+				]
+			}, group.id))
+		]
+	})
+}));
+
+//#endregion
+//#region src/contacts/ContactBrowser.tsx
+const ContactBrowser = observer(({ model, className = "", showSidebar = true }) => {
+	useEffect(() => {
+		model.loadContacts();
+	}, [model]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex h-full bg-white rounded-xl border border-gray-200 overflow-hidden ${className}`,
+		children: [
+			showSidebar && /* @__PURE__ */ jsx(ContactGroupSidebar, { model }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 flex flex-col min-w-0 border-r border-gray-200",
+				style: { maxWidth: "380px" },
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "px-4 py-2 border-b border-gray-200",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsx(Search, {
+							size: 16,
+							className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+						}), /* @__PURE__ */ jsx("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"
+						})]
+					})
+				}), model.loading ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center h-64",
+					children: /* @__PURE__ */ jsx(Loader2, {
+						size: 24,
+						className: "animate-spin text-gray-400"
+					})
+				}) : model.error ? /* @__PURE__ */ jsx(BrowserError, {
+					error: model.error,
+					context: "Contacts",
+					onRetry: () => model.loadContacts()
+				}) : /* @__PURE__ */ jsx(ContactList, {
+					model,
+					className: "flex-1"
+				})]
+			}),
+			/* @__PURE__ */ jsx(ContactDetail, {
+				model,
+				className: "flex-1"
+			})
+		]
+	});
+});
+
+//#endregion
+//#region src/contacts/MockContactProvider.ts
+const FIRST_NAMES = [
+	"Alice",
+	"Bob",
+	"Charlie",
+	"Diana",
+	"Emma",
+	"Frank",
+	"Grace",
+	"Henry",
+	"Iris",
+	"Jack",
+	"Karen",
+	"Leo",
+	"Mia",
+	"Nathan",
+	"Olivia",
+	"Paul",
+	"Quinn",
+	"Rachel",
+	"Sam",
+	"Tina",
+	"Uma",
+	"Victor",
+	"Wendy",
+	"Xavier",
+	"Yara",
+	"Zach"
+];
+const LAST_NAMES = [
+	"Anderson",
+	"Baker",
+	"Chen",
+	"Davis",
+	"Evans",
+	"Fisher",
+	"Garcia",
+	"Hall",
+	"Ibrahim",
+	"Jones",
+	"Kim",
+	"Lee",
+	"Martinez",
+	"Nguyen",
+	"O'Brien",
+	"Park",
+	"Quinn",
+	"Robinson",
+	"Smith",
+	"Taylor",
+	"Ueda",
+	"Vega",
+	"Wilson",
+	"Xu",
+	"Yang",
+	"Zhang"
+];
+const COMPANIES = [
+	"Acme Corp",
+	"TechStart Inc",
+	"Global Systems",
+	"DataFlow",
+	"CloudNine",
+	"PixelPerfect"
+];
+const GROUPS_DATA = [
+	{
+		id: "family",
+		name: "Family",
+		count: 8
+	},
+	{
+		id: "work",
+		name: "Work",
+		count: 12
+	},
+	{
+		id: "friends",
+		name: "Friends",
+		count: 10
+	},
+	{
+		id: "vip",
+		name: "VIP",
+		count: 5
+	}
+];
+function generateContacts() {
+	const contacts = [];
+	const now = new Date();
+	for (let i = 0; i < FIRST_NAMES.length; i++) contacts.push({
+		id: `contact-${i}`,
+		type: "contact",
+		title: `${FIRST_NAMES[i]} ${LAST_NAMES[i]}`,
+		firstName: FIRST_NAMES[i],
+		lastName: LAST_NAMES[i],
+		email: `${FIRST_NAMES[i].toLowerCase()}.${LAST_NAMES[i].toLowerCase()}@example.com`,
+		phone: `+1 (555) ${String(100 + i).padStart(3, "0")}-${String(1e3 + i * 37).slice(0, 4)}`,
+		company: COMPANIES[i % COMPANIES.length],
+		address: `${100 + i} Main St, City ${i % 10}, ST ${1e4 + i}`,
+		birthday: new Date(1985 + i % 20, i % 12, 1 + i % 28),
+		groups: [GROUPS_DATA[i % GROUPS_DATA.length].id],
+		createdAt: now,
+		updatedAt: now
+	});
+	return contacts;
+}
+var MockContactProvider = class {
+	constructor() {
+		this.contacts = generateContacts();
+	}
+	async listItems() {
+		return this.contacts;
+	}
+	async getItem(id) {
+		return this.contacts.find((c) => c.id === id) ?? null;
+	}
+	async createItem(item) {
+		const now = new Date();
+		const created = {
+			...item,
+			id: `contact-${Date.now()}`,
+			createdAt: now,
+			updatedAt: now
+		};
+		this.contacts.push(created);
+		return created;
+	}
+	async updateItem(id, updates) {
+		const idx = this.contacts.findIndex((c) => c.id === id);
+		if (idx === -1) throw new Error("Not found");
+		this.contacts[idx] = {
+			...this.contacts[idx],
+			...updates,
+			updatedAt: new Date()
+		};
+		return this.contacts[idx];
+	}
+	async deleteItem(id) {
+		this.contacts = this.contacts.filter((c) => c.id !== id);
+	}
+	async search(query) {
+		const q = query.toLowerCase();
+		return this.contacts.filter((c) => c.firstName.toLowerCase().includes(q) || c.lastName.toLowerCase().includes(q));
+	}
+	async getGroups() {
+		return GROUPS_DATA;
+	}
+	async getByGroup(groupId) {
+		return this.contacts.filter((c) => c.groups?.includes(groupId));
+	}
+	async searchByName(name) {
+		return this.search(name);
+	}
+};
+
+//#endregion
+export { ContactAvatar, ContactBrowser, ContactCard, ContactDetail, ContactGroupSidebar, ContactList, ContactListModel, MockContactProvider };
+//# sourceMappingURL=contacts-DQXTZzHc.js.map