Menu bar onboarding

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useRef,  useState,  type KeyboardEvent as ReactKeyboardEvent,  type ReactNode,} from 'react';import { FolderGlyph, type FolderKind, type HeroFolder } from './art';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { Hero } from './hero';import { CameraIcon, ChevronLeftIcon, EditIcon, FolderIcon, PlusIcon } from './icons';import { useAutoplay } from './use-autoplay';import styles from './menubar-onboarding.module.css';/* * Menu bar onboarding: the four-step welcome panel of a menu-bar capture app, hanging over its * desktop. Welcome, shortcuts, selection, folders; Back, Skip for now, Continue, and Get started * on the last step.

/* Menu bar onboarding (menubar-onboarding.tsx): a 448 × 600 panel on a warm desktop wallpaper.   The panel is a sheet (the illustration and the step's content) over a grey footer that holds   Skip for now and the primary button. Sizes are the panel's real ones, in px; under 480 px the   panel takes the stage's width, its illustration scales down and its height follows its content.   Colours are the tokens below, light-dark(light, dark): the component takes the color-scheme it   inherits from the page, or the one its colorScheme prop sets (data-color-scheme).   Memory. The stage is one layout boundary sized from outside. Only transforms and opacity move:   the content's fade-in on a step change, the knobs of the switches, the demo pointer and its   click ring. The wallpaper is gradients, painted once. */.root {  --wall-1: #f8c84c;  --wall-2: #f5a532;  --wall-3: #ef8426;  --wall-4: #e25a29;  --wall-5: #cc3c1d;  --wall-deep: #ac1d19;  --wall-sun: #ffe08a;  --wall-blue: #3a86d2;  --sheet: #fdfdfd;  --footer: #f5f5f5;  --ink: #0d0d0d;

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useLayoutEffect, useRef } from 'react';import {  Canvas,  CapturePill,  CapturesPopover,  FoldersPopover,  Keycaps,  MenuBar,  MiniWindow,  Selection,  Thumbnail,  type HeroFolder,} from './art';import { MiniArrow } from './icons';import { timeline, type Timeline } from './timelines';import styles from './hero.module.css';/* * The illustration at the top of the panel: a small desktop that acts out each step. *

/* * The illustrations' timelines: for each step, what every moving part of the desktop does, second * by second, as keyframes the Web Animations API plays on a loop. A part is found by its data-a * name in the hero. Every value is a transform or an opacity (or, for two small parts, a clip-path * and a background), so the compositor plays them. * * Coordinates are the desktop's own px: the desktop is drawn 448 px wide with the window at * (112, 51), 196 × 134, and a camera (the "camera" part) moves and zooms over it. The canvas of the * desktop app is drawn over the desktop, in the hero's px. */export type Frame = [number, Keyframe];export type Track = {  /** The data-a name of the part (several parts may share it). */  a: string;  /** Times in seconds from the start of the loop, each with what the part looks like then. */  frames: Frame[];  /** The loop's length in seconds; the step's own by default. */  cycle?: number;  /** Seconds before the first loop starts. */  delay?: number;  /** How many times it plays; for ever by default. */  iterations?: number;};

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import type { ReactNode } from 'react';import {  AppMark,  BatteryIcon,  BriefcaseIcon,  BulbIcon,  CameraIcon,  EditIcon,  EyeIcon,  FolderHeartIcon,  FolderIcon,  GearIcon,  HomeIcon,  ReturnIcon,  RingMark,  SearchIcon,  SwitchesIcon,  VideoIcon,  WifiIcon,} from './icons';

/* The hero's illustrations (hero.tsx, art.tsx): a small desktop in its own px, scaled to the   panel by --k (the panel's width over 448). Every part sits at a fixed place on the desktop;   the parts that move start where their timeline starts (timelines.ts), hidden until it shows   them. Colours are light-dark() tokens: at night the desktop is a dusk and its windows dark.   Memory. The hero is one clipped box. The camera, the canvas and each moving part are moved and   faded by transforms and opacity only; the wallpaper is gradients, painted once. */.hero {  --wall-1: light-dark(#f7d050, #b8752a);  --wall-2: light-dark(#f6b23a, #a9581f);  --wall-3: light-dark(#f4a02e, #8f3f1d);  --wall-4: light-dark(#e2643f, #6a2620);  --wall-5: light-dark(#d4431f, #4d1c22);  --wall-sun: light-dark(#ffe58a, #e7a64a);  --wall-rim: light-dark(#fbe27a, #c99a4c);  --wall-sheen: light-dark(#f9f07c, #d9a24a);  --wall-sky: light-dark(#5fbae6, #3d6796);  --wall-blue: light-dark(#3a86c8, #24497f);  --menubar: light-dark(rgb(255 255 255 / 0.55), rgb(30 30 32 / 0.55));  --menu-ink: light-dark(#191919, #f1f1f1);  --win: light-dark(#fafafa, #2b2b2e);  --win-edge: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08));  --win-line: light-dark(#ebebeb, #3a3a3d);

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import type { ReactNode } from 'react';/* * The line icons of the panel and its illustrations: 24-unit drawings stroked in currentColor. * Their size comes from the class they are given (the lab draws an unsized SVG at 16 px), and * they are decorative: whatever they stand for is said in words next to them. */function Icon({  className,  children,  fill,}: {  className?: string;  children: ReactNode;  fill?: boolean;}) {  return (    <svg      className={className}

'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. `visible` and `reduced` are returned too: the * illustrations loop while the panel is visible, whoever is using it, and hold still under reduced * motion. */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(