Records table

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useLayoutEffect,  useMemo,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import {  ColumnPanel,  PROPERTY_TYPES,  typeIcon,  type ColumnSettings,  type PropertyType,} from './column-panel';import { CATEGORY_COLORS, COMPANIES, COMPETITORS, type CompanyRecord, type Strength } from './data';

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useId, useRef, useState, type CSSProperties, type ReactNode } from 'react';import { GlideMenu, type MenuItem } from './glide-menu';import { Icon, type IconName } from './icons';import styles from './records-table.module.css';/* * A column's settings: how an agent fills it. Its type, the tool or model it uses, whether it checks * its answers against sources, which other columns it reads, and the prompt, where those columns * stand as small chips. Go calculate fills the column again; Pin moves it next to the company; a * column added from the table can be hidden again. * * - Type, Tool and Inputs open small menus beside the panel (or over it when there is no room), *   which pop in from their corner in 140 ms. * - The prompt is a contentEditable line: typed text and the chips of the columns it mentions. *   What the reader types is read back from it as they type; it is drawn afresh only when another *   column's settings come in. */export const PROPERTY_TYPES: { type: PropertyType; icon: IconName }[] = [  { type: 'Text', icon: 'text' },

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type ReactNode,} from 'react';import { Icon } from './icons';import styles from './records-table.module.css';/* * A short menu under a small heading. A soft highlight sits under the row the pointer or the focus * is on and glides to the next by its top and height (220 ms), fading out when both leave. Up and * down arrows, Home and End move the focus between the rows; Escape is the opener's to handle. */export type MenuItem = {  key: string;  label: string;

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { ReactNode } from 'react';/* * The table's line icons, drawn on a 24-unit grid with round ends, in the colour of the text around * them. Every one is decorative: the control it sits in carries the words. */export type IconName =  | 'text'  | 'file'  | 'collection'  | 'single'  | 'multi'  | 'url'  | 'reference'  | 'json'  | 'splitter'  | 'date'  | 'globe'  | 'cursor'  | 'sparkle'  | 'plus'

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The sample book: sixty ice-cream makers, sellers and cafés (invented, with example.com sites), the * colour of each category, and what the demo's "Competitors" column finds for them. *//** How strong a relationship is, from the last interaction. */export type Strength = 'very-strong' | 'strong' | 'weak' | 'very-weak' | 'none';export type CompanyRecord = {  /** Names the row in selections; the name is used when absent. */  id?: string;  name: string;  /** Shown after the name: “Alpine Churn — Zürich”. */  city?: string;  /** The company's website, without the scheme: “alpine-churn.example.com”. */  site?: string;  categories: string[];  /** When they last heard from you: days ago (for sorting) and how it reads. */  last?: [days: number, label: string];  strength: Strength;};

/* Records table (records-table.tsx): a soft grey stage with a 480 px card in its middle, the grid   of companies scrolling inside it both ways, or at night a graphite stage with the card a step   lighter.   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). Tags, the selected rows and the selected column mix their colour into   the card's in srgb, so each scheme keeps its own strength of tint.   Memory. The grid is one scroller: the header, the company column and the footer stick to its   edges, painted opaque so nothing shows through. Motion is opacity and transforms (the menus'   pop-in, the sort arrow, the calculating dot) plus the menus' highlight gliding by top and height   within one short list. */.root {  /* The stage, the card, the hover and the footer's and prompt's inset. */  --canvas: oklch(96.1% 0.002 247.84);  --surface: oklch(100% 0 0);  --hover: oklch(97% 0.002 247.839);  --inset: oklch(97.9% 0.002 247.839);  --mark: oklch(96.1% 0.001 286.375);  /* Words: strong, quiet and faint. */  --ink: oklch(24.7% 0.006 258.361);  --ink-2: oklch(50.6% 0.01 264.477);

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