@open-webapp/calendar 0.0.0-stage → 0.2.0

package/dist/styles.css

@@ -0,0 +1,503 @@
+.calendar-pane {
+  --calendar-footer-height: 64px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.calendar-pane-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.calendar-pane:has(.calendar-pane-footer) .calendar-pane-scroll {
+  padding-bottom: var(--calendar-footer-height);
+}
+
+.calendar-pane-footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  box-sizing: border-box;
+  min-height: var(--calendar-footer-height);
+  padding: 12px 16px;
+  border-top: 1px solid #eee;
+  background: #ffffff;
+}
+
+.calendar-pane-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 24px 16px;
+}
+
+.calendar-pane-prompt p {
+  margin: 0;
+  color: #555;
+  font-size: 14px;
+}
+
+.calendar-connect-button {
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  background: #ffffff;
+  color: #00a9ce;
+  border: 1px solid #00a9ce;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.calendar-connect-button:hover {
+  background: #f0f8fb;
+}
+
+.calendar-rsvp-chips {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  flex-wrap: wrap;
+  position: sticky;
+  top: 0;
+  background: #ffffff;
+  z-index: 2;
+}
+
+.calendar-rsvp-chip {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  color: #333;
+  border: 1px solid #ccc;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.calendar-scroll-today-btn {
+  margin-right: 4px;
+  padding-right: 4px;
+  border-right: 1px solid #ccc;
+}
+
+.calendar-rsvp-chip:hover {
+  border-color: #00a9ce;
+}
+
+.calendar-rsvp-chip.selected {
+  background: #081a59;
+  color: #ffffff;
+  border-color: #081a59;
+}
+
+.calendar-empty-state {
+  padding: 24px 16px;
+  color: #999;
+  font-size: 14px;
+}
+
+.calendar-day-groups {
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar-day-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar-day-header {
+  position: sticky;
+  top: var(--chip-row-height, 44px);
+  background: #f5f5f5;
+  color: #333;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 8px 16px;
+  z-index: 1;
+}
+
+.calendar-event-allday {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-left: 3px solid var(--rsvp-bar, transparent);
+  border-bottom: 1px solid #eee;
+}
+
+.calendar-event-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 16px;
+  border-left: 3px solid var(--rsvp-bar, transparent);
+  border-bottom: 1px solid #eee;
+}
+
+.calendar-event-allday {
+  background: #fdf6e3;
+  font-style: italic;
+}
+
+.calendar-event-row--rsvp-accepted {
+  --rsvp-bar: #2e7d32;
+}
+
+.calendar-event-row--rsvp-tentative {
+  --rsvp-bar: #d97706;
+}
+
+.calendar-event-row--rsvp-needsAction {
+  --rsvp-bar: #2563eb;
+}
+
+.calendar-event-row--rsvp-declined {
+  --rsvp-bar: #dc2626;
+}
+
+.calendar-event-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.calendar-event-title-link {
+  align-self: flex-start;
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.calendar-event-title-link:hover .calendar-event-title {
+  text-decoration: underline;
+}
+
+.calendar-event-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  align-self: flex-start;
+}
+
+.calendar-event-insert-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #888;
+  cursor: pointer;
+}
+
+.calendar-event-insert-link:hover {
+  color: #222;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.calendar-event-insert-link:focus-visible {
+  outline: 2px solid #1a73e8;
+  outline-offset: 1px;
+  color: #222;
+}
+
+.calendar-event-time {
+  font-size: 12px;
+  color: #666;
+  min-width: 110px;
+  flex-shrink: 0;
+}
+
+.calendar-event-title {
+  font-size: 14px;
+  color: #222;
+}
+
+.calendar-event-organizer {
+  font-size: 12px;
+  color: #888;
+}
+
+.calendar-event-calendar {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: #888;
+}
+
+.calendar-event-calendar-dot {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+}
+
+.calendar-event-join {
+  font-size: 12px;
+  font-weight: 500;
+  color: #00a9ce;
+  cursor: pointer;
+  text-decoration: none;
+  padding: 4px 8px;
+  border: 1px solid #00a9ce;
+  border-radius: 4px;
+}
+
+.calendar-event-join:hover {
+  background: #f0f8fb;
+}
+
+.calendar-event-row--current,
+.calendar-event-row--selected {
+  background: #f0f8fb;
+}
+
+@media (prefers-color-scheme: dark) {
+  .calendar-pane-prompt p {
+    color: #ccc;
+  }
+
+  .calendar-connect-button {
+    background: #1a1a1a;
+    color: #22d0ef;
+    border-color: #22d0ef;
+  }
+
+  .calendar-connect-button:hover {
+    background: #2a2a2a;
+  }
+
+  .calendar-rsvp-chips {
+    background: #1a1a1a;
+  }
+
+  .calendar-pane-footer {
+    border-top-color: #333;
+    background: #1a1a1a;
+  }
+
+  .calendar-rsvp-chip {
+    color: #eee;
+    border-color: #444;
+  }
+
+  .calendar-scroll-today-btn {
+    border-right-color: #444;
+  }
+
+  .calendar-rsvp-chip.selected {
+    background: #22d0ef;
+    color: #081a59;
+    border-color: #22d0ef;
+  }
+
+  .calendar-day-header {
+    background: #222;
+    color: #eee;
+  }
+
+  .calendar-event-allday {
+    border-bottom-color: #333;
+  }
+
+  .calendar-event-row {
+    border-bottom-color: #333;
+  }
+
+  .calendar-event-allday {
+    background: #2a2510;
+  }
+
+  .calendar-event-row--rsvp-accepted {
+    --rsvp-bar: #4ade80;
+  }
+
+  .calendar-event-row--rsvp-tentative {
+    --rsvp-bar: #fbbf24;
+  }
+
+  .calendar-event-row--rsvp-needsAction {
+    --rsvp-bar: #60a5fa;
+  }
+
+  .calendar-event-row--rsvp-declined {
+    --rsvp-bar: #f87171;
+  }
+
+  .calendar-event-title {
+    color: #eee;
+  }
+
+  .calendar-event-join {
+    color: #22d0ef;
+    border-color: #22d0ef;
+  }
+
+  .calendar-event-join:hover {
+    background: #2a2a2a;
+  }
+
+  .calendar-event-row--current,
+  .calendar-event-row--selected {
+    background: #10262b;
+  }
+
+  .calendar-event-insert-link {
+    color: #999;
+  }
+
+  .calendar-event-insert-link:hover {
+    color: #eee;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .calendar-event-insert-link:focus-visible {
+    outline-color: #22d0ef;
+    color: #eee;
+  }
+}
+
+.calendar-selector {
+  position: relative;
+}
+
+.calendar-selector-dropdown {
+  position: absolute;
+  z-index: 3;
+  box-sizing: border-box;
+  min-width: 220px;
+  max-width: min(320px, calc(100vw - 32px));
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  background: #fff;
+  color: #1a1a1a;
+  box-shadow: 0 4px 14px rgb(0 0 0 / 15%);
+}
+
+.calendar-selector-dropdown--upward {
+  right: 0;
+  bottom: calc(100% + 6px);
+}
+
+.calendar-selector-dropdown input[type='search'] {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.calendar-selector-checkbox {
+  flex: none;
+  margin: 0;
+  pointer-events: none;
+  accent-color: #22a6c0;
+}
+
+.calendar-selector-actions {
+  display: flex;
+  gap: 8px;
+  margin: 8px 0;
+}
+
+.calendar-selector-dropdown [role='listbox'] {
+  display: grid;
+  gap: 2px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.calendar-selector-dropdown [role='option'] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px;
+  border: 0;
+  background: transparent;
+  text-align: left;
+}
+
+.calendar-selector-dropdown [role='option'][data-active='true'] {
+  background: #e8f5f8;
+}
+
+.calendar-selector-dot {
+  flex: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.calendar-selector-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (prefers-color-scheme: dark) {
+  .calendar-selector-dropdown {
+    border-color: #333;
+    background: #1a1a1a;
+    color: #eee;
+    box-shadow: 0 4px 14px rgb(0 0 0 / 50%);
+  }
+
+  .calendar-selector-dropdown input[type='search'] {
+    border: 1px solid #444;
+    background: #2a2a2a;
+    color: #eee;
+  }
+
+  .calendar-selector-dropdown button {
+    border: 1px solid #444;
+    background: #2a2a2a;
+    color: #eee;
+  }
+
+  .calendar-selector-dropdown [role='option'] {
+    border: 0;
+    background: transparent;
+    color: #eee;
+  }
+
+  .calendar-selector-dropdown [role='option']:hover {
+    background: #2a2a2a;
+  }
+
+  .calendar-selector-dropdown [role='option'][data-active='true'] {
+    background: #10262b;
+  }
+}
+
+.calendar-event-source-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 5px;
+  flex: none;
+}
+
+.calendar-selector-heading {
+  margin: 0;
+  padding: 6px 8px 2px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  opacity: 0.7;
+  overflow-wrap: anywhere;
+}

package/dist/testing/index.d.ts

@@ -0,0 +1,21 @@
+import type { CryptoAdapter, StorageAdapter, StorageRow } from '../core/storage.js';
+export declare function createMemoryStorage(): StorageAdapter & {
+    rows: Map<string, StorageRow>;
+};
+export declare const identityCrypto: CryptoAdapter;
+export type FakeReply = {
+    status: number;
+    body?: unknown;
+} | 'network-error';
+/** Stubs global fetch with a router; returns the request log. Restore via the returned `restore`. */
+export declare function installFakeFetch(router: (req: {
+    url: string;
+    token: string;
+}, u: URL) => FakeReply): {
+    log: {
+        url: string;
+        token: string;
+    }[];
+    restore: () => void;
+};
+export * from './storageContract.js';

package/dist/testing/index.js

@@ -0,0 +1,42 @@
+export function createMemoryStorage() {
+    const rows = new Map();
+    return {
+        rows,
+        async get(id) {
+            return rows.get(id) ?? null;
+        },
+        async put(id, row) {
+            rows.set(id, row);
+        },
+        async delete(id) {
+            rows.delete(id);
+        },
+        async clear(id) {
+            rows.delete(id);
+        },
+    };
+}
+export const identityCrypto = {
+    encrypt: async (s) => s,
+    decrypt: async (s) => s,
+};
+/** Stubs global fetch with a router; returns the request log. Restore via the returned `restore`. */
+export function installFakeFetch(router) {
+    const original = globalThis.fetch;
+    const log = [];
+    globalThis.fetch = (async (input, init) => {
+        const url = String(input);
+        const auth = init?.headers?.Authorization ?? init?.headers?.authorization ?? '';
+        const req = { url, token: auth.replace(/^Bearer /, '') };
+        log.push(req);
+        const reply = router(req, new URL(url));
+        if (reply === 'network-error')
+            throw new TypeError('Failed to fetch');
+        return new Response(JSON.stringify(reply.body ?? {}), {
+            status: reply.status,
+            headers: { 'content-type': 'application/json' },
+        });
+    });
+    return { log, restore: () => void (globalThis.fetch = original) };
+}
+export * from './storageContract.js';

package/dist/testing/storageContract.d.ts

@@ -0,0 +1,27 @@
+import type { CryptoAdapter, StorageAdapter, StorageRow } from '../core/storage.js';
+import type { CalendarEvent } from '../core/types.js';
+/**
+ * What a host supplies to run the contract.
+ *
+ * - `storage` / `crypto`: the adapters under test (fresh, empty per factory call).
+ * - `seedRaw` (optional): writes a row EXACTLY as given, bypassing any normalisation the
+ *   adapter's `put` performs. Hosts whose adapter stores a different on-disk shape (e.g. an
+ *   IndexedDB store) use this to plant legacy-format and corrupt rows. Defaults to `storage.put`.
+ * - `wrongKeyCrypto` (optional): a crypto adapter whose decrypt fails (or yields garbage) for
+ *   data written by `crypto`. Omit when `crypto` is an identity transform (wrong-key case skipped).
+ * - `encryptedFixture` (optional): a LITERAL ciphertext string (copied from a real legacy
+ *   capture, never generated here) that `crypto.decrypt` turns into JSON of `[LEGACY_EVENT]`.
+ *   Defaults to the plain JSON string, which is correct for identity crypto.
+ * - `corruptRow` (optional): a row the host considers corrupt on disk. Defaults to garbage strings.
+ */
+export interface StorageContractHarness {
+    storage: StorageAdapter;
+    crypto: CryptoAdapter;
+    seedRaw?: (sourceId: string, row: StorageRow) => Promise<void>;
+    wrongKeyCrypto?: CryptoAdapter;
+    encryptedFixture?: string;
+    corruptRow?: StorageRow;
+}
+/** Literal fixture event (values copied from the notesdiary calendarCache test row()). */
+export declare const LEGACY_EVENT: CalendarEvent;
+export declare function runStorageAdapterContract(factory: () => StorageContractHarness | Promise<StorageContractHarness>): void;

package/dist/testing/storageContract.js

@@ -0,0 +1,117 @@
+import { describe, expect, it } from 'vitest';
+import { createCalendarController } from '../core/controller.js';
+import { installFakeFetch } from './index.js';
+/** Literal fixture event (values copied from the notesdiary calendarCache test row()). */
+export const LEGACY_EVENT = {
+    id: 'instanceId',
+    sourceId: 'src',
+    calendarId: 'cal',
+    summary: 'Original',
+    start: { dateTime: '2026-10-09T15:00:00.000Z' },
+    end: { dateTime: '2026-10-09T16:00:00.000Z' },
+    isAllDay: false,
+    selfResponseStatus: 'accepted',
+    joinUrl: null,
+    organizer: { self: false },
+    htmlLink: '',
+};
+const LEGACY_JSON = '[{"id":"instanceId","sourceId":"src","calendarId":"cal","summary":"Original","start":{"dateTime":"2026-10-09T15:00:00.000Z"},"end":{"dateTime":"2026-10-09T16:00:00.000Z"},"isAllDay":false,"selfResponseStatus":"accepted","joinUrl":null,"organizer":{"self":false},"htmlLink":""}]';
+export function runStorageAdapterContract(factory) {
+    describe('StorageAdapter contract', () => {
+        const ev = (id) => ({ ...LEGACY_EVENT, id });
+        const row = (ids, tokens, selectedIds) => ({
+            events: ids.map(ev),
+            syncState: { tokens },
+            selectedIds,
+        });
+        /** Loads a source through the real controller (network down) and returns what it read back. */
+        async function readBack(h, crypto = h.crypto) {
+            const f = installFakeFetch(() => 'network-error');
+            try {
+                const c = createCalendarController({
+                    sources: [{ id: 'src', email: 'a@b.c' }],
+                    getToken: async () => 't',
+                    storage: h.storage,
+                    crypto,
+                });
+                await c.refresh();
+                return { events: c.getEvents(), selected: c.getSelectedIds('src') };
+            }
+            finally {
+                f.restore();
+            }
+        }
+        const seed = (h, id, r) => (h.seedRaw ?? ((i, x) => h.storage.put(i, x)))(id, r);
+        it('put/get round-trips events, syncState and selectedIds', async () => {
+            const { storage } = await factory();
+            const r = row(['a', 'b'], { cal: 'tok' }, ['cal']);
+            await storage.put('s1', r);
+            expect(await storage.get('s1')).toEqual(r);
+        });
+        it('isolates sources from each other', async () => {
+            const { storage } = await factory();
+            await storage.put('s1', row(['a'], { c: '1' }, ['c']));
+            await storage.put('s2', row(['b'], { c: '2' }, []));
+            await storage.delete('s1');
+            expect(await storage.get('s1')).toBeNull();
+            expect(await storage.get('s2')).toEqual(row(['b'], { c: '2' }, []));
+        });
+        it('delete and clear remove only the given source', async () => {
+            const { storage } = await factory();
+            await storage.put('s1', row(['a'], {}, []));
+            await storage.put('s2', row(['b'], {}, []));
+            await storage.clear('s1');
+            expect(await storage.get('s1')).toBeNull();
+            expect(await storage.get('s2')).not.toBeNull();
+            await storage.delete('s2');
+            expect(await storage.get('s2')).toBeNull();
+        });
+        it('get on a missing source resolves null', async () => {
+            const { storage } = await factory();
+            expect(await storage.get('nope')).toBeNull();
+        });
+        it('missing source reads back as empty', async () => {
+            const h = await factory();
+            expect(await readBack(h)).toEqual({ events: [], selected: ['primary'] });
+        });
+        it('reads a legacy plain (unencrypted) row', async () => {
+            const h = await factory();
+            await seed(h, 'src', { events: [LEGACY_EVENT], syncState: { tokens: { cal: 't' } }, selectedIds: ['cal'] });
+            expect(await readBack(h)).toEqual({ events: [LEGACY_EVENT], selected: ['cal'] });
+        });
+        it('reads a legacy encrypted row from a literal fixture', async () => {
+            const h = await factory();
+            await seed(h, 'src', {
+                events: h.encryptedFixture ?? LEGACY_JSON,
+                syncState: h.encryptedFixture ? null : '{"tokens":{"cal":"t"}}',
+                selectedIds: ['cal'],
+            });
+            const out = await readBack(h);
+            expect(out.events).toEqual([LEGACY_EVENT]);
+            expect(out.selected).toEqual(['cal']);
+        });
+        it('reads a 0.1.0 row that has no lastFullSyncAt/lastSyncAt fields', async () => {
+            const h = await factory();
+            await seed(h, 'src', { events: [LEGACY_EVENT], syncState: { tokens: { cal: 't' } }, selectedIds: ['cal'] });
+            const out = await readBack(h);
+            expect(out.events).toEqual([LEGACY_EVENT]);
+            expect(out.selected).toEqual(['cal']);
+        });
+        it('a corrupt row reads back empty without throwing', async () => {
+            const h = await factory();
+            await seed(h, 'src', h.corruptRow ?? { events: '%%not-json%%', syncState: '{{', selectedIds: 'bad' });
+            await expect(readBack(h)).resolves.toEqual({ events: [], selected: ['primary'] });
+        });
+        it('a wrong key reads back empty without throwing', async () => {
+            const h = await factory();
+            if (!h.wrongKeyCrypto)
+                return;
+            await h.storage.put('src', {
+                events: await h.crypto.encrypt(JSON.stringify([LEGACY_EVENT])),
+                syncState: await h.crypto.encrypt(JSON.stringify({ tokens: {} })),
+                selectedIds: [],
+            });
+            await expect(readBack(h, h.wrongKeyCrypto)).resolves.toEqual({ events: [], selected: ['primary'] });
+        });
+    });
+}