Choice popover

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useLayoutEffect, useRef, useState } from 'react';import { Choice, type ChoiceHandle } from './choice';import { COMPANIES, DEALS, FEEDBACK, PEOPLE } from './data';import { DemoPointer, runDemo } from './demo-pointer';import { useAutoplay } from './use-autoplay';import styles from './choice-popover.module.css';/* * Choice popover: multi-select popovers for a CRM, laid out as a board of their states, every * one of them live (choice.tsx is the popover itself). * * - On top, choosing: people, companies and deals, the ticked ones pinned above a separator. *   Under them, the search states: no results (the create row names the search), an empty list *   (start typing to create) and results with the matches in bold. * - The board takes the columns its width allows: three, then two, then one on a phone, each *   popover a set width in em of the text, which follows the width too. * - While on screen and untouched, a demo pointer ticks a person and a deal, searches the *   companies and ticks one, then names a new company and creates it; the board then starts over. *   On a narrow board it does the same in the popovers it shows. * - Light or dark: every colour of the board and the popovers is a light-dark() token in the CSS,

'use client';import {  useId,  useImperativeHandle,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type ReactNode,  type Ref,} from 'react';import { NOUNS, createItem, type ChoiceItem, type Kind } from './data';import { Avatar, CompanyMark, PlusCircle, Ring, StatusIcon } from './visuals';import styles from './choice-popover.module.css';/* * One choice popover: a search field over a list of records to tick, and a row that creates one. * * - The ticked records are pinned at the top, above a separator. A tick does not move its row at *   once, which would pull it from under the pointer: the list settles when the pointer leaves, *   when the field loses focus or when the search changes, and the rows glide to their places. * - The rows keep their order in the page and are placed by CSS `order`, and a search hides the

/* Choice popover (choice-popover.tsx, choice.tsx): a stage with a board of popovers, three   columns wide, then two, then one on a phone. Sizes are in em of the stage's text: 14px wherever   the columns fit, a little less on the way down. A popover's geometry is in em of 0.93 of it,   and its words are a touch smaller again (--words).   The stage is one layout boundary of a set height, so what the demo changes (rows lit, ticked,   filtered or settling) lays out the stage alone; the rows glide by their transform and the   pointer moves on a small layer of its own.   Colours are the tokens below, light, then light-dark(light, dark) pairs: 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). The pairs sit in @supports, which a build that   rewrites light-dark() for older browsers leaves as written; without light-dark(), the light   colours stay. The avatars and the company marks keep their own colours. A popover on its own   (Choice, outside the board) carries the tokens itself. */.root,.popover:not(.root *) {  /* The stage and its edge; a popover, its border and its lift; a lit row (under the pointer or     the keys). */  --stage: #fafafa;  --stage-edge: rgb(0 0 0 / 0.06);  --surface: #fff;  --border: #e3e3e3;

/* * What the popovers choose from: people, companies, feedback and deals of a small CRM. Every * record has an id and the label a search matches; the rest is what its row draws. */export type AvatarLook = {  /** The circle behind. */  bg: string;  skin: string;  hair: string;  /** The hair's cut. */  cut: 'short' | 'long' | 'bun' | 'curly' | 'crop';  shirt: string;};export type MarkName =  'sorrel' | 'duograph' | 'farwater' | 'corlit' | 'fenwild' | 'inlet' | 'fernlow' | 'waypost';export type FeedbackStatus = 'synced' | 'progress' | 'open';export type ChoiceItem =  | { kind: 'person'; id: string; label: string; avatar: AvatarLook | null }  | { kind: 'company'; id: string; label: string; mark: MarkName | null }  | { kind: 'feedback'; id: string; label: string; status: FeedbackStatus; count: number }

import type { CSSProperties, ReactNode } from 'react';import type { AvatarLook, FeedbackStatus, MarkName } from './data';/* * The rows' small pictures: illustrated avatars, company marks, the status of feedback, the * progress ring of a deal and the create row's plus. All decorative: every row says in words * what they show. * * The avatars and the marks keep their colours in both schemes, but for the one mark drawn in * black alone, which takes --mark-ink (white at night). The ring's colours are the stage's * tokens (choice-popover.module.css). *//** A person, drawn: a coloured disc (cut round by its class), the shoulders, the face, the hair. */export function Avatar({ look, className }: { look: AvatarLook; className?: string }) {  const hair: Record<AvatarLook['cut'], ReactNode> = {    short: (      <path d="M6.6 9.6c-.3-3 1.6-5 4.4-5s4.8 1.9 4.5 5c-.9-1.4-2.6-2.2-4.5-2.3-1.9.1-3.5.9-4.4 2.3z" />    ),    crop: (      <path d="M7 8.6c.1-2.6 1.8-3.9 4-3.9s3.9 1.3 4 3.9c-1.1-.9-2.4-1.3-4-1.3s-2.9.4-4 1.3z" />    ),    long: (      <path d="M6.2 15.2c-.9-1.9-.8-4.7-.3-6.6.7-2.6 2.6-3.9 5.1-3.9s4.4 1.3 5.1 3.9c.5 1.9.6 4.7-.3 6.6-.4-1.6-.8-3.8-.9-5.5-1.1-.9-2.5-1.5-3.9-1.5S8.2 8.8 7.1 9.7c-.1 1.7-.5 3.9-.9 5.5z" />

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