Sheet menu

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  Fragment,  useEffect,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type PointerEvent,} from 'react';import { DemoPointer, runDemo } from './demo-pointer';import { AppMark, Glyph, Smiley } from './icons';import { MENUS, TOOLBAR_MENUS, itemsOf, type Menu, type MenuEntry } from './menus';import {  COLUMNS,  NUMBER_FORMATS,  ROWS,  apply,  createSheet,

/* Sheet menu (sheet-menu.tsx): a light grey window on a white stage, its menu bar and toolbar on   top and the grid in a white panel; at night a dark grey window on a near-black stage, the grid   in a near-black panel and the menus a step lighter. Sizes are in em of the menus' text: 13px   where the whole window fits, down to 10.5px on a phone, where the window shows the columns it   has room for.   The stage is one layout boundary of a set height, so what the demo changes (a menu shown, a   cell's format, the toolbar's state) lays out the stage alone; the pointer moves on a small   layer of its own. */.root {  /* Its colours, light and dark: each light-dark() pair resolves by the color-scheme the root     inherits from the page, or the one the colorScheme prop sets (below). */  /* The stage and the grid's panel; the window's chrome; the menus; the grid's headers. */  --surface: #fff;  --surface-2: #f4f4f4;  --menu: #fff;  --head: #fcfcfc;  /* Text; toolbar icons and checks; submenu chevrons; shortcuts and headers; fx; what is off. */  --ink: #1f1f1f;  --ink-soft: #3d3d3d;  --ink-chevron: #4a4a4a;  --ink-muted: #8a8a8a;  --ink-faint: #9a9a9a;

import { NUMBER_FORMATS, SIZES } from './sheet';/* * The menus: the menu bar's six, and the two the toolbar opens (font size and number format). * An entry runs the command named by its id (sheet.ts), or opens the submenu of its `items`. * Which entries are checked, unavailable or relabelled depends on the sheet, so the component * works it out as it draws them. */export type MenuEntry =  | { kind: 'separator'; id: string }  | {      kind: 'item';      /** The command it runs, unique within its menu. */      id: string;      label: string;      /** The shortcut as it is drawn: "⌘Z". */      shortcut?: string;      /** The same, as aria-keyshortcuts spells it. */      keys?: string;      /** Shows a check: one of several (radio) or on and off (checkbox). */      check?: 'radio' | 'checkbox';      /** Never available in this sheet. */      disabled?: boolean;

/* * The sheet: sixteen rows of six columns, each cell a value and its format, plus the sheet's own * settings (gridlines, frozen rows, a colour scale on a column). Every command is a pure function * from one sheet to the next, so undo and redo are a matter of keeping the old ones. */export const ROWS = 16;export const COLUMNS = ['A', 'B', 'C', 'D', 'E', 'F'];export type NumberFormat = 'general' | 'number' | 'currency' | 'percent';export type Align = 'left' | 'center' | 'right';export type VAlign = 'top' | 'middle' | 'bottom';export type Wrap = 'overflow' | 'wrap' | 'clip';export type CellFormat = {  bold?: boolean;  italic?: boolean;  underline?: boolean;  strike?: boolean;  /** Text in the accent colour. */  color?: boolean;  /** A pale fill behind the cell. */  fill?: boolean;  /** A frame around the cell. */

import type { ReactNode } from 'react';/* * The window's drawings: line icons on a 16 px grid in the text's colour (the text colour's bar is * drawn in the colour it sets), the app's mark and the status chip's face. They are decorative; * every button carries its own name. Their other colours are tokens of the window's stylesheet. */function Icon({ className, children }: { className?: string; children: ReactNode }) {  return (    <svg      className={className}      viewBox="0 0 16 16"      fill="none"      stroke="currentColor"      strokeWidth="1.25"      strokeLinecap="round"      strokeLinejoin="round"      aria-hidden="true"    >      {children}    </svg>  );}

'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, * glide the pointer onto a target, press, calling the window's own handlers as a hand 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. * * The pointer moves by animations the compositor plays, so the glides cost no layout, and it is * an HTML box around a still drawing: a change of style inside an SVG lays the SVG out again. */export type Point = { x: number; y: number };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?: Point) => Promise<void>;  /** Presses and lets go; `action` runs as the pointer goes down. */  press: (action: () => void) => Promise<void>;  /** Fades the pointer out where it is. */

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