Clause positions

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { useAutoplay } from './use-autoplay';import styles from './clause-positions.module.css';/* * Clause positions: a negotiation card that sets their draft of a contract against your redlines, * one clause a row. Each row is a track in three zones (what you accept, what you'd discuss, and * the hatched walk-away), with their draft as an open ring and your position as a dot. * * - Your position is a slider over the clause's terms. Drag the dot (or press anywhere on the

/* Clause positions (clause-positions.tsx): a dark card on a dark stage by night, a white one on a   pale stage by day. Inside it, a sunken panel with one row per clause: a name, a value, and a   track in three zones with their draft (a ring) and your position (a dot) on it.   Colours are the tokens below, light-dark(light, dark) where the two differ: 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).   Every track is a size container: the ring and the dot sit on zero-width layers moved by   translateX(var(--at) * 100cqw), so a move is a transform and never a layout. The dashed arrow is   one line the width of the track, clipped (inset) to the stretch between the ring and the dot. */.root {  /* The stage, the card, and the sunken panel inside it. */  --stage: #f1f1f2;  --card: #fff;  --card-edge: rgb(0 0 0 / 0.07);  --card-shadow: rgb(0 0 0 / 0.06);  --panel: #fafafa;  --panel-edge: #ebebed;  /* The header's round icon. */  --icon: #efeff1;  --icon-line: #b4b4b9;  --icon-knob: #47474c;

// 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. * A drag is a straight flight, so a dot dragged along with the pointer stays under 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 };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer to `to`, in the stage's own px, in `ms`: on a curve, or straight. */

// 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(