Receipt printer

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useLayoutEffect,  useMemo,  useRef,  useState,  type AnimationEvent,  type CSSProperties,  type RefObject,} from 'react';import { CopyIcon, PrinterIcon, ReplayIcon, TickIcon } from './icons';import { useAutoplay } from './use-autoplay';import styles from './receipt-printer.module.css';/* * Receipt printer: a payment confirmation printed as a till receipt. A dark banner says the * payment went through; under it a desktop thermal printer feeds the receipt out from beneath its * front lip, bottom edge first, buzzing while it prints, its lights pulsing until the paper

/* Receipt printer (receipt-printer.tsx): a backdrop, light or near-black, holding a centred   column, at most 360px wide: the payment banner, the printer, the paper window, the buttons and   the paper swatches. The window is as tall as the receipt at rest and clips it, so the receipt   only ever moves inside it and the component keeps one height in every state. `data-phase` on   the root (idle, feeding, printed) drives the lights, the buzz and the feed; `data-paper` the   paper picked, on the swatches or by defaultPaper; `data-paused` freezes every animation while   the printer is out of sight.   The backdrop, the buttons, the swatches and the paper until one is picked are light-dark(light,   dark) tokens: the component takes the color-scheme it inherits from the page, or the one its   colorScheme prop sets (data-color-scheme). The banner and the printer are black objects on   both. */.root {  --sans: 'Library Inter', Inter, Arial, sans-serif;  --mono: 'Library Mono', ui-monospace, monospace;  --focus: #5c91ee;  --backdrop: #f8f8f8;  /* The buttons under the window, at rest and under the pointer. */  --button: #fff;  --button-edge: #e5e5e5;  --button-ink: #777;  --button-edge-hover: #bbb;  --button-ink-hover: #222;

import type { ReactNode } from 'react';/* * The receipt printer's line icons, drawn on a 24-unit grid with a 1.5-unit round stroke in the * current text colour; the stylesheet sets their size. All decorative: the words beside them, or * the button around them, carry the meaning. */function Icon({ children }: { children: ReactNode }) {  return (    <svg      viewBox="0 0 24 24"      fill="none"      stroke="currentColor"      strokeWidth="1.5"      strokeLinecap="round"      strokeLinejoin="round"      aria-hidden="true"    >      {children}    </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;