Voice note

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from 'react';import { GhostPointer, runDemo } from './ghost-pointer';import { openMicrophone, simulatedVoice, type LevelSource } from './signal';import { useAutoplay } from './use-autoplay';import styles from './voice-note.module.css';/* * Voice note: a recording control. Press the mic and it grows into a red pill with live bars * and a thin ring that runs round its edge as the time allowed fills up, between a cancel and a * send button. Cancel folds it back into the mic; send turns it into a voice message, with its * duration and a small waveform of the take, which then rises into the conversation above. * * - One shape does it all: the pill is the mic button grown (its width eases on a spring and its *   colour cross-fades), and it becomes the message before the message lifts off (FLIP: the new *   message starts where the pill is, then glides to its place). Only that plain shape changes *   size; what shows on it (the mic, the bars, the ring, the message) keeps its own size, so a *   phone never has to make their layers again while the shape moves. * - The bars follow a simulated voice (signal.ts), unless the reader lets them follow the *   microphone: it then only feeds an analyser that measures loudness, and is open only while a *   recording runs. Nothing is recorded, kept or sent.

/* Voice note (voice-note.tsx). Sizes are in em: the stage sets the font-size from its own width   (a container query), so the control grows with the room it has. The composer's phase (idle,   recording, sending) is a data attribute that drives the shape; --spring, the easing of the   springy transitions, comes from the component.   Colours are the tokens below, light-dark(light, dark): the component takes the color-scheme it   inherits from the page (light unless the page says otherwise), or the one its colorScheme prop   sets (data-color-scheme). */.root {  /* The stage, and what is raised on it: the messages, the mic, cancel, send and the toggle. */  --surface: #efeff3;  --surface-2: #fff;  /* Under the pointer: the mic, cancel and send. */  --hover: #f7f7f9;  /* The words and icons; a duration and the caption; a message's waveform. */  --ink: #1c1c1e;  --ink-muted: #8e8e93;  --wave: #b9b9c0;  /* The stage's edge, and the hairline round what is raised on it. */  --line: rgb(0 0 0 / 0.05);  --edge: rgb(0 0 0 / 0.06);  /* A recording: the bars, the ring, the timer and the mic badge; the badge's disc; the pill,     and its edge. */

/* * Where the recording's bars get their levels: a simulated voice, or the reader's microphone. * Either one gives a level between 0 and 1, read once a frame while recording. * * The microphone only feeds an analyser that measures how loud it is: nothing is recorded, kept, * played back or sent anywhere, and the stream stops as soon as the recording ends. */export type LevelSource = {  /** How loud it is now, from 0 to 1. */  level: (now: number) => number;  /** Lets go of whatever the source holds. */  close: () => void;};/** A small seeded random generator (mulberry32), so a take can be replayed. */function random(seed: number) {  let state = seed >>> 0;  return () => {    state = (state + 0x6d2b79f5) >>> 0;    let t = state;    t = Math.imul(t ^ (t >>> 15), t | 1);    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's ghost pointer, and the timeline that moves it. A demo is a script of awaited steps: * wait, glide the pointer onto a control, press it and call the component's own handler, as a * click would. 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. */export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer onto `target`: its middle, or a point given as shares of its size. */  moveTo: (target: Element | null | undefined, at?: { x: number; y: number }) => Promise<void>;  /** Presses and lets go; `action` runs as the pointer goes down. */  press: (action: () => void) => Promise<void>;};/** What a stopped demo's pending step rejects with. */class Stopped extends Error {}

'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;