Payment link share

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useEffectEvent, useId, useRef, useState } from 'react';import { PORTRAITS, PortraitArt } from './avatars';import { DemoPointer, runDemo } from './demo-pointer';import { CHANNELS, ShareGlyph, type ShareChannel } from './share-icons';import { useAutoplay } from './use-autoplay';import styles from './payment-link-share.module.css';/* * Payment link share: the dialog that hands a customer a link to pay. Over a dimmed list of * recipients, a white sheet opens with a grey header where people ride a tilted orbit around a * link, then the link itself in a pill with a copy button, then five places to share it. * * - The orbit is an ellipse seen at an angle: 170.5 × 59.5 px, turned 12° so it rises to the *   right, centred behind the link. Seven portraits ride it at 15° a second, the front going left. *   Each frame places them by transform from their angle: on the far side they shrink a little, *   fade and blur (depth of field), and slip under the link; on the near side they are sharp and *   over it. The track is three thin rings of that ellipse, fading towards the back. * - The header's art is drawn at the dialog's own 383 px and scaled as one picture when the *   dialog is narrower; the text under it keeps its size. * - Opening: the backdrop darkens over 230 ms (ease-in-out) while the sheet comes in from a 7 px

/* Payment link share (payment-link-share.tsx): a list of recipients on a warm off-white page,   dimmed under a white dialog. The dialog is 400 px wide where it fits, and keeps its measures   (8.5 px rim, 35 px corners, 15 px type) when narrower; only the header's art scales, by --k.   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).   Memory. The stage is one layout boundary, sized from outside. The portraits move by transforms   (and a blur on the far side) written once per frame; the dialog's entrance is opacity and a   filter, played by the compositor. */.root {  /* The page behind, its words, and the dim over it. */  --page: #f5f5f2;  --page-ink: #1b1b1c;  --page-muted: #707072;  --page-hot: #ebebe8;  --badge: #e6e6e3;  --scrim: rgb(0 4 11 / 0.515);  /* The dialog, its header, and its words. */  --sheet: #fff;  --head: #f3f3f1;  --glow: rgb(255 255 255 / 0.55);

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The people on the orbit: small flat portraits drawn in SVG, never photos. Each is a coloured * backdrop, shoulders in a shirt, a neck, a head and one of a few hairstyles, inside a 32-unit * circle that the disc around it clips. */export type Portrait = {  /** The backdrop behind the person. */  sky: string;  shirt: string;  skin: string;  hair: string;  style: 'long' | 'bob' | 'short' | 'curly' | 'bun' | 'buzz';};export const PORTRAITS: Portrait[] = [  { sky: '#e9dccd', shirt: '#efe2d3', skin: '#d9a789', hair: '#4a3328', style: 'long' },  { sky: '#9fc4dd', shirt: '#7e7a55', skin: '#e2b598', hair: '#6b4630', style: 'bob' },  { sky: '#d4d4d4', shirt: '#121212', skin: '#e8c0a6', hair: '#8a6a4c', style: 'short' },  { sky: '#e6d2bf', shirt: '#4c8a8c', skin: '#b98262', hair: '#2a1d17', style: 'curly' },  { sky: '#c9d6c3', shirt: '#d7d0c4', skin: '#8d5a3f', hair: '#16100d', style: 'bun' },  { sky: '#dcd3e6', shirt: '#2f3d5c', skin: '#f0c9ae', hair: '#c79a62', style: 'buzz' },

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The share targets' glyphs, drawn on a 44-unit square: neutral pictures of what each channel * does (a letter, a speech bubble, two people, a spark, a chat ring), never anyone's logo. The * tile under each glyph (its colour, its corners) comes from the stylesheet. */import { useId } from 'react';export type ShareChannel = 'email' | 'message' | 'network' | 'post' | 'chat';export const CHANNELS: { id: ShareChannel; label: string }[] = [  { id: 'email', label: 'Email' },  { id: 'message', label: 'Message' },  { id: 'network', label: 'Network' },  { id: 'post', label: 'Post' },  { id: 'chat', label: 'Chat' },];export function ShareGlyph({ channel, className }: { channel: ShareChannel; className?: string }) {  const letter = `${useId()}letter`;  return (    <svg className={className} viewBox="0 0 44 44" aria-hidden="true" focusable="false">

'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 eye of the * badge, 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 = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;

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