Product kit overview
StableThe product kit’s front page: a Today screen built from every tool’s widget, a map of the kits and the shared parts.
OverviewPage opens the product kit. A Today screen in the app window puts the focus, tasks, reminders and agenda widgets side by side (they share data with the full tools), cards for each kit, the shared parts working, a folder map and a usage snippet, and the six rules every kit follows. It has its <h1> but no <main>, so wrap it in one.
Updated View source
Product kit overview page
import { OverviewPage } from '@rchursin/product/overview/OverviewPage'
/** * The product kit's front page: a Today screen built from each tool's widget, a map of the * kits, the shared parts and how to use them in code. OverviewPage has its <h1> (PageIntro) * but no <main>, so the page adds one around it. */export default function KitOverviewPage() { return ( <main> <OverviewPage /> </main> )}Usage
import { OverviewPage } from '@rchursin/product/overview/OverviewPage'<main> <OverviewPage /></main>Accessibility
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves through the widgets, the kit cards, the shared parts and the code blocks in reading order. |
| EnterSpace | On “Reset all sample data”: ask first, in a dialog, before clearing anything. |
| Esc | Close that dialog and keep your changes. |
- PageIntro gives the page its <h1>; each Section is labelled by its <h2>. The Today screen is the app window: a section named “RChursin_ app (sample workspace)” with its own navigation named “RChursin_ app (sample workspace): tools”.
- The widgets are the same components the full tools use, so they behave and are announced the same way.
- The greeting and the date in the Today screen come from the visitor’s clock: the prerendered page says “Hello” and “Today”, and the browser fills in the real ones as soon as it loads.
- The kit cards link to #tasks, #calendar and so on: the product kit’s own hash routes. Point them at your pages when you reuse it.
- “Reset all sample data” clears everything the kit saved in this browser except your theme and code-wrap choice (clearStored with keep: VIEWER_PREFS), then reloads.
Guidelines
Do
- Use it as the front page of an app built from the kit: one screen that shows every tool working.
- Keep the widgets on real data once you connect a backend; they already read the tools’ stores.
Don’t
- Don’t leave the kit cards pointing at hashes your app doesn’t route.
- Don’t ship “Reset all sample data” to real users.
In use
Related
- App windowThe RChursin_ app frame: a sidebar with the tools, a title row with a toolbar, and your tool in the body.
- Page introThe top of a kit page: an eyebrow, the page’s h1, a lead and a row of facts, over film grain and a soft ceiling light.
- SectionA page band with an eyebrow, an h2 and a lead, on a plain or sunken ground. SectionHeading is the heading block alone.
- Tasks widgetYour open tasks for a dashboard, soonest due first: tick one to finish it, or change its status from its icon.
- Focus widgetThe focus session for a dashboard: choose a task, start or pause, see the time left in the square and today’s total.
- Agenda widgetA mini month with event markers and the chosen day’s agenda, for a dashboard.
- RemindersReminders grouped from Overdue to Done, checked off, snoozed or deleted with Undo, plus a compact widget for a dashboard.
Source
The component’s own files, exactly as they run on this site.
/** * Product kit · Overview: every tool working together on one screen (a "Today" dashboard built * from each kit's widget), a map of the kits, the shared parts, and how to use them in code. */import { useState, type ReactNode } from "react"import { cx } from "../../components/cx"import { delay } from "../../home/ui"import { AgendaWidget } from "../calendar"import { Icon, iconMeta, type IconName } from "../icons/Icon"import { CodeBlock } from "../iconset/parts"import { dtf } from "../lib/dates"import { useHydrated } from "../lib/hydration"import { clearStored, VIEWER_PREFS } from "../lib/storage"import { RemindersWidget } from "../notes"import { AppWindow } from "../shell/AppWindow"import { KitPage, PageIntro, Rules, SampleBadge, Section } from "../shell/layout"import { kitPages, type KitSlug } from "../shell/pages"import { TasksTodayWidget } from "../tasks"import { FocusWidget } from "../timer"import { Button } from "../ui/button"