Q4 roadmap: can you review?
Ravi Patel <ravi@northwind.co> · 9:12
Planning
Hi Maya, I put the Q4 roadmap draft in the shared folder. Could you read the billing and settings sections before Thursday? I am least sure about the order. Thanks, Ravi
Inbox triage
ProA list of items to handle with quick actions and keyboard support.
pnpm dlx shadcn@latest add @caliper/inbox-triage- Ravi Patel9:12Q4 roadmap: can you review?I put the draft in the shared folder. Would love your…
- Kofi Mensah8:40Acme asked about rate limitsThey are migrating next week and expect about 3x…
- Ingrid SolbergYesterdayNew icons are readyAll 120 icons exported, plus the motion references.
- FinanceYesterdayOctober expense reports due FridayA reminder that all October expenses need to be…
- Lena FischerMonIncident follow-up: webhook retriesPostmortem is drafted. Three action items for us.
When to use #
Use it for
- Working through a queue fast.
Skip it when
- Items need long reading; use a detail view.
Installation #
terminal
pnpm dlx shadcn@latest add @caliper/inbox-triage
Adds its 6 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source.
example.tsx
import { InboxTriage } from "@/components/ui/inbox-triage"
The worked example comes with Pro
The 24-line example behind the preview opens here with a Pro or Team licence.
Checking your licence…
API reference #
InboxTriage
component
PropTypeDefault
messages *readonly InboxMessage[]—
snoozesreadonly SnoozeChoice[][{ id: "later", label: "Later today" }, { id: "tomorrow", label: "Tomorrow morning" }, { id: "week", label: "Next week" }]
onDone *(id: string, done: boolean) => void—
onSnooze *(id: string, until: string | null, label?: string | undefined) => void—
onStar *(id: string) => void—
onUnread *(id: string, unread: boolean) => void—
classNamestring—
Accessibility #
It exposes status, listbox, option, presentation, menu and menuitem semantics, with aria-label, aria-hidden, aria-activedescendant, aria-selected, aria-pressed and aria-expanded kept in step with state. Changes that matter are announced through a live region.
KeyBehaviour
EscapeCloses or cancels, then returns focus to where it came from.
Motion #
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.