Safe triangle

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  Fragment,  useEffect,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type FocusEvent,  type KeyboardEvent,  type MouseEvent,} from 'react';import { farCorners, inBox, inTriangle, type Box, type Point } from './cone';import { GhostPointer, runDemo } from './ghost-pointer';import { FILE_MENU, type MenuItem } from './menu';import { useAutoplay } from './use-autoplay';import styles from './safe-triangle.module.css';/* * Safe triangle: a menu whose submenus stay open while the pointer travels to them.

/* Safe triangle (safe-triangle.tsx): a pale lavender stage with the menu in its middle, or at   night a deep indigo one. Sizes are in em of the menu's text, which follows the stage's width (a   container): 13px from about 540px wide, down to 11px on a phone. Below the width of the menu   and a submenu side by side, the submenus overlap the menu's right edge. The menu's padding, an   item's height and a divider's match the constants the component places the submenus with.   Colours are the tokens below, light-dark(light, dark): 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). */.root {  /* The stage, and the menus on it, a step up. */  --surface: #f2f4ff;  --surface-2: #fff;  /* Items; the checkbox's words; shortcuts; the drawn keys and the chevrons. */  --ink: #30354c;  --soft-ink: #4b5064;  --ink-muted: #9b9ba4;  --key: #bdbec7;  --chevron: #cfd0db;  /* The menus' hairlines and dividers, and the stage's edge. */  --line: rgb(0 0 0 / 0.06);  --edge: rgb(0 0 0 / 0.06);  /* The menus' soft shadow, far and near. */

/* * The prediction cone: a triangle from the pointer to the near edge of the open submenu. While * the pointer is on the item that opened the submenu, the cone starts at the pointer; once it * leaves the item, the cone stays where it left. A pointer that is still inside the cone and * still heading for the submenu is on its way there, so the items it crosses are left alone. */export type Point = { x: number; y: number };export type Box = { left: number; top: number; right: number; bottom: number };/** How far the cone reaches past the submenu's top and bottom, as a share of an item's height. */const BLEED = 0.32;export const inBox = (p: Point, box: Box) =>  p.x >= box.left && p.x < box.right && p.y >= box.top && p.y < box.bottom;/** * The cone's far corners, on the submenu's left edge: above its top and below its bottom by a * third of an item's height, so a pointer aiming at the first or the last item stays inside. */export function farCorners(submenu: Box, itemHeight: number): [Point, Point] {  const x = submenu.left + 1;  const bleed = itemHeight * BLEED;

/* * The menu's content: groups of items, drawn with a divider between groups. An item with `items` * opens a submenu to its right; the others are actions. */export type SubmenuItem = {  /** Unique across the whole menu. */  id: string;  label: string;};export type MenuItem = {  /** Unique across the whole menu. */  id: string;  label: string;  /** The shortcut as it is drawn, on the right: "⌘N". */  shortcut?: string;  /** The same shortcut for assistive technology, as aria-keyshortcuts spells it: "Meta+N". */  keys?: string;  /** A destructive action, drawn in red. */  danger?: boolean;  /** The items of its submenu. */  items?: SubmenuItem[];};

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's ghost pointer, and the timeline that moves it. The menu follows the pointer on every * frame, as it follows a mouse, so each glide is a requestAnimationFrame loop that places the * arrow and hands the menu its position on screen; nothing runs between glides. 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 Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** The point at a share of `target`'s width and height, in the stage's px. */  pointOn: (target: Element | null | undefined, x: number, y: number) => Point | null;  /**   * Glides the pointer to `to` (in the stage's px) over `ms`, along a path bent sideways by   * `bend` (a share of its length; 0 is a straight line).   */  glide: (to: Point | null, ms: number, bend?: 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. */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;