Row editor

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type ComponentType,  type CSSProperties,  type KeyboardEvent,} from 'react';import { DemoCursor, playDemo } from './demo-cursor';import { EXPENSES, money, type Expense } from './expenses';import { CardIcon, CheckIcon, CloseIcon, CoinIcon, PencilIcon, ReceiptIcon } from './icons';import { easingOf, spring } from './spring';import { useAutoplay } from './use-autoplay';import styles from './row-editor.module.css';/* * Row editor: a table of expenses whose rows open into a form in place. Press a row's pencil, or

/* Row editor (row-editor.tsx): a light stage with the table on a white card, or at night a   near-black stage with the table on a dark grey one. A row open in its form carries data-editing,   and so does the table while one is.   Colours are the tokens below, each 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, the table on it, and the row lifted out of the table: a step lighter each at night,     where shadows hardly show. */  --surface: #e4e4e7;  --surface-2: #fff;  --surface-3: #fff;  /* Names, amounts and the caption; methods and Cancel; headings, labels and the total's name;     icons, $ signs and the pencils. */  --ink: #1d1d1f;  --ink-soft: #48484a;  --ink-muted: #6e6e73;  --ink-faint: #aeaeb2;  /* While a row is open: the head and the total, the other rows' pencils, and the soft shadow     their text turns into. */  --ink-dim: #cdcdd2;  --ink-dimmer: #dedee2;

/* * The sample expenses: what each one was for, how it was paid and how much it came to. */export type Expense = {  id: string;  /** What it was for. */  name: string;  /** How it was paid. */  method: string;  /** In dollars. */  amount: number;};export const EXPENSES: Expense[] = [  { id: 'studio', name: 'Studio rent', method: 'Transfer', amount: 940 },  { id: 'train', name: 'Train pass', method: 'Debit card', amount: 96 },  { id: 'market', name: 'Market run', method: 'Cash', amount: 42 },  { id: 'phone', name: 'Phone plan', method: 'Credit card', amount: 35 },  { id: 'climbing', name: 'Climbing gym', method: 'Credit card', amount: 68 },];/** 940 → "940", 1250 → "1,250", 42.5 → "42.50". */export const money = (amount: number) =>

/* * The row editor's icons, drawn on a 16 × 16 grid with a 1.5 stroke (the pencil is filled). */type IconProps = { className?: string };/** Expense: a receipt. */export function ReceiptIcon({ className }: IconProps) {  return (    <svg className={className} viewBox="0 0 16 16" aria-hidden="true">      <path d="M3.75 2.25h8.5v11.5l-1.7-1.1-1.4 1.1L8 12.65l-1.15 1.1-1.4-1.1-1.7 1.1z" />      <path d="M6 5.75h4M6 8.5h2.5" />    </svg>  );}/** Method: a card. */export function CardIcon({ className }: IconProps) {  return (    <svg className={className} viewBox="0 0 16 16" aria-hidden="true">      <rect x="2" y="3.5" width="12" height="9" rx="2" />      <path d="M2 6.75h12M4.5 10h2.5" />    </svg>  );

/* * 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 type { Ref } from 'react';import styles from './demo-cursor.module.css';/* * The demo's cursor. While a demo plays on its own, an arrow glides to the controls and presses * them, so the demo reads like someone using the component. Each glide is a CSS transition, one * per axis with a different easing, which bends the path into a gentle arc: nothing runs between * moves. */export function DemoCursor({ ref }: { ref: Ref<HTMLSpanElement> }) {  return (    <span ref={ref} className={styles.cursor} data-state="hidden" aria-hidden="true">      <span className={styles.vertical}>        <span className={styles.ripple} />        <svg className={styles.arrow} viewBox="0 0 20 20">          <path d="M4 2.5 15 13h-4.6l2.4 5.2-2.4 1-2.4-5.2L4 17.2z" />        </svg>      </span>    </span>  );}

/* The demo's cursor (demo-cursor.tsx): an arrow whose tip sits at (--x, --y) in its stage. The   outer box carries the horizontal move, the inner one the vertical move, eased differently. */.cursor {  /* The arrow and its edge stay the system's on both schemes, dark and edged in white, so it reads     on the dark surfaces and the light Done button alike; the ring where it presses turns light at     night. */  --pointer: #1d1d1f;  --pointer-edge: #fff;  --pointer-ring: rgb(0 0 0 / 0.14);  --x: 0px;  --y: 0px;  --move: 0ms;  position: absolute;  top: 0;  left: 0;  z-index: 10;  pointer-events: none;  opacity: 0;  transform: translateX(var(--x));  transition:    opacity 0.25s ease,    transform var(--move) cubic-bezier(0.45, 0, 0.25, 1);}

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