Tools

1import { useRouter } from '@rchursin/product/lib/router'2import type { KitSlug } from '@rchursin/product/shell/pages'3import { TasksApp } from '@rchursin/product/tasks'4
5/** The window's tool links go to each tool's page in this Library (Today has none, so it shows as text) */6const toolPages: Partial<Record<KitSlug, string>> = {7  tasks: '/library/tools/tasks-app',8  calendar: '/library/tools/calendar-app',9  timer: '/library/tools/timer-app',10  notes: '/library/tools/notes-app',11}12
13/**14 * The whole tracker on sample data. Click into the list, then try J and K, X to select,15 * S for status, Ctrl+B (⌘B) for the board, or ? for every shortcut.16 * Changes save to this browser; "Reset sample data" brings the twelve tasks back.17 */18export default function TasksAppExample() {19  const { href } = useRouter()20  const hrefFor = (slug: KitSlug) => {21    const path = toolPages[slug]22    return path && href(path)23  }24  return <TasksApp hrefFor={hrefFor} />25}

1import { useState } from 'react'2import { sampleTasks } from '@rchursin/product/data/sample'3import { DEFAULT_PREFS, groupTasks, labelIndex, PickerHost, TaskGrid, usePick, type ActiveCell, type PickChange, type Task } from '@rchursin/product/tasks'4import { useToast } from '@rchursin/product/ui'5
6/** A fixed day, so the due dates read the same on every visit */7const NOW = new Date(2026, 9, 13, 9, 30)8const labels = labelIndex([])9
10/** Apply a picker change to the local list */11function apply(tasks: Task[], ids: string[], change: PickChange): Task[] {12  return tasks.map((t) => {13    if (!ids.includes(t.id)) return t14    if (change.kind === 'labels') return { ...t, labels: [...t.labels.filter((l) => !change.remove.includes(l)), ...change.add.filter((l) => !t.labels.includes(l))] }15    return { ...t, [change.kind]: change.value }16  })17}18
19/**20 * The list on its own copy of the sample tasks. One Tab stop: arrows or J and K move,

1import { useState } from 'react'2import type { StatusId } from '@rchursin/product/data/sample'3import { CreateTaskDialog, DEFAULT_PREFS, labelIndex, TaskBoard, useTaskActions, useTaskState } from '@rchursin/product/tasks'4import { useToast } from '@rchursin/product/ui'5
6/**7 * The board on the shared task store (the same saved tasks as the Tasks app), so every move8 * gets a toast with Undo. Drag a card, use its grip with Space and the arrows, or its “…” menu.9 */10export default function TaskBoardExample() {11  const { tasks, labels } = useTaskState()12  const actions = useTaskActions()13  const toast = useToast()14  const [active, setActive] = useState<string | null>(null)15  const [selected, setSelected] = useState<ReadonlySet<string>>(() => new Set())16  const [createIn, setCreateIn] = useState<StatusId | null>(null)17  const now = new Date()18
19  function toggle(id: string) {20    const next = new Set(selected)

1import { useRef, useState } from 'react'2import { labelIndex, StorePickerHost, taskStore, TaskDetail, useTaskActions, useTaskState } from '@rchursin/product/tasks'3import { Button } from '@rchursin/product/ui'4
5/**6 * The side panel the Tasks app shows next to a wide list, on the shared task store.7 * Edit the title or description (they save when you leave the field), change a property,8 * or step through tasks with the arrows in its header. Esc closes it.9 */10export default function TaskDetailPanel() {11  return (12    <StorePickerHost>13      <Panel />14    </StorePickerHost>15  )16}17
18function Panel() {19  const { tasks, labels: custom } = useTaskState()20  // The sample labels plus any the visitor created

1import { useState } from 'react'2import { CreateTaskDialog, StatusIcon, useTaskState } from '@rchursin/product/tasks'3import { Button } from '@rchursin/product/ui'4
5const number = (id: string) => Number(id.split('-')[1]) || 06
7/**8 * Creates a real task in the shared sample workspace (with Undo in the toast). Only the title9 * is required. Esc keeps what you typed as a draft; Ctrl+Enter (⌘Enter) creates.10 */11export default function CreateTaskExample() {12  const { tasks } = useTaskState()13  const [open, setOpen] = useState(false)14  const newest = [...tasks].sort((a, b) => number(b.id) - number(a.id)).slice(0, 3)15
16  return (17    <div className="flex w-full max-w-sm flex-col gap-5">18      <Button icon="plus" className="self-start" onClick={() => setOpen(true)}>19        New task20      </Button>21      <div className="flex flex-col gap-2">22        <p className="font-mono text-[11px] tracking-[0.12em] text-fg-3 uppercase">Newest in the sample workspace</p>23        <ul className="flex flex-col">24          {newest.map((t) => (25            <li key={t.id} className="flex h-9 min-w-0 items-center gap-2 border-b border-line text-[13px] last:border-0">26              <StatusIcon status={t.status} />27              <span className="w-12 shrink-0 font-mono text-[11px] text-fg-3 tabular-nums">{t.id}</span>28              <span className="truncate text-fg">{t.title}</span>29            </li>30          ))}31        </ul>32      </div>33      <CreateTaskDialog open={open} onClose={() => setOpen(false)} draftKey="tasks:draft-docs" />34    </div>35  )36}

1import { useRef, useState } from 'react'2import { sampleTasks } from '@rchursin/product/data/sample'3import { AssigneeAvatar, BulkBar, labelIndex, PickerHost, PriorityIcon, StatusIcon, usePick, type PickChange, type Task } from '@rchursin/product/tasks'4import { Button } from '@rchursin/product/ui'5
6const NOW = new Date(2026, 9, 13, 9, 30)7const IDS = ['RC-127', 'RC-123', 'RC-118']8const labels = labelIndex([])9const fresh = () => sampleTasks(NOW).filter((t) => IDS.includes(t.id))10
11/** Apply a picker change to every selected task */12function apply(tasks: Task[], ids: string[], change: PickChange): Task[] {13  return tasks.map((t) => {14    if (!ids.includes(t.id)) return t15    if (change.kind === 'labels') return { ...t, labels: [...t.labels.filter((l) => !change.remove.includes(l)), ...change.add.filter((l) => !t.labels.includes(l))] }16    return { ...t, [change.kind]: change.value }17  })18}19
20/** Three selected tasks on their own copy of the sample data. Each button changes all three at once. */

1import { useRef, useState } from 'react'2import { sampleTasks } from '@rchursin/product/data/sample'3import { FilterBar, labelIndex, matchesFilters, NO_FILTERS, PriorityIcon, StatusIcon, type Filters } from '@rchursin/product/tasks'4
5const NOW = new Date(2026, 9, 13, 9, 30)6const tasks = sampleTasks(NOW)7const labels = labelIndex([])8
9/**10 * Search and quick filters over the twelve sample tasks, starting with Urgent and High.11 * Esc clears the search, then hands focus to the results.12 */13export default function FilterBarExample() {14  const [filters, setFilters] = useState<Filters>({ ...NO_FILTERS, priorities: [1, 2] })15  const search = useRef<HTMLInputElement>(null)16  const results = useRef<HTMLUListElement>(null)17  const matches = tasks.filter((t) => matchesFilters(t, filters, labels.name))18
19  return (20    <div className="w-full overflow-hidden rounded-xl bg-surface ring-1 ring-line">

1import { useRouter } from '@rchursin/product/lib/router'2import { TasksTodayWidget } from '@rchursin/product/tasks'3
4/**5 * The widget brings no card of its own: the dashboard around it does. It reads the shared6 * task store, so ticking a task here marks it done in the Tasks app too (with Undo).7 * href sends “Open Tasks” to your own page; here, the tool’s page in this Library.8 */9export default function TasksWidgetExample() {10  const { href } = useRouter()11  return (12    <div className="lux-card w-full max-w-sm rounded-2xl bg-raised p-5">13      <TasksTodayWidget href={href('/library/tools/tasks-app')} />14    </div>15  )16}

1import { CalendarApp } from '@rchursin/product/calendar'2import { useRouter } from '@rchursin/product/lib/router'3import type { KitSlug } from '@rchursin/product/shell/pages'4
5/** The window's tool links, and an event's linked task, go to each tool's page in this Library */6const toolPages: Partial<Record<KitSlug, string>> = {7  tasks: '/library/tools/tasks-app',8  calendar: '/library/tools/calendar-app',9  timer: '/library/tools/timer-app',10  notes: '/library/tools/notes-app',11}12
13/**14 * The whole calendar on this week's sample events. Click inside it, then press T for today,15 * ← → to move, M W D A for the views, N for a new event, or ? for the list.16 * Changes save to this browser; "Reset sample data" brings the sample week back.17 */18export default function CalendarAppExample() {19  const { href } = useRouter()20  const hrefFor = (slug: KitSlug) => {21    const path = toolPages[slug]22    return path && href(path)23  }24  return <CalendarApp hrefFor={hrefFor} />25}

1import { useState } from 'react'2import { sampleEvents, type CalendarEvent } from '@rchursin/product/data/sample'3import { TimeGrid } from '@rchursin/product/calendar'4import { formatDateRange, speakable } from '@rchursin/product/calendar/dates'5import { eventTime } from '@rchursin/product/calendar/events'6import { addDays, addMinutes, formatDay, startOfWeek } from '@rchursin/product/lib/dates'7import { Button, useToast } from '@rchursin/product/ui'8
9/** A fixed moment in the sample week, so the page reads the same on every visit */10const NOW = new Date(2026, 9, 13, 10, 40)11
12/**13 * A week on its own copy of the sample events. Click an empty slot to add an hour-long event14 * there (snapped to 15 minutes), or use the button; open an event from its block.15 */16export default function TimeGridWeek() {17  const toast = useToast()18  const [events, setEvents] = useState(() => sampleEvents(NOW))19  const days = Array.from({ length: 7 }, (_, i) => addDays(startOfWeek(NOW), i))20

1import { useState } from 'react'2import { sampleEvents, type CalendarEvent } from '@rchursin/product/data/sample'3import { AgendaList, MonthView } from '@rchursin/product/calendar'4import { eventTime } from '@rchursin/product/calendar/events'5import { addMonths, at, formatDayLong, formatMonth, startOfDay } from '@rchursin/product/lib/dates'6import { IconButton, useToast } from '@rchursin/product/ui'7
8/** A fixed day in the sample week, so the page reads the same on every visit */9const NOW = new Date(2026, 9, 13, 10, 40)10
11/**12 * The month on its own copy of the sample events. Arrows move between days, Enter opens a13 * day (its agenda shows below), Tab reaches a day’s events. Click empty space in a day to add one.14 */15export default function MonthViewExample() {16  const toast = useToast()17  const [cursor, setCursor] = useState(() => startOfDay(NOW))18  const [events, setEvents] = useState(() => sampleEvents(NOW))19  const [day, setDay] = useState<Date | null>(null)20  const title = formatMonth(cursor)

1import { AgendaWidget } from '@rchursin/product/calendar'2import { useRouter } from '@rchursin/product/lib/router'3
4/**5 * A mini month with event squares and the chosen day’s agenda. It reads the same saved events6 * as the Calendar app, so an event added there shows up here.7 * href sends “Open Calendar” to your own page; here, the tool’s page in this Library.8 */9export default function AgendaWidgetExample() {10  const { href } = useRouter()11  return (12    <div className="lux-card w-full max-w-[20rem] rounded-2xl bg-raised p-5">13      <AgendaWidget href={href('/library/tools/calendar-app')} />14    </div>15  )16}

1import { useRef, useState } from 'react'2import { sampleEvents } from '@rchursin/product/data/sample'3import { draftFromEvent, EventBlock, EventDetails, EventDialog, eventFromDraft, HOUR_PX } from '@rchursin/product/calendar'4import { Button, Popover, usePopover, useToast } from '@rchursin/product/ui'5
6/** “Weekly skill review” from the sample week */7const sample = sampleEvents(new Date(2026, 9, 13)).find((e) => e.id === 'e11')!8
9/**10 * The calendar’s flow on one event: open it for its details, then Edit opens the form and11 * Delete removes it (with Undo). Focus goes back to the event after each step.12 */13export default function EventDialogEdit() {14  const toast = useToast()15  const details = usePopover()16  const heading = useRef<HTMLHeadingElement>(null)17  const block = useRef<HTMLDivElement>(null)18  const undo = useRef<HTMLButtonElement>(null)19  const [event, setEvent] = useState(sample)20  const [editing, setEditing] = useState(false)

1import { useRouter } from '@rchursin/product/lib/router'2import type { KitSlug } from '@rchursin/product/shell/pages'3import { FocusProvider, TimerApp } from '@rchursin/product/timer'4
5/** The window's tool links go to each tool's page in this Library (Today has none, so it shows as text) */6const toolPages: Partial<Record<KitSlug, string>> = {7  tasks: '/library/tools/tasks-app',8  calendar: '/library/tools/calendar-app',9  timer: '/library/tools/timer-app',10  notes: '/library/tools/notes-app',11}12
13/**14 * The whole Focus screen on a page of its own, on sample data. TimerApp reads the session from the15 * FocusProvider above it. Click inside, then 1, 2 and 3 switch between Focus, Stopwatch and Countdown,16 * Space starts and pauses the one you are in, and F finishes a focus session.17 * Everything saves to this browser; "Reset sample data" puts it back.18 */19export default function TimerAppPage() {20  const { href } = useRouter()21  const hrefFor = (slug: KitSlug) => {22    const path = toolPages[slug]23    return path && href(path)24  }25  return (26    <main className="min-h-dvh bg-sunken/40 px-4 pt-6 pb-24 sm:px-8 sm:pt-10">27      <div className="mx-auto flex max-w-6xl flex-col gap-5">28        <header className="flex flex-col gap-1">29          <h1 className="text-xl font-semibold tracking-[-0.02em] text-balance">Timer</h1>30          <p className="text-[13px] text-pretty text-fg-3">A sample workspace. Everything you do here stays in this browser.</p>31        </header>32        {/* Keeps the outline in order: the app's own headings (the time log) are h3 */}33        <h2 className="sr-only">Focus screen</h2>34        <FocusProvider>35          <TimerApp hrefFor={hrefFor} />36        </FocusProvider>37      </div>38    </main>39  )40}

1import { SampleBadge } from '@rchursin/product/shell/layout'2import { FocusProvider, FocusSession } from '@rchursin/product/timer'3
4/**5 * Pick a task, say what you will get done, press Start. Click the background of the session first6 * and Space starts and pauses, F finishes and logs. This example keeps its own session7 * (storagePrefix), so it never shares a run with the Timer app.8 */9export default function FocusSessionExample() {10  return (11    <FocusProvider storagePrefix="library:focus-session">12      {/* isolate + overflow-hidden keep the soft halo behind the clock inside the frame */}13      <div className="relative isolate flex w-full flex-col items-center gap-6 overflow-hidden px-4 py-8 sm:px-8 sm:py-10">14        <SampleBadge />15        <FocusSession />16      </div>17    </FocusProvider>18  )19}

1import { useRouter } from '@rchursin/product/lib/router'2import { SampleBadge } from '@rchursin/product/shell/layout'3import { FocusProvider, FocusWidget } from '@rchursin/product/timer'4
5/**6 * The widget brings no card of its own: the dashboard around it does. Choose a task, start a7 * session, and the square drains as the time runs. Its own session here (storagePrefix);8 * in an app, put it under the same FocusProvider as the full Focus screen.9 * href sends “Open Focus” to your own page; here, the tool’s page in this Library.10 */11export default function FocusWidgetExample() {12  const { href } = useRouter()13  return (14    <FocusProvider storagePrefix="library:focus-widget">15      <div className="flex w-full max-w-sm flex-col gap-3">16        <SampleBadge className="self-start" />17        <div className="lux-card rounded-2xl bg-raised p-5">18          <FocusWidget href={href('/library/tools/timer-app')} />19        </div>20      </div>21    </FocusProvider>22  )23}

1import type { TimeEntry } from '@rchursin/product/data/sample'2import { SampleBadge } from '@rchursin/product/shell/layout'3import { TimeLogList } from '@rchursin/product/timer'4
5/** A past week, read on the Monday after: fixed dates, so the list reads the same on every visit */6const NOW = new Date(2026, 8, 14, 9, 0)7const at = (day: number, h: number, m: number) => new Date(2026, 8, day, h, m).getTime()8
9const entries: TimeEntry[] = [10  { id: 'w1', taskId: 'RC-122', label: 'Release-notes agent drafts in the wrong tone', start: at(11, 10, 0), end: at(11, 10, 25), kind: 'focus' },11  { id: 'w2', taskId: null, label: 'Break', start: at(11, 10, 25), end: at(11, 10, 30), kind: 'break' },12  { id: 'w3', taskId: 'RC-122', label: 'Release-notes agent drafts in the wrong tone', start: at(11, 10, 30), end: at(11, 10, 55), kind: 'focus' },13  { id: 'w4', taskId: 'RC-117', label: 'Context tax over 8k tokens per turn', start: at(10, 15, 0), end: at(10, 15, 40), kind: 'manual' },14  { id: 'w5', taskId: 'RC-123', label: 'Write the skill naming guide', start: at(10, 9, 30), end: at(10, 9, 55), kind: 'focus' },15  { id: 'w6', taskId: 'RC-125', label: 'Review pr-review prompt cost', start: at(8, 13, 0), end: at(8, 13, 45), kind: 'manual' },16  { id: 'w7', taskId: 'RC-127', label: 'Cut api-docs skill: no runs in 45 days', start: at(8, 16, 10), end: at(8, 16, 35), kind: 'focus' },17]18
19/**20 * The list on its own, without a provider: pass the entries and a way to look up their tasks.21 * No onDelete, so the rows are read-only, as in a report. initialDays keeps older days behind a button.22 */23export default function TimeLogDays() {24  return (25    <div className="flex w-full max-w-md flex-col gap-4">26      {/* The day headings are h4, so the list sits under an h3 */}27      <div className="flex items-center justify-between gap-3">28        <h3 className="text-[15px] font-semibold tracking-[-0.01em]">Week of Sep 7</h3>29        <SampleBadge />30      </div>31      <TimeLogList entries={entries} taskById={() => null} now={NOW} initialDays={2} />32    </div>33  )34}

1import { useRouter } from '@rchursin/product/lib/router'2import { NotesApp } from '@rchursin/product/notes'3import type { KitSlug } from '@rchursin/product/shell/pages'4
5/** The window's tool links go to each tool's page in this Library (Today has none, so it shows as text) */6const toolPages: Partial<Record<KitSlug, string>> = {7  tasks: '/library/tools/tasks-app',8  calendar: '/library/tools/calendar-app',9  timer: '/library/tools/timer-app',10  notes: '/library/tools/notes-app',11}12
13/**14 * Notes and reminders on a page of their own, on sample data. Click inside, then N starts a note15 * and R jumps to a new reminder. In the list, ↑ ↓ move between notes, Enter opens one, P pins it.16 * Everything saves to this browser; "Reset sample data" in the display options puts it back.17 */18export default function NotesAppPage() {19  const { href } = useRouter()20  const hrefFor = (slug: KitSlug) => {21    const path = toolPages[slug]22    return path && href(path)23  }24  return (25    <main className="min-h-dvh bg-sunken/40 px-4 pt-6 pb-24 sm:px-8 sm:pt-10">26      <div className="mx-auto flex max-w-6xl flex-col gap-5">27        <header className="flex flex-col gap-1">28          <h1 className="text-xl font-semibold tracking-[-0.02em] text-balance">Notes</h1>29          <p className="text-[13px] text-pretty text-fg-3">A sample workspace. Everything you do here stays in this browser.</p>30        </header>31        {/* Keeps the outline in order: the app's own headings (the open note, the reminder groups) are h3 */}32        <h2 className="sr-only">Notes and reminders</h2>33        <NotesApp hrefFor={hrefFor} />34      </div>35    </main>36  )37}

1import { useEffect, useState } from 'react'2import type { Note } from '@rchursin/product/data/sample'3import { NoteEditor } from '@rchursin/product/notes'4import { SampleBadge } from '@rchursin/product/shell/layout'5
6const EDITED = new Date(2026, 9, 13, 9, 41).getTime()7
8const sample: Note = {9  id: 'release',10  title: 'Release checklist',11  body: 'Ship the skill cleanup on Thursday.\n\n- [x] Changelog entry\n- [ ] Rerun the scan after merging skills\n- [ ] Post the before / after cost\n\n> Every description loads into every turn.',12  pinned: false,13  tags: ['release', 'skills'],14  updatedAt: EDITED,15}16
17/**18 * The editor on one note you own. Type and it saves 800 ms after you stop (the status in the19 * footer says so). Try "- " or "[] " at the start of a line, Ctrl+Enter (⌘↵) to tick an item.20 */

1import { useRouter } from '@rchursin/product/lib/router'2import { RemindersWidget } from '@rchursin/product/notes'3
4/**5 * Type a reminder in plain words ("check the cost report every Monday at 9") and press Enter.6 * The next four open reminders sit under it, overdue first. It reads the same saved reminders7 * as the Notes app, so a change in one shows up in the other.8 * href sends “Open Notes” to your own page; here, the tool’s page in this Library.9 */10export default function RemindersWidgetExample() {11  const { href } = useRouter()12  return (13    <div className="lux-card w-full max-w-sm rounded-2xl bg-raised p-5">14      <RemindersWidget href={href('/library/tools/notes-app')} />15    </div>16  )17}