Toolbar morph

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useLayoutEffect,  useRef,  useState,  type ComponentType,  type CSSProperties,  type KeyboardEvent,} from 'react';import { GhostPointer, runDemo } from './ghost-pointer';import {  ArrowIcon,  ClockIcon,  CloseIcon,  ColorIcon,  EmojiIcon,  FontIcon,  ImageIcon,  MagicIcon,

/* Toolbar morph (toolbar-morph.tsx): a light grey stage with faint diagonal lines, the toolbar in   its middle; at night a near-black stage and a dark grey toolbar, its discs a step lighter. The   dock is the unfolded toolbar's box, 394 × 64; the folded pill, its discs and the unfolded well   are laid out inside it, and the dock's data-open attribute moves them on a spring (--spring,   --spring-ms). */.root {  /* Its colours, light and dark: each light-dark() pair resolves by the color-scheme the root     inherits from the page, or the one the colorScheme prop sets (below). */  /* The stage and its lines; the pill; the discs and the well; the voice tools' round buttons. */  --surface: #f3f3f3;  --hatch: rgb(0 0 0 / 0.032);  --surface-2: #fff;  --well: #f8f8f8;  --button: #ededed;  /* Times and pressed icons; icons; the elapsed time; the length; the clock and the arrow. */  --ink: #111;  --icon: #5c5c5f;  --ink-muted: #5a5a5e;  --ink-faint: #a3a3a3;  --clock: #a8a8a8;  --arrow: #a6a6a6;  /* The stage's edge; the rules between the notes groups; the waveform's empty slots, then     while recording. */

/* * The toolbar's icons: outlined, drawn on a 24 × 24 grid with round caps, in the current colour, * and shown at 18 px. They are decorative; the buttons that hold them carry the labels. */type IconProps = { className?: string };const outline = {  viewBox: '0 0 24 24',  fill: 'none',  stroke: 'currentColor',  strokeWidth: 1.7,  strokeLinecap: 'round' as const,  strokeLinejoin: 'round' as const,  'aria-hidden': true,};/* The three tools of the folded bar. *//** Notes: two cards, fanned. The front one hides the back one with the button's own colour. */export function NotesIcon({ className }: IconProps) {  return (    <svg className={className} {...outline}>      <rect x="3.6" y="5.4" width="10.8" height="13.6" rx="2.6" transform="rotate(-14 9 12.2)" />

/* * A voice note, simulated: no microphone is opened. The levels come from a small model of speech, * so that the waveform looks like a voice: words come in bursts of a few syllables that rise and * fall, with short silences between them. The sequence is seeded, so each recording starts the * same way. *//** A level from 0 (silence) to 1 (loudest), every SAMPLE_MS while recording. */export const SAMPLE_MS = 280;/** A small seeded random number generator (mulberry32). */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;  };}/** Returns the next level of a voice each time it is called. */export function voice(seed = 7) {

'use client';import type { Ref } from 'react';import styles from './toolbar-morph.module.css';/* * 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. The pointer is an arrow, and a hand over buttons. 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. */export type Shape = 'arrow' | 'hand';/** A point in the stage's own pixels. */type Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /**   * Glides the pointer onto `target`: an element (its middle, or a point given as shares of its   * size) or a point on the stage.

/* * Springs as CSS easings. A spring pulls a value to its target and lets it settle: fast at first, * then slowing down, overshooting a little and coming back if it is bouncy. CSS `linear()` draws * any curve through a list of points, so the spring's motion is sampled once, and the same curve * serves CSS transitions and the Web Animations API. */export type Spring = {  /** The curve, as a CSS `linear()` easing. */  easing: string;  /** How long it takes to settle, in ms: the duration to play the curve over. */  duration: number;};/** Points sampled along the curve: plenty for a smooth motion. */const SAMPLES = 40;/** * A spring that covers most of the distance in about `response` ms. With a `bounce` of 0 it * settles without overshooting; at 0.3 it overshoots by about 5% and comes back. */export function spring(bounce: number, response: number): Spring {  // The damping ratio (1: no overshoot) and the natural frequency, in radians per second.  const damping = 1 - bounce;

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