Account menu

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  Fragment,  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type KeyboardEvent as ReactKeyboardEvent,  type MouseEvent as ReactMouseEvent,  type ReactElement,  type ReactNode,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import * as Icon from './icons';import { useAutoplay } from './use-autoplay';import styles from './account-menu.module.css';/* * Account menu: the avatar at the end of an app's header opens the account's menu. A white card

/* Account menu (account-menu.tsx): an app's header and, faintly behind, its tabs and cards; the   avatar opens the menu below it, and submenus open to the menu's left. Sizes are px at the   drawing's own scale; the menu is 282 px wide.   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), the one its   colorScheme prop sets, or the one the Appearance entry flips to (data-color-scheme).   Memory. The stage is one layout boundary of a fixed height, so nothing inside it lays out the   page. The menus are always in the page, inert and hidden while closed; they open and close by   opacity and transform, and the demo pointer moves by transforms. */.root {  /* The app's ground, the menu's white card and the grey ledge under it. */  --page: #fff;  --surface: #fff;  --ledge: #f9f9f9;  /* Words: the entries, the quieter lines and icons, the faintest icons. */  --ink: #0a0b0c;  --ink-2: #6c6e70;  --ink-3: #a3a3a3;  /* Lines between the groups, the menus' outline, and their lift. */  --line: #f6f6f6;  --edge: rgb(0 0 0 / 0.055);

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The account menu's icons: line drawings on a 24-unit grid, stroked in the colour of the text * around them (currentColor). Their size comes from the stylesheet. All are decorative: the * words next to them say what they mean. */import type { ReactNode, SVGProps } from 'react';function Svg({ children, ...props }: SVGProps<SVGSVGElement> & { children: ReactNode }) {  return (    <svg      viewBox="0 0 24 24"      fill="none"      stroke="currentColor"      strokeWidth="1.6"      strokeLinecap="round"      strokeLinejoin="round"      aria-hidden="true"      focusable="false"      {...props}    >      {children}

// 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. 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 = {

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