Pulse dashboards

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';/* * Pulse dashboards: one analytics app in four looks that share their parts. An app window with a * sidebar (workspace switcher, search, sections, help links, the signed-in person) and a main * column of KPI cards and charts: * * - commerce-dark: a store's sales. KPI cards with small pixel columns, sales as stacked pixel *   columns (new and existing customers) over 14 days, a month or three months, traffic sources as *   dotted bars, the category mix, sales by hour of the week and the top products. * - content-light: a content team. KPI cards in a header tray, gross revenue by hour as stacked *   bars (now over before) for a day, a week or a month, channels, the next posts and stats. * - crm-dark: a sales team. KPI cards with badges, revenue over time as an area with a tooltip and *   a date pill, retention by segment as thin grouped bars, and the leads funnel. * - overview-light: a studio's billing. Spiky lines for revenue, net revenue and conversion, the *   recent clients and the upcoming renewals. * * Every chart is SVG with a tooltip on hover or keyboard focus (charts.tsx); the range toggles * animate the data. The nav works: another section opens its (empty) page, search filters the * nav, the workspace and account menus open. Below 720 px of its own width the sidebar becomes a * drawer behind a menu button and the cards stack (container queries). *

/* Pulse dashboards (pulse-dashboards.tsx): one analytics app in four looks. Greys only, with a   green for gains and a red for losses: near-black windows with cards a step lighter by night, an   off-white sidebar and white cards by day. Each look tunes a few tokens (sidebar, panel, trays,   cards) and a few sizes (sidebar width, row height, paddings) on [data-variant].   Colours are the tokens below, light-dark(light, dark): the component takes the scheme its   look has (data-color-scheme), or the one its colorScheme prop sets.   Sizes are the app's own at 1440 px: a 248–253 px sidebar with 32–40 px rows, 14 px text, KPI   values at 24 px. Layout comes from the component's width and the main column's (container   queries): four KPI columns on a wide main column, two on a narrow one, one on a phone; the   sidebar a drawer under 720 px.   Motion. Pixel cells pop in by transform and opacity, bars grow by scaleY, the dotted bars fill by   clip-path, menus and the drawer come in by transform and opacity. Nothing moves under reduced   motion. */.root {  --stage-ink: #0a0a0a;  --switch: #f2f2f2;  --switch-on: #fff;  --switch-edge: #e3e3e3;  --window-edge: #e2e2e2;  --sidebar: #fafafa;

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';/* * The charts. Each is an SVG drawn in CSS pixels at the width its slot measures (a ResizeObserver), * so strokes, cells and dashes stay crisp at any size; text labels are HTML beside or under it. * * - Every chart scrubs: the pointer's x (or y) picks the nearest column, point or stage, and a *   tooltip shows its figures. The chart itself is one tab stop: the arrow keys move along it, *   Home and End jump, Escape lets go, and a polite live region reads the tooltip out. * - The active item is held by the parent (`active`, `onActive`) so the demo can point at it too. * - Range changes animate by transform and opacity only: pixel columns pop in cell by cell, *   stacked bars grow by scaleY, and lines morph point by point (their values tween over half a *   second; the path is rebuilt each frame only while that lasts). Under reduced motion they jump. */import {  useEffect,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The figures of the four screens: a store's sales, a content team's revenue and posts, a sales * team's pipeline and a studio's billing overview. All invented. The ranges a chart switches * between are written out for the range the screen opens on and derived for the others by a seeded * random walk, so they are the same on every load (and on the server and the client). */export type Variant = 'commerce-dark' | 'content-light' | 'crm-dark' | 'overview-light';export const VARIANTS: { id: Variant; label: string; scheme: 'light' | 'dark' }[] = [  { id: 'commerce-dark', label: 'Commerce', scheme: 'dark' },  { id: 'content-light', label: 'Content', scheme: 'light' },  { id: 'crm-dark', label: 'CRM', scheme: 'dark' },  { id: 'overview-light', label: 'Overview', scheme: 'light' },];/** A small seeded generator (mulberry32): the same numbers on every load. */export function seeded(seed: number) {  let state = seed >>> 0;  return () => {    state = (state + 0x6d2b79f5) >>> 0;    let t = state;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The icons: thin line drawings on a 24-unit grid in currentColor, sized by the stylesheet. All are * decorative (aria-hidden): the text beside each one names what it does. */import type { ReactNode } from 'react';const PATHS = {  dashboard: (    <>      <rect x="3.5" y="3.5" width="7" height="7" rx="1.6" />      <rect x="13.5" y="3.5" width="7" height="7" rx="1.6" />      <rect x="3.5" y="13.5" width="7" height="7" rx="1.6" />      <rect x="13.5" y="13.5" width="7" height="7" rx="1.6" />    </>  ),  calendar: (    <>      <rect x="3.5" y="5" width="17" height="15.5" rx="2" />      <path d="M8 3v4M16 3v4M3.5 10h17" />      <path d="M8 13.5h.01M12 13.5h.01M16 13.5h.01M8 17h.01M12 17h.01M16 17h.01" strokeWidth="2" />    </>

// Copyright (c) 2026 Bruno Delorence. MIT License.'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`. */

// Copyright (c) 2026 Bruno Delorence. MIT License.'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(