@rightkit/workspace-ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,3 +1,9 @@
+export * from "./client.js";
+export * from "./host.js";
+export * from "./icons.js";
+export * from "./hooks/useDrive.js";
+export * from "./lib/avatar.js";
+export * from "./lib/calendarUtils.js";
 export * from "./lib/vcard.js";
 export * from "./views/CalendarEventFormModal.js";
 export * from "./views/CalendarEventPopover.js";
@@ -11,3 +17,7 @@ export * from "./views/DriveView.js";
 export * from "./views/MeetView.js";
 export * from "./views/TasksView.js";
 export * from "./views/driveFileGlyph.js";
+export * from "./views/nav/CalendarNav.js";
+export * from "./views/nav/ContactsNav.js";
+export * from "./views/nav/DriveNav.js";
+export * from "./views/nav/TasksNav.js";

package/dist/index.js

@@ -1,5 +1,10 @@
-// Generated entry: every module whose exports do not collide with an earlier one.
-// Every module is also importable directly by subpath, e.g. `<package>/lib/foo`.
+// The workspace views and navs, the host contract they render over, and the workspace data model.
+export * from "./client.js";
+export * from "./host.js";
+export * from "./icons.js";
+export * from "./hooks/useDrive.js";
+export * from "./lib/avatar.js";
+export * from "./lib/calendarUtils.js";
 export * from "./lib/vcard.js";
 export * from "./views/CalendarEventFormModal.js";
 export * from "./views/CalendarEventPopover.js";
@@ -13,3 +18,7 @@ export * from "./views/DriveView.js";
 export * from "./views/MeetView.js";
 export * from "./views/TasksView.js";
 export * from "./views/driveFileGlyph.js";
+export * from "./views/nav/CalendarNav.js";
+export * from "./views/nav/ContactsNav.js";
+export * from "./views/nav/DriveNav.js";
+export * from "./views/nav/TasksNav.js";

package/dist/lib/avatar.d.ts

@@ -0,0 +1,4 @@
+/** The first letter of a name or address, upper-cased; "?" for an empty one. */
+export declare const initialOf: (s: string) => string;
+/** Stable per-person avatar colour (Gmail-style coloured initials). */
+export declare function colorFor(s: string): string;

package/dist/lib/avatar.js

@@ -0,0 +1,13 @@
+// Coloured-initial avatars for people (contacts, senders). One copy: the mail views import them from here.
+/** The first letter of a name or address, upper-cased; "?" for an empty one. */
+export const initialOf = (s) => (s.trim()[0] || "?").toUpperCase();
+const AVATAR_COLORS = [
+    "#C46A3D", "#6E8B6B", "#B07A84", "#7E8AA8", "#B59A52", "#8A6BA8", "#5E8C8C", "#A8675B",
+];
+/** Stable per-person avatar colour (Gmail-style coloured initials). */
+export function colorFor(s) {
+    let h = 0;
+    for (let i = 0; i < s.length; i++)
+        h = (h * 31 + s.charCodeAt(i)) >>> 0;
+    return AVATAR_COLORS[h % AVATAR_COLORS.length];
+}

package/dist/lib/calendarUtils.d.ts

@@ -0,0 +1,11 @@
+import type { CalEvent } from "../client.js";
+export declare const DAY = 86400000;
+export declare const WEEKDAY_LABELS: string[];
+/** RRULE BYDAY codes with their short labels, Monday first (the event form's repeat-on picker). */
+export declare const WEEKDAYS: ReadonlyArray<readonly [string, string]>;
+export declare const startOfDay: (ms: number) => number;
+export declare const startOfWeek: (ms: number) => number;
+export declare const sameDay: (a: number, b: number) => boolean;
+export declare function rangeFor(cursor: number, view: "month" | "week" | "day"): [number, number];
+export declare function eventDay(e: CalEvent): number;
+export declare const hhmm: (s: string) => string;

package/dist/lib/calendarUtils.js

@@ -0,0 +1,42 @@
+export const DAY = 86400000;
+export const WEEKDAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+/** RRULE BYDAY codes with their short labels, Monday first (the event form's repeat-on picker). */
+export const WEEKDAYS = [
+    ["MO", "Mon"],
+    ["TU", "Tue"],
+    ["WE", "Wed"],
+    ["TH", "Thu"],
+    ["FR", "Fri"],
+    ["SA", "Sat"],
+    ["SU", "Sun"],
+];
+export const startOfDay = (ms) => {
+    const d = new Date(ms);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime();
+};
+export const startOfWeek = (ms) => {
+    const d = new Date(startOfDay(ms));
+    return d.getTime() - d.getDay() * DAY;
+};
+export const sameDay = (a, b) => startOfDay(a) === startOfDay(b);
+export function rangeFor(cursor, view) {
+    if (view === "day")
+        return [startOfDay(cursor), startOfDay(cursor) + DAY];
+    if (view === "week") {
+        const s = startOfWeek(cursor);
+        return [s, s + 7 * DAY];
+    }
+    const d = new Date(cursor);
+    const first = new Date(d.getFullYear(), d.getMonth(), 1).getTime();
+    const gridStart = startOfWeek(first);
+    return [gridStart, gridStart + 42 * DAY];
+}
+export function eventDay(e) {
+    if (e.all_day) {
+        const [y, m, d] = e.start.slice(0, 10).split("-").map(Number);
+        return new Date(y, (m || 1) - 1, d || 1).getTime();
+    }
+    return startOfDay(new Date(e.start).getTime());
+}
+export const hhmm = (s) => new Date(s).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });

package/dist/views/CalendarEventFormModal.d.ts

@@ -1,4 +1,4 @@
-import type { EventForm } from "@rightkit/mail-ui/store/types";
+import type { EventForm } from "../client.js";
 type CalendarEventFormModalProps = {
     eventForm: EventForm;
     setEventForm: (form: EventForm | null) => void;

package/dist/views/CalendarEventFormModal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Dialog, Input, Checkbox, Select } from "@rightkit/react-shell/react";
-import { WEEKDAYS } from "@rightkit/mail-ui/lib/mail";
+import { WEEKDAYS } from "../lib/calendarUtils.js";
 export function CalendarEventFormModal({ eventForm, setEventForm, freeBusyMsg, checkAvailability, submitEvent, }) {
     return (_jsx(Dialog, { title: eventForm.id ? "Edit event" : "New event", width: 460, onClose: () => setEventForm(null), children: _jsxs("div", { className: "ws-form", children: [_jsx(Input, { className: "event-title-input", placeholder: "Add title", autoFocus: true, value: eventForm.summary, onChange: (e) => setEventForm({ ...eventForm, summary: e.target.value }) }), _jsxs("label", { className: "ws-form-row", children: [_jsx("span", { children: "Start" }), _jsx(Input, { type: eventForm.allDay ? "date" : "datetime-local", value: eventForm.allDay ? eventForm.start.slice(0, 10) : eventForm.start, onChange: (e) => setEventForm({ ...eventForm, start: eventForm.allDay ? `${e.target.value}T09:00` : e.target.value }) })] }), _jsxs("label", { className: "ws-form-row", children: [_jsx("span", { children: "End" }), _jsx(Input, { type: eventForm.allDay ? "date" : "datetime-local", value: eventForm.allDay ? eventForm.end.slice(0, 10) : eventForm.end, onChange: (e) => setEventForm({ ...eventForm, end: eventForm.allDay ? `${e.target.value}T10:00` : e.target.value }) })] }), _jsx("div", { className: "label-toggle", children: _jsx(Checkbox, { label: "All day", checked: eventForm.allDay, onChange: (on) => setEventForm({ ...eventForm, allDay: on }) }) }), _jsx(Input, { placeholder: "Guests (comma-separated emails)", value: eventForm.attendees, onChange: (e) => setEventForm({ ...eventForm, attendees: e.target.value }) }), _jsxs("label", { className: "ws-form-row", children: [_jsx("span", { children: "Remind (min before)" }), _jsx(Input, { type: "number", style: { width: 80 }, value: eventForm.reminderMinutes, onChange: (e) => setEventForm({ ...eventForm, reminderMinutes: e.target.value }) })] }), _jsx("div", { className: "label-toggle", children: _jsx(Checkbox, { label: "Add Google Meet video call", checked: eventForm.addMeet, onChange: (on) => setEventForm({ ...eventForm, addMeet: on }) }) }), _jsxs("label", { className: "ws-form-row", children: [_jsx("span", { children: "Repeats" }), _jsx(Select, { label: "Repeats", value: eventForm.recurrence, options: [
                                 { value: "", label: "Does not repeat" },

package/dist/views/CalendarEventPopover.d.ts

@@ -1,4 +1,4 @@
-import { type CalEvent } from "@rightkit/mail-ui/lib/ipc";
+import type { CalEvent } from "../client.js";
 type CalendarEventPopoverProps = {
     openEvent: CalEvent;
     setOpenEvent: (ev: CalEvent | null) => void;

package/dist/views/CalendarEventPopover.js

@@ -1,8 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Dialog } from "@rightkit/react-shell/react";
-import { eventDay, hhmm } from "@rightkit/mail-ui/lib/calendarUtils";
-import { openExternal } from "@rightkit/mail-ui/lib/ipc";
+import { eventDay, hhmm } from "../lib/calendarUtils.js";
+import { useWorkspaceClient } from "../host.js";
 export function CalendarEventPopover({ openEvent, setOpenEvent, openEventForm, deleteEv, rsvp, }) {
+    const { openExternal } = useWorkspaceClient();
     return (_jsxs(Dialog, { title: openEvent.summary || "(no title)", width: 420, onClose: () => setOpenEvent(null), children: [_jsxs("p", { className: "event-when", children: [openEvent.all_day
                         ? new Date(eventDay(openEvent)).toLocaleDateString([], { weekday: "long", month: "long", day: "numeric" }) + " · all day"
                         : `${new Date(openEvent.start).toLocaleDateString([], { weekday: "long", month: "long", day: "numeric" })} · ${hhmm(openEvent.start)}${openEvent.end ? `–${hhmm(openEvent.end)}` : ""}`, openEvent.is_recurring ? " · repeats" : ""] }), openEvent.location && _jsx("p", { className: "hint", children: openEvent.location }), openEvent.description && _jsx("p", { className: "event-desc", children: openEvent.description }), openEvent.attendees.length > 0 && (_jsxs("p", { className: "hint", children: [openEvent.attendees.length, " guest", openEvent.attendees.length > 1 ? "s" : ""] })), _jsxs("div", { className: "ws-detail-actions", children: [openEvent.meet_link && (_jsx(Button, { variant: "primary", size: "sm", onClick: () => openExternal(openEvent.meet_link), children: "Join Meet" })), openEvent.my_response && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => rsvp(openEvent, "accepted"), children: "Yes" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => rsvp(openEvent, "tentative"), children: "Maybe" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => rsvp(openEvent, "declined"), children: "No" })] })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => openEventForm(openEvent), children: "Edit" }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => deleteEv(openEvent), children: "Delete" })] })] }));

package/dist/views/CalendarGrids.d.ts

@@ -1,4 +1,4 @@
-import type { CalEvent } from "@rightkit/mail-ui/lib/ipc";
+import type { CalEvent } from "../client.js";
 export declare function MonthGrid({ cursor, events, today, onDay, onEvent }: {
     cursor: number;
     events: CalEvent[];

package/dist/views/CalendarGrids.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "@rightkit/react-shell/react";
 import { useEffect, useMemo, useRef } from "react";
-import { DAY, WEEKDAY_LABELS, eventDay, hhmm, sameDay, startOfWeek } from "@rightkit/mail-ui/lib/calendarUtils";
+import { DAY, WEEKDAY_LABELS, eventDay, hhmm, sameDay, startOfWeek } from "../lib/calendarUtils.js";
 export function MonthGrid({ cursor, events, today, onDay, onEvent }) {
     const d = new Date(cursor);
     const first = new Date(d.getFullYear(), d.getMonth(), 1).getTime();

package/dist/views/CalendarView.js

@@ -1,42 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, IconButton, Dialog, SegmentedControl } from "@rightkit/react-shell/react";
 import { memo, useEffect, useRef, useState } from "react";
-import Icon from "@rightkit/mail-ui/components/Icons";
-import { AccountSwitcher } from "@rightkit/mail-ui/components/AccountSwitcher";
-import { setPref } from "@rightkit/mail-ui/lib/preferences";
-import { useAppStore } from "@rightkit/mail-ui/store/index";
-import { showDialog } from "@rightkit/mail-ui/hooks/dialog";
-import { listCalendars, listEvents, createEvent, updateEvent, deleteEvent, truncateEventSeries, rsvpEvent, freeBusy, } from "@rightkit/mail-ui/lib/ipc";
+import { Icon } from "../icons.js";
 import { MonthGrid, TimeGrid } from "./CalendarGrids.js";
-import { DAY, rangeFor, startOfDay, startOfWeek } from "@rightkit/mail-ui/lib/calendarUtils";
+import { DAY, rangeFor, startOfDay, startOfWeek } from "../lib/calendarUtils.js";
 import { CalendarEventFormModal } from "./CalendarEventFormModal.js";
 import { CalendarEventPopover } from "./CalendarEventPopover.js";
+import { HostAccountSwitcher, useWorkspaceClient, useWorkspaceHost, useWorkspaceState } from "../host.js";
 const CALENDAR_VIEWS = ["month", "week", "day"];
 function CalendarViewInner() {
     const [recurScope, setRecurScope] = useState(null);
-    const activeAccount = useAppStore((s) => s.activeAccount);
-    const setErr = useAppStore((s) => s.setErr);
-    const showUndo = useAppStore((s) => s.showUndo);
-    const setCalendars = useAppStore((s) => s.setCalendars);
-    const selectedCal = useAppStore((s) => s.selectedCal);
-    const setSelectedCal = useAppStore((s) => s.setSelectedCal);
-    const shownCals = useAppStore((s) => s.shownCals);
-    const setShownCals = useAppStore((s) => s.setShownCals);
-    const calView = useAppStore((s) => s.calView);
-    const setCalView = useAppStore((s) => s.setCalView);
-    const calCursor = useAppStore((s) => s.calCursor);
-    const setCalCursor = useAppStore((s) => s.setCalCursor);
-    const events = useAppStore((s) => s.events);
-    const setEvents = useAppStore((s) => s.setEvents);
-    const openEvent = useAppStore((s) => s.openEvent);
-    const setOpenEvent = useAppStore((s) => s.setOpenEvent);
-    const eventForm = useAppStore((s) => s.eventForm);
-    const setEventForm = useAppStore((s) => s.setEventForm);
-    const freeBusyMsg = useAppStore((s) => s.freeBusyMsg);
-    const setFreeBusyMsg = useAppStore((s) => s.setFreeBusyMsg);
-    const setCalendarBusy = useAppStore((s) => s.setCalendarBusy);
-    const eventSeed = useAppStore((s) => s.eventSeed);
-    const setEventSeed = useAppStore((s) => s.setEventSeed);
+    const { listCalendars, listEvents, createEvent, updateEvent, deleteEvent, truncateEventSeries, rsvpEvent, freeBusy } = useWorkspaceClient();
+    const showDialog = useWorkspaceHost().dialog;
+    const setPref = useWorkspaceHost().savePreference;
+    const activeAccount = useWorkspaceState((s) => s.activeAccount);
+    const setErr = useWorkspaceHost().reportError;
+    const showUndo = useWorkspaceHost().notify;
+    const setCalendars = useWorkspaceState((s) => s.setCalendars);
+    const selectedCal = useWorkspaceState((s) => s.selectedCal);
+    const setSelectedCal = useWorkspaceState((s) => s.setSelectedCal);
+    const shownCals = useWorkspaceState((s) => s.shownCals);
+    const setShownCals = useWorkspaceState((s) => s.setShownCals);
+    const calView = useWorkspaceState((s) => s.calView);
+    const setCalView = useWorkspaceState((s) => s.setCalView);
+    const calCursor = useWorkspaceState((s) => s.calCursor);
+    const setCalCursor = useWorkspaceState((s) => s.setCalCursor);
+    const events = useWorkspaceState((s) => s.events);
+    const setEvents = useWorkspaceState((s) => s.setEvents);
+    const openEvent = useWorkspaceState((s) => s.openEvent);
+    const setOpenEvent = useWorkspaceState((s) => s.setOpenEvent);
+    const eventForm = useWorkspaceState((s) => s.eventForm);
+    const setEventForm = useWorkspaceState((s) => s.setEventForm);
+    const freeBusyMsg = useWorkspaceState((s) => s.freeBusyMsg);
+    const setFreeBusyMsg = useWorkspaceState((s) => s.setFreeBusyMsg);
+    const setCalendarBusy = useWorkspaceState((s) => s.setCalendarBusy);
+    const eventSeed = useWorkspaceState((s) => s.eventSeed);
+    const setEventSeed = useWorkspaceState((s) => s.setEventSeed);
     const [calendarNow] = useState(() => {
         const now = new Date();
         return {
@@ -192,7 +191,7 @@ function CalendarViewInner() {
                 await createEvent(activeAccount, selectedCal, ev);
             setEventForm(null);
             await reloadEvents();
-            showUndo(f.id ? "Event updated" : "Event created", [], "");
+            showUndo(f.id ? "Event updated" : "Event created");
         }
         catch (e) {
             setErr(String(e));
@@ -207,7 +206,7 @@ function CalendarViewInner() {
             setOpenEvent(null);
             return reloadEvents();
         })
-            .then(() => showUndo("Event deleted", [], ""))
+            .then(() => showUndo("Event deleted"))
             .catch((e) => setErr(String(e)));
     }
     function performTruncate(ev) {
@@ -219,7 +218,7 @@ function CalendarViewInner() {
             setOpenEvent(null);
             return reloadEvents();
         })
-            .then(() => showUndo("This and following events removed", [], ""))
+            .then(() => showUndo("This and following events removed"))
             .catch((e) => setErr(String(e)));
     }
     async function deleteEv(ev) {
@@ -240,7 +239,7 @@ function CalendarViewInner() {
             .then(() => reloadEvents())
             .then(() => {
             setOpenEvent(null);
-            showUndo(`RSVP: ${response}`, [], "");
+            showUndo(`RSVP: ${response}`);
         })
             .catch((e) => setErr(String(e)));
     }
@@ -326,7 +325,7 @@ function CalendarViewInner() {
         }
         return d.toLocaleDateString([], { month: "long", year: "numeric" });
     })();
-    return (_jsxs("div", { className: "calview", children: [_jsxs("div", { className: "cal-bar", children: [_jsx(Button, { variant: "ghost", className: "cal-today", onClick: () => setCalCursor(Date.now()), children: "Today" }), _jsx(IconButton, { label: "Previous", className: "cal-step", title: "Previous", onClick: () => step(-1), children: _jsx(Icon, { name: "chevron-left", size: 18 }) }), _jsx(IconButton, { label: "Next", className: "cal-step", title: "Next", onClick: () => step(1), children: _jsx(Icon, { name: "chevron-right", size: 18 }) }), _jsx("h2", { className: "cal-label", children: headerLabel }), _jsx("div", { className: "cal-bar-spacer" }), _jsx("div", { className: "cal-viewtoggle", children: _jsx(SegmentedControl, { label: "Calendar view", value: calView, options: CALENDAR_VIEWS.map((v) => ({ value: v, label: v[0].toUpperCase() + v.slice(1) })), onChange: (v) => pickView(v) }) }), _jsx(AccountSwitcher, {})] }), _jsx("div", { className: "cal-grid", onWheel: onWheel, children: calView === "month" ? (_jsx(MonthGrid, { cursor: calCursor, events: events, today: calendarNow.today, onDay: (ms) => openEventForm(undefined, undefined, false, ms + 9 * 3600000), onEvent: setOpenEvent })) : (_jsx(TimeGrid, { days: calView === "week"
+    return (_jsxs("div", { className: "calview", children: [_jsxs("div", { className: "cal-bar", children: [_jsx(Button, { variant: "ghost", className: "cal-today", onClick: () => setCalCursor(Date.now()), children: "Today" }), _jsx(IconButton, { label: "Previous", className: "cal-step", title: "Previous", onClick: () => step(-1), children: _jsx(Icon, { name: "chevron-left", size: 18 }) }), _jsx(IconButton, { label: "Next", className: "cal-step", title: "Next", onClick: () => step(1), children: _jsx(Icon, { name: "chevron-right", size: 18 }) }), _jsx("h2", { className: "cal-label", children: headerLabel }), _jsx("div", { className: "cal-bar-spacer" }), _jsx("div", { className: "cal-viewtoggle", children: _jsx(SegmentedControl, { label: "Calendar view", value: calView, options: CALENDAR_VIEWS.map((v) => ({ value: v, label: v[0].toUpperCase() + v.slice(1) })), onChange: (v) => pickView(v) }) }), _jsx(HostAccountSwitcher, {})] }), _jsx("div", { className: "cal-grid", onWheel: onWheel, children: calView === "month" ? (_jsx(MonthGrid, { cursor: calCursor, events: events, today: calendarNow.today, onDay: (ms) => openEventForm(undefined, undefined, false, ms + 9 * 3600000), onEvent: setOpenEvent })) : (_jsx(TimeGrid, { days: calView === "week"
                         ? Array.from({ length: 7 }, (_, i) => startOfWeek(calCursor) + i * DAY)
                         : [startOfDay(calCursor)], events: events, today: calendarNow.today, nowMin: calendarNow.minute, onSlot: (ms) => openEventForm(undefined, undefined, false, ms), onEvent: setOpenEvent })) }), openEvent && (_jsx(CalendarEventPopover, { openEvent: openEvent, setOpenEvent: setOpenEvent, openEventForm: openEventForm, deleteEv: deleteEv, rsvp: rsvp })), eventForm && (_jsx(CalendarEventFormModal, { eventForm: eventForm, setEventForm: setEventForm, freeBusyMsg: freeBusyMsg, checkAvailability: checkAvailability, submitEvent: submitEvent })), recurScope && (_jsxs(Dialog, { title: recurScope.mode === "edit" ? "Edit recurring event" : "Delete recurring event", width: 420, onClose: () => setRecurScope(null), children: [_jsxs("p", { className: "hint", children: ["\u201C", recurScope.ev.summary, "\u201D repeats. Apply to:"] }), _jsxs("div", { className: "recur-choices", children: [_jsx(Button, { variant: "primary", onClick: () => recurScope.mode === "edit" ? fillEditForm(recurScope.ev, recurScope.ev.id) : performDelete(recurScope.ev, recurScope.ev.id), children: "This event" }), recurScope.mode === "delete" && (_jsx(Button, { variant: "primary", onClick: () => performTruncate(recurScope.ev), children: "This and following events" })), _jsx(Button, { variant: "primary", onClick: () => recurScope.mode === "edit" ? fillEditForm(recurScope.ev, recurScope.ev.recurring_event_id) : performDelete(recurScope.ev, recurScope.ev.recurring_event_id), children: "All events" })] })] }))] }));
 }

package/dist/views/ContactsView.js

@@ -3,29 +3,27 @@ import { Button, Dialog, SkeletonRows, Input } from "@rightkit/react-shell/react
 // Contacts — a browsable list (parity with contacts.google.com): search +
 // full contact list with avatars, a create/edit modal, delete, and the
 // import/export/dedupe tools. Group filtering reads the active group from the
-// store (set in ContactsNav). Directory search falls back to the People API for
+// host state (set in ContactsNav). Directory search falls back to the People API for
 // addresses outside the personal contact list.
 import { memo, useEffect, useMemo, useRef, useState } from "react";
-import Icon from "@rightkit/mail-ui/components/Icons";
-import { AccountSwitcher } from "@rightkit/mail-ui/components/AccountSwitcher";
-import { colorFor, initialOf } from "@rightkit/mail-ui/lib/mail";
+import { Icon } from "../icons.js";
+import { colorFor, initialOf } from "../lib/avatar.js";
 import { buildVcf, parseVcf, parseContactsCsv } from "../lib/vcard.js";
-import { useAppStore } from "@rightkit/mail-ui/store/index";
-import { showDialog } from "@rightkit/mail-ui/hooks/dialog";
-import { searchRecipients, listAllContacts, createContact, updateContact, deleteContact, saveTextDownload, } from "@rightkit/mail-ui/lib/ipc";
 import { EMPTY_EDITOR } from "./ContactsView.types.js";
+import { HostAccountSwitcher, useWorkspaceClient, useWorkspaceHost, useWorkspaceState } from "../host.js";
 function ContactsViewInner() {
-    const openComposeTo = useAppStore((s) => s.openComposeTo);
-    const activeAccount = useAppStore((s) => s.activeAccount);
-    const setErr = useAppStore((s) => s.setErr);
-    const showUndo = useAppStore((s) => s.showUndo);
-    const setView = useAppStore((s) => s.setView);
-    const contactsQuery = useAppStore((s) => s.contactsQuery);
-    const setContactsQuery = useAppStore((s) => s.setContactsQuery);
-    const contactsBusy = useAppStore((s) => s.contactsBusy);
-    const setContactsBusy = useAppStore((s) => s.setContactsBusy);
-    const contactDupes = useAppStore((s) => s.contactDupes);
-    const setContactDupes = useAppStore((s) => s.setContactDupes);
+    const { searchRecipients, listAllContacts, createContact, updateContact, deleteContact, saveTextDownload } = useWorkspaceClient();
+    const showDialog = useWorkspaceHost().dialog;
+    const openComposeTo = useWorkspaceHost().composeTo;
+    const activeAccount = useWorkspaceState((s) => s.activeAccount);
+    const setErr = useWorkspaceHost().reportError;
+    const showUndo = useWorkspaceHost().notify;
+    const contactsQuery = useWorkspaceState((s) => s.contactsQuery);
+    const setContactsQuery = useWorkspaceState((s) => s.setContactsQuery);
+    const contactsBusy = useWorkspaceState((s) => s.contactsBusy);
+    const setContactsBusy = useWorkspaceState((s) => s.setContactsBusy);
+    const contactDupes = useWorkspaceState((s) => s.contactDupes);
+    const setContactDupes = useWorkspaceState((s) => s.setContactDupes);
     const [contacts, setContacts] = useState([]);
     const [dirResults, setDirResults] = useState([]);
     const [editor, setEditor] = useState(null);
@@ -75,8 +73,7 @@ function ContactsViewInner() {
         return dirResults.filter((r) => r.email && !known.has(r.email.toLowerCase()));
     }, [dirResults, contacts, query]);
     function emailContact(addr) {
-        setView("inbox");
-        setTimeout(() => openComposeTo(addr, "", ""), 0);
+        openComposeTo(addr, "", "");
     }
     function startCreate() {
         setEditor(EMPTY_EDITOR);
@@ -105,7 +102,7 @@ function ContactsViewInner() {
             ? updateContact(activeAccount, editor.resource_name, editor.etag, name, emails, phones)
             : createContact(activeAccount, name, emails, phones);
         op.then(() => {
-            showUndo(editor.resource_name ? "Contact saved" : "Contact created", [], "");
+            showUndo(editor.resource_name ? "Contact saved" : "Contact created");
             setEditor(null);
             loadAll();
         })
@@ -120,7 +117,7 @@ function ContactsViewInner() {
         setContactsBusy(true);
         deleteContact(activeAccount, c.resource_name)
             .then(() => {
-            showUndo("Contact deleted", [], "");
+            showUndo("Contact deleted");
             setContacts((prev) => prev.filter((x) => x.resource_name !== c.resource_name));
         })
             .catch((e) => setErr(String(e)))
@@ -132,7 +129,7 @@ function ContactsViewInner() {
         const vcf = buildVcf(contacts.map((c) => ({ name: c.display_name, emails: c.emails, phones: c.phones, org: c.org })));
         // Saved natively to Downloads (exclusive atomic publish), like every other download.
         saveTextDownload("contacts.vcf", vcf)
-            .then(() => showUndo(`Exported ${contacts.length} contacts`, [], ""))
+            .then(() => showUndo(`Exported ${contacts.length} contacts`))
             .catch((e) => setErr(String(e)));
     }
     function importContactsFile(file) {
@@ -162,7 +159,7 @@ function ContactsViewInner() {
                     break;
                 }
             }
-            showUndo(`Imported ${ok} of ${parsed.length} contacts`, [], "");
+            showUndo(`Imported ${ok} of ${parsed.length} contacts`);
             loadAll();
         })
             .catch((e) => setErr(String(e)))
@@ -196,7 +193,7 @@ function ContactsViewInner() {
         }
         setContactDupes(groups);
         if (groups.length === 0)
-            showUndo("No duplicate contacts found", [], "");
+            showUndo("No duplicate contacts found");
     }
     async function mergeDupeGroup(group) {
         if (!activeAccount || contactsBusy)
@@ -212,7 +209,7 @@ function ContactsViewInner() {
             .then(async () => {
             for (const d of group.dups)
                 await deleteContact(activeAccount, d.resource_name);
-            showUndo("Merged duplicates", [], "");
+            showUndo("Merged duplicates");
             setContactDupes((prev) => (prev ? prev.filter((g) => g !== group) : prev));
             loadAll();
         })
@@ -220,7 +217,7 @@ function ContactsViewInner() {
             .finally(() => setContactsBusy(false));
     }
     const setEd = (patch) => setEditor((e) => (e ? { ...e, ...patch } : e));
-    return (_jsxs("div", { className: "contactsview", children: [_jsxs("div", { className: "contacts-bar", children: [_jsx("h2", { className: "workspace-title", children: "Contacts" }), _jsx("span", { className: "contacts-count", children: contacts.length }), _jsx("div", { className: "drive-bar-spacer" }), _jsx(Input, { className: "workspace-search", placeholder: "Search contacts & directory\u2026", value: contactsQuery, onChange: (e) => onSearch(e.target.value) }), _jsx(Button, { variant: "ghost", size: "sm", disabled: contactsBusy, onClick: exportContacts, children: "Export" }), _jsx(Button, { variant: "ghost", size: "sm", disabled: contactsBusy, onClick: () => fileRef.current?.click(), children: "Import" }), _jsx(Button, { variant: "ghost", size: "sm", disabled: contactsBusy, onClick: findContactDupes, children: "Find duplicates" }), _jsxs(Button, { variant: "primary", size: "sm", onClick: startCreate, children: [_jsx(Icon, { name: "person-add", size: 15 }), " Create"] }), _jsx(AccountSwitcher, {}), _jsx(Input, { ref: fileRef, type: "file", accept: ".vcf,.csv", style: { display: "none" }, onChange: (e) => {
+    return (_jsxs("div", { className: "contactsview", children: [_jsxs("div", { className: "contacts-bar", children: [_jsx("h2", { className: "workspace-title", children: "Contacts" }), _jsx("span", { className: "contacts-count", children: contacts.length }), _jsx("div", { className: "drive-bar-spacer" }), _jsx(Input, { className: "workspace-search", placeholder: "Search contacts & directory\u2026", value: contactsQuery, onChange: (e) => onSearch(e.target.value) }), _jsx(Button, { variant: "ghost", size: "sm", disabled: contactsBusy, onClick: exportContacts, children: "Export" }), _jsx(Button, { variant: "ghost", size: "sm", disabled: contactsBusy, onClick: () => fileRef.current?.click(), children: "Import" }), _jsx(Button, { variant: "ghost", size: "sm", disabled: contactsBusy, onClick: findContactDupes, children: "Find duplicates" }), _jsxs(Button, { variant: "primary", size: "sm", onClick: startCreate, children: [_jsx(Icon, { name: "person-add", size: 15 }), " Create"] }), _jsx(HostAccountSwitcher, {}), _jsx(Input, { ref: fileRef, type: "file", accept: ".vcf,.csv", style: { display: "none" }, onChange: (e) => {
                             const f = e.target.files?.[0];
                             if (f)
                                 importContactsFile(f);

package/dist/views/DriveFileMenu.d.ts

@@ -1,5 +1,5 @@
-import { useDrive } from "@rightkit/mail-ui/hooks/useDrive";
-import { type DriveFile } from "@rightkit/mail-ui/lib/ipc";
+import { useDrive } from "../hooks/useDrive.js";
+import type { DriveFile } from "../client.js";
 type DriveFileMenuProps = {
     f: DriveFile;
     anchor: Element;

package/dist/views/DriveFileMenu.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { ContextMenu } from "@rightkit/react-shell/react";
-import { openExternal } from "@rightkit/mail-ui/lib/ipc";
-import { useAppStore } from "@rightkit/mail-ui/store/index";
+import { useWorkspaceClient, useWorkspaceHost } from "../host.js";
 /** The per-file dropdown (preview/open/download/attach/rename/move/share/trash). */
 export function DriveFileMenu({ f, anchor, onClose, onPreview, drive, onMove, onShare }) {
-    const setErr = useAppStore((s) => s.setErr);
+    const { openExternal } = useWorkspaceClient();
+    const setErr = useWorkspaceHost().reportError;
     const items = useMemo(() => {
         const list = [];
         if (!f.is_folder)

package/dist/views/DrivePreviewModal.d.ts

@@ -1,5 +1,5 @@
-import { useDrive } from "@rightkit/mail-ui/hooks/useDrive";
-import { type DriveFile } from "@rightkit/mail-ui/lib/ipc";
+import { useDrive } from "../hooks/useDrive.js";
+import type { DriveFile } from "../client.js";
 type DrivePreviewModalProps = {
     drivePreview: DriveFile;
     setDrivePreview: (f: DriveFile | null) => void;

package/dist/views/DrivePreviewModal.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Dialog } from "@rightkit/react-shell/react";
-import Icon from "@rightkit/mail-ui/components/Icons";
-import { openExternal } from "@rightkit/mail-ui/lib/ipc";
+import { Icon } from "../icons.js";
 import { formatBytes } from "@rightkit/settings-ui/core";
-import { useAppStore } from "@rightkit/mail-ui/store/index";
 import { fileGlyph } from "./driveFileGlyph.js";
+import { useWorkspaceClient, useWorkspaceHost } from "../host.js";
 export function DrivePreviewModal({ drivePreview, setDrivePreview, drive }) {
-    const setErr = useAppStore((s) => s.setErr);
+    const { openExternal } = useWorkspaceClient();
+    const setErr = useWorkspaceHost().reportError;
     return (_jsxs(Dialog, { title: drivePreview.name, width: 520, onClose: () => setDrivePreview(null), children: [drivePreview.thumbnail_link ? (_jsx("img", { className: "dp-thumb", src: drivePreview.thumbnail_link, alt: "", onError: (e) => { e.currentTarget.style.display = "none"; } })) : (_jsxs("div", { className: "dp-noimg", children: [_jsx(Icon, { name: fileGlyph(drivePreview).icon, size: 48 }), _jsx("span", { className: "hint", children: "No preview available" })] })), _jsxs("div", { className: "dp-meta hint", children: [drivePreview.mime_type, drivePreview.size ? ` · ${formatBytes(Number(drivePreview.size))}` : "", drivePreview.modified_time ? ` · ${new Date(drivePreview.modified_time).toLocaleString()}` : ""] }), _jsxs("div", { className: "dp-actions", children: [drivePreview.web_view_link && (_jsx(Button, { variant: "primary", onClick: () => openExternal(drivePreview.web_view_link).catch((e) => setErr(String(e))), children: "Open in Drive" })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => drive.download(drivePreview), children: "Download" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => { drive.insertDriveLink(drivePreview); setDrivePreview(null); }, children: "Insert link in email" })] })] }));
 }

package/dist/views/DriveView.js

@@ -4,16 +4,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // cards with thumbnails or colored type tiles, each with a hover ⋮ menu.
 // Shelf nav + storage live in DriveNav; shared Drive logic in useDrive.
 import { memo, useEffect, useState } from "react";
-import Icon from "@rightkit/mail-ui/components/Icons";
-import { AccountSwitcher } from "@rightkit/mail-ui/components/AccountSwitcher";
+import { Icon } from "../icons.js";
 import { Button, Dialog, IconButton, Skeleton, SegmentedControl, Input, Select } from "@rightkit/react-shell/react";
-import { setPref } from "@rightkit/mail-ui/lib/preferences";
-import { useAppStore } from "@rightkit/mail-ui/store/index";
-import { useDrive, FOLDER_MIME } from "@rightkit/mail-ui/hooks/useDrive";
+import { useDrive, FOLDER_MIME } from "../hooks/useDrive.js";
 import { DriveFileMenu } from "./DriveFileMenu.js";
 import { DrivePreviewModal } from "./DrivePreviewModal.js";
 import { fileGlyph } from "./driveFileGlyph.js";
-import { listDriveFiles, driveStorageQuota, driveMove, driveShare, driveListPermissions, driveRevokePermission, } from "@rightkit/mail-ui/lib/ipc";
+import { HostAccountSwitcher, useWorkspaceClient, useWorkspaceHost, useWorkspaceState } from "../host.js";
 /** Native button that carries the keyboard/AT semantics of a file card or row;
  *  the mouse click is handled by the card itself. */
 const FILE_OPEN_STYLE = {
@@ -38,20 +35,22 @@ const SHELF_LABEL = {
 };
 function DriveViewInner() {
     const drive = useDrive();
-    const setErr = useAppStore((s) => s.setErr);
-    const showUndo = useAppStore((s) => s.showUndo);
-    const setDrivePath = useAppStore((s) => s.setDrivePath);
-    const setDriveQuery = useAppStore((s) => s.setDriveQuery);
-    const driveFiles = useAppStore((s) => s.driveFiles);
-    const setDriveFiles = useAppStore((s) => s.setDriveFiles);
-    const driveToken = useAppStore((s) => s.driveToken);
-    const setDriveToken = useAppStore((s) => s.setDriveToken);
-    const drivePreview = useAppStore((s) => s.drivePreview);
-    const setDrivePreview = useAppStore((s) => s.setDrivePreview);
-    const driveViewMode = useAppStore((s) => s.driveViewMode);
-    const setDriveViewMode = useAppStore((s) => s.setDriveViewMode);
-    const setDriveQuota = useAppStore((s) => s.setDriveQuota);
-    const driveBusy = useAppStore((s) => s.driveBusy);
+    const { listDriveFiles, driveStorageQuota, driveMove, driveShare, driveListPermissions, driveRevokePermission } = useWorkspaceClient();
+    const setPref = useWorkspaceHost().savePreference;
+    const setErr = useWorkspaceHost().reportError;
+    const showUndo = useWorkspaceHost().notify;
+    const setDrivePath = useWorkspaceState((s) => s.setDrivePath);
+    const setDriveQuery = useWorkspaceState((s) => s.setDriveQuery);
+    const driveFiles = useWorkspaceState((s) => s.driveFiles);
+    const setDriveFiles = useWorkspaceState((s) => s.setDriveFiles);
+    const driveToken = useWorkspaceState((s) => s.driveToken);
+    const setDriveToken = useWorkspaceState((s) => s.setDriveToken);
+    const drivePreview = useWorkspaceState((s) => s.drivePreview);
+    const setDrivePreview = useWorkspaceState((s) => s.setDrivePreview);
+    const driveViewMode = useWorkspaceState((s) => s.driveViewMode);
+    const setDriveViewMode = useWorkspaceState((s) => s.setDriveViewMode);
+    const setDriveQuota = useWorkspaceState((s) => s.setDriveQuota);
+    const driveBusy = useWorkspaceState((s) => s.driveBusy);
     const { activeAccount, driveShelf, drivePath, driveQuery, driveType } = drive;
     // Transient UI state: the open ⋮ menu, the move/share modals, drag-over state.
     const [menuFor, setMenuFor] = useState(null);
@@ -89,7 +88,7 @@ function DriveViewInner() {
         const oldParent = driveShelf === "my" ? drive.currentFolderId() ?? "root" : undefined;
         driveMove(activeAccount, moveFile.id, targetId, oldParent)
             .then(() => {
-            showUndo(`Moved to ${targetName}`, [], "");
+            showUndo(`Moved to ${targetName}`);
             setMoveFile(null);
             drive.refresh();
         })
@@ -110,7 +109,7 @@ function DriveViewInner() {
             return;
         driveShare(activeAccount, shareFile.id, shareEmail.trim(), shareRole)
             .then(() => {
-            showUndo(`Shared with ${shareEmail.trim()} (${shareRole})`, [], "");
+            showUndo(`Shared with ${shareEmail.trim()} (${shareRole})`);
             setShareEmail("");
             driveListPermissions(activeAccount, shareFile.id).then(setPerms).catch(() => { });
         })
@@ -122,7 +121,7 @@ function DriveViewInner() {
         driveRevokePermission(activeAccount, shareFile.id, permId)
             .then(() => {
             setPerms((prev) => prev.filter((p) => p.id !== permId));
-            showUndo("Access removed", [], "");
+            showUndo("Access removed");
         })
             .catch((e) => setErr(String(e)));
     }
@@ -148,7 +147,7 @@ function DriveViewInner() {
                         ], onChange: drive.setTypeFilter }), _jsx("div", { className: "drive-toggle", children: _jsx(SegmentedControl, { label: "Drive view", value: driveViewMode, options: [
                                 { value: "list", label: _jsx(Icon, { name: "list", size: 18 }), title: "List view" },
                                 { value: "grid", label: _jsx(Icon, { name: "grid", size: 18 }), title: "Grid view" },
-                            ], onChange: (m) => { setDriveViewMode(m); setPref("driveViewMode", m); } }) }), _jsx(AccountSwitcher, {})] }), _jsxs("div", { className: `drive-scroll ${dragOver ? "drag-over" : ""}`, onDragOver: (e) => { e.preventDefault(); if (!dragOver)
+                            ], onChange: (m) => { setDriveViewMode(m); setPref("driveViewMode", m); } }) }), _jsx(HostAccountSwitcher, {})] }), _jsxs("div", { className: `drive-scroll ${dragOver ? "drag-over" : ""}`, onDragOver: (e) => { e.preventDefault(); if (!dragOver)
                     setDragOver(true); }, onDragLeave: (e) => { if (e.currentTarget === e.target)
                     setDragOver(false); }, onDrop: (e) => {
                     e.preventDefault();