Contract dropzone

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useRef,  useState,  type DragEvent as ReactDragEvent,  type FormEvent,  type KeyboardEvent as ReactKeyboardEvent,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { Illustration } from './illustration';import { useAutoplay } from './use-autoplay';import styles from './contract-dropzone.module.css';/* * Contract dropzone: the empty state of a contract-review assistant. Nothing is in review yet; * a drawing of a contract with one clause lifted off it says what the assistant does, and the * composer under it takes the first contract: a dropped or picked PDF or DOCX, a pasted link, or * a file from one of the sources under it. *

// Copyright (c) 2026 Bruno Delorence. MIT License.import { useId, type CSSProperties } from 'react';import styles from './contract-dropzone.module.css';/* * The empty state's drawing, in isometric linework: a stack of three sheets, the top one curling * at its corners, with one clause lifted off it as a mint strip; a pen and a desk stamp beside it. * * It is drawn in the inset's own px (480 × 223), so every point here is where it lands on a card * at its full width; the SVG scales as a whole below that. The lines of text on the top sheet are * laid out on the sheet itself (a bilinear map of its four corners), so they follow its slant. * * What moves (all by transforms, in the stylesheet): the strip floats over its clause and its * dotted guides stretch with it; a scan line sweeps the sheet now and then, quicker while a * contract is being read. All of it is decorative (aria-hidden on the inset). */type P = [number, number];/** The top sheet's corners, as drawn (before its corners curl). */const TL: P = [236.4, 39.9];const TR: P = [332.5, 69.4];const BL: P = [117.5, 135];

/* Contract dropzone (contract-dropzone.tsx): a card on a quiet stage, 502px wide at most. Its   sizes are px of the card at that width; under it, the card takes the stage's width and the   drawing scales as a whole (it keeps its proportions).   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).   Motion: the strip's float, the guides' stretch and the scan line are transforms and opacity on   a few SVG groups, paused when the stage is off screen (the component sets data-paused) and   still under reduced motion. */.root {  /* The stage, the card, and the inset the drawing sits in. */  --stage: #efefed;  --card: #fff;  --card-ring: rgb(0 0 0 / 0.07);  --card-shadow: rgb(0 0 0 / 0.05);  --inset: #f7f7f6;  --inset-edge: #ebebe9;  /* Words: strong, quiet, and the placeholder. */  --ink: #161616;  --muted: #76767a;  --faint: #a3a3a5;

// 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 file the demo * drags, which plays its own animation on the same clock). 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 = {

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