@rightkit/workspace-ui 0.0.0-stage → 0.2.0

package/dist/views/TasksView.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Tasks view (Google Tasks). Extracted from App.tsx (M5) — a prop-less,
+// memoized component that reads its state from the host state and owns its handlers
+// + load-on-mount, so it re-renders only when its own slices change.
+import { memo, useEffect } from "react";
+import { Icon } from "../icons.js";
+import { Button, IconButton, SkeletonRows, Input, Select, Checkbox } from "@rightkit/react-shell/react";
+import { useWorkspaceClient, useWorkspaceHost, useWorkspaceState } from "../host.js";
+function TasksViewInner() {
+    const { listTasks, listTaskLists, createTaskList, renameTaskList, deleteTaskList, clearCompletedTasks, setTaskStatus, createTaskIn, deleteTask } = useWorkspaceClient();
+    const showDialog = useWorkspaceHost().dialog;
+    const activeAccount = useWorkspaceState((s) => s.activeAccount);
+    const setErr = useWorkspaceHost().reportError;
+    const showUndo = useWorkspaceHost().notify;
+    const gtasks = useWorkspaceState((s) => s.gtasks);
+    const setGtasks = useWorkspaceState((s) => s.setGtasks);
+    const taskLists = useWorkspaceState((s) => s.taskLists);
+    const setTaskLists = useWorkspaceState((s) => s.setTaskLists);
+    const taskListId = useWorkspaceState((s) => s.taskListId);
+    const setTaskListId = useWorkspaceState((s) => s.setTaskListId);
+    const taskDue = useWorkspaceState((s) => s.taskDue);
+    const setTaskDue = useWorkspaceState((s) => s.setTaskDue);
+    const showCompletedTasks = useWorkspaceState((s) => s.showCompletedTasks);
+    const setShowCompletedTasks = useWorkspaceState((s) => s.setShowCompletedTasks);
+    const listMgrOpen = useWorkspaceState((s) => s.listMgrOpen);
+    const setListMgrOpen = useWorkspaceState((s) => s.setListMgrOpen);
+    const taskFormOpen = useWorkspaceState((s) => s.taskFormOpen);
+    const setTaskFormOpen = useWorkspaceState((s) => s.setTaskFormOpen);
+    const taskCreate = useWorkspaceState((s) => s.taskCreate);
+    const setTaskCreate = useWorkspaceState((s) => s.setTaskCreate);
+    const tasksBusy = useWorkspaceState((s) => s.tasksBusy);
+    const setTasksBusy = useWorkspaceState((s) => s.setTasksBusy);
+    async function reloadTasks(showCompleted = showCompletedTasks) {
+        if (!activeAccount)
+            return;
+        try {
+            setGtasks(await listTasks(activeAccount, showCompleted));
+        }
+        catch (e) {
+            setErr(String(e));
+        }
+    }
+    /** Create / rename / delete task lists (Tasks list manager). */
+    async function newTaskList() {
+        if (!activeAccount)
+            return;
+        const title = await showDialog({ kind: "prompt", message: "New list name" });
+        if (!title || !title.trim())
+            return;
+        try {
+            await createTaskList(activeAccount, title.trim());
+            setTaskLists(await listTaskLists(activeAccount));
+            showUndo("List created");
+        }
+        catch (e) {
+            setErr(String(e));
+        }
+    }
+    async function renameTaskListRow(l) {
+        if (!activeAccount)
+            return;
+        const title = await showDialog({ kind: "prompt", message: "Rename list", initial: l.title });
+        if (!title || !title.trim() || title.trim() === l.title)
+            return;
+        try {
+            await renameTaskList(activeAccount, l.id, title.trim());
+            setTaskLists(await listTaskLists(activeAccount));
+            reloadTasks();
+        }
+        catch (e) {
+            setErr(String(e));
+        }
+    }
+    async function deleteTaskListRow(l) {
+        if (!activeAccount)
+            return;
+        if ((await showDialog({ kind: "confirm", message: `Delete the list "${l.title}" and all its tasks? This cannot be undone.` })) !== "ok")
+            return;
+        try {
+            await deleteTaskList(activeAccount, l.id);
+            setTaskLists(await listTaskLists(activeAccount));
+            reloadTasks();
+            showUndo("List deleted");
+        }
+        catch (e) {
+            setErr(String(e));
+        }
+    }
+    async function clearCompletedRow(l) {
+        if (!activeAccount)
+            return;
+        try {
+            await clearCompletedTasks(activeAccount, l.id);
+            reloadTasks();
+            showUndo(`Cleared completed in ${l.title}`);
+        }
+        catch (e) {
+            setErr(String(e));
+        }
+    }
+    function toggleTask(t) {
+        if (!activeAccount)
+            return;
+        const done = t.status === "completed";
+        setGtasks((prev) => prev.map((x) => (x.id === t.id ? { ...x, status: done ? "needsAction" : "completed" } : x)));
+        setTaskStatus(activeAccount, t.list_id, t.id, !done).catch((e) => setErr(String(e)));
+    }
+    function deleteTaskRow(t) {
+        if (!activeAccount)
+            return;
+        deleteTask(activeAccount, t.list_id, t.id)
+            .then(() => setGtasks((prev) => prev.filter((x) => x.id !== t.id)))
+            .catch((e) => setErr(String(e)));
+    }
+    async function submitTask() {
+        if (!activeAccount || !taskCreate.title.trim()) {
+            setErr("Task needs a title.");
+            return;
+        }
+        const list = taskListId || taskLists[0]?.id || "@default";
+        const due = taskDue ? new Date(taskDue).toISOString() : "";
+        try {
+            await createTaskIn(activeAccount, list, taskCreate.title, taskCreate.notes, due);
+            setTaskFormOpen(false);
+            setTaskCreate({ title: "", notes: "" });
+            setTaskDue("");
+            await reloadTasks();
+        }
+        catch (e) {
+            setErr(String(e));
+        }
+    }
+    // Load lists + tasks on mount / account change (was the `view === "tasks"`
+    // branch of App's workspace effect).
+    useEffect(() => {
+        setTaskFormOpen(false);
+        if (!activeAccount)
+            return;
+        setTasksBusy(true);
+        listTaskLists(activeAccount).then(setTaskLists).catch(() => { });
+        listTasks(activeAccount)
+            .then(setGtasks)
+            .catch((e) => setErr(String(e)))
+            .finally(() => setTasksBusy(false));
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- setTaskFormOpen/setTasksBusy/setGtasks/setErr are store setters with unstable identity; tracking them would reload task lists on every render instead of only on account change.
+    }, [activeAccount]);
+    return (_jsxs("div", { className: "ws-panel", children: [_jsxs("div", { className: "ws-head", children: [_jsx("h2", { children: "Tasks" }), _jsx("div", { className: "ws-inline-toggle", title: "Include completed tasks", children: _jsx(Checkbox, { label: "Show completed", checked: showCompletedTasks, onChange: (on) => {
+                                setShowCompletedTasks(on);
+                                reloadTasks(on);
+                            } }) }), _jsx(Button, { variant: "secondary", size: "sm", onClick: () => setListMgrOpen((o) => !o), children: "Lists" }), _jsx(Button, { variant: "secondary", size: "sm", onClick: () => {
+                            setTaskCreate({ title: "", notes: "" });
+                            setTaskDue("");
+                            setTaskFormOpen((o) => !o);
+                        }, children: "+ New task" })] }), listMgrOpen && (_jsxs("div", { className: "ws-form list-mgr", children: [_jsxs("div", { className: "list-mgr-head", children: [_jsx("span", { children: "Task lists" }), _jsx(Button, { variant: "primary", size: "sm", onClick: newTaskList, children: "+ New list" })] }), taskLists.map((l) => (_jsxs("div", { className: "list-mgr-row", children: [_jsx("span", { className: "ws-title", children: l.title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => clearCompletedRow(l), children: "Clear completed" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => renameTaskListRow(l), children: "Rename" }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => deleteTaskListRow(l), children: "Delete" })] }, l.id))), taskLists.length === 0 && _jsx("p", { className: "hint", children: "No lists yet." })] })), taskFormOpen && (_jsxs("div", { className: "ws-form", children: [_jsx(Input, { placeholder: "Task title", value: taskCreate.title, onChange: (e) => setTaskCreate({ ...taskCreate, title: e.target.value }) }), _jsx("textarea", { placeholder: "Notes (optional)", value: taskCreate.notes, onChange: (e) => setTaskCreate({ ...taskCreate, notes: e.target.value }) }), _jsxs("label", { className: "ws-form-row", children: [_jsx("span", { children: "Due" }), _jsx(Input, { type: "date", value: taskDue, onChange: (e) => setTaskDue(e.target.value) })] }), taskLists.length > 1 && (_jsx(Select, { label: "Task list", value: taskListId || taskLists[0]?.id || "", options: taskLists.map((l) => ({ value: l.id, label: l.title })), onChange: setTaskListId })), _jsxs("div", { className: "ws-form-foot", children: [_jsx(Button, { variant: "primary", onClick: submitTask, children: "Create" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setTaskFormOpen(false), children: "Cancel" })] })] })), tasksBusy ? (_jsx(SkeletonRows, {})) : gtasks.length === 0 ? (_jsx("p", { className: "hint", children: "No open tasks." })) : (_jsx("div", { className: "ws-list", children: gtasks.map((t) => (_jsxs("div", { className: "ws-row task-row", children: [_jsx(Checkbox, { label: _jsx("span", { className: "sr-only", children: "Complete" }), checked: t.status === "completed", onChange: () => toggleTask(t) }), _jsx("span", { className: `ws-title ${t.status === "completed" ? "task-done" : ""}`, children: t.title || "(untitled)" }), _jsxs("span", { className: "ws-sub", children: [t.list_title, t.due ? ` · due ${t.due.slice(0, 10)}` : ""] }), _jsx(IconButton, { label: "Delete task", onClick: () => deleteTaskRow(t), children: _jsx(Icon, { name: "trash", size: 14 }) })] }, t.id))) }))] }));
+}
+export const TasksView = memo(TasksViewInner);

package/dist/views/driveFileGlyph.d.ts

@@ -0,0 +1,7 @@
+import type { DriveFile } from "../client.js";
+import type { WorkspaceIconName } from "../icons.js";
+/** File-type to recognizable glyph plus Google's semantic color, or null for themed. */
+export declare function fileGlyph(f: DriveFile): {
+    icon: WorkspaceIconName;
+    color: string | null;
+};

package/dist/views/driveFileGlyph.js

@@ -0,0 +1,19 @@
+/** File-type to recognizable glyph plus Google's semantic color, or null for themed. */
+export function fileGlyph(f) {
+    if (f.is_folder)
+        return { icon: "folder", color: null };
+    const m = f.mime_type;
+    if (m.includes("application/vnd.google-apps.document"))
+        return { icon: "doc", color: "#4285F4" };
+    if (m.includes("spreadsheet"))
+        return { icon: "doc", color: "#0F9D58" };
+    if (m.includes("presentation"))
+        return { icon: "doc", color: "#F4B400" };
+    if (m === "application/pdf")
+        return { icon: "doc", color: "#DB4437" };
+    if (m.startsWith("image/"))
+        return { icon: "image", color: null };
+    if (m.startsWith("video/"))
+        return { icon: "video", color: null };
+    return { icon: "draft", color: null };
+}

package/dist/views/nav/CalendarNav.d.ts

@@ -0,0 +1 @@
+export declare function CalendarNav(): import("react").JSX.Element;

package/dist/views/nav/CalendarNav.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Calendar's contextual sidebar: Create + a mini-month date picker + a "My
+// calendars" toggle list. Mirrors calendar.google.com's left rail. The mini
+// month drives the main grid's date cursor; the toggles drive which calendars
+// overlay via the shared host state.
+import { Button, IconButton, NavList } from "@rightkit/react-shell/react";
+import { Icon } from "../../icons.js";
+import { DAY, startOfDay } from "../../lib/calendarUtils.js";
+import { useState } from "react";
+import { useWorkspaceHost, useWorkspaceState } from "../../host.js";
+const ALL_ID = "__all";
+const DOW = ["S", "M", "T", "W", "T", "F", "S"];
+function MiniMonth() {
+    const calCursor = useWorkspaceState((s) => s.calCursor);
+    const setCalCursor = useWorkspaceState((s) => s.setCalCursor);
+    const d = new Date(calCursor);
+    const first = new Date(d.getFullYear(), d.getMonth(), 1);
+    const gridStart = first.getTime() - first.getDay() * DAY;
+    const [today] = useState(() => startOfDay(Date.now()));
+    const cursorDay = startOfDay(calCursor);
+    const month = d.getMonth();
+    function shiftMonth(dir) {
+        setCalCursor(new Date(d.getFullYear(), d.getMonth() + dir, Math.min(d.getDate(), 28)).getTime());
+    }
+    return (_jsxs("div", { className: "mini-month", children: [_jsxs("div", { className: "mini-head", children: [_jsx("span", { className: "mini-label", children: d.toLocaleDateString([], { month: "long", year: "numeric" }) }), _jsxs("div", { className: "mini-nav", children: [_jsx(IconButton, { label: "Previous month", className: "mini-arrow", title: "Previous month", onClick: () => shiftMonth(-1), children: _jsx(Icon, { name: "chevron-left", size: 15 }) }), _jsx(IconButton, { label: "Next month", className: "mini-arrow", title: "Next month", onClick: () => shiftMonth(1), children: _jsx(Icon, { name: "chevron-right", size: 15 }) })] })] }), _jsx("div", { className: "mini-dow", children: DOW.map((w, i) => _jsx("span", { children: w }, i)) }), _jsx("div", { className: "mini-grid", children: Array.from({ length: 42 }, (_, i) => {
+                    const ms = gridStart + i * DAY;
+                    const cell = new Date(ms);
+                    const cls = [
+                        "mini-day",
+                        cell.getMonth() === month ? "" : "out",
+                        ms === today ? "today" : "",
+                        ms === cursorDay ? "sel" : "",
+                    ].filter(Boolean).join(" ");
+                    return (_jsx(Button, { variant: "ghost", className: cls, onClick: () => setCalCursor(ms), children: cell.getDate() }, i));
+                }) })] }));
+}
+export function CalendarNav() {
+    const setPref = useWorkspaceHost().savePreference;
+    const calendars = useWorkspaceState((s) => s.calendars);
+    const selectedCal = useWorkspaceState((s) => s.selectedCal);
+    const shownCals = useWorkspaceState((s) => s.shownCals);
+    const setShownCals = useWorkspaceState((s) => s.setShownCals);
+    const setEventSeed = useWorkspaceState((s) => s.setEventSeed);
+    const allIds = calendars.map((c) => c.id);
+    const allShown = calendars.length > 0 && shownCals.length === calendars.length;
+    function persist(next) {
+        setShownCals(next);
+        setPref("shownCals", next);
+    }
+    /** Checkbox: add/remove one calendar from the overlay set (fine multi-select). */
+    function toggle(calId) {
+        setShownCals((prev) => {
+            const next = prev.includes(calId) ? prev.filter((c) => c !== calId) : [...prev, calId];
+            setPref("shownCals", next);
+            return next;
+        });
+    }
+    /** Row click: show only this calendar (like clicking a single inbox in Mail). */
+    function solo(calId) {
+        persist([calId]);
+    }
+    /** "All calendars": combine every calendar into one view (like All inboxes). */
+    function showAll() {
+        persist(allIds);
+    }
+    const calendarGroups = [
+        {
+            items: [
+                {
+                    id: ALL_ID,
+                    label: "All calendars",
+                    ariaLabel: "Combine all calendars into one view",
+                    icon: _jsx("span", { className: "cal-swatch cal-swatch-all" }),
+                },
+                ...calendars.map((c) => ({
+                    id: c.id,
+                    label: c.summary,
+                    ariaLabel: `Show only ${c.summary}`,
+                    icon: _jsx("span", { className: "cal-swatch", style: { background: c.background_color || "var(--copper)" } }),
+                })),
+            ],
+        },
+    ];
+    return (_jsxs("div", { className: "appnav", children: [_jsxs(Button, { variant: "primary", className: "nav-new", title: "Create event", onClick: () => setEventSeed({ summary: "", withMeet: false }), children: [_jsx(Icon, { name: "plus", size: 20 }), _jsx("span", { children: "Create" })] }), _jsx(MiniMonth, {}), _jsx("div", { className: "labels-head", children: _jsx("span", { children: "My calendars" }) }), calendars.length === 0 ? (_jsx("p", { className: "hint nav-hint", children: "No calendars yet." })) : (_jsx(NavList, { label: "My calendars", groups: calendarGroups, activeId: allShown ? ALL_ID : shownCals.length === 1 ? shownCals[0] : "", onNavigate: (id) => (id === ALL_ID ? showAll() : solo(id)), itemCheck: (item) => {
+                    const c = calendars.find((x) => x.id === item.id);
+                    if (!c)
+                        return undefined;
+                    return {
+                        checked: shownCals.length ? shownCals.includes(c.id) : c.id === selectedCal,
+                        onChange: () => toggle(c.id),
+                    };
+                } }))] }));
+}

package/dist/views/nav/ContactsNav.d.ts

@@ -0,0 +1 @@
+export declare function ContactsNav(): import("react").JSX.Element;

package/dist/views/nav/ContactsNav.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Contacts' contextual sidebar (interim): Contacts/groups nav. The list, detail
+// and CRUD live in ContactsView for now; Phase 3 lifts those into a shared hook
+// and fills this nav with Create + import/export. Kept minimal so the column
+// reads as intentional rather than empty.
+import { useEffect } from "react";
+import { NavList } from "@rightkit/react-shell/react";
+import { Icon } from "../../icons.js";
+import { useWorkspaceClient, useWorkspaceState } from "../../host.js";
+export function ContactsNav() {
+    const { listContactGroups } = useWorkspaceClient();
+    const activeAccount = useWorkspaceState((s) => s.activeAccount);
+    const contactGroups = useWorkspaceState((s) => s.contactGroups);
+    const setContactGroups = useWorkspaceState((s) => s.setContactGroups);
+    useEffect(() => {
+        if (!activeAccount)
+            return;
+        listContactGroups(activeAccount).then(setContactGroups).catch(() => setContactGroups([]));
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- setContactGroups is a store setter with unstable identity; tracking it would refetch contact groups on every render instead of only on account change.
+    }, [activeAccount]);
+    return (_jsxs("div", { className: "appnav", children: [_jsx(NavList, { label: "Contacts", groups: [{ items: [{ id: "contacts", label: "Contacts", ariaLabel: "Contacts", icon: _jsx(Icon, { name: "people", size: 18, className: "f-ic" }) }] }], activeId: "contacts", onNavigate: () => { }, itemProps: (_item, { active }) => ({ className: `nav-shelf${active ? " active" : ""}` }) }), contactGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "labels-head", children: _jsx("span", { children: "Labels" }) }), _jsx("div", { className: "nav-shelves", children: contactGroups.map((g) => (_jsxs("div", { className: "nav-shelf", title: g.name, children: [_jsx(Icon, { name: "tag", size: 16, className: "f-ic" }), _jsx("span", { className: "f-name", children: g.name }), g.member_count > 0 && _jsx("span", { className: "badge", children: g.member_count })] }, g.resource_name))) })] })), _jsx("p", { className: "hint nav-hint", children: "Search, import/export and dedupe are in the panel." })] }));
+}

package/dist/views/nav/DriveNav.d.ts

@@ -0,0 +1 @@
+export declare function DriveNav(): import("react").JSX.Element;

package/dist/views/nav/DriveNav.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Drive's contextual sidebar: the "New" button + shelf nav (My Drive / Shared /
+// Recent / Starred / Trash) + storage meter. Mirrors drive.google.com's left
+// rail. Shares Drive state with the file grid via useDrive, so picking a shelf
+// here re-lists the grid.
+import { useRef, useState } from "react";
+import { Button, ContextMenu, NavList, Input } from "@rightkit/react-shell/react";
+import { Icon } from "../../icons.js";
+import { formatBytes } from "@rightkit/settings-ui/core";
+import { useDrive } from "../../hooks/useDrive.js";
+import { useWorkspaceState } from "../../host.js";
+const SHELVES = [
+    { key: "my", label: "My Drive", icon: "drive" },
+    { key: "shared", label: "Shared with me", icon: "people" },
+    { key: "recent", label: "Recent", icon: "clock" },
+    { key: "starred", label: "Starred", icon: "star" },
+    { key: "trash", label: "Trash", icon: "trash" },
+];
+export function DriveNav() {
+    const drive = useDrive();
+    const quota = useWorkspaceState((s) => s.driveQuota);
+    const [newAnchor, setNewAnchor] = useState(null);
+    const fileRef = useRef(null);
+    const used = quota ? Number(quota.usage) : 0;
+    const limit = quota && quota.limit ? Number(quota.limit) : 0;
+    const pct = limit > 0 ? Math.min(100, Math.round((used / limit) * 100)) : 0;
+    return (_jsxs("div", { className: "appnav", children: [_jsxs("div", { className: "nav-new-wrap", children: [_jsxs(Button, { variant: "primary", className: "nav-new", onClick: (e) => setNewAnchor((a) => (a ? null : e.currentTarget)), title: "New", children: [_jsx(Icon, { name: "plus", size: 20 }), _jsx("span", { children: "New" })] }), newAnchor && (_jsx(ContextMenu, { anchor: newAnchor, placement: "bottom-start", label: "New", showLead: true, onClose: () => setNewAnchor(null), items: [
+                            { id: "folder", label: "New folder", icon: _jsx(Icon, { name: "folder", size: 15 }), run: () => drive.newFolder() },
+                            { id: "upload", label: "Upload files", icon: _jsx(Icon, { name: "upload", size: 15 }), run: () => fileRef.current?.click() },
+                        ] })), _jsx(Input, { ref: fileRef, type: "file", multiple: true, style: { display: "none" }, onChange: (e) => {
+                            if (e.target.files && e.target.files.length)
+                                drive.upload(e.target.files);
+                            e.target.value = "";
+                        } })] }), _jsx(NavList, { label: "Drive shelves", groups: [
+                    {
+                        items: SHELVES.map((s) => ({
+                            id: s.key,
+                            label: s.label,
+                            ariaLabel: s.label,
+                            icon: _jsx(Icon, { name: s.icon, size: 18, className: "f-ic" }),
+                        })),
+                    },
+                ], activeId: drive.driveShelf, onNavigate: (id) => drive.selectShelf(id), itemProps: (_item, { active }) => ({ className: `nav-shelf${active ? " active" : ""}` }) }), quota && (_jsxs("div", { className: "nav-storage", children: [_jsx("div", { className: "storage-bar", children: _jsx("span", { className: "storage-fill", style: { width: `${pct}%` } }) }), _jsxs("div", { className: "storage-text", children: [formatBytes(used), " ", limit > 0 ? `of ${formatBytes(limit)} used` : "used"] })] }))] }));
+}

package/dist/views/nav/TasksNav.d.ts

@@ -0,0 +1 @@
+export declare function TasksNav(): import("react").JSX.Element;

package/dist/views/nav/TasksNav.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Tasks' contextual sidebar (interim): the task-list picker. The task items +
+// add/complete live in TasksView; this nav just switches the active list via the
+// shared host state.
+import { NavList } from "@rightkit/react-shell/react";
+import { Icon } from "../../icons.js";
+import { useWorkspaceState } from "../../host.js";
+export function TasksNav() {
+    const taskLists = useWorkspaceState((s) => s.taskLists);
+    const taskListId = useWorkspaceState((s) => s.taskListId);
+    const setTaskListId = useWorkspaceState((s) => s.setTaskListId);
+    return (_jsxs("div", { className: "appnav", children: [_jsx("div", { className: "labels-head", children: _jsx("span", { children: "Lists" }) }), taskLists.length === 0 ? (_jsx("p", { className: "hint nav-hint", children: "No task lists yet." })) : (_jsx(NavList, { label: "Task lists", groups: [
+                    {
+                        items: taskLists.map((l) => ({
+                            id: l.id,
+                            label: l.title,
+                            ariaLabel: l.title,
+                            icon: _jsx(Icon, { name: "check", size: 17, className: "f-ic" }),
+                        })),
+                    },
+                ], activeId: taskListId ?? "", onNavigate: setTaskListId, itemProps: (_item, { active }) => ({ className: `nav-shelf${active ? " active" : ""}` }) }))] }));
+}

package/package.json

@@ -1,6 +1,73 @@
 {
   "name": "@rightkit/workspace-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Calendar, contacts, drive, tasks and meeting views and their navs, over a typed workspace client and state the host supplies.",
+  "license": "MIT OR Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js"
+    },
+    "./host": {
+      "types": "./dist/host.d.ts",
+      "import": "./dist/host.js"
+    },
+    "./lib/avatar": {
+      "types": "./dist/lib/avatar.d.ts",
+      "import": "./dist/lib/avatar.js"
+    },
+    "./lib/calendarUtils": {
+      "types": "./dist/lib/calendarUtils.d.ts",
+      "import": "./dist/lib/calendarUtils.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE-MIT",
+    "LICENSE-APACHE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@rightkit/react-shell": "^0.7.3",
+    "@rightkit/settings-ui": "^0.7.1",
+    "lucide-react": "^1.57.0"
+  },
+  "peerDependencies": {
+    "react": ">=18 <21"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tsx": "^4.23.15",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bogusyogi/rightkit.git",
+    "directory": "packages/workspace-ui"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/copy-assets.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
 }