@anymux/ui-kit 0.1.0

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@anymux/ui-kit",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Composite UI components for AnyMux — file browser, media, calendar, contacts, git",
+  "keywords": [
+    "anymux",
+    "ui-kit",
+    "react",
+    "file-browser",
+    "media",
+    "calendar",
+    "contacts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AnyMux/AnyMuxMonorepo.git",
+    "directory": "packages/ui-kit"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./file-browser": {
+      "types": "./dist/file-browser.d.ts",
+      "import": "./dist/file-browser.js"
+    },
+    "./tree": {
+      "types": "./dist/tree.d.ts",
+      "import": "./dist/tree.js"
+    },
+    "./list": {
+      "types": "./dist/list.d.ts",
+      "import": "./dist/list.js"
+    },
+    "./git": {
+      "types": "./dist/git.d.ts",
+      "import": "./dist/git.js"
+    },
+    "./layout": {
+      "types": "./dist/layout.d.ts",
+      "import": "./dist/layout.js"
+    },
+    "./media": {
+      "types": "./dist/media.d.ts",
+      "import": "./dist/media.js"
+    },
+    "./calendar": {
+      "types": "./dist/calendar.d.ts",
+      "import": "./dist/calendar.js"
+    },
+    "./contacts": {
+      "types": "./dist/contacts.d.ts",
+      "import": "./dist/contacts.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "dependencies": {
+    "@cushiontreemap/core": "^0.0.18",
+    "@panscale/core": "^0.3.0",
+    "@panscale/react": "^0.3.0",
+    "@panscale/web": "^0.3.0",
+    "clsx": "^2.1.0",
+    "idb": "^8.0.0",
+    "lucide-react": "^0.475.0",
+    "react-window": "^1.8.8",
+    "react-window-infinite-loader": "^1.0.9",
+    "squarify": "^1.1.0",
+    "tailwind-merge": "^2.2.1",
+    "transformation-matrix": "^3.1.0",
+    "@anymux/file-system": "0.1.0",
+    "@anymux/ui": "0.1.0"
+  },
+  "peerDependencies": {
+    "mobx": "^6.13.5",
+    "mobx-react-lite": "^4.0.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-window": "^1.8.8",
+    "tsdown": "^0.10.2",
+    "typescript": "^5.7.3",
+    "@anymux/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "check": "tsc -p tsconfig.json --noEmit"
+  }
+}

package/src/calendar/AgendaView.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { CalendarModel } from './CalendarModel';
+import { EventCard } from './EventCard';
+
+export interface AgendaViewProps {
+  model: CalendarModel;
+  className?: string;
+}
+
+export const AgendaView = observer<AgendaViewProps>(({ model, className = '' }) => {
+  const sortedEntries = Array.from(model.eventsByDay.entries())
+    .sort(([a], [b]) => a.localeCompare(b));
+
+  return (
+    <div className={`overflow-y-auto p-4 space-y-4 ${className}`}>
+      {sortedEntries.length === 0 && (
+        <div className="flex items-center justify-center h-32 text-gray-400 text-sm">No upcoming events</div>
+      )}
+      {sortedEntries.map(([dateKey, events]) => {
+        const date = new Date(dateKey + 'T00:00:00');
+        return (
+          <div key={dateKey}>
+            <h3 className="text-sm font-semibold text-gray-700 mb-2 sticky top-0 bg-white/90 backdrop-blur-sm py-1">
+              {date.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}
+            </h3>
+            <div className="space-y-1.5">
+              {events.map(ev => (
+                <EventCard key={ev.id} event={ev} onClick={() => model.selectEvent(ev)} />
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});

package/src/calendar/CalendarBrowser.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
+import { BrowserError } from '@anymux/ui/components/browser-error';
+import type { CalendarModel, CalendarViewMode } from './CalendarModel';
+import { MonthView } from './MonthView';
+import { WeekView } from './WeekView';
+import { DayView } from './DayView';
+import { AgendaView } from './AgendaView';
+import { CalendarSidebar } from './CalendarSidebar';
+
+export interface CalendarBrowserProps {
+  model: CalendarModel;
+  className?: string;
+  showSidebar?: boolean;
+}
+
+const VIEW_LABELS: Record<CalendarViewMode, string> = {
+  month: 'Month',
+  week: 'Week',
+  day: 'Day',
+  agenda: 'Agenda',
+};
+
+export const CalendarBrowser = observer<CalendarBrowserProps>(({ model, className = '', showSidebar = true }) => {
+  useEffect(() => { model.loadEvents(); }, [model]);
+
+  return (
+    <div className={`flex h-full bg-white rounded-xl border border-gray-200 overflow-hidden ${className}`}>
+      {showSidebar && <CalendarSidebar model={model} />}
+
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Toolbar */}
+        <div className="flex items-center gap-2 px-4 py-2 border-b border-gray-200">
+          <button onClick={() => model.today()} className="text-sm px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50">
+            Today
+          </button>
+          <button onClick={() => model.navigateBack()} className="p-1.5 hover:bg-gray-100 rounded-lg">
+            <ChevronLeft size={16} />
+          </button>
+          <button onClick={() => model.navigateForward()} className="p-1.5 hover:bg-gray-100 rounded-lg">
+            <ChevronRight size={16} />
+          </button>
+          <h2 className="text-sm font-medium text-gray-900 ml-2">
+            {model.currentDate.toLocaleDateString(undefined, {
+              month: 'long',
+              year: 'numeric',
+              ...(model.viewMode === 'day' ? { day: 'numeric', weekday: 'long' } : {})
+            })}
+          </h2>
+          <div className="ml-auto flex items-center border border-gray-200 rounded-lg overflow-hidden">
+            {(Object.keys(VIEW_LABELS) as CalendarViewMode[]).map(mode => (
+              <button
+                key={mode}
+                onClick={() => model.setViewMode(mode)}
+                className={`px-3 py-1.5 text-xs font-medium ${
+                  model.viewMode === mode ? 'bg-blue-50 text-blue-600' : 'text-gray-500 hover:bg-gray-50'
+                }`}
+              >
+                {VIEW_LABELS[mode]}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-hidden">
+          {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="Calendar"
+              onRetry={() => model.loadEvents()}
+            />
+          ) : (
+            <>
+              {model.viewMode === 'month' && <MonthView model={model} />}
+              {model.viewMode === 'week' && <WeekView model={model} />}
+              {model.viewMode === 'day' && <DayView model={model} />}
+              {model.viewMode === 'agenda' && <AgendaView model={model} />}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/calendar/CalendarModel.ts

@@ -0,0 +1,142 @@
+import { makeAutoObservable, flow } from 'mobx';
+import type { ICalendarProvider, CalendarEvent, CalendarInfo } from './types';
+
+export type CalendarViewMode = 'month' | 'week' | 'day' | 'agenda';
+
+export class CalendarModel {
+  events: CalendarEvent[] = [];
+  calendars: CalendarInfo[] = [];
+  currentDate: Date = new Date();
+  viewMode: CalendarViewMode = 'month';
+  selectedEvent: CalendarEvent | null = null;
+  loading = false;
+  error: string | null = null;
+
+  constructor(private provider: ICalendarProvider) {
+    makeAutoObservable(this);
+  }
+
+  get visibleDateRange(): { start: Date; end: Date } {
+    const d = this.currentDate;
+    switch (this.viewMode) {
+      case 'month': {
+        const start = new Date(d.getFullYear(), d.getMonth(), 1);
+        start.setDate(start.getDate() - start.getDay());
+        const end = new Date(d.getFullYear(), d.getMonth() + 1, 0);
+        end.setDate(end.getDate() + (6 - end.getDay()));
+        return { start, end };
+      }
+      case 'week': {
+        const start = new Date(d);
+        start.setDate(d.getDate() - d.getDay());
+        start.setHours(0, 0, 0, 0);
+        const end = new Date(start);
+        end.setDate(start.getDate() + 6);
+        end.setHours(23, 59, 59, 999);
+        return { start, end };
+      }
+      case 'day': {
+        const start = new Date(d);
+        start.setHours(0, 0, 0, 0);
+        const end = new Date(d);
+        end.setHours(23, 59, 59, 999);
+        return { start, end };
+      }
+      case 'agenda': {
+        const start = new Date(d);
+        start.setHours(0, 0, 0, 0);
+        const end = new Date(d);
+        end.setDate(end.getDate() + 30);
+        return { start, end };
+      }
+    }
+  }
+
+  get eventsForCurrentView(): CalendarEvent[] {
+    const { start, end } = this.visibleDateRange;
+    return this.events.filter(e =>
+      e.endDate >= start && e.startDate <= end
+    );
+  }
+
+  get eventsByDay(): Map<string, CalendarEvent[]> {
+    const map = new Map<string, CalendarEvent[]>();
+    for (const event of this.eventsForCurrentView) {
+      const key = event.startDate.toISOString().slice(0, 10);
+      const list = map.get(key) ?? [];
+      list.push(event);
+      map.set(key, list);
+    }
+    return map;
+  }
+
+  loadEvents = flow(function* (this: CalendarModel) {
+    this.loading = true;
+    this.error = null;
+    try {
+      const { start, end } = this.visibleDateRange;
+      const [events, calendars] = yield Promise.all([
+        this.provider.getEventsByRange(start, end),
+        this.provider.getCalendars()
+      ]);
+      this.events = events;
+      this.calendars = calendars;
+    } catch (err: any) {
+      this.error = err?.message || 'Failed to load calendar events';
+    } finally {
+      this.loading = false;
+    }
+  });
+
+  selectEvent(event: CalendarEvent | null) {
+    this.selectedEvent = event;
+  }
+
+  setDate(date: Date) {
+    this.currentDate = date;
+    this.loadEvents();
+  }
+
+  setViewMode(mode: CalendarViewMode) {
+    this.viewMode = mode;
+    this.loadEvents();
+  }
+
+  navigateForward() {
+    const d = new Date(this.currentDate);
+    switch (this.viewMode) {
+      case 'month': d.setMonth(d.getMonth() + 1); break;
+      case 'week': d.setDate(d.getDate() + 7); break;
+      case 'day': d.setDate(d.getDate() + 1); break;
+      case 'agenda': d.setDate(d.getDate() + 30); break;
+    }
+    this.setDate(d);
+  }
+
+  navigateBack() {
+    const d = new Date(this.currentDate);
+    switch (this.viewMode) {
+      case 'month': d.setMonth(d.getMonth() - 1); break;
+      case 'week': d.setDate(d.getDate() - 7); break;
+      case 'day': d.setDate(d.getDate() - 1); break;
+      case 'agenda': d.setDate(d.getDate() - 30); break;
+    }
+    this.setDate(d);
+  }
+
+  today() {
+    this.setDate(new Date());
+  }
+
+  createEvent = flow(function* (this: CalendarModel, event: Omit<CalendarEvent, 'id' | 'createdAt' | 'updatedAt'>) {
+    const created = yield this.provider.createItem(event);
+    this.events.push(created);
+    return created;
+  });
+
+  deleteEvent = flow(function* (this: CalendarModel, id: string) {
+    yield this.provider.deleteItem(id);
+    this.events = this.events.filter(e => e.id !== id);
+    if (this.selectedEvent?.id === id) this.selectedEvent = null;
+  });
+}

package/src/calendar/CalendarSidebar.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import type { CalendarModel } from './CalendarModel';
+
+export interface CalendarSidebarProps {
+  model: CalendarModel;
+  className?: string;
+}
+
+const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+export const CalendarSidebar = observer<CalendarSidebarProps>(({ model, className = '' }) => {
+  const d = model.currentDate;
+  const year = d.getFullYear();
+  const month = d.getMonth();
+
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const today = new Date();
+
+  const cells: (number | null)[] = [];
+  for (let i = 0; i < firstDay; i++) cells.push(null);
+  for (let i = 1; i <= daysInMonth; i++) cells.push(i);
+
+  const isToday = (day: number) =>
+    day === today.getDate() && month === today.getMonth() && year === today.getFullYear();
+
+  const isSelected = (day: number) =>
+    day === d.getDate();
+
+  return (
+    <div className={`w-56 border-r border-gray-200 bg-gray-50 p-3 ${className}`}>
+      {/* Mini month */}
+      <div className="mb-4">
+        <div className="flex items-center justify-between mb-2">
+          <button onClick={() => model.navigateBack()} className="p-1 hover:bg-gray-200 rounded">
+            <ChevronLeft size={14} />
+          </button>
+          <span className="text-sm font-medium">
+            {d.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })}
+          </span>
+          <button onClick={() => model.navigateForward()} className="p-1 hover:bg-gray-200 rounded">
+            <ChevronRight size={14} />
+          </button>
+        </div>
+        <div className="grid grid-cols-7 gap-0.5 text-center">
+          {DAYS.map(day => (
+            <div key={day} className="text-[10px] text-gray-400 font-medium py-0.5">{day}</div>
+          ))}
+          {cells.map((day, i) => (
+            <button
+              key={i}
+              disabled={day === null}
+              onClick={() => day && model.setDate(new Date(year, month, day))}
+              className={`text-xs py-0.5 rounded ${
+                day === null ? '' :
+                isSelected(day) ? 'bg-blue-500 text-white' :
+                isToday(day) ? 'bg-blue-100 text-blue-700 font-bold' :
+                'text-gray-700 hover:bg-gray-200'
+              }`}
+            >
+              {day}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Calendar list */}
+      <div>
+        <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Calendars</h3>
+        {model.calendars.map(cal => (
+          <div key={cal.id} className="flex items-center gap-2 px-2 py-1.5 text-sm text-gray-700">
+            <div className="w-3 h-3 rounded-full" style={{ backgroundColor: cal.color }} />
+            <span className="truncate" title={cal.name}>{cal.name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

package/src/calendar/DayView.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { CalendarModel } from './CalendarModel';
+
+export interface DayViewProps {
+  model: CalendarModel;
+  className?: string;
+}
+
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+
+export const DayView = observer<DayViewProps>(({ model, className = '' }) => {
+  const d = model.currentDate;
+  const dateKey = d.toISOString().slice(0, 10);
+  const dayEvents = model.eventsByDay.get(dateKey) ?? [];
+  const allDayEvents = dayEvents.filter(e => e.allDay);
+  const timedEvents = dayEvents.filter(e => !e.allDay);
+
+  return (
+    <div className={`flex flex-col h-full overflow-auto ${className}`}>
+      {/* Header */}
+      <div className="border-b border-gray-200 px-4 py-2 sticky top-0 bg-white z-10">
+        <h2 className="text-lg font-medium text-gray-900">
+          {d.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}
+        </h2>
+        {allDayEvents.length > 0 && (
+          <div className="flex gap-1 mt-1">
+            {allDayEvents.map(ev => (
+              <button
+                key={ev.id}
+                onClick={() => model.selectEvent(ev)}
+                className="text-xs px-2 py-0.5 rounded"
+                style={{ backgroundColor: `${ev.color ?? '#3b82f6'}20`, color: ev.color ?? '#3b82f6' }}
+              >
+                {ev.title}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Time slots */}
+      <div className="flex-1">
+        {HOURS.map(hour => {
+          const hourEvents = timedEvents.filter(e => e.startDate.getHours() === hour);
+          return (
+            <div key={hour} className="grid grid-cols-[60px_1fr] border-b border-gray-50 min-h-[48px]">
+              <div className="text-[10px] text-gray-400 text-right pr-2 -mt-2">
+                {hour === 0 ? '' : `${hour % 12 || 12} ${hour < 12 ? 'AM' : 'PM'}`}
+              </div>
+              <div className="border-l border-gray-100 relative pl-1">
+                {hourEvents.map(ev => (
+                  <button
+                    key={ev.id}
+                    onClick={() => model.selectEvent(ev)}
+                    className="w-full text-left text-xs p-1.5 rounded mb-0.5"
+                    style={{
+                      backgroundColor: `${ev.color ?? '#3b82f6'}15`,
+                      color: ev.color ?? '#3b82f6',
+                      borderLeft: `2px solid ${ev.color ?? '#3b82f6'}`
+                    }}
+                  >
+                    <span className="font-medium">{ev.title}</span>
+                    <span className="ml-2 opacity-70">
+                      {ev.startDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});

package/src/calendar/EventCard.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Clock, MapPin } from 'lucide-react';
+import type { CalendarEvent } from './types';
+
+export interface EventCardProps {
+  event: CalendarEvent;
+  compact?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+const formatTime = (d: Date) => d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+export const EventCard = ({ event, compact = false, onClick, className = '' }: EventCardProps) => {
+  const color = event.color ?? '#3b82f6';
+
+  if (compact) {
+    return (
+      <button
+        onClick={onClick}
+        className={`text-left text-xs px-1.5 py-0.5 rounded truncate w-full hover:opacity-80 transition-opacity ${className}`}
+        style={{ backgroundColor: `${color}20`, color, borderLeft: `2px solid ${color}` }}
+        title={event.title}
+      >
+        {event.title}
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      className={`text-left w-full p-3 rounded-lg border border-gray-200 hover:shadow-sm transition-shadow ${className}`}
+      style={{ borderLeftWidth: '3px', borderLeftColor: color }}
+    >
+      <p className="text-sm font-medium text-gray-900 truncate" title={event.title}>{event.title}</p>
+      <div className="mt-1 flex items-center gap-3 text-xs text-gray-500">
+        <span className="flex items-center gap-1">
+          <Clock size={12} />
+          {event.allDay ? 'All day' : `${formatTime(event.startDate)} - ${formatTime(event.endDate)}`}
+        </span>
+        {event.location && (
+          <span className="flex items-center gap-1">
+            <MapPin size={12} />
+            {event.location}
+          </span>
+        )}
+      </div>
+    </button>
+  );
+};

package/src/calendar/MockCalendarProvider.ts

@@ -0,0 +1,98 @@
+import type { ICalendarProvider, CalendarEvent, CalendarInfo } from './types';
+
+const CALENDARS: CalendarInfo[] = [
+  { id: 'personal', name: 'Personal', color: '#3b82f6' },
+  { id: 'work', name: 'Work', color: '#10b981' },
+  { id: 'family', name: 'Family', color: '#f59e0b' },
+];
+
+const EVENT_TITLES = [
+  'Team standup', 'Lunch with Sarah', 'Design review', 'Gym session',
+  'Doctor appointment', 'Code review', 'Sprint planning', 'Movie night',
+  'Grocery shopping', 'Piano lesson', 'Board meeting', 'Yoga class',
+  'Project deadline', 'Coffee with Alex', 'Dentist', 'Book club',
+];
+
+const LOCATIONS = ['Office', 'Zoom', 'Conference Room A', 'Downtown Cafe', 'Home', undefined];
+
+function generateEvents(): CalendarEvent[] {
+  const events: CalendarEvent[] = [];
+  const now = new Date();
+  const baseDate = new Date(now.getFullYear(), now.getMonth(), 1);
+
+  for (let i = 0; i < 40; i++) {
+    const day = Math.floor(Math.random() * 35) - 5;
+    const hour = 8 + Math.floor(Math.random() * 10);
+    const duration = 1 + Math.floor(Math.random() * 3);
+    const allDay = i % 8 === 0;
+    const calendar = CALENDARS[i % CALENDARS.length];
+
+    const startDate = new Date(baseDate);
+    startDate.setDate(startDate.getDate() + day);
+    startDate.setHours(hour, 0, 0, 0);
+
+    const endDate = new Date(startDate);
+    if (allDay) {
+      endDate.setHours(23, 59, 59, 999);
+    } else {
+      endDate.setHours(hour + duration);
+    }
+
+    events.push({
+      id: `event-${i}`,
+      type: 'calendar-event',
+      title: EVENT_TITLES[i % EVENT_TITLES.length],
+      startDate,
+      endDate,
+      allDay,
+      location: LOCATIONS[i % LOCATIONS.length],
+      attendees: i % 3 === 0 ? ['alice@example.com', 'bob@example.com'] : undefined,
+      color: calendar.color,
+      calendarId: calendar.id,
+      createdAt: now,
+      updatedAt: now,
+    });
+  }
+  return events;
+}
+
+export class MockCalendarProvider implements ICalendarProvider {
+  private events = generateEvents();
+
+  async listItems() { return this.events; }
+
+  async getItem(id: string) { return this.events.find(e => e.id === id) ?? null; }
+
+  async createItem(item: Omit<CalendarEvent, 'id' | 'createdAt' | 'updatedAt'>) {
+    const now = new Date();
+    const created: CalendarEvent = { ...item, id: `event-${Date.now()}`, createdAt: now, updatedAt: now } as CalendarEvent;
+    this.events.push(created);
+    return created;
+  }
+
+  async updateItem(id: string, updates: Partial<CalendarEvent>) {
+    const idx = this.events.findIndex(e => e.id === id);
+    if (idx === -1) throw new Error('Not found');
+    this.events[idx] = { ...this.events[idx], ...updates, updatedAt: new Date() };
+    return this.events[idx];
+  }
+
+  async deleteItem(id: string) {
+    this.events = this.events.filter(e => e.id !== id);
+  }
+
+  async search(query: string) {
+    const q = query.toLowerCase();
+    return this.events.filter(e => e.title.toLowerCase().includes(q));
+  }
+
+  async getCalendars() { return CALENDARS; }
+
+  async getEventsByRange(start: Date, end: Date) {
+    return this.events.filter(e => e.endDate >= start && e.startDate <= end);
+  }
+
+  async getEventsByCalendar(calendarId: string) {
+    return this.events.filter(e => e.calendarId === calendarId);
+  }
+}