QR share

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties } from 'react';import { GhostPointer, runDemo } from './ghost-pointer';import { QrCode } from './qr-code';import type { Ecc } from './qr';import { useAutoplay } from './use-autoplay';import styles from './qr-share.module.css';/* * QR share: a "Show QR code" pill that opens into a card with the link's QR code, a Copy link * button and a close button, and folds back into the pill. * * - The pill's shape stretches into the card's (FLIP: the shapes are measured before and after *   the change, and a plain shape is animated between them on a spring). The card's face is *   revealed inside it as it grows (a clip-path that follows the shape), and the faces *   cross-fade with a touch of blur, so the card seems to grow out of the pill. * - The surface keeps one size, the card's (the pill sits in its middle): only the plain shape *   changes size, so a phone never has to make the faces' layers again while it moves. * - The QR code is encoded here, in the browser (qr.ts), and drawn as dots (qr-code.tsx); its *   dots pop in ring after ring from the middle each time the card opens. * - Copy link writes the link to the clipboard and says so on the button for a moment. For a code

/* QR share (qr-share.tsx, qr-code.tsx). Sizes are in em: the stage sets the font-size from its   own width (a container query), so the card grows with the room it has. The surface shows the   pill or the card, after data-open, and has data-moving while it changes; --spring and   --bounce, the easings of the springy transitions, come from the component.   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). The code itself stays dark on a light plate in   both, as scanners expect. */.root {  /* The stage; the pill and the card's buttons; the card. */  --surface: #efeff3;  --surface-2: #fff;  --card: #f4f4f7;  /* The pill and the buttons under the pointer. */  --hover: #fafafc;  /* The words and the glyphs; the close button's cross; Copied. */  --ink: #1c1c1e;  --ink-muted: #8e8e93;  --green: #30a46c;  /* The code's plate and its dots, light and dark on both schemes: a code reads best dark on light,     with a light margin round it. At night the plate is a little dimmer than white. */  --plate: #fff;

/* * A small QR code encoder: byte mode (UTF-8 text), error correction level L or M, versions 1 to * 5 (up to 106 bytes at L, 84 at M), which is plenty for a link. It follows the standard * (ISO/IEC 18004) step by step: * * 1. The data as bits: the mode, the length, the bytes, then padding up to the version's size. * 2. Reed–Solomon error correction for each block, computed in the field GF(256). * 3. The function patterns: the three finders, the timing lines, the alignment pattern. * 4. The data and error correction bits, placed in a zigzag from the bottom right corner. * 5. Each of the eight masks is tried, and the one that scores best (fewest look-alike *    patterns) is kept, with its format bits (level and mask, BCH-protected) beside the finders. */export type Ecc = 'L' | 'M';export type QrMatrix = {  version: number;  /** Modules per side. */  size: number;  /** Whether the module at column `x`, row `y` is dark. */  dark: (x: number, y: number) => boolean;};/** Per level, for versions 1 to 5: error correction codewords per block, data codewords per block. */

'use client';import { useMemo, type CSSProperties } from 'react';import { encode, type Ecc } from './qr';import styles from './qr-share.module.css';/* * A QR code drawn as an SVG: round dots for the modules, and the three finders and the * alignment pattern as rounded squares, which readers still recognise. The dots are grouped in * rings by their distance from the centre, and each ring pops in a little after the one inside * it (the stylesheet staggers them on the --ring custom property). *//** Modules within this many of the finders' and the alignment pattern's centres are theirs. */const FINDER = 3;const ALIGNMENT = 2;/** The finders' centres, in the corners but the bottom right one. */const finderCentres = (size: number) => [  [3, 3],  [size - 4, 3],  [3, size - 4],];

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's ghost pointer, and the timeline that moves it. A demo is a script of awaited steps: * wait, glide the pointer onto a control, press it and call the component's own handler, as a * click would. 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. */export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer onto `target`: its middle, or a point given as shares of its size. */  moveTo: (target: Element | null | undefined, at?: { x: number; y: number }) => Promise<void>;  /** Presses and lets go; `action` runs as the pointer goes down. */  press: (action: () => void) => Promise<void>;};/** What a stopped demo's pending step rejects with. */class Stopped extends Error {}

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