Sidebar nav

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type KeyboardEvent,  type PointerEvent as ReactPointerEvent,  type ReactNode,} from 'react';import { DemoPointer, runDemo, type Demo, type Point } from './demo-pointer';import { useAutoplay } from './use-autoplay';import styles from './sidebar-nav.module.css';/* * Sidebar nav: the left rail of a chat app. A workspace switcher and a collapse button across its * head, three actions (New chat, Home, Invite users), the Chats group with its search, and an * Upgrade button at its foot.

/* Sidebar nav (sidebar-nav.tsx): a quiet stage with the rail standing in its middle, 224 px wide   and 600 px tall, on the stage's own colour. At night the stage is near-black and the fills a   shade lighter; by day the stage is a pale grey and the fills a shade darker.   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), or the one   its colorScheme prop sets (data-color-scheme).   Memory. What moves is the rail's width, the rows' widths, a few opacities, transforms and   colours, and the highlights' top and height; nothing runs while the sidebar is still. */.root {  /* The words: the stronger ones, the labels and icons, the quiet ones (counts, headings). */  --ink: oklch(24.7% 0.006 258.361);  --ink-2: oklch(50.6% 0.01 264.477);  --ink-3: oklch(69.5% 0.009 264.505);  /* The stage, the menu, the search field, and the fill under a hovered or picked row. */  --canvas: oklch(96.1% 0.002 247.84);  --surface: oklch(100% 0 0);  --field: oklch(96.1% 0.001 286.375);  --fill: oklch(93.3% 0.003 247.86);  /* Edges: the stage's and the foot's rule; the Upgrade button under the pointer. */  --line: oklch(94.6% 0.003 264.542);  --line-strong: oklch(91.2% 0.005 258.326);

'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 control, press it and call the component's own handler, as a click 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 is an HTML box around a still drawing: it glides by an animation the compositor * plays, and the press scales a box that keeps a transform at rest, so nothing it does needs a * layout. */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>;

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