Visibility picker

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useRef,  useState,  type KeyboardEvent as ReactKeyboardEvent,  type ReactNode,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { ChevronIcon, GlobeIcon, LockIcon } from './icons';import { RollingLabel } from './rolling-label';import { useAutoplay } from './use-autoplay';import styles from './visibility-picker.module.css';/* * Visibility picker: a small inline quick menu. At rest it is a grey pill, "Private ⌄". Pressed, * the pill sinks and springs back as a menu of the choices rises from behind it, blurred, and * comes into focus just above; its chevron turns over. A choice closes the menu, which sinks and * blurs away, and the pill takes the choice's icon and words: the icons cross-fade through a

/* Visibility picker (visibility-picker.tsx): a grey pill that opens a two-part menu above it. Every   size is in em of the pill's own 12 px type: inline, the picker takes the size of the text around   it; on the lab's stage, the scene draws it larger from the stage's width (a container query).   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. Everything moves by transform, opacity and filter. The curves written as linear() are   sampled from the motion they copy: the pill springs back from a press along an exponential   (a time constant of 75 ms), and the menu rises along an ease-out a little softer than a   quadratic one. */.root,.inline {  /* The stage. */  --surface: #fefefe;  /* The pill: at rest, under the pointer, pressed, and while its menu is open. */  --pill: #f5f5f5;  --pill-hover: #f1f1f1;  --pill-press: #f0f0f0;  --pill-open: #e5e5e5;  /* The pill's words, and its icon and chevron. */  --pill-ink: #525252;

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useLayoutEffect, useRef, useState, type CSSProperties } from 'react';import styles from './visibility-picker.module.css';/* * The pill's words, which roll letter by letter when they change: each letter of the old word * rises and fades out as the new word's letter in its place rises in from below, left to right, * 32 ms apart. Letters the two words share from their start ("P" in Private and Public) * stay where they are. * * The new word sits in the flow and gives the box its width; the old one lies over it, out of the * flow, until its letters have gone. The box's width eases from the old word's to the new one's, * so the pill narrows or widens with it. Under reduced motion the words simply swap. *//** How long the old word stays, in ms: its last letter's delay plus its exit. */const LINGER = 700;/** An element's laid-out width in px, to the fraction and before any transform. */const widthOf = (element: HTMLElement) => parseFloat(getComputedStyle(element).width) || 0;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The picker's three drawings, each on a 48-unit square that the stylesheet sizes to 1em (12 px * at the picker's own size). They take the colour of the text around them (currentColor), so the * same lock is grey in the pill and black in the menu. *//** A padlock, filled: a rounded body under a thick shackle. */export function LockIcon({ className }: { className?: string }) {  return (    <svg className={className} viewBox="0 0 48 48" aria-hidden="true" focusable="false">      <rect x="7" y="18.2" width="34" height="28" rx="5.5" fill="currentColor" />      <path        d="M14.4 20.2V11.2A9.6 9.6 0 0 1 33.6 11.2V20.2"        fill="none"        stroke="currentColor"        strokeWidth="5.6"      />    </svg>  );}/** A globe in outline: the rim, a meridian oval, the axis, the equator and two parallels. */

// 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. */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>;

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