Stock grid

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useId,  useLayoutEffect,  useMemo,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,  type ReactNode,  type RefObject,} from 'react';import {  CATEGORIES,  FIELD_NAMES,  PLANS,  PRICE_LIST,  START,

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The stock grid's model: an invented corner shop's category mix, and the rules that read it. * * - A category holds a share of the stock (its actual, in %), a target share for each season plan, *   a tolerance in percentage points, a minimum order, a supplier and a case cost. * - Its stage follows from the gap between actual and target: inside half the tolerance it is on *   plan, inside the tolerance it is on watch, beyond it off plan. A category with no price yet is *   unpriced, one put on hold is on hold; neither gets an order. * - An off-plan category gets a suggested order, in $k, that brings it back to its target (or just *   inside its tolerance). Buys that would spend more than the budget are scaled down to fit. * - Everything here is a pure function of a Doc, the editable part of the state; the component *   keeps the Doc as of the last submission (the base) to count and mark what changed. */export type Supplier = 'DST' | 'WHL' | 'DIR';export type Plan = 'Winter' | 'Spring' | 'Summer' | 'Autumn';export type OrderTo = 'Target' | 'Edge';export type Stage = 'on' | 'watch' | 'off' | 'unpriced' | 'hold';export type Field = 'supplier' | 'target' | 'tol' | 'min' | 'cost' | 'value' | 'order';export const PLANS: Plan[] = ['Winter', 'Spring', 'Summer', 'Autumn'];export const SUPPLIERS: { id: Supplier; name: string }[] = [

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useId, useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';import {  PLANS,  categoryOf,  costLog,  fmt1,  signed,  supplierName,  type Doc,  type Entry,  type Stage,  type Suggestion,} from './data';import { Icon, type IconName } from './icons';import styles from './stock-grid.module.css';/* * The drawer of one category, over the blurred grid: its stage, its numbers against the current * plan and every other plan, its cost log and its history, with Hold and Stage Order at the foot. * It is a modal dialog: it takes the focus, keeps Tab inside, and Escape or the close button

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The stock grid's icons: thin line drawings on a 16-unit grid, stroked in the current colour. * They are decorative (the words next to them, or the button's label, say what they mean); the * stylesheet sizes them. */export type IconName =  | 'columns'  | 'stage'  | 'revert'  | 'send'  | 'chevron'  | 'left'  | 'right'  | 'check'  | 'close'  | 'share'  | 'layers'  | 'target'  | 'tolerance'  | 'note'  | 'tag'

// Copyright (c) 2026 Bruno Delorence. MIT License.'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 = {

// Copyright (c) 2026 Bruno Delorence. MIT License.'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, or never when `idle` is null. */export function useAutoplay<T extends HTMLElement>(idle: number | null = 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(

/* Stock grid (stock-grid.tsx): a card on a plain stage. The card has a title bar, a body (the   side panel and the grid) and a footer; toasts, menus, the drawer and the dialog sit over it on   the stage.   Sizes are px of a 13 px interface. The grid's rows have fixed heights, so the side panel's Costs   block lines up with the three cost rows; its columns share the width that is left, down to a   minimum, under which the grid scrolls sideways inside the card (the row names stay put).   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).   Motion is transforms and opacity: the selection moves by a transform, columns slide (FLIP),   toasts drop in and stack, menus, the drawer and the dialog fade and rise. Under reduced motion   all of it is instant. */.root {  position: relative;  container-type: inline-size;  width: 100%;  box-sizing: border-box;  padding: 30px 16px 16px;  overflow: hidden;  overflow: clip;  border-radius: 18px;