Inbox widgets

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';import cardStyles from './card.module.css';import { DemoPointer, runDemo, type Demo, type Point } from './demo-pointer';import { InboxLoad } from './inbox-load';import { Notifications } from './notifications';import { Snoozed } from './snoozed';import { SendLater } from './send-later';import { SplitInbox } from './split-inbox';import { Threads } from './threads';import { useAutoplay } from './use-autoplay';import type { ColorScheme } from './card';import styles from './inbox-widgets.module.css';export { SplitInbox } from './split-inbox';export { SendLater } from './send-later';export { Notifications } from './notifications';export { Snoozed } from './snoozed';export { InboxLoad } from './inbox-load';export { Threads } from './threads';

/* Inbox widgets (inbox-widgets.tsx): the six panels on the page's colour, in two columns (520 px   for the wide panels, 300 px for the narrow, as they were drawn) when there is room for both,   in one column of up to 520 px under that. The columns are flex columns, a masonry: each panel   keeps its own height. In one column they dissolve (display: contents) and the panels follow   their reading order.   Memory. Nothing here paints over time but what the panels move by transforms; the demo pointer   moves on a layer of its own. */.root {  position: relative;  container-type: inline-size;  box-sizing: border-box;  width: 100%;  overflow: hidden;  overflow: clip;  padding: 40px 16px;  background: var(--stage);  -webkit-tap-highlight-color: transparent;}.grid {  display: flex;  flex-direction: column;  gap: 16px;

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useId, type CSSProperties, type ReactNode } from 'react';import styles from './card.module.css';/* * The shell every panel shares, and the small pieces they have in common. * * - Card: a <section> named by its title, with the header (glyph, title, tag, close button) and *   the panel's body. It carries the colour tokens and the colorScheme prop, so a panel works on *   its own as well as in the grid. * - Roll: a number whose digits roll to their new values, each a strip of 0–9 slid by a transform. * - drag(): follows one pointer from a press until it lifts, on the window, so a drag keeps going *   outside the control, and works the same for the demo's own (untrusted) pointer events. */export type ColorScheme = 'light' | 'dark' | 'system';/** What every panel takes besides its own values. */export type PanelProps = {  /** Light or dark colours, or the reader's ('system'); without it, the page's color-scheme. */  colorScheme?: ColorScheme;

/* The shell every panel shares (card.tsx): a rounded card with its header (a blue glyph, the   title, an outlined tag, a round close button), and the pieces the panels have in common: the   small uppercase labels, the monospace figures, the pill buttons, the avatars, the switches and   the rolling digits.   Colours are the tokens on .tokens, light-dark(light, dark) where the two differ. The panels   and the grid that lays them out all carry .tokens, so a panel used on its own has them too. At   night it is the near-black card on a black page; by day the same card in white on a pale grey,   with the same blue, orange and green.   Sizes are in px of the card at its own size (300 px narrow, 520 px wide): the card is a size   container, and its paddings step up when it is wide. */.tokens {  /* The page under the cards, the card and its edge. */  --stage: #ececee;  --card: #fff;  --card-edge: rgb(0 0 0 / 0.08);  --card-shadow: rgb(20 20 30 / 0.06);  /* Sunk areas (the chart, the segmented control, the time fields) and raised ones (the sorting     list, the quiet hours, the timeline, the stats), with their edges. */  --well: #f3f3f5;  --panel: #f7f7f8;  --panel-edge: rgb(0 0 0 / 0.06);

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type PointerEvent,} from 'react';import { TrayArt } from './art';import {  Avatar,  BoltIcon,  Card,  CheckIcon,  InboxIcon,  Roll,  SignalIcon,  cardStyles,  drag,  type PanelProps,

/* Split inbox (split-inbox.tsx). Measured on the card at 520 px: the tray drawing, the heading,   today's split (a label row, the bar, the legend), the live list and the footer. */.art {  width: 216px;  max-width: 64%;  height: auto;  margin: 26px auto 0;}.heading {  margin: 22px 0 0;  font: 500 18.5px/24px var(--font);  letter-spacing: -0.02em;}.splitHead {  display: flex;  align-items: baseline;  justify-content: space-between;  gap: 12px;  margin-top: 12px;}.totals {  color: var(--muted);

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type PointerEvent,} from 'react';import {  Card,  CheckIcon,  ChevronIcon,  ClockIcon,  GlobeIcon,  Roll,  SendIcon,  cardStyles,  clock,  drag,

/* Send later (send-later.tsx). Measured on the card at 300 px: the day chips, the chart (bars,   slider, ticks, hours), the time zone button and its list, the footer. */.days {  display: flex;  gap: 6px;  margin-top: 16px;}.day {  flex: 1 1 auto;  display: inline-flex;  align-items: center;  justify-content: center;  height: 28px;  margin: 0;  padding: 0 10px;  border: 0;  border-radius: 999px;  background: var(--control);  color: var(--ink-2);  font: 500 11.7px/1 var(--font);  letter-spacing: 0.01em;  text-transform: uppercase;  white-space: nowrap;

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type PointerEvent,} from 'react';import {  Avatar,  BellIcon,  Card,  CheckIcon,  PlusIcon,  Roll,  StepperIcon,  cardStyles,  clock,

/* Notifications (notifications.tsx). Measured on the card at 300 px: the segmented control, the   quiet hours (the dial, the two time fields, the weekend days), the settings and the footer. */.bell {  display: block;  width: 100%;  height: 100%;  transform-origin: 50% 10%;}.bell[data-ring] {  animation: ring 900ms cubic-bezier(0.3, 0, 0.3, 1);}@keyframes ring {  0%,  100% {    rotate: 0deg;  }  12% {    rotate: 16deg;  }  28% {    rotate: -14deg;  }  44% {

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type PointerEvent,} from 'react';import { RackArt } from './art';import {  Avatar,  Card,  MoonIcon,  Roll,  SmallClockIcon,  cardStyles,  clock,  drag,  span,  type PanelProps,

/* Snoozed (snoozed.tsx). Measured on the card at 520 px: the rack, the heading and its countdown,   the timeline (pins over a track, ticks, hours), the two rows and the footer. */.art {  width: 226px;  max-width: 66%;  height: auto;  margin: 30px auto 0;}.heading {  display: flex;  flex-wrap: wrap;  align-items: baseline;  column-gap: 0.3em;  margin: 31px 0 0;  font: 500 18.5px/24px var(--font);  letter-spacing: -0.02em;}.countdown {  margin-left: 0.5em;  color: var(--accent-text);  font-size: 13px;  letter-spacing: 0.08em;  white-space: nowrap;

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useRef, useState, type CSSProperties, type KeyboardEvent } from 'react';import { BarsIcon, Card, Roll, cardStyles, type PanelProps } from './card';import styles from './inbox-load.module.css';/* * Inbox load: how much mail came in, day by day, over the last fourteen weeks, as a heatmap * (weekdays down, weeks across), with the weekly average, its change, and three figures. * * - A cell's shade is its level: five steps from none to the most. Hover or focus one and it is *   ringed, and a tooltip under it (or over it, low in the week) gives the day, the week and the *   count, joined to the cell by a dotted line. * - The heatmap is a grid: one tab stop, arrow keys move between days and weeks, Home and End *   go to the ends of a row. * - The legend's steps are buttons: press one to show only the days at that level. */export type LoadSummary = {  perWeek: number;  /** Against the fourteen weeks before, as a share (−0.08 is 8 % less). */  change: number;

/* Inbox load (inbox-load.tsx). Measured on the card at 300 px: the weekly figure and its badge,   the heatmap (months, weekday letters, 7 × 14 square cells), the legend and the stats. */.summary {  display: flex;  align-items: baseline;  gap: 8px;  margin-top: 17px;}.big {  font: 500 26px/26px var(--font);  letter-spacing: -0.045em;}.badge {  align-self: center;  margin-left: auto;  display: grid;  place-items: center;  height: 23px;  padding: 0 8px;  border-radius: 7px;  background: var(--green-wash);  color: var(--green-ink);  font-size: 12.5px;

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, useState, type CSSProperties } from 'react';import { Card, Roll, ThreadsIcon, cardStyles, type PanelProps } from './card';import styles from './threads.module.css';/* * Threads: who is waiting on whom. Each thread is a line over the last week, with a dot per * message (theirs grey, yours blue). When the last word was theirs, the time since is an orange * bar running to now: the thread is waiting on you. When it was yours, a dotted line: you wait. * * - The heading counts the threads waiting on you (all of them, listed or not) and the longest *   wait; the figures roll when they change. * - Press a row to mark it replied: a blue dot drops in at now, the orange bar draws back, the *   count goes down. Press again to undo. * - The first time it comes on screen, the dots pop in from the left and the bars draw out. */export type Message = { from: 'them' | 'you'; /** Days ago. */ ago: number };export type WaitingThread = { id: string; name: string; topic: string; messages: Message[] };export const WAITING: WaitingThread[] = [

/* Threads (threads.tsx). Measured on the card at 300 px: the heading with the longest wait, four   lines over the week (a 42 px row each: names, then the line), the days and the legend. The   lines run from the left edge to 34 px short of the right, where now is. */.head {  display: flex;  flex-wrap: wrap;  align-items: baseline;  justify-content: space-between;  gap: 12px;  margin-top: 16.5px;}.heading {  margin: 0;  font: 500 18.5px/24px var(--font);  letter-spacing: -0.02em;  white-space: nowrap;}.longest {  color: var(--orange);  font-size: 13px;  letter-spacing: 0.06em;  white-space: nowrap;}

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, type CSSProperties } from 'react';import styles from './art.module.css';/* * The two line drawings: the letter tray of the split inbox and the drying rack of the snoozed * threads. Both are built here from a few boxes in 3D, projected onto the page at the same slant * (a dimetric view: one axis runs down to the right, the other up to the right, heights straight * up), and drawn back to front so that nearer faces hide what is behind them. Faces are filled * with the card's colour and stroked with a thin grey line; one letter in each is blue. * * - The tray: the blue envelope slides down into its slot whenever `drop` changes (a thread was *   sorted), by a Web Animations API transform on its group. * - The rack: every letter sways a little from its peg, each on its own period, by a CSS *   animation on its group (none under reduced motion). The blue one is the next to come back; *   a letter whose thread is woken unpegs and drops away. */type V3 = [number, number, number];type V2 = [number, number];

/* The line drawings (art.tsx): faces in a step off the card's colour, edged with a thin grey   line; the blue letter in the accent, edged lighter. Their colours are the card's tokens plus   the four below. */.art {  --art-face: #fbfbfc;  --art-side: #f4f4f6;  --art-line: #b6b6bc;  --art-blue: #3b82f6;  display: block;  overflow: visible;}@supports (color: light-dark(#fff, #000)) {  .art {    --art-face: light-dark(#fbfbfc, #262626);    --art-side: light-dark(#f4f4f6, #2a2a2a);    --art-line: light-dark(#b6b6bc, #5f5f5f);    --art-blue: light-dark(#3b82f6, #2d5fbd);  }}.face,.side,.blueFace {  fill: var(--art-face);

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, or * glide the pointer somewhere. Stopping the demo (the reader takes over, or it scrolls away) ends * the step in progress at once: its promise rejects, which ends the script right there, and the * pointer fades out. * * Each glide is a curved flight played by the Web Animations API, so nothing runs frame by frame. * The points of the flight are handed to whoever wants to move along with it. The arrow and the hand are HTML boxes * that swap by their visibility: a change of style inside an SVG would lay the SVG out again. */export type Point = { x: number; y: number };/** A glide's path and timing, for an animation that plays along with it. */export type Flight = { points: Point[]; timing: KeyframeAnimationOptions };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer to `to`, in the stage's own px, in `ms`; `along` gets the flight. */

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;