Format toolbar

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useLayoutEffect,  useRef,  useState,  type KeyboardEvent,} from 'react';import { GhostPointer, runDemo, type Point } from './ghost-pointer';import { rewritesOf, type Rewrite } from './rewrites';import {  COLORS,  format,  fromDOM,  marksOf,  rangeOf,  replace,  select,  selectedSpan,  serialize,

/* Format toolbar (format-toolbar.tsx, toolbar.tsx, orb.tsx): a stage with a block of text, which   fades towards its foot, and the toolbar that floats over its selection.   Memory. The stage is one layout boundary of a fixed height. The text and the toolbar each paint   on a layer of their own: typing and formatting repaint the text alone, and the toolbar moves   and fades with transforms and opacity. A layer that changes size gets new buffers, so each   keeps one size: the text's is clipped to its box, and the toolbar's tips and menus are small   layers of their own. The text fades into the stage's colour painted over it, in its own layer:   a mask would be a second layer as large, painted again with every change. Set --stage with the   stage's background.   Colours are the tokens below, light, then light-dark(light, dark) pairs: 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). The pairs sit in @supports, which a build that   rewrites light-dark() for older browsers leaves as written; without light-dark(), the light   colours stay. The text colours a reader picks come from rich-text.ts, with a value for each   scheme; the orb keeps its colours. */.root {  /* The stage, which the text fades into, and its edge. */  --stage: #e1e1e1;  --stage-edge: rgb(0 0 0 / 0.06);  /* The words; the rest of the text while the toolbar shows; the toolbar's icons, and the     chevron; the rewrites' labels and their notes. */

'use client';import { useState, type CSSProperties, type KeyboardEvent, type ReactNode, type Ref } from 'react';import { CheckIcon, ChevronIcon, ItalicIcon, LinkIcon, ListIcon, UnderlineIcon } from './icons';import { Orb } from './orb';import type { Rewrite } from './rewrites';import { COLORS, type Marks, type Swatch } from './rich-text';import styles from './format-toolbar.module.css';/* * The floating toolbar: the rewrite orb, the block's type, bold, italic, underline, a link, the * text colour and a bulleted list. A hovered or focused tool names itself, with its shortcut, in * a light tip above it. The orb, the block's type and the colour open small menus under their * tool; the link opens an address field. A press on the toolbar never takes the focus from the * text, so the selection stays; from the keyboard it is a toolbar (Tab from the text reaches it, * the arrow keys move along it, Escape goes back to the text). */export type Block = 'heading' | 'subheading' | 'paragraph' | 'quote';export type Tool =  'rewrite' | 'block' | 'bold' | 'italic' | 'underline' | 'link' | 'color' | 'list';export type Menu = 'rewrite' | 'block' | 'color' | 'link';export type Toggle = 'bold' | 'italic' | 'underline';

/* * The text's model. A block is a list of runs: pieces of text that share the same marks (bold, * italic, underline, a colour, a link). The editor writes the runs as HTML, reads them back from * the DOM after the browser has typed into it, and formats a selection by cutting the runs at its * edges and changing the marks of the runs in between. Positions are character offsets into the * block, so a selection survives a fresh render. */export type Marks = {  bold?: boolean;  italic?: boolean;  underline?: boolean;  /** The id of one of COLORS. */  color?: string;  /** A link's address. */  href?: string;};export type Run = { text: string; marks: Marks };/** A stretch of the block, in characters: from `start` up to, not including, `end`. */export type Span = { start: number; end: number };/**

/* * The orb's rewrite suggestions, made on the spot with no service behind them: written-out * alternatives for the demo's own words, and for any other selection three simple passes (without * filler words, in sentence case, in title case). Pass your own through the `rewrites` prop. */export type Rewrite = { label: string; text: string };/** Alternatives written out for the demo's first words. */const WRITTEN: Record<string, Rewrite[]> = {  'Margins is a calm, focused writing space': [    { label: 'Shorter', text: 'Margins is a quiet place to write' },    { label: 'Warmer', text: 'Margins is a cosy, focused home for your writing' },    { label: 'Plainer', text: 'Margins is a simple app for writing' },  ],};const FILLER = /\b(very|really|just|quite|simply|actually|basically|truly|rather)\s+/gi;const sentenceCase = (text: string) => {  const lower = text.toLowerCase();  return lower.charAt(0).toUpperCase() + lower.slice(1);};

/* * The toolbar's icons: outlined, drawn on a 20 × 20 grid with round caps, in the current colour. * They are decorative; the buttons that hold them carry the labels. */type IconProps = { className?: string };const outline = {  viewBox: '0 0 20 20',  fill: 'none',  stroke: 'currentColor',  strokeWidth: 1.5,  strokeLinecap: 'round' as const,  strokeLinejoin: 'round' as const,  'aria-hidden': true,};/** A slanted capital with serifs: italic. */export function ItalicIcon({ className }: IconProps) {  return (    <svg className={className} {...outline}>      <path d="M8.6 3.6h6.2M5.2 16.4h6.2M11.7 3.6 8.3 16.4" />    </svg>  );

'use client';import type { Ref } from 'react';import styles from './ghost-pointer.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 takes the shape a real one would: an arrow, a hand over buttons, an * I-beam over text. Its shapes are drawn once, each in a small layer of its own, and swapped by * scaling those layers to nothing and back: a change of opacity or of a rule matched through the * pointer would reach the drawings, and Safari would lay out the whole page again. 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' | 'text';/** A point in the stage's own pixels. */export type Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;

/* The demo's pointer (ghost-pointer.tsx): an arrow, a hand over buttons, an I-beam over text. Its   tip sits at the point it is moved to. Each shape sits in a small layer of its own. Its colours   are the stage's tokens (format-toolbar.module.css). */.ghost {  position: absolute;  z-index: 40;  top: 0;  left: 0;  width: 0;  height: 0;  pointer-events: none;  opacity: 0;  transition: opacity 0.3s ease;}.shape {  position: absolute;  width: 22px;  height: 22px;  /* The script shows one shape at a time by its scale. */  transform: scale(0);  will-change: transform;}.shape svg {

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